:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f3f4f5;background:#141d2d;font-synthesis:none;--muted:#8994a7;--mint:#73e2b0;--line:#ffffff13}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 20% 48%,#23364a60,transparent 60%),#141d2d}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{transition:background .18s,transform .18s}button:enabled:hover{filter:brightness(1.13)}button:enabled:active{transform:translateY(1px)}#app{max-width:1600px;margin:auto;padding:0 5vw;min-height:100svh;display:flex;flex-direction:column}.topbar{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{color:#fff;text-decoration:none;font-size:30px;font-weight:800;letter-spacing:-1.5px;display:flex;align-items:center}.brand>span:not(.brand-mark){color:var(--mint)}.brand small{font-size:10px;letter-spacing:1px;background:#ffffff0b;border:1px solid #ffffff15;padding:5px 6px;border-radius:6px;margin-left:10px;color:#9aaabc}.brand-mark{width:33px;height:32px;display:block;position:relative;margin-right:13px}.brand-mark i{position:absolute;width:27px;height:9px;background:var(--mint);border-radius:8px;left:0;top:1px}.brand-mark i:nth-child(2){width:9px;height:25px;top:1px;left:18px}.brand-mark i:nth-child(3){width:27px;top:22px;left:0}.brand-mark:after{content:"";width:3px;height:3px;background:#19382d;position:absolute;top:4px;left:5px;border-radius:50%}.top-note{color:#8394a7;font-size:10px;font-weight:600;letter-spacing:2px}.live-dot,.save-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:9px;vertical-align:middle}.top-actions{display:flex;gap:9px}.icon-button{width:37px;height:37px;border:1px solid #ffffff15;background:#ffffff03;border-radius:50%;font-size:18px;color:#b7c3d2}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:5vw;align-items:center;flex:1;padding:36px 0 30px;min-height:660px}.play-area{min-width:0;align-self:stretch;display:flex;flex-direction:column;position:relative}.board-top,.board-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.board-top{padding:5px 3px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#92a0b3;font-weight:650}#board-size{font-size:10px;letter-spacing:1.6px;color:#6f8098}#scene-wrap{position:relative;flex:1;min-height:390px;width:100%}#scene{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:crosshair}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.tile-label{position:absolute;transform:translate(-50%,-50%);color:#173a35;font-size:21px;font-weight:800;line-height:1;text-shadow:0 1px #ffffff40;user-select:none}.tile-label .little-eye{font-size:8px;position:absolute;top:-8px;left:3px;letter-spacing:6px}.board-bottom{justify-content:flex-start;min-height:62px;padding:8px 3px}.drag-icon{border:1px solid #ffffff15;border-radius:10px;color:var(--mint);width:34px;height:34px;display:grid;place-items:center;font-size:23px;flex-shrink:0}.board-bottom p{color:#a1afc0;font-size:12px;line-height:1.7;margin:0}.board-bottom b{color:#d8e1e7}.keyboard-hint{margin-left:auto;font-size:8px;letter-spacing:1px;color:#5f7189;white-space:nowrap}.level-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.level-heading .eyebrow{font-size:8px;letter-spacing:1.3px}.text-button{background:none;border:0;color:#a1afc0;font-size:11px;padding:0}.text-button span{margin-left:8px;color:var(--mint)}.level-number{font-size:43px;font-weight:750;letter-spacing:-1.8px;margin-top:20px;line-height:1.1}.level-total{font-weight:400;font-size:17px;color:#63728b;letter-spacing:0;margin-left:10px}h1{font-size:15px;color:#a7b3c4;font-weight:400;margin:11px 0 17px}.pills{display:flex;gap:7px;flex-wrap:wrap}.pills span{padding:5px 8px;border:1px solid #ffffff10;border-radius:5px;font-size:9px;color:#8e9fb4}.pills span:first-child{background:#73e2b011;color:var(--mint);border-color:#73e2b020}.progress-heading{margin-top:31px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#7c8da5}.progress-heading strong{font-size:11px;color:var(--mint);letter-spacing:0}.progress-track{height:4px;background:#ffffff0a;border-radius:4px;margin:10px 0 19px;overflow:hidden}#progress-fill{height:100%;background:var(--mint);transition:width .2s;width:0}#snake-list{display:grid;gap:9px}.snake-row{display:flex;align-items:center;gap:13px;border:1px solid #ffffff0b;background:#ffffff03;border-radius:12px;padding:13px 15px;transition:border-color .2s}.snake-row.complete{border-color:color-mix(in srgb,var(--snake),transparent 65%);background:color-mix(in srgb,var(--snake),transparent 96%)}.snake-swatch{width:31px;height:31px;background:var(--snake);border-radius:10px;position:relative;box-shadow:inset 0 -3px #00000015}.snake-swatch:before,.snake-swatch:after{content:"";position:absolute;top:10px;left:9px;width:3px;height:4px;background:#253946;border-radius:3px}.snake-swatch:after{left:19px}.snake-info{flex:1}.snake-name{font-size:11px;font-weight:600;color:#d4dce7}.snake-sub{color:#6f829b;font-size:9px;margin-top:4px}.snake-length{font-size:16px;font-weight:600;color:var(--snake);font-variant-numeric:tabular-nums}.snake-length small{font-size:10px;color:#728198;font-weight:400}.rule-card{display:flex;gap:13px;margin:20px 0;padding:16px;background:#1c293c;border:1px solid #ffffff05;border-radius:12px}.rule-icon{font-size:30px;color:#a6b5cc;line-height:1}.rule-card strong{font-size:11px;font-weight:600}.rule-card p{font-size:10px;line-height:1.8;color:#91a0b5;margin:6px 0 0}.rule-card b{color:#bdc9d7}.controls{display:flex;gap:9px}.controls button{width:50%;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #ffffff12;background:#ffffff04;height:43px;border-radius:9px;font-size:11px;color:#bdc9db}.controls button>span{font-size:20px;color:#8c9cb1}kbd{font:9px inherit;border:1px solid #ffffff12;border-radius:3px;padding:2px 4px;margin-left:8px;color:#728298}.hint-button{border:1px solid #73e2b02a;border-radius:9px;background:#73e2b00a;display:flex;align-items:center;gap:10px;width:100%;height:42px;margin-top:9px;padding:0 15px;color:var(--mint);font-size:11px}.hint-button>span:first-child{font-size:18px}.hint-arrow{margin-left:auto}.sidebar-footer{margin-top:17px;display:flex;justify-content:space-between;color:#63768e;font-size:9px}.sidebar-footer .save-dot{width:4px;height:4px;background:#617e75;margin-right:4px}.footer{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;font-size:9px;color:#63758c;letter-spacing:1px}.footer span:nth-child(2){font-family:Georgia,serif;font-style:italic;font-size:13px;color:#7f90a7;letter-spacing:0}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:#26364a;border:1px solid #ffffff22;color:#e0e9ec;padding:12px 20px;border-radius:12px;box-shadow:0 10px 40px #0005;font-size:12px;text-align:center;z-index:10;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}#board-loading{position:absolute;left:0;right:0;top:45%;text-align:center;color:#a2b9c5;font-size:13px}dialog{color:#eaf0f2;background:#1b293b;border:1px solid #ffffff20;border-radius:23px;padding:40px;width:min(540px,92vw);max-height:85svh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#0c1423b8;backdrop-filter:blur(8px)}#close-modal{position:absolute;right:15px;top:12px;border:0;background:none;color:#91a2ba;font-size:26px}dialog h2{font-size:29px;letter-spacing:-1px;margin:15px 0 12px}dialog p{color:#a5b5c8;font-size:13px;line-height:1.8}dialog .eyebrow{color:var(--mint)}.primary{width:100%;padding:15px;border:0;border-radius:10px;background:var(--mint);color:#173b31;font-weight:700;margin-top:17px}.secondary{width:100%;padding:10px;background:none;border:0;color:#8fa4be;font-size:12px;margin-top:6px}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:20px}.level-grid button{border:1px solid #ffffff12;background:#ffffff05;border-radius:9px;aspect-ratio:1;font-size:13px}.level-grid button.done{color:var(--mint);background:#73e2b00c}.level-grid button.current{border-color:var(--mint)}.win-emblem{width:75px;height:75px;display:grid;place-items:center;border-radius:23px;background:#73e2b013;border:1px solid #73e2b044;font-size:35px;color:var(--mint);margin:0 auto 22px}.win{text-align:center}.win-stats{display:flex;gap:15px;justify-content:center;margin:23px 0}.win-stats>div{padding:15px 20px;background:#ffffff04;border-radius:10px;font-size:24px}.win-stats small{display:block;font-size:9px;color:#8d9db4;margin-top:5px;letter-spacing:1px}.help-step{display:flex;gap:15px;align-items:flex-start;margin:20px 0}.help-step>span{color:var(--mint);background:#73e2b012;border-radius:9px;padding:9px 12px}.help-step p{margin:0}.help-keys{border-top:1px solid var(--line);padding-top:15px;font-size:11px!important}
@media(min-width:1500px){.game-layout{gap:90px;grid-template-columns:minmax(0,1fr) 360px}.level-number{font-size:49px}}
@media(max-width:1050px){#app{padding:0 4vw}.game-layout{gap:30px;grid-template-columns:minmax(0,1fr) 300px}.top-note{display:none}.keyboard-hint{display:none}.eyebrow{font-size:8px;letter-spacing:1px}}
@media(max-width:760px){#app{padding:0 20px}.topbar{height:76px}.brand{font-size:26px}.top-actions{gap:7px}.icon-button{width:33px;height:33px}.game-layout{display:flex;flex-direction:column;padding:22px 0;gap:24px;min-height:0}.play-area{width:100%;height:min(65vh,510px);min-height:330px}#scene-wrap{min-height:240px}.board-top{padding:0}.board-bottom{min-height:48px}.sidebar{width:100%;max-width:510px;display:block}.level-number{font-size:34px;margin-top:14px}.level-heading .eyebrow{font-size:9px}h1{margin:8px 0 12px}.progress-heading{margin-top:22px}#snake-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.snake-row{padding:10px;gap:9px}.snake-swatch{height:28px;width:28px}.snake-length{font-size:14px}.snake-sub{font-size:8px}.rule-card{margin:16px 0}.footer{font-size:7px;letter-spacing:.5px}.footer span:nth-child(2){display:none}.tile-label{font-size:18px}dialog{padding:32px 25px}.level-grid{gap:6px}.board-bottom p{font-size:11px}}
@media(max-height:700px) and (min-width:761px){.topbar{height:76px}.game-layout{padding:22px 0;min-height:550px}.rule-card{margin:14px 0}.level-number{margin-top:12px}.progress-heading{margin-top:20px}.snake-row{padding:10px 13px}.footer{padding:15px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}