/* Bee 台語のスタイル（zh-Hant / ja / en の 3 版で使う）。**他のアプリと共有しない**。

   辞典（Taigi）の紹介ページが「読ませる」静かな面なのに対し、ここは「毎日 1 回来て、結果を
   貼ってもらう」ための面で、目的が違う。だから明るい蜜色で、辞典とは別のブランドとして立てる。
   ・輪郭は墨 3px、影は角を落とさないベタ（触れる札に見せる）
   ・色の役割を 3 つに固定する: 黄=今ここ（今日の枠・進捗・自分が触ったもの）/ 緑=正解 / 煉瓦=誤答
     **黄は塗り専用で、文字色には使わない**（白地に対して 2:1 前後しか出ない）。黄の面に載る文字は
     必ず --on-accent、黄で文字を書きたい箇所は --accent-deep（濃い黄土）を使う。
   ・肢は回答前まで水平。回答後に「意味のある 2 枚」だけ傾けて浮かせ、残りは沈める
   ・進捗バーはトラックを白に抜いて 1px の輪郭で縁取り、fill にも内側 1px を入れる。
     地がほぼ白なので、輪郭を取ると帯そのものが消えて「残り何問か」が読めなくなる。

   組み方の前提: 画面に出るのは常に「問い 1 つと肢」だけ。回答するまで答は動かないので、
   伏せている要素の高さを先に確保する必要がない代わりに、回答後に足す塊は必ず問いの下へ積む。

   時間は全部 --t 倍。prefers-reduced-motion で動きを全部止める。 */
/* ロゴ（.brand）専用の丸ゴシック。源泉圓體 GenSenRounded2 TW H（ButTaiwan・SIL OFL 1.1、
   Reserved Font Name 無し）を「Bee 台語」＋欧文の予備だけに絞ったもの。28 KB。
   本文に使っていないのは、全漢字を積むと 0.7 MB になり、毎日 1 回開く面には重いため。
   jf open 粉圓ではなくこちらなのは、粉圓が Regular 1 ウェイトしか無く、ロゴに要る太さが出ないから。
   ライセンス全文は assets/bee-logo-LICENSE.txt。**生成物**。作り直すときは:
     pyftsubset GenSenRounded2TW-H.otf --text='Bee 台語美<ASCII>' --layout-features='*' \
       --flavor=woff2 --output-file=bee-logo.woff2
   欧文を丸ごと入れてあるのは、ロゴの文言を少し変えても字が欠けないようにするため。 */
