* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0a0710;
  color: #f4e9ec;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  user-select: none; -webkit-user-select: none;
  cursor: crosshair;
  /* mobile: no rubber-band / pull-to-refresh yanking the page mid-hunt, and no
     grey tap flash or long-press callout on the game surface */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* the game surface eats all touch gestures itself (the joystick), so the
   browser never pans, zooms or double-tap-zooms over it */
#game { display: block; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; }

.hidden { display: none !important; }
.sub { opacity: .55; font-size: 13px; }

/* ---------- HUD ---------- */
/* v3.7 — height:100dvh tracks the VISIBLE viewport as the mobile URL bar slides,
   so bottom-pinned children (#touch thumbs, #stats, #abilityWrap) never hide under
   the browser chrome (100vh is the taller layout viewport; dvh is what's on screen). */
#hud { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: 100dvh; pointer-events: none; }

/* kill feed — top left */
#killfeed {
  position: absolute; left: 16px; top: 14px;
  list-style: none; max-width: 340px;
  font-size: 13px; letter-spacing: .2px;
}
#killfeed li {
  padding: 4px 10px; margin-bottom: 4px;
  background: rgba(18, 8, 20, .6);
  border-left: 3px solid #d31b3e;
  border-radius: 6px;
  text-shadow: 0 1px 4px #000;
  transition: opacity .6s;
}
#killfeed li.stake { border-left-color: #ff2e57; background: rgba(60, 6, 20, .7); }
#killfeed li.holy { border-left-color: #e8c86a; }
#killfeed li.coven { border-left-color: #5ae68c; }
#killfeed li.coven b { color: #93e6a8; }
#killfeed li.fade { opacity: 0; }
#killfeed b { color: #ff8ea0; font-weight: 700; }
#killfeed li.holy b { color: #e8c86a; }

/* WHAT'S HAPPENING — the world's live state, left column between the kill feed
   and the contract card. Clamped to 46vh so it can never grow into either. */
#ticker {
  position: absolute; left: 16px; top: 196px;
  /* max() floors it at 0: on a short viewport calc() alone goes negative, which is
     an invalid max-height — the declaration would be dropped and the strip would
     grow straight through the contract card below it. */
  width: 236px; max-height: max(0px, calc(46vh - 212px)); overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
}
#ticker .pill {
  padding: 5px 10px; border-radius: 8px;
  background: rgba(18, 8, 20, .72);
  border: 1px solid rgba(255, 91, 120, .25);
  border-left: 3px solid #d31b3e;
  text-shadow: 0 1px 4px #000;
}
#ticker .pT {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ticker .pT b { font-variant-numeric: tabular-nums; opacity: .85; font-weight: 700; }
#ticker .pH {
  display: block; font-size: 10.5px; letter-spacing: .3px; opacity: .5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ticker .moon  { border-left-color: #ff2e57; color: #ff8ea0; }
#ticker .king  { border-left-color: #e8c86a; color: #e8c86a; }
#ticker .tomb  { border-left-color: #a02fd0; color: #d8b0ff; }
#ticker .inq,
#ticker .hunt  { border-left-color: #e8c86a; color: #f4ecd8; }
#ticker .siege { border-left-color: #ffb054; color: #ffb054; }
#ticker .cvn   { border-left-color: #ff5b78; color: #ffd0d8; }
#ticker .omen  { border-left-color: #bfa8d4; color: #bfa8d4; }
/* the race is on — only the timed relic pulses. 1s period so it restarts in step
   with the countdown rewrite instead of stuttering mid-fade. */
#ticker .tomb { animation: pulse 1s ease-in-out infinite; }

/* Pact contract — left side, under the kill feed */
#contract {
  position: absolute; left: 16px; top: 46%;
  width: 210px; padding: 10px 14px;
  background: rgba(30, 10, 18, .78);
  border: 1px solid rgba(211, 27, 62, .45);
  border-left: 3px solid #d31b3e;
  border-radius: 10px;
}
#contract .cTitle { font-size: 13px; font-weight: 800; color: #ff8ea0; letter-spacing: .4px; }
#contract #cDesc { margin: 3px 0 6px; }
#cBar { height: 5px; border-radius: 999px; background: rgba(255,91,120,.15); overflow: hidden; }
#cFill { height: 100%; width: 0%; background: linear-gradient(90deg, #d31b3e, #ff5b78); transition: width .3s; }
#cMeta { margin-top: 4px; font-variant-numeric: tabular-nums; }

