/* Layout: 罫線ノートの1ページ。左に赤い余白線、単語は1行ずつ罫線にのせ、意味は赤ペンの色（赤シートで消える） */
:root {
  --paper: #fbfcfe;
  --desk: #eef2f8;
  --ink: #1d2740;
  --muted: #5d6781;
  --rule: #d5deee;
  --margin: #e58b8b;
  --accent: #2c4fa3;
  --accent-ink: #ffffff;
  --redpen: #d23a3a;
  --sheet: #e0473f;
  --chip: #e6ecf8;
  --g1: #2e8a5c;
  --g2: #2c6fb7;
  --g3: #8a4bb5;
  --font-en: "Lexend", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a2030; --desk: #121724; --ink: #e7ebf5; --muted: #a2abc2; --rule: #2c3550; --margin: #a65a5a;
    --accent: #8fb0ff; --accent-ink: #10172a; --redpen: #ff8a80; --sheet: #c8473f; --chip: #252e45;
    --g1: #6fd0a0; --g2: #7fb4ff; --g3: #c99bf0; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1a2030; --desk: #121724; --ink: #e7ebf5; --muted: #a2abc2; --rule: #2c3550; --margin: #a65a5a;
  --accent: #8fb0ff; --accent-ink: #10172a; --redpen: #ff8a80; --sheet: #c8473f; --chip: #252e45;
  --g1: #6fd0a0; --g2: #7fb4ff; --g3: #c99bf0; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* ===== 見た目の切り替え（右上の「見た目」）。ライト／ダークに関係なく、それぞれ決まった配色 ===== */
:root[data-style="chalk"] {
  --paper: #24443a; --desk: #1b342c; --ink: #f1efe6; --muted: #b9d1c5; --rule: #3b5d51; --margin: #f4b2c0;
  --accent: #f6d55c; --accent-ink: #1b342c; --redpen: #f6d55c; --sheet: #c96a5f; --chip: #2f5246;
  --g1: #9fe0b9; --g2: #9cc8ff; --g3: #e3b5ff;
  --font-en: "Kalam", "Comic Sans MS", "Segoe Print", cursive; --font-jp: "Klee One", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  color-scheme: dark;
}
:root[data-style="washi"] {
  --paper: #fbf7ee; --desk: #efe6d2; --ink: #2b2420; --muted: #6e6255; --rule: #e3d8c2; --margin: #c8402a;
  --accent: #b2361f; --accent-ink: #fffaf0; --redpen: #b2361f; --sheet: #b2361f; --chip: #f1e6cf;
  --g1: #3d7a4e; --g2: #2d5f8a; --g3: #7b4a8c;
  --font-en: "EB Garamond", Georgia, serif; --font-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --radius: 6px; color-scheme: light;
}
:root[data-style="grid"] {
  --paper: #ffffff; --desk: #e9f1ee; --ink: #1c2b2a; --muted: #55706b; --rule: #cfe3dc; --margin: #2a9d8f;
  --accent: #127566; --accent-ink: #ffffff; --redpen: #d1495b; --sheet: #d1495b; --chip: #dcefe9;
  --g1: #2e8a5c; --g2: #2c6fb7; --g3: #8a4bb5;
  --font-en: "Space Grotesk", "Segoe UI", sans-serif; --font-jp: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --radius: 4px; color-scheme: light;
}
:root[data-style="night"] {
  --paper: #18213f; --desk: #0e1530; --ink: #eef0ff; --muted: #a9b1d6; --rule: #2a3560; --margin: #ffc857;
  --accent: #ffc857; --accent-ink: #1a1a2e; --redpen: #ff9e7a; --sheet: #d0583f; --chip: #243058;
  --g1: #7fe0b0; --g2: #8fc1ff; --g3: #d6a8ff;
  --radius: 12px; color-scheme: dark;
}
:root[data-style="sakura"] {
  --paper: #ffffff; --desk: #fcecf1; --ink: #3a2a33; --muted: #7a6470; --rule: #f5d9e2; --margin: #f08aa8;
  --accent: #c2416b; --accent-ink: #ffffff; --redpen: #c2416b; --sheet: #c2416b; --chip: #fde2ea;
  --g1: #3f8a5e; --g2: #3c76b8; --g3: #9a4fa6;
  --font-en: "Quicksand", "Segoe UI", sans-serif; --font-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --radius: 18px; color-scheme: light;
}
:root[data-style="kraft"] {
  --paper: #fff8c9; --desk: #c9ab7d; --ink: #3a2c1a; --muted: #5e4c33; --rule: #eadf9f; --margin: #e07a3f;
  --accent: #3a2c1a; --accent-ink: #fff8c9; --redpen: #c2410c; --sheet: #c2410c; --chip: #f5ea9a;
  --g1: #3d7a3a; --g2: #2d5f8a; --g3: #8a3f7b;
  --font-en: "Kosugi Maru", "Hiragino Maru Gothic ProN", sans-serif; --font-jp: "Kosugi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  --radius: 2px; color-scheme: light;
}
:root[data-style="ocean"] {
  --paper: #ffffff; --desk: #e9f6fc; --ink: #0c2a43; --muted: #4f6b82; --rule: #d3e7f3; --margin: #3aa6d9;
  --accent: #0a6fb5; --accent-ink: #ffffff; --redpen: #e0553b; --sheet: #e0553b; --chip: #d6ecf8;
  --g1: #13866f; --g2: #0a6fb5; --g3: #7a4fc2;
  --font-en: "Nunito", "Segoe UI", sans-serif; --font-jp: "M PLUS 1p", "Hiragino Sans", sans-serif;
  --radius: 14px; color-scheme: light;
}
:root[data-style="forest"] {
  --paper: #f6f2e7; --desk: #e9e4d3; --ink: #23301f; --muted: #5d6a55; --rule: #e1dbc8; --margin: #7aa35b;
  --accent: #3f6b3a; --accent-ink: #f6f2e7; --redpen: #b5482a; --sheet: #b5482a; --chip: #e5e3cf;
  --g1: #3f6b3a; --g2: #2d5f8a; --g3: #7b4a8c;
  --font-en: "Merriweather Sans", "Segoe UI", sans-serif;
  --radius: 8px; color-scheme: light;
}
:root[data-style="retro"] {
  --paper: #0d1a12; --desk: #07110b; --ink: #c6f7d1; --muted: #82c093; --rule: #1e3a27; --margin: #39ff88;
  --accent: #39ff88; --accent-ink: #07110b; --redpen: #ffd166; --sheet: #b88a1c; --chip: #15301f;
  --g1: #39ff88; --g2: #7fd8ff; --g3: #ff9bd6;
  --font-en: "DotGothic16", "MS Gothic", monospace; --font-jp: "DotGothic16", "MS Gothic", monospace;
  --radius: 0px; color-scheme: dark;
}
/* ドット：Chiko Log と同じ、昔のゲームのウィンドウ風 */
:root[data-style="dot"] {
  --paper: #f6f1e3; --desk: #e6dfcc; --ink: #2e2a33; --muted: #6b6470; --rule: #d9d0b8; --margin: #c4473a;
  --accent: #1f5f8b; --accent-ink: #ffffff; --redpen: #c4473a; --sheet: #c4473a; --chip: #ebe3cc;
  --g1: #2f7a4a; --g2: #1f5f8b; --g3: #7b4a8c;
  --font-en: "DotGothic16", "MS Gothic", monospace; --font-jp: "DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
  --radius: 0px; color-scheme: light;
}
:root[data-style="dot"] h1 { font-weight: 400; letter-spacing: .03em; }
:root[data-style="dot"] h1::after { content: "_"; color: #c4473a; animation: dot-blink 1s steps(1) infinite; }
@keyframes dot-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-style="dot"] h1::after { animation: none; } }
:root[data-style="kraft"] :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background-color: #fffbe3; }
/* 見た目ごとの背景の模様 */
:root[data-style="grid"] body { background-image: linear-gradient(#d6e6e0 1px, transparent 1px), linear-gradient(90deg, #d6e6e0 1px, transparent 1px); background-size: 20px 20px; }
:root[data-style="ocean"] body { background-image: linear-gradient(180deg, #bfe4f7 0, #e9f6fc 360px); background-repeat: no-repeat; }
:root[data-style="night"] body { background-image: radial-gradient(1px 1px at 12% 3%, #fff9, transparent), radial-gradient(1px 1px at 78% 2%, #fff7, transparent), radial-gradient(1.5px 1.5px at 52% 1%, #fff8, transparent), radial-gradient(1px 1px at 92% 6%, #fff6, transparent); background-repeat: no-repeat; }
/* 森：机（背景）が暗い緑なので、紙の外に出ている文字は明るい色にする */
:root[data-style="forest"] body { background: #2f4a3a; }

body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--font-jp); font-size: 15px; line-height: 1.7; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.page {
  max-width: 980px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 48px;
  display: grid; gap: 20px;
}

@media (min-width: 1100px) { .page { max-width: none; padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* PC: 左に操作パネル、右に単語。スマホ: 上から順に */
.layout { display: grid; gap: 16px; }
.layout .main { min-width: 0; display: grid; gap: 10px; align-content: start; }
.side { min-width: 0; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
  .side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* 見出し */
.masthead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.mast-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.style-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
.style-pick select { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 5px 8px; font: inherit; font-weight: 500; }
.brand h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: .02em; text-wrap: balance; }
.home-link { display: inline-block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.home-link:hover { color: var(--accent); text-decoration: underline; }
.lede { margin: 4px 0 0; color: var(--muted); }
.lede b { font-family: var(--font-en); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.modes { display: flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: 999px; border: 1px solid var(--rule); }
.mode { text-decoration: none; color: var(--muted); padding: 6px 16px; border-radius: 999px; font-weight: 500; }
.mode[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
/* 要望・不具合を送るリンク（ホームの問い合わせページへ） */
.contact-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted);
  text-decoration: none; border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 4px 12px;
}
.contact-link:hover { color: var(--accent); border-color: var(--accent); }

/* ===== ここから ピクセルパズル 用 ===== */
:root { --ok: var(--g1); --ng: var(--redpen); --fog: #eef2f8; --fog2: #ffffff; --slot: color-mix(in srgb, var(--rule) 55%, var(--paper)); }
:root[data-style="chalk"], :root[data-style="night"], :root[data-style="retro"] { --fog: #c9d3e6; --fog2: #eef2fb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-style]) { --fog: #c9d3e6; --fog2: #eef2fb; } }
:root[data-style="dot"] body { background-image: radial-gradient(rgba(46,42,51,.09) 1px, transparent 1.4px); background-size: 12px 12px; }
:root[data-style="dot"] *, :root[data-style="dot"] *::before, :root[data-style="dot"] *::after { border-radius: 0 !important; }
:root[data-style="dot"] :is(.card, .modes, .dlg-box) {
  border-color: transparent;
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 4px 8px 0 0 rgba(46,42,51,.25), 8px 4px 0 0 rgba(46,42,51,.25);
}
:root[data-style="forest"] .masthead, :root[data-style="forest"] .foot, :root[data-style="forest"] .play-head { --ink: #f6f2e7; --muted: #c9d8bf; --accent: #c9e4a8; color: var(--ink); }
:root[data-style="forest"] .masthead :is(select, .modes, .btn, .contact-link) { --ink: #23301f; --muted: #5d6a55; --accent: #3f6b3a; }
:root[data-style="forest"] .play-head .btn { --ink: #f6f2e7; }
:root[data-style="kraft"] .card { box-shadow: 4px 6px 0 rgba(0,0,0,.15); }

.page { max-width: 1180px; }
@media (min-width: 1100px) { .page { max-width: 1280px; margin: 0 auto; } }
.mode { cursor: pointer; }
.snd { border: 1px solid var(--rule); background: var(--paper); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.snd[aria-pressed="false"] { opacity: .65; }
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px); padding: 18px; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 30px -18px rgba(20,30,60,.35); min-width: 0; }
.card h2 { margin: 0 0 10px; font-size: 18px; }
.btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 8px; padding: 9px 18px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.big { font-size: 18px; padding: 12px 24px; width: 100%; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn:disabled { opacity: .4; cursor: default; }
.muted { color: var(--muted); }

/* ---------- ホーム ---------- */
.home-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.chap-kicker { margin: 0; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .08em; }
.chap-name { margin: 0 0 12px; font-size: 24px; }
.giant { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; background: var(--slot); border-radius: var(--radius); overflow: hidden; image-rendering: pixelated; }
.giant .area { position: relative; border: 0; padding: 0; margin: 0; background-repeat: no-repeat; background-size: 300% 300%; image-rendering: pixelated; cursor: pointer; font: inherit; }
.giant .area.done { cursor: default; }
.giant .area:not(.done) { background-image: none !important; background: radial-gradient(circle at 30% 30%, var(--fog2), transparent 60%), radial-gradient(circle at 75% 70%, var(--fog2), transparent 55%), var(--fog); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rule) 80%, transparent); color: #6b7895; }
.giant .area:not(.done) .an { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-en); font-size: clamp(22px, 5vw, 34px); font-weight: 600; opacity: .55; }
.giant .area.sel { box-shadow: inset 0 0 0 4px var(--accent); }
.giant .area.sel .an { opacity: 1; color: var(--accent); }
.giant .area.sel::after { content: "ここをあそぶ"; position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: 12px; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.giant .area.pop { animation: area-pop .9s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 2; }
@keyframes area-pop { 0% { transform: scale(1.8) rotate(-6deg); opacity: 0; filter: brightness(1.6); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
.giant-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.meter { flex: 1; min-width: 140px; height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .6s; }
.setup { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > .label { font-size: 13px; font-weight: 700; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.units button { text-align: left; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; line-height: 1.35; }
.units button small { display: block; color: var(--muted); font-size: 11px; }
.units button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 700; }
.opt2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt2 button { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 10px; cursor: pointer; text-align: left; line-height: 1.4; }
.opt2 button b { display: block; font-size: 16px; }
.opt2 button small { color: var(--muted); font-size: 12px; }
.opt2 button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.resume-box { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule)); flex-wrap: wrap; }
.resume-box .rb-thumb { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 6px; background: var(--slot); }
.resume-box .rb-text { flex: 1; min-width: 160px; font-size: 14px; line-height: 1.5; }
.howto { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 13px; }

/* ---------- あそぶ ---------- */
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.play-info { font-weight: 700; }
.play-info small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.play-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .play-grid { grid-template-columns: minmax(300px, 520px) minmax(0, 1fr); align-items: start; } .board-col { position: sticky; top: 16px; } }
.board-col { display: grid; gap: 10px; }
.board { position: relative; display: grid; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1; border-radius: var(--radius); background: var(--slot); overflow: hidden; }
.board.fog { background-size: 100% 100%; image-rendering: pixelated; }
.tile { position: relative; background-repeat: no-repeat; image-rendering: pixelated; }
.board.puzzle .tile:not(.on) { background-image: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 25%, transparent); }
.board.puzzle .tile:not(.on)::before { content: ""; position: absolute; inset: 18%; border: 2px dashed color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 6px; }
.board.puzzle .tile.on { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.board.puzzle .tile.drop { animation: piece-in .75s cubic-bezier(.25, 1.5, .45, 1) both; z-index: 3; }
@keyframes piece-in { 0% { transform: translate(var(--fx, 0), var(--fy, 140%)) rotate(-14deg) scale(1.25); opacity: 0; box-shadow: 0 18px 30px rgba(0,0,0,.35); } 55% { opacity: 1; } 82% { transform: scale(.94); } 100% { transform: none; } }
.board.puzzle .tile.click::after { content: ""; position: absolute; inset: 0; background: #fff; animation: flash .5s ease-out both; }
@keyframes flash { from { opacity: .8; } to { opacity: 0; } }
.board.fog .tile { background: none !important; }
.board.fog .tile:not(.on) { background: radial-gradient(circle at 30% 35%, var(--fog2), transparent 55%), radial-gradient(circle at 72% 70%, var(--fog2), transparent 58%), var(--fog) !important; box-shadow: 0 0 18px 10px var(--fog); z-index: 1; }
.board.fog .tile:not(.on)::after { content: "？"; position: absolute; inset: 0; display: grid; place-items: center; color: #8a95ad; font-weight: 700; font-size: clamp(16px, 4vw, 30px); opacity: .55; }
.board.fog .tile.clear { background: radial-gradient(circle at 30% 35%, var(--fog2), transparent 55%), var(--fog) !important; z-index: 2; }
.board.fog .tile.clear { animation: fog-out 1.1s ease-out both; }
@keyframes fog-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); filter: blur(4px); } }
.board .tile.gold::before { content: "★"; position: absolute; right: 4%; top: 2%; color: #ffd54a; text-shadow: 0 0 2px #000, 0 0 6px rgba(0,0,0,.4); font-size: clamp(10px, 2.4vw, 16px); z-index: 4; pointer-events: none; }
.board-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.board-meta b { font-family: var(--font-en); font-size: 20px; }

.qcard { display: grid; gap: 12px; }
.q-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.q-no { margin: 0; font-size: 20px; }
.q-no span { font-size: 13px; font-weight: 700; color: var(--accent); margin-left: 8px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; vertical-align: 2px; }
.q-title { margin: 0; font-weight: 700; }
.q-stem { margin: 0; padding: 10px 12px; background: var(--chip); border-radius: var(--radius); line-height: 1.8; }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px 10px; border-radius: var(--radius); border: 1px solid transparent; }
.item .ino { font-family: var(--font-en); color: var(--muted); }
.item .iq { font-family: var(--font-en), var(--font-jp); font-size: 18px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
.item .iq i, .q-stem i, .choice i, .ans-pre i { font-family: "Times New Roman", Georgia, serif; font-size: 1.12em; }
.item .imark { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; }
.item.now { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
.item.ok .imark { color: var(--ok); }
.item.ng .imark { color: var(--ng); }
.item.wait .iq { color: var(--muted); }
.imark .ia { color: var(--ink); font-weight: 500; font-family: var(--font-en), var(--font-jp); }
.fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.05; font-size: .85em; margin: 0 .1em; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .2em; }
.sys { display: inline-flex; flex-direction: column; border-left: 2px solid currentColor; padding-left: 10px; border-radius: 10px 0 0 10px; line-height: 1.5; }

.answer { display: grid; gap: 10px; }
.ans-line { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.ans-pre { font-family: var(--font-en); }
.ans-box { flex: 1; min-height: 52px; display: flex; align-items: center; padding: 6px 14px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--paper); font-family: var(--font-en); font-size: 24px; letter-spacing: .04em; }
.ans-box:empty::before { content: "答えを入力"; color: var(--muted); font-size: 15px; font-family: var(--font-jp); letter-spacing: 0; }
.ans-box.caret::after { content: ""; width: 2px; height: 1.1em; background: var(--accent); margin-left: 2px; animation: dot-blink 1s steps(1) infinite; }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pad button { min-height: 50px; border: 1px solid var(--rule); background: var(--chip); color: var(--ink); border-radius: var(--radius); font-family: var(--font-en); font-size: 20px; cursor: pointer; touch-action: manipulation; }
.pad button:active { transform: translateY(1px); }
.pad .k-ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-family: var(--font-jp); font-weight: 700; font-size: 17px; grid-column: span 2; }
.pad .k-sub { font-family: var(--font-jp); font-size: 14px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } }
.choice { min-height: 52px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; font-family: var(--font-en), var(--font-jp); font-size: 18px; text-align: left; touch-action: manipulation; }
.choice:hover { border-color: var(--accent); }
.choice .cn { display: inline-block; width: 1.4em; color: var(--muted); font-size: 14px; }
.choice.right { border-color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.choice.wrong { border-color: var(--ng); box-shadow: inset 0 0 0 2px var(--ng); opacity: .8; }
.feedback { min-height: 1.7em; margin: 0; font-weight: 700; }
.feedback.ok { color: var(--ok); }
.feedback.ng { color: var(--ng); }
.answer.locked { pointer-events: none; }
.big-done { text-align: center; padding: 10px; display: grid; gap: 10px; justify-items: center; }
.big-done p { margin: 0; font-size: 18px; font-weight: 700; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* ---------- 完成・図鑑 ---------- */
.dlg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(10, 14, 28, .55); }
.dlg-box { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--paper); border-radius: calc(var(--radius) + 6px); padding: 20px; display: grid; gap: 12px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.dlg-box h2 { margin: 0; font-size: 22px; }
.dlg-box .stats { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.dlg-box .stats b { display: block; font-family: var(--font-en); font-size: 22px; color: var(--ink); }
.dlg-box .done-pic { width: min(240px, 60vw); aspect-ratio: 1; margin: 0 auto; image-rendering: pixelated; background-size: 100% 100%; border-radius: var(--radius); animation: area-pop .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.dlg-box .giant { max-width: 320px; }
.dlg-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 40vw), 1fr)); gap: 16px; }
.zk { display: grid; gap: 8px; align-content: start; }
.zk .giant { max-width: none; }
.zk h3 { margin: 0; font-size: 16px; }
.zk p { margin: 0; font-size: 13px; color: var(--muted); }
.zk.locked .giant .area .an { display: none; }
.zk.locked .giant { filter: grayscale(1) opacity(.5); }
.zk .giant .area { cursor: default; }
.zk .giant .area.sel { box-shadow: none; }
.zk .giant .area.sel::after { content: none; }

.foot { color: var(--muted); font-size: 12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .tile, .giant .area, .done-pic { animation: none !important; } }
@media (max-width: 640px) {
  .page { padding-block: 16px 32px; gap: 14px; }
  .brand h1 { font-size: 24px; }
  .lede { font-size: 13px; }
  .card { padding: 14px; }
  .item .iq { font-size: 17px; }
  .pad button { min-height: 46px; }
}

/* スマホであそぶとき：見出しを小さくして、絵と問題を1画面に近づける */
@media (max-width: 899px) {
  body.playing .masthead .lede, body.playing .mast-right { display: none; }
  body.playing .brand h1 { font-size: 18px; }
  body.playing .page { gap: 10px; }
  .board { max-width: min(100%, 40vh); }
  .play-head .btn.ghost { padding-left: 0; }
}
.item .istem { display: block; font-size: 14px; color: var(--muted); font-family: var(--font-jp); line-height: 1.5; margin-bottom: 2px; }
.item.ng.now { border-color: var(--ng); background: color-mix(in srgb, var(--ng) 7%, var(--paper)); }
.item.ng.now .imark { color: var(--ng); }
.home-wrap { display: grid; gap: 14px; }
.track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.track button { border: 2px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: calc(var(--radius) + 4px); padding: 10px; font-size: 18px; font-weight: 700; cursor: pointer; }
.track button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.zk-grade { margin: 18px 0 10px; font-size: 17px; padding-bottom: 4px; border-bottom: 2px solid var(--rule); }
.zk-grade:first-child { margin-top: 0; }

/* ---------- ステージの一覧 ---------- */
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.list-head h2 { margin: 0; }
@media (min-width: 900px) { .home-grid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); } }
.stages { display: grid; gap: 10px; }
.course { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.course.mix { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.c-name b { display: block; font-size: 17px; line-height: 1.35; }
.c-name small { color: var(--muted); font-size: 12px; }
.c-stages { display: flex; gap: 8px; }
.stage { display: grid; grid-template-columns: 64px auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 6px 10px 6px 6px; cursor: pointer; min-width: 150px; }
.stage:hover { border-color: var(--accent); }
.stage.going { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.st-frame { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 30% 30%, var(--fog2), transparent 60%), var(--fog); display: block; }
.st-frame::after { content: "？"; position: absolute; inset: 0; display: grid; place-items: center; color: #8a95ad; font-weight: 700; font-size: 22px; }
.stage.done .st-frame::after, .stage.going .st-frame::after { content: none; }
.st-pic { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.st-bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); }
.st-text b { display: block; font-size: 18px; line-height: 1.2; }
.st-text small { display: block; color: var(--muted); font-size: 12px; }
.st-text em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.stage.done .st-text em { color: var(--ok); }
@media (max-width: 640px) {
  .course { grid-template-columns: 1fr; gap: 8px; }
  .c-stages { display: grid; grid-template-columns: 1fr 1fr; }
  .stage { min-width: 0; grid-template-columns: 52px auto; }
  .st-frame { width: 52px; height: 52px; }
}
.dlg-box .done-pic.big { width: min(360px, 76vw); }
.zukan { grid-template-columns: repeat(auto-fill, minmax(min(150px, 40vw), 1fr)); }
.zk-pic { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: radial-gradient(circle at 30% 30%, var(--fog2), transparent 60%), var(--fog); }
.zk.locked .zk-pic::after { content: "？"; position: absolute; inset: 0; display: grid; place-items: center; color: #8a95ad; font-weight: 700; font-size: 30px; }
.zk.locked .zk-pic .st-pic { filter: grayscale(1) opacity(.45); }
.zk h4 { margin: 4px 0 0; font-size: 15px; }
.zk.locked { filter: none; }

/* ---------- ランキング ---------- */
.rank-wrap { display: grid; gap: 16px; }
@media (min-width: 900px) { .rank-wrap > div { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; } }
#rank { display: grid; gap: 16px; }
.rk-me h2 { margin: 2px 0 8px; }
.rk-myname { font-size: 24px !important; overflow-wrap: anywhere; }
.rk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.rk-stats b { display: block; font-family: var(--font-en); font-size: 24px; color: var(--ink); line-height: 1.2; }
.rk-small { font-size: 12px; margin: 8px 0 0; }
.rk-acts { justify-content: flex-start; margin-top: 10px; }
.rk-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rk-form input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.rk-more { margin-top: 14px; }
.rk-more summary { cursor: pointer; color: var(--accent); font-weight: 700; font-size: 14px; }
.rk-msg { margin: 10px 0 0; font-size: 14px; min-height: 1em; }
.rk-msg:empty { display: none; }
.rk-code { font-family: var(--font-en); font-size: 22px; letter-spacing: .06em; user-select: all; }
.rk-lede { margin: 0 0 12px; font-size: 13px; }
.rk-tabs { margin-bottom: 12px; }
.rk-tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rk-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.rk-row.mine { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rk-no { font-family: var(--font-en); font-weight: 700; font-size: 18px; text-align: center; }
.rk-row.top1 .rk-no { color: #d4a300; } .rk-row.top2 .rk-no { color: #8c97a8; } .rk-row.top3 .rk-no { color: #b8733a; }
.rk-row.top1 .rk-no::before { content: "👑"; display: block; font-size: 14px; line-height: 1; }
.rk-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name small { font-weight: 400; color: var(--muted); }
.rk-pics b { font-family: var(--font-en); font-size: 18px; }
.rk-stars { color: var(--muted); font-size: 14px; }
.rk-del { padding: 4px 8px; color: var(--bad, #c0392b); }
.rk-admin { margin: 12px 0 0; text-align: right; }
.rk-done { margin: 0; font-weight: 700; }
p.muted.rk-done { font-weight: 400; font-size: 13px; }
.rk-tabs { grid-template-columns: repeat(4, 1fr); } .rk-tabs button { font-size: 15px; padding: 8px 4px; }
@media (max-width: 640px) { .rk-row { grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 8px; padding: 8px; } .rk-row .rk-del { grid-column: 1 / -1; justify-self: end; } .rk-stats b { font-size: 20px; } }