:root{--ink:#0a0a0c;--pink:#ff3fb4;--cyan:#31c7ef;--gold:#ffd21f;--txt:#fff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05030f;color:var(--txt);font-family:system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.logo,b,.big,#banner,.bt,#board ol,#help,.home,.ab i{font-family:"Jersey 10",monospace;font-weight:normal}
#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#tags div{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font:16px/1 "Jersey 10",monospace;color:#fff;text-shadow:0 0 4px #000,2px 2px 0 #000;padding:0 4px}
#tags div.food{color:#ff7fd8}#tags div.danger{color:#ff4a4a}#tags div.me{color:var(--cyan)}
#hud{position:fixed;inset:0;pointer-events:none}
.home{position:absolute;left:14px;top:12px;color:#fff;text-decoration:none;font-size:20px;padding:6px 12px;background:#16112ccc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--cyan);pointer-events:auto}
#banner{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:34px;padding:4px 18px;background:#0a0a0ccc;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--gold);color:var(--gold);opacity:0;transition:opacity .3s;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
#banner.on{opacity:1}#banner.hot{color:#fff;background:#ef2029cc;box-shadow:0 0 0 3px var(--ink),0 0 0 5px #ff5a5a,0 0 24px #ef2029;animation:hot .5s ease-in-out infinite alternate}
@keyframes hot{to{transform:translateX(-50%) scale(1.05)}}
#board{position:absolute;right:14px;top:12px;width:200px;padding:8px 10px;background:#16112ccc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--pink)}
.bt{font-size:20px;color:var(--pink)}#board ol{margin:4px 0 0;padding-left:22px;font-size:18px;line-height:1.15}#board li.bot{opacity:.65}#board li.me{color:var(--cyan)}
#board li span{float:right}#alive{font-size:12px;opacity:.7;margin-top:4px}
#stats{position:absolute;left:14px;bottom:14px;display:flex;gap:8px}
#stats div{min-width:72px;padding:6px 10px;background:#16112ccc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--cyan);text-align:center}
#stats b{display:block;font-size:30px;line-height:1}#stats i{font-style:normal;font-size:10px;letter-spacing:.1em;opacity:.75}
#abil{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.ab{position:relative;width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#16112ccc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold);overflow:hidden}
.ab span{font-size:26px;line-height:1}.ab i{font-style:normal;font-size:14px}
.ab u{position:absolute;left:0;bottom:0;width:100%;height:0;background:#000a;text-decoration:none}
.ab.off{opacity:.45}
#help{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:16px;opacity:.6;white-space:nowrap}
#mute{position:absolute;left:14px;top:58px;width:38px;height:38px;border:0;font-size:20px;color:#fff;background:#16112ccc;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--pink);pointer-events:auto;cursor:pointer}
#mute.off{opacity:.4;text-decoration:line-through}
#stick,#bombBtn{display:none}
.panel{position:fixed;inset:0;display:grid;place-items:center;background:#05030fb0;z-index:5;padding:16px}
.panel[hidden]{display:none}
.card{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center;background:linear-gradient(180deg,#2c2350,#16112c);box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--pink),0 0 40px #ff3fb455,8px 8px 0 6px var(--ink)}
.logo{font-size:72px;line-height:.9;color:var(--pink);text-shadow:4px 4px 0 var(--ink),0 0 24px #ff3fb4}
.logo small{display:block;font-size:20px;color:var(--cyan);text-shadow:2px 2px 0 var(--ink);letter-spacing:.12em}
.card p{margin:0;font-size:14px;line-height:1.45;opacity:.9}
#name{width:100%;font:28px "Jersey 10",monospace;text-align:center;padding:8px;border:0;background:#0a0a0c;color:var(--gold);box-shadow:0 0 0 2px var(--cyan);outline:none;text-transform:uppercase}
.big{display:block;width:100%;border:0;cursor:pointer;font-size:40px;padding:10px;color:#0a0a0c;background:var(--pink);box-shadow:0 0 0 3px var(--ink),6px 6px 0 3px var(--ink);text-decoration:none;transition:translate .08s}
.big:hover{translate:-2px -2px}.big:active{translate:3px 3px}.big.alt{background:var(--cyan)}
.small{font-size:13px;color:#fff;opacity:.7}
#status{font-size:13px;min-height:16px;color:var(--gold)}
#dstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
#dstats div{padding:8px;background:#0a0a0c88;box-shadow:0 0 0 2px #4a4a52}#dstats b{display:block;font-size:30px;color:var(--gold)}#dstats i{font-style:normal;font-size:11px;opacity:.75;letter-spacing:.08em}
.adslot{width:100%;min-height:0}
/* phones */
body.touch #help{display:none}
body.touch #stick{display:block;position:absolute;left:24px;bottom:110px;width:130px;height:130px;border-radius:50%;background:#ffffff14;box-shadow:inset 0 0 0 3px #ffffff40;pointer-events:auto}
body.touch #stick i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#31c7efaa;box-shadow:0 0 0 3px var(--ink)}
body.touch #bombBtn{display:block;position:absolute;right:28px;bottom:120px;width:84px;height:84px;border:0;border-radius:50%;font-size:38px;background:#ff3fb4cc;box-shadow:0 0 0 3px var(--ink),0 0 20px #ff3fb4;pointer-events:auto}
@media (max-width:700px){
  #board{width:150px;padding:6px 8px;top:58px}.bt{font-size:16px}#board ol{font-size:15px}
  #banner{font-size:22px;top:62px}
  #stats{left:8px;bottom:8px;gap:5px}#stats div{min-width:56px;padding:4px 6px}#stats b{font-size:22px}
  #abil{right:8px;bottom:8px;gap:5px}.ab{width:48px;height:48px}.ab span{font-size:20px}.ab i{font-size:11px}
  .logo{font-size:56px}
}
body.touch #abil{display:none}body.touch #stats div:nth-child(4){display:none}
#jumpBtn{display:none}
body.touch #jumpBtn{display:block;position:absolute;right:120px;bottom:70px;width:76px;height:76px;border:0;border-radius:50%;font:24px "Jersey 10",monospace;color:#0a0a0c;background:#31c7efcc;box-shadow:0 0 0 3px var(--ink),0 0 18px #31c7ef;pointer-events:auto}

/* ---- control labels ---- */
kbd{display:inline-block;min-width:24px;padding:2px 6px;margin:0 2px;font:16px/1.1 "Jersey 10",monospace;color:#0a0a0c;background:#e8e8f0;box-shadow:0 3px 0 #8a8aa0,0 0 0 2px #0a0a0c;text-align:center}
kbd.w{min-width:70px}
#help{display:none}
#keys{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:16px;padding:8px 14px;background:#0a0a0cb0;box-shadow:0 0 0 2px #4a4a52;font:18px "Jersey 10",monospace;white-space:nowrap}
#keys span{display:flex;align-items:center;gap:2px}#keys span kbd:last-of-type{margin-right:6px}
@media (max-width:1150px){#keys{bottom:96px}}
.ab kbd{position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:11px;padding:0 4px;min-width:0;box-shadow:0 2px 0 #8a8aa0}
.ab span{margin-top:10px}
#ab-boost:not(.off){box-shadow:0 0 0 2px var(--ink),0 0 0 4px #2fd8ff,0 0 18px #2fd8ff}
#speed{position:absolute;left:50%;top:76px;transform:translateX(-50%);font:40px/1 "Jersey 10",monospace;color:#0a0a0c;background:#2fd8ff;padding:6px 18px;box-shadow:0 0 0 3px var(--ink),0 0 30px #2fd8ff;animation:spd .35s ease-in-out infinite alternate}
#speed small{font-size:24px;opacity:.75}
@keyframes spd{to{transform:translateX(-50%) scale(1.06)}}
#tip{position:absolute;left:50%;top:40%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));text-align:center;font:24px/1.15 "Jersey 10",monospace;padding:10px 18px;background:#0a0a0cd0;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold);color:#fff;pointer-events:none}
.how{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;width:100%;text-align:left;font-size:13px}
.how div{display:flex;align-items:center;gap:8px}.how i{font-style:normal;font-size:20px;width:22px;text-align:center}
.ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font-size:13px}.ctl kbd{font-size:14px}.ctl b{font-size:18px}
.ctl.tch,body.touch .ctl.desk{display:none}body.touch .ctl.tch{display:flex}
/* ---- touch: big labelled controls in thumb reach ---- */
body.touch #keys{display:none}
body.touch #stick{left:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);width:140px;height:140px}
body.touch #stick b,body.touch #bombBtn b,body.touch #jumpBtn b{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);font:16px "Jersey 10",monospace;color:#fff;text-shadow:2px 2px 0 #000;white-space:nowrap}
body.touch #jumpBtn{right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);width:92px;height:92px;font-size:40px;color:#0a0a0c;background:#31c7efdd}
body.touch #bombBtn{right:128px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);width:78px;height:78px;font-size:34px}
body.touch #jumpBtn:active,body.touch #bombBtn:active{transform:scale(.92)}
body.touch #stats{top:58px;bottom:auto;left:8px;flex-direction:column;gap:4px}
body.touch #stats div{min-width:64px;padding:3px 6px}body.touch #stats b{font-size:20px}body.touch #stats i{font-size:9px}
body.touch #speed{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 230px);font-size:30px}
body.touch #tip{top:30%;font-size:20px}
body.touch #mute{left:auto;right:172px;top:12px}
body.touch #stats{top:58px;left:8px;flex-direction:row;gap:4px}
body.touch #stats div{min-width:58px}
body.touch #banner{top:236px;font-size:20px}

/* ---- account, shop, spin ---- */
#acct{width:100%}
.who{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0a0a0c;box-shadow:0 0 0 2px var(--cyan)}
.who b{font-size:30px;color:var(--cyan)}.who span{font:26px "Jersey 10",monospace;color:var(--gold)}
.acts{display:flex;gap:8px;width:100%;margin-top:8px}
.acts button,.acts span{flex:1;border:0;cursor:pointer;font:20px "Jersey 10",monospace;padding:8px;color:#fff;background:#2c2350;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--pink);position:relative}
.acts button.hot{background:var(--gold);color:#0a0a0c;animation:hot2 .7s ease-in-out infinite alternate}@keyframes hot2{to{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold),0 0 18px var(--gold)}}
.acts em{position:absolute;right:-6px;top:-8px;font-style:normal;background:#ef2029;color:#fff;padding:0 6px;box-shadow:0 0 0 2px var(--ink)}
.acts.small2 button,.acts.small2 span{font-size:15px;padding:6px;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #4a4a52}
.acts .dc{background:#5865f2}
.linkb{border:0;background:none;color:#fff;opacity:.7;text-decoration:underline;cursor:pointer;font-size:13px}
#dstars{font:30px "Jersey 10",monospace;color:var(--gold);min-height:30px}
.panel.top{z-index:8}
.card.wide{width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto}
.logo.sm{font-size:52px}
.bal{font:28px "Jersey 10",monospace;color:var(--gold)}.bal small{display:block;font:12px system-ui;color:#fff;opacity:.7}
.tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tabs button{border:0;cursor:pointer;font:20px "Jersey 10",monospace;padding:6px 12px;color:#fff;background:#16112c;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #4a4a52}
.tabs button.on{background:var(--pink);color:#0a0a0c;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--pink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;width:100%}
.it{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:0;cursor:pointer;color:#fff;background:#16112c;box-shadow:0 0 0 2px var(--ink),0 0 0 3px #4a4a52;transition:translate .08s}
.it:hover{translate:0 -2px}.it.on{box-shadow:0 0 0 2px var(--ink),0 0 0 4px #42b642,0 0 14px #42b64288}
.it.lock .sw,.it.lock .em{filter:saturate(.5) brightness(.7)}.it.poor{opacity:.6}
.it b{font:20px "Jersey 10",monospace}.it span{font-size:11px;color:var(--gold)}.it.on span{color:#42b642}
.sw{display:block;width:54px;height:54px;box-shadow:0 0 0 2px var(--ink)}.sw.dots{border-radius:50%;width:40px;height:40px;margin:7px}
.em{display:block;font-size:40px;line-height:54px;font-style:normal}
.reel{position:relative;width:100%;height:96px;overflow:hidden;background:#0a0a0c;box-shadow:0 0 0 2px var(--gold)}
.strip{display:flex;position:absolute;left:0;top:6px;will-change:transform}
.cell{flex:none;width:84px;height:84px;display:grid;place-items:center}.cell.win{background:#ffd21f33}
.mark{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.prize{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 24px;background:#16112c;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--cyan)}
.prize b{font:30px "Jersey 10",monospace}.prize span{font-size:12px;letter-spacing:.1em;color:var(--cyan)}
.prize.rare{box-shadow:0 0 0 2px var(--ink),0 0 0 4px #a05aff,0 0 24px #a05aff}.prize.rare span{color:#c79bff}
.prize.legend{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--gold),0 0 30px var(--gold)}.prize.legend span{color:var(--gold)}
.prize.stars .em{color:var(--gold)}
#toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:9;max-width:calc(100vw - 32px);text-align:center;font:22px "Jersey 10",monospace;padding:8px 18px;background:#0a0a0ce0;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--cyan);color:#fff;pointer-events:none}