/* A tactile, cool-colored arcade shell. Game geometry and hit targets stay in SVG. */
:root{--ink:#343261;--purple:#7354dc;--mint:#3bcbb6}
body{color:var(--ink);background:radial-gradient(ellipse at 15% 15%,#d4f4f5,transparent 45%),radial-gradient(ellipse at 90% 65%,#dcd3ff,transparent 50%),#eaf0ff;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#8b82c723 1.5px,transparent 1.5px);background-size:24px 24px;z-index:-1}
.site-header{max-width:880px;height:72px}.brand{color:#403666;font-weight:900;transform:rotate(-3deg);text-shadow:0 2px #fff}.brand span{color:#7954db}.languages{background:#ffffff8c;border:1px solid #fff;border-radius:20px;padding:3px}.languages a[aria-current=page]{background:#7961d6;color:white;border-radius:14px}
.round{border:2px solid white;background:linear-gradient(#fff,#eeebfc);border-radius:14px;box-shadow:0 4px 0 #bdb4dc,0 6px 10px #56418b14;color:#6c559a;min-width:40px;width:40px;height:40px}.round:hover{background:#fff}.round:active{transform:translateY(3px)}
main{max-width:560px;margin-top:10px}.desktop-layout>main{flex-basis:560px;max-width:560px;margin-top:10px}
.lobby{position:relative;background:linear-gradient(160deg,#ffffffed,#f5f2ffed);border:3px solid #fff;border-radius:36px;padding:22px 30px;box-shadow:0 8px 0 #c4c3e4,0 20px 55px #6656a01f;isolation:isolate}
.portal-back{color:#766b9d;font-weight:600;font-size:11px}.lobby-badge{background:#e9e1ff;color:#7757ab;border:1px solid #fff;font-size:11px;font-weight:700;padding:7px 15px}
.lobby h1,html:not([lang=ko]) .lobby h1,html[lang=ja] .lobby h1{color:#514080;font-size:76px;font-weight:900;letter-spacing:-5px;transform:rotate(-4deg);text-shadow:0 2px #fff,0 6px #c5b4e6,0 9px 0 #e4dcf6;margin:14px 0}.lobby h1 em{color:#8760df;text-shadow:0 2px #e8dfff,0 6px #b2a0d5,0 9px #e4dcf6}.lobby-title>p{color:#776892;font-weight:700;font-size:13px;margin-top:16px}
.chip-stage{margin-top:12px;border-radius:50%;background:radial-gradient(ellipse at center,#ddd3ff88,transparent 68%)}.chip-stage:before{content:"";position:absolute;left:10%;right:10%;height:40px;bottom:27px;border-radius:50%;background:#e7e2f8;border:2px solid #fff;box-shadow:0 7px 0 #d7d0ed;z-index:-1}.chip-speech{font-weight:700;color:#6c5597;border:2px solid #fff;background:#ece6ff;box-shadow:0 3px 0 #d7cbea}.spark{color:#a07ae2}.s1{animation:twinkle 3s ease-in-out infinite}.s2{color:#37baa7;animation:twinkle 3s 1s ease-in-out infinite}
.home-record{background:#fff;border:1px solid #ece7f8;border-radius:16px;width:max-content;max-width:100%;padding:8px 20px;margin:17px auto;color:#88799e}.home-record:before{content:"♛";font-size:23px;color:#9870d1}.home-record strong{color:#5c4688;font-weight:800}
.play-button{background:linear-gradient(#a08aef,#7a58d6);border:2px solid #ab93f3;border-bottom:6px solid #54369c;box-shadow:inset 0 2px 0 #c8b9ff,0 5px 0 #e3dcf4,0 12px 25px #7860b72b;border-radius:20px;font-size:18px;min-height:65px;font-weight:800;text-shadow:0 2px #54339b77}.play-button:hover{filter:brightness(1.07)}
.lobby-tools{gap:8px;margin-top:19px}.lobby-tools button{color:#73628f;background:linear-gradient(#fff,#f0edf9);border:2px solid #fff;border-bottom:4px solid #d1c6e6;border-radius:14px;min-height:48px;font-size:11px}.lobby-tools button:active{transform:translateY(2px)}.lobby-tip{color:#827496;margin-bottom:4px}
.guide-disclosure{margin-top:24px;border-top:1px solid #e1dbee;text-align:left;padding-top:15px}.guide-disclosure>summary{font-size:11px;color:#897b9d;cursor:pointer;text-align:center}.game-guide{margin-top:15px;border-radius:18px;padding:18px;box-shadow:none}.game-guide h2{display:none}.guide-cards{grid-template-columns:1fr}
.game{padding:19px 22px 16px;background:linear-gradient(160deg,#ffffff,#f4f0ff);border:3px solid #fff;border-bottom:7px solid #bcb5dc;border-radius:32px;box-shadow:0 18px 48px #55428725;overflow:visible}.game-top{margin-bottom:16px}.level-pill{position:relative;background:linear-gradient(#967de5,#7756c7);border:2px solid #b4a0ee;border-bottom:4px solid #604399;border-radius:16px;box-shadow:inset 0 2px #c1adff,0 3px #e7e0f6;color:white;padding:8px 22px;font-weight:700;letter-spacing:0;gap:9px}.level-pill b{font:800 22px 'Outfit',sans-serif}.tiny-star{color:#d5fff8;font-size:18px}
.score-row,.game .score-row{gap:9px;margin:0 0 12px;align-items:stretch}.score-row>div{flex:1;min-width:0;background:#fff;border:1px solid #e4dff3;border-bottom:3px solid #dcd4ef;border-radius:16px;padding:11px 12px;text-align:center}.score-row>div:first-child{flex:1.3;background:#eee7ff;border-color:#ded1f4}.score-row .caption{font-size:10px;font-weight:700;color:#8873a5;letter-spacing:0;margin-bottom:3px}.score-row strong,.game .score-row strong{font-size:32px;color:#685094;font-weight:800;letter-spacing:-.7px}.game .goal-stat strong{font-size:21px;color:#2d9d91;line-height:38px;white-space:nowrap}.game .moves-stat strong{font-size:28px;line-height:38px;color:#8260c2}.game .moves-stat strong.warning{color:#e75183}
.progress{height:15px;border:3px solid #fff;background:#ded8ee;box-shadow:0 1px 0 #c9bfdf,inset 0 2px 3px #5d487c16;overflow:hidden}.progress i{background:repeating-linear-gradient(110deg,transparent 0 12px,#ffffff25 12px 22px),linear-gradient(#66e0c7,#30bda7);box-shadow:inset 0 2px #a1f6e4;border-radius:9px}
.board-wrap{max-width:470px;margin:15px auto 0;padding:4px 3px 24px;border:2px solid #fff;border-radius:26px;background:radial-gradient(ellipse at 50% 25%,#f3f0ff,#e6e3f5);box-shadow:inset 0 3px 8px #79609b12,0 3px 0 #d6cfea}#board{position:relative;z-index:1}.cell .socket{fill:#f9f7ff;stroke:#d0c6e7;stroke-width:1.7}.cell>polygon:first-child{fill:#c9bfdf}.cell.empty:hover .socket,.cell.hover .socket,.cell:focus-visible .socket{fill:#d9f7ee;stroke:#51c7b0}.cell.ice>polygon:first-child{fill:#8ec5e8}#toast{bottom:9px;color:#85749b;font-size:10px;font-weight:600}#toast.highlight{color:#7450b3}
.tray-deck{margin-top:15px;padding:12px;background:#e9e3f6;border:2px solid #fff;border-bottom:4px solid #cbc0e1;border-radius:23px}.tray-label{margin:0 2px 12px;color:#79668f;font-weight:700;font-size:11px}.tray-label span:first-child:before{content:"◆";color:#a18bcc;margin-right:6px}.tray-label span:last-child{font-size:10px;font-weight:500}.tray{gap:12px}.tray-slot{height:89px;background:linear-gradient(#faf8ff,#e9e1f7);border:2px solid #fff;border-bottom:5px solid #c4b5df;border-radius:17px;box-shadow:0 3px 6px #66508412}.tray-slot.selected{background:linear-gradient(#e5fff7,#c3f0e4);border:2px solid #6cd0b9;border-bottom:5px solid #43ac95;box-shadow:0 0 0 3px #fff,0 5px 12px #3baf951f;transform:translateY(-3px)}.tray-slot.selected:after{width:14px;height:4px;border-radius:5px;left:calc(50% - 7px);bottom:5px;background:#39b295}.tray-slot:disabled{opacity:.35;box-shadow:none;border-style:dashed}
.game-bottom{margin-top:14px;gap:8px}.game-bottom>button{background:#fff;border:1px solid #e5ddef;border-bottom:3px solid #d1c4e3;padding:7px 12px;border-radius:12px;font-size:11px;color:#796190}.game-bottom>span{color:#9281a6;font-size:10px;letter-spacing:0}
.stage,.results{background:linear-gradient(150deg,#fff,#f3edff);border:3px solid white;border-bottom:7px solid #bfb0da;box-shadow:0 20px 50px #69529825;border-radius:32px}.celebration{display:grid;place-items:center;width:100px;height:100px;margin:5px auto 24px;background:linear-gradient(#bc9cf0,#8c66cc);border:5px solid #e4d4ff;outline:2px solid white;border-radius:30px;box-shadow:0 6px 0 #c4b0e2;color:white;text-shadow:0 4px #7553a8;transform:rotate(-8deg)}.stage h2,.results h2{color:#5b437d}.result-score{color:#815cc8;text-shadow:0 3px #e4d5fa;font-weight:800}.soft-button{background:#f5efff;border:1px solid #e1d5f3;border-bottom:3px solid #cdbce3;color:#795c9c}.result-best{border-color:#e0d5ef}.result-best strong{color:#77569c}dialog{border:3px solid #fff;border-bottom:6px solid #c9b9e4;background:#f8f5ff;color:#624982}dialog .primary{background:linear-gradient(#9b7bdd,#7856b7);border-bottom:4px solid #54378b;font-weight:700}footer{color:#9687ac}
@keyframes twinkle{0%,100%{transform:scale(.85) rotate(-10deg);opacity:.6}50%{transform:scale(1.1) rotate(10deg);opacity:1}}
@media(max-width:740px){.site-header{height:60px;min-height:60px;margin:0 auto;padding:0 18px}.languages{padding:2px}.languages a{font-size:10px;padding:5px}.brand{font-size:20px}.round{min-width:36px;width:36px;height:36px;font-size:18px}main,.desktop-layout>main{max-width:450px;padding:0 12px;margin:7px auto 22px}.lobby{padding:18px 22px;border-radius:30px}.lobby h1,html:not([lang=ko]) .lobby h1{font-size:65px}.game{padding:13px 13px 12px;border-radius:27px}.game-top{margin-bottom:13px}.score-row>div{padding:8px 7px}.game .score-row strong{font-size:28px}.game .goal-stat strong{font-size:19px;line-height:34px}.game .moves-stat strong{font-size:25px;line-height:34px}.board-wrap{margin-top:12px;padding:2px 0 23px;border-radius:21px}.tray-deck{padding:11px 10px;margin-top:12px}.tray-slot{height:80px}.tray{gap:10px}.game-bottom{margin-top:12px}.play-button{font-size:17px}html[lang=ja] .lobby h1{font-size:51px}.stage,.results{padding:25px 20px}}
@media(max-height:820px){body[data-screen=play] .site-header{height:52px;min-height:52px}body[data-screen=play] main{margin-top:3px}.game{padding-top:12px}.game-top{margin-bottom:11px}.game .score-row{margin-bottom:10px}.board-wrap{max-width:min(100%,calc((100dvh - 465px)*1.17));min-width:250px;margin-top:10px}.tray-deck{margin-top:10px;padding:9px 10px}.tray-slot{height:70px}.tray-label{margin-bottom:9px}.game-bottom{margin-top:10px}.game-bottom>button{padding:5px 10px}}
@media(max-width:360px){.lobby{padding:18px 15px}.site-header{padding:0 12px}.game{padding:11px 10px}.level-pill{padding:6px 15px}.game .goal-stat strong{font-size:17px}.score-row{gap:6px}.tray-label span:last-child{font-size:9px}.board-wrap{min-width:230px}.lobby-tools button{font-size:10px;padding:7px 4px}}
@media(prefers-reduced-motion:reduce){.spark{animation:none}}

@media(max-height:820px){.lobby{padding-top:16px;padding-bottom:16px}.lobby .portal-back{margin-bottom:8px}.lobby h1,html:not([lang=ko]) .lobby h1{font-size:60px;margin:10px 0}.lobby-title>p{margin-top:10px}.chip-stage{height:155px;margin-top:4px}.chip-stage svg{height:140px}.chip-speech{bottom:0}.home-record{margin:12px auto;padding:6px 18px}.lobby-tools{margin-top:14px}.lobby-tip{margin-top:12px}.guide-disclosure{margin-top:15px;padding-top:12px}}

/* Align animated chips exactly with the padded board SVG. */
.board-wrap{--board-x:3px;--board-top:4px;--board-bottom:24px}
.board-wrap .effects{inset:auto;left:var(--board-x);top:var(--board-top);width:calc(100% - 2 * var(--board-x));height:calc(100% - var(--board-top) - var(--board-bottom))}
@media(max-width:740px){.board-wrap{--board-x:0px;--board-top:2px;--board-bottom:23px}}

/* Sound is a primary control on phones as well as desktops. */
.site-header .header-tools #sound{display:inline-grid}
#sound[aria-pressed=true]{background:linear-gradient(#ddfff5,#bdecdc);color:#258875;border-color:#f5fffc;box-shadow:0 4px 0 #9ac9bb}
#sound[aria-pressed=false]{color:#9b88ab;background:#f1ecf6}
@media(max-width:360px){body:not([data-screen=play]) .site-header{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px}body:not([data-screen=play]) .site-header .languages{order:3;flex-basis:100%;justify-content:center}body:not([data-screen=play]) .header-tools{margin-left:auto}}

/* Mobile play prioritizes chip size over fitting everything into a short viewport. */
@media(max-width:740px){
 body[data-screen=play] main,body[data-screen=play] .desktop-layout>main{max-width:480px;padding:0 6px;margin-top:3px}
 .game{padding:10px 8px 12px;border-radius:24px}
 .game .board-wrap{width:100%;max-width:none;min-width:0;margin:10px 0 0;border-radius:20px}
 .game-top{margin:0 4px 10px}.score-row>div{padding:6px 8px}
 .game .score-row{margin:0 3px 9px}.game .score-row strong{font-size:26px}
 .game .goal-stat strong{font-size:19px;line-height:31px}.game .moves-stat strong{font-size:24px;line-height:31px}
 .tray-deck{margin-top:10px;padding:9px 10px}.tray-slot{height:74px}.game-bottom{margin:10px 3px 0}
}
.tray-slot.selected .stack{transform-box:fill-box;transform-origin:center bottom;animation:chip-pick .3s ease-out}
@keyframes chip-pick{0%{transform:translateY(3px) scale(.94,1.02)}45%{transform:translateY(-8px) rotate(-4deg) scale(1.04)}75%{transform:translateY(-2px) rotate(2deg)}100%{transform:none}}
.cell.arrive .stack{animation:chip-squash .26s ease-out}
@keyframes chip-squash{0%{transform:translateY(-12px) scale(.95,1.07)}45%{transform:translateY(3px) scale(1.09,.86)}75%{transform:translateY(-3px) scale(.98,1.04)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.tray-slot.selected .stack,.cell.arrive .stack{animation:none}}