@import"https://fonts.googleapis.com/css2?family=Great+Vibes&family=Allura&display=swap";*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#0f141a;color:#cfd6df;font-family:ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;overflow:hidden}#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}.overlay{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;pointer-events:none}.hud-left{padding:max(12px,env(safe-area-inset-top)) 16px 0 16px}.hud-right{padding:max(12px,env(safe-area-inset-top)) 16px 0 16px;justify-self:end}.hud-bottom{grid-column:1 / span 2;grid-row:3;padding:0 16px max(12px,env(safe-area-inset-bottom)) 16px;text-align:center}.hud-gold{position:absolute;right:16px;bottom:max(12px,env(safe-area-inset-bottom))}.hud-coordinates{position:absolute;left:16px;bottom:max(12px,env(safe-area-inset-bottom))}.hud-coordinates.warn{color:#ffce5c}.hud-length{margin:0 auto 8px}.lb-only #score,.lb-only #rank{display:none}.chip{display:inline-block;background:#0c10168c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:8px 12px;margin-right:8px;font-weight:700;letter-spacing:.2px}.leaderboard{background:#0c10168c;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;min-width:190px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:Nunito,ui-rounded,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}.lb-title{font-weight:800;margin-bottom:8px;color:#dfe7f3;text-shadow:0 1px 0 #000}#leaderboard-global,#leaderboard-nearby{padding:0 0 0 20px;margin:0;list-style:decimal-leading-zero;max-height:min(40vh,380px);overflow:hidden}#leaderboard-global li,#leaderboard-nearby li{padding:3px 0;font-weight:700;letter-spacing:.2px;text-shadow:0 1px 0 rgba(0,0,0,.35)}#leaderboard-global li.rank-1,#leaderboard-nearby li.rank-1{color:#ffd76a}#leaderboard-global li.rank-2,#leaderboard-nearby li.rank-2{color:#c9d6ff}#leaderboard-global li.rank-3,#leaderboard-nearby li.rank-3{color:#ffb36a}#leaderboard-global li.rank-4,#leaderboard-nearby li.rank-4{color:#7fe0a3}#leaderboard-global li.rank-5,#leaderboard-nearby li.rank-5{color:#9bb7ff}#leaderboard-global li.rank-6,#leaderboard-nearby li.rank-6{color:#d9a7ff}#leaderboard-global li.rank-7,#leaderboard-nearby li.rank-7{color:#79e46a}#leaderboard-global li.rank-8,#leaderboard-nearby li.rank-8{color:#ffa3b1}#leaderboard-global li.rank-9,#leaderboard-nearby li.rank-9{color:#f0d96a}#leaderboard-global li.rank-10,#leaderboard-nearby li.rank-10{color:#9fe7f1}#leaderboard-global li.me,#leaderboard-nearby li.me{border-left:4px solid rgba(255,106,122,.9);padding-left:6px}.help{display:inline-block;background:#0c10168c;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:8px 12px;font-size:.9rem;opacity:.95}kbd{background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;border-radius:6px;padding:2px 6px}.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.blur-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0000004d}#snakeDesign.designer-overlay{position:fixed;inset:0;pointer-events:all;background:#0a0e16}.designer-grid{display:grid;width:100%;height:100%;grid-template-columns:200px 1fr 200px;grid-template-rows:1fr 180px;grid-template-areas:"left preview right" "bottom bottom bottom"}.design-left{grid-area:left;display:flex;flex-direction:column;gap:12px;padding:16px;pointer-events:auto;background:#0a0e16e6}.design-right{grid-area:right;display:flex;flex-direction:column;gap:12px;padding:16px;pointer-events:auto;background:#0a0e16e6}.design-bottom{grid-area:bottom;display:flex;flex-wrap:wrap;gap:12px;padding:8px 16px;pointer-events:auto;background:#0a0e16e6}.design-title{font-weight:700;font-size:18px}.panel-title{font-weight:600;margin-bottom:8px}#designCanvas{grid-area:preview;width:600px;height:600px;background:#0a0e16;justify-self:center;align-self:center}@media (max-width: 700px){.designer-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;grid-template-areas:"right" "preview" "bottom" "left"}.design-left,.design-right{flex-direction:row;justify-content:center}.design-bottom{justify-content:center}}.card{pointer-events:auto;background:linear-gradient(180deg,#151b22d1,#0a0c10d1);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:24px;width:min(540px,94vw);text-align:center;box-shadow:0 10px 40px #00000073}.logo{font-size:clamp(36px,7vw,70px);font-weight:900;-webkit-user-select:none;user-select:none}.logo .brand-1{background:linear-gradient(90deg,#8de45b,#4dc87d);-webkit-background-clip:text;background-clip:text;color:transparent}.logo .brand-dot{color:#a57cff;text-shadow:0 0 12px rgba(165,124,255,.35)}.logo .brand-2{background:linear-gradient(90deg,#a57cff,#5b7bff);-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:6px 0 14px;opacity:.9}.name-row{display:grid;grid-template-columns:1fr auto;gap:8px}input#playerName{outline:none;border:1px solid rgba(255,255,255,.12);background:#3b3859;color:#fff;padding:12px 14px;font-size:16px;border-radius:12px}.btn{border:none;border-radius:14px;padding:10px 18px;font-weight:800;font-size:16px;color:#102016;background:linear-gradient(180deg,#83e065,#2fae58);box-shadow:0 6px #127527,0 0 18px #30be6259 inset;cursor:pointer}.btn:active{transform:translateY(2px);box-shadow:0 4px #127527}.hint{margin-top:8px;font-size:12px;opacity:.8}.mode-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}#snakeDesign canvas{display:block;margin:0 auto}#snakeDesign canvas.debug-outline{outline:2px dashed red;animation:debug-blink 1s steps(2,start) infinite}.mode-label{opacity:.85;font-size:14px}.mode-switch{display:inline-flex;gap:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);padding:6px;border-radius:12px}.mode-switch input[type=text]{border:1px solid rgba(255,255,255,.12);background:#3b3859;color:#fff;padding:4px 6px;border-radius:8px;width:140px}.mode-btn{border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:800;font-size:14px;color:#dfe7f3;background:transparent}.mode-btn.active{color:#0f1a12;background:linear-gradient(180deg,#9bf27a,#3cbc6b);box-shadow:0 3px #15823a inset}.carousel-field{display:flex;flex-direction:column;gap:4px;align-items:center}.carousel-label{opacity:.85;font-size:14px}.carousel{display:flex;gap:6px;overflow-x:auto;padding:6px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:12px}.carousel-item{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:#0c10168c;color:#fff;cursor:pointer}.carousel-item.selected{outline:2px solid #9bf27a;outline-offset:2px}@media (max-width: 640px){.leaderboard{min-width:150px;font-size:.95rem}.help{font-size:.85rem}}.toast-container{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:9999}.toast{padding:10px 14px;background:#12161cc7;border:1px solid rgba(255,255,255,.08);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9f1ff;font-weight:800;letter-spacing:.2px;text-shadow:0 1px 0 #000;box-shadow:0 8px 30px #00000059;transform:translateY(16px);opacity:0;animation:toast-in .18s ease-out forwards,toast-out .3s ease-in forwards 2.4s}.toast.success{border-color:#44f59d80}.toast.warn{border-color:#ffce5c99}.toast.error{border-color:#ff787899}@keyframes toast-in{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toast-out{0%{opacity:1}to{opacity:0}}#minimap{position:fixed;left:12px;top:12px;width:180px;height:120px;background:#121820;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 8px 22px #00000059;pointer-events:auto;cursor:pointer;z-index:20}@media (max-width: 640px){#minimap{width:140px;height:96px;left:8px;top:8px}}#handwrite-root{position:fixed;inset:0;display:grid;place-items:start center;pointer-events:none;z-index:9999}.handwrite-svg{width:min(88vw,920px);height:auto}@media (max-width: 480px){.handwrite-svg{width:94vw}}.netstatus-wrap{pointer-events:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";font-size:13px;margin-top:8px}.netstatus-fixed{position:fixed;z-index:1000;margin-top:0}.netstatus-fixed.top-right{top:16px;right:16px}.netstatus-fixed.top-left{top:16px;left:16px}.netstatus-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:#0a0c14a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px #00000040;color:#e7ebf3;line-height:18px}.netstatus-pill .netstatus-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#888;box-shadow:0 0 0 2px #ffffff1a inset}.netstatus-pill[data-status=online] .netstatus-dot{background:#2ecc71}.netstatus-pill[data-status=connecting] .netstatus-dot{background:#f1c40f}.netstatus-pill[data-status=offline] .netstatus-dot{background:#e74c3c}.netstatus-pill[data-status=disabled] .netstatus-dot{background:#95a5a6}.netstatus-pill[data-status=degraded] .netstatus-dot{background:#f39c12}.netstatus-toast{pointer-events:none;position:fixed;left:50%;bottom:42px;transform:translate(-50%) translateY(12px);opacity:0;transition:all .25s ease;padding:8px 14px;border-radius:10px;background:#14161ed9;color:#fff;box-shadow:0 6px 24px #00000059;max-width:min(80vw,560px);text-align:center;white-space:nowrap}.netstatus-toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (prefers-reduced-transparency: reduce){.netstatus-pill{background:#111a}.netstatus-toast{background:#111}}.designer-overlay .carousel-item{width:48px;height:48px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;cursor:pointer}.designer-overlay .carousel-item.selected,.designer-overlay .carousel-item:focus{outline:3px solid #ff0;outline-offset:2px;background-color:#ffff001a}.designer-overlay .carousel-label{display:block;margin-bottom:4px;font-size:14px}.designer-overlay .preset-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.designer-overlay .preset-btn{width:32px;height:32px;border:1px solid #333;cursor:pointer}.designer-overlay{position:fixed;inset:0;z-index:10000;padding:12px;pointer-events:all;background:#0a0e16}.designer-grid{display:grid;grid-template-columns:240px 600px 320px;grid-template-rows:600px auto;gap:12px;height:100%}.hidden{display:none!important}.design-left,.design-right{background:#0a0c1499;border-radius:12px;padding:12px;overflow:auto}#designCanvas{grid-column:2;grid-row:1;width:600px;height:600px;background:#0a0e16;border-radius:12px;justify-self:center;align-self:center}@media (max-width: 720px){#designCanvas{width:92vw;height:92vw;max-width:600px;max-height:600px}}#designCanvas.debug-outline{outline:2px dashed red;animation:debug-blink 1s steps(2,start) infinite}@keyframes debug-blink{50%{opacity:0}}.design-left{grid-column:1;grid-row:1 / span 2}.design-right{grid-column:3;grid-row:1}.design-bottom{grid-column:1 / -1;grid-row:2;background:#0a0c1499;border-radius:12px;padding:12px;overflow:auto}.debug-overlay{position:fixed;left:4px;top:4px;background:#0009;color:#0f0;font:14px monospace;margin:0;padding:2px 4px;z-index:10000;pointer-events:none}.debug-click-overlay{top:auto;bottom:4px;max-height:40vh;overflow-y:auto}.debug-overlay .debug-cyan{color:#0ff}.debug-overlay .debug-green{color:#0f0}.debug-overlay .debug-yellow{color:#ff0}.debug-overlay .debug-magenta{color:#f0f}.debug-overlay .debug-orange{color:#f90}.debug-overlay .debug-red{color:red}:root{--focus-ring: #0ea5e9}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}button,.btn,.preset-btn,.carousel-item,[role=button]{min-width:44px;min-height:44px}.carousel[role=radiogroup] .carousel-item{border-radius:8px}.carousel-item.selected{box-shadow:0 0 0 2px var(--focus-ring) inset}