/* ============================================================
   かなりリアル打 ― デザインシステム（全ページ共通）
   方眼ノート＋マスキングテープ／テラコッタ×セージ

   ▼ ルール（変更時は必ず守る）
   - 色は下の :root に定義してから使う。直書きしない
   - 角丸は 18px（カード）/ 14px（内枠）/ 12px（小付箋）の3段階のみ
   - 区切りは実線ではなく 2px dashed
   - --faint は単位などの極小装飾のみ（コントラスト不足のため本文に使わない）
   ============================================================ */
:root{
  --bg:#F7F1E3;            /* 方眼の地 */
  --paper:#FFFDF6;         /* 紙カード */
  --grid:rgba(198,113,57,.07);
  --ink:#201E1D;           /* 本文 */
  --ink-2:#3F3A33;
  --sub:#8A7F6E;           /* 補足 */
  --faint:#A89C8A;         /* 極小の装飾のみ */
  --line:#E4D7BF;          /* 点線・罫線 */
  --line-2:#F0E4CC;
  --edge:#D9CBA8;
  --tc:#C67139;            /* テラコッタ（主要CTA・誤入力・お題） */
  --tc-700:#8C491A;
  --tc-100:#F6E3D3;
  --sg:#7A8A5E;            /* セージ（正解・進捗・自由練習） */
  --sg-700:#56633F;
  --sg-300:#B4C098;
  --sg-100:#EDF0E2;
  --ok:var(--sg);
  --ng:var(--tc);
  --gray:#C8BCA8;
  --gray-700:#8C8271;      /* 称号の最下位・補助 */
  --gold:#C9A87C;          /* 1位・最上位称号のふち飾りのみ */
  --tape-tc:rgba(198,113,57,.35);
  --tape-sg:rgba(122,138,94,.35);
  --r-card:18px;           /* 紙カード */
  --r-in:14px;             /* 内側の点線枠 */
  --r-sm:12px;             /* 小付箋 */
  --sh-sm:0 2px 6px rgba(90,70,40,.08);
  --sh-md:0 6px 16px rgba(90,70,40,.10);
  --sh-lg:0 10px 26px rgba(90,70,40,.14);
  /* 指ガイドの色 */
  --f-lp:#DFA3A3; --f-lr:#E3BA8C; --f-lm:#E0CD89; --f-li:#ABBE92;
  --f-th:#C67139; --f-ri:#9ABDAC; --f-rm:#9DB4C4; --f-rr:#B5A7C9; --f-rp:#CB9EB2;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:42px 42px;
  color:var(--ink);
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tc-700);}
a:hover{color:var(--tc);}
:focus-visible{outline:2px solid var(--tc);outline-offset:2px;border-radius:6px;}
.hidden{display:none !important;}
ruby rt{font-size:10px;font-weight:500;color:var(--faint);letter-spacing:0;}

/* ---------- 紙カード（マステ1枚＋内側の点線枠） ---------- */
.paper{position:relative;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-md);padding:18px;}
.paper::before{content:"";position:absolute;top:-13px;left:50%;width:104px;height:26px;background:var(--tape-tc);border-radius:3px;transform:translateX(-50%) rotate(-3deg);}
.paper.sage::before{background:var(--tape-sg);}
.paper > .inner{border:2px dashed var(--line);border-radius:var(--r-in);padding:22px 28px;}
.dashed-sep{border-top:2px dashed var(--line);margin:14px 0;}

