:root{ color-scheme: light; }
:root{
  --bg:#f8f9fa; --card:#ffffff; --text:#2c2e30; --sub:#82868c;
  --line:#e3e5e8; --accent:#c86a8e; --accent-dim:#fbf1f4;
  --miss:#d8453f;
  /* ⚠--gold はもう使っていない（金メダルをやめた・2026-09-08）*/
  /* ⭐記録更新だけに使う「メダルの金」（2026-09-08 本人）。
     色はコインのSVG（index.html の #coinFace）と同じ系統にそろえてある */
  --medal-lt:#f6d980; --medal:#d9a52c; --medal-ink:#846508;
  /* 金メダルはやめた（2026-09-08 本人「記録更新はピンクでいい。金メダルは忘れよう」）*/
  --medal-solid:#c86a8e;
  --accent-deep:#a84a72;   /* 薄いピンクの上にのせる文字（読みやすさのため濃いほう）*/
  --stagew:664px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  /* ⭐サイトの地の文はこの1本（2026-09-08 本人「まずはフォント変えて」）。
     ⚠前は style.css が Yu Gothic、typing が Yu Gothic UI で、同じサイトに2種類の字が混ざっていた。
     ⭐游ゴシックは「かすれ問題」で本文向きではない。Windowsは Noto Sans JP（2024頃から標準）→ BIZ UDPゴシック → メイリオの順で受ける */
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","BIZ UDPGothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* ⚠下の空きを詰めた（2026-09-08 本人「使い方の下、開けなくていい」）。60px → 20px */
.tpwrap{max-width:1060px;margin:0 auto;padding:14px 20px 20px}

/* ⚠h1 と .catch は サイト共通（style.css）のものを使う＝座席表と同じ形（2026-09-08 本人）。
   ここで作り直さない。h1＝1.5rem／.catch＝さくら色の太字 1.2rem */
h1{margin:14px 0 4px}
h1 small{font-size:12px;color:var(--sub);font-weight:500;margin-left:8px}
.picon{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.13);margin-left:2px;
}
/* ⭐ニックネームと記録の行（設定の行の上）。
   ⚠ラベル・入力欄・ボタンの高さをそろえて、上下中央にそろえる（2026-09-08 本人）*/
.namerow{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
/* 🔴🔴 3px のずれの正体（2026-09-08にやっと見つけた）
   サイト共通の style.css に `label{margin:10px 0 4px}` がある。
   ⭐上10px・下4px の差の半分＝**3px だけ下にずれる**。
   ⚠align-items:center をいくら入れても直らないのはこれが理由。
   ⭐横に並べる行では label の margin を 0 にする */
.namerow label,.opts label,.playopts label{margin:0}
.namerow>*{display:flex;align-items:center;height:34px;box-sizing:border-box}
.namerow .namebox{gap:8px}
.namerow input,.namerow button{height:34px;box-sizing:border-box;padding-top:0;padding-bottom:0}
/* ⭐学生用は「音を出す」も同じ行。右にそろえる（2026-09-15 本人「音を出す、を右揃えで！」） */
.gakusei .namerow .optsound{margin-left:auto}
/* ⭐ニックネームの左端を、カードの白い部分の左端にそろえる（2026-09-15 本人）＝カードの並びと同じ11px（タイルのはみ出しぶん） */
.gakusei .namerow{padding-left:11px}

/* ⭐ステージの画面の設定（そのステージに効くものだけ）*/
.playopts{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  margin:0 0 10px;font-size:12px;color:var(--sub);
}
.playopts>*{display:flex;align-items:center;height:20px}
.playopts label{gap:5px;cursor:pointer}
.playopts input{margin:0}
.playopts .oglabel{margin-left:19px}
.spacer{flex:1}
.namebox{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);white-space:nowrap}
/* ⚠枠が大きすぎた（2026-09-08 本人）。名前は短いので、入る長さだけにする
   ⭐2026-09-20 本人「8桁の数値と、スペース入れて、7文字入るくらいの少し広めで」＝「12345678 あいうえおかき」で文字の幅152px＋左右の余白20px＝172px。少し余らせて190px */
.namebox input{
  border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-size:13px;
  width:190px;background:var(--card);color:var(--text);font-family:inherit;
}
button{
  font-family:inherit;font-size:13px;cursor:pointer;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  padding:7px 13px;transition:.15s;
}
/* ⚠ステージのカードも <button>。ここをグレーにするとカードを選んだときグレーになる（2026-09-08 本人） */
button:hover{background:var(--accent-dim)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:var(--accent-deep)}   /* ⭐ステージの色に合わせる（2026-09-17） */

#imeWarn{
  display:none;background:#fdf0ee;border:1px solid #f0c9c4;color:#a8433c;
  padding:10px 14px;border-radius:9px;font-size:13px;margin-bottom:14px;line-height:1.6;
}
#imeWarn.on{display:block}

/* ---- ステージ選択 ---- */
/* ⭐ステージのカードは、トップページのカードと同じ形（2026-09-15 本人「カードは同じでいいと思う」「大人用の見た目も同じカードに書き換えたい」）
   ＝白い地・角14px・軽い影・左に10pxはみ出すタイル。⚠タイルがはみ出すぶん、並びの左に11px空ける */
/* ⭐カードは横に並べる。⭐番号は左の列から下へ進む（2026-09-16 本人）。
   ⚠列の数と行の数は JS（layoutStages）が画面の幅から決める＝縦方向に流す */
.stages{display:grid;grid-auto-flow:column;gap:14px 18px;padding-left:11px}
.stage{
  position:relative;
  /* ⭐角は4px＝トップ（test の style.css :root{--radius:4px}）と同じ（2026-09-15 本人「カードの形もちょっと四角っぽい、トップページの形にしてみて」）
     ⚠typing★ は直下の古い style.css（--radius:14px）を読むので、数字で書いている */
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:14px 15px 14px 28px;cursor:pointer;transition:.15s;text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
/* ⭐タイル＝トップ（top.css の .t-card::before）と同じ作り。色だけステージごと（JS が --tile に入れる）
   ⭐色はタイピングのタイルの7色（2026-09-15 本人「タイルの色にしたらいいかなと思って」）。
   ⚠前は STAGE の文字をピンクの濃さの階段にしていた（2026-09-08）。色はタイルに移した */
.stage::before,
#stName[data-n]::before{
  /* ⭐番号をタイルの中に（2026-09-16 本人）。⚠前は上に「STAGE 1」の行があって、カードが1行ぶん高かった */
  content:attr(data-n);position:absolute;left:-11px;top:13px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13.5px;font-weight:700;letter-spacing:0;
  text-shadow:0 1px 1px rgba(90,70,60,.25);
  /* ⭐四角（2026-09-15 本人「まさかの丸だったね。タイルとは合わない」「男性も使ってもいいから四角にしようかな」）
     ⚠14px にしたら 28px の正方形が丸になっていた */
  width:28px;height:28px;border-radius:4px;
  background-color:var(--tile,var(--accent));
  background-image:
    radial-gradient(115% 78% at 50% -14%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.36) 36%,
      rgba(255,255,255,.05) 64%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,.16) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(120,100,70,.05),
    0 2px 4px rgba(85,74,58,.16),
    0 1px 1px rgba(85,74,58,.09);
}
/* ⭐押せることは浮く見た目で伝える（トップのカードと同じ）。
   ⚠button:hover のピンクの塗りは打ち消す（薄いグレーの地でぼんやりする・2026-09-08 本人） */
