@font-face{
  font-family:'SuperShake';
  font-display:swap;
  src:url(images/game/SuperShake.ttf) format("truetype") format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070a0b;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;touch-action:none}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none;will-change:auto;background:#020405}
body.death-shake canvas{animation:deathShake .08s linear infinite}
@keyframes deathShake{0%{transform:translate3d(0,0,0) rotate(0deg)}20%{transform:translate3d(-6px,3px,0) rotate(-.25deg)}40%{transform:translate3d(5px,-4px,0) rotate(.25deg)}60%{transform:translate3d(-4px,-2px,0) rotate(-.18deg)}80%{transform:translate3d(4px,4px,0) rotate(.18deg)}100%{transform:translate3d(0,0,0) rotate(0deg)}}
/* Mild sharp shake only while the safe circle is actively contracting (20s shrink). */
body.zone-shrink-shake canvas{animation:zoneShrinkShake .11s ease-in-out infinite}
@keyframes zoneShrinkShake{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  18%{transform:translate3d(-2.5px,1.5px,0) rotate(-.12deg)}
  36%{transform:translate3d(2.8px,-1.8px,0) rotate(.12deg)}
  54%{transform:translate3d(-1.8px,-2.2px,0) rotate(-.08deg)}
  72%{transform:translate3d(2.2px,1.6px,0) rotate(.1deg)}
  90%{transform:translate3d(-1.2px,1px,0) rotate(-.06deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
body.death-shake.zone-shrink-shake canvas{animation:deathShake .08s linear infinite}
#deathFx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.death-burst{position:absolute;width:18px;height:18px;border-radius:50%;background:#eaffee;box-shadow:0 0 18px #57ff82,0 0 45px #57ff82;transform:translate(-50%,-50%) scale(.2);opacity:1;animation:deathBurst .48s cubic-bezier(.15,.75,.25,1) forwards}
.death-ring{position:absolute;width:30px;height:30px;border:4px solid #57ff82;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:.95;animation:deathRing .55s ease-out forwards}
.death-particle{position:absolute;width:7px;height:7px;border-radius:50%;background:#b8ff5a;box-shadow:0 0 10px #57ff82;transform:translate(-50%,-50%);animation:deathParticle .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes deathBurst{to{transform:translate(-50%,-50%) scale(4.8);opacity:0}}
@keyframes deathRing{to{transform:translate(-50%,-50%) scale(7);opacity:0}}
@keyframes deathParticle{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.25);opacity:0}}
@media(prefers-reduced-motion:reduce){body.death-shake canvas,body.zone-shrink-shake canvas{animation:none}.death-burst,.death-ring,.death-particle{animation:none;opacity:0}}
#ui{position:absolute;inset:0;pointer-events:none}
.panel{background:rgba(7,11,13,.82);border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 35px #0009;backdrop-filter:blur(8px);border-radius:16px}
#playerPanel{position:absolute;left:14px;top:14px;padding:10px 14px;min-width:230px;max-width:260px;box-sizing:border-box}
.avatar{width:42px;height:42px;border-radius:50%;border:2px solid #42ff9b;float:left;margin-right:10px;background:#17211a;display:grid;place-items:center;font-size:24px;flex-shrink:0}
#playerPanel b{font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#playerPanel>small{display:block;color:#9ba8aa;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
#boostBox{margin-top:10px;clear:both}
.bar{height:10px;background:#202729;border-radius:20px;overflow:hidden;border:1px solid #ffffff12}
#boostFill{height:100%;width:100%;background:linear-gradient(90deg,#63ff7d,#d7ff36);box-shadow:0 0 15px #54ff75}
#zoneBox{margin-top:8px;display:block}
#zoneLabel{
  color:#ffb15c!important;font-weight:900;letter-spacing:.02em;
  font-size:10px;line-height:1.35;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  white-space:nowrap;overflow:hidden;max-width:100%;
}
#zoneBar{border-color:#ff7b2a55}
#zoneFill{height:100%;width:0%;background:linear-gradient(90deg,#ffb13b,#ff4d32);box-shadow:0 0 15px #ff5722;transition:width .08s linear}
#zoneCountdown{
  float:none;color:#ffd7a3;font-weight:900;font-size:10px;
  flex:0 0 auto;margin-left:auto;white-space:nowrap;
}
body.zone-warning #playerPanel{border-color:#ff7b2a55;box-shadow:0 12px 35px #0009,0 0 22px #ff572222}
body.zone-active #playerPanel{border-color:#ff4b3b88;box-shadow:0 12px 35px #0009,0 0 28px #ff3d242e}
#leader{position:absolute;right:14px;top:14px;width:220px;padding:12px}
#leader h3{margin:0 0 7px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b9c5c7}
.lr{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}.lr .n{width:18px;color:#728184}.lr .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;box-shadow:0 0 8px currentColor}.lr .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lr.me{font-weight:900;color:#65ff9b}
/* Under player panel with fixed gap so panel never collides when stats are large */
#mini{position:absolute;left:14px;right:auto;top:198px;width:138px;height:138px;border-radius:50%;overflow:hidden;border:2px solid #28464a;background:#071014bb;box-shadow:0 8px 30px #0008}
#bottomStats{position:absolute;left:14px;bottom:14px;padding:10px 13px;font-size:12px;color:#b4c0c2}
#bottomStats strong{color:#fff;font-size:15px}
#boostBtn{position:absolute;right:20px;bottom:22px;width:94px;height:94px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 0 18px #2cff6640);transition:transform .15s ease,filter .15s ease;overflow:hidden}
#boostBtn img{width:100%;height:100%;display:block;object-fit:contain;opacity:.78;transition:opacity .15s ease,transform .15s ease,filter .15s ease;position:relative;z-index:0}
#boostBtn.active{transform:scale(.96);filter:drop-shadow(0 0 30px #6aff8a)}
#boostBtn.active img{opacity:.96;filter:saturate(1.12)}
#boostBtn.cooldown{filter:drop-shadow(0 0 10px #2cff6630)}
#boostBtn.cooldown img{opacity:.38;filter:saturate(.55)}
/* Bottom→top charge fill during the 10s reload (same idea as the top BOOST bar). */
#boostBtn .boostChargeFill{
  position:absolute;left:0;right:0;bottom:0;height:0%;
  z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(99,255,125,.62) 0%,rgba(215,255,54,.42) 55%,rgba(215,255,54,.18) 100%);
  box-shadow:0 0 18px rgba(87,255,130,.35) inset,0 -4px 14px rgba(87,255,130,.2);
  transition:height .08s linear;
}
#boostBtn.ready .boostChargeFill,
#boostBtn:not(.cooldown):not(.active) .boostChargeFill{height:0% !important;opacity:0}
#boostBtn.active .boostChargeFill{
  height:100% !important;
  background:linear-gradient(0deg,rgba(106,255,138,.35),rgba(215,255,54,.2));
  opacity:.85;
}
#boostBtn .boostCooldown{position:absolute;inset:0;display:none;pointer-events:none;opacity:0;z-index:2}
#boostBtn.cooldown .boostCooldown{display:none;opacity:0}
#nameModal input{width:min(360px,100%);padding:14px 16px;border-radius:12px;border:1px solid #ffffff25;background:#0b1112;color:#fff;font-size:16px;outline:none;text-align:center}
#nameModal input:focus{border-color:#57ff82;box-shadow:0 0 0 3px #57ff8218}
#nameError{min-height:16px;color:#ff7373;font-size:11px;margin-top:8px}
#nameModal .nameActionBtn{
  display:inline-flex;width:min(200px,42vw);height:auto;margin-left:4px;margin-right:4px;
  padding:0;border:0;border-radius:0;background:transparent;
  cursor:pointer;pointer-events:auto;line-height:0;vertical-align:middle;
  box-shadow:none;overflow:visible;
  transition:transform .12s ease,filter .12s ease;
}
#nameModal .nameActionBtn img{
  display:block;width:100%;height:auto;pointer-events:none;user-select:none;
  -webkit-user-drag:none;
}
#nameModal .nameActionBtn:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-1px)}
#nameModal .nameActionBtn:active{transform:scale(.98);filter:brightness(.98)}
#nameModal #randomNameBtn{margin-top:12px}
#nameModal #nameBtn{margin-top:12px}
#joystick{display:none;position:absolute;left:22px;bottom:25px;width:125px;height:125px;border-radius:50%;background:#ffffff0b;border:1px solid #ffffff1a;pointer-events:auto}
#stick{position:absolute;left:35px;top:35px;width:55px;height:55px;border-radius:50%;background:#ffffff24;border:1px solid #ffffff33}
#startScreen,#deadScreen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,#0d1a14 0%,#020405 70%);z-index:5}
#deadScreen{
  display:none;opacity:0;transition:opacity .35s ease;
  /* Keep the full death+share UI on-screen at normal 100% browser size */
  align-items:center;justify-content:center;
  overflow-x:hidden;overflow-y:auto;
  padding:max(10px, env(safe-area-inset-top, 0px)) 12px max(10px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
#deadScreen > .modal{
  width:min(520px, calc(100% - 24px));
  max-height:calc(100vh - 20px);
  max-height:calc(100dvh - 20px);
  overflow-x:hidden;overflow-y:auto;
  margin:auto;
  padding:42px 22px 40px;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}
