:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#173d33;background:#f3f4ee;font-synthesis:none;--green:#163f36;--board-size:min(92vw,calc(100svh - 158px),820px)}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:disabled:not(.tile){opacity:.4}[hidden]{display:none!important}:focus-visible{outline:3px solid #ce962d;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.play-screen{height:100svh;min-height:360px;display:flex;flex-direction:column;padding:0 16px}.play-header{height:72px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;width:var(--board-size);max-width:100%;margin:auto;gap:12px}h1{margin:0;font-size:21px;font-weight:800;letter-spacing:.1em}select{border:1px solid #d3dbce;border-radius:8px;background:#fff;padding:10px 12px;color:var(--green);font-size:12px;font-weight:700;min-height:44px}.play-area{display:flex;flex:1;min-height:0;align-items:center;justify-content:center}.board{width:var(--board-size);height:var(--board-size);max-width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:clamp(5px,1vw,11px);padding:clamp(7px,1.2vw,14px);background:#dce4d7;border-radius:20px;user-select:none;touch-action:none;box-shadow:0 10px 36px #203b2609}.tile{display:grid;place-items:center;min-width:0;min-height:0;border:1px solid #cdd6c6;border-bottom:4px solid #c3ceb9;background:#fffef8;border-radius:12px;padding:0;color:#183d32;touch-action:none;position:relative;isolation:isolate;font-size:clamp(36px,min(8vw,10vh),90px);font-weight:900;line-height:1;cursor:grab}.tile span{display:block;pointer-events:none}.tile.empty{background:#d3ddcc;border:1px dashed #bbc9b2;cursor:default}.tile.selected{background:#fff0bf;box-shadow:0 0 0 3px #d7a139;border-color:#c89a36}.tile.hovered{background:#c4d9c5;border-color:#5f8a64}.tile.dragging{opacity:.4}.tile.clearing{background:#ffe8a0;border-color:#c4962e;box-shadow:0 0 0 2px #d6ab47;z-index:2;animation:tile-clear 650ms ease-in-out both}.tile.clearing span{animation:letter-clear 650ms ease-in-out both}.drag-ghost{position:fixed;z-index:100;pointer-events:none;display:grid;place-items:center;width:76px;height:76px;transform:translate(-50%,-50%);background:#fff1c0;border:2px solid #c59635;border-radius:12px;box-shadow:0 10px 24px #183b3329;font-size:46px;font-weight:900}.controls{width:var(--board-size);max-width:100%;margin:0 auto;height:86px;flex-shrink:0;display:flex;align-items:center;gap:12px}.controls button,.clear-controls button{min-height:48px;border:1px solid #cad4c4;background:#fffef9;border-radius:10px;color:var(--green);font-size:14px;font-weight:700;padding:12px 18px;flex:1}.controls button:hover:not(:disabled),.clear-controls button:hover{background:#e7eddf}.clear-screen{max-width:760px;margin:auto;padding:42px 24px 32px}.clear-heading{text-align:center;margin-bottom:32px}.clear-mark{display:grid;place-items:center;width:58px;height:58px;margin:auto;border-radius:50%;background:#e3edda;color:#3f7050;font-size:30px}.clear-heading>p{color:#72806c;font-size:13px;margin:16px 0 8px}.clear-heading h2{font-size:clamp(25px,5vw,36px);margin:12px 0}.learned{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.learned-word{padding:20px;background:#fffef8;border:1px solid #d5ddcd;border-radius:12px}.learned-word h3{margin:0 0 6px;font-size:24px;letter-spacing:.06em}.reading{font-size:11px;color:#78836f}.learned-word p{font-size:13px;line-height:1.85;margin:12px 0 0;color:#50644f}.clear-controls{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}.clear-controls .primary{background:var(--green);color:white}.clear-controls #clear-undo{flex-basis:100%;background:transparent}.error{margin:20px;padding:16px;background:#fff0da;color:#943d1e;font-size:14px;line-height:1.8}.play-screen:has(+.clear-screen:not([hidden])){display:none}@keyframes letter-clear{0%{transform:scale(1);opacity:1}20%,60%{transform:scale(1.1);opacity:1}100%{transform:scale(1.04);opacity:0}}@keyframes tile-clear{0%{transform:scale(1)}20%,60%{transform:scale(1.035)}100%{transform:scale(1);background:#d3ddcc;box-shadow:none}}@media(max-width:540px){.play-screen{padding:0 12px}.play-header{height:66px}h1{font-size:19px}.board{border-radius:14px}.tile{border-radius:9px;border-bottom-width:3px}.controls{height:80px;gap:10px}.controls button{font-size:13px}.clear-screen{padding:30px 18px}.learned{grid-template-columns:1fr}.learned-word{padding:18px}.clear-controls button{flex-basis:100%}}@media(prefers-reduced-motion:reduce){.tile.clearing{animation:none}.tile.clearing span{animation:reduced-clear 650ms linear both}@keyframes reduced-clear{0%,60%{opacity:1}100%{opacity:0}}}
@media(max-width:540px) and (orientation:portrait){.board{height:calc(100svh - 166px)}.tile{font-size:clamp(36px,11vw,60px)}}
.stage-label{font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.play-header h1{font-size:clamp(16px,4.5vw,21px)}
dialog{width:min(440px,calc(100vw - 32px));border:1px solid #d4ddce;border-radius:16px;padding:26px;background:#fffef8;color:#173d33;box-shadow:0 16px 60px #0003}dialog::backdrop{background:#173d3366}dialog h2{font-size:18px;line-height:1.6;margin:0 0 16px}dialog p{font-size:14px;line-height:1.9;margin:12px 0}dialog .warning-note{font-size:12px;color:#6d7d65}dialog button{width:100%;min-height:48px;border:0;border-radius:9px;background:#163f36;color:white;font-weight:700;margin-top:10px;padding:12px}
:root{--board-size:min(92vw,calc(100svh - 194px),820px)}.selection-back{height:36px;flex-shrink:0;margin:0 auto 6px;border:0;background:transparent;color:#687b61;font-size:12px;text-decoration:underline}.selection-screen{max-width:620px;margin:auto;padding:clamp(50px,12vh,120px) 24px 40px}.selection-screen h1{font-size:clamp(25px,5vw,36px);letter-spacing:.04em}.selection-label{font-size:12px;letter-spacing:.16em;color:#6e7d62;font-weight:700}.selection-subtitle{font-size:13px;color:#6e7d62;margin:20px 0 32px}.stage-buttons{display:grid;gap:16px}.stage-button{min-height:90px;padding:20px 26px;border:1px solid #cbd8c3;border-radius:16px;background:#fffef8;color:#173d33;text-align:left;font-size:24px;font-weight:800;box-shadow:0 5px 18px #173d3305}.stage-button:hover:not(:disabled){background:#e7efdf}.stage-button:disabled{opacity:.4}.clear-controls #clear-selection{flex-basis:100%}@media(max-width:540px) and (orientation:portrait){.board{height:calc(100svh - 208px)}}
:root{--board-size:min(92vw,calc(100svh - 260px),780px)}.board{width:var(--board-size);height:var(--board-size)}.controls{height:108px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 0}.controls button{padding:8px;font-size:12px;min-height:40px}.hint-message{min-height:26px;margin:0 auto;width:var(--board-size);font-size:12px;line-height:1.8;text-align:center}.stage-button strong{display:block}.stage-button small{display:block;font-size:12px;color:#76836b;margin-top:10px;font-weight:400}#generation-status{font-size:12px;color:#647657}.play-header{height:60px}.selection-back{height:32px}.tile{font-size:clamp(32px,min(9vw,10vh),82px)}@media(max-width:540px) and (orientation:portrait){.board{height:var(--board-size)}.tile{font-size:clamp(32px,10vw,50px)}}
.board{grid-template-columns:repeat(var(--grid-size,5),minmax(0,1fr));grid-template-rows:repeat(var(--grid-size,5),minmax(0,1fr))}

/* Intermediate board spacing keeps 6×6 touch targets readable. */
#play-screen[data-grid-size="6"] { --board-size: min(96vw, calc(100svh - 260px), 820px); }
#play-screen[data-grid-size="6"] .board { padding: 5px; gap: 3px; }
#play-screen[data-grid-size="6"] .tile { font-size: clamp(28px, min(8vw, 9vh), 72px); }

#play-screen[data-grid-size="7"] { --board-size: min(98vw, calc(100svh - 260px), 900px); }
#play-screen[data-grid-size="7"] .board { padding: 3px; gap: 2px; }
#play-screen[data-grid-size="7"] .tile { font-size: clamp(26px, min(7vw, 8vh), 64px); border-radius: 7px; }
#play-screen[data-grid-size="7"] { padding-inline: 1vw; }
/* Keep beginner colors; apply tier accents outside neutral character tiles. */
body[data-difficulty="intermediate"] { --tier-accent:#2563eb; --tier-bg:#eff6ff; --tier-frame:#dbeafe; --tier-border:#93c5fd; }
body[data-difficulty="advanced"] { --tier-accent:#6d28d9; --tier-bg:#f5f3ff; --tier-frame:#ede9fe; --tier-border:#c4b5fd; }
body[data-difficulty="intermediate"],body[data-difficulty="advanced"] { background:var(--tier-bg); }
body[data-difficulty="intermediate"] .play-header,body[data-difficulty="advanced"] .play-header { color:var(--tier-accent); }
body[data-difficulty="intermediate"] .board,body[data-difficulty="advanced"] .board { background:var(--tier-frame); }
body[data-difficulty="intermediate"] .controls button,body[data-difficulty="advanced"] .controls button,
body[data-difficulty="intermediate"] .selection-back,body[data-difficulty="advanced"] .selection-back,
body[data-difficulty="intermediate"] .clear-controls button,body[data-difficulty="advanced"] .clear-controls button { color:var(--tier-accent); border-color:var(--tier-border); }
body[data-difficulty="intermediate"] .clear-controls .primary,body[data-difficulty="advanced"] .clear-controls .primary { background:var(--tier-accent);color:white; }
.stage-button[data-difficulty="intermediate"] { color:#2563eb;border-color:#93c5fd;background:#eff6ff; }
.stage-button[data-difficulty="advanced"] { color:#6d28d9;border-color:#c4b5fd;background:#f5f3ff; }
@media(max-width:540px) {
 #play-screen[data-grid-size] { --board-size:min(calc(100vw - 24px),calc(100svh - 300px),780px); padding-inline:12px; }
 .play-header { height:84px; padding-block:12px; }
 .play-header h1 { font-size:16px; }
 .stage-label { font-size:clamp(22px,6vw,26px);font-weight:800;line-height:1.4; }
 .controls { height:112px;gap:8px;padding:4px 0; }
 .controls button { min-height:48px;font-size:16px;padding:10px 12px; }
 .controls:has(#hint[hidden]) #new-problem { grid-column:1 / -1; }
 .selection-back { width:var(--board-size);max-width:100%;height:48px;min-height:48px;flex-shrink:0;margin:8px auto;border:1px solid #cad4c4;border-radius:10px;background:transparent;font-size:16px;font-weight:700;text-decoration:none;padding:10px 12px; }
}
@media(max-width:540px) and (max-height:540px) {
 #play-screen { height:auto;min-height:100svh; }
 #play-screen[data-grid-size] { --board-size:min(calc(100vw - 24px),260px); }
 .play-area { flex:none; }
}
body[data-difficulty="intermediate"] .controls button:hover:not(:disabled),body[data-difficulty="advanced"] .controls button:hover:not(:disabled) { background:var(--tier-frame); }
.stage-button[data-difficulty="intermediate"]:hover:not(:disabled) { background:#dbeafe; }
.stage-button[data-difficulty="advanced"]:hover:not(:disabled) { background:#ede9fe; }
/* Claude design reference, adapted to the existing DOM. No runtime changes. */
:root { --ui-bg:#f4f1ea; --ui-ink:#1f1a14; --ui-muted:#6f665b; --ui-primary:#2f4f78; --ui-secondary:#7d705e; --ui-frame:#5b4a38; --ui-empty:#7a6650; --ui-stage:#b8641a; --ui-clear:#e07a1f; }
body[data-difficulty="beginner"] { --ui-bg:#f4f1ea; }
body[data-difficulty="intermediate"] { --ui-bg:#eff6ff; --ui-primary:#2563eb; --ui-secondary:#64748b; --ui-frame:#1e40af; --ui-empty:#5374d1; --ui-stage:#1d4ed8; --ui-clear:#2563eb; }
body[data-difficulty="advanced"] { --ui-bg:#f5f3ff; --ui-primary:#6d28d9; --ui-secondary:#6b6585; --ui-frame:#4c1d95; --ui-empty:#7a57c2; --ui-stage:#5b21b6; --ui-clear:#6d28d9; }
html { background:#f4f1ea; }
body,body[data-difficulty] { background:var(--ui-bg);color:var(--ui-ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
.selection-screen { max-width:592px;padding:32px 16px 28px; }
.selection-screen h1 { font-size:clamp(28px,5vw,32px);letter-spacing:.02em; }
.selection-label { color:#b8641a;letter-spacing:.12em; }
.selection-subtitle { color:var(--ui-muted);font-size:15px;line-height:1.6;margin:12px 0 24px; }
.stage-buttons { gap:12px; }
.stage-button,.stage-button[data-difficulty] { display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:84px;padding:16px 18px;border:0;border-radius:10px;background:#2f4f78;color:white;box-shadow:0 3px 8px #1f1a140a; }
.stage-button[data-difficulty="intermediate"] { background:#2563eb; }
.stage-button[data-difficulty="advanced"] { background:#6d28d9; }
.stage-button strong { font-size:24px;white-space:nowrap; }
.stage-button small { color:white;opacity:.95;text-align:right;font-size:13px;line-height:1.6;margin:0;max-width:72%; }
.stage-button:hover:not(:disabled),.stage-button[data-difficulty]:hover:not(:disabled) { filter:brightness(1.08);background:#2f4f78; }
.stage-button[data-difficulty="intermediate"]:hover:not(:disabled) { background:#2563eb; }
.stage-button[data-difficulty="advanced"]:hover:not(:disabled) { background:#6d28d9; }
#play-screen[data-grid-size] { --board-size:min(calc(100vw - 32px),calc(100svh - 240px),560px);max-width:592px;margin:auto;padding:8px 16px calc(8px + env(safe-area-inset-bottom)); }
.play-header,body[data-difficulty] .play-header { color:var(--ui-stage);height:64px;padding:4px 0; }
.play-header h1 { font-size:16px;letter-spacing:0; }
.stage-label { font-size:clamp(22px,6vw,26px);line-height:1.2;font-weight:900;letter-spacing:0; }
.board,body[data-difficulty] .board,#play-screen[data-grid-size] .board { background:var(--ui-frame);padding:6px;gap:6px;border-radius:12px;box-shadow:0 6px 18px #1f1a1414; }
#play-screen[data-grid-size="6"] .board { gap:5px;padding:5px; }
#play-screen[data-grid-size="7"] .board { gap:4px;padding:4px; }
.tile,#play-screen[data-grid-size] .tile { background:#fffaf0;color:#1f1a14;border:0;border-radius:8px;box-shadow:0 2px 0 #0005;font-weight:900; }
#play-screen[data-grid-size="7"] .tile { border-radius:6px; }
.tile.empty,#play-screen[data-grid-size] .tile.empty { background:var(--ui-empty);border:0;box-shadow:inset 0 2px 4px #0005; }
.tile.selected,.tile.hovered,#play-screen[data-grid-size] .tile.selected,#play-screen[data-grid-size] .tile.hovered { background:#ffd27a;outline:3px solid #e07a1f;outline-offset:-1px; }
.tile.dragging { opacity:.3; }
.tile.clearing,#play-screen[data-grid-size] .tile.clearing { background:#ffe14d;outline:3px solid #e07a1f; }
.drag-ghost { background:#fffaf0;color:#1f1a14;border-color:#e07a1f;border-radius:8px;box-shadow:0 8px 18px #0005; }
.hint-message { color:#8a4b0f;font-size:14px;font-weight:700;line-height:1.6;min-height:26px; }
.controls { grid-template-columns:repeat(4,minmax(0,1fr));height:64px;gap:10px;padding:8px 0; }
.controls:has(#hint[hidden]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.controls button,.clear-controls button,body[data-difficulty] .controls button,body[data-difficulty] .clear-controls button { background:var(--ui-primary);color:white;border:0;border-radius:10px;min-height:48px;padding:10px 12px;font-size:16px;font-weight:700; }
#reset,#new-problem,body[data-difficulty] #reset,body[data-difficulty] #new-problem { background:var(--ui-secondary); }
#hint,body[data-difficulty] #hint { background:#b8641a; }
.controls button:hover:not(:disabled),body[data-difficulty] .controls button:hover:not(:disabled),.clear-controls button:hover { background:var(--ui-primary);filter:brightness(1.1); }
.selection-back,body[data-difficulty] .selection-back { width:var(--board-size);max-width:100%;height:48px;min-height:48px;margin:6px auto 0;padding:10px 12px;border:2px solid var(--ui-primary);border-radius:10px;background:transparent;color:var(--ui-primary);font-size:16px;font-weight:700;text-decoration:none; }
.clear-screen { max-width:592px;padding:30px 16px; }
.clear-heading { margin-bottom:22px; }
.clear-heading h2 { color:var(--ui-clear);font-size:clamp(30px,7vw,38px);letter-spacing:.04em; }
.clear-heading>p { color:var(--ui-muted); }
#clear-stage { color:var(--ui-ink);font-size:20px;font-weight:700; }
.clear-mark { background:#fffaf0;color:var(--ui-clear); }
.learned { display:block;border-radius:12px;background:white;overflow:hidden; }
.learned-word { background:transparent;border:0;border-radius:0;padding:14px 16px; }
.learned-word+.learned-word { border-top:1px solid #ebe3d6; }
.learned-word h3 { font-size:22px; }
.learned-word p { color:var(--ui-ink);font-size:15px;line-height:1.7;margin:4px 0 0; }
.clear-controls { display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px; }
body[data-difficulty] .clear-controls .primary { color:white;background:var(--ui-primary); }
#clear-selection { background:var(--ui-secondary); }
.clear-controls #clear-undo { background:transparent;color:var(--ui-primary);border:2px solid var(--ui-primary); }
dialog { border:0;border-radius:12px;background:white;color:var(--ui-ink);text-align:center;box-shadow:0 12px 48px #1f1a1440; }
dialog h2 { color:#c0392b; } dialog p { font-size:15px; } dialog button { background:var(--ui-primary);font-size:16px; }
dialog::backdrop { background:#1e18128c; }
@media(max-width:599px) {
 #play-screen[data-grid-size] { --board-size:min(calc(100vw - 24px),calc(100svh - 282px),560px);max-width:584px;padding:6px 12px calc(6px + env(safe-area-inset-bottom)); }
 .controls,.controls:has(#hint[hidden]) { grid-template-columns:repeat(2,minmax(0,1fr));height:112px;gap:8px;padding:4px 0; }
 .controls:has(#hint[hidden]) #new-problem { grid-column:1 / -1; }
 .controls button { white-space:nowrap; }
 .stage-button small { max-width:70%;font-size:12px; }
}
@media(max-width:599px) and (max-height:540px) {
 #play-screen[data-grid-size] { --board-size:min(calc(100vw - 24px),260px);height:auto;min-height:100svh; }
 .play-area { flex:none;margin:10px auto; }
}
@media(prefers-reduced-motion:reduce) { .stage-button,.controls button { transition:none; } }
#selection-title:focus-visible,#clear-title:focus-visible { outline:none; }
.selection-label { display:none; }