@import"https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Share+Tech+Mono&display=swap";:root{--bg-deep: #0c060f;--bg-mid: #1b0e22;--bg-glow: #351542;--gold: #f6d365;--hot: #ff4d6d;--aqua: #35f5ff;--ink: #0b0b0d;--panel: rgba(10, 8, 15, .72);--border: rgba(246, 211, 101, .35);--shadow: rgba(0, 0, 0, .6);--snake-body: #ff9a9e;--snake-head: #ffd166;--food-core: #35f5ff;--grid-bg: #0b0713;--cell-bg: #0b0811;--grid-border: #f6d365;--grid-gap: 2px;--cell-radius: 4px}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;font-family:Share Tech Mono,monospace;color:#f5f2ff;background:radial-gradient(circle at 20% 20%,#2f1240 0%,transparent 50%),radial-gradient(circle at 80% 20%,#3f1a2b 0%,transparent 45%),linear-gradient(135deg,var(--bg-deep),var(--bg-mid) 55%,var(--bg-glow));overflow:hidden}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.marquee{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);border-bottom:1px solid rgba(255,255,255,.08);text-transform:uppercase;font-size:12px;letter-spacing:6px;padding:10px 0;overflow:hidden}.marquee-inner{display:inline-block;white-space:nowrap;padding-left:100%;animation:scroll 12s linear infinite;color:#ffffff80}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-100%)}}.layout{flex:1;display:grid;grid-template-columns:minmax(220px,280px) minmax(320px,560px) minmax(220px,280px);justify-content:center;align-items:start;gap:24px;padding:24px 32px 40px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 15px 35px var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:18px;position:relative}.title{font-family:Bungee Shade,cursive;font-size:26px;letter-spacing:2px;text-align:center;color:var(--gold);text-shadow:0 0 12px rgba(246,211,101,.5)}.slots{display:flex;justify-content:center;gap:12px;cursor:pointer}.slot{width:64px;height:72px;display:grid;place-items:center;font-size:32px;background:linear-gradient(180deg,#1c0f24,#0a050f 70%);border:2px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:inset 0 0 18px #ffffff14,0 6px 14px #00000080;color:var(--aqua);text-shadow:0 0 12px rgba(53,245,255,.6);animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{box-shadow:inset 0 0 10px #ffffff0d,0 0 6px #35f5ff26}to{box-shadow:inset 0 0 18px #ffffff26,0 0 12px #35f5ff4d}}.nick-input{background:transparent;border:1px dashed rgba(255,255,255,.2);border-radius:10px;padding:10px 12px;text-align:center;color:#fff9;letter-spacing:6px;text-transform:uppercase}.nick-input:focus{outline:2px solid rgba(53,245,255,.4)}.scoreboard{display:flex;justify-content:space-between;gap:14px}.scoreboard div{flex:1;background:#06050ab3;border-radius:12px;padding:12px;text-align:center;border:1px solid rgba(255,255,255,.08)}.scoreboard span{display:block;font-size:12px;color:#fff9}.scoreboard strong{font-size:20px;letter-spacing:2px;color:var(--gold)}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.btn{background:linear-gradient(180deg,#f6d365,#fda085);border:none;border-radius:10px;padding:10px 0;font-weight:700;letter-spacing:1px;color:#2b1208;cursor:pointer;box-shadow:0 6px 15px #0000004d}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--aqua);border:1px solid rgba(53,245,255,.4)}.status{text-align:center;min-height:20px;color:var(--hot)}.hint{text-align:center;font-size:12px;color:#ffffff80}.arena{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.arena-top{width:min(72vw,520px);display:grid;gap:12px}.grid{width:min(72vw,520px);aspect-ratio:1 / 1;background:var(--grid-bg);border-radius:18px;border:1px solid var(--grid-border);display:grid;grid-template-columns:repeat(20,1fr);gap:var(--grid-gap);padding:10px;box-shadow:0 18px 35px #0009}.grid-over{filter:grayscale(.2) blur(.2px)}.cell{background:var(--cell-bg);border-radius:var(--cell-radius)}.cell.snake{background:var(--snake-body);box-shadow:0 0 6px var(--snake-body)}.cell.head{background:var(--snake-head);box-shadow:0 0 10px var(--snake-head)}.cell.food{background:var(--food-core);box-shadow:0 0 12px var(--food-core)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#ffffffd9;gap:12px}.nick-overlay{pointer-events:auto;display:grid;gap:12px;justify-items:center}.insert-coin{font-family:Bungee Shade,cursive;font-size:28px;letter-spacing:2px;color:var(--gold)}.gameover-anim{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;gap:6px;animation:gameover-pulse 2s ease-in-out forwards;pointer-events:none;z-index:5}.gameover-anim h2{font-family:Bungee Shade,cursive;font-size:clamp(48px,10vw,96px);line-height:.9;letter-spacing:3px;color:var(--hot);text-shadow:0 0 18px rgba(255,77,109,.7)}.gameover-anim .record-score{margin-top:4px;font-size:clamp(20px,4vw,36px);line-height:1;letter-spacing:6px;color:var(--gold);text-shadow:0 0 16px rgba(246,211,101,.5)}.gameover-anim p{margin-top:8px;color:#ffffffb3}@keyframes gameover-pulse{0%{transform:scale(.25);opacity:0}25%{transform:scale(1.05);opacity:1}70%{transform:scale(.95);opacity:.9}to{transform:scale(.2);opacity:0}}.slots.mono{gap:10px}.slot.mono{background:#0b0b0d;color:#fff;text-shadow:none;border:2px solid #ffffff;box-shadow:none;animation:none;overflow:hidden}.slot-char{display:inline-block;transform:translate(0)}.slot-char.fly-in{animation:fly-in .32s cubic-bezier(.21,.85,.35,1.1)}.slot-char.fly-in.from-left{--fly-x: -140%}.slot-char.fly-in.from-right{--fly-x: 140%}@keyframes fly-in{0%{transform:translate(var(--fly-x)) scale(.85);opacity:.1}70%{transform:translate(0) scale(1.08);opacity:1}to{transform:translate(0) scale(1);opacity:1}}.nick-input.mono{background:#0b0b0d;color:#fff;border:2px solid #ffffff;text-shadow:none}.nick-input.mono::placeholder{color:#ffffff80}.nick-input.hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.start-btn{width:160px}.overlay h2{font-family:Bungee Shade,cursive;font-size:32px;letter-spacing:2px;color:var(--gold)}.overlay p{margin-top:8px;color:#fff9}.leaderboard .title{font-size:18px}.leaderboard{width:min(72vw,520px)}.leader-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.leader-row{display:grid;grid-template-columns:40px 1fr 1fr;gap:6px;padding:4px 8px;border-radius:10px;background:#05050899;border:1px solid rgba(255,255,255,.05);align-items:center;font-size:11px}.leader-row span:nth-child(2){color:var(--aqua);letter-spacing:2px}.customizer{min-height:100%}.custom-group{display:grid;gap:10px}.custom-group h3{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#fff9}.custom-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#ffffffb3}.custom-row input[type=color]{width:44px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:transparent;padding:2px;cursor:pointer}.custom-row input[type=range]{flex:1;accent-color:var(--aqua)}@media (max-width: 1100px){.layout{grid-template-columns:1fr}.customizer,.arena,.leaderboard{width:min(92vw,520px);margin:0 auto}.grid{width:min(90vw,520px)}}@media (max-width: 640px){.panel{padding:16px}.slot{width:54px;height:60px}.controls{grid-template-columns:1fr}}