/* クォッカ漢字ライフ。
   配色・書体は他のクォッカ作品と揃えている。「〜ライフ」シリーズなので基調はピンク。
   そのうえで、出題の枠だけ原稿用紙のような升目にして、勉強している感じを出している。 */

:root {
  --pink: #e85d84;
  --pink-soft: #ffe3ec;
  --pink-bg: #fff6fa;
  --pink-strong: #d94c74;
  --cream: #fffdfb;
  --text: #5b4a4a;
  --text-muted: #9c8d8d;
  --ink: #3f3535;          /* 漢字の色。読みやすさ優先で濃くする */
  --paper: #fffdf6;        /* 升目の紙の色 */
  --paper-line: #e6ddc8;
  --good: #3fa06b;
  --bad: #d9534f;
}

* {
  box-sizing: border-box;
}

/* iPhoneは連打(ダブルタップ)をズーム操作と解釈することがある。
   manipulationにすると、ピンチズームは残したままダブルタップズームだけ止められる。 */
html {
  touch-action: manipulation;
}

body {
  margin: 0;
  padding: 0;
  font-family: "M PLUS Rounded 1c", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, #fff6fa 0%, #fffdfb 55%, #fff9f2 100%);
  min-height: 100vh;
  line-height: 1.7;
}

.hidden {
  display: none !important;
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 130px;
  min-height: 100vh;
}

.panel {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 2px solid var(--pink-soft);
  border-radius: 20px;
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(232, 93, 132, 0.12);
}

h1 {
  font-size: 21px;
  font-weight: 800;
  color: var(--pink);
  margin: 0 0 4px;
}

.screen-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--pink);
  margin: 0 0 8px;
}

/* width/height属性で縦横比を伝えてあるので、画像の読み込み前でも高さが確保され、
   あとから下の要素が飛ばされない。 */
.hero-quokka {
  display: block;
  width: 150px;
  height: auto;
  margin: 2px auto 4px;
}

.hint {
  color: var(--text-muted);
  font-size: 13px;
  margin: 6px 0 12px;
}

.you-name {
  color: var(--pink);
  font-weight: 700;
}

.link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* シェアボタンと見た目をそろえたピルボタン。以前は文字リンクのままだったが、
   押せることが伝わりにくかったので同じ形にした。 */
.rules-link,
.link-row .home-link,
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 2px solid var(--pink-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
}

.rules-link:hover,
.link-row .home-link:hover,
.share-button:hover {
  border-color: var(--pink);
  background: var(--pink-bg);
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-align: left;
}

input[type="text"] {
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  background: var(--pink-bg);
  margin-bottom: 12px;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--pink);
}

button {
  font-family: inherit;
  cursor: pointer;
}

.primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: var(--pink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(91, 74, 74, 0.20);
}

.primary:hover { background: var(--pink-strong); }
.primary:disabled { opacity: 0.5; cursor: default; }

.ghost {
  padding: 9px 20px;
  border: 2px solid var(--pink-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ghost:hover { border-color: var(--pink); }
.ghost:disabled { opacity: 0.45; cursor: default; }
.ghost.small { padding: 7px 14px; font-size: 12px; }

.cost {
  margin-left: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.join-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffeaea;
  color: var(--bad);
  font-size: 12px;
  font-weight: 700;
}

/* --- カテゴリ選択 ------------------------------------------------------------ */

.category-list {
  display: grid;
  gap: 12px;
  margin: 4px 0 16px;
}

.category-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--pink-soft);
  border-radius: 18px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 6px 16px rgba(232, 93, 132, 0.10);
}

.category-card:hover {
  border-color: var(--pink);
  background: var(--pink-bg);
}

/* 部首そのものを見せたいので大きく。ここが選ぶときの手がかりになる。 */
.category-radical {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--pink-bg);
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.category-body { display: flex; flex-direction: column; }
.category-label { font-size: 15px; font-weight: 800; color: var(--text); }
.category-count { font-size: 12px; color: var(--text-muted); }