/* announcements — top center */
#announce {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%) translateY(-10px);
  /* v3.7 — height-aware sizing: vmin shrinks with the SHORTER dimension, so a long
     line can never fill a short landscape phone (the old max-width:760 rule missed
     landscape, which is ~844 wide but only ~390 tall). */
  font-size: clamp(16px, 4.6vmin, 26px); font-weight: 800; letter-spacing: .5px; text-align: center;
  max-width: min(84vw, 620px);
  text-shadow: 0 2px 16px #000, 0 0 30px rgba(211, 27, 62, .5);
  opacity: 0; transition: opacity .3s, transform .3s;
  white-space: normal; line-height: 1.2;
}
#announce.shown { opacity: 1; transform: translateX(-50%) translateY(0); }
#announce.big { font-size: clamp(20px, 6.4vmin, 36px); }
#announce.blood { color: #ff5b78; }
#announce.gold  { color: #e8c86a; text-shadow: 0 2px 16px #000, 0 0 34px rgba(232, 200, 106, .6); }
#announce.holy  { color: #f4ecd8; text-shadow: 0 2px 16px #000, 0 0 34px rgba(191, 224, 255, .6); }
#announce.stake { color: #ff2e57; }
#announce.grey  { color: #c9c2d4; }

/* Crimson Trial ticker */
#trial {
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  font-size: 15px; font-weight: 700; color: #e8c86a;
  background: rgba(30, 12, 8, .75);
  border: 1px solid rgba(232, 200, 106, .4);
  padding: 6px 18px; border-radius: 999px;
  text-shadow: 0 1px 6px #000;
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}

/* Wrath meter */
#wrathWrap {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: min(340px, 92vw); text-align: center;
}
#kingName {
  font-size: clamp(11px, 3.2vmin, 14px); font-weight: 800; color: #e8c86a;
  text-shadow: 0 1px 8px #000; margin-bottom: 4px; letter-spacing: 1px;
}
#wrathBar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(18, 8, 20, .7);
  border: 1px solid rgba(232, 200, 106, .45);
}
#wrathFill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e8c86a, #fff6d8);
  box-shadow: 0 0 12px rgba(232, 200, 106, .8);
  transition: width .4s;
}
.wrathLabel {
  margin-top: 3px; font-size: 9px; letter-spacing: 3px; color: #e8c86a; opacity: .8;
}

/* leaderboard */
#board {
  position: absolute; right: 16px; top: 16px;
  min-width: 180px;
  background: rgba(18, 8, 20, .72);
  border: 1px solid rgba(255, 91, 120, .25);
  border-radius: 12px;
  padding: 10px 12px 12px;
  backdrop-filter: blur(6px);
}
#board h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: #ff8ea0; margin-bottom: 8px; font-weight: 700;
}
#board ol { list-style: none; }
#board li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
#board li:last-child { border-bottom: 0; }
#board li span:last-child { color: #ff9db0; font-variant-numeric: tabular-nums; }

/* stats + evolution progress — bottom left */
#stats {
  position: absolute; left: 16px; bottom: 16px;
  font-size: 20px; letter-spacing: .3px;
  text-shadow: 0 2px 8px #000;
}
#stats #evoName { color: #ff5b78; font-weight: 700; }
#stats #mass { font-weight: 700; font-variant-numeric: tabular-nums; }
#stats .sub { opacity: .55; font-size: 14px; }
#stats .dot { opacity: .4; margin: 0 6px; }
#evoBar {
  margin-top: 6px; width: 220px; height: 6px; border-radius: 999px;
  background: rgba(255, 91, 120, .15); overflow: hidden;
}
#evoFill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #a02fd0, #d31b3e);
  box-shadow: 0 0 8px rgba(211, 27, 62, .8);
  transition: width .3s;
}
#evoNext { margin-top: 3px; }