#deadScreen .logo{font-size:clamp(28px, 5.2vh, 46px) !important; margin:0 0 4px}
#deadScreen .tag{margin:8px auto 12px;font-size:clamp(12px, 1.6vh, 14.5px);line-height:1.4}
#deadScreen .deadActions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;margin-bottom:2px}
#deadScreen .deadActions .play{padding:12px 28px;font-size:14px}
#deadScreen .play.menuBtn{
  background:transparent;color:#cfe8d6;
  border:1px solid #57ff8255;
  box-shadow:0 0 18px #57ff8218,0 4px 14px #0006;
  padding:12px 28px;font-size:13px;letter-spacing:.06em;
}
#deadScreen .play.menuBtn:hover{
  background:#57ff8214;border-color:#57ff8288;color:#eaffee;
  filter:none;
}
.modal{width:min(520px,calc(100% - 28px));padding:30px;text-align:center}
.logo{font-size:clamp(40px,8vw,72px);font-weight:1000;line-height:.85;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 5px 25px #000}
.logo em{font-style:normal;color:#54ff75;text-shadow:0 0 24px #38ff5c}
.tag{color:#aab6b5;line-height:1.55;max-width:400px;margin:16px auto 22px}
.play{appearance:none;border:0;background:#eaffee;color:#07100a;border-radius:13px;padding:15px 34px;font-size:15px;font-weight:1000;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.hint{font-size:11px;color:#748081;margin-top:14px}
/* Full-screen welcome — no scroll, translucent so arena stays visible */
#startScreen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(12px,2vh) max(16px,3vw);
  background:
    radial-gradient(ellipse 75% 55% at 50% 18%,#1a3d2855 0%,transparent 58%),
    radial-gradient(circle at 50% 100%,#0d1f1644 0%,transparent 42%),
    radial-gradient(circle at 50% 50%,#08121088 0%,#020405b8 100%);
  pointer-events:auto;
  overflow:hidden;
}
#startScreen .welcomeShell{
  width:min(720px,100%);
  max-height:100%;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:clamp(10px,1.8vh,18px);
  pointer-events:auto;
  transform:scale(var(--welcome-scale,1));
  transform-origin:center center;
  will-change:transform;
  box-sizing:border-box;
  flex-shrink:1;
}
#startScreen .welcomeBadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;
  background:rgba(10,22,16,.9);border:1px solid #57ff8266;
  box-shadow:0 0 20px #57ff8235,0 4px 14px #0008;
  color:#b8ffd0;font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 12px #57ff8244;
}
#startScreen .welcomeBadge span{font-size:13px}
#startScreen .welcomeLogo{
  margin:0;padding:0;line-height:0;
  font-size:0;font-weight:1000;
  color:transparent;text-shadow:none;
  display:flex;align-items:center;justify-content:center;
  width:100%;
}
#startScreen .welcomeLogo img{
  display:block;
  width:min(420px,78vw);
  height:auto;
  max-height:min(190px,28vh);
  object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 0 18px #57ff8244) drop-shadow(0 4px 14px #000a);
}
/* welcomeLogo em unused — logo is image */
#startScreen .welcomeTag{
  margin:0 auto;max-width:440px;
  font-size:clamp(12.5px,1.7vw,14.5px);line-height:1.55;color:#d4e4da;
  text-shadow:0 1px 8px #000c,0 0 20px #0008;
}
#startScreen .howGrid{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;
  margin:0;
}
#startScreen .howCards{
  display:grid;grid-template-columns:repeat(4,minmax(0,160px));
  justify-content:center;align-items:stretch;
  column-gap:12px;row-gap:8px;
  width:100%;
}
#startScreen .howCard{
  min-width:0;width:100%;height:auto;
  display:block;object-fit:contain;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#startScreen .howControls{
  display:block;width:min(640px,100%);height:auto;
  margin:0 auto;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}













#startScreen .play{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-width:0;margin-top:0;text-align:center;
  padding:0;border-radius:0;overflow:visible;
  background:transparent;
  color:transparent;font-size:0;font-weight:1000;letter-spacing:0;
  border:0;cursor:pointer;pointer-events:auto;
  box-shadow:none;
  transition:transform .12s ease,filter .12s ease;
  line-height:0;
}
#startScreen .play img{
  display:block;width:min(200px,46vw);height:auto;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