/* ---------- ボタン ---------- */
button{font-family:inherit;cursor:pointer;}
.btn-primary{background:var(--tc);color:#fff;border:none;border-radius:999px;padding:13px 48px;font-size:16px;font-weight:900;box-shadow:0 4px 0 var(--tc-700);transition:transform .12s,background .12s;}
.btn-primary:hover{background:#B4682F;}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tc-700);}
.btn-primary:disabled{background:#EFE7D6;color:#B0A695;box-shadow:none;cursor:not-allowed;}
.btn-sage{background:#fff;color:var(--sg-700);border:2px solid var(--sg);border-radius:999px;padding:9px 22px;font-size:13px;font-weight:800;transition:background .12s;}
.btn-sage:hover{background:var(--sg-100);}
.btn-sage:active{background:#E2E8D4;}
.btn-ghost{background:#fff;color:#5D554A;border:2px solid var(--gray);border-radius:999px;padding:9px 26px;font-size:13px;font-weight:800;transition:background .12s;}
.btn-ghost:hover{background:#F3EEE2;}
.btn-tc-out{background:#fff;color:var(--tc-700);border:2px solid var(--tc);border-radius:999px;padding:9px 22px;font-size:13px;font-weight:800;transition:background .12s;}
.btn-tc-out:hover{background:var(--tc-100);}

/* ---------- ヘッダー（全ページ追従） ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,241,227,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 8px 14px -12px rgba(90,70,40,.45);
}
.hdr-in{display:flex;align-items:center;gap:14px;max-width:900px;margin:0 auto;padding:14px 16px;}
.hdr-in .stack{display:flex;flex-direction:column;gap:2px;}
.title{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:900;letter-spacing:.05em;cursor:pointer;color:var(--ink);text-decoration:none;}
.title::after{content:"打";width:32px;height:32px;border-radius:10px;background:var(--tc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;transform:rotate(-8deg);box-shadow:var(--sh-sm);}
.title:hover{color:var(--ink);}
.subtitle{font-size:11.5px;color:var(--sub);}
.subtitle .mark{position:relative;display:inline-block;font-weight:900;}
.subtitle .mark::before{content:"";position:absolute;left:-3px;right:-3px;bottom:0;height:8px;background:var(--tape-sg);border-radius:2px;}
.subtitle .mark span{position:relative;}
.spacer{flex:1;}
/* プレイ中にヘッダーへ出す「お題」ピル（仕様②） */
.play-theme{background:#fff;border-radius:999px;padding:5px 16px;font-size:12px;font-weight:800;color:var(--tc-700);box-shadow:var(--sh-sm);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.timer-wrap{display:flex;align-items:center;gap:12px;}
.timer-label{font-size:12px;font-weight:700;color:var(--sub);}
.timer-bar{width:150px;height:12px;border-radius:999px;background:var(--line);overflow:hidden;}
.timer-bar > i{display:block;height:100%;width:100%;background:var(--sg);border-radius:999px;transition:width .3s linear,background .3s;}
.timer-wrap.last .timer-bar{background:#F0DCC8;}
.timer-wrap.last .timer-bar > i{background:var(--tc);}
.timer-text{font-size:20px;font-weight:900;}
.timer-text small{font-size:12px;font-weight:700;}
.timer-wrap.last .timer-text{color:var(--tc);}
#quitBtn{background:#fff;color:var(--tc-700);border:2px solid var(--tc);border-radius:999px;padding:7px 20px;font-size:13px;font-weight:800;}
#quitBtn:hover{background:var(--tc-100);}
#quitBtn .x{margin-right:6px;}

/* ---------- プレイ中のカウンタ（紙なし・点線の下線） ---------- */
.scorebar{display:flex;justify-content:center;gap:34px;max-width:900px;margin:16px auto 0;padding:0 16px;}
.scorebar .chip{min-width:96px;text-align:center;border-bottom:2px dashed var(--edge);padding:0 6px 8px;}
.scorebar .chip .k{display:block;font-size:10.5px;font-weight:700;color:var(--sub);margin-top:3px;}
.scorebar .chip .v{display:block;font-size:19px;font-weight:900;color:var(--sg-700);line-height:1.15;}
.scorebar .chip .v.miss{color:var(--tc-700);}

/* ---------- レイアウト ---------- */
main{padding:0 16px 40px;}
.stage{max-width:900px;margin:0 auto;}
.panel{margin-top:22px;}
/* 練習画面は1画面に収める（スクロールさせない）。入りきらない時だけ main の中で送る */
body.app{height:100vh;overflow:hidden;display:flex;flex-direction:column;}
body.app main{flex:1;min-height:0;overflow-y:auto;display:flex;padding:0 16px 14px;}
body.app .stage{margin:auto;width:100%;}
body.app .panel{margin-top:0;}
body.app #rankViewPanel .rank-inner{max-height:min(430px,48vh);overflow:auto;}
body.app .rank-scroll{max-height:min(260px,26vh);}
h1,h2,h3{font-family:inherit;font-weight:900;margin:0;}
.kicker{font-size:11.5px;font-weight:900;color:var(--sub);letter-spacing:.08em;}

/* ---------- スタート画面 ---------- */
.lead{margin:0;font-size:13.5px;line-height:1.9;color:#5D554A;}
.note{margin:10px 0 0;font-size:13px;line-height:1.9;color:#5D554A;}
.mode-select{display:flex;gap:6px;background:var(--bg);border-radius:999px;padding:5px;width:max-content;}
.mode-btn{background:transparent;border:none;border-radius:999px;padding:9px 22px;font-size:13px;font-weight:800;color:#5D554A;display:flex;flex-direction:column;align-items:center;line-height:1.35;}
.mode-btn span{font-size:10.5px;font-weight:700;color:var(--sub);}
.mode-btn.sel{background:#fff;border:2px solid var(--tc);color:var(--tc-700);font-weight:900;padding:7px 22px;}
.mode-btn:hover:not(.sel){background:rgba(255,255,255,.6);}
.rank-view-open button{background:#fff;color:var(--sg-700);border:2px solid var(--sg);border-radius:999px;padding:9px 22px;font-size:13px;font-weight:800;}
.rank-view-open button:hover{background:var(--sg-100);}
/* プレイ中はヘッダーをタイマーに明け渡す */
body.now-playing .rank-view-open{display:none;}
/* モードで出し分けるヒーローカード（仕様①-a／①-c） */
.hero-wrap{display:flex;justify-content:center;margin-top:26px;}
.hero{max-width:640px;width:100%;text-align:center;}
.hero > .inner{padding:26px 46px;}
.hero-pill{display:inline-block;border-radius:999px;padding:4px 16px;font-size:12px;font-weight:900;color:#fff;background:var(--sg);}
.hero-pill.tc{background:var(--tc);}
.hero-title{font-size:24px;font-weight:900;line-height:1.5;margin-top:10px;}
.hero-note{font-size:12.5px;color:var(--sub);line-height:1.9;}
.today-theme{font-size:30px;font-weight:900;line-height:1.5;margin-top:10px;}
/* モード・AI接続状態による出し分け（body のクラスで切り替え） */
body.rank-mode .free-only{display:none !important;}
body:not(.rank-mode) .rank-only{display:none !important;}
body:not(.ai-on) .ai-only{display:none !important;}
body.ai-on .no-ai-only{display:none !important;}
body.rank-mode:not(.ai-on) .time-note{display:none;}
body:not(.rank-mode) .ai-need-note,body.ai-on .ai-need-note{display:none;}
.control-bar{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:#fff;border-radius:999px;box-shadow:var(--sh-sm);padding:12px 16px;margin-top:24px;}
.control-bar .sep{width:2px;height:30px;background:#EDE3D0;}
.time-select{display:flex;align-items:center;gap:10px;}
.time-select .step{width:32px;height:32px;border-radius:50%;border:2px solid var(--sg-300);background:#fff;color:var(--sg-700);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.time-select .step:hover{background:var(--sg-100);}
.fixed-min{font-size:19px;font-weight:900;color:var(--sg-700);}
.ai-inline{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--sub);}
.ai-link{background:none;border:none;font-family:inherit;font-size:12px;font-weight:800;color:var(--tc-700);text-decoration:underline;padding:0;}
.ai-link:hover{color:var(--tc);}
.min-box{display:flex;align-items:baseline;gap:4px;border:2px solid var(--sg);background:var(--sg-100);border-radius:12px;padding:5px 14px;}
.min-box input{width:42px;border:none;background:transparent;font-family:inherit;font-size:19px;font-weight:900;color:var(--sg-700);text-align:center;-moz-appearance:textfield;}
.min-box input::-webkit-outer-spin-button,.min-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.min-box span{font-size:13px;font-weight:800;color:var(--sg-700);}
.time-note,.start-note{text-align:center;font-size:12px;color:var(--sub);margin-top:14px;}
.time-note.in-bar{margin-top:0;font-weight:700;}
.start-row{display:flex;justify-content:center;margin-top:20px;}
.site-links{text-align:center;font-size:11.5px;color:var(--sub);margin-top:28px;line-height:2.1;}
.site-links a{margin:0 6px;}
.ad-box{display:flex;justify-content:center;margin-top:26px;}

/* ---------- AI設定 ---------- */
.api-box{margin-top:20px;}
.ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ai-badge{background:#EFE7D6;color:var(--sub);border-radius:999px;padding:3px 12px;font-size:10.5px;font-weight:900;}
.ai-badge.on{background:var(--sg-100);color:var(--sg-700);}
.ai-head-text{font-size:12.5px;color:#5D554A;}
/* AIのおすすめ枠（自由練習）／参加に必要な案内枠（ランキング・AI未接続） */
.ai-recommend{display:flex;align-items:center;gap:18px;background:var(--sg-100);border:2px solid var(--sg-300);border-radius:20px;padding:14px 22px;flex-wrap:wrap;}
.ai-recommend .tag{background:var(--sg);color:#fff;border-radius:999px;padding:4px 14px;font-size:11px;font-weight:900;flex-shrink:0;}
.ai-recommend .txt{flex:1;min-width:220px;text-align:left;}
.ai-recommend b{display:block;font-size:14px;color:var(--sg-700);}
.ai-recommend small{display:block;font-size:11.5px;color:#5D554A;margin-top:2px;}
.ai-connect-btn{flex-shrink:0;background:var(--sg);color:#fff;border:none;border-radius:999px;padding:10px 26px;font-size:13px;font-weight:900;box-shadow:0 3px 0 var(--sg-700);}
.ai-connect-btn:hover{background:var(--sg-700);}
.ai-connect-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sg-700);}
body.ai-on .ai-recommend{display:none;}
body.rank-mode:not(.ai-on) .ai-recommend{background:var(--tc-100);border-color:var(--tc);}
body.rank-mode:not(.ai-on) .ai-recommend .tag{background:var(--tc);}
body.rank-mode:not(.ai-on) .ai-recommend b{color:var(--tc-700);}
body.rank-mode:not(.ai-on) .ai-connect-btn{background:var(--tc);box-shadow:0 3px 0 var(--tc-700);}
body.rank-mode:not(.ai-on) .ai-connect-btn:hover{background:#B4682F;}
.ai-steps{list-style:none;counter-reset:step;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.ai-steps li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;font-size:13px;line-height:1.8;}
.ai-steps li::before{content:counter(step);width:26px;height:26px;border-radius:50%;background:var(--sg);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;}
.ai-steps li > span{flex:1;}
.ai-steps small{font-size:11.5px;font-weight:700;color:var(--sub);line-height:1.7;}
.api-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.api-row label{font-size:12.5px;font-weight:800;color:var(--sub);white-space:nowrap;}
.api-row input[type="text"],.api-row input[type="password"]{flex:1;min-width:200px;border:2.5px solid var(--sg-300);background:#fff;border-radius:14px;padding:11px 16px;font-family:inherit;font-size:14px;color:var(--ink);}
.api-row input::placeholder{color:#B9AE9B;}
.api-note,.api-status{font-size:11.5px;color:var(--sub);margin-top:10px;line-height:1.8;}
.api-status.err{color:var(--tc-700);font-weight:800;}
/* ランキング×AI未接続のときは、案内枠と注記で足りるので通常の状態表示は出さない */
body.rank-mode:not(.ai-on) .api-status:not(.err){display:none;}
.len-select{display:flex;gap:6px;}
.len-select button{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 16px;font-size:12px;font-weight:800;color:var(--sub);}
.len-select button.sel{background:var(--tc-100);border-color:var(--tc);color:var(--tc-700);font-weight:900;}

/* ---------- プレイ画面 ---------- */
.ready-main{font-size:20px;font-weight:900;text-align:center;}
.ready-sub{font-size:12.5px;color:var(--sub);text-align:center;margin-top:6px;line-height:1.8;}
.src-badge{position:absolute;top:14px;right:18px;border-radius:999px;padding:3px 12px;font-size:11px;font-weight:900;background:var(--sg-100);color:var(--sg-700);z-index:1;}
.src-badge.ai{background:var(--sg-100);color:var(--sg-700);}
.src-badge.local{background:#EFE7D6;color:var(--sub);}
.src-badge.rank{background:var(--tc-100);color:var(--tc-700);}
.sentence{font-size:27px;font-weight:700;line-height:2;letter-spacing:.06em;text-align:center;}
/* JSは1文字ずつ <span class="ch"> で描画し、入力済みに .done を付ける（契約） */
.sentence .ch{transition:color .08s;}
.sentence .ch.done{color:var(--sg-700);}
#playPanel.cleared .sentence .ch{color:var(--sg-300);}
.input-wrap{margin-top:14px;border-top:2px dashed var(--line);padding-top:16px;}
#typeInput{
  width:100%;border:3px solid var(--sg-300);background:#fff;border-radius:16px;
  padding:10px 18px;font-family:inherit;font-size:18px;text-align:center;color:var(--ink);
  cursor:default;   /* 白背景でIビームが見えなくなるため矢印のまま */
}
#typeInput.error{border-color:var(--tc);background:#FFF8F2;}
/* JSが付けるクラスは c=正しい / w=まちがい / p=変換中（契約） */
.diff{margin-top:8px;font-size:16px;font-weight:700;letter-spacing:.05em;text-align:center;min-height:24px;}
.diff .c{color:var(--sg-700);}
.diff .w{color:var(--tc-700);background:#F6DFCB;border-radius:4px;text-decoration:underline wavy var(--tc);text-underline-offset:3px;}
.diff .p{color:#B9AE9B;}
.hint{margin-top:4px;font-size:12px;font-weight:700;color:var(--sub);text-align:center;min-height:18px;}
.hint.err{color:var(--tc-700);}
.hint.ok{color:var(--sg-700);}
.gen-wait,.countdown{display:block;text-align:center;}
.countdown{font-size:64px;font-weight:900;color:var(--tc);}
.gen-wait{font-size:15px;color:var(--sub);}
.key-hints{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:16px;}
.key-hints span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--sub);}
.key-hints kbd{border:1.5px solid var(--edge);border-bottom-width:2.5px;border-radius:5px;background:var(--paper);padding:2px 8px;font-family:inherit;font-size:10px;font-weight:900;color:var(--ink-2);}

/* ---------- 結果画面 ---------- */
.result-head{text-align:center;font-size:24px;font-weight:900;}
.result-cols{display:flex;justify-content:center;align-items:flex-start;gap:26px;margin-top:26px;flex-wrap:wrap;}
.result-left{display:flex;flex-direction:column;gap:32px;width:400px;}
.result-right{display:flex;flex-direction:column;gap:14px;width:400px;}
.result-card{transform:rotate(-2deg);}
.result-card .inner{text-align:center;padding:16px 20px;}
.result-card .mode-tag{background:var(--tc);color:#fff;border-radius:999px;padding:3px 14px;font-size:11px;font-weight:900;}
.result-card .theme{font-size:16px;font-weight:900;margin-top:8px;line-height:1.5;}
.score-big{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:16px;font-size:13px;font-weight:800;color:var(--sub);}
.score-big b{font-size:56px;line-height:1;color:var(--tc);font-weight:900;}
/* 称号バッジ：JSは .grade-badge に g-e〜g-sp を付ける（契約） */
.grade-badge{background:var(--gray-700);color:#fff;border-radius:999px;padding:4px 16px;font-size:15px;font-weight:900;white-space:nowrap;}
.grade-badge.g-e{background:var(--gray-700);}
.grade-badge.g-d{background:var(--sg-300);color:var(--sg-700);}
.grade-badge.g-c{background:var(--sg);}
.grade-badge.g-b{background:var(--sg-700);}
.grade-badge.g-a{background:var(--tc);}
.grade-badge.g-s{background:var(--tc-700);}
.grade-badge.g-sp{background:var(--tc-700);box-shadow:inset 0 0 0 2px var(--gold);}
.score-detail{font-size:11px;color:var(--sub);margin-top:14px;line-height:1.8;}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;}
.result-item{position:relative;background:var(--paper);border-radius:var(--r-sm);box-shadow:var(--sh-sm);padding:10px;text-align:center;}
.result-item::before{content:"";position:absolute;top:-8px;left:50%;width:48px;height:15px;background:var(--tape-tc);border-radius:2px;transform:translateX(-50%) rotate(-4deg);}
.result-item:nth-child(2n)::before{background:var(--tape-sg);}
.result-item:nth-child(1){transform:rotate(-2.5deg);}
.result-item:nth-child(2){transform:rotate(1.5deg);}
.result-item:nth-child(3){transform:rotate(-1deg);}
.result-item:nth-child(4){transform:rotate(2deg);}
.result-item:nth-child(5){transform:rotate(-1.8deg);}
.result-item .num{font-size:20px;font-weight:900;color:var(--sg-700);line-height:1.15;padding-top:4px;}
.result-item .num small{font-size:10px;font-weight:700;color:var(--faint);margin-left:2px;}
.result-item .lbl{font-size:10.5px;font-weight:700;color:var(--sub);margin-top:7px;border-top:1.5px dashed var(--line);padding-top:7px;}
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.share-open{background:var(--tc);color:#fff;border:none;border-radius:999px;padding:11px 28px;font-family:inherit;font-size:13.5px;font-weight:900;box-shadow:0 3px 0 var(--tc-700);transition:background .12s;}
.share-open:hover{background:#B4682F;}
.share-open:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tc-700);}
.share-open-note{font-size:11px;color:var(--sub);font-weight:700;}

/* ---------- シェアのプレビュー ---------- */
/* .modal より詳細度を上げて幅を確定させる。canvas は固有幅1600pxなので
   min-width:0 を入れないと flex の最小サイズでモーダルが押し広げられる */
/* 背景の padding:20px と合わせて、背景ごとスクロールしない高さに抑える */
.modal.share-modal{width:min(760px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;min-width:0;}
/* 中でスクロールさせない。余った高さは画像プレビューが受け持って伸縮する */
.share-modal > .inner{
  display:flex;flex-direction:column;gap:clamp(6px,1.4vh,12px);
  overflow:hidden;min-height:0;min-width:0;padding:clamp(12px,2.4vh,20px) clamp(16px,3vw,22px);
}
.share-modal-head{text-align:center;}
.share-modal-head .t{font-size:18px;font-weight:900;}
.share-modal-head .d{font-size:12px;color:var(--sub);margin-top:5px;line-height:1.8;}
/* 画像と文を横に並べる。縦を食わないので両方スクロールなしで収まる */
.share-cols{display:flex;align-items:stretch;gap:14px;min-width:0;flex:0 0 auto;}
.share-preview-img{
  flex:1 1 auto;min-width:0;aspect-ratio:16/9;max-height:min(250px,46vh);
  border:2px dashed var(--line);border-radius:var(--r-in);background:var(--bg);
  padding:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* 画像は枠の中に収める（縦の余裕がないときはレターボックスで中央に） */
.share-preview-img canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:8px;box-shadow:var(--sh-sm);}
.share-preview-img .ph{font-size:12px;font-weight:800;color:var(--sub);}
/* そえる文は読み取り専用で見せるだけ。編集は送り先の投稿画面で行う */
.share-text-view{
  flex:0 0 300px;min-width:0;min-height:0;overflow-y:auto;
  border:2px dashed var(--sg-300);background:#fff;border-radius:var(--r-in);
  padding:10px 14px;font-size:12.5px;line-height:1.9;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;
}
/* 幅が足りないときは縦積みに戻す */
@media (max-width:720px){
  .share-cols{flex-direction:column;}
  .share-text-view{flex:0 0 auto;max-height:min(150px,20vh);}
}
.share-hint{flex:0 0 auto;font-size:11px;color:var(--sub);line-height:1.7;}
/* 主役は1つだけ。ほかは枠なしのテキストボタン（tertiary）にして静かに並べる */
.share-actions{flex-direction:column;gap:clamp(7px,1.6vh,12px);margin-top:clamp(9px,2vh,16px);}
.share-primary{
  background:#201E1D;color:#fff;border:none;border-radius:999px;
  padding:13px 46px;font-family:inherit;font-size:15px;font-weight:900;
  text-decoration:none;box-shadow:0 4px 0 #0B0A0A;transition:background .12s;
}
.share-primary:hover{background:#3A352F;color:#fff;}
.share-primary:active{transform:translateY(3px);box-shadow:0 1px 0 #0B0A0A;}
.share-subs{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 22px;}
.share-link{
  background:none;border:none;padding:3px 2px;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--sg-700);text-decoration:underline;
}
.share-link:hover{color:var(--tc-700);}
/* 「・」で区切ると下線が区切りにも乗るので、間隔だけで分ける */
body.app .share-modal-head .t{font-size:clamp(15px,2.6vh,18px);}
body.app .share-modal-head .d{font-size:clamp(11px,1.7vh,12px);margin-top:3px;}
body.app .share-text-view{font-size:clamp(11.5px,1.9vh,12.5px);padding:clamp(7px,1.5vh,10px) 14px;}
body.app .share-primary{padding:clamp(10px,2vh,13px) clamp(32px,5vw,46px);font-size:clamp(13.5px,2.2vh,15px);}
.share-head{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:900;color:var(--sub);}
.share-head i{flex:1;height:1.5px;background:var(--line);display:block;}
.share-x,.share-line,.share-copy,.share-img{border:none;border-radius:999px;padding:9px 22px;font-family:inherit;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;}
.share-x{background:#201E1D;color:#fff;}
.share-line{background:var(--sg);color:#fff;}
.share-copy{background:#fff;color:var(--sg-700);border:2px solid var(--sg);padding:7px 20px;}
.share-img{background:var(--tc);color:#fff;}
.share-x:hover{background:#3A352F;color:#fff;}
.share-line:hover{background:var(--sg-700);color:#fff;}
.share-img:hover{background:#B4682F;}
.result-actions{display:flex;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap;}

/* ---------- ランキング ---------- */
.rank-box{position:relative;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:18px;transform:rotate(1.5deg);}
.rank-box::before{content:"";position:absolute;top:-13px;left:50%;width:104px;height:26px;background:var(--tape-sg);border-radius:3px;transform:translateX(-50%) rotate(-3deg);}
.rank-box > *{position:relative;}
.rank-inner{border:2px dashed var(--line);border-radius:var(--r-in);padding:14px 18px 12px;}
.rank-title{font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rank-day{font-size:11.5px;font-weight:800;color:var(--sub);}
.rank-tabs{display:flex;gap:8px;margin-top:10px;}
.rank-tabs button{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 22px;font-size:13px;font-weight:800;color:var(--sub);}
.rank-tabs button.sel{background:var(--tc-100);border-color:var(--tc-100);color:var(--tc-700);font-weight:900;}
.rank-note{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.8;}
.rank-note.err{color:var(--tc-700);font-weight:800;}
.my-rank{background:var(--tc-100);color:var(--tc-700);border-radius:10px;padding:6px;text-align:center;font-size:13px;font-weight:800;margin-top:8px;}
.rank-scroll{max-height:260px;overflow:auto;margin-top:6px;}
.rank-table{width:100%;border-collapse:collapse;font-size:13px;}
.rank-table th{font-size:10.5px;font-weight:900;color:var(--faint);text-align:left;padding:6px 8px;border-bottom:1.5px dashed var(--line);}
.rank-table th.num,.rank-table td.num{text-align:right;}
.rank-table td{padding:8px;border-bottom:1.5px dashed var(--line);font-weight:700;}
.rank-table td.num{font-weight:900;color:var(--tc-700);}
.rank-table td small{font-size:10px;font-weight:700;color:var(--faint);margin-left:2px;}
.rank-table tr.me{background:var(--tc-100);}
.rank-table .medal{font-size:15px;}
.rank-table tbody tr{animation:rowIn .28s both;}
@keyframes rowIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
/* 空・異常系の状態カード（仕様⑬）。紙カードの内枠の中に出す */
.state-card{text-align:center;padding:10px 6px 2px;}
.state-card .t{font-size:16px;font-weight:900;line-height:1.6;}
.state-card .d{margin-top:12px;border-top:2px dashed var(--line);padding-top:12px;font-size:12.5px;color:var(--sub);line-height:1.9;}
.state-card .acts{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap;}
.state-card .acts .btn-primary{padding:11px 26px;font-size:13.5px;}
.state-card .acts .btn-ghost{padding:9px 22px;font-size:13px;}
body.app .state-card{padding:clamp(6px,1.4vh,10px) 6px 2px;}
body.app .state-card .t{font-size:clamp(14px,2.4vh,16px);}
body.app .state-card .d{margin-top:clamp(8px,1.6vh,12px);padding-top:clamp(8px,1.6vh,12px);font-size:clamp(11.5px,1.8vh,12.5px);}
body.app .state-card .acts{margin-top:clamp(10px,2vh,16px);}
.rank-more{text-align:center;margin-top:8px;}
.rank-more a{font-size:12px;font-weight:800;}
.rank-view-theme{font-size:24px;font-weight:900;line-height:1.4;}
.rank-view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:2px dashed var(--edge);padding-bottom:12px;margin-top:26px;}

/* ---------- 指ガイド ---------- */
.kb-card{background:#fff;border-radius:var(--r-card);box-shadow:var(--sh-sm);padding:16px 22px 12px;margin-top:26px;}
.kb-title{text-align:center;font-size:11px;font-weight:800;color:var(--sub);margin-bottom:9px;}
.kb{display:flex;flex-direction:column;gap:5px;max-width:800px;margin:0 auto;}
.krow{display:flex;gap:5px;}
.key{flex:1;height:32px;border-radius:8px;border:1.5px solid rgba(32,30,29,.10);border-bottom-width:3px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#3A352F;line-height:1.1;text-align:center;background:#F1E9DB;transition:transform .06s;}
.key.pressed{transform:translateY(2px);border-bottom-width:1.5px;filter:brightness(.94);}
.key.lp{background:var(--f-lp);} .key.lr{background:var(--f-lr);} .key.lm{background:var(--f-lm);} .key.li{background:var(--f-li);}
.key.ri{background:var(--f-ri);} .key.rm{background:var(--f-rm);} .key.rr{background:var(--f-rr);} .key.rp{background:var(--f-rp);}
.key.th{background:var(--f-th);color:#fff;} .key.mod{background:#F1E9DB;color:#9A8F80;}
.key.wide{font-size:8px;}
.kb-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:9px;flex-wrap:wrap;}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;}
.legend span{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#5D554A;}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.kb-foot svg{width:120px;height:82px;}
.home-note{text-align:center;font-size:10px;color:var(--sub);margin-top:5px;}

/* ---------- コラム記事（仕様⑧） ---------- */
/* 記事本文は紙カードに載せず、方眼の地に直接1カラムで置く */
.article{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}
.art-head{border-bottom:2px dashed var(--edge);padding-bottom:14px;margin-top:26px;}
.art-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.art-cat{background:var(--tc);color:#fff;border-radius:999px;padding:3px 14px;font-size:11px;font-weight:900;}
.art-min{font-size:11px;color:var(--sub);}
.article h1{margin:12px 0 0;font-size:30px;font-weight:900;line-height:1.5;}
.art-lead{margin:10px 0 0;font-size:13.5px;line-height:1.9;color:#5D554A;}
.art-body{display:flex;flex-direction:column;gap:16px;}
.article h2{margin:0;font-size:19px;font-weight:900;line-height:1.6;}
.article h3{margin:0;font-size:15px;font-weight:900;color:var(--sg-700);}
.art-body p{margin:0;font-size:14px;line-height:2;color:var(--ink-2);}
.art-body ul,.art-body ol{margin:0;font-size:14px;line-height:2;color:var(--ink-2);padding-left:1.4em;}
.art-body li{margin-top:2px;}
.art-body b{font-weight:900;color:var(--ink);}
.keyrow{
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',monospace;font-weight:900;font-size:16px;
  background:var(--sg-100);border:2px dashed var(--sg-300);border-radius:var(--r-sm);
  padding:14px;letter-spacing:4px;text-align:center;color:var(--sg-700);
}
/* 記事末尾の練習CTA（紙カード） */
.cta-card > .inner{display:flex;align-items:center;gap:20px;padding:20px 24px;flex-wrap:wrap;}
.cta-card .t{font-size:16px;font-weight:900;}
.cta-card .d{font-size:12px;color:var(--sub);margin-top:4px;}
.cta{
  flex-shrink:0;display:inline-block;text-decoration:none;text-align:center;
  background:var(--tc);color:#fff;font-size:14px;font-weight:900;
  border-radius:999px;padding:12px 34px;box-shadow:0 4px 0 var(--tc-700);
}
.cta:hover{background:#B4682F;color:#fff;}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tc-700);}
/* 記事内のパーツ（式の囲み・担当表・キーボード図） */
.example{
  background:var(--sg-100);border:2px dashed var(--sg-300);border-radius:var(--r-sm);
  padding:14px 18px;font-size:14px;font-weight:800;line-height:1.9;color:var(--sg-700);
}
.art-body table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.8;background:var(--paper);}
.art-body th,.art-body td{border:1.5px solid var(--line);padding:8px 10px;text-align:left;}
.art-body th{background:var(--sg-100);color:var(--sg-700);white-space:nowrap;font-weight:900;font-size:12px;}
.art-body td b{font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',monospace;font-size:14px;letter-spacing:1px;}
.dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;border:1.5px solid rgba(32,30,29,.12);vertical-align:-1px;}
/* 記事内のキーボード図は練習画面より大きめに見せる */
/* flexの子で margin:0 auto だと fit-content に縮むので、記事内では横幅いっぱいに戻す */
.art-body .kb{background:var(--paper);border:2px dashed var(--edge);border-radius:var(--r-in);padding:14px;width:100%;max-width:none;margin:0;}
.art-body .key{height:42px;font-size:14px;position:relative;}
.art-body .key small{font-size:10px;font-weight:700;}
.key .bump{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:14px;height:3px;border-radius:2px;background:rgba(32,30,29,.42);}
.art-body .legend{margin-top:14px;gap:6px 16px;font-size:12.5px;}
.art-body .home-note{font-size:12px;margin-top:8px;}
@media (max-width:640px){
  .art-body .key{height:32px;font-size:11px;border-radius:6px;}
  .art-body .kb{padding:8px;}
}

/* つづけて読む */
.next-read .h{font-size:12px;font-weight:900;color:var(--faint);letter-spacing:.06em;}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.next-grid a{
  display:block;background:var(--paper);border-radius:var(--r-in);box-shadow:var(--sh-sm);
  padding:14px 18px;text-decoration:none;color:var(--ink);
}
.next-grid a:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-md);}
.next-grid .cat{font-size:10.5px;font-weight:900;color:var(--tc-700);}
.next-grid .ttl{font-size:14px;font-weight:900;line-height:1.5;margin-top:5px;}

/* ---------- コラム一覧（仕様⑦） ---------- */
.col-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-bottom:2px dashed var(--edge);padding-bottom:12px;margin-top:26px;}
.col-head .ttl{font-size:24px;font-weight:900;line-height:1.4;margin-top:3px;}
.col-head .count{font-size:12px;font-weight:800;color:var(--sub);padding-bottom:3px;}
.col-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;margin-top:30px;}
.col-card{text-decoration:none;color:inherit;display:block;padding:16px;}
.col-card::before{width:80px;height:19px;top:-9px;}
.col-card > .inner{padding:16px 18px;border-radius:var(--r-sm);}
.col-card:hover{color:inherit;box-shadow:var(--sh-md);}
.col-tag{font-size:10.5px;font-weight:900;color:var(--tc-700);}
.col-title{font-size:16px;font-weight:900;line-height:1.5;margin-top:6px;}
.col-desc{font-size:11.5px;color:var(--sub);line-height:1.7;margin-top:6px;}
.col-foot{margin-top:12px;border-top:1.5px dashed var(--line);padding-top:8px;display:flex;justify-content:space-between;align-items:center;}
.col-foot .t{font-size:10.5px;color:var(--sub);}
.col-foot .r{font-size:11.5px;font-weight:800;color:var(--tc-700);}
.col-note{text-align:center;font-size:12px;color:var(--sub);margin-top:26px;}
footer{
  position:sticky;bottom:0;z-index:30;
  background:rgba(247,241,227,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:2px dashed var(--line);
  text-align:center;font-size:11.5px;color:var(--sub);padding:9px 20px;line-height:2;
}
footer a{color:var(--sub);margin:0 7px;text-decoration:none;font-weight:700;}
footer a:hover{color:var(--tc-700);text-decoration:underline;}

/* ---------- 広告 ---------- */
/* 左右で同サイズ・同位置の対称レイアウト。広い画面のときだけ表示 */
.ad-side{
  position:fixed;top:50%;transform:translateY(-50%);z-index:5;
  left:10px;width:158px;height:640px;display:none;text-align:center;
  background:var(--paper);border:2px dashed var(--edge);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:18px 6px 8px;
}
.ad-side.right{left:auto;right:10px;}
.ad-side .ad-label{position:absolute;top:5px;left:0;right:0;font-size:9px;font-weight:800;color:var(--faint);}
.ad-side img{max-width:100%;height:auto;}
.kb-ad{display:block;margin:0 4px;text-decoration:none;color:var(--ink);}
.kb-ad img{width:132px;height:132px;object-fit:contain;border-radius:var(--r-sm);}
.kb-ad-name{display:block;font-size:11px;font-weight:800;line-height:1.5;margin:4px 0 7px;}
.kb-ad-btn{display:inline-block;font-size:10.5px;font-weight:900;color:#fff;background:var(--tc);border-radius:999px;padding:5px 14px;}
.kb-ad:hover{color:var(--ink);}
.kb-ad:hover .kb-ad-btn{background:#B4682F;}
@media (min-width:1220px){
  .ad-side{display:block;}
  .ad-side.left{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;}
  .stage{max-width:880px;}   /* サイド表示中は本体を少しスリムにして左右に余白を作る */
  #adStart{display:none;}    /* サイドが出ている画面ではスタート下の広告は消して圧迫感を減らす */
}
/* 画面の縦幅が足りないときは消さずに縮小して収める（拡大率150%環境など） */
@media (max-height:760px){
  .ad-side{transform:translateY(-50%) scale(.85);}
  .ad-side.left{transform-origin:0% 50%;}
  .ad-side.right{transform-origin:100% 50%;}
}
@media (max-height:640px){
  .ad-side{transform:translateY(-50%) scale(.72);}
  .ad-side.left{transform-origin:0% 50%;}
  .ad-side.right{transform-origin:100% 50%;}
}
@media (max-height:530px){
  .ad-side{transform:translateY(-50%) scale(.6);}
  .ad-side.left{transform-origin:0% 50%;}
  .ad-side.right{transform-origin:100% 50%;}
}
@media (max-height:430px){
  .ad-side{display:none !important;}   /* さすがに入らない高さでは出さない */
}
body.now-playing .ad-side{display:none;}   /* タイピング中は集中優先で非表示 */

/* ---------- オンボーディング／モーダル ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(43,38,32,.35);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;overflow:auto;}
.modal{width:min(760px,100%);margin:auto;min-width:0;}
/* 低い画面でも収まるように、モーダルの中だけスクロールさせる */
.ai-modal{max-height:calc(100vh - 40px);display:flex;flex-direction:column;}
.ai-modal > .inner{overflow-y:auto;min-height:0;}
.onb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.onb-item{text-align:center;border:2px dashed var(--line);border-radius:var(--r-sm);padding:16px 12px;}
.onb-item .n{font-size:22px;font-weight:900;color:var(--sg-700);}
.onb-item .t{margin-top:8px;border-top:1.5px dashed var(--line);padding-top:8px;font-size:12.5px;font-weight:800;}
.onb-item .d{font-size:11px;color:var(--sub);margin-top:4px;}
.modal-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
/* モーダル右上の閉じるボタン */
.modal-close{
  position:absolute;top:10px;right:12px;z-index:1;
  width:30px;height:30px;border-radius:50%;border:2px solid var(--gray);background:#fff;
  color:#5D554A;font-family:inherit;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{background:#F3EEE2;}

/* ---------- スマホ案内（練習画面のみ／コラムは通常表示） ---------- */
#mobileNotice{display:none;}
@media (max-width:820px){
  body.app{height:auto;overflow:auto;display:block;}
  body.app #mobileNotice{display:flex;flex-direction:column;align-items:center;padding:28px 22px;min-height:100vh;}
  body.app main,body.app .timer-wrap,body.app #quitBtn,body.app .scorebar,.ad-side{display:none !important;}
  body.app .hdr-in{justify-content:center;}
}
.mn-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:22px;}
.mn-actions > *{width:100%;text-align:center;}

@media (max-width:960px){
  .result-left,.result-right{width:100%;max-width:420px;}
  .scorebar{gap:18px;}
  .col-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .article h1{font-size:23px;}
  .article h2{font-size:17px;}
  .next-grid{grid-template-columns:1fr;}
  .cta-card > .inner{flex-direction:column;align-items:stretch;text-align:center;}
  .cta{width:100%;}
  .hdr-in{padding:12px 14px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============================================================
   1画面に収めるための寸法調整（練習画面のみ／コラムは対象外）
   画面が低いほど自動で詰める。clamp の中央値が vh 連動
   ============================================================ */
body.app .hdr-in{padding:clamp(8px,1.6vh,16px) 16px;}
body.app .title{font-size:clamp(16px,2.4vh,19px);}
body.app .title::after{width:clamp(26px,3.8vh,32px);height:clamp(26px,3.8vh,32px);font-size:clamp(14px,2.2vh,17px);}
body.app .subtitle{font-size:clamp(10px,1.5vh,11.5px);}

/* スタート画面 */
body.app .hero-wrap{margin-top:clamp(6px,2vh,26px);}
body.app .hero > .inner{padding:clamp(12px,2.6vh,26px) clamp(20px,3vw,46px);}
body.app .hero-pill{padding:3px 14px;font-size:clamp(10.5px,1.6vh,12px);}
body.app .hero-title{font-size:clamp(16px,2.9vh,24px);margin-top:clamp(4px,1.2vh,10px);}
body.app .today-theme{font-size:clamp(18px,3.6vh,30px);margin-top:clamp(4px,1.2vh,10px);}
body.app .hero-note{font-size:clamp(11px,1.6vh,12.5px);line-height:1.75;}
body.app .dashed-sep{margin:clamp(8px,1.6vh,14px) 0;}
body.app .api-box{margin-top:clamp(8px,1.8vh,20px);}
body.app .ai-recommend{padding:clamp(9px,1.6vh,14px) clamp(14px,2vw,22px);gap:clamp(10px,2vw,18px);}
body.app .ai-recommend b{font-size:clamp(12.5px,1.9vh,14px);}
body.app .ai-recommend small{font-size:clamp(10.5px,1.5vh,11.5px);}
body.app .ai-connect-btn{padding:clamp(7px,1.3vh,10px) clamp(18px,2vw,26px);font-size:clamp(12px,1.8vh,13px);}
body.app .control-bar{margin-top:clamp(8px,1.8vh,24px);padding:clamp(8px,1.4vh,12px) 16px;gap:clamp(10px,1.6vw,18px);}
body.app .mode-btn,body.app .mode-btn.sel{padding:clamp(6px,1.1vh,9px) clamp(14px,1.8vw,22px);font-size:clamp(12px,1.8vh,13px);}
body.app .time-select .step{width:clamp(26px,4vh,32px);height:clamp(26px,4vh,32px);}
body.app .min-box{padding:4px clamp(9px,1.2vw,14px);}
body.app .min-box input,body.app .fixed-min{font-size:clamp(15px,2.6vh,19px);}
body.app #startBtn{padding:clamp(9px,1.7vh,13px) clamp(30px,4vw,48px);font-size:clamp(14px,2.2vh,16px);}
body.app .time-note,body.app .start-note{margin-top:clamp(6px,1.4vh,14px);font-size:clamp(11px,1.6vh,12px);}
body.app .api-status,body.app .api-note{margin-top:clamp(5px,1vh,10px);font-size:clamp(10.5px,1.5vh,11.5px);}
body.app .site-links{margin-top:clamp(8px,1.8vh,28px);font-size:clamp(10px,1.5vh,11.5px);line-height:1.8;}
body.app .ad-box{margin-top:clamp(10px,2vh,26px);}

/* プレイ画面 */
body.app .scorebar{margin-top:clamp(6px,1.4vh,16px);gap:clamp(18px,3vw,34px);}
body.app .scorebar .chip{padding:0 6px clamp(4px,1vh,8px);}
body.app .scorebar .chip .v{font-size:clamp(15px,2.6vh,19px);}
body.app .paper > .inner{padding:clamp(12px,2.4vh,22px) clamp(18px,3vw,28px);}
body.app .sentence{font-size:clamp(17px,3.4vh,27px);line-height:1.85;}
body.app #typeInput{padding:clamp(7px,1.4vh,10px) 18px;font-size:clamp(14px,2.4vh,18px);}
body.app .input-wrap{margin-top:clamp(8px,1.6vh,14px);padding-top:clamp(9px,1.8vh,16px);}
body.app .diff{font-size:clamp(13px,2.1vh,16px);min-height:20px;}
body.app .countdown{font-size:clamp(34px,7vh,64px);}
body.app .key-hints{margin-top:clamp(8px,1.6vh,16px);gap:clamp(10px,1.6vw,16px);}
body.app .kb-card{margin-top:clamp(8px,1.8vh,26px);padding:clamp(8px,1.6vh,16px) clamp(14px,2vw,22px) clamp(6px,1.2vh,12px);}
body.app .key{height:clamp(20px,3.6vh,32px);font-size:clamp(9px,1.6vh,12px);border-radius:6px;}
body.app .kb{gap:clamp(3px,0.6vh,5px);}
body.app .krow{gap:clamp(3px,0.6vh,5px);}
body.app .kb-foot{margin-top:clamp(5px,1vh,9px);gap:clamp(8px,1.4vw,14px);}
body.app .kb-foot svg{width:clamp(72px,11vh,120px);height:auto;}
body.app .legend span{font-size:clamp(9.5px,1.4vh,11px);}

/* 結果画面 */
body.app .result-head{font-size:clamp(17px,2.9vh,24px);}
body.app .result-cols{margin-top:clamp(10px,2.2vh,26px);gap:clamp(14px,2vw,26px);}
body.app .result-left{gap:clamp(14px,3vh,32px);}
body.app .score-big{margin-top:clamp(8px,1.6vh,16px);}
body.app .score-big b{font-size:clamp(34px,6.4vh,56px);}
body.app .result-card .inner{padding:clamp(10px,2vh,16px) 20px;}
body.app .result-grid{gap:clamp(8px,1.8vh,12px) 10px;}
body.app .result-item{padding:clamp(6px,1.2vh,10px);}
body.app .result-item .num{font-size:clamp(15px,2.6vh,20px);}
body.app .result-item .lbl{margin-top:clamp(4px,0.9vh,7px);padding-top:clamp(4px,0.9vh,7px);}
body.app .share-head{font-size:clamp(10px,1.5vh,11px);}
body.app .share-row > *{padding:clamp(7px,1.3vh,9px) clamp(16px,2vw,22px);font-size:clamp(12px,1.8vh,13px);}
body.app .paper{padding:clamp(12px,2vh,18px);}
body.app .rank-box{padding:clamp(12px,2vh,18px);}
body.app .result-card .theme{font-size:clamp(13px,2.2vh,16px);margin-top:clamp(4px,1vh,8px);}
body.app .score-detail{margin-top:clamp(7px,1.4vh,14px);}
body.app .my-rank{padding:clamp(4px,0.9vh,6px);font-size:clamp(12px,1.9vh,13px);}
body.app .rank-table td{padding:clamp(5px,1.1vh,8px);}
body.app .rank-more{margin-top:clamp(5px,1vh,8px);}
/* 低い画面では統計の付箋を1列に並べて縦を稼ぐ */
@media (max-height:780px){
  body.app .result-grid{grid-template-columns:repeat(5,1fr);}
  body.app .result-item::before{width:34px;height:11px;top:-6px;}
  body.app .result-item .num small{display:block;margin-left:0;}
  body.app .rank-scroll{max-height:min(160px,21vh);}
  body.app .share-row > *{padding:6px 14px;font-size:11.5px;}
  body.app .share-row{gap:6px;}
  body.app .result-cols{gap:14px;}
}
body.app .result-actions{margin-top:clamp(10px,2.4vh,30px);}
body.app #againBtn{padding:clamp(9px,1.7vh,13px) clamp(32px,4vw,52px);}
body.app .rank-inner{padding:clamp(9px,1.6vh,14px) clamp(12px,2vw,18px) clamp(8px,1.4vh,12px);}
body.app .rank-view-head{margin-top:clamp(10px,2vh,26px);padding-bottom:clamp(7px,1.4vh,12px);}
body.app .rank-view-theme{font-size:clamp(17px,3vh,24px);}