:root{color-scheme:dark;font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#17191d}.screen{position:fixed;inset:0}.hidden{display:none!important}.lobby{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(175,90,255,.42),transparent 33%),radial-gradient(circle at 80% 70%,rgba(105,44,183,.55),transparent 40%),linear-gradient(145deg,#7129aa,#421275)}.floating-orbs{position:absolute;inset:0;pointer-events:none}.orb{position:absolute;width:var(--size);height:var(--size);left:var(--x);top:var(--y);border-radius:50%;background:var(--color);box-shadow:0 0 16px var(--color),0 0 34px var(--color);opacity:.7;animation:drift var(--duration) ease-in-out var(--delay) infinite alternate}@keyframes drift{to{transform:translate(var(--dx),var(--dy)) scale(1.12)}}.lobby-card{position:relative;z-index:1;width:min(440px,calc(100vw - 40px));padding:42px;border:1px solid rgba(255,255,255,.16);border-radius:30px;background:rgba(34,10,61,.72);box-shadow:0 26px 80px rgba(18,3,35,.45);backdrop-filter:blur(16px);text-align:center}.lobby h1{margin:0 0 30px;color:#42ed70;font-size:clamp(58px,10vw,92px);font-weight:800;letter-spacing:-5px;line-height:.85;text-shadow:0 0 14px rgba(66,237,112,.58),0 0 34px rgba(66,237,112,.24)}#snakeName{width:100%;padding:15px 17px;border:2px solid rgba(255,255,255,.2);border-radius:14px;outline:none;background:rgba(18,5,33,.72);color:#fff;font:16px inherit}#snakeName:focus{border-color:#42ed70;box-shadow:0 0 0 4px rgba(66,237,112,.14)}#snakeName::placeholder{color:rgba(255,255,255,.52)}.color-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 22px;color:rgba(255,255,255,.82)}.color-row input{width:54px;height:36px;padding:2px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:transparent;cursor:pointer}button{padding:14px 20px;border-radius:15px;font:800 20px/1 inherit;cursor:pointer;transition:transform .14s,filter .14s,opacity .14s}.green-button{width:100%;border:3px solid #12672d;background:#35d963;color:#092c15;box-shadow:0 7px 0 #12672d}.purple-button{border:3px solid #3d126c;background:#873ccc;color:#fff;box-shadow:0 7px 0 #3d126c}button:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-2px)}button:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.48;box-shadow:none}.best-score{margin:24px 0 0;color:rgba(255,255,255,.72)}.game{background:#24272c}.game canvas{display:block}.panel{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(5,7,10,.58);box-shadow:0 10px 25px rgba(0,0,0,.2);backdrop-filter:blur(6px);color:#fff}.leaderboard{top:18px;right:18px;width:225px;padding:14px 17px}.leaderboard h2{margin:0 0 8px;font-size:16px}.leaderboard ol{margin:0;padding-left:25px}.leaderboard li{padding:2px 0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard .me,#playerPlace{color:#49ed76}#playerPlace{margin-top:6px;font-size:13px}.score{right:18px;bottom:18px;padding:12px 17px;font-size:18px}.minimap{position:absolute;z-index:3;top:18px;left:18px;width:150px;height:150px;border:3px solid #fff;border-radius:50%;overflow:hidden;background:#3c4047;box-shadow:0 8px 24px rgba(0,0,0,.35)}.overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.58)}.small-button{width:220px}.result-box{text-align:center}.result-box>strong{display:block;margin-bottom:28px;color:#fff;font-size:clamp(42px,8vw,80px);text-shadow:0 3px 20px #000}.result-actions{display:flex;gap:18px}.result-actions button{min-width:180px}.result-actions .green-button{width:auto}@media(max-width:600px){.lobby-card{padding:30px 22px}.leaderboard{width:180px}.result-actions{flex-direction:column}.minimap{width:110px;height:110px}.minimap canvas{width:110px;height:110px}}