#startScreen .play:hover{
  filter:brightness(1.12) saturate(1.15);
  transform:translateY(-1px);
}
#startScreen .play:active{
  filter:brightness(0.96) saturate(1.05);
  transform:scale(0.98);
}
#startScreen .play:active{transform:scale(.98)}
#startScreen .hint{text-align:center;margin:0;color:#9aada4;font-size:11.5px;text-shadow:0 1px 6px #000a}
/* Corner audio toggles */
#startScreen .audioCorners{
  position:absolute;inset:0;pointer-events:none;z-index:1;
}
#startScreen .audioCorner{
  position:absolute;pointer-events:auto;
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;
  background:rgba(6,14,11,.9);
  border:1px solid #57ff8250;
  backdrop-filter:blur(10px);
  box-shadow:0 0 18px #57ff8228,0 8px 24px #0008;
}
#startScreen .audioCorner.master{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
#startScreen .audioCorner.music{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
#startScreen .audioCorner .audioLabel{
  font-size:11px;font-weight:900;color:#cfe8d6;letter-spacing:.04em;
  white-space:nowrap;
}
#startScreen .audioCorner .audioLabel small{display:block;font-weight:600;font-size:9.5px;color:#7d8c87;letter-spacing:0;margin-top:1px}
.toggle{position:relative;width:48px;height:28px;border-radius:999px;border:1px solid #ffffff22;background:#1a2426;cursor:pointer;flex:0 0 auto;pointer-events:auto;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#d7e0e0;box-shadow:0 2px 8px #0008;transition:transform .18s ease,background .18s ease}
.toggle.on{background:linear-gradient(90deg,#2d8f4a,#57ff82);border-color:#57ff82aa;box-shadow:0 0 16px #57ff8235}
.toggle.on::after{transform:translateX(20px);background:#07100a}
.toggle:focus-visible{outline:2px solid #57ff82;outline-offset:2px}
@media(max-width:560px){
  #startScreen{
    padding:max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    justify-content:center;
    align-items:center;
  }
  #startScreen .welcomeShell{
    width:min(100%, 100vw);
    max-width:100%;
    gap:clamp(6px, 1.2vh, 12px);
    padding:0 4px;
    box-sizing:border-box;
  }
  #startScreen .howCards{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:clamp(3px, 1.2vw, 8px);
    row-gap:0;
    justify-content:center;
    align-items:stretch;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:0 2px;
  }
  #startScreen .howCard{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  #startScreen .howControls{
    width:min(300px, 88vw);
    max-height:min(56px, 9vh);
    object-fit:contain;
  }
  #startScreen .audioCorner .audioLabel small{display:none}
  #startScreen .audioCorner{
    padding:7px 10px;gap:6px;
  }
  #startScreen .audioCorner .audioLabel{font-size:10px}
  #startScreen .toggle{width:42px;height:24px}
  #startScreen .toggle::after{width:18px;height:18px;top:2px;left:2px}
  #startScreen .toggle.on::after{transform:translateX(18px)}
  #startScreen .welcomeLogo img{
    width:min(300px, 78vw);
    max-height:min(110px, 16vh);
  }
  #startScreen .welcomeTag{
    font-size:clamp(11px, 3.2vw, 13px);
    line-height:1.4;
    max-width:min(340px, 92vw);
    padding:0 6px;
  }
  #startScreen .welcomeActions{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    max-width:280px;
  }
  #startScreen .play{
    width:100%;
    max-width:240px;
    padding:0;
  }
  #startScreen .play img{
    width:min(200px, 70vw);
    max-height:52px;
    object-fit:contain;
  }
  #startScreen .shopBtn,
  #startScreen .slotBtn{
    width:100%;
    max-width:240px;
    justify-content:center;
    padding:8px 12px;
    font-size:13px;
  }
  #startScreen .hint{font-size:10.5px}
}
@media(max-height:640px){
  #startScreen .howGrid{gap:4px}
  #startScreen .howCards{column-gap:clamp(2px, 1vw, 6px);row-gap:0}
  #startScreen .welcomeShell{gap:6px}
  #startScreen .play{padding:0}
  #startScreen .welcomeLogo img{max-height:min(96px, 14vh)}
  #startScreen .howControls{max-height:min(48px, 8vh)}
  #startScreen .welcomeTag{font-size:11px;line-height:1.35}
}
@media(max-width:560px) and (max-height:720px){
  #startScreen .welcomeLogo img{max-height:min(100px, 14vh)}
  #startScreen .howControls{max-height:min(44px, 7.5vh)}
  #startScreen .howCards{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
@media(max-width:400px){
  #startScreen .howCards{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    column-gap:clamp(2px, 1vw, 5px);
    row-gap:0;
  }
  #startScreen .audioCorner .audioLabel{font-size:9.5px}
}
/* Name modal + death screen mobile */
@media(max-width:560px){
  #nameModal .modal,
  .modal{
    width:min(520px, calc(100% - 20px));
    padding:22px 16px;
    box-sizing:border-box;
  }
  #deadScreen > .modal{
    width:min(520px, calc(100% - 16px));
    padding:28px 14px 24px;
    max-height:calc(100dvh - 16px);
  }
  #deadScreen .logo{font-size:clamp(24px, 6vh, 40px) !important}
  #deadScreen .deadActions .play,
  #deadScreen .play.menuBtn{
    width:100%;
    max-width:280px;
    box-sizing:border-box;
  }
  #deadScreen .shareWrap{max-width:280px;width:min(240px,78vw);margin-left:auto;margin-right:auto}
  #deadScreen .deadActions .play,
  #deadScreen .play.menuBtn,
  #deadScreen .shareToggle{
    width:min(240px,78vw);max-width:280px;margin-left:auto;margin-right:auto;
  }
}
/* Skin shop / slot modals mobile */
@media(max-width:560px){
  .skinShopModalPanel,
  #skinShopModal .skinShopModalPanel,
  #slotModal .slotModalPanel,
  .slotModalPanel{
    width:min(100%, calc(100vw - 16px)) !important;
    max-width:100% !important;
    max-height:calc(100dvh - 20px) !important;
    margin:auto !important;
    box-sizing:border-box;
  }
}

/* Share score (death screen only) */
#deadScreen .shareWrap{width:min(240px,78vw);margin:2px auto 0;max-width:280px}
#deadScreen .shareToggle{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;touch-action:manipulation;
  width:100%;max-width:280px;margin:0 auto;display:block;
  padding:11px 20px;border-radius:13px;
  background:rgba(10,22,16,.92);color:#cfe8d6;
  border:1px solid #57ff8255;
  box-shadow:0 0 18px #57ff8218,0 4px 14px #0006;
  font-size:13px;font-weight:1000;letter-spacing:.06em;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;
}
#deadScreen .shareToggle:hover{background:#57ff8214;border-color:#57ff8288;color:#eaffee}
#deadScreen .shareToggle:active{transform:scale(.98)}
#deadScreen .sharePanel{
  display:none;margin-top:8px;padding:10px 10px 8px;
  border-radius:14px;background:rgba(6,14,11,.9);
  border:1px solid #57ff8238;
  box-shadow:0 0 16px #57ff8214,0 6px 18px #0007;
  max-height:min(52vh, 420px);
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#deadScreen .sharePanel.open{display:block}
#deadScreen .sharePreviewWrap{
  display:none;margin:0 auto 8px;border-radius:10px;overflow:hidden;
  border:1px solid #57ff8244;box-shadow:0 0 14px #57ff8218,0 6px 16px #0008;
  background:#070a0b;
  width:min(160px, 42%);
}
#deadScreen .sharePreviewWrap.show{display:block}
#deadScreen .sharePreviewWrap img{
  display:block;width:100%;height:auto;max-height:min(28vh, 200px);object-fit:contain;
  background:#070a0b;
}
#deadScreen .shareHint{
  font-size:11px;color:#9aada4;margin:0 0 8px;line-height:1.35;
}
#deadScreen .shareGrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
#deadScreen .shareGrid > .shareBtn{
  width:100%;max-width:100%;
}
#deadScreen .shareBtn{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;touch-action:manipulation;
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 6px;border-radius:10px;
  font-size:11px;font-weight:900;letter-spacing:.02em;color:#eaffee;
  background:#0a1210;border:1px solid #ffffff18;
  box-sizing:border-box;min-width:0;overflow:hidden;white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,transform .12s ease,filter .12s ease;
}
#deadScreen .shareBtn:hover{filter:brightness(1.08)}
#deadScreen .shareBtn:active{transform:scale(.97)}
#deadScreen .shareBtn .si{
  width:15px;height:15px;flex:0 0 15px;display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#deadScreen .shareBtn .si svg{width:15px;height:15px;display:block;flex-shrink:0}
