:root {
  --ink: #2a2622;
  --ink-soft: #6f665c;
  --bg: #f4efe4;
  --paper: #fffdf8;
  --line: #e2d9c8;
  --primary: #2f6f6a;
  --primary-dark: #1f4f4b;
  --cell: #f7f1e3;
  --cell-ink: #3a332b;
  --found: #4fa59a;
  --found-ink: #ffffff;
  --span: #f2b632;
  --span-ink: #4a3500;
  --trace: #ef7d57;
  --trace-ink: #ffffff;
  --hint: #7a62c9;
  --bad: #c64a3c;
  --gold: #f2c14e;
  --font: "Zen Kaku Gothic New", system-ui, sans-serif;
  --maru: "Zen Maru Gothic", "Zen Kaku Gothic New", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 500; line-height: 1.7; line-break: strict; }
.hidden { display: none !important; }
.nw { white-space: nowrap; }

.g-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; max-width: 520px; margin: 0 auto; font-size: 13px; font-weight: 900; }
.g-brand { color: var(--ink-soft); text-decoration: none; }
.g-title { flex: 1; text-align: center; }
.g-head [data-mg-account] a { color: var(--primary-dark); text-decoration: none; }

main { max-width: 520px; margin: 0 auto; padding: 0 12px 24px; }
.play { position: relative; user-select: none; -webkit-user-select: none; }

/* 上の帯: テーマ・見つけた数・時間 */
.theme-bar { display: flex; gap: 8px; align-items: stretch; }
.theme-box { flex: 1; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; }
.lbl { font-size: 11px; font-weight: 900; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme { font: 900 16px/1.35 var(--maru); color: var(--primary-dark); word-break: keep-all; overflow-wrap: anywhere; }
.side { flex: none; display: flex; flex-direction: column; gap: 4px; width: 76px; }
.prog, .time { flex: 1; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font: 900 15px/1 var(--maru); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prog b { font-size: 20px; }
.prog small { font-size: 12px; color: var(--ink-soft); }
.time { font-size: 14px; color: var(--ink-soft); }

/* なぞっている言葉 */
.word-line { position: relative; height: 44px; margin: 6px 0 4px; display: grid; place-items: center; }
.word { max-width: 100%; padding: 2px 14px; border-radius: 999px; font: 900 22px/1.45 var(--maru); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.word.tracing { background: var(--trace); color: var(--trace-ink); }
.word.msg { font-size: 15px; letter-spacing: 0; color: var(--ink-soft); background: transparent; }
.word.ok { background: var(--found); color: #fff; }
.word.span { background: var(--span); color: var(--span-ink); }
.word.extra { background: #e8e0f8; color: #4b3a8c; font-size: 16px; letter-spacing: 0; }
.word.bad { color: var(--bad); font-size: 15px; letter-spacing: 0; animation: shake 0.36s; }
.word.near { color: #a8670f; font-size: 15px; letter-spacing: 0; }
/* 案内の文は、盤の上の帯の中で2行まで（文字をかくさない） */
.word.msg, .word.extra, .word.bad, .word.near { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; line-height: 1.4; text-align: center; padding: 2px 10px; word-break: keep-all; overflow-wrap: anywhere; }
.combo { position: absolute; right: 0; top: -2px; padding: 2px 10px; border-radius: 999px; background: var(--primary); color: #fff; font: 900 13px/1.5 var(--maru); white-space: nowrap; transform-origin: right center; animation: comboIn 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.combo.c3 { background: #d9822b; font-size: 15px; }
.combo.c4 { background: #c64a3c; font-size: 17px; }
@keyframes comboIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* 盤 */
.board-wrap { display: flex; justify-content: center; }
.board { position: relative; width: min(100%, calc((100svh - 300px) * 0.75), 420px); min-width: 264px; aspect-ratio: 6 / 8; touch-action: none; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(60, 45, 20, 0.1); }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lines .l-found { stroke: var(--found); stroke-width: 0.34; }
.lines .l-span { stroke: var(--span); stroke-width: 0.38; }
.lines .l-trace { stroke: var(--trace); stroke-width: 0.36; opacity: 0.85; }
.lines .draw { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 0.5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); }
.c { position: relative; display: grid; place-items: center; }
.c span { display: grid; place-items: center; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--cell); color: var(--cell-ink); font: 900 clamp(18px, 6.4vw, 28px)/1 var(--maru); transition: background 0.18s, color 0.18s, transform 0.12s; }
.c.f span { background: var(--found); color: var(--found-ink); }
.c.s span { background: var(--span); color: var(--span-ink); }
.c.sel span { background: var(--trace); color: var(--trace-ink); transform: scale(1.08); }
.c.h:not(.f):not(.s) span { box-shadow: 0 0 0 3px var(--hint) inset; color: var(--hint); animation: hintPulse 1.6s ease-in-out infinite; }
.c.pop span { animation: pop 0.42s cubic-bezier(.2, 1.7, .5, 1) both; }
.c.pop2 span { animation: pop2 0.55s cubic-bezier(.2, 1.9, .5, 1) both; }
.c.wave span { animation: wave 0.7s ease-in-out both; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes pop2 { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.42) rotate(-8deg); } 70% { transform: scale(0.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22%) scale(1.12); } }
@keyframes hintPulse { 50% { box-shadow: 0 0 0 5px rgba(122, 98, 201, 0.35) inset; } }
.board.flash { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(242, 182, 50, 0.9); } 100% { box-shadow: 0 0 0 26px rgba(242, 182, 50, 0); } }
/* はじける粒 */
.burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.burst i { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--found); animation: fly 0.7s ease-out forwards; }
.burst i.g { background: var(--span); }
.burst i.t { width: 7px; height: 7px; border-radius: 2px; }
@keyframes fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 42%; z-index: 30; transform: translate(-50%, -50%); padding: 8px 20px; border-radius: 18px; background: var(--span); color: var(--span-ink); font: 900 22px/1.3 var(--maru); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); pointer-events: none; animation: bannerIn 1.4s ease-out forwards; }
.banner.clear { background: var(--primary); color: #fff; font-size: 30px; padding: 12px 28px; animation-duration: 1.8s; }
@keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -64%) scale(1); opacity: 0; } }

