600;800;900&display=swap');
@media(min-width:761px){#app .games{grid-template-columns:repeat(2,1fr)}}
.pin-scene{background:#273a35;flex-direction:column;gap:20px;color:#ddf4c8}.pin-scene>span{font-size:20px}.pin-scene>div{display:flex;gap:8px}.pin-scene b{font:30px ui-monospace,monospace;background:#142923;padding:8px 12px;border-bottom:2px solid #88bf9b;border-radius:4px}.pin-wrap{max-width:440px;margin:0 auto}.pin-nav{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px}.pin-device{background:#192320;border:1px solid #4c6758;border-radius:24px;padding:34px 28px}.pin-event{font-size:clamp(23px,5vw,30px);text-align:center;letter-spacing:0;line-height:1.6;margin:0;min-height:96px;display:flex;align-items:center;justify-content:center}.pin-digits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 32px}.pin-digits>span{display:grid;place-items:center;background:#101913;border:1px solid #526958;border-bottom:3px solid #c5ee94;border-radius:7px;font:40px/1.4 ui-monospace,monospace;color:#eaffca;min-height:76px}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pin-keypad button{min-height:72px;background:#2b3c33;border:1px solid #54725f;border-radius:12px;font:600 28px/1.2 ui-monospace,monospace;box-shadow:0 3px 0 #101912}.pin-keypad button:active{transform:translateY(2px);box-shadow:none;background:#465d3e}.pin-keypad .pin-edit{font:600 14px/1.5 'Noto Sans JP',sans-serif;background:#202e27;color:#bfd3c2}.pin-answer{text-align:center;color:#eaffca;font:700 clamp(60px,14vw,85px)/1.5 ui-monospace,monospace;margin:20px 0 32px}.pin-answer>span{font-size:20px;margin-left:6px}.pin-end-actions{display:flex;justify-content:center}.pin-ended{border-color:#b07569}.games{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.games{grid-template-columns:1fr}.pin-scene>span{font-size:14px}.pin-scene{gap:12px}.pin-scene>div{gap:3px}.pin-scene b{font-size:18px;padding:5px}.pin-device{padding:24px 20px}.pin-keypad button{min-height:66px}.pin-event{min-height:80px}.pin-digits>span{min-height:65px;font-size:34px}.pin-digits{margin:16px 0 25px}.pin-wrap{max-width:400px}.pin-nav{margin-bottom:15px}}
:root{font-family:'Noto Sans JP',sans-serif;color:#f5f6f8;background:#11151c;font-synthesis:none;--lime:#eaff65;--muted:#a5aab7;--border:#343b46}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#242b35;border:1px solid #46505e;border-radius:8px;padding:12px 18px;font-weight:600;touch-action:manipulation}button:hover{border-color:var(--lime)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}header{height:84px;max-width:1240px;padding:0 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:15px}header>a{font-weight:900;font-size:19px;display:flex;align-items:center;gap:12px}.brand-mark{background:var(--lime);color:#11151c;width:30px;height:30px;display:inline-grid;place-items:center;border-radius:7px;font-size:27px}.header-right{display:flex;align-items:center;gap:24px}.edition,.eyebrow{font:600 12px/1.5 ui-monospace,monospace;letter-spacing:.14em;color:var(--muted)}.small{font-size:14px;padding:9px 12px}main{max-width:1180px;padding:38px 24px 60px;margin:auto;min-height:calc(100svh - 150px)}h1{font-size:clamp(28px,4.5vw,48px);line-height:1.4;letter-spacing:-.04em;margin:10px 0 12px}h2{font-size:24px;margin:8px 0 16px}p{line-height:1.8}.muted{color:var(--muted)}.lobby-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;gap:20px}.lobby-head p{margin:0;font-size:16px;color:#c0c5ce}.pill{font-size:13px;border:1px solid var(--border);padding:8px 12px;border-radius:40px;white-space:nowrap;color:#c2c7d0}.games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.game-card{text-align:left;padding:0;overflow:hidden;background:#1c222b;border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}.game-card:hover{transform:translateY(-4px)}.card-scene{height:180px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}.bomb-scene{background:repeating-linear-gradient(0deg,#1c2623 0 2px,#17201d 2px 4px);flex-direction:column;gap:8px}.bomb-scene b{color:#bfd293;font-family:'DotGothic16',monospace;font-size:20px;font-weight:400}.bomb-scene strong{font:50px monospace;color:#ff775d;letter-spacing:.08em}.history-scene{background:#392c58;display:grid;grid-template-columns:1fr 1fr;padding:24px;gap:10px}.history-scene span{font-size:17px;background:#66548b;padding:9px;border-radius:5px;text-align:center}.history-scene span:last-child{background:#a58ccf;color:#1e1630;transform:rotate(-5deg)}.clay-scene{background:#173e53;gap:13px}.clay-scene span{width:66px;height:66px;border-radius:50%;background:#ff8b56;color:#291b11;box-shadow:inset 0 0 0 5px #c86137,inset 0 0 0 7px #ffb783;display:grid;place-items:center;font:800 19px sans-serif;transform:translateY(-10px)}.clay-scene span:nth-child(2){transform:translateY(20px)}.clay-scene span:nth-child(3){transform:translateY(-28px)}.card-copy{padding:24px;flex:1}.card-num{font:12px monospace;color:var(--muted);letter-spacing:.08em}.card-copy h2{margin:12px 0 8px;font-size:25px}.card-copy p{font-size:14px;font-weight:400;color:#bbc1ce;margin:0}.card-bottom{padding:15px 24px;background:#242c36;border-top:1px solid var(--border);font-size:14px;display:flex;justify-content:space-between}.card-bottom b{color:var(--lime)}.other{margin-top:34px;border-top:1px solid var(--border);padding-top:22px}.other h2{font-size:18px}.chips{display:flex;flex-wrap:wrap;gap:10px}.chips button{font-size:14px;padding:11px 16px}.game-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.game-top h1{font-size:27px;margin:0}.config{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:22px}.config label{display:grid;gap:7px;color:#bfc5ce;font-size:14px}.config select{color:white;background:#202832;border:1px solid #56606d;padding:10px;border-radius:6px;min-height:44px;max-width:100%}.primary{background:var(--lime);color:#171c0d;border-color:var(--lime)}.play-wrap{max-width:820px;margin:auto}.status{display:flex;justify-content:space-between;color:#b7bfca;font-size:14px;margin-bottom:16px}.progress{display:flex;gap:5px}.progress i{width:23px;height:5px;background:#38404c;border-radius:4px}.progress i.done{background:var(--lime)}.panel{background:#1c232d;border:1px solid var(--border);border-radius:15px;padding:28px}.question{font-size:clamp(20px,3vw,27px);font-weight:800;line-height:1.7;margin:12px 0 24px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice{text-align:left;min-height:76px;display:flex;align-items:center;gap:14px;background:#29323f;font-size:18px}.choice .letter{color:#a8b3c3;font:14px monospace;border:1px solid #515e6d;padding:5px 8px;border-radius:4px}.choice.correct{background:#263f31;border-color:#c8ef80}.choice.wrong{background:#492e32;border-color:#ee8b8b}.feedback{margin-top:22px;padding:22px;border-radius:10px;background:#283333;border-left:4px solid var(--lime)}.feedback.bad{border-color:#ff8e7c;background:#372b2d}.feedback h2{font-size:22px}.feedback p{margin:8px 0 16px;font-size:16px}.actions{display:flex;gap:10px;flex-wrap:wrap}.device{background:#292d2e;border:2px solid #596060;border-radius:18px;padding:24px;box-shadow:inset 0 0 0 6px #202424}.lcd{background:#b5c593;color:#28341d;border:6px solid #141b14;border-radius:5px;padding:16px;font-family:'DotGothic16',monospace;font-size:clamp(19px,3.5vw,27px);line-height:1.6;box-shadow:inset 2px 3px 8px #65714e}.lcd .sub{font-size:14px;display:block}.timer-row{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.timer{font:48px monospace;color:#ff8267;letter-spacing:.06em;background:#101414;padding:5px 14px;border-radius:5px}.timer.urgent{color:#ff564e;animation:blink .6s infinite}.wire-list{display:grid;gap:14px}.wire{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 15px;min-height:61px;isolation:isolate;border-color:#576367;background:#202627}.wire:before{content:'';height:7px;background:var(--wire);position:absolute;left:0;right:0;z-index:-1}.wire strong{padding:5px 12px;background:#dce0d2;color:#1d2720;border-radius:3px;font-size:18px}.wire .cut{background:#262f2d;padding:4px 8px;font-size:14px}.wire.severed{opacity:.3}.wire.severed:before{background:linear-gradient(to right,var(--wire) 40%,transparent 40% 60%,var(--wire) 60%)}.clay-field{height:330px;background:linear-gradient(#16435d,#32728b);border:1px solid #5d8fa3;border-radius:12px;position:relative;overflow:hidden}.field-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.field-label{position:absolute;left:18px;top:15px;color:#b6d6e3;font:12px monospace;letter-spacing:.15em}.target{position:absolute;width:108px;min-height:64px;border-radius:50%;background:#ff975f;color:#25170c;box-shadow:inset 0 0 0 4px #c8663d,inset 0 0 0 6px #ffca90,0 7px 0 #12273466;border:0;font:bold 18px/1.15 sans-serif;padding:15px 9px;will-change:transform,left,top;transition:opacity .18s;touch-action:manipulation}.target.hit{opacity:0;pointer-events:none;transform:scale(1.5)!important}.target:focus-visible{outline-color:white}.sequence{display:flex;gap:7px;flex-wrap:wrap;min-height:54px;margin:18px 0}.slot{background:#262f3b;border-bottom:3px solid #718091;padding:10px 15px;min-width:44px;color:#aab6c6}.slot.filled{border-color:var(--lime);color:white}.role-key{font-size:14px;color:#bdc7d3;line-height:1.9}.launch{text-align:center;margin-top:15px}.clay-hint{min-height:26px;font-size:14px;color:#ffcb9b;margin-top:10px}.summary{text-align:center;padding:45px 24px}.score{font:800 80px/1.3 monospace;color:var(--lime)}.summary .actions{justify-content:center}.review-row{text-align:left;border-bottom:1px solid var(--border);padding:16px 0;font-size:15px}.review-row strong{display:block;margin-bottom:6px}.review-row span{color:#bdc5d0}footer{max-width:1180px;border-top:1px solid var(--border);margin:auto;padding:20px 24px;color:#959eae;display:flex;justify-content:space-between;font-size:13px}.finish-word{font-size:25px;font-weight:800}.shake{animation:shake .2s 2}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}@keyframes blink{50%{opacity:.4}}@media(max-width:760px){header{padding:0 18px;height:72px}header>a{font-size:16px;gap:8px}.edition{display:none}main{padding:26px 16px 40px}.lobby-head{display:block;margin-bottom:22px}.lobby-head .pill{display:inline-block;margin-top:16px}.games{grid-template-columns:1fr}.game-card{display:grid;grid-template-columns:115px 1fr}.card-scene{height:100%;grid-row:1/3;border-right:1px solid var(--border);border-bottom:0}.card-copy{padding:18px}.card-copy h2{font-size:22px;margin:6px 0}.card-bottom{padding:10px 18px}.bomb-scene strong{font-size:24px}.bomb-scene b{font-size:12px}.history-scene{padding:10px;gap:8px;grid-template-columns:1fr}.history-scene span{font-size:13px;padding:6px}.history-scene span:nth-child(2),.history-scene span:nth-child(3){display:none}.clay-scene{flex-direction:column;gap:4px}.clay-scene span{width:46px;height:46px;font-size:15px}.clay-scene span:nth-child(n){transform:none}.card-copy p{font-size:14px}.choices{grid-template-columns:1fr}.choice{min-height:64px;font-size:18px}.panel{padding:19px}.device{padding:16px}.timer{font-size:38px}.game-top h1{font-size:21px}.config{gap:10px}.config label{flex:1;min-width:120px}.config select{width:100%}.target{width:86px;min-height:60px;font-size:16px}.clay-field{height:300px}.lcd{font-size:22px}.wire strong{font-size:16px}.timer-row{margin:14px 0}footer{font-size:12px;gap:14px}.role-key{font-size:13px}.question{margin-top:8px}.lobby-head p{font-size:14px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* DotGothic16, SIL OFL 1.1. Original font and license in fonts/. */
@font-face{font-family:ArcadeDot;src:url('./fonts/DotGothic16-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

body{margin:0;background:#101d28}body.clay-playing{grid-template-rows:minmax(0,1fr)}#root{height:100dvh;box-sizing:border-box}.prototype-menu{max-width:550px;margin:auto;padding:24px;font-family:ArcadeDot,monospace}.prototype-menu h1{font-size:42px;color:#eaff65}.prototype-menu button{display:block;width:100%;margin:12px 0;min-height:52px}.prototype-menu small{display:block;line-height:1.7}.chord-playing .clay-disc>span{background:linear-gradient(#a9f8e4,#54b8cf);box-shadow:inset 0 0 0 3px #398caa,inset 0 0 0 5px #bafdeb,0 5px 0 #061e3270;text-shadow:1px 1px #cdf9ec}.chord-playing .clay-shot-ring{border:0;border-radius:0}.chord-playing .clay-shot-ring i{position:absolute;width:4px;height:4px;background:#eaff95;box-shadow:0 0 5px #dfff89}.chord-playing .clay-shot-ring.miss i{background:#ffb9a6}.chord-playing .launch-ripple i{background:#98e9ec}.chord-playing .clay-burst,.chord-playing .clay-burst:nth-child(odd){width:5px;height:5px;border-radius:0;background:#eaff95;box-shadow:0 0 7px #c8ffff}.chord-playing .clay-burst:nth-child(3n){background:#89e8ff}.chord-playing .clay-burst:nth-child(4n){background:#ff99da}

/* Only the correct hit bloom changes; launch ripples and all targets stay intact. */
.clay-firework{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:4;contain:layout style}
.clay-firework i{position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--color);box-shadow:0 0 5px var(--color);animation:word-bloom .72s ease-out forwards}
.clay-firework-role{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 32px/1 ArcadeDot,monospace;color:#fffbcf;text-shadow:2px 2px #102537,-2px -2px #102537,0 0 9px #b5ffff;animation:word-role .76s ease-out forwards}
@keyframes word-bloom{0%{transform:translate(-50%,-50%) scale(.4);opacity:.7}32%{transform:translate(calc(var(--fx)*.82),calc(var(--fy)*.82));opacity:.95}68%{transform:translate(var(--fx),var(--fy));opacity:.7}100%{transform:translate(var(--fx),calc(var(--fy) + 7px));opacity:0}}
@keyframes word-role{0%{opacity:.5}18%,65%{opacity:1}100%{opacity:0}}
.clay-firework.is-reduced .clay-firework-role{animation:none}
.clay-firework-role{z-index:1}.clay-score>small{font-size:12px;color:#c7e9ed}
.chord-playing .clay-slot{display:grid}.clay-slot-reserve,.clay-slot-text{grid-area:1/1}.clay-slot-reserve{visibility:hidden}
@media(max-width:560px){.chord-playing .clay-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:0 6px}.chord-playing .clay-top>h1{grid-column:2;grid-row:1;font-size:14px;white-space:nowrap}.chord-playing .clay-score{grid-column:2;grid-row:2;margin:0;font-size:12px;gap:3px}.chord-playing .clay-score b{font-size:14px}.chord-playing .clay-top>button{grid-row:1/3;min-height:44px;padding:6px}.chord-playing .clay-top>[data-home]{grid-column:1}.chord-playing .clay-top>[data-clay-sound]{grid-column:3}.chord-playing .clay-top>[data-clay-settings]{grid-column:4}}
@media(prefers-reduced-motion:reduce){.clay-firework i{display:none}.clay-firework-role{animation:none}}

/* Keep all rows reachable below the prompt, including six phrases on short screens. */
 body.clay-playing.chord-playing{overflow-y:auto;overscroll-behavior-y:contain}
 .chord-playing #root{height:auto;min-height:100dvh;overflow:visible}
 .chord-playing .clay-range{height:auto;min-height:calc(100dvh - 16px)}
 .chord-playing .clay-arena{min-height:calc(var(--chord-hud-height,100px) + 300px)}
 .chord-playing .clay-dock{position:sticky;bottom:0;z-index:8;background:#101d28;padding:5px 0 max(5px,env(safe-area-inset-bottom))}

/* Mode controls are local to WORD CHORD; the playing field palette stays intact. */
.prototype-menu{box-sizing:border-box;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.chord-modes{margin:12px 0;padding:8px;border:2px solid #70b7c9;min-width:0}
.chord-modes label{display:flex;align-items:center;gap:10px;padding:8px;cursor:pointer;line-height:1.25}
.chord-modes label:has(input:checked){background:#1e4859;outline:2px solid #dced83}
.chord-modes input{width:22px;height:22px;flex-shrink:0;accent-color:#eaff65}
.chord-modes b{font-size:16px}.chord-modes small{font-size:12px;line-height:1.35;margin-top:3px}
.chord-menu-note{font-size:12px}.prototype-menu h1{margin:.3em 0}.prototype-menu h2{font-size:21px}
.chord-playing .clay-dialog label{display:block;margin:10px 0}.chord-playing .clay-dialog select{display:block;width:100%;min-height:44px;max-width:100%;font-size:16px}.chord-playing .clay-dialog{max-height:85dvh;overflow:auto}
@media(orientation:landscape) and (max-height:600px){.prototype-menu:not(.chord-finish){max-width:1000px;padding:12px 20px;display:grid;grid-template-columns:1fr 1.15fr;gap:4px 22px}.prototype-menu .chord-intro{grid-column:1}.prototype-menu .chord-modes{grid-column:2;grid-row:1/4;margin:0}.prototype-menu .chord-actions,.prototype-menu .chord-menu-note{grid-column:1}.prototype-menu .chord-intro h1{font-size:28px}.prototype-menu .chord-intro h2{font-size:18px}.prototype-menu .chord-intro p{font-size:12px;margin:4px 0}.prototype-menu .chord-actions button{min-height:44px;margin:5px 0}.prototype-menu .chord-menu-note{font-size:10px}.chord-modes label{padding:10px 5px}}
