/* ====== Topleven Adventures — styling ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* native (iOS-app): de "Update — verse versie"-knop is alleen voor de webversie */
body.native #btn-update { display: none !important; }
/* App Store guideline 2.1: geen "Coming Soon"-placeholder tonen in de gepubliceerde app */
body.native .stone-tile.soon { display: none !important; }

:root {
  --bg: #0d0f14;
  --panel: #1a1f2b;
  --panel-light: #252c3b;
  --accent: #6abe30;       /* zombie groen */
  --accent-dark: #4a8c1f;
  --danger: #d94343;
  --gold: #f2c94c;
  --text: #e8ecf1;
  --text-dim: #8b97aa;
  --pixel-font: 'Courier New', monospace;
}

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  position: fixed;             /* voorkomt rubber-band scrollen op iOS */
  inset: 0;
  width: 100%;
  font-family: var(--pixel-font);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;         /* geen scroll/zoom/dubbeltik */
  overscroll-behavior: none;
}

/* iOS-loep/tekstselectie bij (snel) tikken op knoppen voorkomen — overal behalve in tekstvelden */
*:not(input):not(textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* tekstvelden moeten wél kunnen typen/selecteren (chat, e-mail, nickname) */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

#game-root {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;             /* dynamische hoogte: knoppen niet achter Safari-balk */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #1b2330;
}

.hidden { display: none !important; }

/* ====== HUD ====== */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}

.hud-top { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ====== Status-banner (scherpe tekst i.p.v. op canvas) ====== */
#game-banner {
  text-align: center;
  pointer-events: none;
  width: min(680px, 94%);
}
#banner-main {
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0,0,0,0.6);
}
#banner-main.danger { color: #ff7a5a; }
#banner-main.good { color: var(--accent); }
#banner-sub {
  font-size: 12px;
  letter-spacing: 1px;
  color: #cfe0ee;
  text-shadow: 1px 1px 0 #000;
  margin-top: 2px;
}
#boss-hp-wrap {
  margin: 4px auto 0;
  width: min(420px, 80%);
  height: 12px;
  background: #2a0d0d;
  border: 2px solid #000;
  border-radius: 4px;
  overflow: hidden;
}
#boss-hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #b32e2e, #ff5a5a); transition: width 0.12s; }

/* ====== Tutorial-popup ====== */
#tutorial-box {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  pointer-events: none;
  background: rgba(8,10,14,0.9);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 12px 18px;
  max-width: min(420px, 86%);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--text);
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.progress-wrap { width: min(680px, 92%); }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #000;
}
.progress-label span { color: var(--accent); font-weight: bold; }

.progress-bar {
  position: relative;
  height: 16px;
  background: #0a0d12;
  border: 2px solid #3a4456;
  border-radius: 3px;
  overflow: visible;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  transition: width 0.1s linear;
}
#progress-player {
  position: absolute;
  top: -6px;
  left: 0%;
  font-size: 16px;
  transform: translateX(-50%);
  transition: left 0.1s linear;
}
.progress-flag {
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 14px;
}

.hud-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hud-left { display: flex; flex-direction: column; gap: 8px; }

.health-wrap { display: flex; align-items: center; gap: 6px; }
.heart { color: var(--danger); font-size: 18px; text-shadow: 1px 1px 0 #000; }
.health-bar {
  width: 160px;
  height: 14px;
  background: #0a0d12;
  border: 2px solid #3a4456;
  border-radius: 3px;
  overflow: hidden;
}
#health-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #b32e2e, #e85d5d);
  transition: width 0.15s ease;
}

.coin-counter {
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}
.coin-icon { color: var(--gold); }

.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.weapon-name {
  background: rgba(10,13,18,0.8);
  border: 2px solid #3a4456;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
  text-shadow: 1px 1px 0 #000;
}

.ammo-count {
  background: rgba(10,13,18,0.8);
  border: 2px solid #3a4456;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
}
.ammo-count.low { color: var(--danger); border-color: var(--danger); }
.ammo-icon { letter-spacing: -2px; }

/* ====== Pauze knop ====== */
#pause-btn {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 30;
  width: 40px;
  height: 40px;
  background: rgba(10,13,18,0.85);
  border: 2px solid #3a4456;
  color: var(--text);
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 2px;
}


/* ====== Touch controls ====== */
#touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px;
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
  /* laag in de hoeken (HUD staat op touch bovenin, dus onderkant is vrij) */
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 20;
  touch-action: none;            /* nooit scroll/zoom-gebaar -> knoppen reageren direct, blijven niet hangen */
  -webkit-user-select: none; user-select: none;
}
/* op touch: health/munten/wapen bovenin (onder de voortgangsbalk) i.p.v. onderaan */
body.is-touch #hud { justify-content: flex-start; gap: 8px; }
.touch-left, .touch-right { display: flex; gap: 16px; pointer-events: auto; align-items: flex-end; touch-action: none; -webkit-user-select: none; user-select: none; }
.fire-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; touch-action: none; }
.tbtn {
  width: 74px;
  height: 74px;
  background: rgba(37,44,59,0.28);
  border: 2px solid rgba(180,195,220,0.45);
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  font-size: 32px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tbtn.pressed { background: rgba(106,190,48,0.5); transform: scale(0.94); }
.tbtn-ic { width: 62%; height: 62%; image-rendering: pixelated; pointer-events: none; }
/* loopknoppen + spring/duik allemaal even groot */
.touch-left .tbtn,
.touch-right > .tbtn { width: 90px; height: 90px; font-size: 40px; }
.tbtn-fire {
  width: 96px;
  height: 96px;
  font-size: 40px;
  background: rgba(217,67,67,0.28);
  border-color: rgba(232,93,93,0.6);
}
.tbtn-melee {
  width: 84px;
  height: 84px;
  font-size: 36px;
  background: rgba(122,82,48,0.28);
  border-color: rgba(170,120,70,0.6);
}
.tbtn-ability {
  width: 58px; height: 58px;
  background: rgba(28,18,10,0.5); border-color: rgba(255,160,60,0.5);
  align-self: center; margin-bottom: -2px;
  position: relative;
  opacity: 0.5; filter: grayscale(0.5);            /* aan het opladen -> duidelijk gedimd/onbruikbaar */
  transition: opacity .18s, filter .18s;
}
.tbtn-ability.hidden { display: none; }
.tbtn-ability.ready {
  opacity: 1; filter: none;                        /* klaar -> fel */
  border-color: #ffe27a;
  animation: abReady 0.7s ease-in-out infinite;
}
/* "KLAAR"-label boven de knop zodra de ability opgeladen is */
.tbtn-ability.ready::after {
  content: 'KLAAR';
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-family: var(--pixel-font); font-size: 8px; font-weight: bold; letter-spacing: .5px;
  color: #2a1a06; background: #ffd24a; padding: 1px 5px; border-radius: 5px;
  white-space: nowrap; box-shadow: 0 0 10px rgba(255,200,80,.95);
  animation: abReadyLbl 0.7s ease-in-out infinite; pointer-events: none;
}
@keyframes abReady { 0%,100% { box-shadow: 0 0 8px rgba(255,150,40,.6); transform: scale(1); } 50% { box-shadow: 0 0 24px rgba(255,205,90,1); transform: scale(1.09); } }
@keyframes abReadyLbl { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.14); } }
.tbtn-ability .tbtn-ic { width: 82%; height: 82%; }
/* iets kleiner op echt lage schermen zodat alles past */
@media (max-height: 380px) {
  #touch-controls { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .tbtn { width: 62px; height: 62px; font-size: 26px; }
  .tbtn-ability { width: 50px; height: 50px; }
  .touch-left .tbtn,
  .touch-right > .tbtn { width: 76px; height: 76px; font-size: 34px; }
  .tbtn-melee { width: 70px; height: 70px; }
  .tbtn-fire { width: 80px; height: 80px; font-size: 32px; }
}

/* ====== Schermen (menu/shop/etc.) ====== */
.screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;          /* battlemap-achtergrond (#bg-layer) schijnt erdoorheen */
  overflow: hidden;                 /* hele scherm scrolt NIET; alleen de lijst binnenin */
  touch-action: none;
  padding: 8px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}

/* globale drijvende battlemap-achtergrond achter alle menu's */
#bg-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #160611 0%, #2c0b14 45%, #5a1810 68%, #0b0406 100%); }
#menu-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.in-game #bg-layer { display: none; }     /* tijdens het spelen niet nodig (canvas dekt af) */
.bg-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgba(0,0,0,.42)); }

/* secundaire schermen = gecentreerd lava-paneel; alleen de lijst binnenin scrolt */
.screen-inner {
  text-align: center; width: min(760px, 96%);
  max-height: calc(100% - 6px);
  display: flex; flex-direction: column; align-items: center;
  margin: auto; padding: clamp(10px, 2.4vh, 18px) clamp(12px, 3vw, 22px);
  background: linear-gradient(180deg, rgba(42,19,13,.93), rgba(20,9,7,.95));
  border: 2px solid #6a2a16; border-top-color: #b04e2a; border-radius: 12px;
  box-shadow: inset 0 0 26px rgba(255,80,20,.1), 0 0 0 2px rgba(0,0,0,.45), 0 12px 34px rgba(0,0,0,.55);
  overflow-y: auto;                 /* vangnet als er geen aparte lijst-scroll is */
}
#menu-screen { padding: 0; background: transparent; }
/* op deze schermen scrolt alleen de lijst, niet het paneel */
#shop-screen .screen-inner, #inventory-screen .screen-inner, #leaderboard-screen .screen-inner, #chat-screen .screen-inner, #blacksmith-screen .screen-inner { overflow: hidden; }
#shop-grid, #inv-grid, #lb-list, .chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%; }
#bs-grid { flex: 1 1 auto; min-height: 0; align-content: center; }
/* chat: online-balk vast bovenaan, berichten flexen + scrollen (geen overlap) */
#chat-screen .chat-online { flex: 0 0 auto; max-height: 50px; width: 100%; margin-bottom: 6px; }
#chat-screen .chat-messages { flex: 1 1 auto; min-height: 56px; max-height: none; }
#chat-screen .chat-input-row, #chat-screen .chat-msg, #chat-screen .back-btn { flex: 0 0 auto; }
#chat-screen .screen-title, #chat-screen .chat-online { width: 100%; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; image-rendering: pixelated; }
.screen-title .ic { width: .92em; height: .92em; vertical-align: -0.06em; }

.game-title {
  font-size: clamp(40px, 9vw, 84px);
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text);
  text-shadow: 3px 3px 0 #000, 0 0 18px rgba(106,190,48,0.4);
  line-height: 0.9;
}
.game-title span { display: block; color: var(--accent); }

.subtitle { color: var(--text-dim); margin: 12px 0 28px; font-size: 14px; letter-spacing: 2px; }

.menu-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; margin: 10px 0; }

/* ====== Hoofdmenu: battlemap-achtergrond + pixel stenen knoppen, landscape-first ====== */
#menu-screen { overflow: hidden; touch-action: none; padding: 0; background: transparent; }