/* 道具 */
.tools { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: 900 12px/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.tool:disabled { opacity: 0.4; cursor: default; }
.hint-top { display: inline-flex; align-items: center; gap: 3px; }
.tool.hint.ready { background: #efe9fb; border-color: var(--hint); color: #4b3a8c; }
.hint-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--hint); color: #fff; font-size: 11px; }
.hint-n:empty { display: none; }
.meter { display: flex; gap: 4px; }
.meter i { width: 14px; height: 6px; border-radius: 3px; background: var(--line); transition: background 0.2s; }
.meter i.on { background: var(--hint); }
.meter i.bump { animation: bump 0.5s cubic-bezier(.2, 1.8, .5, 1); }
.meter.free i { background: var(--hint); opacity: 0.35; }
@keyframes bump { 50% { transform: scaleY(1.9) scaleX(1.2); } }
.kbd { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }

/* 見つけた言葉の一覧 */
.sheet { position: absolute; inset: 0; z-index: 35; display: flex; align-items: flex-start; justify-content: center; padding-top: 40px; background: rgba(244, 239, 228, 0.85); }
.sheet-card { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 10px 30px rgba(60, 45, 20, 0.15); }
.sheet-h { font-weight: 900; font-size: 14px; margin: 4px 0 6px; }
.sheet-h small { margin-left: 6px; color: var(--ink-soft); }
.sheet-note { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }
.chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 3px 10px; border-radius: 999px; background: var(--found); color: #fff; font: 900 14px/1.6 var(--maru); }
.chips li.sp { background: var(--span); color: var(--span-ink); }
.chips li.no { background: var(--bg); color: var(--ink-soft); letter-spacing: 0.1em; }
.chips.extra li { background: #e8e0f8; color: #4b3a8c; }
.chips.mini { justify-content: center; margin-top: 10px; }
.chips.mini li { font-size: 13px; padding: 2px 9px; }

/* タイトル・結果（盤を隠して全体を見せる） */
.play.menu .theme-bar, .play.menu .word-line, .play.menu .board-wrap, .play.menu .tools, .play.menu .kbd { display: none; }
.card-ui { width: 100%; max-width: 420px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 20px 16px 16px; text-align: center; box-shadow: 0 10px 30px rgba(60, 45, 20, 0.1); }
.logo { margin: 0; font: 900 clamp(24px, 7.6vw, 30px)/1.3 var(--maru); letter-spacing: 0.04em; white-space: nowrap; }
.day { margin: 2px 0 12px; font-size: 13px; color: var(--ink-soft); font-weight: 900; }
.daily-box { border: 2px solid var(--primary); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.daily-lbl { font-size: 11px; font-weight: 900; color: var(--ink-soft); letter-spacing: 0.1em; }
.daily-name { font: 900 21px/1.45 var(--maru); color: var(--primary-dark); word-break: keep-all; overflow-wrap: anywhere; }
.daily-par { font-size: 13px; font-weight: 900; color: var(--ink-soft); margin-top: 2px; }
.daily-note { margin: 4px 0 8px; font-size: 12px; color: var(--ink-soft); }
.done { font-size: 14px; font-weight: 900; margin-top: 6px; }
.howto { list-style: none; margin: 12px 0 0; padding: 10px 12px; background: var(--bg); border-radius: 12px; text-align: left; font-size: 13px; font-weight: 700; }
.howto li { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.howto .num { flex: none; font-weight: 900; color: var(--primary); }
.howto .sb { background: var(--span); color: var(--span-ink); padding: 0 4px; border-radius: 4px; }
.stats { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin: 10px 0 0; }

.btn { display: block; width: 100%; margin: 8px 0; padding: 13px 10px; border: 0; border-radius: 14px; font: 900 16px/1.2 var(--font); cursor: pointer; background: var(--bg); color: var(--ink); }
.btn small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 3px; }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-dark); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }
.btn.sub { font-size: 15px; }
.btn.ghost { background: transparent; border: 2px solid var(--line); color: var(--ink-soft); font-size: 14px; }
.btn.ghost.small { font-size: 12px; padding: 8px; margin-bottom: 0; }
.btn.x { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* 練習ステージ */
.st-h { margin: 0; font: 900 22px/1.4 var(--maru); }
.st-h2 { margin: 16px 0 6px; font: 900 16px/1.4 var(--maru); }
.st-note { margin: 2px 0 10px; font-size: 12px; color: var(--ink-soft); }
.s-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.st { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; font: 700 12px/1.35 var(--font); }
.st b { font: 900 13px/1.3 var(--maru); color: var(--primary-dark); }
.st .st-c { width: 100%; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st.cleared { background: #f2f8f6; border-color: #bfdcd6; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; }
.stars .on { fill: var(--gold); }
.stars .off { fill: #e1d8c6; }

/* 結果 */
.clear-lbl { font-size: 13px; font-weight: 900; color: var(--primary-dark); }
.clear-big { margin: 6px 0; font: 900 clamp(30px, 10vw, 40px)/1.2 var(--maru); white-space: nowrap; }
.clear-big span { font-size: 18px; margin-left: 4px; }
.clear-big.miss { color: var(--ink-soft); font-size: 28px; }
.clear-sub { margin: 0; font-size: 14px; font-weight: 700; }
.c-stars { display: flex; justify-content: center; gap: 4px; margin: 8px 0 0; }
.c-stars svg { width: 34px; height: 34px; }
.c-stars .on { fill: var(--gold); animation: starIn 0.5s cubic-bezier(.2, 1.8, .5, 1) both; }
.c-stars .off { fill: #e1d8c6; }
@keyframes starIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.span-ans { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 12px 0 0; padding: 6px 14px; border-radius: 12px; background: var(--span); color: var(--span-ink); }
.span-lbl { font-size: 12px; font-weight: 900; }
.span-word { font: 900 20px/1.3 var(--maru); letter-spacing: 0.06em; }
.best { display: block; width: max-content; max-width: 100%; margin: 10px auto 0; padding: 2px 12px; border-radius: 999px; background: var(--gold); font-weight: 900; font-size: 13px; }
.gap { margin: 8px 0 0; font-size: 13px; font-weight: 900; color: var(--primary-dark); }
.rank { margin: 12px 0; padding: 8px; background: var(--bg); border-radius: 14px; }
.rank-lbl { font-size: 11px; font-weight: 900; color: var(--ink-soft); }
.rank-name { font: 900 22px/1.4 var(--maru); }
.c-note { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: #fff6dd; font-size: 13px; font-weight: 700; text-align: left; }
.share { margin: 8px 0; }

.toast { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: max-content; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; z-index: 40; max-width: calc(100% - 24px); padding: 10px 18px; border-radius: 16px; background: rgba(42, 38, 34, 0.92); color: #fff; font-weight: 900; font-size: 14px; text-align: center; pointer-events: none; }

/* 下の解説（ポータルと同じ決まり: 行間 1.85・段落の間は1行分・見出しは前を広く後ろを狭く） */
.guide { margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 12px; font-size: 15px; line-height: 1.85; }
.guide p { margin: 0 0 1em; }
.guide h2 { font: 900 19px/1.4 var(--font); margin: 32px 0 12px; padding-left: 10px; border-left: 5px solid var(--primary); }
.guide h2:first-child { margin-top: 0; }
.guide h3 { font-size: 16px; margin: 22px 0 6px; line-height: 1.5; }
.guide ul { padding-left: 1.3em; margin: 0 0 1em; }
.guide li { margin: 6px 0; }
.guide .steps { list-style: none; padding: 0; }
.guide .steps li { display: flex; align-items: baseline; gap: 6px; }
.guide .steps .num { flex: none; font-weight: 900; color: var(--primary); }
.guide details { border-top: 1px solid var(--line); padding: 12px 0; }
.guide details p { margin: 8px 0 4px; }
.guide summary { font-weight: 900; cursor: pointer; }
.guide a { color: var(--primary-dark); }
.g-foot { max-width: 520px; margin: 0 auto; padding: 14px 16px 28px; font-size: 12px; text-align: center; }
.g-foot a { color: var(--ink-soft); }

.card-ui .mg-box { background: var(--bg); border-color: transparent; }
@media (max-width: 360px) {
  .theme { font-size: 15px; }
  .side { width: 66px; }
  .word { font-size: 20px; }
  .tool { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .c.pop span, .c.pop2 span, .c.wave span, .c.h span, .word.bad, .combo, .banner, .board.flash, .meter i.bump, .c-stars .on { animation: none !important; }
  .banner { opacity: 1; }
  .lines .draw { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; }
  .burst { display: none; }
}