@font-face{
  font-family:"Bee Logo";
  src:url(/bee-taigi/assets/bee-logo.woff2) format("woff2");
  font-weight:900; font-display:swap;
}
:root{
  --bg:#fffdf7; --dot:#f1ead9; --card:#fff; --fg:#2b2b2b; --muted:#8a8378;
  --edge:#2b2b2b; --line:#eae4d6; --shadow:rgba(43,43,43,.14);
  --accent:#ffc83d; --accent-deep:#7a5a10; --accent-soft:#fffaf0; --on-accent:#2b2b2b;
  --pop:#7a5a10; --pop-soft:#fff3d6; --pop-tag:#ffc83d;
  --right:#5f7a22; --right-soft:#f4f8ea; --right-shadow:rgba(95,122,34,.28);
  --wrong:#a93e22; --wrong-soft:#fcede7; --wrong-shadow:rgba(169,62,34,.25);
  --bar-track:#fff; --bar-edge:#e5ddcb; --bar-ring:rgba(122,90,16,.45);
  --bar-fill:linear-gradient(90deg,#edb01f,#ffdd8c); --seal-ink:#7a5a10; --dot-on:#edb01f;
  /* 欧文フォントを漢字より前に置く。CJK フォントが先だと ’ や - が全角幅で出て、
     英語版の本文に不自然な空きができる。SF に漢字は無いので、漢字は必ず TC 側へ落ちる
     （Hiragino Sans は日本語字形を持つので、必ず TC の後ろに置く）。 */
  --sans:ui-rounded,-apple-system,BlinkMacSystemFont,"Noto Sans TC","Noto Sans CJK TC",
    "PingFang TC","Hiragino Sans",sans-serif;
  /* 台羅の入聲符（tsia̍h の ̍ = U+030D）は明朝・ゴシック・丸ゴシックのどれでも
     字形を持たない環境があり、その場合□になる。等幅系だけが確実に出せるので、
     台羅を出す箇所には必ずこれを当てる。 */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:24px; --r-opt:18px; --t:1;
  /* ヘッダのマークと名前の大きさ。**ここだけ変えれば 3 版そろって変わる**
     （HTML 側には大きさを持たせていない）。マークは正方形なので 1 つで足りる。 */
  --mark:48px; --brand-size:2rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1e1a14; --dot:#2a241a; --card:#272117; --fg:#f7f2e6; --muted:#a79c88;
    --edge:#100d08; --line:#3b3325; --shadow:rgba(0,0,0,.55);
    --accent:#ffc83d; --accent-deep:#ffd86b; --accent-soft:#2e2718; --on-accent:#2b2b2b;
    --pop:#ffc83d; --pop-soft:#3a2f16; --pop-tag:#ffc83d;
    --right:#a7c957; --right-soft:#26301a; --right-shadow:rgba(167,201,87,.3);
    --wrong:#e88b6a; --wrong-soft:#35211a; --wrong-shadow:rgba(232,139,106,.3);
    --bar-track:#171309; --bar-edge:#4a4030; --bar-ring:rgba(255,240,200,.35);
    --bar-fill:linear-gradient(90deg,#e0a21f,#ffdd8c); --seal-ink:#ffd86b; --dot-on:#ffc83d;
  }
}
*{box-sizing:border-box}
body{margin:0;color:var(--fg);font-family:var(--sans);line-height:1.7;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  background:var(--bg) radial-gradient(var(--dot) 1.4px,transparent 1.4px) 0 0/14px 14px}
p{margin:0}
a{color:var(--accent-deep)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* **1 問とその「次の問題」までが、どの画面の高さでも折り返さずに収まること。**
   縦に効く余白と字は svh の clamp で連続的に詰める（メディアクエリだと段が付く）。
   clamp の最大は今までの値そのままなので、背の高い画面では今までと同じ見た目に戻る。
   解説（.reveal）はボタンより下なので、そこから先は画面外でよい。 */
.stage{max-width:640px;margin:0 auto;padding:clamp(.35rem,2svh,1.2rem) 1.15rem 3rem}

/* ヘッダに置くのは bee 自身のマークと名前だけ。**辞典（Taigi）のブランドはここに置かない**
   ——この面は bee のものとして立たせ、辞典へは結果画面の CTA と footer から送る。
   名前をここへ出したので、h1 は「今日のぶん」を指す（.intro を見よ）。名前が 2 か所に出ない。
   言語名は日本語版が一番長い。ピルの中で折れると読めないので、狭い画面では次の行へ落とす。 */
.bar{display:flex;align-items:center;justify-content:flex-end;gap:.6rem 1rem;flex-wrap:wrap;
  padding:.2rem 0 clamp(.3rem,1.6svh,1rem)}
/* マークは /assets/bee.svg 1 枚。暗い地で黒い胴体が沈むぶんは SVG 側が
   prefers-color-scheme で生成りの板を敷いて受けるので、ここには持たせない。 */
.brand{display:flex;align-items:center;gap:.45rem;font-size:var(--brand-size);
  font-family:"Bee Logo",var(--sans);font-weight:900;margin-right:auto}
.brand img{width:var(--mark);height:var(--mark);flex:none}
.lang{display:flex;gap:.3rem;font-size:.78rem}
.lang a{text-decoration:none;padding:.2rem .6rem;border-radius:99px;color:var(--muted);
  white-space:nowrap}
.lang a:hover{background:var(--accent-soft);color:var(--accent-deep)}
.lang a[aria-current]{background:var(--fg);color:var(--bg);font-weight:700}
/* ヘッダの共有。**教室で 1 台の画面を大勢に読ませる**ための口なので、見出しの中ではなく
   ここに置く——低い画面では問いを出している間 .intro ごと引っ込むが、ヘッダは残る。
   言語のピルと同じ高さに揃えつつ、押せるものとして枠と影を持たせる。 */
.invite{padding:.2rem .7rem;border:2px solid var(--edge);border-radius:99px;
  background:var(--card);color:var(--fg);font:inherit;font-size:.78rem;font-weight:700;
  white-space:nowrap;cursor:pointer;box-shadow:2px 3px 0 var(--shadow);
  transition:transform calc(var(--t)*160ms), box-shadow calc(var(--t)*160ms)}
.invite:hover{border-color:var(--accent);color:var(--accent-deep)}
.invite:active{transform:translateY(2px);box-shadow:0 0 0 var(--shadow)}
.invite:disabled{opacity:.5;cursor:default}

/* 今日の枠 */
.dayline{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:.4rem 0 .4rem}
.daydate{font-size:.78rem;color:var(--muted);font-weight:700;font-family:var(--mono)}
/* ページ唯一の h1。ブランド名ではなく「今日の 10 題」——毎日来る理由は「今日のぶんはまだ
   解いていない」だけで作っているので、見出しもその日を指す。名前はヘッダにある。
   日付は h1 と同じ行にベースラインを揃えて置く。その下にタグラインを各言語で 1 行。 */
.intro h1{margin:0;font-size:clamp(1.25rem,min(6.4vw,3.4svh),2.15rem);font-weight:700;
  line-height:1.24;letter-spacing:.01em;text-wrap:balance}
.intro .sub{color:var(--muted);font-size:.98rem;font-weight:700}
/* 低い画面ではタグラインの 1 行を落とす（結果・順位表でも同じ）。 */
@media (max-height:700px){.intro .sub{display:none}}
/* **問いを出している間だけ**見出しごと引っ込める。1 問と「次の問題」を収めるための
   最後の 40px はここにしかない。結果と順位表（.done）では残す——どの 10 題かは、
   そこでは文字でしか分からない。 */
@media (max-height:760px){.stage:has(.q) .intro{display:none}}

/* 出題カード */
.q,.done{background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:5px 6px 0 var(--shadow);
  padding:clamp(.55rem,2svh,1.15rem) 1rem clamp(.6rem,2svh,1.3rem);
  margin-top:clamp(.45rem,2svh,1.3rem)}

.qtop{display:flex;flex-direction:column;gap:clamp(.25rem,1svh,.5rem)}
.qmeta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  font-size:.74rem;color:var(--muted);font-weight:700;letter-spacing:.03em}
.qmeta .score{background:var(--pop-soft);color:var(--pop);border-radius:99px;padding:.14rem .6rem;
  transition:transform calc(var(--t)*260ms) cubic-bezier(.34,1.6,.64,1)}
.qmeta .score.bump{transform:scale(1.22)}
/* 経過時間。答えた瞬間に止まり、止まったことが見えるように薄くする——
   ここから先（解説・音声）は測っていない、という合図をそれだけで済ませる。
   margin-left:auto で点数の隣へ寄せる（3 つを均等に散らすと進捗が読みにくい）。 */
.qmeta .clock{margin-left:auto;font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--muted);transition:opacity calc(var(--t)*200ms)}
.qmeta .clock.stopped{opacity:.45}
.qbar{height:clamp(7px,1.6svh,12px);border-radius:99px;background:var(--bar-track);
  border:1px solid var(--bar-edge);overflow:hidden}
