/* Brainrot Snake 3D - UI skin.
   Every size is in rem; main.js drives html{font-size} from the viewport so the whole
   interface scales to fit any screen instead of shrinking into a corner. */

:root {
  --blue-1: #4a90ff;
  --blue-2: #2b62e0;
  --blue-3: #1a3ea8;
  --navy: #14286e;
  --yellow: #ffd21e;
  --yellow-2: #ffab08;
  --green: #6fd83a;
  --green-2: #46ad19;
  --pink: #ff4fa3;
  --purple: #9b4dff;
  --red: #ff4d5e;
  --white: #ffffff;
  --ink: #12224d;

  --panel: linear-gradient(180deg, #3a6ee0 0%, #23459f 100%);
  --panel-lite: linear-gradient(180deg, #6ea3ff 0%, #3f74e6 100%);
  --shadow-hard: 0 0.35rem 0 rgba(10, 28, 78, .55);
  --radius: 1rem;
  --font: "Nunito", "Baloo 2", "Segoe UI", "Trebuchet MS", system-ui, -apple-system, sans-serif;
  --font-fat: "Arial Black", "Segoe UI Black", "Nunito", Impact, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: #bfe4ff;
  font-family: var(--font);
  color: #fff;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

/* The Playables SDK strips touch-action / overscroll-behavior / user-select from
   <body> on load, so the rules that matter are repeated on our own elements. */
#stage {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
#ui, #ui * { -webkit-user-select: none; user-select: none; }

#ui {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 10;
  font-size: 1rem;
  /* Keep everything clear of phone notches. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#ui > * { pointer-events: none; }
.clickable, button { pointer-events: auto; }

/* ---------------- typography ---------------- */

.fat {
  font-family: var(--font-fat);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.outline {
  text-shadow:
    -0.09rem -0.09rem 0 var(--ink), 0.09rem -0.09rem 0 var(--ink),
    -0.09rem  0.09rem 0 var(--ink), 0.09rem  0.09rem 0 var(--ink),
     0 0.16rem 0 rgba(10,28,78,.6);
}
.outline-lg {
  text-shadow:
    -0.14rem -0.14rem 0 var(--ink), 0.14rem -0.14rem 0 var(--ink),
    -0.14rem  0.14rem 0 var(--ink), 0.14rem  0.14rem 0 var(--ink),
     0 0.3rem 0 rgba(10,28,78,.55);
}

/* ---------------- buttons ---------------- */

button {
  font-family: var(--font-fat);
  font-weight: 900;
  border: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .12s ease;
  will-change: transform;
}
button:active { transform: scale(.93) translateY(.12rem); filter: brightness(1.12); }
button:disabled { cursor: default; }

.btn {
  padding: .85rem 1.5rem;
  font-size: 1.35rem;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
  box-shadow: 0 .4rem 0 #2c7c0d, 0 .7rem 1rem rgba(0,0,0,.28);
  border: .18rem solid rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.btn.blue { background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 100%); box-shadow: 0 .4rem 0 #163b96, 0 .7rem 1rem rgba(0,0,0,.28); }
.btn.yellow { background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-2) 100%); box-shadow: 0 .4rem 0 #b96b00, 0 .7rem 1rem rgba(0,0,0,.28); color: #4a2a00; }
.btn.pink { background: linear-gradient(180deg, #ff77bd 0%, var(--pink) 100%); box-shadow: 0 .4rem 0 #b31f68, 0 .7rem 1rem rgba(0,0,0,.28); }
.btn.grey { background: linear-gradient(180deg, #8fa3c9 0%, #5d729c 100%); box-shadow: 0 .4rem 0 #3d4d6d, 0 .7rem 1rem rgba(0,0,0,.28); }
.btn.big { font-size: 1.75rem; padding: 1.05rem 2.4rem; }

.icon-btn {
  width: 3.3rem; height: 3.3rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #6d9bff 0%, #2f5fd0 100%);
  box-shadow: 0 .3rem 0 #17398f, 0 .5rem .8rem rgba(0,0,0,.25);
  border: .16rem solid rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* Ads badge that rides on any button needing a rewarded view. */
.ad-badge {
  position: absolute;
  top: -.55rem; right: -.55rem;
  background: linear-gradient(180deg, #ffe36b, #ffb800);
  color: #4a2a00;
  font-family: var(--font-fat);
  font-size: .72rem;
  padding: .16rem .45rem .16rem .3rem;
  border-radius: .6rem;
  border: .14rem solid #fff;
  box-shadow: 0 .18rem 0 #a86a00;
  display: flex; align-items: center; gap: .16rem;
  letter-spacing: .02em;
  animation: adPulse 1.4s ease-in-out infinite;
}
.ad-badge .play { width: 0; height: 0; border-left: .42rem solid #4a2a00; border-top: .28rem solid transparent; border-bottom: .28rem solid transparent; }
@keyframes adPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------------- top bar ---------------- */

#topbar {
  position: absolute; top: .8rem; left: .8rem; right: .8rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .6rem;
  transition: transform .38s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
#topbar.hidden { transform: translateY(-5rem); opacity: 0; pointer-events: none; }

.currencies { display: flex; gap: .5rem; }
.cur {
  display: flex; align-items: center; gap: .4rem;
  background: linear-gradient(180deg, rgba(24,48,120,.94), rgba(14,32,88,.94));
  border: .16rem solid rgba(255,255,255,.75);
  border-radius: 1.2rem;
  padding: .3rem .9rem .3rem .35rem;
  min-width: 6rem;
  box-shadow: 0 .25rem 0 rgba(8,20,60,.5);
}
.cur .val { font-family: var(--font-fat); font-size: 1.05rem; }
.chip-ico { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }

.coin-ico {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff6c0 0%, var(--yellow) 42%, #e59500 100%);
  border: .13rem solid #a86a00;
  box-shadow: inset 0 -.12rem .2rem rgba(160,90,0,.6);
}
.gem-ico {
  background: linear-gradient(150deg, #ff8ad8 0%, #ff3fb2 55%, #c4008a 100%);
  border: .13rem solid #8e0064;
  transform: rotate(45deg) scale(.82);
  border-radius: .28rem;
}

/* ---------------- lobby (peripheral, non-blocking) ---------------- */

#lobby {
  position: absolute; inset: 0;
  transition: opacity .32s ease;
}
#lobby.gone { opacity: 0; pointer-events: none; }

#upgrades {
  position: absolute;
  left: 50%; bottom: 6.2rem;
  transform: translateX(-50%);
  display: flex; gap: .7rem;
  transition: transform .42s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
#upgrades.hidden { transform: translateX(-50%) translateY(9rem); opacity: 0; pointer-events: none; }

.upg {
  width: 7.4rem;
  background: var(--panel);
  border: .18rem solid rgba(255,255,255,.9);
  border-radius: 1rem;
  box-shadow: 0 .35rem 0 rgba(10,28,78,.6), 0 .7rem 1rem rgba(0,0,0,.25);
  padding: .5rem .4rem .55rem;
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  text-align: center;
  overflow: visible;
  animation: cardIn .45s cubic-bezier(.34,1.56,.64,1) backwards;
}
.upg:nth-child(1) { animation-delay: .05s; }
.upg:nth-child(2) { animation-delay: .12s; }
.upg:nth-child(3) { animation-delay: .19s; }
@keyframes cardIn { from { transform: translateY(2.5rem) scale(.8); opacity: 0; } }

.upg .glyph {
  width: 3.1rem; height: 3.1rem;
  border-radius: .8rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(180deg, #7fb0ff, #3e6fd8);
  border: .15rem solid rgba(255,255,255,.85);
  box-shadow: inset 0 -.2rem .3rem rgba(0,0,0,.25);
}
.upg .nm { font-family: var(--font-fat); font-size: .68rem; letter-spacing: .02em; line-height: 1; }
.upg .lv {
  font-family: var(--font-fat); font-size: .82rem;
  background: rgba(9,24,70,.75); border-radius: .5rem;
  padding: .12rem .55rem; border: .1rem solid rgba(255,255,255,.35);
}
.upg .cost {
  display: flex; align-items: center; justify-content: center; gap: .28rem;
  font-family: var(--font-fat); font-size: .95rem;
  background: linear-gradient(180deg, #ffd85c, #f0a800);
  color: #4a2a00;
  border: .14rem solid #fff;
  border-radius: .7rem;
  padding: .18rem .6rem;
  width: 100%;
  box-shadow: 0 .2rem 0 #b06f00;
}
.upg.cant .cost { background: linear-gradient(180deg, #9fb0cd, #6d7f9f); color: #2a3652; box-shadow: 0 .2rem 0 #46536e; }
.upg .cost .chip-ico { width: 1.15rem; height: 1.15rem; }
.upg.maxed .cost { background: linear-gradient(180deg, #8ef07a, #3fae1c); color: #17400a; box-shadow: 0 .2rem 0 #2b7a10; }
.upg.bump { animation: bump .32s cubic-bezier(.34,1.7,.64,1); }
@keyframes bump { 50% { transform: scale(1.12) translateY(-.2rem); } }

#bottomNav {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 5.2rem;
  display: flex;
  transition: transform .42s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
#bottomNav.hidden { transform: translateY(6rem); opacity: 0; pointer-events: none; }

.nav-btn {
  flex: 1;
  background: linear-gradient(180deg, #2f56b8 0%, #1b357e 100%);
  border-top: .2rem solid rgba(255,255,255,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem;
  font-family: var(--font-fat);
  font-size: .95rem;
  border-radius: 0;
  box-shadow: none;
}
.nav-btn.active {
  background: linear-gradient(180deg, #37b0ff 0%, #1b6fd8 100%);
  border-top-color: #9ee4ff;
}
.nav-btn .ico { font-size: 1.9rem; line-height: 1; }

#tutorial {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity .4s ease, transform .4s ease;
}
#tutorial.gone { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
#tutorial .big { font-family: var(--font-fat); font-size: 2.1rem; }
#tutorial .sub { font-size: 1rem; font-weight: 800; opacity: .95; margin-top: .2rem; }
/* Returning players get the short version - the hand and the sub-line drop away. */
#tutorial.brief .hand { display: none; }
#tutorial.brief .sub { display: none; }
#tutorial.brief .big { font-size: 1.5rem; opacity: .9; }
#tutorial .hand {
  width: 2.6rem; height: 2.6rem; margin: 0 auto .7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.98) 0%, rgba(214,236,255,.9) 55%, rgba(143,189,245,.85) 100%);
  border: .2rem solid rgba(255,255,255,.95);
  box-shadow: 0 .25rem .7rem rgba(20,40,110,.35), 0 0 0 .55rem rgba(255,255,255,.18);
  animation: dragHint 2.1s ease-in-out infinite;
}
@keyframes dragHint {
  0%   { transform: translate(-2.6rem, 1.2rem) scale(.9); opacity: .55; }
  25%  { transform: translate(0, 0) scale(1); opacity: 1; }
  60%  { transform: translate(2.8rem, -1.4rem) scale(1); opacity: 1; }
  100% { transform: translate(-2.6rem, 1.2rem) scale(.9); opacity: .55; }
}

#lobbyTitle {
  position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  text-align: center;
  width: 90%;
  transition: opacity .3s ease, transform .35s ease;
}
#lobbyTitle .t1 { font-family: var(--font-fat); font-size: 2.5rem; line-height: .95; color: #eaff7a; }
#lobbyTitle .t2 { font-family: var(--font-fat); font-size: 2.5rem; line-height: .95; color: #fff; }
#lobbyTitle.gone { opacity: 0; transform: translateX(-50%) translateY(-2rem); }

/* ---------------- run HUD ---------------- */

#hud { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
#hud.on { opacity: 1; }

/* Portrait phones are the tightest case, so the HUD hugs the four corners and never
   stacks two widgets in the same place. */
#runPanel {
  position: absolute; top: .9rem; left: .8rem;
  background: linear-gradient(180deg, rgba(24,48,120,.95), rgba(12,28,80,.95));
  border: .17rem solid rgba(255,255,255,.85);
  border-radius: 1.1rem;
  padding: .25rem .95rem .45rem;
  box-shadow: 0 .3rem 0 rgba(8,20,60,.55);
  text-align: center;
  min-width: 6.6rem;
  white-space: nowrap;
}
#timer {
  font-family: var(--font-fat);
  font-size: 1.6rem;
  line-height: 1.1;
  transition: color .2s ease;
}
#timer.urgent { color: #ff8d8d; animation: tick 1s steps(2) infinite; }
@keyframes tick { 50% { opacity: .55; } }

/* Plain inline flow rather than flex: a flex row's intrinsic width does not feed the
   panel's max-content sizing reliably, and the score then spills out of the pill. */
#scoreWrap {
  border-top: .1rem solid rgba(255,255,255,.22);
  padding-top: .25rem;
  margin-top: .1rem;
  white-space: nowrap;
}
#scoreVal {
  font-family: var(--font-fat); font-size: 1.35rem; line-height: 1.05;
  color: var(--yellow);
}
/* Named distinctly: `.pop` belongs to the floating world popups and would otherwise
   drag its position:absolute onto the score. */
/* Two identical animations under different names: alternating them restarts the
   effect without a layout read, which is what `void offsetWidth` would cost. */
#scoreVal.bump-a { animation: scorePop .22s cubic-bezier(.34,1.7,.64,1); }
#scoreVal.bump-b { animation: scorePopB .22s cubic-bezier(.34,1.7,.64,1); }
@keyframes scorePopB { 50% { transform: scale(1.22); } }
@keyframes scorePop { 50% { transform: scale(1.22); } }
#levelVal { font-family: var(--font-fat); font-size: .95rem; opacity: .95; color: #bfe0ff; }

#lbPanel {
  position: absolute; top: .9rem; right: .8rem;
  width: 9.8rem;
  display: flex; flex-direction: column; gap: .18rem;
}
.lb-row {
  display: flex; align-items: center; gap: .35rem;
  background: rgba(16,36,96,.8);
  border-radius: .6rem;
  padding: .16rem .5rem;
  font-size: .82rem;
  font-weight: 800;
  border: .1rem solid rgba(255,255,255,.22);
  transition: background .2s ease, transform .2s cubic-bezier(.34,1.6,.64,1);
}
.lb-row .pos { width: 1.9rem; font-family: var(--font-fat); font-size: .74rem; opacity: .95; }
.lb-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .lv { font-family: var(--font-fat); }
.lb-row.me { background: linear-gradient(90deg, #3aa0ff, #1e63d8); border-color: #a9e0ff; }
.lb-row.first .pos { color: var(--yellow); }
.lb-row.moved { transform: scale(1.06); }

#bossBar {
  /* Clears the five-row leaderboard above it. */
  position: absolute; top: 9.8rem; right: .8rem;
  width: 9.8rem;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff5a5a, #b81b2f);
  border: .16rem solid #fff;
  border-radius: .7rem;
  padding: .22rem .5rem;
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-fat); font-size: .78rem;
  box-shadow: 0 .25rem 0 rgba(90,10,20,.7);
  opacity: 0; transform: translateX(3rem);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.5,.64,1);
}
#bossBar.on { opacity: 1; transform: none; }
#bossBar .pulse { animation: bossPulse 1.1s ease-in-out infinite; }
@keyframes bossPulse { 50% { transform: scale(1.14); } }

#fxChips {
  position: absolute; left: .8rem; top: 8.2rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.fx-chip {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(16,36,96,.82);
  border: .14rem solid rgba(255,255,255,.6);
  border-radius: .8rem;
  padding: .2rem .6rem .2rem .25rem;
  font-family: var(--font-fat); font-size: .8rem;
  animation: chipIn .28s cubic-bezier(.34,1.6,.64,1);
}
@keyframes chipIn { from { transform: translateX(-2rem) scale(.7); opacity: 0; } }
.fx-chip .dot { width: 1.4rem; height: 1.4rem; border-radius: .45rem; border: .12rem solid rgba(255,255,255,.8); }
.fx-chip .bar { width: 2.6rem; height: .42rem; background: rgba(0,0,0,.4); border-radius: .3rem; overflow: hidden; }
.fx-chip .bar i { display: block; height: 100%; background: #fff; border-radius: .3rem; }

#boostHint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  font-family: var(--font-fat); font-size: .9rem;
  background: rgba(16,36,96,.72); border-radius: .8rem; padding: .28rem 1rem;
  border: .12rem solid rgba(255,255,255,.4);
  opacity: 0; transition: opacity .3s ease;
}
#boostHint.on { opacity: 1; }

/* Nameplates above snakes */
#labels { position: absolute; inset: 0; overflow: hidden; }
.plate {
  position: absolute;
  transform: translate(-50%, -100%);
  text-align: center;
  font-weight: 900;
  font-size: .8rem;
  line-height: 1.02;
  white-space: nowrap;
  will-change: transform;
  text-shadow: -0.07rem -0.07rem 0 #12224d, 0.07rem -0.07rem 0 #12224d,
               -0.07rem 0.07rem 0 #12224d, 0.07rem 0.07rem 0 #12224d;
}
.plate .lv { font-size: .72rem; opacity: .95; display: block; }
.plate.me { color: #fff; font-size: .92rem; }
.plate.boss { color: #ffe14d; font-size: 1.05rem; }

/* ---------------- floating popups ---------------- */

#popups { position: absolute; inset: 0; overflow: hidden; }
.pop {
  position: absolute;
  font-family: var(--font-fat);
  font-size: 1.1rem;
  transform: translate(-50%, -50%);
  animation: popUp .85s ease-out forwards;
  text-shadow: -0.08rem -0.08rem 0 #12224d, 0.08rem -0.08rem 0 #12224d,
               -0.08rem 0.08rem 0 #12224d, 0.08rem 0.08rem 0 #12224d;
}
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  22% { opacity: 1; transform: translate(-50%, -110%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}

/* ---------------- toasts ---------------- */

#toasts {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 90%;
  z-index: 60;
}
.toast {
  background: linear-gradient(180deg, #2f56b8, #16307e);
  border: .18rem solid rgba(255,255,255,.9);
  border-radius: .9rem;
  padding: .65rem 1.2rem;
  font-family: var(--font-fat);
  font-size: 1.05rem;
  text-align: center;
  box-shadow: 0 .35rem 0 rgba(8,20,60,.55), 0 .6rem 1.2rem rgba(0,0,0,.3);
  animation: toastIn .3s cubic-bezier(.34,1.6,.64,1), toastOut .3s ease 1.7s forwards;
  max-width: 26rem;
}
.toast.warn { background: linear-gradient(180deg, #ff8a3a, #cc4a00); }
.toast.bad { background: linear-gradient(180deg, #ff6b6b, #b71d2c); }
.toast.good { background: linear-gradient(180deg, #6fd83a, #2f8b12); }
@keyframes toastIn { from { transform: translateY(-1.6rem) scale(.8); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-1.2rem) scale(.94); opacity: 0; } }

/* ---------------- full-screen panels ---------------- */

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility .26s;
  z-index: 40;
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; }
.screen .veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(96,150,255,.55) 0%, rgba(20,40,110,.86) 70%);
  backdrop-filter: blur(2px);
}
.screen .card {
  position: relative;
  width: min(28rem, 92%);
  max-height: 88%;
  background: var(--panel);
  border: .22rem solid rgba(255,255,255,.95);
  border-radius: 1.5rem;
  box-shadow: 0 .6rem 0 rgba(10,28,78,.6), 0 1.2rem 2rem rgba(0,0,0,.35);
  padding: 1.2rem;
  display: flex; flex-direction: column; gap: .8rem;
  /* The page itself never scrolls, so a card taller than its clamp would put its
     buttons out of reach. Let the card scroll instead. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(2.5rem) scale(.86);
  opacity: 0;
  transition: transform .34s cubic-bezier(.34,1.5,.64,1), opacity .24s ease;
}
.screen.on .card { transform: none; opacity: 1; }

.card h2 {
  margin: 0; text-align: center;
  font-family: var(--font-fat); font-size: 1.9rem;
  letter-spacing: .02em;
}
.card .sub { text-align: center; font-weight: 800; font-size: .95rem; opacity: .9; margin-top: -.4rem; }
.row { display: flex; gap: .7rem; }
.row > * { flex: 1; }

/* skins */
#skinPreviewName { text-align: center; }
#skinPreviewName .nm { font-family: var(--font-fat); font-size: 1.5rem; }
.rarity {
  display: inline-block;
  font-family: var(--font-fat); font-size: .72rem;
  padding: .1rem .6rem; border-radius: .6rem;
  border: .12rem solid rgba(255,255,255,.8);
}
.rarity.Common { background: #6f86ad; }
.rarity.Rare { background: #2f9bff; }
.rarity.Epic { background: #9b4dff; }
.rarity.Legendary { background: linear-gradient(90deg, #ffb028, #ff4fa3); }

#skinGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
  overflow-y: auto;
  padding: .2rem;
  max-height: 22rem;
  -webkit-overflow-scrolling: touch;
}
.skin-cell {
  aspect-ratio: 1;
  border-radius: .85rem;
  /* Bright card so the skin colour is the loudest thing in the cell. */
  background: linear-gradient(180deg, #f2f7ff 0%, #cfe0f8 100%);
  border: .16rem solid rgba(255,255,255,.9);
  box-shadow: 0 .2rem 0 rgba(10,28,78,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem;
  position: relative;
  overflow: hidden;
  padding: .2rem;
  animation: cellIn .3s cubic-bezier(.34,1.5,.64,1) backwards;
}
@keyframes cellIn { from { transform: scale(.6); opacity: 0; } }

/* A tiny snake made of three boxes - no image assets, scales with the UI. */
.snakelet { position: relative; width: 78%; height: 46%; }
.snakelet .body {
  position: absolute; left: 0; top: 22%;
  width: 78%; height: 56%;
  border-radius: 999px;
  border: .13rem solid #16233c;
  box-shadow: inset 0 -.18rem .22rem rgba(0,0,0,.22);
}
.snakelet .head {
  position: absolute; right: 0; top: 4%;
  width: 42%; height: 92%;
  border-radius: 45% 55% 55% 45% / 50%;
  border: .13rem solid #16233c;
  box-shadow: inset 0 -.18rem .22rem rgba(0,0,0,.2);
}
.snakelet .eye {
  position: absolute; right: 17%; top: 24%;
  width: 15%; height: 26%;
  border-radius: 50%;
  background: #fff;
  border: .1rem solid #16233c;
  box-shadow: inset -.06rem 0 0 .1rem #16233c;
}
.snakelet.big { width: 9.5rem; height: 3.2rem; margin: .2rem auto .1rem; }
.snakelet.big .eye { width: 11%; }

.skin-cell .tag {
  font-family: var(--font-fat); font-size: .68rem;
  display: flex; align-items: center; gap: .2rem;
  background: rgba(14,32,88,.9);
  color: #fff;
  border-radius: .5rem;
  padding: .05rem .4rem;
}
.skin-cell .tag .chip-ico { width: .9rem; height: .9rem; }
.skin-cell.owned .tag { background: rgba(20,90,20,.9); color: #d3ffb8; }
.skin-cell.sel { border-color: #2ce39a; box-shadow: 0 0 0 .22rem rgba(44,227,154,.55), 0 .3rem .7rem rgba(0,0,0,.3); }
.skin-cell .lock { position: absolute; top: .1rem; left: .25rem; font-size: .8rem; opacity: .75; display: none; }
.skin-cell.locked .lock { display: block; }
.skin-cell .check { position: absolute; top: .1rem; right: .25rem; font-size: 1rem; }

/* rank / results */
#rankList {
  display: flex; flex-direction: column; gap: .3rem;
  /* Takes the slack inside the card so CONTINUE always stays visible. */
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
}
.rank-row {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(12,30,86,.75);
  border-radius: .7rem;
  padding: .32rem .6rem;
  font-weight: 800; font-size: 1rem;
  border: .12rem solid rgba(255,255,255,.2);
  animation: rowIn .3s cubic-bezier(.34,1.5,.64,1) backwards;
}
@keyframes rowIn { from { transform: translateX(-1.4rem); opacity: 0; } }
.rank-row .pos {
  width: 2.4rem; font-family: var(--font-fat); font-size: .85rem;
  text-align: center; border-radius: .4rem; padding: .05rem 0;
  background: rgba(255,255,255,.16);
}
.rank-row.p1 .pos { background: linear-gradient(180deg, #ffd85c, #e59500); color: #4a2a00; }
.rank-row.p2 .pos { background: linear-gradient(180deg, #e6eefc, #9fb2ce); color: #2b3a56; }
.rank-row.p3 .pos { background: linear-gradient(180deg, #ffb277, #c96a20); color: #4a2000; }
.rank-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .sc { font-family: var(--font-fat); display: flex; align-items: center; gap: .25rem; }
.rank-row.me { background: linear-gradient(90deg, #63e03a, #2f9b12); border-color: #d3ffb8; }

#myRank {
  text-align: center;
  background: rgba(10,26,80,.7);
  border-radius: 1rem;
  border: .16rem solid rgba(255,255,255,.5);
  padding: .6rem;
}
#myRank .big { font-family: var(--font-fat); font-size: 2.4rem; line-height: 1; color: var(--yellow); }
#myRank .lbl { font-family: var(--font-fat); font-size: .9rem; opacity: .9; }

/* reward */
#rewardCard .chest {
  width: 8.5rem; height: 8.5rem; margin: 0 auto;
  flex: 0 0 auto;
  border-radius: 1.4rem;
  background: radial-gradient(circle at 40% 32%, #ffe9a0 0%, var(--yellow) 40%, #d98a00 100%);
  border: .25rem solid #fff;
  box-shadow: 0 .5rem 0 #a86a00, 0 0 2.5rem rgba(255,220,100,.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 4.4rem;
  animation: chestPop .55s cubic-bezier(.34,1.7,.64,1), floaty 2.4s ease-in-out .55s infinite;
}
@keyframes chestPop { from { transform: scale(.3) rotate(-16deg); opacity: 0; } }
@keyframes floaty { 50% { transform: translateY(-.5rem); } }

.reward-line {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  background: rgba(10,26,80,.7);
  border-radius: .9rem; padding: .5rem;
  border: .14rem solid rgba(255,255,255,.4);
}
.reward-line .item { display: flex; align-items: center; gap: .35rem; font-family: var(--font-fat); font-size: 1.35rem; }

#wheel {
  position: relative;
  height: 4.6rem;
  display: flex; align-items: center; justify-content: center; gap: .25rem;
}
.wheel-seg {
  width: 3.1rem; height: 2.6rem;
  border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-fat); font-size: 1.25rem;
  border: .14rem solid rgba(255,255,255,.85);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  filter: saturate(.75) brightness(.82);
}
.wheel-seg.hot { transform: scale(1.24) translateY(-.2rem); filter: none; box-shadow: 0 0 1.2rem rgba(255,255,255,.85); }
.wheel-seg.s2 { background: linear-gradient(180deg, #ff7ec8, #d62b96); }
.wheel-seg.s3 { background: linear-gradient(180deg, #62e7ff, #1897d0); }
.wheel-seg.s4 { background: linear-gradient(180deg, #a4ff5f, #3fae1c); }

/* death / revive */
#deathCard .lost { text-align: center; font-family: var(--font-fat); font-size: 1.15rem; color: #ffd6d6; }
#reviveTimer {
  width: 100%; height: .55rem; background: rgba(0,0,0,.35); border-radius: .3rem; overflow: hidden;
}
#reviveTimer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd21e, #ff6b6b); }

/* settings */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10,26,80,.6);
  border-radius: .8rem; padding: .55rem .9rem;
  font-family: var(--font-fat); font-size: 1.05rem;
  border: .14rem solid rgba(255,255,255,.35);
}
.switch {
  width: 3.6rem; height: 1.9rem; border-radius: 1rem;
  background: #4b5c80; position: relative; border: .14rem solid rgba(255,255,255,.6);
  transition: background .2s ease;
  padding: 0;
}
.switch i {
  position: absolute; top: .12rem; left: .12rem;
  width: 1.36rem; height: 1.36rem; border-radius: 50%;
  background: #fff; transition: transform .22s cubic-bezier(.34,1.6,.64,1);
}
.switch.on { background: var(--green-2); }
.switch.on i { transform: translateX(1.66rem); }

/* ad overlay stub (only outside the Playables env) */
#adOverlay {
  position: absolute; inset: 0; z-index: 90;
  background: #06122e;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
#adOverlay.on { opacity: 1; visibility: visible; pointer-events: auto; }
#adOverlay .label { font-family: var(--font-fat); font-size: 1.4rem; letter-spacing: .1em; }
#adOverlay .ring {
  width: 5rem; height: 5rem; border-radius: 50%;
  border: .4rem solid rgba(255,255,255,.22);
  border-top-color: var(--yellow);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* boot */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, #8fd0ff 0%, #d6f0ff 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem;
  transition: opacity .45s ease, visibility .45s;
}
#boot.gone { opacity: 0; visibility: hidden; }
#boot .logo { font-family: var(--font-fat); font-size: 2.6rem; line-height: .95; text-align: center; color: #6fd83a; }
#boot .logo span { color: #fff; display: block; }
#boot .bar { width: 60%; max-width: 20rem; height: .9rem; background: rgba(20,40,110,.28); border-radius: .5rem; overflow: hidden; border: .14rem solid rgba(255,255,255,.8); }
#boot .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd21e, #6fd83a); transition: width .25s ease; }

/* big centred announcements (GO / BOSS / TIME UP) */
#announce {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-fat);
  font-size: 3.2rem;
  opacity: 0;
  z-index: 30;
}
#announce.show { animation: announce 1.35s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes announce {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
  28% { transform: translate(-50%,-50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}

/* vignette + damage flash */
#flash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,60,60,0) 40%, rgba(255,40,40,.55) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
#flash.on { opacity: 1; transition: opacity .06s ease; }

/* Landscape phones: shrink the vertical furniture so the arena keeps the middle. */
/* Landscape has room to breathe: widen the board and float the timer back to centre. */
@media (min-aspect-ratio: 1/1) {
  /* Landscape puts the upgrade row much closer to the middle, so lift the hint. */
  #tutorial { top: 34%; }
  #lbPanel, #bossBar { width: 12rem; }
  #bossBar { top: 9.8rem; }
  #runPanel { left: 50%; transform: translateX(-50%); min-width: 8.5rem; }
  #timer { font-size: 1.9rem; }
  #scoreVal { font-size: 1.6rem; }
  #fxChips { top: .9rem; }
}


/* ---------------- in-run rewarded boost rail ---------------- */

#boostRail {
  position: absolute; right: .7rem; bottom: 1.2rem;
  transform: translateX(6rem);
  display: flex; flex-direction: column; gap: .55rem;
  opacity: 0;
  transition: transform .42s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
#boostRail.on { transform: none; opacity: 1; }

.boost-btn {
  width: 3.9rem; height: 3.9rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, #ffd85c 0%, #f09000 100%);
  border: .18rem solid #fff;
  box-shadow: 0 .35rem 0 #a86000, 0 .6rem .9rem rgba(0,0,0,.28);
  color: #4a2a00;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem;
  overflow: visible;
  animation: railIn .4s cubic-bezier(.34,1.5,.64,1) backwards;
}
@keyframes railIn { from { transform: translateX(3rem) scale(.7); opacity: 0; } }
.boost-btn .bico { font-size: 1.65rem; line-height: 1; }
.boost-btn .blabel { font-family: var(--font-fat); font-size: .58rem; letter-spacing: .02em; }
.boost-btn.spent {
  background: linear-gradient(180deg, #9fb0cd, #63739a);
  box-shadow: 0 .35rem 0 #3f4c69;
  color: #2b3752;
  filter: saturate(.5);
}
.boost-btn.spent .ad-badge { display: none; }

/* ---------------- kill counter ---------------- */

#killPill {
  position: absolute; left: .8rem; bottom: 1.2rem;
  display: flex; align-items: center; gap: .35rem;
  background: rgba(16,36,96,.82);
  border: .14rem solid rgba(255,255,255,.6);
  border-radius: .9rem;
  padding: .25rem .8rem .25rem .5rem;
  font-family: var(--font-fat); font-size: 1.05rem;
  box-shadow: 0 .25rem 0 rgba(8,20,60,.5);
}
#killPill .sk { font-size: 1.2rem; }

/* The bottom-nav button sits flush with the screen edge, so its badge tucks inside. */
.nav-btn .ad-badge { top: .35rem; right: .5rem; }
#killPill.bump-a { animation: bump .3s cubic-bezier(.34,1.7,.64,1); }
#killPill.bump-b { animation: bumpB .3s cubic-bezier(.34,1.7,.64,1); }
@keyframes bumpB { 50% { transform: scale(1.12) translateY(-.2rem); } }


/* ---------------- very short viewports (21:9 / 32:9 landscape phones) ----------------
   Certification requires every aspect ratio from 9:32 to 32:9 to stay playable, and at
   320px tall the vertical boost rail would run into the leaderboard. Lay it out along
   the bottom edge instead and tighten the corner widgets. */
@media (max-height: 540px) {
  #tutorial { top: 30%; }
  #tutorial .sub { display: none; }
  #tutorial .big { font-size: 1.5rem; }
  #rewardCard .chest { width: 5rem; height: 5rem; font-size: 2.6rem; }
  #wheel { height: 3.2rem; }
  .wheel-seg { width: 2.4rem; height: 2rem; font-size: 1rem; }
  #myRank .big { font-size: 1.7rem; }
  .rank-row { font-size: .85rem; padding: .2rem .5rem; }
  #boostRail { flex-direction: row; bottom: .5rem; right: .6rem; gap: .45rem; }
  #boostRail { transform: translateY(6rem); }
  #boostRail.on { transform: none; }
  .boost-btn { width: 3.2rem; height: 3.2rem; }
  .boost-btn .bico { font-size: 1.3rem; }
  .boost-btn .blabel { font-size: .5rem; }

  #lbPanel { width: 8.6rem; }
  .lb-row { font-size: .72rem; padding: .1rem .4rem; }
  .lb-row .pos { width: 1.7rem; font-size: .66rem; }

  #bossBar { top: 8.8rem; width: 8.6rem; font-size: .7rem; }
  #killPill { bottom: .6rem; font-size: .9rem; padding: .18rem .6rem .18rem .4rem; }
  #boostHint { bottom: .5rem; font-size: .78rem; }
  #upgrades { bottom: 5.4rem; }
  .upg { width: 6.4rem; }
  #bottomNav { height: 4.4rem; }
  #lobbyTitle { top: 4%; }
  #lobbyTitle .t1, #lobbyTitle .t2 { font-size: 1.8rem; }
  #tutorial .hand { display: none; }
  .screen .card { max-height: 94%; padding: .8rem; gap: .5rem; }
  #skinGrid { max-height: 9rem; grid-template-columns: repeat(6, 1fr); }
  .card h2 { font-size: 1.4rem; }
  .btn { padding: .55rem 1.1rem; font-size: 1.1rem; }
  .btn.big { font-size: 1.3rem; padding: .7rem 1.6rem; }
  .snakelet.big { height: 2.2rem; width: 7rem; }
}