:root{
  --ink:#0f172a; --bg:#0b1221; --panel:#0f1a33; --panel-2:#0a1429;
  --muted:#94a3b8; --text:#e2e8f0; --accent:#38bdf8;
  --common:#94a3b8; --rare:#34d399; --epic:#a78bfa; --legend:#fde047;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1000px 600px at 0% -10%, #1b2750 0%, var(--bg) 40%);color:var(--text);font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto}

.screen{max-width:1100px;margin:24px auto;padding:0 16px;}
.hud{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hud__stat{display:flex;gap:8px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:12px}
.hud__stat small{color:var(--muted)}

.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.panel__title{margin:0 0 8px 0}
.panel__controls{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}

.btn{cursor:pointer;user-select:none;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));color:var(--text);padding:8px 12px;border-radius:12px;font-weight:600;transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--ghost{background:transparent}

.xpbar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.xpbar>span{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#60a5fa,#a78bfa,#fde047)}

.lastdrop{min-height:24px;margin-top:8px;font-size:14px;color:var(--muted)}
.odds{margin-top:6px;font-size:12px;color:var(--muted)}

.inventory{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.inv{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.rarity{font-size:12px;letter-spacing:.5px;opacity:.9}
.rarity.Common{color:var(--common)}
.rarity.Rare{color:var(--rare)}
.rarity.Epic{color:var(--epic)}
.rarity.Legendary{color:var(--legend);text-shadow:0 0 10px rgba(253,224,71,.25)}

.log{max-height:240px;overflow:auto;font-size:13px;line-height:1.45;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid rgba(255,255,255,.06);padding:8px;border-radius:12px}
.log p{margin:6px 0;opacity:.95}

.footer{display:flex;justify-content:center;opacity:.6;margin-top:10px;font-size:12px}

/* ==== CONTROL BAR (30% hoogte, mobiel) ==== */
:root { --bar-h: 30dvh; }                /* modern */
@supports not (height: 1dvh) { :root { --bar-h: 30vh; } } /* fallback */
/* BELANGRIJK: op desktop geen aftrek */
@media (min-width: 900px){ :root{ --bar-h: 0dvh; } }

.control-bar{
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h);
  z-index: 9999;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.42) 100%);
  backdrop-filter: blur(4px);
  padding: 8px max(env(safe-area-inset-right, 12px), 12px) max(env(safe-area-inset-bottom, 12px), 12px) max(env(safe-area-inset-left, 12px), 12px);
}
@media (min-width: 900px){ .control-bar{ display:none } }

.control-bar__inner{
  height: 100%; width: 100%;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: clamp(12px, 4vw, 28px);
}

/* JOYSTICK */
.joy-wrap{
  position: relative;
  width: min(42vw, calc(var(--bar-h) - 24px));
  height: min(42vw, calc(var(--bar-h) - 24px));
  margin-left: 6px; touch-action: none;
}
.joy-base{
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.joy-knob{
  position:absolute; width:40%; height:40%; left:30%; top:30%;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.35);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transform: translate(0,0);
}

/* KNOPPEN rechts */
.btn-wrap{ display:flex; align-items:center; gap: clamp(14px, 4vw, 24px); padding-right: 4px; }
.btn-b{
  width: min(26vw, calc(var(--bar-h) * 0.42));
  height: min(26vw, calc(var(--bar-h) * 0.42));
  min-width: 64px; min-height: 64px;               /* absolute minimum op kleine telefoons */
  border-radius:50%; border:2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06));
  color:#e2e8f0; font-weight:900; font-size: clamp(28px, 10vw, 46px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  touch-action: manipulation;
}
.btn-a{
  width: min(26vw, calc(var(--bar-h) * 0.42));     /* iets groter zodat hij niet "te klein" is */
  height: min(26vw, calc(var(--bar-h) * 0.42));
  min-width: 64px; min-height: 64px;               /* absolute minimum op kleine telefoons */
  border-radius:50%; border:2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,.05));
  color:#e2e8f0; font-weight:800; font-size: clamp(20px, 6vw, 28px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  touch-action: manipulation;
}