.qfill{height:100%;border-radius:99px;background:var(--bar-fill);
  box-shadow:inset 0 0 0 1px var(--bar-ring);
  transition:width calc(var(--t)*520ms) cubic-bezier(.34,1.35,.64,1)}

.qlabel{margin:clamp(.3rem,1.6svh,.95rem) 0 .1rem;font-size:.82rem;line-height:1.4;
  font-weight:700;color:var(--accent-deep)}
.qprompt{font-size:clamp(1.05rem,2.4svh,1.3rem);line-height:1.55;
  padding:clamp(.2rem,.8svh,.4rem) 0 clamp(.45rem,1.8svh,1rem)}
.qprompt.big{font-size:clamp(1.9rem,min(11vw,7.5svh),4.4rem);font-weight:700;line-height:1.12;
  letter-spacing:.03em;text-align:center;padding:clamp(.15rem,.6svh,.3rem) 0 clamp(.45rem,1.8svh,1rem)}
/* 出題文に添える例文の華語訳（義→字）。出題文より弱く、肢より前に置く。 */
.qhint{margin:-.5rem 0 clamp(.5rem,1.7svh,.9rem);font-size:.95rem;line-height:1.6;color:var(--muted)}

/* 肢。出るときは 1 枚ずつ持ち上がる（--i）。回答までは傾けない。 */
.qopts{display:grid;gap:clamp(.3rem,1.1svh,.5rem)}
.opt{text-align:center;padding:clamp(.32rem,1.5svh,.7rem) .9rem;
  border:3px solid var(--edge);border-radius:var(--r-opt);
  background:var(--card);color:inherit;font-size:clamp(.85rem,2.1svh,1.05rem);font-weight:700;
  line-height:clamp(1.25em,3.1svh,1.5em);
  cursor:pointer;box-shadow:3px 4px 0 var(--shadow);
  transition:transform calc(var(--t)*260ms) cubic-bezier(.34,1.5,.64,1),
    opacity calc(var(--t)*220ms), box-shadow calc(var(--t)*220ms),
    border-color calc(var(--t)*160ms), background calc(var(--t)*160ms),
    color calc(var(--t)*160ms)}
