:root{color-scheme:dark;--bg:#0b1721;--panel:#111f2a;--line:#243642;--muted:#8495a0;--text:#e9f0f3;--mint:#9de3c2;--gold:#e3bc78}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#132a37 0,#0b1721 55%,#08121b 100%);color:var(--text);font-family:Manrope,'Noto Sans SC',sans-serif}.app-shell{max-width:1440px;margin:auto;padding:0 42px}.topbar{height:76px;display:flex;align-items:center;border-bottom:1px solid rgba(155,185,196,.12);gap:24px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-size:14px;font-weight:800;letter-spacing:2px}.brand-mark{color:var(--gold);font-size:24px}.brand small{display:block;font-size:10px;color:#8fa1aa;letter-spacing:1px;font-weight:500;margin-top:1px}.top-meta{margin-left:auto;color:#aab8bf;font-size:12px;letter-spacing:.3px}.status-dot,.round-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#92ddb4;margin-right:8px;box-shadow:0 0 10px #92ddb477}.divider{color:#4d626e;margin:0 9px}.icon-button{width:34px;height:34px;border:1px solid #2a3d47;border-radius:10px;background:#14242e;color:#c5d5d8;font-size:17px;cursor:pointer}.game-layout{display:grid;grid-template-columns:minmax(600px,1fr) 264px;gap:24px;padding:28px 0 24px}.game-panel{min-width:0}.panel-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 17px}.eyebrow{font:500 9px 'DM Mono',monospace;letter-spacing:2px;color:#7f979f}.panel-heading h1{font-size:25px;letter-spacing:1px;margin:5px 0 0;font-weight:700}.round-chip{padding:8px 12px;border-radius:20px;background:#12222c;border:1px solid #263a45;color:#a9b7bb;font-size:11px}.round-chip b{color:#e4ecea;font:500 11px 'DM Mono',monospace;margin-left:3px}.board-frame{position:relative;border:1px solid #29414b;border-radius:14px;padding:15px;background:linear-gradient(145deg,#12242f,#0d1c26 55%,#10232d);box-shadow:0 22px 60px #0004,inset 0 1px #ffffff08;overflow:hidden;min-height:435px}.board-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#24604b18,transparent 66%);pointer-events:none}.board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(19,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:2px;width:100%;aspect-ratio:19/11;user-select:none;touch-action:manipulation}.tile{position:relative;display:grid;place-items:center;min-width:0;min-height:0;cursor:pointer;background:url('img/block/block.png') center/100% 100% no-repeat;transition:transform .11s,filter .12s,opacity .16s}.tile::after{content:"";position:absolute;inset:2px;border-radius:5px;border:1px solid transparent;transition:.12s}.tile:hover{filter:brightness(1.12);transform:translateY(-1px);z-index:2}.tile.selected::after{border-color:#a8f2d2;box-shadow:0 0 9px #93e8c985,inset 0 0 8px #a8f2d22a}.tile img{width:86%;height:86%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px #42332566)}.tile.clearing{opacity:0;transform:scale(.5)}.tile.hinted::after{border-color:#e8d392;box-shadow:0 0 14px #f2d585aa,inset 0 0 8px #ffe6a544;animation:pulse .6s infinite alternate}@keyframes pulse{to{filter:brightness(1.8)}}.paths{position:absolute;inset:15px;width:calc(100% - 30px);height:calc(100% - 30px);z-index:4;pointer-events:none;overflow:visible}.paths polyline{fill:none;stroke:#b4f5d7;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #71edb4) drop-shadow(0 0 11px #7effca);stroke-dasharray:1000;animation:draw .22s ease-out}@keyframes draw{from{stroke-dashoffset:1000}}.toast{position:absolute;z-index:8;left:50%;top:18px;transform:translate(-50%,-10px);padding:8px 13px;border:1px solid #456055;background:#12251fdd;border-radius:20px;color:#b9ebd2;font-size:11px;opacity:0;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.result-overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#07121acc;backdrop-filter:blur(5px)}.result-overlay[hidden]{display:none}.result-card{text-align:center;padding:26px 34px;border-radius:18px;background:#142630;border:1px solid #35514f;box-shadow:0 20px 70px #0008}.result-spark{font-size:27px;color:var(--gold)}.result-card h2{margin:7px 0;font-size:24px}.result-card p:not(.eyebrow){font-size:12px;color:#a9b8bd}.primary-button{margin-top:10px;border:0;background:#a5e4c4;color:#10231e;padding:11px 18px;border-radius:9px;font-weight:700;cursor:pointer}.primary-button span{padding-left:9px}.board-foot{display:flex;align-items:center;gap:24px;padding:13px 3px;color:#80939c;font-size:10px}.board-foot>span{display:flex;align-items:center;gap:7px}.legend-tile{width:10px;height:12px;border:1px solid #708983;border-radius:2px;background:#213b3d}.legend-line{width:16px;height:2px;background:#95e2bc;box-shadow:0 0 5px #95e2bc}.layout-picker{margin-left:auto!important;color:#788e98}.layout-picker select{border:1px solid #2a414b;border-radius:6px;padding:5px 20px 5px 8px;background:#13242e;color:#becbd0;font:inherit}.sidebar{display:flex;flex-direction:column;gap:11px;padding-top:1px}.timer-card,.stat-card,.tools-card{border:1px solid #263943;background:linear-gradient(145deg,#14252f,#101e28);border-radius:12px;padding:15px 16px}.card-top{display:flex;justify-content:space-between;align-items:center}.timer-state{font-size:9px;color:#9cb5aa}.timer-state i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#8edcb0;margin-right:5px}.timer-value{font:500 37px 'DM Mono',monospace;letter-spacing:2px;margin:10px 0 8px;color:#ebf4ee}.timer-track{height:4px;background:#2c4048;border-radius:4px;overflow:hidden}.timer-track div{height:100%;width:100%;background:linear-gradient(90deg,#84d8b0,#d4d68c);border-radius:4px;transition:width .3s}.timer-foot{display:flex;justify-content:space-between;font-size:9px;color:#85989e;margin-top:9px}.timer-foot b{color:#9fe0bd;font-weight:600}.stat-card{padding:14px 16px 13px}.stat-label{display:flex;justify-content:space-between;color:#a8b7bb;font-size:11px}.stat-icon{color:#6b8d83;font-size:15px}.stat-value{margin-top:5px}.stat-value strong{font:500 28px 'DM Mono',monospace;color:#eff4ef}.stat-value small{font-size:10px;color:#80949a;margin-left:6px}.stat-sub{margin-top:3px;font-size:9px;color:#72858c}.combo-meter{height:3px;margin:8px 0 6px;border-radius:3px;background:#2d4248}.combo-meter i{display:block;width:0;height:100%;border-radius:3px;background:#e5ca88;transition:width .2s}.tools-card{padding:14px 12px 8px}.tools-title{display:flex;align-items:center;justify-content:space-between;padding:0 4px 7px}.tool-count{font-size:9px;color:#71868d}.tool-button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 4px;border:0;border-top:1px solid #263a43;background:transparent;color:inherit;text-align:left;cursor:pointer}.tool-button:hover{background:#ffffff06}.tool-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid #344b4f;border-radius:8px;color:#a4dfc0;font-size:17px}.shuffle-icon{color:#dfc68e}.restart-icon{color:#9fbdcf}.tool-button b{display:block;font-size:10px;font-weight:600}.tool-button small{display:block;margin-top:2px;color:#778b92;font-size:8px}.tool-button kbd{margin-left:auto;font:9px 'DM Mono';color:#73868c;border:1px solid #30434b;border-radius:4px;padding:2px 5px}.tip{display:flex;align-items:flex-start;gap:9px;padding:9px 4px;color:#81949b;font-size:9px;line-height:1.8}.tip b{color:#b0c1c2;font-size:10px}.tip-mark{color:#d9bd7d;font-size:15px}.footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff10;padding:13px 0 18px;color:#657983;font:9px 'DM Mono',monospace;letter-spacing:.5px}.footer i{font-style:normal;color:#c3aa70}.footer kbd{font:9px 'DM Mono';padding:2px 4px;border:1px solid #34434a;border-radius:3px;color:#8ba0a5}.shake{animation:shake .22s linear}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}



/* Reference look: a clean blue game field with the original Cocos tiles. */
body{background:#3d557b;color:#f5f2e7;font-family:Arial,'Noto Sans SC',sans-serif}
.app-shell{max-width:none;min-height:100vh;padding:0 20px}
.topbar,.panel-heading,.footer{display:none}
.game-layout{display:block;padding:0;margin:0}
.game-panel{width:100%;min-width:0}
.board-frame{height:calc(100vh - 90px);min-height:420px;padding:18px 0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;display:grid;place-items:center}
.board-glow{display:none}
.board{width:min(100%,608px,calc((100vh - 155px)*665/429));height:auto;aspect-ratio:665/429;gap:0;margin:auto;filter:none}
.tile{appearance:none;-webkit-appearance:none;border:0;padding:0;color:inherit;aspect-ratio:35/39;background-image:url('img/block/block.png');background-size:100% 100%;transform:scale(1.18);transform-origin:center;border-radius:0;filter:none;overflow:hidden;z-index:1}
.tile{background-size:100% 100%;background-position:center}
.tile.touch-left{background-size:112% 100%;background-position:right center}
.tile:hover{filter:brightness(1.08);transform:scale(1.18);z-index:1}
.tile img{position:absolute;left:50%;top:50%;width:90%;height:90%;object-fit:fill;filter:none;transform:translate(-50%,-50%);z-index:1}
.tile::after{z-index:2}
.tile::after{inset:0;background:transparent url('img/block/select.png') center/100% 100% no-repeat;opacity:0;border:0;border-radius:0;box-shadow:none}
.tile.selected::after{opacity:1;border:0;box-shadow:none}
.tile.hinted::after{opacity:1;border:0;box-shadow:0 0 10px #fff2a8;animation:pulse .55s infinite alternate}
.paths{inset:18px 0 8px;width:100%;height:calc(100% - 26px)}
.paths .lightning-halo{fill:none;stroke:#176aff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.72;filter:blur(4px);animation:ac-surge .13s steps(1,end) infinite}
.paths .lightning-glow{fill:none;stroke:#39baff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.96;filter:drop-shadow(0 0 5px #36caff) drop-shadow(0 0 11px #168bff);animation:ac-surge .13s steps(1,end) infinite reverse}
.paths .lightning-echo{fill:none;stroke:#56d9ff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.85;filter:drop-shadow(0 0 4px #53cfff);animation:ac-surge .1s steps(1,end) infinite}
.paths .lightning-runner{fill:none;stroke:#b8f8ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 18;stroke-dashoffset:0;filter:drop-shadow(0 0 4px #9aefff) drop-shadow(0 0 8px #36bfff);animation:ac-flow .07s linear infinite}
.paths .lightning-core{fill:none;stroke:#f4ffff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #e6fdff) drop-shadow(0 0 9px #74dcff)}
.paths .lightning-branch{fill:none;stroke:#baf5ff;stroke-width:1.7;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 4px #69d8ff) drop-shadow(0 0 8px #168bff);animation:ac-surge .1s steps(1,end) infinite}
@keyframes ac-flow{to{stroke-dashoffset:-40}}
@keyframes ac-surge{0%,100%{opacity:.72}13%{opacity:1}22%{opacity:.32}36%{opacity:.95}52%{opacity:.5}68%{opacity:1}83%{opacity:.38}}

.board-foot{position:relative;justify-content:center;gap:22px;padding:0 0 8px;color:#e0e5e9;font-size:11px}
.legend-tile{background:url('img/block/block.png') center/cover;border:0;border-radius:0;width:13px;height:15px}
.legend-line{height:3px;background:#45caff;box-shadow:0 0 5px #45caff,0 0 10px #148cff}
.layout-picker select{background:#344d72;border:1px solid #8092aa;color:#fff;border-radius:2px}
.install-button{border:1px solid #9dacbd;background:#344d72;color:#fff;border-radius:3px;padding:5px 9px;font-size:10px;white-space:nowrap;cursor:pointer}
.sidebar{max-width:608px;margin:0 auto 18px;display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:8px}
.timer-card,.stat-card,.tools-card{background:#344d72aa;border:1px solid #8293aa66;border-radius:3px;padding:9px 11px;box-shadow:none}
.timer-value{font-size:22px;margin:3px 0;color:#fff}
.timer-track{height:3px}.timer-foot{margin-top:5px}
.stat-card{padding:8px 10px}.stat-value{margin-top:2px}.stat-value strong{font-size:20px;color:#fff}.stat-sub{font-size:8px}
.combo-meter{margin:4px 0}.tools-card{grid-column:1/-1;display:flex;align-items:center;gap:5px;padding:5px 8px}.tools-title{padding:0 5px;margin-right:auto}.tools-title .eyebrow{color:#d2dce5}.tools-title .tool-count{display:none}
.tool-button{width:auto;border:0;border-left:1px solid #8293aa55;padding:5px 12px;gap:6px}.tool-button b{font-size:10px;color:#fff}.tool-button small{display:none}.tool-icon{width:23px;height:23px;border-color:#91a0b3;color:#ffe99e;border-radius:3px}.tool-button kbd{display:none}
.tip{display:none}
.timer-state{color:#d9e6de}
.eyebrow,.stat-label,.stat-sub,.timer-foot{color:#d1dbe4}
.result-overlay{background:#263e61cc}.result-card{background:#405b80;border-color:#a6b5c5;border-radius:4px}
.toast{background:#354e73;border-color:#a5b1be;color:#fff;border-radius:3px}

.classic-status-row{width:min(100%,608px);margin:0 auto;padding:7px 4px 5px;display:grid;grid-template-columns:max-content minmax(56px,1fr) max-content;align-items:center;gap:clamp(4px,1.2vw,12px);border-bottom:0;color:#ffd72b;font-size:clamp(10px,2.3vw,14px);font-weight:800;text-shadow:1px 1px 0 #7b4d09}
.classic-actions{width:min(100%,608px);margin:0 auto;display:flex;align-items:center;gap:6px;padding:5px 3px 4px}
.classic-icon-button{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:40px;height:40px;padding:3px;border:1px solid #a6c1df;border-radius:4px;background:linear-gradient(145deg,#6c9bcc,#3e6192 65%,#294b79);box-shadow:inset 0 1px 2px #fff9,0 2px 3px #152f52;color:#fff;cursor:pointer;touch-action:manipulation}
.classic-icon-button svg{display:block;width:32px;height:32px;filter:drop-shadow(0 1px 1px #24364d)}
.classic-icon-button:active{transform:translateY(1px);filter:brightness(1.12)}
.board-frame>.mobile-controls{display:contents}
.board-frame>.mobile-controls>.classic-actions{position:absolute;z-index:7;top:7px;left:4px;width:auto;margin:0;padding:0}
.classic-restart{position:absolute;z-index:7;top:7px;right:4px;min-height:40px;padding:0 13px;border:2px solid #ffd0b0;border-radius:13px;background:linear-gradient(180deg,#ffb18b 0%,#f06448 48%,#d94336 100%);box-shadow:inset 0 2px 2px #fff9,0 2px 3px #182f50;color:#fff9e9;font-size:13px;font-weight:900;letter-spacing:.4px;text-shadow:0 2px 1px #96352c;cursor:pointer;touch-action:manipulation}
.classic-restart:active{transform:translateY(1px);filter:brightness(1.12)}
.classic-home{position:absolute;z-index:7;top:7px;right:137px;min-height:40px;padding:0 12px;border:2px solid #c5dcf2;border-radius:12px;background:linear-gradient(180deg,#a8d5f4,#4d8cc7 52%,#32649d);box-shadow:inset 0 2px 2px #fff9,0 2px 3px #182f50;color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 2px #24496e;cursor:pointer;touch-action:manipulation}
.classic-home:active{transform:translateY(1px);filter:brightness(1.12)}
.classic-time-label,.classic-remaining{white-space:nowrap}
.classic-time-label b{display:none}
.classic-remaining b{font-size:.88em}
.paths.hint-path .lightning-halo{stroke-width:5;opacity:.34;filter:blur(2px)}
.paths.hint-path .lightning-glow{stroke-width:2.4;opacity:.8;filter:drop-shadow(0 0 2px #36caff) drop-shadow(0 0 4px #168bff)}
.paths.hint-path .lightning-echo{stroke-width:.8;opacity:.75;filter:drop-shadow(0 0 2px #53cfff)}
.paths.hint-path .lightning-runner{stroke-width:1.2;filter:drop-shadow(0 0 2px #9aefff) drop-shadow(0 0 3px #36bfff)}
.paths.hint-path .lightning-core{stroke-width:1.1;filter:drop-shadow(0 0 2px #e6fdff) drop-shadow(0 0 3px #74dcff)}
.classic-time-label b{margin-left:4px;color:#f7f5e8;font:700 .92em 'DM Mono',monospace;text-shadow:0 1px 2px #142b4a}
.classic-remaining b{color:#fff02a;font:700 1.08em 'DM Mono',monospace;margin-left:3px}
.classic-remaining b{font-size:.88em}
.classic-meter{display:flex;align-items:center;min-width:0;margin:0 -3px}
.classic-meter .meter-cap{position:relative;z-index:1;flex:0 0 22px;height:18px;border:2px solid #b2c9df;background:linear-gradient(100deg,#6e9fcf,#d3ecff 42%,#5a8bbd);box-shadow:inset 0 0 3px #fff,0 1px 2px #162e50}
.classic-meter .meter-cap:first-child{border-radius:50% 0 0 50%}
.classic-meter .meter-cap:last-child{border-radius:0 50% 50% 0}
.classic-meter .timer-track{height:18px;min-width:0;flex:1;margin:0 -5px;border:2px solid #e2b6a3;border-radius:3px;background:#633f46;box-shadow:inset 0 1px 3px #311e2c;overflow:hidden}
.classic-meter .timer-track div{height:100%;background:linear-gradient(180deg,#ffe0bd 0%,#ff9875 30%,#fa764e 60%,#ffb08a 100%);border-radius:1px;box-shadow:inset 0 1px 2px #fff7,0 0 4px #ff845c;transition:width .3s linear}
.classic-meter .timer-track{background:linear-gradient(180deg,#173c75,#286bc0 45%,#164580);border-color:#a8c9ed;box-shadow:inset 0 1px 4px #071d45,0 0 5px #3c8cff55}
.classic-meter .timer-track #timer-bar{position:relative;overflow:visible;transition:transform .3s linear}
.classic-meter .timer-track #timer-bar.spark-active::after{content:"";position:absolute;left:-3px;top:50%;width:9px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fff 0 12%,#b9f2ff 28%,#4db8ff 52%,#2689ff44 72%,transparent 100%);filter:drop-shadow(0 0 3px #b8efff) drop-shadow(0 0 8px #3a9dff);animation:timer-spark .32s ease-in-out infinite alternate;pointer-events:none}
@keyframes timer-spark{from{opacity:.65;scale:.8 1}to{opacity:1;scale:1.25 1.12}}
.classic-bonus{width:min(100%,608px);margin:2px auto 0;text-align:center;color:#d4dfeb;font-size:9px}.classic-bonus b{color:#9de3c2}

.combo-pop{position:absolute;z-index:6;left:max(10px,calc((100% - 608px)/2 + 12px));bottom:clamp(18px,8%,72px);color:#fff8d9;font-size:clamp(16px,3.6vw,25px);font-weight:900;letter-spacing:.3px;white-space:nowrap;opacity:0;transform:translateY(8px) scale(.92);transition:opacity .18s ease,transform .18s ease;pointer-events:none;-webkit-text-stroke:.7px #ffb449;text-shadow:0 1px 0 #a44813,1px 0 0 #9e4113,-1px 0 0 #9e4113,0 0 4px #fff5a6,0 0 8px #ff9a36}
.combo-pop.show{opacity:1;transform:translateY(0) scale(1)}
.app-shell[hidden],.home-screen[hidden],.map-dialog[hidden]{display:none!important}
.home-screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:auto;padding:20px;background:radial-gradient(ellipse at 50% 34%,#496b94 0,#354f76 48%,#273f64 100%);}
.home-card{width:min(420px,100%);padding:34px 24px 26px;text-align:center;border:1px solid #a8c4dc;border-radius:16px;background:linear-gradient(155deg,#41638e,#304b73 70%,#273f64);box-shadow:0 18px 50px #10254488,inset 0 1px 0 #fff7;color:#fff}
.home-brand{font:800 13px 'DM Mono',monospace;letter-spacing:3px;color:#eaf4ff}.home-brand span{font-size:22px;color:#ffd85a;vertical-align:-2px;margin-right:5px}
.home-kicker{margin:16px 0 4px;color:#b8cbe0;font:600 9px 'DM Mono',monospace;letter-spacing:2px}
.home-card h1{margin:0;font-size:clamp(38px,10vw,52px);letter-spacing:5px;text-shadow:0 3px 0 #203b60,0 0 18px #b8d9ff55}
.home-copy{margin:8px 0 20px;color:#d3dfec;font-size:13px}
.home-tiles{display:flex;justify-content:center;align-items:center;gap:0;margin:0 auto 24px}
.home-tiles img{width:46px;height:51px;object-fit:fill;filter:drop-shadow(0 4px 2px #1d3457);margin:0 -2px}
.home-start{min-width:190px;padding:13px 24px;border:2px solid #ffd2ac;border-radius:15px;background:linear-gradient(180deg,#ffb18b,#f06448 52%,#d94336);box-shadow:inset 0 2px 2px #fff9,0 4px 0 #8f392f,0 8px 18px #172e50;color:#fff9e9;font-size:18px;font-weight:900;letter-spacing:2px;text-shadow:0 2px 1px #96352c;cursor:pointer}
.home-start span{font-size:12px;margin-left:8px}
.home-start:active{transform:translateY(2px);box-shadow:inset 0 2px 2px #fff9,0 2px 0 #8f392f,0 5px 12px #172e50}
.home-footnote{margin:22px 0 0;color:#b9c9db;font-size:10px;letter-spacing:1px}
.map-dialog{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#152947c9;backdrop-filter:blur(6px)}
.map-dialog-card{position:relative;width:min(620px,100%);max-height:min(760px,calc(100dvh - 32px));overflow:auto;padding:24px;border:1px solid #a8c4dc;border-radius:12px;background:linear-gradient(155deg,#45658d,#304b73 72%,#273f64);box-shadow:0 20px 70px #102544bb;color:#fff}
.map-dialog-card .home-kicker{margin:0 0 3px}.map-dialog-card h2{margin:0;font-size:25px;letter-spacing:2px}.map-dialog-copy{margin:5px 0 16px;color:#c5d4e4;font-size:12px}
.map-dialog-close{position:absolute;right:13px;top:11px;width:32px;height:32px;border:1px solid #b7cbe0;border-radius:7px;background:#ffffff12;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.map-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.map-option{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:9px;border:1px solid #9bb4cf88;border-radius:8px;background:#1d385c77;color:#fff;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.map-option:hover,.map-option:focus-visible{border-color:#ffe08a;background:#5879a1;transform:translateY(-2px);outline:none}
.map-option>b{font-size:12px}.map-option>small{color:#c5d4e4;font-size:9px}
.map-preview{display:grid;width:100%;aspect-ratio:19/11;grid-template-columns:repeat(19,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:1px;padding:4px;border:1px solid #a9bfd3;border-radius:4px;background:#253f64}
.map-preview i{display:block;min-width:0;min-height:0;background:transparent}.map-preview i.filled{border:1px solid #f9dc9b;border-radius:1px;background:linear-gradient(135deg,#ffe7ae,#eaa65d);box-shadow:1px 1px 0 #80461f}



.tile:focus,.tile:focus-visible,.tile:active{outline:0!important;outline-style:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}


/* Mobile play view: keep the existing controls and timer in the DOM, but hide them while the board uses the full screen. */




/* Scale the whole grid to fit the phone, preserving its proportions and 1px gaps. */
#game-app.app-shell:not([hidden]){position:fixed;inset:0;width:100dvw;height:100dvh;max-width:none;margin:0;padding:0;overflow:hidden;background:#3d557b}
#game-app.app-shell .topbar,#game-app.app-shell .panel-heading{display:none!important}
#game-app.app-shell .game-layout{display:block;position:absolute;inset:0;margin:0;padding:0}
#game-app.app-shell .game-panel{position:absolute;inset:0}
#game-app.app-shell .board-frame{position:absolute;inset:0;min-height:0;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;background:#3d557b}
#game-app.app-shell .board{position:absolute;left:0;top:0;width:min(100dvw,calc(100dvh * 19 / 11));height:auto;aspect-ratio:19/11;transform:none;gap:1px}


body:has(#game-app:not([hidden])){overflow:hidden}

/* The outer routing cells remain in game logic, without a visible border of empty cells. */
#game-app.app-shell .board{grid-template-columns:repeat(17,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));width:min(100dvw,calc(100dvh * 17 / 9));aspect-ratio:17/9}


/* Anchor the visible corner to the viewport origin after the 90-degree rotation. */
#game-app.app-shell .board-frame{display:block;place-items:normal}
#game-app.app-shell .board{margin:0;right:auto;bottom:auto;left:0;top:0}


/* Rotate the entire game surface by 90 degrees. */
#game-app.app-shell .board-glow{display:none}
#game-app.app-shell .paths{inset:auto}
#game-app.app-shell:not([hidden]){inset:auto;left:100dvw;top:0;right:auto;bottom:auto;width:100dvh;height:100dvw;transform:rotate(90deg);transform-origin:0 0}
#game-app.app-shell .board{--board-width:min(100dvh,calc(100dvw * 17 / 9));inset:auto;left:0;bottom:0;top:auto;right:auto;width:var(--board-width);height:calc(var(--board-width) * 9 / 17);aspect-ratio:17/9;margin:0;gap:1px;min-width:0;min-height:0}

/* The rotated surface must not inherit the original portrait minimum height. */
#game-app.app-shell:not([hidden]){min-height:0;min-width:0}
#game-app.app-shell .tile{aspect-ratio:auto;transform:none;width:100%;height:100%;min-width:0;min-height:0}
#game-app.app-shell .tile:hover{transform:none}

/* Reserve a separate control strip beyond the board. */
#game-app.app-shell .board{--board-width:min(calc(100dvh - 76px),calc(100dvw * 17 / 9))}
#game-app.app-shell .mobile-controls{position:absolute;z-index:8;left:auto;right:0;top:0;bottom:0;width:72px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#game-app.app-shell .classic-actions{position:static;width:auto;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#game-app.app-shell .classic-home,#game-app.app-shell .classic-restart{position:static;min-height:40px;width:64px;padding:4px;font-size:11px}

/* Countdown strip below the landscape board, separate from the controls. */
#game-app.app-shell .board{--board-width:min(calc(100dvh - 76px),calc((100dvw - 30px) * 17 / 9));bottom:30px}
#game-app.app-shell .classic-status-row{display:grid;position:absolute;left:0;bottom:0;width:var(--timer-width,min(calc(100dvh - 76px),calc((100dvw - 30px) * 17 / 9)));height:28px;margin:0;padding:3px 5px;grid-template-columns:max-content minmax(0,1fr);gap:7px;border:0;background:transparent;font-size:12px}
#game-app.app-shell .classic-status-row .classic-remaining{display:none}
#game-app.app-shell .classic-meter .meter-cap,#game-app.app-shell .classic-meter .timer-track{height:16px}
#game-app.app-shell .classic-meter .meter-cap{flex-basis:16px}

/* Each map keeps its original occupied bounds, including maps with edge tiles. */
#game-app.app-shell{--board-cols:17;--board-rows:9;--map-width:min(calc(100dvh - 76px),calc((100dvw - 30px) * var(--board-cols) / var(--board-rows)))}
#game-app.app-shell .board{width:var(--map-width);height:calc(var(--map-width) * var(--board-rows) / var(--board-cols));aspect-ratio:auto}
#game-app.app-shell .classic-status-row{width:var(--map-width)}

/* Physical portrait status bar space, before the game surface rotates. */
:root{--phone-status-space:max(47px,env(safe-area-inset-top,0px))}
#game-app.app-shell:not([hidden]){top:var(--phone-status-space);width:calc(100dvh - var(--phone-status-space))}
#game-app.app-shell{--map-width:min(calc(100dvh - var(--phone-status-space) - 76px),calc((100dvw - 30px) * var(--board-cols) / var(--board-rows)))}
body:has(#game-app:not([hidden])){background:#3d557b}

/* Give the action strip more room beside the board. */
#game-app.app-shell{--map-width:min(calc(100dvh - var(--phone-status-space) - 108px),calc((100dvw - 30px) * var(--board-cols) / var(--board-rows)))}
#game-app.app-shell .mobile-controls{width:96px;padding:12px 8px;gap:20px}
#game-app.app-shell .classic-actions{gap:14px}
#game-app.app-shell .classic-home,#game-app.app-shell .classic-restart{width:80px;min-height:42px;padding:6px;font-size:12px}

/* Reduce the board as one proportional surface. */
#game-app.app-shell{--map-width:calc(min(calc(100dvh - var(--phone-status-space) - 108px),calc((100dvw - 30px) * var(--board-cols) / var(--board-rows))) * .89082)}

/* Keep the board and countdown together, close to the action strip. */
#game-app.app-shell .board,#game-app.app-shell .classic-status-row{left:auto;right:108px}

/* Touch devices should not retain hover brightness after a match. */
#game-app.app-shell .tile,#game-app.app-shell .tile:hover{filter:none;transition:opacity .16s linear;-webkit-tap-highlight-color:transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#game-app.app-shell .tile.clearing{pointer-events:none}

/* Lift only the board away from the countdown strip. */
#game-app.app-shell .board{bottom:42px}

/* The countdown and remaining count share the board's width and alignment. */
#game-app.app-shell .classic-status-row{grid-template-columns:max-content minmax(0,1fr) max-content;width:var(--map-width);gap:8px}
#game-app.app-shell .classic-status-row .classic-remaining{display:inline;white-space:nowrap;font-size:12px}
#game-app.app-shell .classic-status-row .classic-remaining b{font-size:12px}

/* Soft gradients are rasterized once; only composited opacity and scale animate. */
.smoke-effects{position:absolute;z-index:5;pointer-events:none;overflow:visible}
.smoke-cloud{position:absolute;display:block;width:44px;height:38px;margin:-19px 0 0 -22px;transform-origin:50% 50%;will-change:transform,opacity;animation:smoke-expand 1s ease-out both}
.smoke-cloud i{position:absolute;inset:0;display:block;background:radial-gradient(ellipse at 50% 58%,currentColor 0 16%,transparent 62%),radial-gradient(ellipse at 28% 53%,currentColor 0 12%,transparent 47%),radial-gradient(ellipse at 72% 45%,currentColor 0 12%,transparent 49%),radial-gradient(ellipse at 49% 29%,currentColor 0 12%,transparent 48%)}
.smoke-white{color:#fff;animation:smoke-white-fade 1s linear both}
.smoke-yellow{color:#ffde87;animation:smoke-yellow-fade 1s linear both}
@keyframes smoke-expand{0%{opacity:0;transform:scale(.35)}12%{opacity:.96}38%{opacity:.86;transform:scale(1.55)}72%{opacity:.52;transform:scale(2.15)}100%{opacity:0;transform:scale(2.65)}}
@keyframes smoke-white-fade{0%,12%{opacity:1}72%,100%{opacity:0}}
@keyframes smoke-yellow-fade{0%,12%{opacity:0}72%,100%{opacity:1}}

.music-toggle{width:80px;min-height:40px;padding:6px;border:1px solid #a6c1df;border-radius:8px;background:linear-gradient(145deg,#6c9bcc,#3e6192 65%,#294b79);box-shadow:inset 0 1px 2px #fff9,0 2px 3px #152f52;color:#fff;font:700 12px sans-serif;cursor:pointer;touch-action:manipulation}
.music-toggle[aria-pressed="false"]{color:#b7c8db;background:#324b6c}

.home-multi{display:block;margin:16px auto 0;min-height:48px;width:min(100%,300px);border:2px solid #b6d9f5;border-radius:14px;background:linear-gradient(#78b9e6,#3b79b3);box-shadow:0 3px 0 #203e64;color:#fff;font-size:18px;font-weight:800;cursor:pointer}
.home-multi span{margin-left:12px}
.room-card{width:min(100%,430px);text-align:left}
.room-card label{display:block;margin:16px 0 7px;font-size:14px;color:#eaf2ff}
.room-card label small{display:block;color:#b9cde3;font-size:11px;margin-top:5px}
.room-card input,.room-card select{width:100%;min-height:46px;border:1px solid #a6c1df;border-radius:8px;padding:10px;background:#263f63;color:#fff;font-size:16px}
.room-card .home-start{margin:8px auto 0;font-size:19px;min-height:52px}
.room-error{color:#ffcfb9;font-size:13px;min-height:18px}
.room-note{font-size:12px;line-height:1.6;color:#bfcee1;text-align:center}
#game-app.app-shell .race-status{width:86px;text-align:center;font-size:11px;line-height:1.6;color:#ffebae}
#game-app.app-shell.race-mode .mobile-controls{gap:10px}
#game-app.app-shell.race-mode .classic-actions{flex-direction:row;gap:5px}
#game-app.app-shell.race-mode .classic-home,#game-app.app-shell.race-mode .classic-restart{min-height:36px}
#game-app.app-shell.race-mode .result-card{max-width:90%;padding:15px 22px}
#game-app.app-shell.race-mode .result-card h2{font-size:22px}
#game-app.app-shell.race-mode .mobile-controls{z-index:12}
#game-app.app-shell.race-mode .result-overlay{right:104px}
#race-status{white-space:pre-line}