@import"https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap";:root{font-family:Nunito,system-ui,sans-serif;color:#171b4b;background:#f6f2ec;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;cursor:pointer;border:0}.shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#fff8e9 0 16%,transparent 36%),#f6f2ec}.lobby-card,.game-card{width:min(100%,430px);border:1px solid rgba(23,27,75,.08);border-radius:28px;background:#ffffffc7;box-shadow:0 24px 70px #2f245026;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.lobby-card{position:relative;overflow:hidden;padding:34px 30px;text-align:center}.lobby-card:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:#ffd44a;opacity:.22;top:-120px;right:-80px}.lobby-preview{position:relative;width:188px;height:126px;margin:0 auto 18px;border-radius:30px;overflow:hidden;transform:rotate(-4deg);background:linear-gradient(135deg,#292e87,#5559ce);box-shadow:0 15px 25px #292e8745,inset 0 0 0 7px #ffffff21}.lobby-preview:before{content:"";position:absolute;top:15px;right:15px;bottom:15px;left:15px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px}.preview-glow{position:absolute;width:110px;height:110px;right:-28px;top:-42px;border-radius:50%;background:#ffd44a;opacity:.25;filter:blur(5px)}.preview-snake,.preview-food,.preview-dot{position:absolute;z-index:1}.preview-snake{width:22px;height:22px;border-radius:8px;background:#63ca8b;box-shadow:inset 0 0 0 2px #ffffff2e}.preview-head{left:62px;top:55px;width:28px;height:28px;border-radius:10px;background:#ffd44a;box-shadow:0 0 15px #ffd44ab3}.preview-head:after{content:"";position:absolute;width:5px;height:5px;left:8px;top:7px;border-radius:50%;background:#242a78;box-shadow:8px 0 #242a78}.preview-body-1{left:40px;top:58px;transform:rotate(-8deg)}.preview-body-2{left:23px;top:69px;transform:rotate(28deg)}.preview-body-3{left:15px;top:88px;transform:rotate(80deg)}.preview-food{right:38px;top:36px;z-index:2;color:#fff;font-size:1.45rem;text-shadow:0 0 12px #ffd44a}.preview-dot{width:4px;height:4px;border-radius:50%;background:#ffffff8c}.dot-1{left:22px;top:27px}.dot-2{right:24px;bottom:22px}.dot-3{left:95px;bottom:16px}.brand-mark{position:relative;display:grid;gap:0;line-height:.82;letter-spacing:-.08em;font-size:clamp(3.7rem,17vw,5.5rem);font-weight:900;color:#242a78;text-shadow:0 5px #ffd44a}.brand-mark span{position:absolute;top:-24px;right:19%;color:#ffb600;font-size:1.35rem;text-shadow:none}.brand-mark em{color:#f05b35;font-style:normal}.tagline{margin:18px 0 28px;color:#6d6c7c;font-weight:800;letter-spacing:.04em}.tagline b{color:#f05b35;padding:0 3px}.best-card{display:inline-grid;gap:2px;min-width:150px;padding:11px 24px;border-radius:14px;color:#fff;background:#242a78;box-shadow:0 8px 18px #242a7840}.best-card small,.score-row small{font-size:.64rem;letter-spacing:.14em;font-weight:900;opacity:.72}.best-card b{font-size:1.45rem;color:#ffd44a}.lobby-actions{display:grid;gap:12px;margin-top:30px}.primary-button,.secondary-button{min-height:50px;border-radius:15px;font-weight:900;transition:transform .15s,box-shadow .15s}.primary-button{color:#fff;background:linear-gradient(135deg,#292e87,#5559ce);box-shadow:0 8px 18px #292e8740}.secondary-button{color:#242a78;background:#fff2c9}.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.game-shell{padding:14px}.game-card{padding:18px}.game-header,.game-toolbar{display:flex;align-items:center;justify-content:space-between}.icon-button{width:40px;height:40px;border-radius:12px;background:#f0edf6;color:#242a78;font-size:2rem;line-height:1}.score-row{display:flex;gap:10px}.score-row>div{min-width:76px;padding:8px 12px;text-align:center;border-radius:12px;color:#fff;background:#242a78}.score-row b{display:block;color:#ffd44a;font-size:1.25rem;line-height:1.1}.game-toolbar{margin:20px 2px 12px}.live-pill{color:#5559ce;font-size:.7rem;font-weight:900;letter-spacing:.12em}.live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#57bd74;box-shadow:0 0 0 4px #57bd7426}.pause-button{padding:8px 12px;border-radius:10px;color:#242a78;background:#f0edf6;font-weight:900;font-size:.8rem}.board-wrap{position:relative;overflow:hidden;border:8px solid #242a78;border-radius:22px;background:#34398f;box-shadow:0 12px 25px #242a783b;touch-action:none}.snake-board{display:grid;grid-auto-rows:minmax(0,1fr);aspect-ratio:1;gap:2px;padding:5px;background:#34398f}.cell{display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:1;overflow:hidden;border-radius:4px;background:#ffffff0b;color:#fff;font-size:clamp(.55rem,3vw,1rem);line-height:1}.cell.snake{background:#62c68a;box-shadow:inset 0 0 0 2px #ffffff29}.cell.head{position:relative;background:#ffd44a;border-radius:7px;box-shadow:0 0 13px #ffd44ab8}.cell.head:after{content:"";width:35%;height:35%;border-radius:50%;background:#242a78;box-shadow:6px 0 #242a78}.cell.food{color:#ffb600;font-size:70%;text-shadow:0 0 10px #fff;animation:pulse 1s infinite alternate}@keyframes pulse{to{transform:scale(1.22)}}.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:8px;padding:28px;text-align:center;color:#fff;background:#171b4be0}.board-overlay span{color:#ffd44a;font-size:2.5rem}.board-overlay h2{margin:0;letter-spacing:.08em}.board-overlay p{margin:0 0 12px;color:#d7d7eb}.board-overlay .secondary-button{margin-top:2px}.hint{margin:16px 0 2px;text-align:center;color:#77778b;font-size:.76rem;font-weight:800}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:24px;background:#171b4b73}.modal-card{position:relative;width:min(100%,340px);padding:30px;border-radius:22px;background:#fff;box-shadow:0 20px 60px #171b4b4d}.modal-card h2{margin-top:0;color:#242a78;letter-spacing:.06em}.modal-card p{color:#686879;line-height:1.5}.modal-card .primary-button{width:100%;margin-top:10px}.close{position:absolute;top:12px;right:14px;color:#242a78;background:none;font-size:1.7rem}@media (max-width: 430px){.shell{padding:12px}.lobby-card{padding:54px 22px 28px}.game-card{padding:12px;border-radius:22px}}