.opt.in{opacity:0;transform:translateY(10px)}
.opt.show{opacity:1;transform:none;transition-delay:calc(var(--i) * var(--t) * 55ms)}
.opt:hover:not(:disabled){border-color:var(--accent);color:var(--accent-deep)}
.opt:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--shadow)}
.qopts.big .opt{font-size:clamp(1.15rem,3.1svh,1.6rem)}
.qopts.tailo .opt{font-size:clamp(1rem,2.4svh,1.2rem);font-family:var(--mono)}
/* 回答後: 正解と選んだ誤答だけが傾いて浮き、残りは沈む */
.qopts.answered .opt.right{border-color:var(--right);background:var(--right-soft);color:var(--right);
  box-shadow:4px 6px 0 var(--right-shadow);transform:rotate(-1.6deg) scale(1.03);opacity:1;
  animation:pop calc(var(--t)*420ms) cubic-bezier(.34,1.6,.64,1)}
.qopts.answered .opt.wrong{border-color:var(--wrong);background:var(--wrong-soft);color:var(--wrong);
  box-shadow:3px 4px 0 var(--wrong-shadow);transform:rotate(1.4deg);opacity:1;
  animation:shake calc(var(--t)*380ms)}
.qopts.answered .opt:not(.right):not(.wrong){opacity:.4;transform:scale(.98)}

/* 組み合わせの盤。4 行 3 列に、左上から 漢字・台羅 と交互に置く。列が 3（奇数）なので
   交互に置くだけで市松になり、どちら側かが列で読めない。 */
.pair{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.3rem,1.1svh,.5rem)}
.tile{display:flex;align-items:center;justify-content:center;min-height:clamp(2.4rem,7svh,3.6rem);
  padding:clamp(.3rem,1.2svh,.6rem) .35rem;border:3px solid var(--edge);border-radius:var(--r-opt);
  background:var(--card);color:inherit;font-weight:700;line-height:1.35;text-align:center;
  cursor:pointer;box-shadow:3px 4px 0 var(--shadow);overflow-wrap:anywhere;
  transition:transform calc(var(--t)*180ms), box-shadow calc(var(--t)*180ms),
    border-color calc(var(--t)*160ms), background calc(var(--t)*160ms), color calc(var(--t)*160ms),
    opacity calc(var(--t)*220ms)}
.tile.thanji{font-size:clamp(1.15rem,3svh,1.5rem)}
.tile.ttailo{font-size:.9rem;font-family:var(--mono)}
.tile:hover:not(:disabled){border-color:var(--accent);color:var(--accent-deep)}
.tile:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--shadow)}
.tile.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);
  transform:translateY(3px);box-shadow:0 0 0 var(--shadow)}
.tile.miss{border-color:var(--wrong);background:var(--wrong-soft);color:var(--wrong);
  animation:shake calc(var(--t)*380ms)}
/* 組んだ札は**大きさを変えずに色だけ**で示す。消すと盤が崩れて残りの札が動くし、
   影や透明度を落とすと縮んで見えて、盤が組むたびに落ち着かなくなる。
   **クラス名を .done にしない**——結果画面が .done を使っていて、中央揃えと
   その余白がそのまま札に当たる（札が縦に伸びて盤が組むたびに動いた）。 */
.tile.paired{border-color:var(--right);background:var(--right-soft);color:var(--right);
  box-shadow:3px 4px 0 var(--right-shadow);transform:none;cursor:default}

/* 正誤と「次の問題」の行。回答前は正誤だけが入っていて空に見えるが、.qfeed の min-height が
   先に高さを取っているので、ボタンが足されても下の要素が跳ねない。 */
.qafter{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;margin-top:clamp(.45rem,1.6svh,.85rem)}
.qafter .primary{margin-top:0;margin-left:auto}
.qfeed{display:inline-block;margin:0;min-height:1.6rem;font-size:.9rem;font-weight:700;
  color:var(--muted)}
.qfeed.ok,.qfeed.ng{padding:.26rem .85rem;border-radius:99px;
  animation:pop calc(var(--t)*380ms) cubic-bezier(.34,1.7,.64,1)}
.qfeed.ok{background:var(--right-soft);color:var(--right)}
.qfeed.ng{background:var(--wrong-soft);color:var(--wrong)}

/* 並び替え */
.slot{display:flex;flex-wrap:wrap;gap:clamp(.3rem,1.1svh,.45rem);
  min-height:clamp(2.6rem,7svh,3.6rem);padding:clamp(.4rem,1.4svh,.65rem);
  border:3px dashed var(--line);border-radius:var(--r-opt);align-items:center;background:var(--accent-soft)}