/* 部首ごとのおおまかな難易度(words.js categoryDifficulty)。厳密な学年めやすではなく、
   選ぶときの参考程度の目安なので、控えめな小さいバッジにしている。 */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.difficulty-easy { background: #e5f5ec; color: var(--good); }
.difficulty-normal { background: #fff3d6; color: #a97a1e; }
.difficulty-hard { background: #fde9e8; color: var(--bad); }

/* --- 出題画面 ---------------------------------------------------------------- */

#game-screen { max-width: 100%; }

.hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

.pill {
  padding: 5px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid var(--pink-soft);
  font-size: 13px;
  font-weight: 700;
}

/* 残り10秒を切ったら赤くする。時間が主役のゲームなので、気づけないと理不尽になる。 */
.pill.warn { border-color: var(--bad); color: var(--bad); }

.pill.flash { animation: pill-flash 0.4s ease; }

@keyframes pill-flash {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* 出題の升目。原稿用紙のつもりで、四辺と中心の十字を薄く引く。 */
.kanji-stage {
  position: relative;
  width: min(62vw, 230px);
  height: min(62vw, 230px);
  margin: 4px auto 10px;
  border: 3px solid var(--paper-line);
  border-radius: 14px;
  background:
    linear-gradient(var(--paper-line), var(--paper-line)) center/1px 100% no-repeat,
    linear-gradient(var(--paper-line), var(--paper-line)) center/100% 1px no-repeat,
    var(--paper);
  box-shadow: 0 8px 20px rgba(91, 74, 74, 0.12);
}

/* 出題直後のカウントダウン(3→2→1)。漢字の上に重ねて出す。 */
.countdown {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(30vw, 110px);
  font-weight: 800;
  color: var(--pink);
  background: rgba(255, 253, 246, 0.88);
  border-radius: 11px;
  pointer-events: none;
}

.countdown.pop {
  animation: countdown-pop 1s ease;
}

@keyframes countdown-pop {
  0% { transform: scale(1.3); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  85% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .countdown.pop { animation: none; }
}

/* 画面の中でいちばん目立たせる。読めるかどうかがこのゲームの中身なので、
   ここが小さいと成立しない。 */
.kanji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(46vw, 170px);
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
  /* 丸ゴシックは字画の細かい漢字が潰れやすいので、ここだけ明朝系に寄せる。 */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
}

/* 升目の右下に小さく添える。主役は漢字なので邪魔をしない大きさにする。
   絵柄は他のクォッカ作品と同じSVG(ui.js の QUOKKA_SVG)。 */
.quokka {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 58px;
  height: 54px;
}

.quokka svg,
.result-quokka svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 表情の出し分け。ふだんは normal だけ見せ、反応のときだけ差し替える。 */
.face-glad,
.face-sad { display: none; }

.glad .face-normal,
.sad .face-normal { display: none; }

.glad .face-glad { display: block; }
.sad .face-sad { display: block; }

.quokka.glad { animation: quokka-glad 0.55s ease; }
.quokka.sad { animation: quokka-sad 0.5s ease; }

@keyframes quokka-glad {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-14px) rotate(-12deg); }
  70% { transform: translateY(-4px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes quokka-sad {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-22deg) translateY(4px); }
  75% { transform: rotate(18deg) translateY(4px); }
}

/* 押した文字の並び。まだ押していないぶんは空欄にして、あと何文字要るかを見せる。 */
.typed {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 44px;
}

.typed-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 2px dashed var(--pink-soft);
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
}

.typed-cell.filled {
  border-style: solid;
  border-color: var(--pink);
  background: var(--pink-bg);
  color: var(--text);
}

/* 答え合わせのあとに出す、正しい読み。
   正解でも不正解でも同じ形で出す。間違えたときこそ読みが知りたいので、
   「間違えた人には見せない」ようにはしない。 */
.typed-cell.answer {
  border-style: solid;
  font-weight: 800;
}

.typed-cell.answer.ok {
  border-color: var(--good);
  background: #eef8f2;
  color: var(--good);
}

.typed-cell.answer.ng {
  border-color: var(--bad);
  background: #ffeaea;
  color: var(--bad);
}

/* 「わからないので次へ」で答えを見せるときの色。正解(緑)・不正解(赤)のどちらでもない
   ニュートラルな見た目にする(自分から答えなかっただけで、間違えたわけではないため)。 */
.typed-cell.answer.skip {
  border-color: var(--text-muted);
  background: #f1f0ec;
  color: var(--text-muted);
}

.typed.shake { animation: shake 0.28s ease; }

/* 答えを見せている間は押せない。押しても無視されるので、見た目でも示す。 */
.letters.locked { opacity: 0.45; }
.letters.locked .letter { cursor: default; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* ひらがなのボタン。数が変わっても崩れないよう、3列で折り返す。 */
.letters {
  display: grid;
  grid-template-columns: repeat(3, 74px);
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

/* 4個のときだけ2列にすると、2段2列で座りがよくなる。 */
.letters[data-count="4"] { grid-template-columns: repeat(2, 74px); }

.letter {
  width: 74px;
  height: 62px;
  border: 2px solid var(--pink-soft);
  border-radius: 14px;
  background: #ffffff;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(91, 74, 74, 0.12);
}

.letter:hover { border-color: var(--pink); }

/* 押し済み。もう一度押すと取り消せることが分かるよう、消さずに沈める。 */
.letter.used {
  background: var(--pink);
  border-color: var(--pink);
  color: #ffffff;
  box-shadow: none;
  transform: translateY(2px);
}

.game-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  min-height: 44px; /* スキップと入れ替わっても画面がガタつかないように高さを固定 */
  margin-bottom: 10px;
}

/* 答えを見せている間だけ出る。押せることが分かるよう、そっと動かしておく。 */
.next-button {
  width: auto;
  padding: 10px 26px;
  animation: next-pulse 1.4s ease-in-out infinite;
}

@keyframes next-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* お知らせ。高さを常に確保しておくので、出入りしても画面がガタつかない。 */
.toast {
  min-height: 30px;
  margin-bottom: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--good);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.toast.show { opacity: 1; background: #eef8f2; }
.toast.bad { color: var(--bad); }
.toast.bad.show { background: #ffeaea; }

/* --- ランキング --------------------------------------------------------------- */

.ranking-groups {
  width: 100%;
  max-width: 420px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-group {
  background: #ffffff;
  border: 2px solid var(--pink-soft);
  border-radius: 18px;
  padding: 12px 14px;
}

.ranking-group-title { font-size: 14px; font-weight: 800; color: var(--pink); }
.ranking-group-title .difficulty-badge { margin-top: 0; margin-left: 6px; vertical-align: middle; }
.ranking-note { margin: 2px 0 8px; font-size: 11px; color: var(--text-muted); }
.ranking-empty { margin: 6px 0; font-size: 12px; color: var(--text-muted); }

/* 参加画面のランキングは既定で3位まで。押すと10位まで広がる/たたむ。 */
.ranking-more-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  border: none;
  border-top: 1px dashed var(--pink-soft);
  background: none;
  color: var(--pink);
  font-size: 11px;
  font-weight: 700;
}
.ranking-more-btn:hover { color: var(--pink-strong); }

.ranking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 13px;
}

.ranking-row.you { background: var(--pink-bg); font-weight: 700; }
.ranking-rank { width: 26px; flex-shrink: 0; }
.ranking-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-value { flex-shrink: 0; color: var(--pink); font-weight: 700; font-size: 12px; }

/* --- 結果 --------------------------------------------------------------------- */

.result-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(91, 74, 74, 0.45);
  overflow-y: auto;
}

.result-box {
  width: 100%;
  max-width: 380px;
  background: var(--cream);
  border-radius: 20px;
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(91, 74, 74, 0.3);
}

.result-title { font-size: 19px; font-weight: 800; color: var(--pink); }
.result-quokka { width: 78px; height: 72px; margin: 2px auto 4px; }

.result-lines { margin: 8px 0; }

.result-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 14px;
}

.result-line strong { color: var(--pink); }
.result-note { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.result-note.bad { color: var(--bad); }

/* 読めなかった字の一覧。数が多いと結果画面が伸びすぎるので、中でスクロールさせる。 */
.missed {
  margin: 10px 0;
  padding: 8px 10px;
  border: 2px solid var(--paper-line);
  border-radius: 12px;
  background: var(--paper);
  text-align: left;
}

.missed-title { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 4px; }

.missed-list {
  max-height: 168px;
  overflow-y: auto;
}

.missed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  border-bottom: 1px dashed var(--paper-line);
}

.missed-row:last-child { border-bottom: none; }

/* 漢字は明朝寄りにする。丸ゴシックだと細かい字画が潰れて読めない。 */
.missed-kanji {
  flex-shrink: 0;
  width: 30px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
}

.missed-reading { flex: 1; font-size: 14px; font-weight: 700; }

.missed-how {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.missed-how.wrong { background: #ffeaea; color: var(--bad); }
.missed-how.skip { background: #f1f0ec; color: var(--text-muted); }
.missed-how.timeout { background: #fff6e5; color: #b8860b; }

.result-actions { display: grid; gap: 8px; margin-top: 12px; }

/* --- 音量パネル ---------------------------------------------------------------- */

.sound-controls {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mute-btn {
  /* 【2026-08-18】絵文字を字として置くとベースラインに沿ってしまい、丸ボタンの
     真ん中からズレる(🔊と⚙️で字形の高さが違うので特に目立つ)。中身を中央に置く。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  width: 38px;
  height: 38px;
  border: 2px solid var(--pink-soft);
  border-radius: 50%;
  background: #ffffff;
  font-size: 16px;
}

.settings-btn { width: 30px; height: 30px; font-size: 13px; }

.sound-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 190px;
  padding: 10px;
  background: #ffffff;
  border: 2px solid var(--pink-soft);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(91, 74, 74, 0.18);
}

.sound-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.sound-row-label { font-size: 11px; width: 40px; color: var(--text-muted); }
.sound-mute-btn { width: 26px; height: 26px; border: none; background: none; font-size: 14px; }
.sound-volume { flex: 1; min-width: 0; accent-color: var(--pink); }
/* 軽量サウンドの注意書き(2026-08-13)。 */
.sound-note { margin: 4px 0 0; font-size: 10px; line-height: 1.5; color: var(--text-muted); max-width: 190px; }

/* --- フッター・規約ポップアップ -------------------------------------------------- */

/* どの画面でも下に固定して出す、フッター一式(その他リンク・規約類・バージョン・
   著作権・音源クレジット)。以前は参加画面(join-screen)だけに置いていたため、
   他の画面(ゲーム中など)からは一度タイトルに戻らないと開けず、内容も
   利用規約・プライバシーポリシーだけに削っていた。参加画面フッターと同じ
   一式を、常時表示のこちらに一本化している。
   z-indexは結果画面(50)より上、音量パネル(60)・規約モーダル(100)より下にする。 */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  background: rgba(255, 253, 251, 0.92);
  border-top: 1px solid var(--pink-soft);
  backdrop-filter: blur(2px);
}

.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--pink); }

.footer-links,
.footer-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 6px;
}

.version-link {
  font-size: 10px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.version-link:hover { color: var(--pink); }
.sound-credit { color: var(--text-muted); }

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(91, 74, 74, 0.45); }

.legal-modal-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: min(80vh, 640px);
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(91, 74, 74, 0.3);
}

.legal-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.legal-modal-frame { width: 100%; height: 100%; border: none; background: var(--cream); }

/* --- 狭い画面 ------------------------------------------------------------------ */

@media (max-width: 400px) {
  .letters { grid-template-columns: repeat(3, 64px); }
  .letters[data-count="4"] { grid-template-columns: repeat(2, 64px); }
  .letter { width: 64px; height: 56px; font-size: 23px; }
  .typed-cell { width: 34px; height: 40px; font-size: 18px; }
}