/* ability + badges — bottom center */
#abilityWrap {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(96vw, 720px); }
.badge {
  font-size: clamp(10px, 2.9vmin, 12px); font-weight: 800; letter-spacing: .5px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(18, 8, 20, .8);
  border: 1px solid rgba(255, 91, 120, .5);
  text-shadow: 0 1px 4px #000;
  animation: pulse 1.2s ease-in-out infinite;
}
.badge.stake  { color: #ff2e57; border-color: #ff2e57; }
.badge.frenzy { color: #ff5b78; }
.badge.burn   { color: #ffb054; border-color: rgba(255, 176, 84, .6); }
.badge.gold   { color: #e8c86a; border-color: rgba(232, 200, 106, .6); }
.badge.holy   { color: #f4ecd8; border-color: rgba(191, 224, 255, .6); }
.badge.hex    { color: #c9a0ff; border-color: rgba(176, 107, 255, .6); }   /* v3.6.2: mesmerize/weaken debuffs */
@keyframes pulse { 50% { opacity: .65; } }

#ability { display: flex; align-items: center; gap: 10px; }
#abilityIconWrap {
  position: relative; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(18, 8, 20, .8);
  border: 1px solid rgba(255, 91, 120, .4);
  display: grid; place-items: center; font-size: 24px;
  overflow: hidden;
}
#abilityCd { position: absolute; inset: 0; border-radius: 12px; }
#abilityName {
  font-size: 14px; font-weight: 700; color: #ff8ea0;
  text-shadow: 0 1px 6px #000;
}
#hint { font-size: 11px; opacity: .45; letter-spacing: .4px; white-space: nowrap; }
#hint b { color: #ff8ea0; }

/* minimap — bottom right */
#mapWrap { position: absolute; right: 16px; bottom: 16px; text-align: right; }
#dayBadge {
  display: inline-block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(18, 8, 20, .75);
  border: 1px solid rgba(255, 91, 120, .3);
}
#dayBadge.day { color: #ffd98a; border-color: rgba(232, 200, 106, .55); }
#dayBadge.night { color: #9db4ff; }
#dayBadge.moon {
  color: #ff2e57; border-color: #ff2e57; font-weight: 800;
  animation: pulse 1s ease-in-out infinite;
}
#minimap {
  display: block; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

#deathRecords { font-size: 13px; margin-bottom: 14px; }
#deathRecords .best { color: #e8c86a; font-weight: 800; }
#deathTip { color: #bfa8d4; font-style: italic; max-width: 360px; margin: 2px auto 6px; }

/* disconnect overlay */
#disc {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(6, 3, 10, .8);
  pointer-events: auto;
}
#disc .card {
  text-align: center; padding: 34px 46px;
  background: rgba(20, 8, 22, .9);
  border: 1px solid rgba(255, 91, 120, .3);
  border-radius: 18px;
}
#disc h2 { font-size: 26px; margin-bottom: 6px; color: #ff8ea0; }
#disc .sub { margin-bottom: 18px; }
#disc button {
  padding: 12px 34px; font-size: 15px; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #e8264c, #a30f2e);
}

/* death screen */
#death {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(800px 500px at 50% 45%, rgba(60, 4, 18, .55), rgba(6, 3, 10, .82));
  pointer-events: auto;
}
#death .card {
  text-align: center; padding: 34px 46px;
  background: rgba(20, 8, 22, .85);
  border: 1px solid rgba(255, 91, 120, .3);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
#death h2 { font-size: 30px; margin-bottom: 8px; color: #ff5b78; }
#death p { font-size: 16px; margin-bottom: 4px; }
#death .sub { margin-bottom: 18px; }
#death button {
  padding: 12px 34px; font-size: 16px; font-weight: 700;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #e8264c, #a30f2e);
  box-shadow: 0 8px 24px rgba(180,20,50,.4);
}
#death button:hover { filter: brightness(1.1); }

/* ---------- Menu ---------- */
#menu {
  /* centre the card in the space ABOVE the pinned ad box (padding-bottom
     reserves it) so the footer never collides with the ad */
  position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: 100dvh; display: grid; place-items: center; padding: 20px 20px 104px;
  background:
    linear-gradient(rgba(10, 7, 16, .5), rgba(10, 7, 16, .8)),
    url('/assets/ui/menu_bg.png') center / cover no-repeat,
    radial-gradient(1200px 600px at 50% -10%, #2a0a18 0%, #0a0710 60%);
  transition: opacity .4s ease;
}
#menu.gone { opacity: 0; pointer-events: none; }

/* the card is a fixed, capped column so it never sprawls into the side panels;
   z-index keeps its interactive footer above the ad box in any overlap */
#menu .card {
  position: relative; z-index: 2;
  width: min(92vw, 452px); text-align: center; padding: 32px 38px 20px;
  background: rgba(19, 8, 21, .72);
  border: 1px solid rgba(255, 91, 120, .2);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- zone 1: identity --- */