.slot.right{border-color:var(--right);border-style:solid;background:var(--right-soft)}
.slot.wrong{border-color:var(--wrong);border-style:solid;background:var(--wrong-soft);
  animation:shake calc(var(--t)*380ms)}
.slot .hint{color:var(--muted);font-size:.86rem;font-weight:700;padding:0 .2rem}
.bank{display:flex;flex-wrap:wrap;gap:clamp(.3rem,1.1svh,.45rem);margin-top:clamp(.45rem,1.6svh,.8rem)}
.chip{padding:clamp(.25rem,1.1svh,.42rem) .8rem;line-height:1.4;
  border:3px solid var(--edge);border-radius:12px;background:var(--card);
  color:inherit;font-size:clamp(.85rem,2.2svh,1rem);font-weight:700;font-family:var(--mono);cursor:pointer;
  box-shadow:2px 3px 0 var(--shadow);
  transition:transform calc(var(--t)*160ms), box-shadow calc(var(--t)*160ms),
    border-color calc(var(--t)*140ms), background calc(var(--t)*140ms)}
.chip:hover:not(:disabled){border-color:var(--accent);color:var(--accent-deep)}
.chip:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--shadow)}
.chip:disabled{opacity:.25;cursor:default;box-shadow:none;transform:translateY(3px)}
.chip.placed{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);
  box-shadow:2px 3px 0 var(--shadow);opacity:1;transform:none}
.chip.placed:disabled{opacity:.9}

/* 音声。聞く問いはこのボタンが問いそのものなので、大きく丸く。 */
.play{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;border-radius:99px;
  border:3px solid var(--accent);background:var(--card);color:var(--accent-deep);
  font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:2px 3px 0 var(--shadow);
  transition:transform calc(var(--t)*160ms), box-shadow calc(var(--t)*160ms)}
.play:active{transform:translateY(3px);box-shadow:0 0 0 var(--shadow)}
.play .ico{font-size:.75rem}
.qprompt .play{padding:clamp(.4rem,1.9svh,.95rem) 2rem;font-size:clamp(1rem,2.3svh,1.15rem);
  background:var(--accent);color:var(--on-accent);
  border-color:var(--edge);box-shadow:4px 5px 0 var(--shadow)}
.qprompt .play .ico{font-size:1rem}
.play.dead{color:var(--muted);border-color:var(--line);background:var(--card)}

/* 回答後の開示。漢字・台羅・語釈を必ず揃える。下へ開く。 */
.reveal{margin-top:.95rem;padding:0 .95rem;border-radius:var(--r-opt);background:var(--accent-soft);
  border:3px solid var(--line);overflow:hidden;max-height:0;opacity:0;
  transition:max-height calc(var(--t)*420ms) ease, opacity calc(var(--t)*300ms),
    padding calc(var(--t)*420ms) ease}
.reveal.show{max-height:520px;opacity:1;padding:.9rem .95rem 1rem}
/* 複数枚まとめて開く形式（違う韻・組み合わせ）。語釈の長さで高さが読めないので
   上限を置かない（置くと長い語釈のときだけ下が切れる）。答がある形式では答の札に
   色を付ける——並べただけだと、どれが外れだったのか読み取れない。 */
.reveal.list.show{max-height:none}
.reveal.list .rdef + .rhead{margin-top:.8rem;padding-top:.8rem;border-top:2px solid var(--line)}
/* 仲間はずれの「残りの 3 つは何のグループか」。分類名は辞典の語なので繁體中文のまま。 */
.rnote{margin:0 0 .8rem;padding-bottom:.7rem;border-bottom:2px solid var(--line);
  font-size:.9rem;font-weight:700;color:var(--accent-deep)}
