/* The play surface: a physical puzzle tray inside a compact arcade HUD. */
:root{--mint:#83f3bb;--line:#a8b9ff1c;background:#111a30;color:#f2f4ff;font-family:"Trebuchet MS","Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 24% 10%,#303c6455,transparent 50%),radial-gradient(ellipse at 80% 90%,#1c485955,transparent 50%),#111a30;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle,#b8d5ff70 1px,transparent 1.5px),radial-gradient(circle,#92e4d330 1px,transparent 1.5px);background-size:157px 157px,237px 237px;background-position:23px 67px,111px 14px}
#app{position:relative;max-width:1560px;padding:0 3.6vw}
.topbar{height:88px;border:0;flex-shrink:0}
.brand{font-size:32px;text-transform:uppercase;letter-spacing:-1.2px;font-weight:900;filter:drop-shadow(0 3px 0 #080f26)}
.brand small{font-size:8px;letter-spacing:1.4px;margin-left:14px;padding:7px 9px;background:#ffffff08;color:#9bafce;border-color:#a3b8ec20}
.brand-mark{margin-right:14px;transform:rotate(-8deg);filter:drop-shadow(0 3px 0 #0a574b)}
.top-note{color:#a0b7d7;font-size:10px;letter-spacing:1.6px}
.icon-button{background:linear-gradient(#2d3e5c,#21314d);border:1px solid #8ba9e538;box-shadow:0 4px 0 #0c1529,inset 0 1px #ffffff15;color:#d9e7ff;width:39px;height:38px;border-radius:12px;font-size:20px}
.icon-button:active{transform:translateY(3px);box-shadow:0 1px 0 #0c1529}
.game-layout{grid-template-columns:minmax(0,1fr) 304px;gap:26px;min-height:610px;padding:10px 0 20px;align-items:stretch}
.play-area{border:1px solid #a4b9e925;border-radius:28px;padding:22px 23px 13px;box-shadow:0 14px 50px #030a202f,inset 0 1px #d5e6ff0c;background:radial-gradient(ellipse at 50% 42%,#344f714d,transparent 65%),linear-gradient(145deg,#20304b88,#152137cc);overflow:hidden}
.board-top{position:relative;z-index:1;padding:0 2px;flex-shrink:0}
.world-badge{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.5px;color:#d6e2f7;font-weight:bold}
.world-badge>span{display:grid;place-items:center;width:27px;height:27px;color:#ffe3a1;background:#eac27813;border:1px solid #eac27830;border-radius:9px;font-size:17px}
#board-size{color:#849ebf;font-size:9px;letter-spacing:1.2px}
#scene-wrap{min-height:390px;isolation:isolate}
.stage-orbit{position:absolute;inset:16% 3% 11%;border:1px solid #6eddb80b;border-radius:50%;transform:rotate(-14deg);pointer-events:none;z-index:-1;box-shadow:0 0 0 35px #b1d8f803,0 0 0 70px #b1d8f802;background:radial-gradient(ellipse,#4cb8a114,transparent 68%)}
#scene{z-index:1}
#scene:focus-visible{outline:2px solid #83f3bb55;outline-offset:0;border-radius:18px}
#labels{z-index:2}
.tile-label{display:grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .18em;font-family:"Trebuchet MS",sans-serif;font-weight:900;line-height:1;background:#16263eee;border:1px solid color-mix(in srgb,var(--label-color),transparent 35%);border-radius:35%;color:var(--label-color)!important;box-shadow:0 2px 4px #0004,inset 0 1px #ffffff20;text-shadow:none;transition:background .2s,box-shadow .2s}
.tile-label.connected{background:var(--label-color);color:#142c32!important;border-color:#ffffff60;box-shadow:0 0 12px color-mix(in srgb,var(--label-color),transparent 70%)}
.connection-status{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;z-index:3;border:1px solid #a7d0ff18;background:#132039b0;border-radius:30px;padding:10px 17px;box-shadow:0 5px 12px #08132330}
#connection-stars{font-size:18px;color:#f6d78d;letter-spacing:5px;line-height:1}
#connection-count{font-size:10px;font-weight:500;color:#b3c6de}
.board-bottom{position:relative;z-index:2;border-top:1px solid #b2c4f212;min-height:58px;margin-top:17px;padding:8px 1px}
.drag-icon{border-color:#b1cfff20;background:#7cacda0b;color:#a8e7d5;border-radius:10px}
.board-bottom p{font-size:11px;color:#a7bdd7}.board-bottom b{color:#e1efff}.keyboard-hint{font-size:7px;color:#6f8bac;letter-spacing:.7px}
.sidebar{background:linear-gradient(160deg,#2b3a5680,#1b2941c9);border:1px solid #b5caff24;border-radius:24px;padding:24px 22px;box-shadow:0 10px 30px #050d1f30,inset 0 1px #ffffff09;align-self:center}
.level-heading .eyebrow{font-size:8px;letter-spacing:1px;color:#92a9c8}.text-button{background:#101f3566;padding:7px 9px;border:1px solid #90b3df20;border-radius:8px;font-size:10px;color:#c7d7ed}.text-button span{margin-left:5px}
.level-number{font-size:42px;letter-spacing:-1px;font-weight:900;margin-top:19px;text-shadow:0 4px 0 #0c172b60}.level-number>span:first-child{color:#f8dc93}.level-total{color:#7f95b4;font-size:15px}
h1{font-size:13px;color:#aabfda;margin:10px 0 15px}
.pills{gap:5px}.pills span{font-size:9px;color:#a8bedb;border-color:#adc5f317;background:#10213b40;padding:5px 7px;border-radius:7px}.pills span:first-child{background:#83f3bb14;border-color:#83f3bb35}
.progress-heading{margin-top:24px;color:#91a7c6;font-size:8px;letter-spacing:1.2px}.progress-heading strong{font-size:12px}.progress-track{height:7px;background:#0a152a8c;box-shadow:inset 0 2px 4px #060b1a50;border:1px solid #ffffff09;border-radius:5px;margin:9px 0 18px}#progress-fill{background:linear-gradient(90deg,#46bca4,#a4ffc4);box-shadow:0 0 10px #70efb64d;border-radius:5px}
#snake-list{gap:9px}.snake-row{padding:12px 11px;border-radius:13px;background:linear-gradient(120deg,#384b695c,#1e304d80);border:1px solid #a7c3ed1c;box-shadow:0 3px 0 #0e1b3066;gap:11px;position:relative;overflow:hidden}
.snake-row:before{content:"";width:3px;position:absolute;left:0;top:12px;bottom:12px;background:var(--snake);border-radius:3px;opacity:.7}
.snake-row.complete{background:linear-gradient(120deg,color-mix(in srgb,var(--snake),transparent 88%),#1c2d46);border-color:color-mix(in srgb,var(--snake),transparent 60%)}
.snake-row.active{border-color:var(--snake);box-shadow:0 0 18px color-mix(in srgb,var(--snake),transparent 90%)}
.snake-swatch{width:36px;height:33px;border-radius:44% 44% 40% 40%;background:radial-gradient(ellipse at 35% 22%,#ffffff50,transparent 60%),var(--snake);box-shadow:inset 0 -4px #0002,0 3px 5px #06162a55;flex-shrink:0}
.snake-swatch:before,.snake-swatch:after{width:7px;height:8px;border:2px solid #ffffee;background:#172d3e;border-radius:50%;box-sizing:border-box;top:9px;left:8px}.snake-swatch:after{left:21px}.snake-name{font-size:12px;color:#e0eafa}.snake-sub{font-size:9px;color:#8da6c8}.snake-length{font-size:20px;font-weight:bold}.snake-length small{font-size:11px;color:#8ea4c3}
.rule-card{background:#0b1c344d;border:1px solid #aac9ef12;margin:19px 0 17px;padding:12px;gap:11px;border-radius:12px}.rule-icon{color:#8ba9ce;font-size:26px}.rule-card strong{font-size:11px;color:#ccdcf1}.rule-card p{font-size:10px;color:#8fa8c9;line-height:1.7;margin-top:5px}
.controls{gap:10px}.controls button{height:43px;border:1px solid #8eacd333;background:linear-gradient(#364b6a,#293b59);box-shadow:0 4px 0 #0f1d34,inset 0 1px #d2e7ff15;border-radius:11px;color:#dae8ff;font-size:11px}.controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #0f1d34}.controls button>span{color:#b6d0f5}.controls kbd{display:none}
.hint-button{height:45px;margin-top:15px;background:linear-gradient(#f8dc91,#dfb666);border:1px solid #ffe8ae;box-shadow:0 4px 0 #856c3a,0 6px 14px #0002,inset 0 1px #fff6;border-radius:11px;color:#4e3e23;font-size:12px;font-weight:bold}.hint-button:active{transform:translateY(3px);box-shadow:0 1px 0 #856c3a}.hint-button>span:first-child{font-size:21px;color:#755624}
.sidebar-footer{margin-top:21px;color:#829ab9;font-size:8px}.sidebar-footer .save-dot{background:#80c5a7}
.footer{border:0;padding:8px 0 20px;font-size:8px;color:#6e87a8;letter-spacing:1px}.footer span:nth-child(2){color:#8299b9;font-family:inherit;font-style:normal;font-size:10px}
dialog{background:radial-gradient(ellipse at 50% 0,#35557e,#1d2d48 65%);border:1px solid #c2d9ff40;box-shadow:0 25px 100px #040c228c,inset 0 1px #fff1;border-radius:27px}
dialog h2{font-weight:900;text-shadow:0 3px #0a142333}.primary{background:linear-gradient(#9bf4c5,#62d3a2);border:1px solid #bbffdc;box-shadow:0 5px 0 #2c775e;font-weight:bold;color:#183c34;border-radius:12px}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #2c775e}
.win-emblem{color:#ffe2a4;background:radial-gradient(circle,#f8db8d26,#c7a76d08);border-color:#ffe2a444;font-size:46px;box-shadow:0 0 45px #ffe2a414;transform:rotate(-7deg)}.win-stats>div{border:1px solid #9cbff91a;background:#11203950}.level-grid button{background:linear-gradient(#34496a,#253652);box-shadow:0 3px 0 #0c1930;border:1px solid #a8c0e530;font-weight:bold}.level-grid button.done{background:linear-gradient(#355d5b,#254744)}
#toast{background:#243c5a;border:1px solid #93e8c955;box-shadow:0 10px 30px #0004;color:#e4fff2;font-weight:bold;font-size:13px}
@media(min-width:1500px){.game-layout{gap:32px;grid-template-columns:minmax(0,1fr) 330px}.sidebar{padding:28px}.level-number{font-size:46px}}
@media(max-width:1050px){#app{padding:0 22px}.game-layout{gap:18px;grid-template-columns:minmax(0,1fr) 280px}.play-area{padding:18px 15px 10px}.sidebar{padding:21px 18px}.brand small{display:none}.topbar{height:80px}.keyboard-hint{display:none}.world-badge{font-size:8px;letter-spacing:1px}}
@media(max-width:760px){#app{padding:0 13px}.topbar{height:74px}.brand{font-size:25px}.brand-mark{transform:scale(.85) rotate(-8deg);margin-right:8px}.icon-button{width:34px;height:34px;font-size:18px}.game-layout{padding:0 0 16px;gap:15px;min-height:0}.play-area{height:470px;min-height:365px;max-height:65svh;border-radius:22px;padding:15px 10px 7px}.board-top{padding:0 6px}.world-badge{font-size:8px;letter-spacing:1px}.world-badge>span{width:23px;height:23px}.board-top #board-size{font-size:8px}#scene-wrap{min-height:245px}.connection-status{padding:7px 12px;gap:8px;bottom:0}#connection-stars{font-size:15px;letter-spacing:3px}#connection-count{font-size:9px}.board-bottom{margin-top:11px;min-height:45px;padding:5px 6px}.board-bottom p{font-size:10px}.drag-icon{width:27px;height:27px;font-size:20px}.sidebar{max-width:none;width:100%;border-radius:22px;padding:19px}.level-number{font-size:34px;margin-top:11px}.level-heading .eyebrow{font-size:9px}h1{font-size:12px;margin:8px 0 12px}.progress-heading{margin-top:19px}#snake-list{gap:9px}.snake-row{padding:10px;gap:10px}.snake-swatch{width:31px;height:30px}.snake-swatch:after{left:18px}.snake-length{font-size:17px}.snake-sub{font-size:8px}.rule-card{margin:15px 0}.footer{padding:4px 3px 20px;font-size:6px;letter-spacing:.4px}.sidebar-footer{font-size:9px}}
@media(max-width:375px){.snake-row{gap:7px;padding:9px}.snake-swatch{width:26px;height:27px}.snake-swatch:before{left:5px}.snake-swatch:after{left:16px}.snake-name{font-size:10px}.snake-length{font-size:15px}.board-top #board-size{letter-spacing:0}}
@media(max-height:740px) and (min-width:761px){.topbar{height:67px}.game-layout{min-height:560px;padding-top:0}.sidebar{padding:18px}.level-number{font-size:35px;margin-top:12px}.rule-card{margin:12px 0}.snake-row{padding:9px 11px}.progress-heading{margin-top:17px}.sidebar-footer{margin-top:17px}}