.menuHero { margin-bottom: 24px; }
#menu h1 {
  font-size: clamp(38px, 7vw, 48px); font-weight: 800; letter-spacing: -1px; line-height: 1;
  background: linear-gradient(180deg, #ff8ea0, #d31b3e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
#menu .tag { opacity: .72; font-size: 14px; line-height: 1.5; max-width: 33ch; margin: 0 auto; }
#menu .tag b { color: #ffb3c0; font-weight: 700; }

/* --- zone 2: play --- */
.menuPlay { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#menu input {
  width: 100%; max-width: 296px; padding: 13px 16px; font-size: 16px; text-align: center;   /* 16px: iOS won't focus-zoom the menu */
  border-radius: 11px; border: 1px solid rgba(255,91,120,.26);
  background: #16091a; color: #fff; outline: none;
}
#menu input::placeholder { color: rgba(255, 208, 216, .4); }
#menu input:focus { border-color: #ff5b78; box-shadow: 0 0 0 3px rgba(255,91,120,.15); }
#menu #play {
  width: 100%; max-width: 296px; margin-top: 4px;
  padding: 15px; font-size: 16px; font-weight: 800; letter-spacing: .3px;
  border: 0; border-radius: 11px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #e8264c, #a30f2e);
  box-shadow: 0 10px 26px rgba(180,20,50,.42);
  transition: transform .08s, filter .2s;
}
#menu #play:hover { filter: brightness(1.12); }
#menu #play:active { transform: translateY(1px) scale(.99); }
#menu #invite {
  width: 100%; max-width: 296px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 10px; color: #ffd0d8;
  background: rgba(255,91,120,.08); border: 1px solid rgba(255,91,120,.22);
  transition: border-color .2s, color .2s, background .2s;
}
#menu #invite:hover { border-color: #ff5b78; color: #fff; background: rgba(255,91,120,.14); }
.invite-msg { min-height: 14px; font-size: 12px; color: #9be59b; }

/* --- zone 4: footer (secondary, deliberately quiet) --- */
.menuFoot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 91, 120, .12); }
#menu .controls {
  display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap;
  font-size: 12px; opacity: .58;
}
#menu .controls b { color: #ff8ea0; }
#menu .lobby {
  margin-top: 12px; font-size: 13px; color: #ff8ea0;
  font-variant-numeric: tabular-nums; min-height: 16px;
}
#menu #lastRun { margin-top: 2px; font-size: 12px; }
.footMeta {
  margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 11px; opacity: .5;
}
.footMeta .link { color: #9fd0ff; }
.footMeta .ver { letter-spacing: .4px; }
.dotSep { opacity: .5; }
.footLinks { margin-top: 8px; display: flex; justify-content: center; gap: 16px; min-height: 14px; }
.footLinks a { font-size: 11px; color: #bfa8d4; text-decoration: none; opacity: .7; transition: opacity .2s, color .2s; }
.footLinks a:hover { opacity: 1; color: #e8d8f8; }

/* the Hall + Chronicle are secondary — hide them before they'd crowd the card,
   not just on phones (they float at the corners; a mid-width screen collides) */
@media (max-width: 1200px) { #hallPanel, #chroniclePanel { display: none !important; } }

/* ---------- ad slot (menu) ---------- */
#adBox {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  text-align: center;
}
#adBox .adLabel {
  display: block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  opacity: .35; margin-bottom: 4px;
}
#adSlot {
  min-width: 320px; max-width: 728px; min-height: 50px;
  display: grid; place-items: center;
  background: rgba(18, 8, 20, .55);
  border: 1px dashed rgba(255, 91, 120, .25);
  border-radius: 10px;
}
.houseAd {
  display: block; padding: 14px 34px;
  color: #d8c2ee; text-decoration: none; font-size: 14px; letter-spacing: 1px;
}
.houseAd:hover { color: #fff; }
#removeAds {
  margin-top: 5px; font-size: 10px; letter-spacing: .5px;
  background: none; border: none; cursor: pointer;
  color: rgba(255, 255, 255, .4); text-decoration: underline;
}
#removeAds:hover { color: #ff8ea0; }

button.ghost {
  display: block; width: 100%; margin-top: 8px;
  padding: 10px; font-size: 13px; font-weight: 600;
  border-radius: 10px; cursor: pointer; color: #c9b6d4;
  background: none; border: 1px solid rgba(201, 182, 212, .3);
}
button.ghost:hover { border-color: rgba(201, 182, 212, .7); color: #fff; }

/* bot chatter in the kill feed */
#killfeed li.chat { opacity: .72; font-style: italic; }
#killfeed li.chat b { color: #c9a2ff; font-style: normal; }

/* rewarded-ad respawn button — set apart from "Rise Again" */
#respawnAd {
  background: linear-gradient(180deg, #caa23a, #7a5a12) !important;
  box-shadow: 0 8px 24px rgba(180, 140, 30, .35) !important;
}
#shareRun { margin-top: 10px; }
#shareMsg { min-height: 16px; margin-top: 8px; color: #e8c86a; }

/* rewarded-ad overlay (fake countdown, or the AdinPlay player once configured) */
#adPlaying {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(4, 2, 8, .92); pointer-events: auto;
}
#adPlaying .card { max-width: 94vw; }
#preroll:not(.hidden) { display: grid; place-items: center; min-width: min(920px, 90vw); min-height: 200px; }
#adPlaying .card {
  text-align: center; padding: 40px 60px; border-radius: 16px;
  background: rgba(16, 8, 18, .9); border: 1px solid rgba(255, 91, 120, .2);
}
#adCountdown { font-size: 64px; font-weight: 800; color: #e8c86a; line-height: 1.1; }