#deadScreen .shareBtn.fb{border-color:#1877f255;background:linear-gradient(180deg,#152238,#0c1524);color:#e8f0ff}
#deadScreen .shareBtn.tw{border-color:#ffffff33;background:linear-gradient(180deg,#141414,#0a0a0a);color:#f5f5f5}
#deadScreen .shareBtn.rd{border-color:#ff450055;background:linear-gradient(180deg,#2a1612,#1a0e0c);color:#ffe8e0}
#deadScreen .shareBtn.ig{border-color:#e1306c55;background:linear-gradient(180deg,#2a1420,#160c18);color:#ffe8f4}
@media(max-height:720px){
  #deadScreen > .modal{padding:28px 16px 26px}
  #deadScreen .sharePanel{max-height:min(48vh, 340px);padding:8px}
  #deadScreen .sharePreviewWrap{width:min(130px, 38%)}
  #deadScreen .sharePreviewWrap img{max-height:min(22vh, 150px)}
  #deadScreen .tag{margin:6px auto 8px}
  #deadScreen .deadActions{gap:6px}
}
@media(max-width:480px){
  #deadScreen .shareGrid{grid-template-columns:1fr 1fr}
}
#toast{position:absolute;left:50%;top:77%;transform:translate(-50%,-50%);padding:10px 16px;opacity:0;transition:opacity .18s ease,transform .18s ease;font-weight:900;border-radius:10px;background:#07100de6;border:1px solid #ffffff20;pointer-events:none;text-align:center;max-width:min(420px,92vw)}
#toast.show{opacity:1}
#toast.zoneAlert{
  top:18%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px 22px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(28,14,8,.42),rgba(12,8,6,.48));
  border:1px solid rgba(255,140,60,.32);
  box-shadow:0 8px 28px #0006,0 0 18px rgba(255,90,40,.12),inset 0 1px 0 rgba(255,200,120,.08);
  backdrop-filter:blur(6px);
  transform:translate(-50%,-50%) scale(.96);
}
#toast.zoneAlert.show{transform:translate(-50%,-50%) scale(1)}
#toast.zoneAlert .toastIcon{
  flex:0 0 42px;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:22px;
  background:radial-gradient(circle at 40% 35%,rgba(255,178,74,.75),rgba(255,90,40,.7));
  border:1px solid rgba(255,220,160,.28);
  box-shadow:0 0 14px rgba(255,100,40,.28);
  opacity:.9;
}
#toast.zoneAlert .toastText{min-width:0;width:100%;text-align:center}
#toast.zoneAlert .toastTitle{
  font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,177,92,.92);margin:0 0 6px;text-shadow:0 0 10px rgba(255,140,60,.28);
  text-align:center;
}
#toast.zoneAlert .toastBody{
  font-size:14px;font-weight:800;line-height:1.4;color:rgba(234,255,238,.9);
  letter-spacing:.01em;text-align:center;
}
#deathSpotUi{position:absolute;inset:0;pointer-events:none;z-index:4;display:none;align-items:flex-start;justify-content:center;padding-top:max(18px,4vh)}
#deathSpotUi.show{display:flex}
#deathSpotBadge{pointer-events:none;padding:12px 18px;border-radius:14px;background:rgba(7,16,13,.88);border:1px solid #ff6b4a66;box-shadow:0 12px 40px #000a,0 0 28px #ff3d2428;backdrop-filter:blur(8px);text-align:center;max-width:min(420px,92vw)}
#deathSpotBadge .dsTitle{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ff9b7a;font-weight:900;margin-bottom:4px}
#deathSpotBadge .dsCause{font-size:16px;font-weight:1000;color:#eaffee;line-height:1.25}
#deathSpotBadge .dsHint{font-size:11px;color:#9aab9f;margin-top:6px}
#deathSpotBadge .dsBar{margin-top:10px;height:4px;border-radius:99px;background:#ffffff14;overflow:hidden}
#deathSpotBadge .dsBar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffb13b,#ff4d32);transform-origin:left center;transform:scaleX(1)}

@media(max-width:760px){#leader{width:165px;top:10px;right:10px;padding:9px}.lr{font-size:10px}#mini{left:10px;right:auto;top:186px;width:112px;height:112px}#playerPanel{left:10px;top:10px;min-width:210px;max-width:240px;padding:8px 10px}.avatar{width:34px;height:34px;font-size:19px}.bottomStats{display:none}#joystick{display:block}}
@media(max-width:480px){
  #playerPanel{min-width:min(200px,calc(100vw - 20px));max-width:min(230px,calc(100vw - 20px));left:10px;top:max(8px,env(safe-area-inset-top,0px));padding:8px 10px}
  /* Minimap under player panel (same placement idea as desktop) */
  #mini{
    left:10px;right:auto;
    top:max(168px, calc(env(safe-area-inset-top,0px) + 158px));
    bottom:auto;
    width:100px;height:100px;
  }
  /* Compact transparent leaderboard on mobile */
  #leader{
    display:block !important;
    width:138px;
    top:max(8px, env(safe-area-inset-top,0px));
    right:8px;
    padding:7px 8px;
    background:rgba(7,11,13,.38);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 6px 18px #0005;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  #leader h3{font-size:9px;margin:0 0 4px;letter-spacing:.1em;opacity:.9}
  #leader .lr{font-size:9px;padding:2px 0;gap:5px}
  #leader .lr .n{width:12px}
  #leader .lr .dot{width:6px;height:6px;flex:0 0 6px}
  #leader .lr .name{font-size:9px}
  #boostBtn{width:78px;height:78px;right:max(12px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px))}
  #joystick{left:max(10px,env(safe-area-inset-left,0px));bottom:max(14px,env(safe-area-inset-bottom,0px))}
}

