@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;800&display=swap";:root{--bg1:#d8eeff;--bg2:#a6d0ff;--panel:#ffffff94;--panel-strong:#ffffffd1;--text:#17334f;--sub:#4b6c8e;--blue:#4f8ff7;--blue-deep:#2f69d7;--orange:#ffae2d;--green:#22c55e;--yellow:#f7b731;--red:#ef4444}*{box-sizing:border-box}body{min-height:100svh;color:var(--text);background:radial-gradient(circle at 18% 22%, #ffffffe6, transparent 38%), radial-gradient(circle at 88% 86%, #ffffff7a, transparent 42%), linear-gradient(135deg, var(--bg1), var(--bg2));margin:0;font-family:Noto Sans TC,sans-serif}#app{min-height:100svh}.home-root{padding:22px 16px;position:relative}.home-page{flex-direction:column;gap:14px;max-width:1320px;margin:0 auto;display:flex}.topbar{grid-template-columns:210px 170px 1fr 110px;align-items:center;gap:10px;display:grid}.topbar-tools{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.topbar-settings{justify-self:center}.player-chip{color:#fff;background:linear-gradient(120deg,#5895ff,#6db9ff);border-radius:18px;align-items:center;gap:10px;height:64px;padding:8px 10px;display:flex}.avatar{color:#2c6adc;background:#e7f4ff;border-radius:999px;place-items:center;width:48px;height:48px;font-size:24px;display:grid}.name,.sub{margin:0}.name{font-weight:700}.sub{opacity:.92;font-size:12px}.pill{background:var(--panel-strong);height:56px;color:var(--text);cursor:pointer;border:0;border-radius:999px;font:700 24px Noto Sans TC,sans-serif}.pill.sign{color:#fff;background:linear-gradient(120deg,#7f85ff,#a46dff);border-radius:16px}.pill.coin{background:linear-gradient(120deg,#ffe9a4,#ffd980)}.pill.resource{min-width:132px}.pill.resource.coin{min-width:170px}.pill.task{border-radius:14px;min-width:120px}.round{background:var(--panel-strong);color:#3e6bbf;cursor:pointer;border:0;border-radius:999px;width:56px;height:56px;font-size:28px}.content{grid-template-columns:minmax(760px,1fr) 110px;gap:14px;min-height:calc(100svh - 150px);display:grid}.side{flex-direction:column;align-items:center;gap:10px;display:flex}.side button{background:var(--panel-strong);width:100%;color:var(--text);cursor:pointer;border:0;border-radius:22px;padding:14px 10px;font:700 20px Noto Sans TC,sans-serif}.side.right{justify-content:flex-start;padding-top:14px}.side.right button{background:var(--panel-strong);border-radius:999px;width:92px;height:92px;padding:0;font-size:22px}.center-panel{background:var(--panel);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:26px;flex-direction:column;gap:10px;padding:16px;display:flex}.panel-top-bar{grid-template-columns:320px 1fr;align-items:center;gap:12px;min-height:32px;display:grid}.room-hint{color:var(--sub);margin:0;font-size:17px;font-weight:600}.score-wrap{justify-content:center;display:flex}.score-board{color:var(--text);background:var(--panel-strong);border-radius:999px;align-items:center;gap:6px;padding:4px 16px;font-size:16px;font-weight:700;display:flex;box-shadow:0 2px 8px #0000000d}.score-board span{color:var(--orange);font-size:18px;font-weight:800}.hero-area{flex:1;grid-template-columns:320px 1fr;align-items:stretch;gap:12px;min-height:0;display:grid}.play-area{flex-direction:column;gap:10px;min-width:0;min-height:0;display:flex}.snake-showcase{flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:16px;display:flex;overflow:hidden}.snake-grid{grid-template-columns:repeat(var(--cols), var(--tile-size));grid-template-rows:repeat(var(--rows), var(--tile-size));background:#dedede;border:1px solid #dedede;border-radius:5px;gap:1px;width:max-content;height:max-content;display:grid}.tile{background:#fff;border-radius:2px;width:100%;height:100%}.tile.snake{background:green}.tile.head{background:purple}.tile.apple{background:#ef4444;border-radius:50%;transform:scale(.85)}.tile.star{background:#f7b731;border-radius:20%;animation:1s infinite alternate pulse-star;transform:rotate(45deg)scale(.9);box-shadow:0 0 8px #f7b731}@keyframes pulse-star{0%{opacity:.8;transform:rotate(45deg)scale(.8)}to{opacity:1;transform:rotate(45deg)scale(1.1)}}.chat-mini{background:var(--panel-strong);border-radius:20px;flex-direction:column;height:100%;min-height:0;padding:12px;display:flex}.chat-mini ul{flex-direction:column-reverse;flex:1;gap:10px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.chat-mini li{background:#ffffffb3;border-radius:12px;flex-direction:column;gap:6px;padding:10px;display:flex}.chat-mini span{color:#295177;font-size:15px}.chat-mini time{color:#6f8cab;font-size:12px}.chat-input-wrap{gap:8px;margin-top:auto;display:flex}.chat-input-wrap input,.chat-input-wrap button{border:0;border-radius:10px;padding:10px;font-family:Noto Sans TC,sans-serif}.chat-input-wrap input{background:#ffffffd1;flex:1}.chat-input-wrap button{color:#6687ad;background:#dcecff;width:74px}.bottom-actions{gap:10px;display:flex}.bottom-actions button{cursor:pointer;border:0;border-radius:20px;height:74px;font:700 28px Noto Sans TC,sans-serif}.bottom-actions .secondary{color:#fff;background:linear-gradient(120deg,#5ea2ff,#3f74db);min-width:186px}.bottom-actions .start{color:#fff;background:linear-gradient(120deg,#ffbe2f,#ff9a1f);flex:1}.latency-float{z-index:20;color:#204161;flex-direction:column;align-items:center;gap:2px;display:flex;position:fixed;top:10px;right:16px}.latency-float p,.latency-float small{margin:0;line-height:1}.latency-float p{font-size:16px;font-weight:700}.latency-float small{font-size:12px}.signal-bars{align-items:flex-end;gap:3px;display:flex}.bar{opacity:.45;background:#98adc6;border-radius:2px;width:5px}.bar:first-child{height:9px}.bar:nth-child(2){height:14px}.bar:nth-child(3){height:19px}.bar:nth-child(4){height:24px}.latency-float.good .bar.on{background:var(--green);opacity:1}.latency-float.mid .bar.on{background:var(--yellow);opacity:1}.latency-float.bad .bar.on{background:var(--red);opacity:1}@media (width<=1240px){.topbar{grid-template-columns:210px 170px 1fr 110px}.topbar-tools{justify-content:flex-end}.content{grid-template-columns:1fr 90px}.hero-area,.panel-top-bar{grid-template-columns:1fr}}@media (width<=940px){.topbar{grid-template-columns:1fr}.topbar-settings{justify-self:center}.player-chip,.round,.pill{width:100%}.content{grid-template-columns:1fr}.side{flex-flow:wrap;justify-content:center}.side button{width:auto;min-width:120px}.bottom-actions{flex-wrap:wrap}.bottom-actions .secondary,.bottom-actions .start{flex:none;width:100%;min-width:0}}.login-screen{justify-content:center;align-items:center;min-height:100svh;padding:20px;display:flex}.login-card{background:var(--panel-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-radius:26px;flex-direction:column;gap:16px;width:100%;max-width:420px;padding:40px;display:flex;box-shadow:0 10px 40px #00000014}.login-header h1{color:var(--text);margin:0 0 8px;font-size:28px}.login-header p{color:var(--sub);margin:0;font-size:15px}.login-card input{text-align:center;background:#fffc;border:2px solid #c0d5ec;border-radius:14px;outline:none;padding:16px;font-family:Noto Sans TC,sans-serif;font-size:18px;transition:border-color .2s}.login-card input:focus{border-color:#7f85ff}.divider{text-align:center;margin:10px 0;position:relative}.divider:before{content:"";z-index:1;background:#c0d5ec;height:1px;position:absolute;top:50%;left:0;right:0}.divider span{z-index:2;color:var(--sub);background:#ebf3f9;padding:0 12px;font-size:14px;position:relative}.pill.discord{color:#fff;opacity:.6;cursor:not-allowed;background:#5865f2}