.reveal .rhead.ans .rhanji{color:var(--right)}
.rhead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rhanji{font-size:1.5rem;font-weight:700}
.rtailo{font-size:1rem;color:var(--muted);font-family:var(--mono)}
.rdef{margin-top:.35rem;font-size:.96rem}
.rex{margin-top:.7rem;padding-left:.75rem;border-left:4px solid var(--pop-tag)}
/* 例文の再生ボタンは例文の 1 行目に付ける。折り返しても例文の側に留める。 */
.exhead{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.exh{font-size:1rem;font-weight:700}
.ext{font-size:.88rem;color:var(--muted);font-family:var(--mono)}
.exc{font-size:.88rem;color:var(--muted)}
.rsrc{margin-top:.8rem;font-size:.74rem;color:var(--muted)}

.primary{margin-top:1rem;padding:clamp(.4rem,1.6svh,.75rem) 1.6rem;border:3px solid var(--edge);border-radius:99px;
  background:var(--accent);color:var(--on-accent);font-size:.95rem;font-weight:700;cursor:pointer;
  box-shadow:4px 5px 0 var(--shadow);
  transition:transform calc(var(--t)*160ms), box-shadow calc(var(--t)*160ms)}
.primary:active{transform:translateY(4px);box-shadow:0 0 0 var(--shadow)}
.qloading,.qerror{padding:2rem 0;color:var(--muted);font-weight:700}
.qerror{color:var(--wrong)}

/* 結果。印 → 数字 → 10 マスの順で出る。上半分だけ切り取っても意味が通る並びにする。 */
.done{text-align:center;padding:1.6rem 1rem 1.4rem}
.dday{font-size:.74rem;font-weight:700;letter-spacing:.08em;color:var(--muted);
  font-family:var(--mono);margin-bottom:.9rem}
.seal{width:124px;height:124px;border:5px solid var(--accent);border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;gap:.15rem;color:var(--seal-ink);
  transform:rotate(-6deg);animation:seal calc(var(--t)*620ms) cubic-bezier(.3,1.5,.6,1)}
.seal b{font-size:3.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.seal i{font-style:normal;font-size:1rem;font-weight:700;align-self:flex-end;margin-bottom:1.5rem}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:150px;margin:1.1rem auto 0}
.dots i{aspect-ratio:1;border-radius:7px;background:var(--line);display:block;
  transform:scale(.6);opacity:0;
  transition:transform calc(var(--t)*300ms) cubic-bezier(.34,1.7,.64,1),
    opacity calc(var(--t)*200ms), background calc(var(--t)*200ms)}
.dots i.shown{transform:none;opacity:1}
.dots i.on{background:var(--dot-on)}
.dscore{margin-top:.9rem;font-size:1.1rem;font-weight:700}
.dtime{margin-top:.25rem;color:var(--muted);font-size:.86rem;font-weight:700;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.dtail{opacity:0;transform:translateY(8px);
  transition:opacity calc(var(--t)*300ms), transform calc(var(--t)*300ms)}
.done.in .dtail{opacity:1;transform:none}
.dscore,.dtime{opacity:0;transition:opacity calc(var(--t)*260ms)}
.done.in .dscore,.done.in .dtime{opacity:1}
.share{margin-top:1rem;padding:.6rem 1.3rem;border:3px solid var(--edge);border-radius:99px;
  background:var(--card);color:var(--fg);font-size:.88rem;font-weight:700;cursor:pointer;
  box-shadow:3px 4px 0 var(--shadow);
  transition:transform calc(var(--t)*160ms), box-shadow calc(var(--t)*160ms)}
.share:active{transform:translateY(3px);box-shadow:0 0 0 var(--shadow)}
.share:disabled{opacity:.5;cursor:default}
/* 共有の 2 つは横に並べる。**黄は 1 画面に 1 つだけ**で、その画面でいちばん押して
   ほしいものに付ける。部屋では「結果を送る」（順位表へ書き込む唯一の道で、途切れると
   誰も全員を見られない）、「今日の 10 題」では「次の 10 題」（今日より先へ進む唯一の道。
   ここでの成績共有は部屋を作らないので、受け取った人も今日の 10 題を遊ぶだけ）。
   付け替えは quiz.js 側。黄は塗り専用なので、載る文字は必ず --on-accent。
   「もう一度」は .primary から降ろしてある——答えを知った 10 題の遊び直しなので、
   共有の 2 つより後ろで足りる。 */
.drow{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.next{background:var(--accent);color:var(--on-accent);border-color:var(--edge)}
.dnote{margin-top:.55rem;color:var(--muted);font-size:.78rem;line-height:1.6;
  max-width:30em;margin-inline:auto}

/* 共有の札。**ボタンの行と入れ替わる**ので画面が伸びず、黄も 1 つのまま。
   シートの無いブラウザではここが共有の実体なので、送る中身をそのまま出す。 */
.spanel{margin-top:1rem;padding:.85rem .8rem .9rem;border:3px dashed var(--line);
  border-radius:var(--r-opt);background:var(--accent-soft);text-align:left}
.snote{margin-bottom:.5rem;font-size:.8rem;font-weight:700;color:var(--muted)}
/* **縦に積む。** 横に並べると「コピー」→「コピーしました」で札の幅が変わり、
   隣の欄が縮んで中の文が組み直される。縦なら文字数が変わっても何も動かない。
   欄が札の幅いっぱいを使えるので、URL の折り返しも減る。 */
.sline{display:flex;flex-direction:column;gap:.5rem}
/* URL は途中で折れると読めないので等幅。textarea も同じ見た目に揃える。 */
/* flex は当てない。**縦に積む器の中で flex:1 を残すと高さ側に効いて**、
   中身に合わせた height が潰される（幅は stretch で勝手に埋まる）。 */
.sfield{padding:.5rem .6rem;border:3px solid var(--edge);border-radius:12px;
  background:var(--card);color:var(--fg);font:inherit;font-size:.8rem;font-family:var(--mono);
  line-height:1.5;resize:none}
.sfield:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.scopy{width:100%;padding:.5rem .85rem;border:3px solid var(--edge);border-radius:12px;
  background:var(--card);color:var(--fg);font-size:.82rem;font-weight:700;cursor:pointer;
  transition:transform calc(var(--t)*160ms)}
/* .next より後に来るので、黄はここで上書きし直す（確認の無い札ではコピーが主役）。 */
.scopy.next{background:var(--accent);color:var(--on-accent)}
.scopy:active{transform:translateY(2px)}
.spanel .share{margin-top:.7rem;width:100%;box-shadow:3px 4px 0 var(--shadow)}
.scancel{display:block;margin:.6rem auto 0;padding:.2rem .6rem;border:0;background:none;
  color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;text-decoration:underline}

/* ヘッダの共有の札。**出題にも結果にも触らない**ように dialog に載せる（結果画面の札は
   ボタンの行と入れ替わるが、こちらは解きかけの上に重なるだけ）。 */
.sdialog{padding:.9rem;border:3px solid var(--edge);border-radius:var(--r);
  background:var(--card);color:var(--fg);max-width:min(92vw,26rem);
  box-shadow:6px 7px 0 var(--shadow)}
.sdialog::backdrop{background:rgba(43,43,43,.5)}
.sdialog .spanel{margin-top:0}
/* QR は**地が白・マスが黒のまま**。暗い地に合わせて反転させると拾えない読み取り機がある
   ので、暗い画面でも白い板ごと出す（余白 4 マスは SVG の中に入っている）。
   投影して読ませるので、札の幅いっぱいまで大きくする。 */
.qr{display:block;width:100%;max-width:20rem;margin:0 auto .7rem;border-radius:8px;
  background:#fff}

/* 部屋の順位表。名前は URL に載って転送され得るので、本名ではなくニックネームを促す。 */
.bwrap{margin-top:1.3rem;padding-top:1.1rem;border-top:3px dashed var(--line);text-align:left}
.blabel{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:.35rem}
.bname{width:100%;padding:.55rem .8rem;border:3px solid var(--edge);border-radius:var(--r-opt);
  background:var(--card);color:var(--fg);font:inherit;font-size:1rem;font-weight:700}
.bname:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.board{display:flex;flex-direction:column;gap:.4rem;margin:.7rem 0 .2rem}
.brow{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:12px;
  background:var(--accent-soft);font-size:.9rem;font-weight:700}
.brow.me{background:var(--pop-soft);box-shadow:inset 0 0 0 3px var(--accent)}
.brank{font-family:var(--mono);color:var(--muted);min-width:1.2em}
.bwho{flex:1;overflow-wrap:anywhere}
.bpts{color:var(--pop)}
.btime{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.balone{color:var(--muted);font-size:.82rem;font-weight:700;padding:.1rem .1rem .2rem}
/* 入口で出す順位表。結果画面の途中ではなく画面そのものなので、区切りの線は要らない。 */
.bview .bwrap{margin-top:.2rem;padding-top:0;border-top:0}

/* ここから下がアプリへの導線。10 問を解き終えた人だけが見る位置に置く——
   途中に挟むと、10 題をテンポよく回すという本体の邪魔になる。

   結果の下半分は **2 つの出口**に分かれる。上は遊び（共有・次の 10 題・もう一度）、
   下は学習。結果画面に居るのは「友だちに回したい人」と「台語を覚えたい人」の 2 種類で、
   行動の順番ではなく**来た人の目的**で区切る。
   ・上は見出しを持たない。黄のボタンがそのまま選択肢として立っている
   ・下だけを墨の札にする。**対等ではなく、目が下へ行くようにしてある**
   ・札に墨の輪郭とベタ影を使えるのはここだけ。肢と同じ格好なので「押せる」に見えるが、
     この 1 枚は実際にアプリへ進む出口なので、その読みで正しい
   ・.done は中央揃えなので、語が並ぶ札の中だけ左へ戻す */
.dor{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;
  color:var(--muted);font-size:.76rem;font-weight:700;font-family:var(--mono)}
.dor::before,.dor::after{content:"";flex:1;height:3px;background:var(--line);border-radius:2px}
.learn{margin-top:1rem;padding:1.1rem 1rem 1.2rem;border:3px solid var(--edge);
  border-radius:var(--r);background:var(--pop-soft);box-shadow:4px 5px 0 var(--shadow);
  text-align:left}
.lhead{font-size:1rem;font-weight:700}
.llead{margin-top:.5rem;font-size:.9rem;font-weight:700;line-height:1.6}
/* 間違えた語。**3 つまで**——全部並べると復習表になり、「Bee は記録を持たない」という
   前提のほうが先に崩れる。残りは数だけ出す。何語間違えてもバッジの位置は動かない。 */
.lmiss{margin-top:.95rem;font-size:.78rem;font-weight:700;color:var(--muted)}
.miss{margin-top:.4rem;display:flex;flex-direction:column;gap:.45rem}
.miss div{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.miss b{font-size:1rem;font-weight:700}
/* 台羅は入聲符が明朝・ゴシックで□になる環境がある。等幅だけが確実に出せる。 */
.miss i{font-style:normal;font-family:var(--mono);font-size:.76rem;color:var(--accent-deep)}
.miss span{font-size:.76rem;color:var(--muted)}
.lmore{margin-top:.5rem;font-size:.76rem;font-weight:700;color:var(--accent-deep)}
.lnote{margin-top:.7rem;color:var(--muted);font-size:.8rem;line-height:1.65}
/* バッジは自前で行を占める（inline-block のままだと Pro のリンクが横に並ぶ）。 */
.store{display:block;width:fit-content;margin:.9rem auto 0;line-height:0;border-radius:8px}
.store img{height:44px;width:auto;display:block}
.cta{display:inline-block;margin-top:.7rem;font-size:.88rem;font-weight:700}

/* 「これは何 / 遊び方」。**クイズより下に置く**——1 問と「次の問題」を 1 画面に収める規則に
   触れないため。ここが検索・回答エンジンの読む唯一の静的な本文なので、消さない。 */
.about{margin-top:2.2rem;padding-top:1.2rem;border-top:3px dashed var(--line);
  display:flex;flex-direction:column;gap:.5rem}
.about h2{margin:.4rem 0 0;font-size:1rem;font-weight:700}
.about p{margin:0;font-size:.86rem;line-height:1.8;color:var(--muted)}
.about ol{margin:0;padding-left:1.35rem;font-size:.86rem;line-height:1.8;color:var(--muted)}
.about a{color:var(--accent-deep)}

.foot{margin-top:2.2rem;padding-top:1.2rem;border-top:3px dashed var(--line);
  color:var(--muted);font-size:.8rem;display:flex;flex-direction:column;gap:.4rem}
.foot a{color:var(--muted)}

@keyframes pop{0%{transform:rotate(0) scale(1)}45%{transform:rotate(-2.4deg) scale(1.07)}
  100%{transform:rotate(-1.6deg) scale(1.03)}}
@keyframes shake{0%,100%{transform:rotate(1.4deg) translateX(0)}
  18%{transform:rotate(1.4deg) translateX(-7px)}38%{transform:rotate(1.4deg) translateX(7px)}
  58%{transform:rotate(1.4deg) translateX(-4px)}78%{transform:rotate(1.4deg) translateX(4px)}}
@keyframes seal{0%{transform:rotate(-26deg) scale(.5);opacity:0}
  60%{transform:rotate(-2deg) scale(1.08);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .opt.in{opacity:1;transform:none}
  .reveal{max-height:none;opacity:1;padding:.9rem .95rem 1rem}
  .dots i{opacity:1;transform:none}
  .dscore,.dtime,.dtail{opacity:1;transform:none}
}

@media (max-width:520px){
  /* ヘッダのマークと名前は狭い画面だけ一段小さく。48px / 2rem のままだとブランドの塊が
     183px になり、言語ピル（約 197px）が入らず次の行へ落ちてヘッダが 111px を食う。
     36px / 1.25rem が 1 行に収まる上限（実測）。h1（25.6px）を超えない上限でもある。 */
  :root{--mark:36px; --brand-size:1.25rem}
  /* 上下は広い画面と同じく svh で詰める（左右だけこの幅の値にする）。 */
  .q,.done{padding:clamp(.55rem,2svh,1.05rem) .85rem clamp(.6rem,2svh,1.2rem)}
  .qopts.big .opt{font-size:clamp(1.15rem,3.1svh,1.4rem)}
}