/* Canvas: neem rest van hoogte in zonder overlap met bar (bar = 0 op desktop) */
#reelCanvas{
  width:100%;
  height:auto;
  max-height: calc(100svh - var(--bar-h) - 140px);  /* 140px ≈ HUD + marges */
  image-rendering: pixelated;
  touch-action: none;
}

/* voorkom mini-scroll op desktop */
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }


/* === A/B GELIJK & VERTICAAL === */
:root{ --ab-size: min(28vw, calc(var(--bar-h) * 0.46)); }
.btn-wrap{
  display:flex; flex-direction:column; align-items:flex-end;
  gap: clamp(10px, 3.5vw, 16px); padding-right: 6px;
}
.btn-a, .btn-b{
  width: var(--ab-size); height: var(--ab-size);
  min-width: 72px; min-height: 72px; /* nooit te klein */
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:#e2e8f0; font-weight:850; font-size: clamp(20px, 7vw, 28px);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  touch-action: manipulation;
}

/* === MOBIEL PANEEL === */
.panel-toggle{
  position:fixed; right:12px; top:12px; z-index:10000;
  width:48px; height:48px; border-radius:12px; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#e2e8f0; font-size:22px; font-weight:800;
}
@media (min-width:900px){ .panel-toggle{ display:none } }

.mobile-panel{
  position:fixed; left:10px; right:10px; top:10px;
  bottom: calc(var(--bar-h) + 10px); z-index:10001;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15); border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.mobile-panel__bar{
  display:flex; gap:8px; align-items:center; padding:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-panel__bar .tab{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  color:#e2e8f0; font-weight:700; font-size:14px;
}
.mobile-panel__bar .tab.active{ outline:2px solid rgba(56,189,248,.45) }
.mobile-panel__bar .close{
  margin-left:auto; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#e2e8f0; font-weight:900; font-size:18px;
}
.mobile-panel__content{
  flex:1; overflow:auto; padding:10px;
}
.mp-pane{ min-height:100%; }

/* Inventory en Log in het paneel mogen scrollen */
#mpInv .inventory{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px }
#mpLog .log{ max-height:unset; height:auto }

/* ======= FINAL CONTROL-BAR OVERRIDE ======= */

/* 30% op mobiel; 0 op desktop */
:root{ --bar-h: 0px; }
@media (max-width: 899px){
  :root{ --bar-h: 30svh; }
  @supports not (height: 1svh){ :root{ --bar-h: 30vh; } } /* fallback */
}

/* reserveer ruimte onderin voor content zodat HUD/Inventory niet onder de knoppen valt */
.screen{ padding-bottom: calc(var(--bar-h) + 12px); }

/* canvas-hoogte zonder overlap met bar + HUD */
#reelCanvas{
  max-height: calc(100svh - var(--bar-h) - 140px);
}

/* (optioneel) voorkomen mini-scroll op desktop; op mobiel wel kunnen scrollen */
body{ overflow:hidden; }
@media (max-width: 899px){ body{ overflow:auto; } }

/* oude touch-ui volledig uitschakelen */
.touch-bottom, .touch-joy, .touch-dpad { display:none !important; }

/* ===== Control bar ===== */
.control-bar{
  position: fixed; left:0; right:0; bottom:0; height: var(--bar-h);
  display: none;
  z-index: 100000;
  background: rgba(7,10,18,.48);
  backdrop-filter: blur(6px);
  padding: 8px max(env(safe-area-inset-right, 12px), 12px)
           max(env(safe-area-inset-bottom, 12px), 12px)
           max(env(safe-area-inset-left, 12px), 12px);
}
@media (max-width: 899px){ .control-bar{ display:block } }

.control-bar__inner{
  height: 100%; width: 100%;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: clamp(12px, 4vw, 28px);
}

/* Joystick */
.joy-wrap{
  position: relative;
  width: min(42vw, calc(var(--bar-h) - 24px));
  height: min(42vw, calc(var(--bar-h) - 24px));
  margin-left: 6px; touch-action: none;
}
.joy-base{
  position:absolute; inset:0; border-radius:50%;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.joy-knob{
  position:absolute; width:40%; height:40%; left:30%; top:30%;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,.35);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transform: translate(0,0);
}