/* battlemap-achtergrond die voorbij drijft (twee identieke scènes, naadloze loop) */
.menu-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #7fc0e8; }
.scene-scroll { position: absolute; top: 0; bottom: 0; left: 0; display: flex; width: 200%; animation: drift 40s linear infinite; will-change: transform; }
.menu-scene { flex: 0 0 50%; width: 50%; height: 100%; object-fit: cover; image-rendering: pixelated; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* vliegende vogels */
.bird { position: absolute; top: 0; left: 0; width: 16px; height: 8px; }
.bird .wing { position: absolute; top: 2px; width: 8px; height: 3px; background: #2a3744; }
.bird .wl { left: 0; transform-origin: right center; animation: flapL .45s infinite alternate ease-in-out; }
.bird .wr { right: 0; transform-origin: left center; animation: flapR .45s infinite alternate ease-in-out; }
@keyframes flapL { from { transform: rotate(24deg); } to { transform: rotate(-16deg); } }
@keyframes flapR { from { transform: rotate(-24deg); } to { transform: rotate(16deg); } }
.bird.b1 { transform: scale(1.1);  animation: fly1 17s linear infinite; }
.bird.b2 { transform: scale(0.8);  animation: fly2 23s linear infinite 3s; }
.bird.b3 { transform: scale(1.0);  animation: fly3 20s linear infinite 8s; }
.bird.b4 { transform: scale(0.7);  animation: fly1 27s linear infinite 12s; }
@keyframes fly1 { 0% { transform: translate(-6vw, 18vh); } 50% { transform: translate(52vw, 9vh); } 100% { transform: translate(112vw, 15vh); } }
@keyframes fly2 { 0% { transform: translate(-6vw, 30vh); } 50% { transform: translate(50vw, 22vh); } 100% { transform: translate(112vw, 28vh); } }
@keyframes fly3 { 0% { transform: translate(-6vw, 12vh); } 50% { transform: translate(48vw, 5vh); } 100% { transform: translate(112vw, 11vh); } }

/* frame: header boven, tegels in het midden, onderbalk onderaan */
.menu-frame {
  position: relative; z-index: 1; width: 100%; max-width: 1000px; height: 100%;
  margin: auto; display: flex; flex-direction: column;
  gap: clamp(6px, 1.5vh, 14px);
  /* binnen de veilige zone blijven: niet onder de notch/Dynamic Island of buiten de ronde hoeken */
  padding:
    max(clamp(8px, 2vh, 16px), env(safe-area-inset-top))
    max(clamp(14px, 3.5vw, 34px), env(safe-area-inset-right))
    max(clamp(8px, 2vh, 16px), env(safe-area-inset-bottom))
    max(clamp(14px, 3.5vw, 34px), env(safe-area-inset-left));
}
.menu-top { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(60px, 17vh, 128px); }
.menu-logo-img { height: clamp(80px, 24vh, 180px); width: auto; max-width: 94%; image-rendering: pixelated; }
.menu-logo {
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 1px;
  font-size: clamp(15px, 3vw, 28px); color: #fff; text-shadow: 2px 2px 0 #000, 0 2px 6px rgba(0,0,0,.4);
}
.menu-hud { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); }
/* munten + robijnen onder elkaar, links van het logo */
.menu-currency { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 2; }
.menu-coins-top, .menu-rubies-top, .menu-userline { display: flex; align-items: center; gap: 6px; color: #fff; font-size: clamp(12px, 1.8vw, 16px); text-shadow: 1px 1px 0 #000; }
.menu-coins-top, .menu-rubies-top {
  background: linear-gradient(180deg, rgba(30,22,16,.72), rgba(14,9,7,.82));
  border: 1px solid rgba(90,70,45,.7); border-radius: 999px; padding: 2px clamp(6px, 1.4vw, 10px); min-width: clamp(50px, 8vw, 72px);
}
.menu-coins-top #menu-coin-count { color: var(--gold); font-weight: bold; }
.menu-rubies-top #menu-ruby-count { color: #ff8aa0; font-weight: bold; }
.px-icon { display: block; image-rendering: pixelated; }
/* rank + RP-voortgang, verwerkt in de Power Smash-knop */
.tile-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 3px; width: 100%; pointer-events: none; }
.tile-rank .tr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: clamp(10px, 1.5vw, 13px); font-weight: bold; letter-spacing: .3px; text-shadow: 1px 1px 0 #000; line-height: 1; }
.tile-rank .tr-shield { width: 16px; height: 20px; display: inline-flex; flex: 0 0 auto; }
.tile-rank .tr-bar { width: min(78%, 120px); height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(0,0,0,.4); overflow: hidden; }
.tile-rank .tr-bar > span { display: block; height: 100%; border-radius: 3px; }
.tile-rank .tr-rp { font-size: clamp(8px, 1.1vw, 10px); color: #eadfce; text-shadow: 1px 1px 0 #000; line-height: 1; }
@media (max-height: 480px) { .tile-rank .tr-rp { display: none; } }   /* heel lage schermen: alleen naam + balk */

/* ---- rank-banner: aparte klikbare knop die de 1v1-tegel onderaan overlapt ---- */
.tile-wrap { position: relative; display: flex; align-items: stretch; }
.tile-wrap > .stone-tile { width: 100%; }
.rank-banner {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 56%);   /* overlapt de onderkant van de Heroes-tegel (meer overlap) en hangt maar iets naar beneden -> raakt de chest-slots niet */
  z-index: 6; width: min(74%, 190px); padding: 3px 12px 5px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #ffdc7a 0%, #f0a838 40%, #c87418 78%, #9a5510 100%);   /* helderder, glanzender goud */
  border: 2px solid #6e3d12; border-top: 2px solid #ffe9ad;
  border-radius: 0 0 9px 9px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
  animation: rankGlow 2.4s ease-in-out infinite;
}
.rank-banner:active { transform: translate(-50%, 56%) scale(.94); }
@keyframes rankGlow {
  0%, 100% { filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)) drop-shadow(0 0 3px rgba(255,190,90,.45)); }
  50%      { filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,215,120,.85)); }
}
.rank-banner .tile-rank { margin-top: 0; pointer-events: none; gap: 2px; }
.rank-banner .tile-rank .tr-badge { font-size: clamp(10px, 1.6vw, 13px); gap: 2px; }
.rank-banner .tile-rank .tr-shield { width: 13px; height: 16px; }
.rank-banner .tile-rank .tr-bar { width: min(72%, 96px); height: 4px; }
.rank-banner .tile-rank .tr-rp { display: none; }   /* volledige RP-info staat in het rank-scherm */