/* —— Skin Shop modal (provided PNG UI, single slot) —— */
#startScreen .welcomeActions{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;
  width:100%;
}
#startScreen .shopBtn{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;border-radius:14px;
  box-sizing:border-box;
  font:900 15px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
  color:#eaffee;
  background:linear-gradient(180deg,#1a3d28 0%,#0e2218 100%);
  border:2px solid rgba(87,255,130,0.45);
  box-shadow:0 0 18px rgba(87,255,130,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
#startScreen .shopBtn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:0 0 24px rgba(87,255,130,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}
#startScreen .shopBtn:active{transform:scale(.98);filter:brightness(.96)}
#startScreen .shopBtn .shopBtnIcon{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#startScreen .shopBtn .shopBtnIcon img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px #0008)}
#startScreen .shopBtn .shopBtnText{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#startScreen .shopBtn .shopBtnText small{font-size:10px;font-weight:700;color:#8fd9a8;letter-spacing:.02em;text-transform:none}

#startScreen .slotBtn{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;border-radius:14px;
  box-sizing:border-box;
  font:900 15px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
  color:#eaffee;
  background:linear-gradient(180deg,#1a3d28 0%,#0e2218 100%);
  border:2px solid rgba(87,255,130,0.45);
  box-shadow:0 0 18px rgba(87,255,130,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
#startScreen .slotBtn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  box-shadow:0 0 24px rgba(87,255,130,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
}
#startScreen .slotBtn:active{transform:scale(.98);filter:brightness(.96)}
#startScreen .slotBtn .slotBtnIcon{font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#startScreen .slotBtn .slotBtnIcon img{width:22px;height:22px;object-fit:contain;display:block;filter:drop-shadow(0 1px 2px #0008)}
.slotTitle .slotTitleIcon{width:56px;height:56px;object-fit:contain;vertical-align:middle;margin-right:8px;display:inline-block;filter:drop-shadow(0 0 8px rgba(87,255,130,0.35))}
#startScreen .slotBtn .slotBtnText{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#startScreen .slotBtn .slotBtnText small{font-size:10px;font-weight:700;color:#8fd9a8;letter-spacing:.02em;text-transform:none}

.slotModal{
  position:absolute;inset:0;z-index:22;
  display:none;align-items:center;justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  box-sizing:border-box;pointer-events:auto;
}
.slotModal.open{display:flex}
.slotModalBackdrop{
  position:absolute;inset:0;
  background:rgba(2,6,5,.78);
  backdrop-filter:blur(10px);
}
.slotModalPanel{
  position:relative;z-index:1;
  width:min(420px,94vw);
  max-height:min(92vh,720px);
  overflow:auto;
  background:linear-gradient(165deg,#0d1a14 0%,#08110d 55%,#0a1410 100%);
  border:2px solid rgba(87,255,130,0.35);
  border-radius:22px;
  box-shadow:0 20px 60px #000c, 0 0 40px rgba(87,255,130,0.12);
  padding:22px 20px 20px;
  color:#eaffee;
}
.slotModalClose{
  position:absolute;top:10px;right:12px;
  appearance:none;border:0;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  background:rgba(10,22,16,0.9);color:#b8ffd0;
  font-size:18px;line-height:1;
  border:1px solid rgba(87,255,130,0.3);
}
.slotModalClose:hover{filter:brightness(1.15)}
.slotTitle{
  margin:0 0 4px;text-align:center;
  font:1000 26px/1.1 Inter,system-ui,sans-serif;
  color:#57ff82;text-shadow:0 0 18px rgba(87,255,130,0.35);
  letter-spacing:.04em;
}
.slotSubtitle{
  margin:0 0 16px;text-align:center;
  font:700 12px/1.35 Inter,system-ui,sans-serif;
  color:#9ba8aa;
}
.slotBalanceRow{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-bottom:14px;
}
.slotBalancePill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(10,22,16,0.95);
  border:1.5px solid rgba(87,255,130,0.4);
  font:900 15px/1 Inter,system-ui,sans-serif;color:#eaffee;
}
.slotBalancePill .slotBalanceCoin{
  width:18px;height:18px;object-fit:contain;flex-shrink:0;
  display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.slotBalancePill span{color:#57ff82}
.slotCostNote{
  font:700 11px/1 Inter,system-ui,sans-serif;color:#8a9a94;
}
.slotMachineFrame{
  background:linear-gradient(180deg,#142820,#0a1510);
  border:3px solid rgba(87,255,130,0.5);
  border-radius:16px;
  padding:14px 12px 16px;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.45), 0 0 20px rgba(87,255,130,0.1);
  margin-bottom:14px;
}
.slotReels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:10px;
}
.slotReel{
  position:relative;
  height:96px;
  border-radius:12px;
  background:#050a08;
  border:2px solid rgba(87,255,130,0.28);
  overflow:hidden;
  box-shadow:inset 0 8px 16px #000a;
}
.slotReelWindow{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  transition:transform .08s linear;
}
.slotReel.spinning .slotReelWindow{
  animation:slotSpinBlur .12s linear infinite;
}
@keyframes slotSpinBlur{
  0%{transform:translateY(0);filter:blur(0)}
  50%{transform:translateY(6px);filter:blur(1px)}
  100%{transform:translateY(0);filter:blur(0)}
}
.slotSymbolEmoji{
  width:52px;height:52px;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 4px #0008);
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.slotSymbolName{
  font:800 11px/1 Inter,system-ui,sans-serif;
  color:#b8ffd0;letter-spacing:.02em;
  text-align:center;max-width:90%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.slotResult{
  min-height:42px;
  text-align:center;
  font:800 14px/1.35 Inter,system-ui,sans-serif;
  color:#cfe8d6;
  padding:4px 6px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  flex-wrap:wrap;
}
.slotResultCoin{
  width:18px;height:18px;object-fit:contain;flex-shrink:0;
  display:inline-block;vertical-align:middle;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 1px 2px #0008);
}
.slotResult.win{color:#57ff82;text-shadow:0 0 12px rgba(87,255,130,0.4)}
.slotResult.lose{color:#ff9b3b}
.slotResult.info{color:#9ba8aa}
.slotSpinBtn{
  appearance:none;border:0;cursor:pointer;width:100%;
  padding:0;border-radius:0;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  background:transparent;box-shadow:none;
  transition:transform .1s ease,filter .1s ease;
  line-height:0;
}
.slotSpinBtn img{
  display:block;width:100%;max-width:100%;height:auto;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.slotSpinBtn:hover{filter:brightness(1.06)}
.slotSpinBtn:active{transform:scale(0.98);filter:brightness(0.96)}
.slotSpinBtn:disabled{
  cursor:not-allowed;filter:grayscale(.35) brightness(.75);
}
.slotHint{
  margin:12px 0 0;text-align:center;
  font:600 11.5px/1.4 Inter,system-ui,sans-serif;color:#7d8c87;
}
.slotHint strong{color:#9fd4b0;font-weight:800}

.skinShopModal{
  position:absolute;inset:0;z-index:20;
  display:none;align-items:center;justify-content:center;
  padding:max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
  box-sizing:border-box;
  pointer-events:auto;
}
.skinShopModal.open{display:flex}
.skinShopModalBackdrop{
  position:absolute;inset:0;
  background:rgba(2,6,5,.78);
  backdrop-filter:blur(10px);
}
.skinShopModalPanel{
  position:relative;z-index:1;
  width:min(420px,94vw);
  max-height:min(92vh,720px);
  overflow:auto;
  background:linear-gradient(165deg,#0d1a14 0%,#08110d 55%,#0a1410 100%);
  border:2px solid rgba(87,255,130,0.35);
  border-radius:22px;
  box-shadow:0 20px 60px #000c, 0 0 40px rgba(87,255,130,0.12);
  padding:22px 20px 20px;
  color:#eaffee;
  text-align:center;
}
.skinShopClose{
  position:absolute;top:10px;right:12px;z-index:5;
  appearance:none;border:0;cursor:pointer;pointer-events:auto;
  width:36px;height:36px;border-radius:50%;
  background:rgba(10,22,16,0.9);color:#b8ffd0;
  font-size:18px;line-height:1;
  border:1px solid rgba(87,255,130,0.3);
}
.skinShopClose:hover{filter:brightness(1.15)}
.skinShopTitle{
  margin:0 0 4px;text-align:center;
  font:1000 26px/1.1 Inter,system-ui,sans-serif;
  color:#57ff82;text-shadow:0 0 18px rgba(87,255,130,0.35);
  letter-spacing:.04em;
}
.skinShopTitle .skinShopTitleIcon{width:56px;height:56px;object-fit:contain;vertical-align:middle;margin-right:8px;display:inline-block;filter:drop-shadow(0 0 8px rgba(87,255,130,0.35))}
.skinShopSubtitle{
  margin:0 0 14px;text-align:center;
  font:700 12px/1.35 Inter,system-ui,sans-serif;
  color:#9ba8aa;
}
#skinsSection, .skinsSection{
  width:100%;margin:0 auto;padding:0;border:none;
  background:transparent;box-shadow:none;text-align:center;pointer-events:auto;
}
#skinShop, .skinShop{
  position:relative;width:100%;margin:0 auto;
  background:transparent;border:none;box-shadow:none;
}
#skinShopFrame, .skinShopFrame, .skinShopFocusMask{ display:none !important; }

.skinShopBalanceRow{
  display:flex;justify-content:center;align-items:center;gap:10px;
  margin-bottom:14px;
}
.skinShopBalancePill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(10,22,16,0.95);
  border:1.5px solid rgba(87,255,130,0.4);
  font:900 15px/1 Inter,system-ui,sans-serif;color:#eaffee;
}
.skinShopBalancePill .slotBalanceCoin{
  width:18px;height:18px;object-fit:contain;flex-shrink:0;
  display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.skinShopBalancePill span,
.skinShopBalancePill #skinsCoinBalance{color:#57ff82}

.skinShopMachineFrame{
  background:transparent;
  border:none;
  border-radius:0;
  padding:4px 0 10px;
  box-shadow:none;
  margin-bottom:10px;
}
.skinShopStage{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:12px;
}
.skinShopHitPrev, .skinShopHitNext{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;
  flex-shrink:0;
  width:44px;height:44px;border-radius:12px;
  background:rgba(10,22,16,0.95);
  border:2px solid rgba(87,255,130,0.35);
  color:#57ff82;
  font-size:22px;font-weight:900;line-height:1;
  box-shadow:0 0 12px rgba(87,255,130,0.12);
  transition:filter .12s ease, transform .12s ease, background .12s ease;
  z-index:3;
}
.skinShopHitPrev:hover, .skinShopHitNext:hover{
  filter:brightness(1.12);background:rgba(16,36,26,0.98);
}
.skinShopHitPrev:active, .skinShopHitNext:active{transform:scale(.96)}
.skinShopHitPrev:focus-visible,
.skinShopHitNext:focus-visible{outline:2px solid #57ff82;outline-offset:2px}

.skinShopActive{
  position:relative;
  flex:1;min-height:160px;max-width:220px;height:180px;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;cursor:pointer;
  background:linear-gradient(180deg,#0a1612 0%,#050a08 100%);
  border:2px solid rgba(87,255,130,0.4);
  border-radius:16px;
  box-shadow:inset 0 8px 16px #000a, 0 0 18px rgba(87,255,130,0.12);
  padding:10px;
}
.skinShopActive img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 6px #000a);pointer-events:none;
}
.skinShopActive.locked img{
  filter:grayscale(.45) brightness(.65) drop-shadow(0 2px 6px #000a);
}
.skinShopActive.selected{
  border-color:rgba(87,255,130,0.65);
  box-shadow:inset 0 8px 16px #000a, 0 0 16px rgba(87,255,130,0.2);
}
.skinShopActive .skinSlotLock{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,5vw,32px);
  background:rgba(0,0,0,.28);pointer-events:none;border-radius:12px;
}
.skinShopPrice{
  display:inline-block;margin:0 auto 4px;min-width:40%;
  padding:6px 14px;border-radius:10px;
  background:rgba(6,12,10,.92);
  border:1px solid rgba(87,255,130,0.35);
  font:900 13px/1 Inter,system-ui,sans-serif;color:#ffe9a0;
  letter-spacing:.02em;white-space:nowrap;text-align:center;
  box-shadow:0 2px 8px #0008;
}
.skinShopBalanceHit{ display:none !important; }

.skinShopActions{
  position:relative;margin-top:4px;
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;
}
.skinUnlockBtn{
  appearance:none;border:0;cursor:pointer;pointer-events:auto;
  width:100%;padding:14px 16px;border-radius:14px;
  font:1000 16px/1 Inter,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:#07100d;
  background:linear-gradient(180deg,#7dff9a 0%,#57ff82 45%,#3ad468 100%);
  box-shadow:0 4px 0 #1f8a3e, 0 8px 24px rgba(87,255,130,0.25);
  transition:transform .1s ease,filter .1s ease;
}
.skinUnlockBtn:hover{filter:brightness(1.06)}
.skinUnlockBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #1f8a3e, 0 4px 12px rgba(87,255,130,0.2)}
.skinUnlockBtn:disabled,
.skinUnlockBtn.cant{
  cursor:not-allowed;filter:grayscale(.35) brightness(.75);
  box-shadow:0 2px 0 #2a4a34;color:#07100d;opacity:1;
}
.skinEquipLabel{
  font:900 12px/1 Inter,system-ui,sans-serif;color:#57ff82;
  letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 0 10px #57ff8244;
}
.skinHint{
  margin:10px 0 0;
  font:600 11.5px/1.4 Inter,system-ui,sans-serif;color:#7d8c87;text-align:center;
}
.skinDots{
  display:flex;justify-content:center;gap:5px;margin-top:10px;flex-wrap:wrap;
}
.skinDots i{
  width:6px;height:6px;border-radius:50%;background:#ffffff22;display:block;
}
.skinDots i.on{
  background:#57ff82;box-shadow:0 0 8px #57ff82aa;
}

#playerPanel #coinsLine{
  display:block;clear:both;margin-top:6px;
  color:#9ba8aa;font-size:12px;line-height:1.3;
}
#playerPanel #coinsLine strong{
  color:#57ff82;font-weight:1000;letter-spacing:.02em;
  text-shadow:0 0 10px #57ff8244;
}


/* Final death-screen button theme: match the established welcome/name-screen buttons */
#deadScreen .runScoreLine{margin-bottom:14px;text-align:center}
#deadScreen .deadActions{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;margin-top:6px;margin-bottom:2px;width:100%;
}
#deadScreen .deadActions .play,
#deadScreen .shareWrap,
#deadScreen .shareToggle,
#deadScreen .play.menuBtn{
  box-sizing:border-box;
  width:min(240px,78vw);
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
}
#deadScreen .deadActions .play,
#deadScreen .shareToggle,
#deadScreen .play.menuBtn{
  height:39px;min-height:39px;margin:0 auto;padding:0 14px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px !important;font-weight:1000 !important;letter-spacing:.04em;line-height:1;
  white-space:nowrap;text-align:center;
  cursor:pointer;pointer-events:auto;touch-action:manipulation;
  transition:transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
}
#deadScreen .shareWrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:min(240px,78vw);max-width:280px;margin:0 auto;
}
#deadScreen .shareToggle{
  width:100% !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
}
#deadScreen .deadActions > #retryBtn{
  background:linear-gradient(180deg,#b9ff08 0%,#58d400 55%,#35a900 100%);
  color:#050900;border:1px solid #d8ff35;
  box-shadow:0 0 12px #57ff8240,0 3px 9px #0008,inset 0 1px 0 #ffffff66;
}
#deadScreen .shareWrap{max-width:280px;width:min(240px,78vw);margin:0 auto}
#deadScreen .shareToggle{
  background:linear-gradient(180deg,#5c0b7d 0%,#35004e 58%,#22002f 100%);
  color:#d75aff;border:1px solid #b62cff;
  box-shadow:0 0 12px #b62cff35,0 3px 9px #0008,inset 0 1px 0 #ffffff33;
}
#deadScreen .play.menuBtn{
  background:linear-gradient(180deg,#ffffff 0%,#f3faf6 58%,#dff1e7 100%);
  color:#07100a;border:1px solid #9fffc1;
  box-shadow:0 0 12px #57ff8230,0 3px 9px #0008,inset 0 1px 0 #ffffff;
}
#deadScreen .deadActions > #retryBtn:hover{
  background:linear-gradient(180deg,#b9ff08 0%,#58d400 55%,#35a900 100%);
  color:#050900;border-color:#d8ff35;
  filter:brightness(1.12) saturate(1.05);transform:translateY(-1px);
}
#deadScreen .shareToggle:hover{
  background:linear-gradient(180deg,#5c0b7d 0%,#35004e 58%,#22002f 100%);
  color:#d75aff;border-color:#b62cff;
  filter:brightness(1.12) saturate(1.05);transform:translateY(-1px);
}
#deadScreen .play.menuBtn:hover{
  background:linear-gradient(180deg,#ffffff 0%,#f3faf6 58%,#dff1e7 100%);
  color:#07100a;border-color:#9fffc1;
  filter:brightness(1.08);transform:translateY(-1px);
}
#deadScreen .deadActions > #retryBtn:active,
#deadScreen .shareToggle:active,
#deadScreen .play.menuBtn:active{transform:scale(.98)}



/* Site chrome + anti-flash (mirror of critical CSS) */
html, body { height: 100%; margin: 0; padding: 0; }
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: #0a0f0c; overflow: hidden; color: #eaffee;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
body.lobby #playerPanel,
body.lobby #leader,
body.lobby #mini,
body.lobby #bottomStats,
body.lobby #boostBtn,
body.lobby #joystick,
body.lobby #deathSpotUi,
body.lobby #deathFx {
  display: none !important; visibility: hidden !important; pointer-events: none !important;
}
body.lobby #startScreen { display: flex !important; opacity: 1 !important; visibility: visible !important; }
body.lobby canvas#game { opacity: 0 !important; }
body.lobby.preview-ready canvas#game { opacity: 1 !important; transition: opacity 0.12s ease; }
.site-header {
  flex: 0 0 auto; height: 64px;
  background: linear-gradient(180deg, #0f1a14 0%, #0a1210 100%);
  border-bottom: 1px solid rgba(87, 255, 130, 0.18);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); z-index: 100;
}
.header-inner {
  max-width: 1600px; height: 100%; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 20px; box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #eaffee; flex-shrink: 0; }

.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
@media (max-width: 520px) {
  .brand-logo { height: 32px; max-width: 150px; }
}

.brand-mark { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px rgba(87, 255, 130, 0.4)); }
.brand-text { font: 900 18px/1 Inter, system-ui, sans-serif; letter-spacing: 0.02em; }
.brand-text span { color: #57ff82; }
.header-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex: 1; min-width: 0; }
.header-nav .nav-link {
  padding: 12px 18px; border-radius: 10px; text-decoration: none; color: #9ba8aa;
  font: 700 17px/1.1 Inter, system-ui, sans-serif; letter-spacing: 0.02em; white-space: nowrap;
}
.header-nav .nav-link:hover { color: #eaffee; background: rgba(87, 255, 130, 0.08); }
.header-nav .nav-link.active { color: #57ff82; }
.header-actions { flex-shrink: 0; }
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font: 900 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  color: #07100d; background: linear-gradient(180deg, #7dff9a 0%, #57ff82 50%, #3ad468 100%);
  box-shadow: 0 2px 0 #1f8a3e, 0 4px 14px rgba(87, 255, 130, 0.25);
}
.header-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.site-main {
  flex: 1 1 auto; display: flex; flex-direction: row; align-items: stretch;
  min-height: 0; width: 100%; background: #050a08;
}
.ad-slot {
  flex: 0 0 160px; width: 160px; display: flex; align-items: flex-start; justify-content: center;
  padding: 12px 8px; box-sizing: border-box; background: #070c0a;
}
.ad-left { border-right: 1px solid rgba(87, 255, 130, 0.08); }
.ad-right { border-left: 1px solid rgba(87, 255, 130, 0.08); }

.mobile-ad-slot { display: none; }
.ad-placeholder {
  width: 100%; max-width: 160px; min-height: 600px;
  height: min(600px, calc(100vh - 56px - 44px - 24px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #0d1612 0%, #0a100e 100%);
  border: 1px dashed rgba(87, 255, 130, 0.22); border-radius: 8px;
  color: #5a6b64; font: 700 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase; user-select: none;
}
.ad-placeholder small { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #3d4a45; text-transform: none; }
.game-stage {
  flex: 1 1 auto; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #020405;
}
#gameStage > canvas#game {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block; touch-action: none; background: #020405;
}
#gameStage #ui, #gameStage #deathFx, #gameStage #deathSpotUi,
#gameStage #startScreen, #gameStage #deadScreen, #gameStage #nameModal,
#gameStage .slotModal, #gameStage .skinShopModal {
  position: absolute !important; inset: 0 !important;
}
.site-footer {
  flex: 0 0 auto; height: 52px;
  background: linear-gradient(0deg, #0a1210 0%, #0d1612 100%);
  border-top: 1px solid rgba(87, 255, 130, 0.12); z-index: 100;
}
.footer-inner {
  max-width: 1600px; height: 100%; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box;
}
.footer-copy { font: 600 12px/1 Inter, system-ui, sans-serif; color: #6a7a74; }
.footer-nav { display: flex; gap: 28px; align-items: center; }
.footer-nav a { font: 700 18px/1 Inter, system-ui, sans-serif; color: #8a9a94; text-decoration: none; letter-spacing: 0.02em; }
.footer-nav a:hover { color: #57ff82; }
@media (max-width: 900px) {
  .site-main { flex-direction: column; }
  .ad-slot { display: none; }
  .mobile-ad-slot {
    flex: 0 0 100px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #070c0a;
    border-top: 1px solid rgba(87, 255, 130, 0.08);
  }
  .mobile-ad-placeholder {
    width: min(320px, 100%);
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #0d1612 0%, #0a100e 100%);
    border: 1px dashed rgba(87, 255, 130, 0.22);
    color: #5a6b64;
    font: 700 12px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
  }
  .mobile-ad-placeholder small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #3d4a45;
    text-transform: none;
  }
  .header-nav { display: none; }
  .site-header { height: 52px; }
  .site-footer { height: 48px; }
  .footer-nav { gap: 16px; }
  .footer-nav a { font-size: 15px; }
}
@media (max-width: 520px) {
  .brand-text { font-size: 15px; }
  .header-cta { padding: 7px 12px; font-size: 11px; }
  .footer-nav { gap: 10px; }
  .footer-copy { font-size: 11px; }
}
#gameStage .slotModal, #gameStage .skinShopModal { z-index: 22; }
#gameStage #startScreen, #gameStage #deadScreen { z-index: 5; }
#gameStage #nameModal { z-index: 10; }


/* ========== Content pages (How to Play, Skins, Privacy, Terms, Contact) ========== */
/* Override game shell: full-height flex so header/footer stay pinned and only main scrolls */
html:has(body.content-page) {
  height: 100%;
  overflow: hidden;
}
body.content-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  touch-action: auto;
  background: #0a0f0c;
  min-height: 0;
}
body.content-page .site-header {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  z-index: 200;
  background: linear-gradient(180deg, #0f1a14 0%, #0a1210 100%);
}
body.content-page .site-footer {
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  z-index: 200;
  background: linear-gradient(0deg, #0a1210 0%, #0d1612 100%);
}
body.content-page .site-main {
  flex: 1 1 auto;
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: #050a08;
}
body.content-page .ad-slot { display: none; }
body.content-page .game-stage {
  position: relative;
  min-height: auto;
  overflow: visible;
  background: transparent;
}
.page-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 22px 64px;
  box-sizing: border-box;
}
.page-wrap h1 {
  margin: 0 0 12px;
  font: 900 clamp(28px, 5vw, 40px)/1.15 Inter, system-ui, sans-serif;
  color: #eaffee;
  letter-spacing: 0.02em;
}
.page-wrap h1 span { color: #57ff82; }
.page-lead {
  margin: 0 0 28px;
  font: 500 17px/1.55 Inter, system-ui, sans-serif;
  color: #b8c9c0;
  max-width: 640px;
}
.page-wrap h2 {
  margin: 36px 0 14px;
  font: 900 22px/1.25 Inter, system-ui, sans-serif;
  color: #57ff82;
  letter-spacing: 0.03em;
}
.page-wrap h3 {
  margin: 24px 0 10px;
  font: 800 18px/1.3 Inter, system-ui, sans-serif;
  color: #eaffee;
}
.page-wrap p, .page-wrap li {
  font: 500 16px/1.65 Inter, system-ui, sans-serif;
  color: #c5d4cc;
}
.page-wrap p { margin: 0 0 14px; }
.page-wrap ul, .page-wrap ol {
  margin: 0 0 18px;
  padding-left: 1.25em;
}
.page-wrap li { margin-bottom: 8px; }
.page-wrap a { color: #57ff82; }
.page-wrap strong { color: #eaffee; font-weight: 800; }

/* How-to feature cards (mirrors welcome GROW / SURVIVE / ZONE / SCORE) */
.how-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.how-card {
  background: linear-gradient(180deg, #0d1814 0%, #0a1210 100%);
  border: 1px solid rgba(87, 255, 130, 0.18);
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.how-card .icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px rgba(87,255,130,0.35));
}
.how-card h3 {
  margin: 0 0 8px;
  font: 900 15px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #57ff82;
}
.how-card p {
  margin: 0;
  font: 500 14.5px/1.5 Inter, system-ui, sans-serif;
  color: #a8b8b0;
}

.controls-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0 28px;
}
.control-chip {
  background: #0c1411;
  border: 1px solid rgba(87,255,130,0.14);
  border-radius: 12px;
  padding: 14px 14px;
}
.control-chip strong {
  display: block;
  margin-bottom: 4px;
  font: 900 14px/1 Inter, system-ui, sans-serif;
  color: #57ff82;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.control-chip span {
  font: 500 14px/1.4 Inter, system-ui, sans-serif;
  color: #9ba8aa;
}

.page-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font: 900 15px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #07100d;
  background: linear-gradient(180deg, #7dff9a 0%, #57ff82 50%, #3ad468 100%);
  box-shadow: 0 2px 0 #1f8a3e, 0 6px 18px rgba(87,255,130,0.28);
}
.page-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Skins article cards */
.skin-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 28px 0 40px;
}
.skin-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: start;
  background: linear-gradient(180deg, #0d1814 0%, #0a1210 100%);
  border: 1px solid rgba(87,255,130,0.16);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
@media (max-width: 560px) {
  .skin-entry { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.skin-art {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: radial-gradient(circle at 40% 35%, #1a3d28 0%, #0a1210 70%);
  border: 2px solid rgba(87,255,130,0.25);
  box-shadow: inset 0 0 24px rgba(87,255,130,0.12), 0 0 20px rgba(87,255,130,0.15);
}
.skin-entry h3 {
  margin: 0 0 6px;
  font: 900 20px/1.2 Inter, system-ui, sans-serif;
  color: #eaffee;
}
.skin-meta {
  margin: 0 0 10px;
  font: 700 13px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #57ff82;
}
.skin-entry p {
  margin: 0;
  font: 500 15.5px/1.6 Inter, system-ui, sans-serif;
  color: #b0c0b8;
}

.slot-section {
  margin-top: 48px;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #121a16 0%, #0a100e 100%);
  border: 1px solid rgba(183, 94, 255, 0.28);
  box-shadow: 0 0 40px rgba(182, 44, 255, 0.08);
}
.slot-section h2 { color: #d75aff; margin-top: 0; }

.legal-meta {
  margin: 0 0 24px;
  font: 600 14px/1.4 Inter, system-ui, sans-serif;
  color: #6a7a74;
}
.contact-box {
  margin: 24px 0;
  padding: 22px 20px;
  border-radius: 14px;
  background: #0d1814;
  border: 1px solid rgba(87,255,130,0.2);
}
.contact-box a {
  font: 800 18px/1.3 Inter, system-ui, sans-serif;
  color: #57ff82;
  text-decoration: none;
}
.contact-box a:hover { text-decoration: underline; }


/* How-to-play: same welcome card PNGs as the home screen */
.how-page-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
  width: 100%;
  max-width: 720px;
}
.how-page-card {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}
@media (max-width: 700px) {
  .how-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
  }
}
@media (max-width: 400px) {
  .how-page-cards {
    grid-template-columns: 1fr;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Skin art uses real in-game PNGs */
.skin-art {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #1a3d28 0%, #0a1210 70%);
  border: 2px solid rgba(87,255,130,0.25);
  box-shadow: inset 0 0 24px rgba(87,255,130,0.12), 0 0 20px rgba(87,255,130,0.15);
  padding: 8px;
  box-sizing: border-box;
}
.skin-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 560px) {
  .skin-art { width: 160px; height: 160px; }
}

/* CTA buttons: force readable label text */
.page-cta-wrap {
  margin: 28px 0 8px;
  text-align: left;
}
a.page-cta,
.page-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font: 900 15px/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #07100d !important;
  background: linear-gradient(180deg, #7dff9a 0%, #57ff82 50%, #3ad468 100%) !important;
  box-shadow: 0 2px 0 #1f8a3e, 0 6px 18px rgba(87,255,130,0.28) !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #07100d !important;
}
a.page-cta:hover,
.page-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #07100d !important;
  -webkit-text-fill-color: #07100d !important;
}

/* Logo image replaces emoji+text brand */
.brand .brand-mark, .brand .brand-text { display: none !important; }