.stage:hover{
  background:var(--card);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transform:translateY(-2px);
}
.stage:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(0,0,0,.12)}
@media (hover:none){ .stage{box-shadow:0 4px 14px rgba(0,0,0,.10)} }
.stage .no{font-size:11px;color:var(--sub);letter-spacing:.08em;font-weight:700;line-height:28px;margin-top:-7px}
/* ⭐名前はタイルと同じ高さから始める（2026-09-16）。⚠STAGEの行を消したぶん、上を詰める */
.stage .nm{font-size:15px;font-weight:700;margin:0 0 5px;line-height:28px}
.stage .ds{font-size:12px;color:var(--sub);line-height:1.55}
/* ⚠グレー→さくら色に戻した（2026-09-08 本人「自己ベストの文字がグレー→ピンクに」）。
   ⚠金をやめて記録更新もさくら色になったので、ここを控える理由がなくなった */
.stage .best{font-size:11px;color:#dd7fa2;margin-top:8px;font-weight:600;min-height:14px}


/* ---- リードと見本（ページの型 6・7）---- */
.intro{display:flex;gap:24px;align-items:flex-start;margin:0 0 12px}
.introtext{flex:1 1 320px;min-width:0}
/* ⚠.lead はサイト共通（style.css）のものを使う＝座席表と同じ仕様。
   ここで作り直さない（字の大きさ・色・下の余白が変わってしまう）*/
/* ⚠黒は却下（2026-09-08 本人「黒にすると説明臭いからうっとうしかった」）。グレーのまま */
/* ⚠.can の形（箱・b＋small）はサイト共通（style.css）のまま。
   ⭐ここでは詰めるだけ（2026-09-08 本人「説明をそんな大きく取る必要なし」「縦はばとってる」）。
   ⚠タイピングの項目は他の道具より短いので、共通の大きさだと箱ばかりが目立つ */
.introtext .can{margin:0;padding-left:1.15em;list-style:disc}
/* ⚠黒い項目（b）をやめたので、大きさは li に付ける（2026-09-08）。
   ⚠以前は .can b と .can small に付けていたので、中身を文だけにしたら本文の16pxになった */
.introtext .can li{
  border:none;background:none;padding:0;margin-bottom:2px;
  font-size:12.8px;line-height:1.85;color:var(--sub);
}
.introtext .can li::marker{color:var(--accent)}
.introtext .can b{display:inline;font-size:13px;font-weight:700}
.introtext .can small{display:inline;font-size:12px;margin-left:6px;color:var(--sub)}
/* ⭐画像は線・影は使わない（ページの型 14）。押しても何も起きない。
   ⭐⭐座席表と同じ「半分ずつ」にする（2026-09-08 本人「文字とカード、逆だよ。座席表のように半分に」）。
     座席表＝文章49% : 画像44%。⚠文章の幅が狭くなるぶん行が増えるので、下の間延びも消える */
.introimg{
  flex:0 0 44%;width:44%;height:auto;display:block;
  border:1px solid var(--line);border-radius:10px;
}
/* ⭐2段のまま持たせる幅を広げた（2026-09-08 本人）。
   ⚠縦に積むと縦幅を食う＝この道具は「タブレットかPCで使うもの」なので、2段を優先する */
@media(max-width:900px){ .introimg{flex:0 1 42%;width:42%} }
@media(max-width:759px){
  .intro{flex-direction:column;align-items:center}
  .introtext{flex:1 1 auto;width:100%}
  /* ⚠縦並びにすると flex-basis が「高さ」になって画像がつぶれる。auto に戻す */
  .introimg{flex:0 0 auto;width:360px;margin:0 auto}
  /* ⭐縦に積んだときは説明を1項目1行にして、縦幅を半分にする（2026-09-08 本人「縦はばとってる」）*/
  .introtext .can li{padding:7px 11px;margin-bottom:6px}
  .introtext .can b{display:inline}
  .introtext .can small{display:inline;margin:0 0 0 7px}
}
@media(max-width:430px){ .introimg{width:86%} }

/* ⭐上の行を1行に収める（2026-09-08 本人「崩れてる」）。
   ⚠あいだの空き（.spacer）が先に幅を取るので、狭いときは消してニックネーム欄を縮める */
@media(max-width:1000px){
  .namebox{flex:0 1 auto;min-width:0}
  .namebox input{width:170px;min-width:0}   /* ⭐狭い画面も少し広げた（2026-09-20） */
}


/* ---- プレイ画面 ---- */
#play{display:none}
#play.on{display:block}
.stagewrap{max-width:var(--stagew);margin:0 auto}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px;color:var(--sub)}
.bar b{color:var(--text);font-size:14px}
#stProg{font-size:11px;line-height:1.25;text-align:center;color:var(--sub)}
.misshint{
  color:var(--miss);font-size:12px;font-weight:700;opacity:0;
  transition:opacity .2s;white-space:nowrap;
}
.misshint.on{opacity:1}
.misshint kbd{
  display:inline-block;min-width:18px;text-align:center;
  border:1px solid #e2b3ae;border-radius:4px;background:#fdf0ee;
  padding:1px 4px;margin:0 2px;font-family:Consolas,monospace;font-size:12px;
}

/* 統計はお題の上 */
.statsbar{display:flex;gap:8px;margin-bottom:10px}
.statsbar div{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;display:flex;justify-content:space-between;align-items:baseline;font-size:12px;
}
.statsbar span{color:var(--sub)}
.statsbar b{font-size:15px;font-variant-numeric:tabular-nums}
.statsbar b.miss{color:var(--miss)}
.statsbar b.hl{color:var(--accent)}

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  position:relative;overflow:hidden;min-height:300px;
  padding:26px 30px;display:flex;flex-direction:column;justify-content:center;
}
.stackbg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none}
/* タイル：ステージの総打鍵数だけタイルを作り、ランダムな順に塗っていく */
.grid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.cell{position:absolute;border:1px solid rgba(120,110,95,.11);border-radius:3px}
/* タイル風：色は JS で入れ、上から「光」だけを重ねる（暗くしない）。
   光沢は円形グラデーションで作る――擬似要素の楕円だと小さいタイルで形が崩れるため */