/* Rechterkolom: 📋 + A + B (even groot, verticaal) */
.btn-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(10px, 3.5vw, 16px); padding-right: 6px;
}
:root{ --ab-size: min(28vw, calc(var(--bar-h) * 0.44)); }
.btn-panel{
  width: clamp(56px, 10vw, 64px); height: clamp(56px, 10vw, 64px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#e2e8f0; font-size: clamp(18px, 5vw, 22px); font-weight:800;
}
.btn-ab{
  width: var(--ab-size); height: var(--ab-size);
  min-width: 72px; min-height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:#e2e8f0; font-weight:850; font-size: clamp(20px, 7vw, 28px);
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  touch-action: manipulation;
}

/* ===== Mobile panel overlay ===== */
.mobile-panel{
  position:fixed; left:10px; right:10px; top:10px;
  bottom: calc(var(--bar-h) + 10px); z-index:100001;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15); border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.mobile-panel[hidden]{ display:none !important; }
.mobile-panel__bar{
  display:flex; gap:8px; align-items:center; padding:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-panel__bar .tab{
  padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  color:#e2e8f0; font-weight:700; font-size:14px;
}
.mobile-panel__bar .tab.active{ outline:2px solid rgba(56,189,248,.45) }
.mobile-panel__bar .close{
  margin-left:auto; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#e2e8f0; font-weight:900; font-size:18px;
}
.mobile-panel__content{ flex:1; overflow:auto; padding:10px; }
#mpInv .inventory{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px }
#mpLog .log{ max-height:unset; height:auto }

/* --- Kleinere joystick + A/B even groot & compacter --- */
:root{ --ab-size: min(18vw, calc(var(--bar-h) * 0.34)); } /* was groter */
.joy-wrap{
  width:  min(34vw, calc(var(--bar-h) - 28px));
  height: min(34vw, calc(var(--bar-h) - 28px));
}
.btn-ab{
  width: var(--ab-size); height: var(--ab-size);
  min-width: 56px; min-height: 56px;            /* was 72 */
  font-size: clamp(18px, 6vw, 24px);            /* iets kleiner */
}

/* Mini-knoppen voor Inventory/Log rechtsboven de A/B-stack */
.btn-mini-wrap{ display:flex; gap:10px; margin-bottom:6px; }
.btn-mini{
  width: clamp(40px, 8vw, 48px); height: clamp(40px, 8vw, 48px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#e2e8f0; font-size: clamp(16px, 4.5vw, 18px); font-weight:800;
}

/* Als het scherm echt laag is: bar iets minder hoog */
@media (max-height: 640px){
  :root{ --bar-h: 26svh; }
}

/* --- Paneel volledig leesbaar (niet doorzichtig) --- */
.mobile-panel{
  background: var(--panel);                      /* solide */
  border: 1px solid rgba(255,255,255,.18);
}
.mobile-panel__bar{
  background: rgba(0,0,0,.35);
}
.mobile-panel__bar .tab{
  color: var(--text); border-color: rgba(255,255,255,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
.mobile-panel__bar .tab.active{
  outline: 2px solid rgba(56,189,248,.65);
}
.mobile-panel__content{
  background: var(--panel-2);                    /* donkere achtergrond */
  color: var(--text);
}

/* Zorg dat tabs altijd zichtbaar blijven (kleine schermen) */
.mobile-panel__bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Compactere A/B */
:root{ --ab-size: min(16vw, calc(var(--bar-h) * 0.30)); }
.btn-ab{
  width: var(--ab-size); height: var(--ab-size);
  min-width: 52px; min-height: 52px;
  font-size: clamp(16px, 5.5vw, 22px);
}

/* Mini-knoppenrij */
.btn-mini-wrap{ display:flex; gap:8px; margin-bottom:6px; }
.btn-mini{
  width: clamp(38px, 7vw, 44px); height: clamp(38px, 7vw, 44px);
  border-radius: 10px; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#e2e8f0; font-size: clamp(15px, 4.2vw, 17px); font-weight:800;
}

/* Paneel: solide + Collectie-layout */
.mobile-panel{ background: var(--panel); border:1px solid rgba(255,255,255,.18); }
.mobile-panel__bar{ background: rgba(0,0,0,.35); }
.mobile-panel__content{ background: var(--panel-2); }

.dex-progress{ margin:6px 0 10px; font-size:14px; color:var(--muted); }
.dex-bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden }
.dex-bar > span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#60a5fa,#a78bfa,#fde047) }

.dex-section{ margin:12px 0 18px }
.dex-section h4{ margin:0 0 8px; font-size:14px; font-weight:800; color:var(--text) }
.dex-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px }
.dex-card{
  border:1px dashed rgba(255,255,255,.18); border-radius:12px; padding:10px;
  display:grid; grid-template-rows:auto auto auto; gap:6px; text-align:center;
  background:rgba(255,255,255,.04);
}
.dex-card.locked{ opacity:.6; filter:grayscale(0.9); }
.dex-icon{ font-size:28px; line-height:1 }
.dex-name{ font-size:13px; color:var(--text) }
.dex-rare  { color:var(--rare) }
.dex-epic  { color:var(--epic) }
.dex-legend{ color:var(--legend) }
.dex-count{ font-size:12px; color:var(--muted) }

/* paneel boven alles + solide achtergrond */
.mobile-panel{ z-index: 100002; background: var(--panel); }
.mobile-panel__content{ background: var(--panel-2); }
.mobile-panel[hidden]{ display: none !important; }

/* kleur voor rarity labels binnen de collectie */
.dex-common{ color: var(--common) }
.dex-rare{ color: var(--rare) }
.dex-epic{ color: var(--epic) }
.dex-legend{ color: var(--legend) }


/* Show the control bar on desktop too, at a smaller height */
@media (min-width: 900px){
  :root{ --bar-h: 18svh; }          /* reserve space at the bottom */
  .control-bar{ display: block; }   /* was hidden on desktop */
  .screen{ padding-bottom: calc(var(--bar-h) + 12px); } /* prevent overlap */
  body{ overflow: auto; }           /* allow page to scroll if needed */
}

/* Make sure the canvas never hides behind the bar */
#reelCanvas{
  max-height: calc(100svh - var(--bar-h) - 140px);
}

/* Panel sits above everything */
.mobile-panel{ z-index: 100002; }

/* Info panel text spacing */
#mpInfo .info h3{ margin: 8px 0 6px; }
#mpInfo .info ul{ margin: 6px 0 12px 18px; padding: 0; }
#mpInfo .info li{ margin: 4px 0; }

/* Leaderboard */
.lb-head, .lb-row{
  display:grid; grid-template-columns: 36px 1fr 80px 90px 100px 80px; gap:8px;
  align-items:center; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.08);
}
.lb-head{ font-weight:800; color:var(--muted); background:rgba(255,255,255,.04); }
.lb-row:nth-child(odd){ background:rgba(255,255,255,.02); }
.lb-rank{ font-weight:800; text-align:center; }
.lb-name{ font-weight:700; }
.lb-level,.lb-xp,.lb-coins,.lb-items{ font-variant-numeric: tabular-nums; }

/* Show control bar on desktop too (optional) */
@media (min-width: 900px){
  :root{ --bar-h: 18svh; }
  .control-bar{ display:block; }
  .screen{ padding-bottom: calc(var(--bar-h) + 12px); }
}

/* Leaderboard styles */
.lb-head, .lb-row{
  display:grid; grid-template-columns: 36px 1fr 80px 90px 100px 80px;
  gap:8px; align-items:center; padding:6px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lb-head{ font-weight:800; color:var(--muted); background:rgba(255,255,255,.04); }
.lb-row:nth-child(odd){ background:rgba(255,255,255,.02); }
.lb-rank{ font-weight:800; text-align:center; }
.lb-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-level,.lb-xp,.lb-coins,.lb-items{ font-variant-numeric: tabular-nums; }

/* --- Responsive control bar: show on mobile, hide on desktop --- */
:root { --bar-h: 30svh; }
@supports not (height: 1svh) { :root { --bar-h: 30vh; } }

/* Mobile ≤ 899px: bar visible */
@media (max-width: 899px){
  .control-bar{ display:block; }
  #reelCanvas{ max-height: calc(100svh - var(--bar-h) - 140px); }
}

/* Desktop ≥ 900px: hide bar unless you explicitly want it */
@media (min-width: 900px){
  .control-bar{ display:none; }
  .screen{ padding-bottom: 0; }
}

/* Inline title + tiny button for Leaderboard "Open" */
.panel__title--inline{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.btn--tiny{
  padding:4px 8px; border-radius:8px; font-size:12px; line-height:1; opacity:.9;
}

/* --- 1) Never allow horizontal overflow --- */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.screen, .panel, .mobile-panel, .control-bar { max-width:100vw; }

/* --- 2) Responsive control bar (mobile first) --- */
:root { --bar-h: 30svh; }
@supports not (height: 1svh) { :root { --bar-h: 30vh; } }

/* On phones: show bar and make its contents shrink/wrap */
@media (max-width: 899px){
  .control-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; width:100vw;
    height:var(--bar-h);
    padding: 8px max(env(safe-area-inset-right, 12px), 12px)
             max(env(safe-area-inset-bottom, 12px), 12px)
             max(env(safe-area-inset-left, 12px), 12px);
    box-sizing:border-box;
  }
  .control-bar__inner{
    height:100%; width:100%;
    display:grid;
    grid-template-columns: auto 1fr;          /* joystick | buttons */
    align-items:center;
    gap: clamp(8px, 3vw, 20px);
  }

  /* Joystick scales down on narrow screens */
  .joy-wrap{
    width: clamp(120px, 34vw, 200px);
    height: clamp(120px, 34vw, 200px);
    margin-left: 4px;
  }

  /* Buttons area can wrap; cap its width so it never pushes viewport */
  .btn-wrap{
    display:flex; flex-wrap:wrap; justify-content:flex-end;
    gap: clamp(8px, 3vw, 16px);
    max-width: 58vw;
  }
  .btn-mini-wrap{
    display:flex; flex-wrap:wrap; gap:8px; width:100%;
    order: 2;                                /* mini buttons drop to next row if needed */
    justify-content:flex-end;
  }

  /* A/B buttons shrink on small phones */
  .btn-ab{
    width: clamp(56px, 16vw, 72px);
    height: clamp(56px, 16vw, 72px);
    border-radius:50%;
    padding:0;
    font-size: clamp(16px, 6vw, 24px);
  }

  /* Canvas height accounts for bottom bar so it stays visible without zoom */
  #reelCanvas{ max-height: calc(100svh - var(--bar-h) - 140px); }
}

/* On desktop: hide the control bar (keeps layout tidy) */
@media (min-width: 900px){
  .control-bar{ display:none; }
  .screen{ padding-bottom:0; }
}

/* --- 3) Leaderboard: scroll INSIDE the panel on small screens --- */
#leaderboard{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.lb-head, .lb-row{
  min-width: 460px; /* enough to avoid squeezing columns; the container scrolls instead */
}

.dex-card.unknown .dex-name{ opacity:.95; }
.dex-card.unknown .dex-icon{ filter:saturate(.85) brightness(.95); }

#touchJoy, #joyKnob {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
}

/* tijdelijk debug: maak zeker dat niets eroverheen ligt */
#touchJoy { position: relative; z-index: 9999; }

.dbg-toggle{
  position:fixed; left:10px; bottom:10px; z-index:10000;
  background:rgba(0,0,0,.5); color:#fff; padding:6px 10px; border-radius:8px;
  font: 14px/1.2 system-ui;
  backdrop-filter: blur(4px);
}
.dbg-panel{
  position:fixed; left:10px; bottom:48px; z-index:10000;
  min-width: 260px; max-width: 90vw;
  background:rgba(0,0,0,.65); color:#fff; padding:10px 12px; border-radius:10px;
  font: 12px/1.3 system-ui; box-shadow: 0 6px 16px rgba(0,0,0,.4);
  user-select: text;
}
.dbg-panel b{ color:#a7f3d0 }

.btn-ab:focus { outline: none; box-shadow: none; }
#btnA:focus, #btnB:focus { outline: none; }

#touchJoy { outline: none !important; }