/* ---- rank-scherm ---- */
.rank-box { max-width: 460px; width: 92%; position: relative; }   /* terug-pijltje verankert aan het venster, niet aan de hele overlay */
.rank-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; text-align: left; }
.rank-head .rk-hd-shield { width: 40px; height: 50px; flex: 0 0 auto; display: inline-flex; }
.rank-head .rk-hd-txt { flex: 1 1 auto; min-width: 0; }
.rank-head .rk-hd-name { font-family: var(--pixel-font); font-weight: 900; font-size: clamp(14px,3vw,19px); text-shadow: 1px 1px 0 #000; }
.rank-head .rk-hd-rp { font-size: clamp(11px,1.8vw,13px); color: #eadfce; margin: 2px 0 4px; }
.rank-head .rk-hd-bar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(0,0,0,.5); overflow: hidden; }
.rank-head .rk-hd-bar > span { display: block; height: 100%; }
.rank-list { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.rk-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.rk-row.reached { background: rgba(255,210,120,.10); }
.rk-row.current { background: rgba(255,210,120,.22); border-color: #f0b24a; box-shadow: 0 0 0 1px #f0b24a inset; }
.rk-row.locked { opacity: .55; }
.rk-row .rk-shield { width: 24px; height: 30px; flex: 0 0 auto; display: inline-flex; }
.rk-row .rk-name { font-family: var(--pixel-font); font-weight: 900; font-size: clamp(12px,2vw,15px); text-shadow: 1px 1px 0 #000; flex: 1 1 auto; min-width: 0; }
.rk-row .rk-title { display: block; font-size: 9px; font-weight: bold; color: #cdb68e; letter-spacing: .3px; }
.rk-row .rk-rp { font-size: clamp(10px,1.6vw,12px); color: #ffe27a; font-weight: bold; white-space: nowrap; }
.rk-row .rk-reward { font-size: 10px; color: #bcd0e8; white-space: nowrap; }
.rk-row .rk-you { font-size: 9px; font-weight: 900; color: #0d0f13; background: #ffd24a; border-radius: 5px; padding: 2px 5px; }
.rank-foot { margin-top: 10px; font-size: clamp(10px,1.6vw,12px); color: #cdb68e; line-height: 1.5; text-align: center; }

/* info-icoon rechtsboven op de hero-kaart (klik -> stats) */
.hero-info-i { position: absolute; top: 6px; right: 6px; z-index: 4; width: 21px; height: 21px; border-radius: 50%; background: rgba(24,34,50,.9); border: 1.5px solid #7fb4ff; color: #cfe6ff; font-family: var(--pixel-font); font-weight: 900; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.hero-info-i:active { transform: scale(.9); }

/* ---- hero-stats venster (klik op het plaatje in de inventory) ---- */
#hero-stats { touch-action: none; overscroll-behavior: contain; }
/* niet scrollen (ook niet horizontaal op iOS) — hogere specificiteit dan .overlay-box zodat overflow:hidden wint */
#hero-stats .hero-stats-box { position: relative; max-width: 400px; width: 92%; overflow: hidden; touch-action: none; padding: clamp(8px,2vh,16px) clamp(12px,3vw,20px); }
#hero-stats .corner-back { top: 8px; left: 8px; }   /* terug-pijltje in de hoek van het venster */
#hero-stats .screen-title { margin: 0 0 4px; font-size: clamp(16px,3vw,22px); }
.hs-sprite { display: flex; justify-content: center; margin: 0 0 4px; }
.hs-sprite canvas { height: clamp(58px, 15vh, 100px); width: auto; image-rendering: pixelated; }
.hs-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; }
.hs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-family: var(--pixel-font); font-weight: bold; }
.hs-row > span { display: inline-flex; align-items: center; gap: 6px; color: #e8dcc4; font-size: clamp(12px,2vw,15px); }
.hs-row .ic { width: 15px; height: 15px; }
.hs-row b { color: #ffe27a; font-size: clamp(14px,2.4vw,19px); }
.hs-lvl { font-size: clamp(11px,1.8vw,14px); color: #7fb4ff; font-weight: 900; vertical-align: middle; }
.hs-bonus { color: #7affa0; font-size: .8em; font-weight: 900; }   /* level-bonus (bijv. +2 hp) */
.hs-ability { text-align: left; border-top: 1px solid rgba(255,255,255,.12); padding-top: 7px; }
.hs-ab-title { font-family: var(--pixel-font); font-weight: bold; font-size: clamp(12px,2vw,15px); color: #ffcaa0; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.hs-ab-title .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.hs-ab-title b { color: #fff; }
.hs-ab-desc { font-size: clamp(11px,1.8vw,13px); color: #cdd6e2; line-height: 1.4; }

/* drie tegels in het midden — gecentreerd, niet beeldvullend (zoals de mockup) */
.menu-tiles {
  flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(8px, 2.2vw, 22px); align-items: center; justify-items: stretch; min-height: 0; padding: clamp(4px, 2vh, 18px) 0;
}
.menu-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(6px, 1.6vw, 16px); flex-wrap: nowrap; }
.menu-bottom .stone-btn { padding-left: clamp(8px, 1.8vw, 18px); padding-right: clamp(8px, 1.8vw, 18px); }   /* onderste knoppen iets smaller */
.menu-bottom-right { display: flex; gap: clamp(8px, 1.6vw, 16px); }
/* Blacksmith recht boven Shop, Training recht boven Leaderboard (zelfde breedte via stretch) */
.mb-stack { display: flex; flex-direction: column; gap: clamp(4px, 1vh, 8px); align-items: stretch; min-width: 0; }
.mb-stack .stone-btn { width: 100%; }

/* ---- Inventaris + power-ups ---- */
.inv-hint { font-size: 12px; color: var(--text-dim); margin: 2px 0 8px; line-height: 1.4; }
.inv-sec { font-family: var(--pixel-font); font-weight: 900; font-size: 14px; color: #ffe27a; text-align: left; margin: 14px 4px 6px; text-shadow: 1px 1px 0 #000; }
.inv-load { font-size: 11px; color: #bcd0e8; font-family: var(--body-font, inherit); font-weight: normal; }
#inv-loadout-count.flash { color: #ff6a6a; }
/* power-up-kaart: zelfde kolom-opmaak als de andere shop-kaarten (icoon boven) */
.powerup-card .pu-ico { width: 72px; height: 72px; image-rendering: pixelated; background: transparent; }
.pu-count { color: #7affa0; font-size: 12px; }
.shop-card.in-loadout { outline: 2px solid #7affa0; outline-offset: -2px; }

/* loadout-balk in de match (links, power-ups activeren) */
#loadout-bar { position: absolute; left: max(6px, env(safe-area-inset-left)); top: 46px; z-index: 22; display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
#loadout-bar.hidden { display: none; }
.loadout-slot { pointer-events: auto; width: 44px; height: 44px; border-radius: 10px; border: 2px solid rgba(180,195,220,0.5); background: rgba(20,26,38,0.72); color: #fff; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; padding: 0; }
.loadout-slot:active { transform: scale(0.92); }
.loadout-count { text-align: center; font-family: var(--pixel-font); font-weight: 900; font-size: clamp(11px,1.9vw,14px); color: #7affa0; margin: 0 0 6px; text-shadow: 1px 1px 0 #000; flex: 0 0 auto; }
.loadout-slot.empty { border-style: dashed; border-color: rgba(180,195,220,0.32); background: rgba(20,26,38,0.30); pointer-events: none; }   /* lege slot: laat zien dat er nog ruimte is (max 3) */
.loadout-slot.empty::after { content: '+'; color: rgba(200,215,235,0.4); font-family: var(--pixel-font); font-weight: 900; font-size: 20px; }
.loadout-slot.depleted { opacity: 0.4; }
.loadout-slot.used { filter: grayscale(0.65); opacity: 0.6; }   /* deze match al ingezet (max 1x per powerup) */
.loadout-slot .lo-ico { width: 30px; height: 30px; image-rendering: pixelated; }
.loadout-slot .lo-n { position: absolute; right: -3px; top: -3px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 12px; font-weight: 900; line-height: 15px; text-align: center; color: #fff; background: #2a7a3a; border: 1px solid #0d2e16; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
/* controller-badge: welke D-pad-richting deze powerup inzet (↑ boven / → midden / ↓ onder) */
.loadout-slot .lo-key { position: absolute; left: -7px; top: -7px; width: 17px; height: 17px; border-radius: 50%; background: #2f6fd0; border: 1.5px solid #bfe0ff; color: #fff; font-size: 12px; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: none; }
/* controller gekoppeld: verberg de beweeg-/gevechts-touchknoppen (die doet de controller nu) — ability/powerups/pauze blijven */
body.pad-connected #touch-controls .tbtn[data-key] { display: none !important; }

/* ===== Kisten op het hoofdmenu ===== */
.chest-bar { display: flex; justify-content: center; gap: clamp(8px, 2vw, 20px); margin: clamp(20px, 4.8vh, 44px) 0 4px; flex: 0 0 auto; }
.chest-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  cursor: pointer; width: clamp(74px, 15vw, 112px); height: clamp(56px, 10.5vh, 76px); padding: 3px;
  border-radius: 10px; border: 2px solid #4a3a2a;
  background: linear-gradient(180deg, rgba(30,22,16,.86), rgba(14,9,7,.92));
  box-shadow: inset 0 0 12px rgba(0,0,0,.5); color: #f0d8b8;
}
.chest-slot.empty { border-style: dashed; border-color: #3a3028; opacity: .5; cursor: default; box-shadow: none; }
.chest-slot .chest-ico { width: 48px; height: 40px; image-rendering: pixelated; }
/* robijn-skip-knopje op een kist die aan het openen is */
.chest-skip {
  position: absolute; top: -8px; right: -6px; display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: bold; color: #ffd7e0; line-height: 1;
  background: linear-gradient(180deg, #6a1830, #3a0c1a); border: 1px solid #ff6f8a; border-radius: 999px;
  padding: 2px 6px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.5); z-index: 3;
}
.chest-skip:hover { filter: brightness(1.15); }
.chest-slot.shake, .shake { animation: chestShake .32s ease; }
@keyframes chestShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.chest-slot .chest-lbl { font-family: var(--pixel-font); font-weight: bold; font-size: clamp(9px, 1.5vw, 12px); text-shadow: 1px 1px 0 #000; line-height: 1; }
.chest-slot.ready { animation: chestReady 1s ease-in-out infinite; }
.chest-slot.ready .chest-lbl { color: #ffe27a; }
.chest-slot.idle .chest-lbl { color: #bcd0e8; }
@keyframes chestReady {
  0%,100% { box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 6px rgba(255,210,80,.5); }
  50%     { box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 18px rgba(255,210,80,.95); }
}

/* ===== Matchmaking-scherm ===== */
#versus-mm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 8px; }
#versus-mm.hidden { display: none; }
.mm-spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,140,50,.22); border-top-color: #ff8a3a; animation: mmspin 0.9s linear infinite; }
@keyframes mmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-spinner { animation: none !important; } }
.mm-title { font-family: var(--pixel-font); font-weight: 900; font-size: clamp(15px, 3vw, 22px); color: #ffe27a; text-shadow: 2px 2px 0 #000; margin: 0; }
.mm-sub { font-size: 13px; color: var(--text-dim); margin: 0; }
.mm-test { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mm-test label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); letter-spacing: .5px; }
.mm-test label .ic { width: 13px; height: 13px; }
.mm-test-sel { font-family: var(--pixel-font); font-size: 13px; font-weight: bold; color: #f3e9dc; background: #160d0a; border: 1px solid #4a2f22; border-radius: 7px; padding: 6px 10px; min-width: 180px; text-align: center; }
.mm-test-sel:focus { outline: none; border-color: var(--gold); }
#btn-mm-friends { margin-top: 2px; }

/* lava knop-stijl (geanimeerd: gloeiende lava die stroomt + pulseert) */
.stone-btn, .stone-tile, .stone-icon {
  position: relative; overflow: hidden;
  font-family: var(--pixel-font); color: #ffe9c0; cursor: pointer;
  text-shadow: 0 0 6px rgba(255,120,40,.9), 1px 1px 0 #000;
  background:
    radial-gradient(circle at 28% 118%, rgba(255,150,50,.6), transparent 52%),
    radial-gradient(circle at 72% -18%, rgba(255,95,25,.55), transparent 52%),
    linear-gradient(115deg, transparent 41%, rgba(255,180,80,.30) 50%, transparent 59%),
    linear-gradient(180deg, #531f12, #2c0f0a 68%, #1d0907);
  background-size: 100% 100%, 100% 100%, 280% 280%, 100% 100%;
  background-position: 0 0, 0 0, 0% 50%, 0 0;
  border: 0;
  border-top: 3px solid #d2622e;
  border-left: 3px solid #8a3418;
  border-right: 3px solid #3e160c;
  border-bottom: 5px solid #1a0705;
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(255,90,25,.35), 0 0 10px rgba(255,80,20,.4), 0 4px 0 #170604, 0 6px 12px rgba(0,0,0,.4);
  image-rendering: pixelated;
  animation: lavaFlow 4s linear infinite, lavaGlow 2.4s ease-in-out infinite;
}
@keyframes lavaFlow {
  from { background-position: 0 0, 0 0, 0% 50%, 0 0; }
  to   { background-position: 0 0, 0 0, 280% 50%, 0 0; }
}
@keyframes lavaGlow {
  0%, 100% { box-shadow: inset 0 0 12px rgba(255,80,20,.3),  0 0 8px rgba(255,70,15,.35), 0 4px 0 #170604, 0 6px 12px rgba(0,0,0,.4); }
  50%      { box-shadow: inset 0 0 20px rgba(255,130,45,.55), 0 0 18px rgba(255,95,25,.6), 0 4px 0 #170604, 0 6px 12px rgba(0,0,0,.4); }
}
.stone-btn:active, .stone-tile:active:not(:disabled), .stone-icon:active {
  transform: translateY(3px); border-bottom-width: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .scene-scroll, .stone-btn, .stone-tile, .stone-icon, .bird, .bird .wing, .tile-play, .tile-sub, .soon-name, .rank-banner, .rank-banner .tr-badge { animation: none !important; }
}
.stone-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  padding: clamp(4px, 1.6vh, 11px) 6px 4px; height: clamp(60px, 15.5vh, 100px);   /* inhoud bovenaan: subtitel hoger + ruimte onderin voor de rank-banner */
}
.stone-tile.soon { justify-content: center; padding: 4px 6px; }
#btn-versus { padding-top: clamp(1px, 0.4vh, 3px); }   /* Heroes/1vs1 iets hoger in de knop (boven de rank-banner) */
/* WITTE shiny tekst — rank-banner */
.rank-banner .tr-badge {
  font-weight: 900; line-height: 1.05; text-align: center;
  color: #ffffff; -webkit-text-fill-color: #ffffff;   /* solide wit — geen fragiele background-clip die op iOS grijs werd */
  text-shadow: 0 -1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.45);
  filter: drop-shadow(0 0 4px rgba(200,225,255,.4));
  animation: tileGlow 2.6s ease-in-out infinite;
}
@keyframes tileGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(200,225,255,.3)); }
  50%      { filter: drop-shadow(0 0 9px rgba(220,240,255,.65)); }
}
/* warme cremige tekst met gloed — Journey/Singleplayer + Heroes/1vs1 + Coming Soon (kleiner, zachtere kleur) */
.tile-play, .tile-sub, .soon-name {
  font-weight: 900; line-height: 1.05; text-align: center;
  color: #ecd9a8; -webkit-text-fill-color: #ecd9a8;
  text-shadow: 0 -1px 0 rgba(255,248,220,.4), 0 1px 1px rgba(60,32,6,.85), 0 2px 3px rgba(0,0,0,.5);
  filter: drop-shadow(0 0 4px rgba(240,180,80,.45));
  animation: tileGoldGlow 2.6s ease-in-out infinite;
}
.tile-sub { color: #f2e6c6; -webkit-text-fill-color: #f2e6c6; }   /* subtitel iets lichter/cremig */
@keyframes tileGoldGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(235,175,75,.4)); }
  50%      { filter: drop-shadow(0 0 8px rgba(250,205,110,.7)); }
}
.tile-play { font-size: clamp(14px, 3.3vw, 26px); letter-spacing: .5px; }   /* kleiner -> 1vs1/Singleplayer schuiven omhoog, boven de banner */
.tile-sub  { font-size: clamp(8px, 1.4vw, 11px); letter-spacing: .3px; margin-top: 1px; max-width: 92%; }
.soon-name { font-size: clamp(14px, 3.3vw, 26px); letter-spacing: .5px; opacity: .55; }   /* zelfde grootte/stijl als Heroes, maar wat doorzichtig */
.tile-name { font-size: clamp(10px, 1.7vw, 15px); }
.stone-tile.soon { opacity: .85; cursor: default; }
/* versie-tag: als losse regel ONDER de knoppen, rechts uitgelijnd met de content (Leaderboard-knop) */
.build-tag { align-self: flex-end; flex: 0 0 auto; margin-top: 1px; font-family: var(--pixel-font); font-size: 9px; letter-spacing: .5px; color: rgba(255,255,255,.42); pointer-events: none; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.stone-tile.locked { filter: grayscale(.3) brightness(.9); }

.stone-btn { padding: clamp(8px,1.4vh,12px) clamp(16px, 3.4vw, 34px); font-size: clamp(13px, 2vw, 18px); }
.stone-btn .ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.stone-icon { width: clamp(34px, 6vw, 44px); height: clamp(34px, 6vw, 44px); display: flex; align-items: center; justify-content: center; padding: 0; }

/* ===== Play Power Smash: emerald + glans + Online-badge ===== */
#btn-versus {
  text-shadow: 0 0 6px rgba(90,255,170,.9), 1px 1px 0 #000;
  background:
    radial-gradient(circle at 28% 118%, rgba(90,255,170,.6), transparent 52%),
    radial-gradient(circle at 72% -18%, rgba(40,205,125,.55), transparent 52%),
    linear-gradient(115deg, transparent 40%, rgba(215,255,230,.55) 50%, transparent 60%),
    linear-gradient(180deg, #12744a, #0a4e32 68%, #06331f);
  background-size: 100% 100%, 100% 100%, 280% 280%, 100% 100%;
  background-position: 0 0, 0 0, 0% 50%, 0 0;
  border-top-color: #4fe09a; border-left-color: #1f9a63; border-right-color: #0c4d31; border-bottom-color: #052616;
  animation: lavaFlow 4s linear infinite, emeraldGlow 2.4s ease-in-out infinite;
}
@keyframes emeraldGlow {
  0%,100% { box-shadow: inset 0 0 12px rgba(60,220,140,.35), 0 0 8px rgba(50,220,130,.4), 0 4px 0 #052013, 0 6px 12px rgba(0,0,0,.4); }
  50%     { box-shadow: inset 0 0 20px rgba(100,255,180,.6), 0 0 20px rgba(70,240,150,.65), 0 4px 0 #052013, 0 6px 12px rgba(0,0,0,.4); }
}
.tile-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-family: var(--pixel-font); font-size: clamp(8px, 1.3vw, 11px); font-weight: 900; letter-spacing: .5px;
  color: #05301c; background: linear-gradient(180deg, #8dffbe, #2ccd7e);
  border: 1px solid #0c6b40; border-radius: 6px; padding: 1px 7px; text-shadow: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(60,240,150,.6);
}
.tile-badge.solo {
  color: #3a2600; background: linear-gradient(180deg, #ffe89a, #f0b838);
  border-color: #9a6a10; box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(255,200,80,.6);
}

/* ===== Play Journey: lapis (glans-blauw) ===== */
#btn-journey {
  text-shadow: 0 0 6px rgba(110,175,255,.9), 1px 1px 0 #000;
  background:
    radial-gradient(circle at 28% 118%, rgba(100,160,255,.6), transparent 52%),
    radial-gradient(circle at 72% -18%, rgba(60,110,235,.55), transparent 52%),
    linear-gradient(115deg, transparent 40%, rgba(210,230,255,.6) 50%, transparent 60%),
    linear-gradient(180deg, #234aa8, #172d78 68%, #0e1b4c);
  background-size: 100% 100%, 100% 100%, 280% 280%, 100% 100%;
  background-position: 0 0, 0 0, 0% 50%, 0 0;
  border-top-color: #6a96ea; border-left-color: #32519f; border-right-color: #16265e; border-bottom-color: #0a1330;
  animation: lavaFlow 4s linear infinite, lapisGlow 2.4s ease-in-out infinite;
}
@keyframes lapisGlow {
  0%,100% { box-shadow: inset 0 0 12px rgba(70,130,240,.35), 0 0 8px rgba(60,120,240,.4), 0 4px 0 #0a1330, 0 6px 12px rgba(0,0,0,.4); }
  50%     { box-shadow: inset 0 0 20px rgba(120,175,255,.6), 0 0 20px rgba(80,150,255,.65), 0 4px 0 #0a1330, 0 6px 12px rgba(0,0,0,.4); }
}

/* ===== Shop-knop: nog vuriger rood ===== */
#btn-shop {
  background:
    radial-gradient(circle at 28% 118%, rgba(255,110,40,.8), transparent 52%),
    radial-gradient(circle at 72% -18%, rgba(255,70,20,.75), transparent 52%),
    linear-gradient(115deg, transparent 41%, rgba(255,200,110,.4) 50%, transparent 59%),
    linear-gradient(180deg, #7c1f0e, #4a1006 68%, #2a0704);
  background-size: 100% 100%, 100% 100%, 280% 280%, 100% 100%;
  background-position: 0 0, 0 0, 0% 50%, 0 0;
  border-top-color: #ff6a2a;
  animation: lavaFlow 4s linear infinite, fieryGlow 1.9s ease-in-out infinite;
}
@keyframes fieryGlow {
  0%,100% { box-shadow: inset 0 0 14px rgba(255,80,20,.45), 0 0 10px rgba(255,70,15,.5), 0 4px 0 #170604, 0 6px 12px rgba(0,0,0,.4); }
  50%     { box-shadow: inset 0 0 24px rgba(255,140,50,.7), 0 0 22px rgba(255,90,25,.8), 0 4px 0 #170604, 0 6px 12px rgba(0,0,0,.4); }
}

/* portret: tegels stapelen */
@media (max-aspect-ratio: 3/4) {
  .menu-tiles { grid-template-columns: 1fr; }
  .menu-bottom { flex-direction: column; align-items: stretch; }
  .menu-bottom-right { justify-content: center; }
}

.big-btn {
  width: min(280px, 84%);
  padding: 13px 16px;
  font-family: var(--pixel-font);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffe9c0;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(255,120,40,.8), 1px 1px 0 #000;
  background:
    radial-gradient(circle at 30% 125%, rgba(255,150,50,.5), transparent 56%),
    linear-gradient(180deg, #6a2814, #3a160c);
  border: 0;
  border-top: 3px solid #d2622e;
  border-left: 3px solid #8a3418;
  border-right: 3px solid #3e160c;
  border-bottom: 5px solid #190705;
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(255,90,25,.3), 0 4px 0 #170604, 0 0 10px rgba(255,80,20,.3);
  transition: transform 0.05s;
}
.big-btn:active { transform: translateY(3px); border-bottom-width: 3px; }
.big-btn.secondary {
  background: linear-gradient(180deg, #3a2018, #221009);
  border-top-color: #7a4a30; color: #f0d8b8;
  box-shadow: inset 0 0 10px rgba(0,0,0,.4), 0 4px 0 #120804;
}
.big-btn.arena {
  background: radial-gradient(circle at 30% 125%, rgba(255,170,60,.55), transparent 56%), linear-gradient(180deg, #c0651f, #7a3a10);
  border-top-color: #ffb04a;
}
.arena-record { color: var(--gold); font-weight: bold; letter-spacing: 1px; margin: 6px 0; }
.arena-plays { color: var(--text-dim); font-size: 13px; margin-top: 8px; }

.menu-coins, .shop-coins {
  margin-top: 22px;
  font-size: 18px;
  color: var(--gold);
  font-weight: bold;
}

.text-btn {
  margin-top: 18px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--pixel-font);
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}
.text-btn:active { color: var(--danger); }

/* ====== Pauze-overlay (boven het spel, spel blijft zichtbaar) ====== */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,14,0.78);
  padding: 12px;
  overflow-y: auto;                       /* nooit buiten beeld: scroll als het niet past */
  -webkit-overflow-scrolling: touch;
}
.overlay-box {
  text-align: center; width: min(360px, 92%);
  max-height: calc(100% - 12px);          /* binnen het scherm blijven */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vh, 20px) clamp(14px, 4vw, 24px);
  background: linear-gradient(180deg, rgba(42,19,13,.95), rgba(20,9,7,.96));
  border: 2px solid #6a2a16; border-top-color: #b04e2a; border-radius: 12px;
  box-shadow: inset 0 0 24px rgba(255,80,20,.1), 0 0 0 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.6);
}
.overlay .menu-buttons { margin-top: 18px; }

/* ====== Account / inloggen ====== */
.account-bar { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.account-status { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.xp-bar-wrap {
  position: relative; width: 180px; height: 14px; margin: 4px auto 2px;
  background: #11151e; border: 2px solid #2a3242; border-radius: 7px; overflow: hidden;
}
.xp-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(180deg, #5ad06a, #2e8c3a); transition: width 0.4s ease;
}
.xp-bar-label {
  position: relative; z-index: 1; display: block; text-align: center;
  font-size: 9px; line-height: 14px; color: #fff; text-shadow: 0 1px 0 #000; letter-spacing: 0.5px;
}
.lb-sep { text-align: center; color: var(--text-dim); font-size: 12px; padding: 2px; letter-spacing: 3px; }

/* ====== Spel-update-knop (hoek hoofdmenu) ====== */
.update-btn {
  position: fixed; z-index: 60;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 8px 12px; font-size: 12px; letter-spacing: 1px;
  color: #cfe0ee; background: rgba(20, 26, 38, 0.85);
  border: 2px solid #3a4660; border-radius: 8px; cursor: pointer;
}
.update-btn:active { transform: translateY(2px); }
.update-btn:disabled { opacity: 0.6; }

/* ====== 1 vs 1 lobby (vote + ready) ====== */
.vs-code-inline { color: var(--gold); font-weight: bold; letter-spacing: 4px; }
.vs-section { margin: 10px 0 4px; font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
.vs-map-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: min(340px, 92%); margin: 0 auto; }
.vs-map-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font-size: 13px; color: #fff;
  background: #161b27; border: 2px solid #2a3242; border-radius: 8px; cursor: pointer;
}
.vs-map-btn.picked { border-color: var(--accent); background: #1c2a1c; }
.vs-map-votes { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.vs-mode-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vs-mode-btn {
  padding: 8px 14px; font-size: 13px; color: #cfe0ee;
  background: #161b27; border: 2px solid #2a3242; border-radius: 8px; cursor: pointer;
}
.vs-mode-btn.active { border-color: var(--accent); background: #1c2a1c; color: #fff; }
#btn-vs-ready { margin-top: 12px; }
.vs-result-vote { margin: 6px 0 2px; }
.vs-vote-title { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 4px; }
/* uitslagscherm compact zodat alles (incl. stemmen) in beeld past */
#versus-result .overlay-box { width: min(460px, 97%); }
#versus-result .screen-title { font-size: 18px; margin-bottom: 2px; }
#versus-result .result-stats { margin: 4px auto; font-size: 12px; }
/* knoppen netjes gecentreerd: hoofdknop op een eigen rij, daaronder de rest gecentreerd */
#versus-result .menu-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 7px; }
#versus-result .menu-buttons .big-btn { width: auto; flex: 0 1 auto; min-width: 92px; padding: 8px 12px; font-size: 13px; margin: 0; }
#versus-result #btn-vs-rematch { flex-basis: 100%; min-width: 0; order: 1; }   /* primaire actie: volle breedte, eigen rij */
#versus-result #btn-vs-again { order: 2; }
#versus-result #btn-vs-menu { order: 3; }
#versus-result #vs-rematch-status { flex-basis: 100%; order: 9; margin: 2px auto 0; font-size: 11px; text-align: center; }
#vs-result-map-list { grid-template-columns: 1fr 1fr 1fr; gap: 4px; width: min(430px, 99%); }
#vs-result-map-list .vs-map-btn {
  flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 3px; font-size: 10px; line-height: 1.1; min-height: 28px; justify-content: center;
}
#vs-result-map-list .vs-map-votes { font-size: 9px; }
#vs-ready-status { margin-top: 14px; }      /* niet meer half door de START-knop */
.vs-mode-note { color: var(--accent, #f2c94c); font-weight: bold; letter-spacing: 0; }
#btn-vs-ready.on { background: linear-gradient(180deg, #3ad06a, #1e8c3a); border-color: #176b2c; }

/* grote "wint de ronde"-banner */
.vs-round-banner {
  position: fixed; left: 0; right: 0; top: 36%; text-align: center;
  font-family: var(--pixel-font); font-size: clamp(16px, 4.4vw, 28px); font-weight: bold;
  letter-spacing: 1px; line-height: 1.25; text-shadow: 0 3px 0 #000; pointer-events: none; padding: 0 16px;
}
.vs-round-banner.win { color: #6fd06a; }
.vs-round-banner.lose { color: #ff6a6a; }
.vs-round-banner .rb-title { display: block; font-size: clamp(20px, 5.6vw, 40px); letter-spacing: 2px; }
.vs-round-banner .rb-name { display: block; margin-top: 4px; color: #fff; font-size: clamp(15px, 4vw, 26px); text-shadow: 0 3px 0 #000; }

/* map-intro (vóór het aftellen) */
.vs-timer { position: fixed; left: 50%; top: 6px; transform: translateX(-50%); z-index: 30; font-family: var(--pixel-font); font-weight: 900; font-size: clamp(16px, 3.6vw, 26px); color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.6); background: rgba(20,10,8,.62); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 2px 12px; letter-spacing: 1px; }
.vs-timer.urgent { color: #ff6a6a; animation: vtpulse .5s ease-in-out infinite; }
.vs-timer.sd { color: #ff5a5a; font-size: clamp(13px, 2.8vw, 20px); }
@keyframes vtpulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.14); } }
#vs-bigmsg { font-size: clamp(26px, 7vw, 52px); letter-spacing: 3px; z-index: 41; }
.vs-nuke-timer { position: fixed; left: 50%; top: 100px; transform: translateX(-50%); z-index: 30; font-family: var(--pixel-font); font-weight: 900; font-size: clamp(13px, 2.8vw, 19px); letter-spacing: 1px; padding: 1px 12px; border-radius: 8px; background: rgba(20,10,8,.72); border: 1px solid; text-shadow: 0 2px 0 #000; }
.vs-nuke-timer.mine { color: #7dff8a; border-color: #3a8a3a; }
.vs-nuke-timer.foe { color: #ff7a5a; border-color: #a3352a; }
.vs-nuke-timer.urgent { animation: vtpulse .5s ease-in-out infinite; border-color: #ffd24a; }
.tps-toast { position: fixed; left: 50%; bottom: 16%; transform: translateX(-50%); z-index: 200; background: linear-gradient(180deg, rgba(42,19,13,.95), rgba(20,9,7,.96)); border: 1px solid #b0362a; color: #ffe6d0; font-family: var(--pixel-font); font-weight: bold; font-size: clamp(12px, 2.4vw, 16px); padding: 9px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; max-width: 88%; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.tps-toast.show { opacity: 1; }
.vs-map-intro { position: fixed; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; z-index: 40; font-family: var(--pixel-font); padding: 0 16px; }
.vs-map-intro .vmi-label { font-size: clamp(11px, 2.2vw, 16px); font-weight: bold; letter-spacing: 6px; color: #ffd24a; text-shadow: 0 2px 0 #000; opacity: .9; }
.vs-map-intro .vmi-name { font-size: clamp(30px, 8.5vw, 70px); font-weight: 900; letter-spacing: 2px; color: #fff; line-height: 1.05;
  text-shadow: 0 4px 0 #000, 0 0 20px rgba(255,210,74,.55); margin-top: 2px; }
.vs-map-intro .vmi-sub { font-size: clamp(12px, 2.6vw, 20px); color: #ffe6a0; text-shadow: 0 2px 0 #000; margin-top: 8px; }
.vs-map-intro.vmi-in .vmi-label { animation: vmiUp .5s ease-out both; }
.vs-map-intro.vmi-in .vmi-name { animation: vmiPop .6s cubic-bezier(.2,1.5,.4,1) both; }
.vs-map-intro.vmi-in .vmi-sub { animation: vmiUp .5s ease-out .22s both; }
@keyframes vmiPop { 0% { transform: scale(.4); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes vmiUp { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vs-map-intro.vmi-in .vmi-label, .vs-map-intro.vmi-in .vmi-name, .vs-map-intro.vmi-in .vmi-sub { animation: none; } }
.auth-box { width: min(340px, 92%); }
.auth-sub { color: var(--text-dim); font-size: 12px; margin: 6px 0 14px; line-height: 1.4; }
#auth-fields { display: flex; flex-direction: column; gap: 10px; }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: #fff;
  background: #11151e;
  border: 2px solid #38415a;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: #5e6880; }
.auth-msg { min-height: 18px; margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.auth-box .menu-buttons { margin-top: 14px; gap: 8px; }
.auth-box .big-btn:disabled { opacity: 0.6; }
.auth-consent { margin: 12px 2px 0; color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.link-inline {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: inherit; font-size: inherit; text-decoration: underline;
}
.settings-foot { margin-top: 14px; text-align: center; }

/* ====== Privacybeleid-overlay (iframe naar de gebundelde pagina) ====== */
#privacy-screen { z-index: 70; }   /* boven het inlog- en instellingen-scherm */
.privacy-box { width: min(680px, 96%); height: min(86vh, 640px); padding: 0; overflow: hidden; position: relative; }
.privacy-box .corner-back { z-index: 2; left: auto; right: 8px; top: 8px; }
.privacy-frame { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #0d0f14; display: block; }

/* ---- sociale login (Apple / Google) ---- */
.auth-oauth { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 11px 14px; cursor: pointer;
  font-family: var(--pixel-font); font-size: 14px; font-weight: bold; letter-spacing: .5px;
  border-radius: 9px; border: 2px solid transparent; box-sizing: border-box;
  transition: transform .05s, filter .1s;
}
.oauth-btn:active { transform: translateY(2px); filter: brightness(.9); }
.oauth-btn:disabled { opacity: .55; }
.oauth-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.oauth-apple { background: #000; color: #fff; border-color: #2a2a2a; }
.oauth-google { background: #fff; color: #1f1f1f; border-color: #cfd4dc; }
.auth-or {
  position: relative; text-align: center; margin: 2px 0 12px;
  color: var(--text-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: ""; position: absolute; top: 50%; width: 28%; height: 1px; background: #38415a;
}
.auth-or::before { left: 0; } .auth-or::after { right: 0; }
.auth-or span { background: transparent; padding: 0 8px; }

/* ====== Onboarding: coach Ryan (over de match, blokkeert de knoppen niet) ====== */
#tutorial-coach {
  position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%);
  z-index: 45; width: min(560px, 94vw); pointer-events: none;
}
#tutorial-coach.hidden { display: none; }
.coach-card {
  display: flex; align-items: stretch; gap: 10px; pointer-events: auto;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20,26,38,.97), rgba(11,15,23,.98));
  border: 2px solid #7fb4ff; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 18px rgba(60,120,220,.12);
  animation: coach-pop .22s ease-out;
}
@keyframes coach-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.coach-portrait {
  width: 78px; height: 60px; flex: 0 0 auto; align-self: center;
  image-rendering: pixelated;
  background: radial-gradient(circle at 50% 62%, rgba(127,180,255,.28), transparent 66%);
  border-radius: 8px;
}
.coach-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.coach-name {
  font-family: var(--pixel-font); font-weight: 900; font-size: 13px; letter-spacing: 1px;
  color: #7fb4ff; text-shadow: 0 1px 0 #000;
}
.coach-text {
  margin: 3px 0 8px; color: #eaf1fb; font-size: 13px; line-height: 1.45;
  text-shadow: 0 1px 0 #000; min-height: 38px;
}
.coach-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.coach-dots { display: flex; gap: 5px; }
.coach-dot { width: 7px; height: 7px; border-radius: 50%; background: #33405a; }
.coach-dot.on { background: #7fb4ff; box-shadow: 0 0 6px rgba(127,180,255,.8); }
.coach-actions { display: flex; align-items: center; gap: 6px; }
.coach-skip {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-family: var(--pixel-font); font-size: 11px; letter-spacing: 1px; text-decoration: underline; padding: 6px 8px;
}
.coach-next {
  background: radial-gradient(circle at 30% 120%, rgba(120,170,255,.5), transparent 58%), linear-gradient(180deg, #2f6bd0, #1b3f86);
  color: #fff; cursor: pointer; font-family: var(--pixel-font); font-weight: bold; font-size: 13px; letter-spacing: 1px;
  border: 0; border-top: 2px solid #7fb4ff; border-bottom: 4px solid #0e224a; border-radius: 8px; padding: 8px 18px;
  text-shadow: 0 1px 0 #000; transition: transform .05s;
}
.coach-next:active { transform: translateY(2px); border-bottom-width: 2px; }

/* touch-knop die de coach uitlicht ("druk hier") */
.tut-highlight { position: relative; z-index: 30; animation: tut-pulse 1s ease-in-out infinite; }
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(127,180,255,.0); filter: none; }
  50% { box-shadow: 0 0 0 5px rgba(127,180,255,.55), 0 0 18px rgba(127,180,255,.7); filter: brightness(1.25); }
}

/* ====== 1 vs 1 versus ====== */
.big-btn.versus {
  background: linear-gradient(180deg, #b33a8a, #7a2160);
  border-color: #5a1646;
  box-shadow: 0 4px 0 #5a1646;
}
.vs-join-row { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; width: min(280px, 80%); }
#btn-vs-bot { margin-top: 22px; }
.vs-join-row .auth-input { text-transform: uppercase; text-align: center; letter-spacing: 4px; font-size: 20px; width: 110px; }
.vs-join-row .big-btn { flex: 1; width: auto; padding: 10px; font-size: 15px; }
.vs-wait-label { color: var(--text-dim); font-size: 13px; margin-top: 10px; }
.vs-room-code {
  font-family: var(--pixel-font); font-size: 52px; font-weight: bold;
  letter-spacing: 10px; color: var(--gold); margin: 6px 0 8px; text-shadow: 0 3px 0 #000;
}
.vs-wait-sub { color: var(--text-dim); font-size: 13px; line-height: 1.5; max-width: 280px; margin: 0 auto; }
#versus-lobby { display: flex; flex-direction: column; align-items: center; }

#versus-hud {
  position: absolute; top: env(safe-area-inset-top, 8px); left: 0; right: 0; z-index: 40;
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(132px, 22vw, 260px);
  pointer-events: none; padding-top: 6px;
}
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vs-score {
  font-family: var(--pixel-font); font-size: 28px; font-weight: bold; color: #fff;
  text-shadow: 0 2px 0 #000; min-width: 30px; text-align: center;
}
.vs-side-me .vs-score { color: #6fd06a; }
.vs-side-them .vs-score { color: #ff6a6a; }
.vs-name { display: flex; align-items: center; gap: 4px; font-family: var(--pixel-font); font-weight: bold; font-size: clamp(10px, 2vw, 14px); color: #fff; text-shadow: 0 2px 0 #000; max-width: 130px; }
.vs-name .vn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-side-me .vs-name { color: #bff0bb; } .vs-side-them .vs-name { color: #ffc4bd; }
.vs-rank-gem { flex: 0 0 auto; width: 15px; height: 19px; display: inline-flex; }
.rank-shield { display: block; }
.vs-hp {
  width: 84px; height: 8px; background: #11151e; border: 1px solid #000; border-radius: 4px; overflow: hidden;
}
.vs-hp-fill { height: 100%; width: 100%; transition: width 0.15s linear; }
.vs-hp-fill.me { background: linear-gradient(180deg, #6fd06a, #2e8c3a); }
.vs-hp-fill.them { background: linear-gradient(180deg, #ff7a6a, #b32e22); }
.vs-shield {
  width: 84px; height: 5px; margin-bottom: 2px; background: #11151e; border: 1px solid #000; border-radius: 3px; overflow: hidden;
}
.vs-shield-fill { height: 100%; width: 100%; background: linear-gradient(180deg, #7fc8ff, #2f7ad0); transition: width 0.12s linear; }
.vs-guard {
  width: 84px; height: 4px; margin-top: 2px; background: #11151e; border: 1px solid #000; border-radius: 3px; overflow: hidden;
}
.vs-guard-fill { height: 100%; width: 100%; background: linear-gradient(180deg, #ffe27a, #d8a32e); transition: width 0.1s linear; }
.vs-guard.broken .vs-guard-fill { background: linear-gradient(180deg, #ff6a4a, #b32e22); }
/* harnas-HP (grijs balkje onder de normale hp) */
.vs-armor {
  width: 84px; height: 5px; margin-top: 2px; background: #11151e; border: 1px solid #000; border-radius: 3px; overflow: hidden;
}
.vs-armor-fill { height: 100%; width: 100%; background: linear-gradient(180deg, #d6dde4, #8b949e); transition: width 0.12s linear; }

/* ===== Blacksmith ===== */
.bs-mats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.mat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(11px,1.6vw,14px); color: #f0e6d2;
  background: linear-gradient(180deg, rgba(40,30,20,.8), rgba(18,12,8,.85)); border: 1px solid #5a4632; border-radius: 999px; padding: 3px 10px; }
.mat-chip canvas { image-rendering: pixelated; }
.mat-chip b { color: #ffe6a0; }
.bs-forge { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 2px auto 8px; max-width: 520px;
  background: linear-gradient(180deg, rgba(40,28,18,.7), rgba(16,10,6,.8)); border: 1px solid #6a4a2a; border-radius: 12px; padding: 8px 12px; }
.bs-forge .bs-forge-name { font-weight: bold; color: #ffe6a0; }
.bs-forge .bs-forge-time { color: #cfe0f2; font-variant-numeric: tabular-nums; }
.bs-skip { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; color: #ffd7e0; cursor: pointer;
  background: linear-gradient(180deg, #6a1830, #3a0c1a); border: 1px solid #ff6f8a; border-radius: 999px; padding: 3px 9px; }
.bs-collect { font-weight: bold; color: #10240f; background: linear-gradient(180deg, #7be07a, #2f9c3a); border: none; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.armor-card .armor-hp { color: #cfe0f2; font-size: 12px; }
.armor-card .armor-dur { height: 5px; border-radius: 3px; background: #2a2018; overflow: hidden; margin-top: 3px; }
.armor-card .armor-dur > span { display: block; height: 100%; background: linear-gradient(180deg, #d6dde4, #8b949e); }
.armor-card .armor-dur.low > span { background: linear-gradient(180deg, #ff8a6a, #c0392b); }
.armor-card .armor-dur-lbl { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #b9c6d4; margin-top: 4px; font-weight: bold; }
.armor-card .armor-dur-lbl .ic { width: 11px; height: 11px; color: #7bd67a; }
.armor-card .armor-dur-lbl.low { color: #ffb36a; } .armor-card .armor-dur-lbl.low .ic { color: #ffb36a; }
.armor-card .armor-dur-lbl.broken { color: #ff7a6a; } .armor-card .armor-dur-lbl.broken .ic { color: #ff7a6a; }
.armor-cost { font-size: 11px; color: #d8c9a8; margin-top: 2px; }
.armor-cost .short { color: #ff8a7a; }
/* FORGE-knop: een steen met de tekst erin geslagen */
.bs-craft-btn {
  width: 100%; margin-top: auto; cursor: pointer;   /* knop onderaan de kaart -> alle FORGE-knoppen lijnen uit */
  padding: 8px 6px; border-radius: 8px; border: 2px solid #2c2620;
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 2px; font-size: clamp(12px, 1.7vw, 15px);
  color: #cdb890;
  text-shadow: 0 -1px 0 rgba(0,0,0,.7), 0 1px 0 rgba(240,220,170,.20);   /* ingeslagen letters */
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,.035) 0 5px, rgba(0,0,0,.05) 5px 11px),
    linear-gradient(180deg, #8a7e6b, #514637 58%, #3a332b);              /* ruwe steen */
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -5px 9px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.5);
}
.bs-craft-btn.equip { color: #ffe6a0; border-color: #7a5a2a;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15), inset 0 -5px 9px rgba(0,0,0,.55), 0 0 11px rgba(255,150,40,.4); }  /* smeedbaar: warme gloed */
.bs-craft-btn.owned { color: #9ad89a; }
.bs-craft-btn.locked, .bs-craft-btn:disabled { opacity: .5; cursor: default; }
.bs-craft-btn:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(0,0,0,.65); }
/* Blacksmith compact op iOS-landscape zodat alles past (geen verticale scroll) */
@media (max-height: 520px) {
  #blacksmith-screen .screen-title { font-size: 15px; margin-bottom: 2px; }
  #blacksmith-screen #bs-tabs { margin-bottom: 3px; }
  .bs-mats { gap: 5px; margin: 1px 0 3px; }
  .mat-chip { font-size: 11px; padding: 2px 8px; }
  .bs-forge { padding: 4px 10px; margin: 1px auto 4px; }
  #bs-grid { gap: 6px; }
  #bs-grid .shop-card { padding: 6px; gap: 3px; }
  #bs-grid .shop-card canvas { max-height: 54px; }
  #bs-grid .shop-card-name { font-size: 12px; }
  #bs-grid .armor-hp { font-size: 10px; }
  #bs-grid .armor-cost { font-size: 9px; margin-top: 1px; }
  .bs-craft-btn { padding: 5px 4px; font-size: 12px; margin-top: auto; }
}
#btn-vs-quit {
  position: absolute; right: max(10px, env(safe-area-inset-right)); top: 4px;
  pointer-events: auto; width: 34px; height: 34px; border-radius: 8px;
  background: rgba(0,0,0,0.45); color: #fff; border: 2px solid #555; font-size: 16px; cursor: pointer;
}
#btn-vs-quit.leave {            /* online: "LEAVE" i.p.v. ✕ */
  width: auto; height: 30px; padding: 0 12px; font-size: 13px; font-weight: bold; letter-spacing: 1px;
  border-color: #b34; background: rgba(120,30,40,0.6);
}
.vs-countdown {
  position: fixed; left: 0; right: 0; top: 38%; text-align: center;
  font-family: var(--pixel-font); font-size: 72px; font-weight: bold;
  color: var(--gold); text-shadow: 0 4px 0 #000; pointer-events: none;
}

/* ====== Leaderboard ====== */
.lb-list { width: min(420px, 94%); margin: 10px auto 4px; display: flex; flex-direction: column; gap: 5px; max-height: 56vh; overflow-y: auto; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  background: #161b27; border: 2px solid #2a3242; border-radius: 8px;
  padding: 8px 12px; font-size: 14px; color: #fff;
}
.lb-row.me { border-color: var(--accent); background: #1c2a1c; }
.lb-rank { width: 30px; text-align: center; font-weight: bold; color: var(--gold); }
.lb-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-lvl { color: #8fd0ff; font-size: 12px; min-width: 48px; text-align: right; }
.lb-stat { color: var(--text-dim); font-size: 12px; min-width: 64px; text-align: right; }
.lb-rankbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: bold; letter-spacing: .3px; border: 1px solid; border-radius: 5px; padding: 0 5px 0 3px; margin-left: 4px; vertical-align: middle; background: rgba(0,0,0,.28); }
.lb-shield { display: inline-flex; width: 13px; height: 16px; }

.screen-title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000;
  margin-bottom: 6px;
}
.screen-title.win { color: var(--accent); }
.screen-title.lose { color: var(--danger); }
.screen-sub { color: var(--text-dim); margin-bottom: 20px; font-size: 13px; letter-spacing: 1px; }

.back-btn {
  margin-top: 10px; flex: 0 0 auto;
  padding: 9px 18px;
  font-family: var(--pixel-font);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #3a2018, #221009);
  color: #f0d8b8;
  border: 2px solid #7a4a30;
  border-bottom: 3px solid #120804;
  border-radius: 7px;
  cursor: pointer;
}
.back-btn:active { transform: translateY(2px); }

/* ====== Bot-moeilijkheidsschuif ====== */
#vs-bot-diff { margin: 6px 0 4px; }
.vs-slider {
  -webkit-appearance: none; appearance: none;
  width: min(280px, 86%); height: 8px; border-radius: 5px;
  background: linear-gradient(90deg, #2ecc55, #f2c94c, #e8483b);
  outline: none; margin: 4px 0 2px;
}
.vs-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #1a2030; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.vs-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #1a2030; cursor: pointer;
}
#vs-diff-name { color: var(--accent, #f2c94c); font-weight: bold; }

/* ====== Online-teller op de chat-knop ====== */
#btn-chat { position: relative; }
.chat-badge { display: none; }
.chat-badge.on {
  /* absoluut in de hoek -> de knop houdt zijn breedte (menu-knoppen verschuiven niet) */
  position: absolute; top: 3px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; margin: 0;
  border-radius: 9px; background: #2ecc55; color: #06210f;
  font-size: 10px; font-weight: 900; line-height: 1;
  box-shadow: 0 0 8px rgba(46,204,85,0.7);
  animation: onlinePulse 1.6s ease-in-out infinite;
}
.chat-badge.on::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #06210f; box-shadow: 0 0 0 2px rgba(6,33,15,0.25);
}
@keyframes onlinePulse { 0%,100% { box-shadow: 0 0 6px rgba(46,204,85,0.55); } 50% { box-shadow: 0 0 12px rgba(46,204,85,0.95); } }

/* ====== Lobby chat ====== */
.chat-inner { width: min(440px, 94%); display: flex; flex-direction: column; }
.chat-online {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11px; margin-bottom: 10px; max-height: 64px; overflow-y: auto;
}
.chat-online-label { color: var(--text-dim); letter-spacing: 1px; margin-right: 2px; }
.chat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #2a3243; border: 1px solid #3a4456; border-radius: 12px;
  padding: 3px 8px; font-size: 11px; color: #cfe6ff;
}
.chat-chip.me { background: #1f3a2a; border-color: #2f6b45; color: #b6f0c8; }
.chat-invite-btn {
  border: none; background: var(--accent, #f2c94c); color: #1a1404;
  border-radius: 8px; font-size: 11px; line-height: 1; padding: 2px 5px;
  cursor: pointer; font-weight: 900;
}
.chat-messages {
  flex: 1; min-height: 180px; max-height: 46vh; overflow-y: auto;
  background: rgba(0,0,0,0.28); border: 1px solid #2a3243; border-radius: 8px;
  padding: 8px 10px; text-align: left; font-size: 13px; line-height: 1.5;
}
.chat-line { margin: 2px 0; word-break: break-word; }
.chat-line.me .chat-nick { color: #b6f0c8; }
.chat-nick { color: #8fd0ff; font-weight: bold; }
.chat-line.sys { text-align: center; }
.chat-sys { color: var(--text-dim); font-style: italic; font-size: 12px; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row .auth-input { flex: 1; margin: 0; }
.chat-input-row .big-btn { width: auto; padding: 0 18px; margin: 0; }

/* ====== Friends (vrienden + DM-chat) ====== */
.friends-inner { width: min(460px, 95%); display: flex; flex-direction: column; }
#friends-main, #friends-convo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
#ftab-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.friends-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.friends-subhead { text-align: left; font-size: 11px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; margin: 4px 0 2px; }
.friend-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #232b3a; border: 1px solid #313c50; border-radius: 10px; padding: 8px 10px;
}
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #55606f; flex: 0 0 auto; }
.fr-dot.on { background: #46d17a; box-shadow: 0 0 6px #46d17a; }
.fr-name { font-weight: bold; color: #eaf1fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-lvl { font-size: 11px; color: #9fb0c4; margin-left: 2px; flex: 0 0 auto; }
.fr-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.fr-pending { font-size: 11px; color: var(--text-dim); font-style: italic; }
.fr-btn {
  border: none; border-radius: 8px; cursor: pointer; font-weight: 900; font-size: 13px;
  line-height: 1; padding: 6px 8px; background: #35415a; color: #dbe6f5;
}
.fr-btn.challenge { background: var(--gold, #f2c94c); color: #241a04; }
.fr-btn.accept { background: #2f9e57; color: #06210f; }
.fr-btn.danger { background: #7a2f2f; color: #ffd9d9; }
.fr-btn:disabled { opacity: 0.4; cursor: default; }
#friend-add-msg, #friends-empty, #friends-login-msg { text-align: left; }
#friends-tabs { margin-bottom: 8px; }

/* DM-gesprek */
.convo-head { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 8px; }
.convo-back { border: none; background: #35415a; color: #dbe6f5; border-radius: 8px; font-size: 16px; font-weight: 900; padding: 4px 11px; cursor: pointer; }
.convo-name { font-weight: 900; font-size: 16px; color: #eaf1fb; flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-challenge { border: none; background: var(--gold, #f2c94c); color: #241a04; border-radius: 8px; font-weight: 900; font-size: 12px; padding: 6px 10px; cursor: pointer; }
.convo-challenge:disabled { opacity: 0.4; cursor: default; }
.dm-line { margin: 3px 0; display: flex; }
.dm-line span { display: inline-block; max-width: 78%; padding: 6px 10px; border-radius: 12px; background: #2a3446; color: #e7eefb; word-break: break-word; font-size: 13px; line-height: 1.4; }
.dm-line.me { justify-content: flex-end; }
.dm-line.me span { background: #2f6b45; color: #eafff1; }
.dm-line.sys { justify-content: center; }
.dm-line.sys span { background: transparent; color: var(--text-dim); font-style: italic; font-size: 12px; }

/* ====== Journey co-op ====== */
#coop-bar { width: 100%; margin: 2px 0 8px; }
#coop-panel { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 8px;
  background: rgba(0,0,0,0.22); border: 1px solid #313c50; border-radius: 10px; padding: 12px; }
#coop-panel .big-btn { margin: 0; }
#coop-panel .vs-join-row { margin: 0; }
#coop-status { margin: 0; min-height: 16px; }

/* ====== Wereld-tabs ====== */
.world-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.world-tab {
  font-family: var(--pixel-font);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 2px solid #5a2e1c;
  border-bottom: 3px solid #1a0805;
  background: linear-gradient(180deg, #3a1c12, #241009);
  color: #e0b89a;
  cursor: pointer;
}
.world-tab.active { border-color: #d2622e; color: #ffe9c0; background: linear-gradient(180deg, #7a3418, #4a1c0c); box-shadow: 0 0 8px rgba(255,90,25,.5); }
.world-tab.locked { opacity: 0.5; cursor: not-allowed; }

/* ====== Shop-tabs (wapens/characters/hoeden) ====== */
.shop-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 6px;
  flex-wrap: wrap;
}
.shop-tab {
  font-family: var(--pixel-font);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 7px 13px;
  border-radius: 7px;
  border: 2px solid #5a2e1c;
  border-bottom: 3px solid #1a0805;
  background: linear-gradient(180deg, #3a1c12, #241009);
  color: #e0b89a;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.shop-tab.active { border-color: #d2622e; color: #ffe9c0; background: linear-gradient(180deg, #7a3418, #4a1c0c); box-shadow: 0 0 8px rgba(255,90,25,.5); }
.shop-back { margin-top: 0; display: inline-flex; align-items: center; gap: 5px; }
/* ===== Instellingen (2 kolommen — past ook op landscape) ===== */
.settings-box { width: min(720px, 96%); position: relative; }
.settings-grid { display: flex; gap: clamp(10px, 3vw, 26px); align-items: flex-start; justify-content: center; width: 100%; }
.settings-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 340px; }
.settings-label { font-family: var(--pixel-font); font-size: 12px; letter-spacing: 1px; color: #e2b48a; text-transform: uppercase; text-align: left; margin-bottom: 2px; }
.settings-col .big-btn, .settings-col .text-btn { width: 100%; margin: 0; }
.lang-row { display: flex; gap: 8px; }
.lang-btn { flex: 1 1 0; padding: 8px; border-radius: 8px; cursor: pointer;
  font-family: var(--pixel-font); font-size: 13px; color: #e2c4aa;
  background: linear-gradient(180deg, #2a1810, #190c07); border: 2px solid #4a2818; }
.lang-btn.active { border-color: #d2622e; color: #ffe9c0; background: linear-gradient(180deg, #5a2810, #3a160c); box-shadow: 0 0 8px rgba(255,90,25,.4); }
.text-btn.danger { color: #ff6a5a; }
@media (max-height: 520px) {
  #settings-screen .overlay-box { padding: 10px 14px; max-height: 96%; overflow-y: auto; }
  .settings-grid { gap: 14px; }
  #settings-screen .screen-title { font-size: 16px; margin-bottom: 4px; }
  .settings-col .big-btn { padding: 8px; font-size: 13px; }
}
/* kleine ronde terug-knop linksboven (shop / inventaris / blacksmith) */
#shop-screen .screen-inner, #inventory-screen .screen-inner, #blacksmith-screen .screen-inner { position: relative; }
.corner-back {
  position: absolute; left: 8px; top: 8px; z-index: 6;
  width: 34px; height: 34px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: #f0d8b8;
  border: 2px solid #b0362a;
  background: linear-gradient(180deg, #3a1410, #1a0806);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,120,90,.25);
}
.corner-back .ic { width: 18px; height: 18px; }
.corner-back:hover { border-color: #ff5a4a; box-shadow: 0 0 8px rgba(255,70,50,.5); }
.corner-back:active { transform: scale(.92); }
@media (max-height: 520px) { .corner-back { width: 30px; height: 30px; left: 6px; top: 6px; } .corner-back .ic { width: 16px; height: 16px; } }

/* ====== Splash bij opstarten (logo, fadet vanzelf weg — geen JS nodig) ====== */
#splash {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #5a1e0a, #160806 80%);
  opacity: 1; transition: opacity 0.5s ease;
}
#splash img { width: min(58%, 400px); height: auto; image-rendering: pixelated; animation: splashPop 0.6s cubic-bezier(.2,1.4,.4,1) both; }
#splash.fading { opacity: 0; pointer-events: none; }
#splash.gone { display: none; }
@keyframes splashPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #splash img { animation: none; } }

/* ====== Journey: verhaal-cutscene (caption + skip over het canvas) ====== */
#journey-story { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#journey-story.hidden { display: none; }
.journey-cap {
  position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
  width: min(80%, 520px); text-align: center;
  font-family: var(--pixel-font); font-weight: bold; font-size: clamp(13px, 2.4vw, 20px);
  color: #fff; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,.7);
  background: rgba(8,6,10,0.5); border-radius: 8px; padding: 8px 12px; line-height: 1.35;
}
.journey-skip {
  position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top));
  pointer-events: auto; cursor: pointer;
  font-family: var(--pixel-font); font-weight: bold; font-size: 13px; color: #f0d8b8;
  background: linear-gradient(180deg, #3a2018, #221009); border: 2px solid #7a4a30; border-bottom: 3px solid #120804;
  border-radius: 7px; padding: 7px 14px;
}
.journey-next {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  pointer-events: auto; cursor: pointer;
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 1px; font-size: clamp(14px, 2.6vw, 18px);
  color: #1b2236; background: linear-gradient(180deg, #ffe27a, #ffc23a);
  border: 0; border-bottom: 4px solid #b8860b; border-radius: 10px; padding: 9px 26px;
  box-shadow: 0 0 14px rgba(255,200,80,.5); animation: nextPulse 1s ease-in-out infinite alternate;
}
.journey-next.hidden { display: none; }
@keyframes nextPulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .journey-next { animation: none !important; } }

/* ====== Win-celebratie (kort, vóór het uitslagscherm) ====== */
.vs-win {
  position: absolute; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(120,50,10,0.45), rgba(8,6,10,0.78));
  pointer-events: none;
}
.vs-win.hidden { display: none; }
.vs-win-inner { text-align: center; animation: winPop 0.45s cubic-bezier(.2,1.4,.4,1) both; }
.vs-win-trophy .ic { width: clamp(40px, 9vw, 78px); height: clamp(40px, 9vw, 78px); filter: drop-shadow(0 0 12px rgba(255,180,60,.9)); }
.vs-win-title {
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 4px;
  font-size: clamp(18px, 4vw, 34px); color: #ffe27a;
  text-shadow: 0 0 12px rgba(255,150,40,.9), 2px 2px 0 #000; margin-top: 4px;
}
.vs-win-name {
  font-family: var(--pixel-font); font-weight: 900;
  font-size: clamp(26px, 7vw, 60px); color: #fff;
  text-shadow: 0 0 14px rgba(255,120,40,.8), 3px 3px 0 #000; margin-top: 2px;
  animation: winGlow 1s ease-in-out infinite alternate;
}
@keyframes winPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes winGlow { from { text-shadow: 0 0 10px rgba(255,120,40,.6), 3px 3px 0 #000; } to { text-shadow: 0 0 22px rgba(255,170,60,1), 3px 3px 0 #000; } }
@media (prefers-reduced-motion: reduce) { .vs-win-inner, .vs-win-name { animation: none !important; } }

/* ===== Beloning-popup (unlocks / munten / xp) ===== */
#reward-pop {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(20,60,40,0.55), rgba(6,8,10,0.86));
}
#reward-pop.hidden { display: none; }
.reward-card {
  text-align: center; width: min(320px, 86vw);
  padding: 18px 18px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #2a3550, #1b2236);
  border: 3px solid #ffd86b; box-shadow: 0 0 26px rgba(255,200,80,.55), 0 10px 30px rgba(0,0,0,.6);
  animation: rewardPop 0.42s cubic-bezier(.2,1.5,.4,1) both;
}
.reward-title {
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 2px;
  font-size: clamp(15px, 3.6vw, 22px); color: #ffe27a;
  text-shadow: 0 0 12px rgba(255,170,50,.85), 2px 2px 0 #000;
}
#reward-canvas {
  image-rendering: pixelated; width: 170px; height: 120px; margin: 6px auto 2px; display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.reward-name {
  font-family: var(--pixel-font); font-weight: 800;
  font-size: clamp(13px, 3vw, 17px); color: #fff; text-shadow: 2px 2px 0 #000; margin-top: 2px;
}
.reward-count { font-size: 12px; color: #bcd0e8; margin-top: 6px; min-height: 14px; }
.reward-ok {
  margin-top: 12px; padding: 10px 30px; cursor: pointer;
  font-family: var(--pixel-font); font-weight: 900; letter-spacing: 2px; font-size: 16px;
  color: #1b2236; background: linear-gradient(180deg, #ffe27a, #ffc23a);
  border: 0; border-radius: 10px; box-shadow: 0 4px 0 #b8860b; transition: transform .08s;
}
.reward-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8860b; }
@keyframes rewardPop { from { transform: scale(.55) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reward-card { animation: none !important; } }
.shop-card.locked { opacity: 0.6; }

/* ====== Level grid ====== */
.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 20px 0;
}
@media (max-width: 480px) { .level-grid { grid-template-columns: repeat(3, 1fr); } }

.level-cell {
  aspect-ratio: 1;
  background: var(--panel-light);
  border: 3px solid #3a4456;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}
.level-cell .num { font-size: 24px; }
.level-cell.locked { opacity: 0.4; cursor: not-allowed; }
.level-cell.cleared { border-color: var(--accent); }
.level-cell .stars { font-size: 11px; color: var(--gold); margin-top: 2px; height: 12px; }
.level-cell.locked .num::after { content: " 🔒"; font-size: 14px; }

/* lage/landscape schermen: alles compacter zodat het binnen beeld past */
@media (max-height: 520px) {
  .screen-inner { padding: 8px; }
  .screen-title { font-size: 22px; margin-bottom: 2px; }
  .screen-sub { font-size: 10px; margin-bottom: 8px; }
  .level-grid { gap: 8px; margin: 8px auto; max-width: 520px; }
  .level-cell .num { font-size: 16px; }
  .level-cell .stars { font-size: 9px; }
  .level-cell .lvl-badge { font-size: 7px; top: 2px; }
  .back-btn { margin-top: 10px; padding: 7px 16px; font-size: 12px; }
  .game-title { font-size: 40px; }
  .subtitle { margin: 6px 0 16px; }
  .big-btn { padding: 11px; font-size: 16px; }
  .menu-buttons { gap: 9px; }
  .menu-coins, .shop-coins { margin-top: 12px; }
  .shop-grid { gap: 8px; margin: 10px auto; max-width: 560px; }
  .shop-card { padding: 9px; }
}
.level-cell .lvl-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--gold);
  background: rgba(0,0,0,0.5);
  padding: 1px 4px;
  border-radius: 3px;
}
.level-cell .lvl-badge.boss { color: var(--danger); }

/* ====== Shop grid (items netjes gecentreerd; alleen dit scrolt) ====== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* altijd 4 naast elkaar (ook mobiel) */
  justify-content: center;
  gap: 8px;
  margin: 8px auto;
  padding: 2px;
  max-width: 820px;
}
.shop-grid .shop-card canvas { max-width: 100%; height: auto; }   /* preview schaalt mee in smalle cel */
.shop-coins { margin: 4px 0 6px !important; font-size: 15px; display: flex; gap: 16px; justify-content: center; align-items: center; }
/* ---- Crates + Rubies-tabs ---- */
.shop-note { grid-column: 1 / -1; margin: 0 auto 4px; color: var(--text-dim); font-size: 12px; line-height: 1.4; text-align: center; max-width: 460px; }
.crate-card .pu-ico, .ruby-card .pu-ico { width: 76px; height: 76px; image-rendering: pixelated; background: transparent; }
.crate-card, .ruby-card { justify-content: space-between; }
.ruby-best { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 5px; font-size: 9px; font-weight: bold; color: #14100a; background: linear-gradient(180deg, #ffe27a, #f2c94c); vertical-align: middle; }
.apay-ic { vertical-align: -3px; margin-right: 3px; }
.w-unlock { margin-top: 3px; font-size: 10px; color: var(--text-dim); line-height: 1.3; }
#lb-list { max-height: none; width: min(440px, 100%); margin: 6px auto; }
/* vs-knoppen (map/mode) in lava-stijl */
.vs-map-btn { background: linear-gradient(180deg, #2a1810, #190c07); border: 2px solid #4a2818; color: #e2c4aa; }
.vs-map-btn.picked { border-color: #d2622e; background: linear-gradient(180deg, #5a2810, #3a160c); color: #ffe9c0; }
.vs-mode-btn { background: linear-gradient(180deg, #2a1810, #190c07); border: 2px solid #4a2818; color: #cdb39c; }
.vs-mode-btn.active { border-color: #d2622e; background: linear-gradient(180deg, #5a2810, #3a160c); color: #ffe9c0; }
/* smal scherm: 4 kolommen behouden, kaarten compacter */
@media (max-width: 620px) {
  .shop-grid { gap: 6px; }
  .shop-card { padding: 6px; gap: 4px; border-width: 2px; }
  .shop-card .w-name { font-size: 11px; }
  .shop-card .w-stats { font-size: 9px; line-height: 1.3; }
  .shop-buy { padding: 6px 2px; font-size: 10px; }
  .powerup-card .pu-ico { width: 60px; height: 60px; min-width: 60px; }
}

.shop-card {
  position: relative;
  background: #0d1018;
  border: 3px solid #3a4456;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;                 /* niets steekt door de (gouden) rand heen */
}
.shop-card canvas { image-rendering: pixelated; background: transparent; }
.shop-card .w-name { font-size: 16px; font-weight: bold; }
.shop-card .w-slot {
  font-size: 9px;
  font-weight: bold;
  color: var(--text-dim);
  border: 1px solid #3a4456;
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.shop-card .w-stats { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.shop-card .w-stats b { color: var(--accent); }
.shop-buy {
  width: 100%;
  margin-top: auto;                 /* knop onderaan de kaart -> alle equip-knoppen lijnen horizontaal uit */
  padding: 10px;
  font-family: var(--pixel-font);
  font-weight: bold;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid;
}
.shop-buy.buy { background: var(--gold); color: #2a2208; border-color: #b89a1e; }
.shop-buy.equip { background: var(--accent); color: #0d1f04; border-color: #2e5e12; }
.shop-buy.equipped { background: var(--panel); color: var(--accent); border-color: var(--accent); }
.shop-buy.cant { background: #2a2f3a; color: var(--text-dim); border-color: #3a4456; cursor: not-allowed; }
.shop-card.owned { border-color: var(--accent-dark); }

/* ====== Horizontale galerij (shop + inventaris carrousel) ====== */
.shop-grid.gallery {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;         /* NIET scrollen — alles past binnen de hoogte */
  padding: 0 46px;          /* zijgoten waar de pijlen in staan (buiten de viewport) */
  margin: 0 auto;
  max-width: 560px;
  min-height: 0;
}
.gal-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;      /* kaart verticaal gecentreerd in de beschikbare ruimte */
  padding: 6px 0;
}
.gal-track {
  display: flex;
  align-items: center;
  width: 100%;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.gal-slide {
  flex: 0 0 auto;
  width: min(58%, 230px);
  display: flex;
  padding: 0 5px;
  transform: scale(.74);
  opacity: .55;
  filter: saturate(.65) brightness(.8);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s, filter .34s;
  pointer-events: none;
}
.gal-slide.active {
  transform: scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
.gal-slide .shop-card {
  width: 100%;
  margin: 0;
}
.gal-slide.active .shop-card {
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  border-color: var(--gold);
}
.gal-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #4a5568;
  background: rgba(16, 20, 28, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.gal-arrow.left { left: 1px; }
.gal-arrow.right { right: 1px; }
.gal-arrow .ic { width: 24px; height: 24px; }
.gal-arrow:disabled { opacity: .28; cursor: default; }
.gal-arrow:not(:disabled):active { transform: translateY(-50%) scale(.9); }
.gal-dots {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-bottom: 2px;
}
.gal-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3a4456;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.gal-dot.on { background: var(--gold); transform: scale(1.25); }
@media (max-width: 620px) {
  .shop-grid.gallery { padding: 0 38px; }
  .gal-slide { width: min(60%, 200px); }
  .gal-arrow { width: 36px; height: 36px; }
}
/* ====== Horizontale PLANK (nieuw): meerdere kaarten tegelijk, sideways scrollen ====== */
.shop-grid.gallery {
  display: flex; flex-direction: row; align-items: stretch; gap: 4px; position: relative;
  overflow: visible; width: 100%; max-width: 1000px; margin: 6px auto; padding: 0; min-height: 0;
}
.shop-shelf {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; gap: 10px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 10px; scroll-padding-inline: 8px;
}
.shop-shelf.centered { justify-content: center; }   /* weinig kaarten -> gecentreerd i.p.v. links geplakt */
.shop-shelf::-webkit-scrollbar { height: 6px; }
.shop-shelf::-webkit-scrollbar-track { background: transparent; }
.shop-shelf::-webkit-scrollbar-thumb { background: #3a4456; border-radius: 3px; }
.shelf-cell { flex: 0 0 auto; width: clamp(148px, 20vw, 194px); scroll-snap-align: center; display: flex; }
.shelf-cell .shop-card { width: 100%; margin: 0; }
/* pijlen als vaste flex-knoppen naast de plank (vooral desktop; op touch veeg je gewoon) */
.shop-grid.gallery .gal-arrow {
  position: static; flex: 0 0 auto; align-self: center; transform: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #4a5568; background: rgba(16,20,28,.92);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.shop-grid.gallery .gal-arrow .ic { width: 22px; height: 22px; }
.shop-grid.gallery .gal-arrow:disabled { opacity: .3; cursor: default; }
.shop-grid.gallery .gal-arrow:not(:disabled):active { transform: scale(.9); }

/* lage schermen (landscape mobiel): kop + kaarten compacter zodat er meer op de plank past */
@media (max-height: 520px) {
  #shop-screen .screen-title, #inventory-screen .screen-title { font-size: 15px; margin-bottom: 1px; }
  #shop-screen .shop-tabs, #inventory-screen .shop-tabs { margin-bottom: 3px; }
  .shop-coins { font-size: 12px !important; margin: 1px 0 3px !important; }
  #inv-hint { display: none; }
  .shelf-cell { width: clamp(130px, 18vw, 166px); }
  .shelf-cell .shop-card { padding: 7px; gap: 4px; }
  .shelf-cell .shop-card canvas { max-height: 62px; }
  .shelf-cell .shop-card .w-name { font-size: 12px; }
  .shelf-cell .shop-card .w-stats { font-size: 9px; line-height: 1.28; }
  .shelf-cell .shop-buy { padding: 6px 2px; font-size: 11px; }
  .shop-grid.gallery .gal-arrow { width: 32px; height: 32px; }
}
@media (max-width: 620px) {
  .shop-grid.gallery .gal-arrow { display: none !important; }   /* touch: gewoon vegen -> pijlen weg, meer ruimte */
  .shop-grid.gallery { gap: 0; }
  .shelf-cell { width: clamp(132px, 40vw, 158px); }             /* portrait: 2 kaarten in beeld */
}

.result-stats {
  background: var(--panel);
  border: 2px solid #3a4456;
  border-radius: 8px;
  padding: 18px;
  margin: 18px auto;
  width: min(320px, 90%);
  font-size: 16px;
  line-height: 2;
}
.result-stats span { color: var(--gold); font-weight: bold; }
.result-stats .lost-coins { color: var(--text-dim); }
.result-stats .lost-coins span { color: var(--danger); }
.result-stats .lose-note { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

/* ====== Draai-je-telefoon hint ====== */
#rotate-hint {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1.5;
  padding: 24px;
}
#rotate-hint .rotate-icon { font-size: 56px; animation: rotatePulse 1.6s ease-in-out infinite; }
#rotate-hint span { color: var(--text-dim); font-size: 13px; }
@keyframes rotatePulse { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* alleen tonen op touch-apparaten in portret-stand tijdens het spelen */
body.is-touch.portrait.in-game #rotate-hint { display: flex; }

/* ===== Training Lobby ===== */
/* compacte hulpknoppen-rij (Training Lobby + Blacksmith) net boven de shop */
.menu-utility-row { display: flex; justify-content: center; gap: clamp(6px, 1.5vw, 12px); flex: 0 0 auto; flex-wrap: wrap; }
.train-lobby-btn {
  display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0;
  padding: clamp(4px, 1vh, 7px) clamp(10px, 2.4vw, 16px);
  font-size: clamp(11px, 1.5vw, 14px); letter-spacing: .5px;
  border-color: #3a7a4a !important;
  background: linear-gradient(180deg, rgba(46,120,74,0.55), rgba(20,60,36,0.65)) !important;
  color: #eafff0 !important;
}
.train-lobby-btn .ic { width: 15px; height: 15px; }
#train-hud { position: absolute; inset: 0; z-index: 24; pointer-events: none; }
#train-hud > * { pointer-events: auto; }
#train-topbar {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; pointer-events: none;
  font-family: var(--pixel-font); text-shadow: 0 2px 0 #000;
}
#train-title { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.train-count { color: #bfe9ff; font-size: 12px; background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 8px; }
#btn-train-quit {
  position: absolute; right: max(10px, env(safe-area-inset-right)); top: 4px;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(0,0,0,0.45); color: #fff; border: 2px solid #555; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#btn-train-quit .ic { width: 18px; height: 18px; }
.train-computer-btn {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
  padding: 9px 16px; border-radius: 12px; border: 2px solid var(--gold);
  background: rgba(16,20,28,0.92); color: #ffe9a0; font-family: var(--pixel-font);
  font-size: 13px; letter-spacing: 1px; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.5);
  animation: trainPulse 1.1s ease-in-out infinite;
}
@keyframes trainPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
#train-computer-panel {
  position: absolute; inset: 0; z-index: 26; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.train-pu-box {
  width: min(92vw, 560px); max-height: 84vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1a2030, #10141d); border: 2px solid var(--gold);
  border-radius: 14px; padding: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
.train-pu-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--pixel-font); color: var(--gold); font-size: 14px; letter-spacing: 1px; margin-bottom: 8px;
}
.train-pu-close {
  width: 28px; height: 28px; border-radius: 7px; border: 2px solid #555;
  background: rgba(0,0,0,0.4); color: #fff; font-size: 14px; cursor: pointer;
}
.train-pu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.train-pu-divider {
  grid-column: 1 / -1; font-family: var(--pixel-font); color: var(--gold);
  font-size: 11px; letter-spacing: 1px; padding: 4px 2px 2px; margin-top: 2px;
  border-bottom: 1px solid rgba(230,184,80,0.35);
}
.train-pu {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 10px; border: 2px solid #3a4456;
  background: rgba(24,30,42,0.85); color: #e8edf2; cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.train-pu:active { border-color: var(--gold); transform: scale(0.96); }
.train-pu-ico { width: 44px; height: 44px; image-rendering: pixelated; pointer-events: none; }
.train-pu-lbl { font-family: var(--pixel-font); font-size: 10px; text-align: center; line-height: 1.1; }
.train-pu-hint { margin-top: 8px; font-size: 11px; color: #9fb0c4; text-align: center; }

.train-clear-btn {
  margin-top: 10px; width: 100%; padding: 8px; border-radius: 10px;
  border: 2px solid #b3443a; background: rgba(120,34,30,0.55); color: #ffd7d0;
  font-family: var(--pixel-font); font-size: 12px; letter-spacing: 1px; cursor: pointer;
}
.train-clear-btn:active { transform: scale(0.98); background: rgba(150,44,38,0.7); }

/* lage/liggende schermen (mobiel landscape): compacte tegels zodat alles past + scrollt */
@media (max-height: 540px) {
  .train-pu-box { width: min(96vw, 720px); max-height: 94vh; padding: 8px; }
  .train-pu-head { font-size: 12px; margin-bottom: 4px; }
  .train-pu-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
  .train-pu { padding: 4px 2px; gap: 1px; }
  .train-pu-ico { width: 30px; height: 30px; }
  .train-pu-lbl { font-size: 8px; }
  .train-pu-divider { font-size: 9px; padding: 2px; }
  .train-clear-btn { margin-top: 6px; padding: 6px; font-size: 11px; }
  .train-pu-hint { display: none; }
}

/* ===== Character-leveling (inventaris) ===== */
.char-lvl { width: 100%; margin: 4px 0 2px; display: flex; flex-direction: column; gap: 4px; }
.char-lvl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.char-lvl-num { font-family: var(--pixel-font); font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.char-lvl-max { color: #8a929c; font-size: 10px; }
.char-lvl-bonus { font-size: 9px; color: #7affa0; text-align: right; line-height: 1.2; }
.char-xp-bar {
  position: relative; height: 14px; border-radius: 7px; background: rgba(10,14,20,0.8);
  border: 1px solid #3a4456; overflow: hidden;
}
.char-xp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3aa0e0, #7fd0ff); transition: width .3s; }
.char-xp-lbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel-font); font-size: 8px; color: #eef2f6; text-shadow: 0 1px 0 #000; letter-spacing: 1px;
}
.char-upgrade {
  width: 100%; padding: 6px; border-radius: 9px; border: 2px solid #3a4456;
  font-family: var(--pixel-font); font-size: 11px; letter-spacing: 1px; cursor: pointer;
  background: rgba(24,30,42,0.85); color: #e8edf2;
}
.char-upgrade .coin-dot { color: #ffd24a; }
.char-upgrade.ready { border-color: #2f9a3a; background: linear-gradient(180deg, rgba(46,140,60,0.6), rgba(24,80,36,0.7)); color: #eafff0; }
.char-upgrade.ready:active { transform: scale(0.98); }
.char-upgrade.cant { border-color: #7a3a2a; color: #e0a08a; opacity: 0.85; cursor: default; }
.char-upgrade.locked { color: #8a929c; cursor: default; opacity: 0.8; }
.char-upgrade.maxed { border-color: var(--gold); color: var(--gold); cursor: default; }

/* ===== Matchmaking map-roulette ===== */
#vs-roulette { margin: 6px 0; }
.vs-roulette-strip {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px;
}
.vs-roul-tile {
  padding: 7px 12px; border-radius: 9px; border: 2px solid #3a4456;
  background: rgba(20,26,38,0.75); color: #aeb7c4;
  font-family: var(--pixel-font); font-size: 12px; letter-spacing: 1px;
  transition: transform .1s, background .1s, border-color .1s;
}
.vs-roul-tile.on {
  border-color: var(--gold); background: rgba(230,184,80,0.25); color: #fff;
  transform: scale(1.08); box-shadow: 0 0 10px rgba(230,184,80,0.4);
}
.vs-roul-tile.picked {
  border-color: #2f9a3a; background: linear-gradient(180deg, rgba(46,140,60,0.7), rgba(24,80,36,0.8));
  color: #eafff0; transform: scale(1.14); box-shadow: 0 0 16px rgba(90,255,122,0.5);
}
/* rondes-keuze (vriend-kamer) */
#vs-rounds-opt { margin: 6px 0 2px; }
#vs-rounds-slider:disabled { opacity: 0.5; }

/* ===== Journey wereldkaart (levels langs een slingerpad, thema per wereld) ===== */
.journey-map {
  position: relative; width: 100%; max-width: 640px; margin: 12px auto;
  height: clamp(240px, 58vh, 470px);
  border-radius: 14px; overflow: hidden;
  border: 3px solid #241a10; box-shadow: inset 0 0 44px rgba(0,0,0,0.45), 0 6px 20px rgba(0,0,0,0.4);
}
.journey-map.island { background: linear-gradient(180deg, #6fb6e8 0%, #8ad0f0 28%, #4a9ad0 50%, #e3c882 66%, #caa860 100%); }
.journey-map.temple { background: linear-gradient(180deg, #f2b96a 0%, #d68f4e 42%, #7a5a38 70%, #5a4028 100%); }
/* zonnewaas */
.journey-map::before { content: ''; position: absolute; width: 74px; height: 74px; border-radius: 50%; top: 6%; right: 7%; pointer-events: none; z-index: 0; }
.journey-map.island::before { background: radial-gradient(circle, #fff6c8 0%, rgba(255,231,122,0.55) 48%, transparent 72%); }
.journey-map.temple::before { background: radial-gradient(circle, #ffe0a0 0%, rgba(230,150,80,0.5) 48%, transparent 72%); }
/* decoratie: piramides (tempel) / struiken (eiland) achter het pad */
.map-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.map-decor::before, .map-decor::after { content: ''; position: absolute; bottom: 0; width: 0; }
.journey-map.temple .map-decor::before { left: 8%; border-left: 62px solid transparent; border-right: 62px solid transparent; border-bottom: 96px solid rgba(90,64,40,0.5); }
.journey-map.temple .map-decor::after  { right: 6%; border-left: 82px solid transparent; border-right: 82px solid transparent; border-bottom: 124px solid rgba(70,48,30,0.45); }
.journey-map.island .map-decor::before { left: 6%; border-left: 42px solid transparent; border-right: 42px solid transparent; border-bottom: 58px solid rgba(46,100,44,0.42); }
.journey-map.island .map-decor::after  { right: 7%; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 46px solid rgba(40,90,40,0.4); }
.journey-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.journey-path .path-base { fill: none; stroke: rgba(0,0,0,0.34); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 7; }
.journey-path .path-done { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.journey-map.island .path-done { stroke: #ffe9ac; }
.journey-map.temple .path-done { stroke: #e0cba0; }
.map-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #fff; background: rgba(28,34,48,0.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel-font); font-weight: bold; font-size: 18px; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.55); -webkit-user-select: none; user-select: none;
}
.map-node .map-node-num { display: flex; align-items: center; line-height: 1; }
.map-node .map-node-num .ic { width: 22px; height: 22px; }
.map-node:active { transform: translate(-50%, -50%) scale(0.92); }
.map-node.boss { width: 58px; height: 58px; border-color: var(--gold); background: rgba(70,32,20,0.94); }
.map-node.boss .map-node-num .ic { width: 28px; height: 28px; }
.map-node.cleared { border-color: #5aff7a; background: rgba(22,58,32,0.92); }
.map-node.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.55); }
.map-node.current { border-color: #ffe27a; animation: mapPulse 1.15s ease-in-out infinite; }
@keyframes mapPulse {
  0%,100% { box-shadow: 0 3px 8px rgba(0,0,0,0.55), 0 0 0 0 rgba(255,226,122,0.65); }
  50%     { box-shadow: 0 3px 8px rgba(0,0,0,0.55), 0 0 0 9px rgba(255,226,122,0); }
}
.map-node-mark { position: absolute; bottom: -7px; right: -6px; display: flex; }
.map-node-mark .ic { width: 16px; height: 16px; color: var(--gold); }
.map-node-mark.lock .ic { color: #cfd6df; }
@media (max-height: 520px) {
  .journey-map { height: clamp(180px, 74vh, 320px); max-width: 560px; margin: 8px auto; }
  .map-node { width: 38px; height: 38px; font-size: 14px; border-width: 2px; }
  .map-node .map-node-num .ic { width: 18px; height: 18px; }
  .map-node.boss { width: 46px; height: 46px; }
}

/* ====== UI-polish: schermovergangen, micro-interacties, victory-podium, HUD-portretten ====== */
/* panelen komen zacht binnen (herstart automatisch bij elke keer tonen) */
@keyframes screenIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes overlayIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.screen-inner { animation: screenIn .18s ease-out; }
.overlay-box { animation: overlayIn .14s ease-out; }

/* hover-states (alleen op apparaten met een muis) + toetsenbord-focus */
@media (hover: hover) {
  .stone-btn:hover, .stone-tile:hover { filter: brightness(1.12); transition: filter .12s; }
  .shop-buy:hover, .big-btn:hover, .gal-arrow:hover, .reward-ok:hover, .back-btn:hover { filter: brightness(1.15); transition: filter .12s; }
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* victory-podium in het uitslagscherm: held op een draaiende sunburst + confetti */
.vs-result-hero { position: relative; width: 128px; height: 100px; margin: 2px auto 4px; }
.vs-result-hero canvas { position: relative; z-index: 2; width: 110px; height: 84px; image-rendering: pixelated; margin-top: 8px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.vrh-burst { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; z-index: 1; background: repeating-conic-gradient(rgba(242,201,76,.16) 0 9deg, transparent 9deg 18deg); border-radius: 50%; animation: vrhSpin 14s linear infinite; }
.vs-result-hero.lost .vrh-burst { background: repeating-conic-gradient(rgba(140,150,170,.10) 0 9deg, transparent 9deg 18deg); }
@keyframes vrhSpin { to { transform: rotate(360deg); } }
.vrh-confetti { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vrh-confetti i { position: absolute; top: -8px; width: 4px; height: 7px; opacity: 0; animation: vrhFall 1.7s ease-in infinite; }
@keyframes vrhFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translateY(106px) rotate(300deg); opacity: 0; } }

/* mini-portret vóór de naam in de versus-HUD */
.vs-portrait { width: 26px; height: 20px; image-rendering: pixelated; flex: 0 0 auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }

/* 'ghost bar': bleke strook die toont wat je net aan HP verloor */
.vs-hp { position: relative; }
.vs-hp-ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(255,224,130,.5); z-index: 1; }
.vs-hp-fill { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .screen-inner, .overlay-box, .vrh-burst, .vrh-confetti i { animation: none; }
}


/* ====== Echte pixelfont: 'Press Start 2P' (SIL OFL, embedded — werkt offline) ====== */
@font-face {
  font-family: 'PressStart';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(data:font/woff2;base64,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) format('woff2');
}
/* alleen op grote 'display'-teksten (titels, timers, scores) — kleine lopende tekst blijft leesbaar in Courier */
.mm-title, .screen-title, .vs-timer, .vs-score, .vs-win-title, .vmi-name, .reward-title, .vs-countdown, .inv-sec {
  font-family: 'PressStart', var(--pixel-font);
  font-weight: 400; letter-spacing: 0;
}
/* PS2P is breder dan Courier -> maten iets terugschroeven waar nodig */
.mm-title { font-size: clamp(12px, 2.4vw, 18px); }
.screen-title { font-size: clamp(13px, 2.6vw, 19px); }
.vs-score { font-size: 22px; }
.vs-timer { font-size: clamp(13px, 2.9vw, 21px); }
.vs-countdown { font-size: 44px; }
.vs-win-title { font-size: clamp(20px, 5vw, 34px); }
.vmi-name { font-size: clamp(16px, 4vw, 26px); }
.inv-sec { font-size: 12px; }