/* v3.7 CRITICAL — let the death / disconnect / ad overlays SCROLL to their buttons
   instead of clipping the card off both edges on a short (landscape) viewport. Their
   `place-items:center` still supplies horizontal + in-track centering; this only swaps
   the vertical mechanism to the overflow-safe `align-content:safe center` so a card
   taller than the screen top-aligns (never clips) and scrolls. Without this, a touch
   player who dies in landscape literally cannot reach "Rise Again" / "Return to Menu". */
#death, #disc, #adPlaying {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  align-content: safe center;
  justify-items: center;
  overscroll-behavior: contain;
  padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* menu invite link feedback */
.invite-msg { min-height: 15px; margin-top: 8px; font-size: 12px; color: #9be59b; }

/* in-game party pill */
#partyPill {
  /* sits below the wrath meter so a reigning King never covers your coven */
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px; cursor: pointer;
  font-size: 12px; letter-spacing: .3px; color: #ffd0d8;
  background: rgba(30, 10, 24, .7); border: 1px solid rgba(255, 91, 120, .35);
  pointer-events: auto; user-select: none; z-index: 6;
  /* the roster can run long — clip gracefully, never wrap over the HUD */
  max-width: min(78vw, 560px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#partyPill:hover { border-color: #ff5b78; color: #fff; }

/* ---------- v3.0: profile / progression / cosmetics ---------- */
#profilePanel {
  margin: 22px 0 0; text-align: left;
  padding: 14px 15px; border-radius: 14px;
  background: rgba(28, 12, 30, .55); border: 1px solid rgba(255, 91, 120, .16);
}
.pfHead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#pfLevel {
  font-weight: 800; font-size: 13px; color: #ffd0d8; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 46, 87, .18);
}
#pfBar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
#pfFill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ff2e57, #ffd98a); transition: width .5s ease; }
#pfXp { font-size: 11px; white-space: nowrap; }
#pfSkins { display: flex; flex-wrap: wrap; gap: 6px; }
.skin {
  cursor: pointer; user-select: none; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; color: #ffd0d8;
  background: rgba(30, 10, 22, .6); border: 1px solid rgba(255, 91, 120, .28);
  transition: transform .08s, border-color .12s;
}
.skin:hover { transform: translateY(-1px); border-color: #ff5b78; }
.skin.on { border-color: #ffd98a; color: #fff; background: rgba(255, 91, 120, .22); box-shadow: 0 0 0 1px rgba(255,217,138,.4); }
.skin.locked { opacity: .5; cursor: not-allowed; }
.skin.locked:hover { transform: none; border-color: rgba(255, 91, 120, .28); }
.skin .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.skin.streak.locked { border-color: rgba(255, 180, 90, .5); }

/* daily rite banner + streak + cloud sync */
#pfDaily {
  margin-bottom: 10px; padding: 7px 11px; border-radius: 9px; font-size: 12px; font-weight: 700;
  color: #ffe1b0; background: linear-gradient(90deg, rgba(255,120,60,.22), rgba(255,46,87,.14));
  border: 1px solid rgba(255,180,90,.4); text-align: center;
}
#pfFoot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
#pfStreak { color: #ffb877; font-weight: 700; }
.link { cursor: pointer; color: #9fd0ff; text-decoration: underline; font-size: 11px; user-select: none; }
.link:hover { color: #cfe6ff; }
#pfSync { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,91,120,.14); }
.syncRow { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
#pfCode { flex: 1; font: 700 12px ui-monospace, monospace; color: #ffd0d8; background: rgba(0,0,0,.3); padding: 5px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pfRestore { flex: 1; font-size: 12px; padding: 5px 8px; border-radius: 6px; color: #ffd0d8; background: rgba(0,0,0,.3); border: 1px solid rgba(255,91,120,.28); }
.mini { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: #fff; background: rgba(255,91,120,.28); border: 1px solid rgba(255,91,120,.4); }
.mini:hover { background: rgba(255,91,120,.45); }
#pfSyncMsg { margin-top: 6px; }

/* the in-run FPS meter (toggle with F) */
#fps {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font: 700 12px ui-monospace, monospace; color: #93e6a8;
  background: rgba(10, 6, 14, .6); padding: 3px 9px; border-radius: 6px;
  z-index: 9; pointer-events: none;
}

/* the death-screen XP + level-up line */
#deathXp.xp { color: #ffd98a; font-weight: 700; margin: 6px 0 2px; }
#deathXp .lvUp { color: #93e6a8; }

/* ---------- mobile thumb controls ---------- */
#touch {
  position: absolute; right: 20px; bottom: 24px; z-index: 8;
  display: flex; align-items: flex-end; gap: 14px;
  pointer-events: none;               /* the container ignores taps; the buttons don't */
}
.tbtn {
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; user-select: none;
  color: #ffd0d8; background: rgba(30, 10, 22, .6);
  border: 2px solid rgba(255, 91, 120, .45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); backdrop-filter: blur(3px);
}
.tbtn.big {
  width: 88px; height: 88px; font-size: 38px;
  color: #fff; background: rgba(120, 16, 40, .62);
  border-color: rgba(255, 46, 87, .7);
}
.tbtn.press { transform: scale(.9); background: rgba(255, 46, 87, .55); border-color: #ff2e57; }

/* touch leave-to-menu button — top-left, shown only on touch in-game (base
   display:none hides it on desktop; body.touch reveals it; .hidden toggles it
   with the game state). The kill feed shifts down on touch so they never overlap. */
#tMenu {
  position: absolute; z-index: 9; display: none;
  top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left));
  width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center;
  pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  font-size: 19px; font-weight: 700; line-height: 1; color: #ffd0d8;
  background: rgba(30, 10, 22, .62); border: 1.5px solid rgba(255, 91, 120, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5); backdrop-filter: blur(3px);
}
body.touch #tMenu { display: flex; }
#tMenu.press { transform: scale(.9); background: rgba(255, 46, 87, .55); border-color: #ff2e57; }
body.touch #killfeed { top: calc(62px + env(safe-area-inset-top)); }

/* Hall of the Damned — weekly leaderboard panel on the menu */
#hallPanel {
  position: absolute; top: 20px; left: 20px; width: 260px; text-align: left;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(18, 8, 20, .62); border: 1px solid rgba(255, 91, 120, .2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
#hallPanel h3 { font-size: 14px; color: #ff8ea0; margin-bottom: 10px; letter-spacing: .3px; }
#hallPanel h3 .wk { font-size: 10px; opacity: .45; font-weight: 400; }
#hallPanel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#hallPanel h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; opacity: .6; margin-bottom: 6px; }
#hallPanel ol { list-style: none; font-size: 12px; font-variant-numeric: tabular-nums; }
#hallPanel li { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
#hallPanel li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hallPanel li span:last-child { color: #e8c86a; }
#hallPanel li.empty { opacity: .4; justify-content: flex-start; }

/* the Chronicle of Ages — how past ages ended, on the menu */
#chroniclePanel {
  position: absolute; top: 20px; right: 20px; width: 300px; text-align: left;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(18, 8, 20, .62); border: 1px solid rgba(211, 27, 62, .25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
#chroniclePanel h3 { font-size: 14px; color: #ff8ea0; margin-bottom: 10px; letter-spacing: .3px; }
#chroniclePanel ol { list-style: none; font-size: 11.5px; line-height: 1.35; }
#chroniclePanel li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 91, 120, .08); }
#chroniclePanel li:last-child { border-bottom: none; }
#chroniclePanel li span:first-child { opacity: .85; }
#chroniclePanel li.vamp span:first-child { color: #ff8ea0; }
#chroniclePanel li.holy span:first-child { color: #e8c86a; }
#chroniclePanel li .ago { opacity: .4; white-space: nowrap; font-size: 10px; align-self: center; }

/* ---------- small screens / touch ---------- */
@media (max-width: 760px) {
  #board { display: none; }
  #hallPanel { display: none; }
  #chroniclePanel { display: none; }
  #killfeed { max-width: 55vw; font-size: 11px; }
  #ticker { display: none; }        /* no room beside a thumb — the announce line carries it */
  #stats { font-size: 15px; }
  #evoBar { width: 150px; }
  /* the leaderboard is hidden on mobile, so the minimap moves to TOP-right,
     clear of the right-thumb action buttons that own the bottom-right corner */
  #mapWrap { top: 12px; right: 12px; bottom: auto; transform: scale(.72); transform-origin: top right; }
  #hint { display: none; }
  /* the fang/smite/split buttons ARE the ability readout on touch */
  #ability { display: none; }
  #abilityWrap { bottom: 96px; }    /* lift the status badges above the thumbs */
  #announce { white-space: normal; }   /* size handled by the responsive clamp above */
  #menu .card { padding: 26px 20px; margin: 0 12px; }
  #menu h1 { font-size: 34px; }
}

/* TOUCH DEVICES OF ANY WIDTH (phones AND tablets): the compact, thumb-clear
   layout — driven by the pointer, not the viewport. A touch tablet is wider
   than 760px but must NOT get the desktop layout with buttons on the minimap. */
body.touch #board,
body.touch #hallPanel,
body.touch #chroniclePanel { display: none; }
body.touch #mapWrap { top: 12px; right: 12px; bottom: auto; transform: scale(.72); transform-origin: top right; }
body.touch #ability { display: none; }        /* the fang/smite/split buttons ARE the readout */
body.touch #hint { display: none; }
body.touch #abilityWrap { bottom: 96px; }      /* status badges clear of the thumbs */
body.touch #badges { max-width: 94vw; gap: 5px; }
body.touch .badge { font-size: clamp(9.5px, 2.7vmin, 11px); padding: 3px 9px; letter-spacing: .3px; }

/* SAFE-AREA INSETS: keep every edge element out from under the notch, the
   rounded corners and the home indicator (env() is 0 on non-notched screens,
   so these are harmless everywhere else). */
#touch { right: calc(20px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); }
#killfeed { top: calc(14px + env(safe-area-inset-top)); left: calc(16px + env(safe-area-inset-left)); }
#stats { left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); }
body.touch #mapWrap { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
body.touch #abilityWrap { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* tiny phones (≤360px): shrink the thumbs, and lift the stats readout clear of
   them — at 320px wide the bottom-left readout and bottom-right thumbs meet in
   the middle, so shrinking alone is not enough. */
@media (max-width: 360px) {
  .tbtn { width: 54px; height: 54px; font-size: 22px; }
  .tbtn.big { width: 74px; height: 74px; font-size: 32px; }
  body.touch #stats { bottom: calc(158px + env(safe-area-inset-bottom)); font-size: 13px; }
  body.touch #stats .sub { font-size: 12px; }
}

/* short viewports (landscape phones): the ad box must never cover Play, and a
   tall menu card must be able to scroll to reach the button. */
@media (max-height: 620px) {
  #adBox { display: none; }
  #menu { place-items: start center; overflow-y: auto; overscroll-behavior: contain; padding: 10px 0; }
  #menu .card { padding: 16px 22px; }
  #menu h1 { font-size: 30px; margin-bottom: 2px; }
  #menu .tag { font-size: 12px; margin-bottom: 12px; }
  #menu input { padding: 9px 14px; margin-bottom: 8px; }
  #hallPanel, #chroniclePanel { display: none; }
  #wrathWrap { width: min(300px, 90vw); }
  #kingName { font-size: 11px; }
}

/* very short viewports (landscape phones): pull the announce banner in tight so a
   long onboarding / throne line can never fill the screen. */
@media (max-height: 500px) {
  #announce { top: 11%; font-size: clamp(14px, 3.6vmin, 20px); max-width: 90vw; line-height: 1.15; }
  #announce.big { font-size: clamp(16px, 4.6vmin, 24px); }
}