.cell i{
  position:absolute;left:2px;right:2px;top:2px;bottom:2px;border-radius:5px;display:block;
  background-image:
    radial-gradient(115% 78% at 50% -14%,
      rgba(255,255,255,.82) 0%,
      rgba(255,255,255,.36) 36%,
      rgba(255,255,255,.05) 64%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,0) 58%,
      rgba(255,255,255,.16) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -2px 4px rgba(120,100,70,.05),
    0 2px 4px rgba(85,74,58,.16),
    0 1px 1px rgba(85,74,58,.09);
  opacity:0;transform:scale(.25);transition:opacity .16s,transform .16s;
}
.cell.on i{opacity:.74;transform:scale(1)}
.cell.blast i{transition:transform .85s cubic-bezier(.3,.6,.45,1),opacity .85s}
.bigmsg{
  position:absolute;inset:0;z-index:4;display:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;
  background:rgba(255,255,255,.66);
}
.bigmsg.on{display:flex}
.bigmsg em{
  font-style:normal;font-size:46px;font-weight:800;color:var(--accent-deep);letter-spacing:.04em;
  text-shadow:0 0 14px #fff,0 0 7px #fff,0 0 3px #fff;
}
.bigmsg span{font-size:13px;font-weight:600;color:var(--sub);margin-top:12px;text-shadow:0 0 6px #fff}
.fw{
  position:absolute;width:8px;height:8px;border-radius:50%;z-index:3;pointer-events:none;
  transition:transform 1s cubic-bezier(.12,.6,.35,1),opacity 1s;
}
.tnum{position:absolute;top:11px;right:16px;z-index:2;font-size:12px;color:var(--sub)}
.tnum b{font-size:21px;color:var(--accent);margin-left:5px;font-variant-numeric:tabular-nums}
.tnum #ttotal{margin-left:2px;font-variant-numeric:tabular-nums}
.lives{margin-top:2px;font-size:14px;letter-spacing:3px;text-align:right;line-height:1.2}
.lives i{font-style:normal;color:var(--accent);transition:color .2s}
.lives i.gone{color:#dcdfe3}
.lives i.warn{color:#e0a41f}
.lives i.last{color:var(--miss)}

/* 文字の下にすりガラスを敷く（タイルは透けるが文字は読める） */
.textwrap{
  position:relative;z-index:1;border-radius:13px;padding:16px 20px;
  align-self:center;max-width:100%;   /* 文字の幅だけ。短いお題のときはタイルが左右に見える */
  /* ⭐タイルを薄くしたら、ガラスの透け感が消えた（2026-09-21 本人）。
     ⭐白の膜を薄く（.26→.18）して、背後の色を濃く見せる（saturate 1.35→1.7）
     ⚠元の値＝background .26 / blur(6px) saturate(1.35) */
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(7px) saturate(1.7);
  -webkit-backdrop-filter:blur(7px) saturate(1.7);
  /* タイルが空のときでも境目が分かるように、浮かせる */
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 8px 22px rgba(66,58,45,.11),
    0 2px 5px rgba(66,58,45,.07),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(120,110,95,.07);
}
.kana{
  font-size:31px;line-height:1.7;letter-spacing:.04em;word-break:break-all;
  text-shadow:0 0 6px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9);
}
.kana .done{color:#b9bec4}
.kana .cur{background:var(--accent-dim);border-radius:5px;padding:1px 3px;color:var(--accent);font-weight:700}
.kana .home{color:var(--accent-deep)}
.roma{
  font-family:"SFMono-Regular",Consolas,monospace;font-size:17px;color:var(--sub);
  margin-top:13px;word-break:break-all;line-height:1.9;letter-spacing:.02em;
  text-shadow:0 0 6px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9);
}
.roma .done,.roma .typed{color:#c8ccd1}
.roma .cur{color:var(--accent);font-weight:700}
.shake{animation:sh .3s}
@keyframes sh{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)}40%{transform:translateX(8px)}
  65%{transform:translateX(-5px)}85%{transform:translateX(3px)}
}

/* ---- キーボード ---- */
.kb{margin-top:16px;user-select:none;overflow-x:auto;padding-bottom:4px}
.kbrow{display:flex;gap:4px;margin-bottom:4px}
.kbrow:nth-child(2){padding-left:25px}
.kbrow:nth-child(3){padding-left:37px}
.kbrow:nth-child(4){padding-left:62px}
.key{
  width:46px;height:44px;border-radius:7px;border:1px solid var(--line);
  /* ⚠ベージュのままでいい（2026-09-08 本人「違和感なかったからもう一度戻して」）。
     ⭐キーボードは「紙のような地」のほうが合う */
  background:#fbf9f5;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--sub);position:relative;transition:.1s;flex:none;
}
.key .fg{position:absolute;top:0;left:0;right:0;height:4px;border-radius:7px 7px 0 0}
/* ⭐四本指のホーム（asdf jkl;）＝枠線で囲む。
   ⚠影は使わない＝キーボードは全部のキーが押せるのに、8個だけ浮くと不自然。
   ⭐太さではなく色を濃くして強めた（字に近づかない）*/
.key.hp{box-shadow:inset 0 0 0 1.5px #9c9184}
/* ⭐⭐F と J の突起（2026-09-08 本人「キーボードに突起がついてるんだよ。リアルに」）。
   ⭐影の意味が「押せる」ではなく「出っぱっている」なので、ここだけは影を使う。
   作り＝上が明るく（内側の白い線）、下に影が落ちる。幅は小さめ */
.key.fj::after{
  content:"";position:absolute;bottom:6px;width:13px;height:2px;   /* ⭐細く（2026-09-08 本人）*/
  border-radius:999px;                       /* ⭐左右を丸く（本物の突起と同じ）*/
  /* ⭐色はキーのベージュ（#fbf9f5）の廆。
     ⚠光（白い線）はやめた（2026-09-08 本人「光なしのほうがいいかも。ほかが平坦だから」）。
     ⭐影だけで出っぱらせる。キーボード全体が平らなので、ここだけ光ると浮く */
  background:#e9e1d4;
  /* ⭐光ありで決定（2026-09-08 本人「これがいい！」）。⚠細い（2px）ままで光を戻すのが正解だった */
  box-shadow:0 1px 1.5px rgba(120,108,92,.34),inset 0 .5px 0 rgba(255,255,255,.95);
}
.key.next{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(1px);font-weight:700;font-size:15px}
.key.next .fg{opacity:0}
.key.next.hp{box-shadow:none}
.key.next.hp::after{background:rgba(255,255,255,.7)}
.fingerlegend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--sub)}
.fingerlegend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* ---- モーダル ---- */
.overlay{
  position:fixed;inset:0;background:rgba(40,36,32,.5);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:50;
}
.overlay.on{display:flex}
.modal{
  background:var(--card);border-radius:15px;padding:26px 30px;max-width:520px;width:100%;
  max-height:86vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.25);position:relative;
}
.xbtn{
  position:absolute;top:11px;right:12px;width:32px;height:32px;padding:0;
  border-radius:8px;border:1px solid var(--line);background:var(--card);
  font-size:18px;line-height:1;color:var(--sub);display:flex;align-items:center;justify-content:center;
}
.xbtn:hover{background:var(--accent-dim);color:var(--text)}
/* ⭐結果の画面は小さめに（2026-09-08 本人「全体的に大きくて、小さくしたい」）*/
.modal h2{margin:0 0 4px;font-size:18px;padding-right:38px}
.modal .sb{color:var(--sub);font-size:13px;margin-bottom:18px}
.rescard{background:#faf8f4;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:9px}
.resrow{display:flex;justify-content:space-between;align-items:baseline;padding:3.5px 0;font-size:12.5px}
.resrow span{color:var(--sub)}
.resrow b{font-size:14.5px;font-variant-numeric:tabular-nums}
.resrow.hl b{color:var(--accent);font-size:17px}
.note{font-size:12px;color:var(--sub);line-height:1.7;background:var(--accent-dim);padding:11px 13px;border-radius:9px;margin-bottom:15px}
.perfect{text-align:center;color:var(--accent-deep);font-weight:700;font-size:16px;margin-bottom:12px;line-height:1.6}
/* 🔴金メダルはやめた（2026-09-08 本人）。バッジと同じさくら色にそろえる。
   ⚠ここだけ金のまま残っていた＝バッジはピンク、帯は金でちぐはぐだった */
.record{
  text-align:center;font-weight:800;font-size:17px;line-height:1.6;margin-bottom:12px;
  padding:12px 14px;border-radius:11px;color:#fff;
  background:linear-gradient(150deg,#d98aa9,var(--accent));
  box-shadow:0 3px 12px rgba(200,106,142,.28);
}
.record small{display:block;font-size:12px;font-weight:600;opacity:.9;margin-top:5px}
/* ⭐記録更新はたまにしか出ない＝金メダルの色にする（2026-09-08 本人） */
.stage .rec, a.mini .rec{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;
  /* ⭐白抜き文字・影なし（2026-09-08 本人）。
     ⚠白い文字を読ませるには地を濃くするしかない＝薄い黄色では白が溶ける */
  background:var(--medal-solid);
  color:#fff;font-size:10px;font-weight:700;vertical-align:1px;
}
.modalbtns{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}

/* ⭐閉じるの行のひとこと（2026-09-08 本人）。
   ⭐左に置く（ボタンは右）＝閉じる前に目に入る */
.cheer{
  order:-1;margin-right:auto;align-self:center;
  font-size:12.5px;color:var(--accent-deep);font-weight:600;line-height:1.5;
}


/* 結果はまず小さくだけ出す（余韻を邪魔しない） */
.toast{
  /* ⭐右下はやめた（2026-09-08 本人「右下読まない。自分が入力する場所に近くないと見れない」）。
     ⭐キーボードの上に重ねる＝打ち終わった目線のすぐそば */
  position:fixed;left:50%;transform:translateX(-50%) translateY(16px);
  bottom:210px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px 17px 13px;box-shadow:0 12px 34px rgba(0,0,0,.17);
  min-width:236px;max-width:310px;
  opacity:0;pointer-events:none;   /* ⚠transform は上に1つだけ。ここに書くと translateX が消える */
  transition:opacity .28s,transform .28s;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast .tmain{font-size:15px;font-weight:700;padding-right:26px}
.toast .tsub{font-size:12px;color:var(--sub);margin-top:5px;line-height:1.7}
.toast .tsub b{color:var(--accent);font-size:14px}
.toast .trec{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;
  background:var(--medal-solid);
  color:#fff;font-size:10px;font-weight:700;vertical-align:2px;
}
/* ⭐ボタン2つとキーの案内は中央揃え（2026-09-18 本人「もう一度と詳しく見るのボタンを中央揃え」）。
   ⚠見出し（★パーフェクト）と速さの行は左のまま＝本人が言ったのはボタンと案内だけ */
.toast{text-align:center}
.toast .tmain,.toast .tsub{text-align:left}
.toast .tmore{margin:10px 3px 0;padding:5px 11px;font-size:12px}
/* ⭐ボタンの下にキーの案内（2026-09-18 本人「その下にエンターでもう一度」→「全部スペースでもう一度でいいんじゃない？」→「スペースでもう一度でもOK」） */
.toast .tkey{margin-top:8px;font-size:11px;color:var(--sub)}
.toast .tx{
  position:absolute;top:8px;right:9px;width:24px;height:24px;padding:0;
  border:none;background:none;color:var(--sub);font-size:15px;line-height:1;
}
.toast .tx:hover{background:none;color:var(--text)}

table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
th,td{padding:6px 5px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
/* ⚠overflow:hidden は td だけ。th に掛けると ？ の吹き出しが切られる（2026-09-08） */
td{overflow:hidden;text-overflow:ellipsis}
th{overflow:visible;position:relative}
/* ⭐ステージを番号にしたので、横に伸びる列がなくなった（2026-09-08 本人「横スクロールなし」）*/
.logtbl th:nth-child(1),.logtbl td:nth-child(1){width:12%}
.logtbl th:nth-child(2),.logtbl td:nth-child(2){width:24%}
.logtbl th:nth-child(3),.logtbl td:nth-child(3){width:13%}
.logtbl th:nth-child(4),.logtbl td:nth-child(4){width:10%}
.logtbl th:nth-child(5),.logtbl td:nth-child(5){width:16%}
.logtbl th:nth-child(6),.logtbl td:nth-child(6){width:13%}
.logtbl th:nth-child(7),.logtbl td:nth-child(7){width:12%}

/* ⭐？のしるし（2026-09-08 本人）。押すと下に説明が開く。座席表と同じ考え方 */
/* 🔴⭐？の丸が二重になっていた（2026-09-15 本人「ハテナがなんか二重になってる」）。
   ⚠原因＝サイト共通の style.css が .tip-btn::before に「〇に？」を描いている。ここでもボタン自体に丸い枠を付けていた＝丸の中に丸。
   ⭐丸は style.css に任せる。ここではボタンの枠と地を消すだけ（座席表と同じ見た目になる） */
.tip-btn{
  width:auto;height:auto;padding:0;margin-left:4px;border:0;border-radius:0;
  background:none;cursor:pointer;vertical-align:1px;
}
.tip-btn:hover,.tip-btn.on{background:none}
/* ⭐ポインタを合わせると出る吹き出し（2026-09-08 本人「ポインタ合わせてポップアップに」）。
   ⭐角（三角）はボタンに近いほうに付ける＝右の？は右に、左の？は左に
     （本人「右に角があるから、左も角で」）*/
.tip-wrap{position:relative;display:inline-block;vertical-align:middle}
.tip-pop{
  position:absolute;top:calc(100% + 9px);left:-8px;z-index:80;
  width:max-content;max-width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.13);
  padding:10px 13px;font-size:12px;line-height:1.8;color:var(--text);
  font-weight:400;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.tip-wrap.right .tip-pop{left:auto;right:-8px}
/* 角（三角）＝白い三角と、その下の線の三角を重ねる */
.tip-pop::before,.tip-pop::after{content:"";position:absolute;bottom:100%;border:7px solid transparent}
.tip-pop::before{left:11px;border-bottom-color:var(--line)}
.tip-pop::after{left:11px;margin-bottom:-1px;border-bottom-color:var(--card)}
.tip-wrap.right .tip-pop::before,.tip-wrap.right .tip-pop::after{left:auto;right:11px}
.tip-wrap:hover .tip-pop,
.tip-wrap:focus-within .tip-pop,
.tip-wrap.on .tip-pop{opacity:1;visibility:visible;transform:translateY(0)}
.tip-pop b{color:var(--accent-deep)}
th{color:var(--sub);font-weight:600;text-align:right}
th:first-child,td:first-child{text-align:left}
.empty{color:var(--sub);font-size:13px;padding:22px 0;text-align:center}
/* ⭐左そろえ（2026-09-08 本人）。⚠中央揃えは折り返すたびに左端も右端も動く＝これがガタガタの正体だった
   ⭐間隔で仲間を作る＝見出しと項目は近く（6px）／グループ同士は離す（32px） */
.opts{
  display:flex;align-items:center;align-content:center;justify-content:flex-start;gap:13px;row-gap:7px;
  font-size:12px;color:var(--sub);flex-wrap:wrap;
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
/* ⭐上下中央揃え（2026-09-08 本人「上下中央揃え。今の文字も上下中央揃えになってない」）。
   ⚠行の高さ（line-height）が字ごとに違うと、箱の高さが変わって中心がずれる。
     この行の中だけ line-height を1にそろえて、箱＝字の高さにする */
/* ⭐字の大きさと行の高さを、この行の中で完全にそろえる。
   ⚠ラベルだけサイト共通の指定で14.4pxになっていて、箱の高さが違っていた＝これが3pxのずれの正体 */
.opts,.opts *{line-height:1;font-size:12px}
.opts input{margin:0}
/* ⭐上下中央揃えの作り方＝**入れ子をやめて、全部この行の直接の子にする**（2026-09-08）。
   ⚠入れ子にすると、中の箱が親の高さに引き伸ばされて、字だけ3px下にずれる。
     親が1段なら `align-items:center` がそのまま全部に効く。
   ⭐まとまりは「間隔」で作る＝項目どうし13px／見出しの前だけ32px */
/* ⭐この行の子は、ぜんぶ同じ高さ（20px）にする。
   ⚠高さが違うと、そろえ方が何であれ位置がずれる。**同じ高さなら必ずそろう** */
.opts>*{display:flex;align-items:center;align-self:center;flex:0 0 auto;height:20px}
.opts label{gap:5px;cursor:pointer}
.oglabel{margin-left:19px}          /* 13 + 19 = 32px（グループの区切り）*/
.opts>.oglabel:first-child,.opts>*:first-child+.oglabel{margin-left:19px}
/* ⚠字の大きさが違うと箱の高さも変わって、中心が数pxずれる。
   ⭐この行の字はぜんぶ12pxにそろえる（見出しは色と太さで分ける）*/
.oglabel{
  color:var(--accent-deep);font-weight:700;font-size:12px;letter-spacing:.04em;white-space:nowrap;
}
/* ⚠ここのベージュは前のサイト（E Link）の色だった。さくらツールの配色にそろえた（2026-09-08） */
/* ⚠旧：1行に並べていたころの見出し。今は .oghead を使う（2026-09-08） */
/* ⚠.note8（ステージ8〜11は3回に固定）は、設定をステージの画面へ移したので不要になった */
@media(max-width:860px){ .oglabel{margin-left:11px} }

/* ページ下部の使い方（控えめに） */
/* ⭐使い方のトグルの形はサイト共通（style.css の details.howto）に移した（2026-09-08）。
   ⚠ここにあった色 #aaa294 は前のサイトのベージュ。共通のグレーに直してある。
   ここでは上のあきだけ持つ */
.howto{margin-top:30px}
/* ---------- コイン（2026-09-07）：横から見たコインを積み上げる ----------
   ⚠1枚＝1ポイント（本人決定）。10枚で1列。多い子は列が増える */
/* ⭐コインは「こども用（?kids=1）」だけのもの。大人用には出さない（2026-09-07 本人）*/
.coinbar{display:none;align-items:flex-end;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:16px}
.coinbar .clabel{align-self:center;font-size:11.5px;color:var(--sub);font-weight:700;
  white-space:nowrap;line-height:1.5;text-align:center}
.coinbar .clabel b{display:block;font-size:23px;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.1}
.coinstacks{display:flex;align-items:flex-end;gap:9px;flex:1;min-width:0;overflow:hidden;min-height:84px}
.cstack{position:relative;width:44px;height:84px}
/* ⭐コインはSVG（index.html の #coinShape）。ここは並べ方だけ。
   1枚 44×16、7px ずつずらして重ねる＝上の1枚だけ面が見える（パワポと同じ） */
.cstack{display:block;width:44px;height:auto}
body.kids .coinbar{display:flex}
/* ⭐新しくもらった分だけ、上から落ちてくる（2026-09-07 本人） */
@keyframes coinDrop{
  0%{transform:translateY(-42px);opacity:0}
  55%{transform:translateY(2.5px);opacity:1}
  78%{transform:translateY(-1.5px)}
  100%{transform:translateY(0)}
}
.cstack use.drop{animation:coinDrop .42s cubic-bezier(.25,.9,.35,1) backwards}
.coinbar .cmore{align-self:center;font-size:11.5px;color:var(--sub);font-weight:600;white-space:nowrap}
.coinwin{background:var(--accent-dim);border-radius:10px;padding:11px 13px;margin-bottom:12px;
  text-align:center;font-weight:700;color:var(--accent);font-size:20px}
.coinwin small{display:block;font-size:12px;font-weight:600;color:var(--sub);margin-top:3px}
@media(max-width:560px){
  .cstack{width:34px}
  .coinstacks{gap:7px}
}

/* ⭐英語の上に出す日本語訳（2026-09-16 本人）。⚠打つ文字より小さく・グレー */
.subtext{font-size:12.5px;color:var(--sub);text-align:center;margin-bottom:7px;line-height:1.5}

/* ⭐タイトルの右に小さくひとこと（2026-09-16 本人）。⚠狭い画面では下に回す */
/* ⭐ひとことは見出しの下に、横1行で（2026-09-16 本人）*/
.titlerow{margin:14px 0 6px}
.titlerow h1{margin:0}
.title-note{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--sub)}
.title-note b{font-weight:700;color:var(--accent)}
@media(max-width:640px){ .title-note{font-size:12px} }

/* ⭐帯に名前とひとこと（2026-09-16 本人）。⚠狭い画面ではひとことを隠す（名前だけ残す） */
.site-sub .band-name{font-weight:700}
.site-sub .band-note{margin-left:16px;font-weight:400;color:var(--sub)}
/* ⭐ピンクの太字をやめて普通の字に（2026-09-17 本人「普通の文字に変更してみて」）。前＝color:var(--accent);font-weight:700 */
.site-sub .band-note b{color:inherit;font-weight:400}
@media(max-width:900px){ .site-sub .band-note{display:none} }

/* ⭐練習中の左右分け（2026-09-16 本人）。⚠狭い画面では今までどおり縦に積む */
.stagewrap{max-width:1120px;display:flex;gap:22px;align-items:flex-start}
/* ⚠ボタン2つ（← トップ画面／やり直し）が1行に入る幅にする（2026-09-16） */
.playleft{flex:0 0 268px;display:flex;flex-direction:column;gap:10px}
.playright{flex:1 1 auto;min-width:0;position:relative}   /* ⭐紙吹雪をキーボードの下から出すため（2026-09-20） */
/* ⭐2つのボタンは横並び（2026-09-16 本人）。名前・案内はその下に回す */
.playleft .bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.playleft .bar>b,.playleft .bar>#stProg,.playleft .bar>#missHint,.playleft .bar>#hint{flex-basis:100%}
/* ⭐「お題 1/15」は出さない（2026-09-16 本人「見る余裕ないから不要」） */
.playleft #stProg{display:none}
.playleft .bar .spacer{display:none}
.playleft .bar #stProg{text-align:left}
.playleft .playopts{flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.playleft .playopts>*{height:auto}
.playleft .playopts .oglabel{margin-left:0}
.playleft .statsbar{flex-direction:column;gap:6px;margin:0}
.playleft .statsbar div{flex-direction:row;justify-content:space-between;align-items:center;gap:10px}
@media(max-width:900px){
  .stagewrap{flex-direction:column;max-width:var(--stagew)}
  .playleft{flex:1 1 auto;width:100%}
  .playleft .bar{flex-direction:row;align-items:center;gap:12px}
  .playleft .playopts{flex-direction:row;align-items:center;gap:13px}
  .playleft .statsbar{flex-direction:row;gap:8px}
  .playleft .statsbar div{flex-direction:column;justify-content:center}
}

/* ⭐一覧（hub）と練習（playpage）を別ページにした（2026-09-16 本人）。
   ⚠中身は同じHTMLなので、いらないほうをCSSで隠す */
.playpage #menu{display:none}
.hub #play{display:none}
/* ⭐一覧のカードは <a>。押せる見た目はそのまま（下線と色は消す） */
a.stage{display:block;text-decoration:none;color:var(--text)}

/* ⭐練習ページでは、読みもの（リード・箇条書き・見本の画像・キャッチ）は出さない（2026-09-16 本人）。
   ⚠一覧のページには今までどおり出る＝検索から来た人はそちらを読む */
.playpage .intro,.playpage .catch,.playpage h1{display:none}

/* ⭐練習中は、キーボードと文字を小さめ・中央に（2026-09-16 本人
     「タイピング、もう少し小さく。キーボードが小さいでいいかも。キーボードと文字を中央揃えにして」）
   ⚠狭い画面（900px以下）は今までの大きさのまま */
@media(min-width:901px){
  .playright .panel{min-height:240px;padding:20px 24px}
  .playright .kana{font-size:26px;line-height:1.6}
  .playright .roma{font-size:15px;margin-top:10px}
  /* キーボードは1割ほど小さく、横は中央に */
  .playright .kb{margin:14px auto 0;width:max-content;max-width:100%}
  .playright .key{width:40px;height:38px;font-size:12.5px;border-radius:6px}
  .playright .kbrow{gap:3px;margin-bottom:3px}
  .playright .kbrow:nth-child(2){padding-left:22px}
  .playright .kbrow:nth-child(3){padding-left:32px}
  .playright .kbrow:nth-child(4){padding-left:54px}
  /* 指の色の説明も中央に */
  .playright .fingerlegend{justify-content:center}
}

/* ⭐練習ページのロゴは <span>（押せない）。太字はサイト共通の .site-head a に付いているので、ここで足す */
.site-head span.logo{font-weight:bold;color:var(--text)}
/* ⭐「トップ画面へ」は左の列いっぱいに（2026-09-16 本人） */
.playleft .bar #btnBack{white-space:nowrap}

/* ⚠「← トップ画面」が2行になって背が高かった（2026-09-16）。2つのボタンの高さをそろえる */
.playleft .bar #btnBack,.playleft .bar #btnRetry{
  height:38px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
}

/* ⭐ボタンは下に小さく、枠なしの文字だけ（2026-09-16 本人） */
.playlinks{display:flex;gap:16px;margin-top:4px}
.playlinks button{
  border:0;background:none;padding:2px 0;font-size:12px;color:var(--sub);
  text-decoration:underline;text-underline-offset:3px;height:auto;font-weight:400;
}
.playlinks button:hover{background:none;color:var(--accent)}
/* ⭐4つの数字は、どのステージでも同じ位置に（2026-09-16 本人）。
   ⚠上のステージ名と案内の高さを固定する＝設定の有無で動かない */
/* ⭐ボタンは上のまま。⚠数字の位置をそろえるため、ここの高さは固定（2026-09-16） */
.playleft .bar{min-height:104px;align-content:flex-start}
.playleft .bar #hint{font-size:12px;line-height:1.5}

/* ⭐ヘッダーの高さをそろえる（2026-09-16 本人「どのページも数字の位置は一緒に」）。
   ⚠学生用はメニューを消したぶん4px低かった＝下の数字の位置がずれていた */
.site-head .wrap{min-height:41px}

/* ⭐「終わりに f j に戻る」「ミスしたら」などの設定の字を小さく（2026-09-16 本人）＝設定の文字を小さく */
.playleft .playopts{font-size:11px}
.playleft .playopts .k{font-size:11px}

/* ⭐左の設定「終わりに f j に戻る」〜「3回でくずれる」を小さく・細く（2026-09-17 本人）。
   ⚠ほかのCSSで label が14.4px・太字になっていたので、ここで上書き */
.playleft .playopts label,
.playleft .playopts .oglabel{font-size:12px;font-weight:400}
/* ⭐左の設定の左端を、上の箱（時間・ミス…）の中の字の左端にそろえる（2026-09-17 本人） */
.playleft .playopts{padding-left:13px}

/* ⭐練習ページの名前（ひとさし指の上・中央・下 など）の左に、小さいタイル（2026-09-17 本人「サイズは小さくていいから、タイルをおいて（トップと同じ色）」）。
   ⭐形と色は一覧のカードのタイルと同じ（上の .stage::before と共通）。ここでは大きさと置き方だけ変える */
#stName[data-n]{display:inline-flex;align-items:center;gap:7px}
#stName[data-n]::before{position:static;flex:0 0 auto;width:20px;height:20px;border-radius:3px;font-size:11px}

/* ⭐上のピンクの帯は、さくらツールの色で統一＝ステージの色にしない（2026-09-17 本人「あの帯はさくらツールの色で統一してるから、変更しないで」）。
   ⭐JSがページ全体の色を変えても、ヘッダーの中だけは元のピンクに戻す */
.site-head{
  --accent:#c86a8e; --accent-dim:#fbf1f4; --accent-deep:#a84a72;
  --pink:#c86a8e; --pink-light:#f3e2e8; --pink-pale:#fbf1f4;
}
/* ⭐帯の太さを、ほかのページと同じに（2026-09-17 本人）。
   ⚠原因＝「.site-head .wrap{min-height:41px}」が帯の .wrap にもかかって、帯が42pxになっていた（ほかのページは28px） */
.site-head .site-sub .wrap{min-height:0}

/* ⭐ミスは細い数字・本当の速さは赤（2026-09-17 本人「ミスは細い数字」「本当の速さを赤にしてみて」） */
.statsbar b.miss{font-weight:400}
.statsbar b.hl{color:var(--miss)}

/* ⭐チェックとラジオを自分で描く（2026-09-17 本人「チェックの文字を白で、ラジオボタンも、なんか気になる」）。
   ⚠ブラウザ標準（accent-color）は、地の色が明るい（黄・緑など）とチェックを黒で描く＝太く・重く見えていた。
   ⭐地＝ステージの色／チェックと中の点＝白。枠は細い灰色 */
.playopts input[type=checkbox],
.playopts input[type=radio]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:13px;height:13px;margin:0;
  border:1px solid #b9bdc3;background:#fff;cursor:pointer;
  display:inline-grid;place-content:center;
}
.playopts input[type=checkbox]{border-radius:3px}
.playopts input[type=radio]{border-radius:50%}
.playopts input:checked{background:var(--accent);border-color:var(--accent)}
.playopts input[type=checkbox]:checked::before{
  content:"";width:7px;height:4px;margin-top:-2px;
  border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg);
}
.playopts input[type=radio]:checked::before{
  content:"";width:5px;height:5px;border-radius:50%;background:#fff;
}
.playopts input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ⭐右上の「タイル 0 / 57」を右揃えに（2026-09-17 本人「10回だけ左揃えになる」）。
   ⚠●が10個のときは箱が●の幅に広がって、字が左に寄っていた */
.tnum{text-align:right}

/* ⭐指の色の説明：左手4本／右手4本で折り返す。2行のときは右揃え（2026-09-17 本人） */
.fingerlegend{row-gap:4px}
.fingerlegend .lg-hand{display:inline-flex;gap:10px;white-space:nowrap}
.fingerlegend.two,.playright .fingerlegend.two{justify-content:flex-start}
.fingerlegend.two .lg-hand + .lg-hand{margin-left:auto}   /* ⭐右手の行だけ右へ（2026-09-17 本人） */

/* ⭐学生用トップ：見出しの上の空きを詰める／見出しの下の2行を小さく・行間を詰める（2026-09-17 本人） */
.gakusei.hub h1{margin-top:0}
.gakusei.hub .lead{font-size:.8rem;line-height:1.5;margin-bottom:14px}

/* ⭐スタートの合図（2026-09-17 本人）。形は「パーフェクト！」と同じ。色はステージの色 */
.bigmsg.startmsg em{color:var(--accent)}
/* ⭐スタートは塗りつぶし（2026-09-17 本人「下が見えると気持ち悪い」「タイルのカードの色でスタートが白抜き」）。
   ⭐地＝ステージの色／字＝白。⚠前は白の半透明で、下のお題が透けていた */
/* ⭐お題のカードの上にだけ重ねる。タイルと同じ光り方で立体に（2026-09-17 本人「立体感出せたらいいな」） */
.bigmsg.startmsg{
  inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  /* ⭐大きさは固定（2026-09-17 本人「文字を隠すとボタンのサイズが変わる」「オレンジにそろえて」）。⚠前はお題の長さで横に伸びていた */
  width:220px;height:118px;max-width:calc(100vw - 32px);
  border-radius:14px;cursor:pointer;
  background-color:var(--accent);
  background-image:
    radial-gradient(115% 78% at 50% -14%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.22) 36%,rgba(255,255,255,.04) 64%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 58%,rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -3px 0 rgba(0,0,0,.12),
    0 6px 14px rgba(60,50,40,.22),
    0 2px 3px rgba(60,50,40,.14);
}
.bigmsg.startmsg em{color:#fff;font-size:34px;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.bigmsg.startmsg span{color:#fff;font-size:12px;margin-top:6px;text-shadow:0 1px 1px rgba(0,0,0,.15)}
/* ⭐スタートを押すまで、お題の文字は見せない（2026-09-17 本人）。カードの枠はそのまま */
.textwrap.waiting > :not(.startmsg):not(.touchnote):not(.stagenote){visibility:hidden}   /* ⭐スタートの下の説明は見せる（2026-09-20） */
/* ⭐押す前は、お題のカードの枠・影・すりガラスも消す（2026-09-17 本人「文字の枠が残ってる」） */
.textwrap.waiting{background:transparent !important;box-shadow:none !important;border-color:transparent !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.textwrap.waiting::before,.textwrap.waiting::after{display:none !important}

/* ⭐スマホ・タブレットの案内（2026-09-17 本人）。数秒で消える */
.touchnote{
  /* ⚠スマホは横にはみ出すページなので、left:50% だと右に切れる。左右16pxの間に置く */
  position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;top:84px;transform:translateY(-8px);z-index:9000;
  box-sizing:border-box;padding:12px 18px;border-radius:10px;
  background:rgba(44,46,48,.92);color:#fff;font-size:14px;line-height:1.6;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.touchnote.on{opacity:1;transform:none}
/* ⭐案内はスタートのボタンの上（ボタンは高さ118px）。幅は字に合わせる */
.touchnote.inwrap{
  position:absolute;left:50%;right:auto;top:auto;bottom:calc(50% + 59px + 10px);margin:0;
  width:max-content;max-width:300px;transform:translate(-50%,-6px);font-size:12px;line-height:1.5;padding:6px 12px;z-index:6;
  bottom:calc(50% + 59px + 6px);
}
/* ⚠2行だとカードの上にはみ出すので、幅があるときは1行に */
@media(min-width:600px){ .touchnote.inwrap{max-width:none;white-space:nowrap} }
.touchnote.inwrap.on{transform:translate(-50%,0)}

/* ⭐数字は打ち終わってから「ドン」（2026-09-18 本人「終わってドンって表示してほしい」） */
.statsbar b.don{display:inline-block;animation:don .5s ease-out}
@keyframes don{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
/* ⭐速さは「○/1分」（2026-09-18 本人）。「/1分」は数字より小さく */
.statsbar b .u{font-size:.6em;font-weight:500;margin-left:2px}

/* ⭐単語（ステージ6）からは、キーボードと指の色の説明を出さない（2026-09-18 本人「単語からはいらないと思う」）。
   ⭐空いたぶん（キーボード＋説明＝約210px）を、タイルの場所の高さに回す＝長い文でもタイルが見える */
#play.nokb .kb,#play.nokb .fingerlegend{display:none}
#play.nokb .panel{min-height:450px}

/* ⭐紙吹雪（2026-09-18 本人）＝画面ぜんたいに重ねる。押せない（クリックは下に通る）。消すときは少しずつ */
canvas.confetti{position:fixed;left:0;top:0;z-index:55;pointer-events:none;transition:opacity .4s}

/* ⭐タブレットの案内を大きく・グレーに（2026-09-19 本人）。タイルの枠のまん中に重ねる。閉じるか打ちはじめるまで残る */
.touchnote.big{
  /* ⭐画面のまん中に固定（2026-09-20）。⚠スマホの縦でも切れないように、画面の幅から32px引いた中に収める */
  /* ⚠right と margin:0 auto（上の .touchnote）が残ると、中心がずれる（2026-09-20） */
  position:fixed;left:50%;right:auto;top:50%;margin:0;transform:translate(-50%,-50%);z-index:9990;
  width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
  padding:22px 30px 16px;border-radius:14px;opacity:1;pointer-events:auto;
  background:rgba(110,114,120,.95);color:#fff;text-align:center;line-height:1.5;
  box-shadow:0 10px 28px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;gap:6px;
}
.touchnote.big b{font-size:22px;font-weight:700}
.touchnote.big .tn-sub{font-size:13px;opacity:.9}
.touchnote.big .tn-off{margin-top:8px;font-size:14px;display:flex;align-items:center;gap:6px;cursor:pointer}
.touchnote.big .tn-off input{width:18px;height:18px;accent-color:#fff}
.touchnote.big .tn-x{position:absolute;right:8px;top:6px;background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer}

/* ⭐学生用：大きいカード3枚の中にステージを並べる（2026-09-19 本人）。大きいカードにタイルはなし、中の行の左にタイル */
.stages.bigcards{display:grid !important;grid-auto-flow:row !important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;grid-template-rows:none !important;gap:18px;padding-left:0;align-items:start}
.bigcard{background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06);padding:14px 14px 10px}
.bigcard .bc-name{font-size:17px;font-weight:700;margin:0 0 8px 2px}
a.mini{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:4px;text-decoration:none;color:var(--text);transition:background .12s}
a.mini:hover{background:rgba(0,0,0,.04)}
a.mini .mn{font-size:14px;font-weight:600;flex:1}
a.mini .mb{font-size:11px;color:#dd7fa2;font-weight:600;white-space:nowrap}
a.mini .tl{
  flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:4px;
  color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 1px rgba(90,70,60,.25);
  background-color:var(--tile,var(--accent));
  background-image:radial-gradient(115% 78% at 50% -14%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.36) 36%,rgba(255,255,255,.05) 64%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,.16) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -2px 4px rgba(120,100,70,.05),0 2px 4px rgba(85,74,58,.16),0 1px 1px rgba(85,74,58,.09);
}

/* ⭐3列目＝「数字と記号」の下に「英語」を重ねる（2026-09-19） */
.bigcol{display:flex;flex-direction:column;gap:18px}
/* ⭐Shift キー（2026-09-19 数字と記号）。いちばん下の段の左右。⚠左の Shift を置くので、段の左の空きは Shift の幅で埋める */
.kbrow.withshift{padding-left:0 !important}
.key.shift{width:58px;font-size:11px;color:var(--sub)}
.playright .key.shift{width:51px}

/* ⭐学生用は2列（2026-09-19 本人）。左＝ホームポジション・数字と記号／右＝日本語・英語 */
.stages.bigcards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media(max-width:640px){ .stages.bigcards{grid-template-columns:1fr !important} }

/* ⭐行の中の「★ 記録更新」は数字の左（2026-09-19 本人）＝右に少しすき間 */
a.mini .rec{margin:0 6px 0 0}
/* ⚠スマホの縦は字を少し小さく（2枚目の行に折り返して読めるように） */
@media(max-width:480px){ .touchnote.big b{font-size:18px} .touchnote.big{padding:26px 20px 14px} }   /* ⚠上を広げる＝×と文が重ならないように（2026-09-20） */

/* ⭐スタートの下の説明（2026-09-20 本人「説明が欲しい」）。打ちはじめると消える */
.stagenote{
  position:absolute;left:50%;top:calc(50% + 59px + 14px);transform:translateX(-50%);z-index:6;
  width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;text-align:center;
  white-space:nowrap;   /* ⭐横1行（2026-09-20 本人）。⚠狭い画面だけ折り返す（下の @media） */
  font-size:13px;line-height:1.6;color:var(--sub);background:rgba(255,255,255,.9);
  border-radius:8px;padding:6px 12px;
}
.stagenote b{color:var(--text)}
@media(max-width:760px){ .stagenote{white-space:normal;max-width:calc(100vw - 32px);font-size:12px} }

/* ⭐一般用のまとめカードは、名前の下に説明（2026-09-21 本人「Bでやってみて」）。
   ⚠学生用（.bigcards だけ）は名前だけのまま＝ノートPCの1画面に収めるため */
.bigcards.withdesc a.mini{align-items:flex-start;padding:8px 8px 9px}
.bigcards.withdesc a.mini .tl{margin-top:1px}
.bigcards.withdesc a.mini .mb{margin-top:4px}
a.mini .mtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
a.mini .ds2{font-size:12px;font-weight:400;color:var(--sub);line-height:1.55}

/* ⭐ニックネームの選択肢（2026-09-21 本人「選択できるなら」）。⚠2人目が入るまでは出ない */
.unamepick{margin-left:6px;height:30px;max-width:150px;padding:0 6px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);color:var(--text);font-size:13px;font-family:inherit;cursor:pointer}

/* ⭐一般用は「今までの記録を見る」を同じ行の右端へ、目立たせない
   （2026-09-21 本人「同じ行の右揃えにしてメインじゃなくていい」）。⚠学生用は今までどおり */
body:not(.gakusei) .namerow #btnLog{
  margin-left:auto;border-color:transparent;background:transparent;color:var(--sub);
  font-size:12px;padding:7px 2px;text-decoration:underline;text-underline-offset:3px;
}
body:not(.gakusei) .namerow #btnLog:hover{color:var(--text);background:transparent}

/* ⭐一般用の「記録を消す」窓＝名前だけ並べる（2026-09-21 本人「名前だけでいいと思う」） */
.namelist{display:flex;flex-direction:column}
.namelist .nrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 4px;border-bottom:1px solid var(--line)}
.namelist .nrow:last-child{border-bottom:0}
.namelist .nn{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.namelist .ndel{flex:none;font-size:12px;padding:5px 12px;height:auto}

/* ⭐一般用のグループのページ（2026-09-21）＝カード1枚・1列 */
.stages.bigcards.onegroup{grid-template-columns:minmax(0,760px) !important}
/* ⭐グループのページの説明文＝学生用のトップと同じ小さい字（2026-09-21 本人「学生のハブの画面みたいに少し小さめの文字」） */
body[data-group] .lead{font-size:.8rem;line-height:1.5;margin-bottom:14px}

/* ⭐練習の画面の「音を出す」（2026-09-21）。⚠上の行（.bar）に小さく置く */

/* ⭐こんなときに使う（2026-09-21 本人「使い方の下にね」）。⚠使い方と同じくらい控えめに */
.usecase{margin:22px 0 10px;padding:14px 2px 0;border-top:1px solid var(--line)}   /* ⭐上に罫線（使い方と同じ線・2026-09-21 本人「こんな時に使うの上に、使い方の上にある罫線を」） */
.usecase h2{font-size:15px;font-weight:700;margin:0 0 8px}
.usecase ul{margin:0 0 10px;padding-left:1.3em;font-size:13.5px;line-height:1.9}
.usecase .usenote{margin:0;font-size:12px;color:var(--sub)}

/* ⭐一般用の一覧は、座席表と同じ幅と並び（2026-09-21 本人「全体のサイズと、画像と文字のバランスも」）
   座席表＝中身860px（ヘッダーの900pxの内側）・文章｜26px｜画像46%。⚠前は中身1020px（ヘッダーより左右60pxはみ出していた）
   ⚠練習ページ（タイルとキーボードの幅が要る）と学生用（ノートPCで1画面に収める）は今のまま */
body.hub:not(.gakusei) .tpwrap{max-width:900px}
body.hub:not(.gakusei) .intro{gap:26px}
@media(min-width:760px){ body.hub:not(.gakusei) .introimg{flex:0 0 46%;width:46%;max-width:460px} }

/* ⭐記録（ミスなし50字成功・105/1分）は名前の行の右上に置く＝説明の幅がどの行も同じになる
   （2026-09-21 本人「ホームポジションランダムや、きゃきゅきょの折り返しと位置が違うよね。きゃきゅきょに合わせて」）
   ⚠前は記録が行の右に並んで、記録のある行だけ説明が狭くなり、折り返しが増えていた */
.bigcards.withdesc a.mini{position:relative}
.bigcards.withdesc a.mini .mb{position:absolute;top:10px;right:8px;margin:0}
.bigcards.withdesc a.mini .mn{padding-right:128px}

/* ⭐コラム（2026-09-21 本人）。「こんなときに使う」と同じ形・罫線つき。⚠使い方（たたみ）の下 */
.usecase.column{margin-top:26px}
.usecase.column p{margin:0;font-size:13.5px;line-height:1.9}

/* ⭐友だちに教える（2026-09-26 本人）＝名前の行の一番右。ボタンより弱い、文字のリンクの見た目（本人「同列だと強すぎる」） */
.namerow .sharebtn{margin-left:auto;background:none;border:0;padding:0 12px 0 2px;color:var(--sub);
  font-size:13px;text-decoration:none;cursor:pointer;box-shadow:none;position:relative}
/* ⭐色は薄いグレー・下線の右端を矢印のように折り返す（2026-09-26 本人「色は薄いグレーでいいよ」「アンダーラインの右側に矢印っぽく角付けて。折り返す感じ」） */
.namerow .sharebtn::after{content:"";position:absolute;left:2px;right:0;bottom:7px;height:1px;background:currentColor}
.namerow .sharebtn::before{content:"";position:absolute;right:0;bottom:7px;width:8px;height:1px;background:currentColor;
  transform-origin:right center;transform:rotate(35deg)}
.namerow .sharebtn:hover{color:var(--pink,#c86a8e)}