@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ── */
:root {
  /* Warme crème — speels & licht */
  --bg:        #fdf6ec;
  --surf:      #ffffff;
  --surf-deep: #f7f0e3;
  --bdr:       #ecdfc9;
  --txt:       #241a0c;
  --muted:     #9c7a4f;
  --dim:       #b89a6f;

  /* Accent — warm oranje-amber */
  --acc:       #e8820a;
  --accl:      #ff9f1c;
  --acc-dim:   rgba(232, 130, 10, 0.10);
  --acc-glow:  rgba(232, 130, 10, 0.18);

  /* Danger */
  --red:       #d8513b;
  --red-surf:  #fdecea;
  --red-bdr:   #f4cabf;

  /* Success */
  --grn:       #2f9e62;
  --grn-surf:  #e8f6ec;
  --grn-bdr:   #bce3c8;

  /* Z-index scale */
  --z-modal: 200;
  --z-win:   300;
  --z-grain: 9999;
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100dvh;
  overscroll-behavior-y: none;          /* no pull-to-refresh accident */
  -webkit-text-size-adjust: 100%;       /* prevent iOS font inflation */
}

/* Subtle grain texture — breaks digital flatness */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: var(--z-grain);
}

/* ── Screens ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── App container — phone-first, centered on wider screens ── */
#app {
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
}

/* ── Setup header ── */
.setup-header {
  text-align: center;
  padding: 28px 0 20px;
  position: relative;
}
.setup-header::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 180px;
  background: radial-gradient(ellipse at center top, var(--acc-glow) 0%, transparent 70%);
  pointer-events: none;
}
.setup-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--txt);
  line-height: 1;
  position: relative;
}
.setup-title .accent { color: var(--acc); }
.setup-sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Cards ── */
.card {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 12px;
}

/* Section label */
.ct {
  font-family: 'Orbitron', monospace;
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Form elements ── */
input[type=text],
input[type=number],
select,
textarea {
  background: var(--surf-deep);
  border: 1px solid var(--bdr);
  color: var(--txt);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 16px;           /* ≥16px = no iOS auto-zoom */
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;  /* clean look on iOS */
  appearance: none;
}
input[type=number] { width: 74px; }
select { cursor: pointer; }
textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-dim);
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.settings-label { font-size: 14px; font-weight: 500; white-space: nowrap; }

/* ── Buttons ── */
.btn {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 9px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s,
              transform .1s, box-shadow .15s;
  touch-action: manipulation;           /* no 300ms delay on mobile */
  -webkit-tap-highlight-color: transparent;
}
.btn:active        { transform: scale(0.97) translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* Primary */
.bp       { background: var(--acc); color: #fff; }
.bp:hover { background: var(--accl); box-shadow: 0 4px 20px var(--acc-glow); }

/* Ghost */
.bg2       { background: var(--surf); color: var(--muted); border: 1px solid var(--bdr); }
.bg2:hover { border-color: var(--acc); color: var(--acc); }

/* Danger */
.br       { background: var(--red-surf); color: #b23b27; border: 1px solid var(--red-bdr); }
.br:hover { background: #f9d9d2; color: #8f2d1c; }

/* Success */
.bgn       { background: var(--grn); color: #fff; border: 1px solid var(--grn); }
.bgn:hover { background: #257a4a; }

/* Full-width CTA */
.bfull { width: 100%; padding: 16px 15px; min-height: 52px; font-size: 12px; margin-top: 8px; letter-spacing: 0.14em; }

/* ── Mode grid ── */
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mc {
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 16px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
  background: var(--surf-deep);
}
.mc:hover { border-color: var(--acc); background: var(--surf); }
.mc.sel   {
  border-color: var(--acc);
  background: var(--surf);
  box-shadow: 0 0 0 1px var(--acc), inset 0 0 24px var(--acc-dim);
}
.mc .mi {
  font-size: 28px;          /* fallback */
  margin-bottom: 8px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc .mi svg { width: 36px; height: 36px; flex-shrink: 0; }
.mc .mn { font-family: 'Orbitron', monospace; font-size: 10px; color: var(--txt); letter-spacing: 0.1em; }
.mc .md { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; font-family: 'DM Sans', sans-serif; }

/* ── Player row ── */
.pr {
  display: flex; gap: 8px; align-items: center; margin-bottom: 8px;
  background: var(--surf-deep); border: 1px solid var(--bdr);
  border-radius: 9px; padding: 8px 11px;
}
.cd { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* ── Error message ── */
#serr {
  font-size: 13px;
  color: #b23b27;
  margin-bottom: 8px;
  padding: 9px 13px;
  background: var(--red-surf);
  border: 1px solid var(--red-bdr);
  border-radius: 8px;
  display: none;
}

/* ── Game top bar ── */
.game-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#mlbl {
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: 0.06em;
}
.game-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Timer bar ── */
#tbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  background: var(--surf); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 8px 14px;
}
#tdsp {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-weight: 700;
  min-width: 62px;
  font-variant-numeric: tabular-nums;
}
#ttrack { flex: 1; height: 4px; background: var(--bdr); border-radius: 4px; overflow: hidden; }
#tfill  { height: 100%; background: var(--acc); border-radius: 4px; transition: width .5s linear; }
#tlbl   { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Player chips ── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chip {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s;
  font-family: 'DM Sans', sans-serif;
}
.chip.act {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.chip .cs {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

/* ── Turn label ── */
#turnl {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.08em;
}

/* ── Bingo board ── */
#board { display: grid; gap: 4px; width: fit-content; margin: 0 auto 12px; }

.cell {
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--bdr);
  background: var(--surf);
  line-height: 1.25; padding: 4px;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
  word-break: break-word;
  color: var(--txt);
  user-select: none;
  position: relative; overflow: hidden;
  text-wrap: balance;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cell:active:not(.cl):not(.fr) { transform: scale(0.95); background: var(--surf-deep); border-color: var(--acc); }
.cell.cl { cursor: default; }
.cell.fr {
  cursor: default;
  background: #eaf6ed;
  border-color: #bce3c8;
  color: #2f9e62;
  font-family: 'Orbitron', monospace;
  font-size: 9px !important;
  letter-spacing: 0.1em;
}
/* Winning cell pulse */
.cell.wc { animation: fl .6s ease infinite alternate; }
.cell.wc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 55%);
  border-radius: inherit;
  pointer-events: none;
}

.ow {
  font-size: 8px;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.06em;
}
.pb { position: absolute; top: 3px; right: 3px; font-size: 10px; }

@keyframes fl {
  from { opacity: 1; }
  to   { opacity: .22; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ── Join-screen team rows ── */
.join-team {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  margin-bottom: 7px; transition: opacity .15s;
}
.join-team:hover   { opacity: .85; }
.join-team.sel-team { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── Claim modal — bottom sheet on mobile ── */
#pmod {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  align-items: flex-end; justify-content: center;
}
#pmod.show { display: flex; }
#pbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  width: 100%; max-width: 480px;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  box-shadow: 0 -12px 48px rgba(0,0,0,.5);
}
/* Drag handle */
#pbox::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: var(--bdr);
  border-radius: 2px;
  margin: 0 auto 16px;
}
#pbox h3 {
  font-size: 13px; margin-bottom: 8px;
  color: var(--txt); font-family: 'Orbitron', monospace;
  letter-spacing: 0.1em;
}
.tt {
  font-size: 14px; color: var(--txt); margin-bottom: 12px;
  line-height: 1.55; padding: 12px;
  background: var(--surf-deep); border-radius: 9px; text-align: left;
  border: 1px solid var(--bdr);
  font-weight: 500;
}
#pins { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
#pprev { max-width: 100%; border-radius: 10px; margin: 10px 0; display: none; max-height: 180px; object-fit: cover; }
#pprevv { max-width: 100%; width: 100%; border-radius: 10px; margin: 10px 0; display: none; max-height: 220px; background: #000; }
#pfile { display: none; }
.pbr { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ── Help overlay ── */
#hov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  z-index: calc(var(--z-win) - 1);
  align-items: flex-end; justify-content: center;
}
#hov.show { display: flex; }
#hbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px 36px;
  max-height: 88dvh; overflow-y: auto;
}
.help-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
}
.help-step:last-of-type { border-bottom: none; }
.help-num {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--acc-dim); border: 1px solid var(--acc);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700;
  color: var(--acc); margin-top: 1px;
}
.help-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.help-desc  { font-size: 13px; color: var(--muted); line-height: 1.5; }
.help-desc strong { color: var(--txt); }

/* ── Scoreboard overlay ── */
#sov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: calc(var(--z-win) - 1);
  align-items: flex-end; justify-content: center; padding: 0;
}
#sov.show { display: flex; }
#sbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px 32px;
  max-height: 70dvh; overflow-y: auto;
}
.sb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid transparent;
}
.sb-rank {
  font-family: 'Orbitron', monospace;
  font-size: 18px; font-weight: 700;
  width: 28px; text-align: center; flex-shrink: 0;
}
.sb-name { flex: 1; font-weight: 600; font-size: 15px; }
.sb-members { font-size: 11px; opacity: .65; margin-top: 2px; }
.sb-captain {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 12px; cursor: pointer; opacity: .9;
}
.sb-captain input { width: auto; }
.sb-captain-badge {
  display: inline-block; margin-top: 5px; font-size: 11px; opacity: .7;
}
.sb-captain-badge.is-set { opacity: .9; font-weight: 600; }
.sb-score {
  font-family: 'Orbitron', monospace;
  font-size: 22px; font-weight: 700;
}

/* ── Host review overlay ── */
#rov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: calc(var(--z-win) - 1);
  align-items: flex-end; justify-content: center; padding: 0;
}
#rov.show { display: flex; }
#rbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px 32px;
  max-height: 78dvh; overflow-y: auto;
}
.rv-row {
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 12px 13px;
  margin-bottom: 10px;
}
.rv-task   { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.rv-team   { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; margin-bottom: 8px; }
.rv-media img, .rv-media video { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; display: block; background: #000; }
.rv-verdict { font-size: 12px; margin: 8px 0; padding: 8px 10px; border-radius: 9px; background: var(--lb-tint-find, #E1F1F0); color: var(--txt); line-height: 1.4; }
.rv-actions { display: flex; gap: 8px; margin-top: 9px; }
.rv-actions .btn { flex: 1; }
.rv-empty { color: var(--muted); font-size: 13px; padding: 14px 4px; text-align: center; }

/* ── Toast ── */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: #2A2118; color: #FBF4EC;
  padding: 11px 18px; border-radius: 99px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: var(--z-win); max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Win overlay ── */
#wov {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: var(--z-win);
  align-items: center; justify-content: center; padding: 16px;
}
#wov.show { display: flex; }
#wbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px; padding: 32px 24px;
  text-align: center; max-width: 420px; width: 100%;
  position: relative; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
/* Ambient glow at top */
#wbox::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 200px;
  background: radial-gradient(ellipse, var(--acc-glow) 0%, transparent 70%);
  pointer-events: none;
}
#wbox h2 {
  font-size: 34px; margin-bottom: 6px;
  font-family: 'Orbitron', monospace;
  position: relative;
  line-height: 1.1;
}
.wr  { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.pod { display: flex; gap: 18px; justify-content: center; margin-bottom: 26px; flex-wrap: wrap; }
.pe .ps {
  font-family: 'Orbitron', monospace;
  font-size: 30px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pe .pn { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; margin-top: 3px; }

/* ── Photo gallery overlay ── */
#galov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: calc(var(--z-win) - 1);
  align-items: flex-end; justify-content: center; padding: 0;
}
#galov.show { display: flex; }
#galbox {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  padding: 20px 18px 32px;
  max-height: 78dvh; overflow-y: auto;
}
.gg  { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.gi  { border-radius: 9px; overflow: hidden; border: 1px solid var(--bdr); }
.gi img { width: 100%; height: 76px; object-fit: cover; display: block; }
.gl  { font-size: 9px; padding: 3px 6px; background: rgba(0,0,0,.7); color: var(--muted); line-height: 1.4; }

/* ── Bord-voorbeeld (reroll vóór spelstart) ── */
.pv-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bdr);
}
.pv-row:last-child { border-bottom: none; }
.pv-row--free { color: var(--muted); font-style: italic; }
.pv-num { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--dim); width: 22px; flex-shrink: 0; text-align: right; }
.pv-ic  { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-txt { flex: 1; font-size: 13.5px; line-height: 1.4; }
.pv-reroll {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  background: var(--surf-deep); border: 1px solid var(--bdr); color: var(--acc);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pv-reroll svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-reroll:active { transform: scale(.93); }
.pv-reroll:disabled { opacity: .35; cursor: default; }
.pv-diff {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 99px;
}
.pv-diff--light  { background: var(--grn-surf); color: #257a4a; }
.pv-diff--medium { background: var(--surf-deep); color: var(--muted); }
.pv-diff--hard   { background: var(--red-surf); color: #b23b27; }

/* ── Win/tie badge: bingo of niet ── */
#wbadge {
  display: inline-block; margin: 0 auto 10px; padding: 5px 14px;
  border-radius: 99px; font-family: 'Orbitron', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
#wbadge:empty { display: none; }
#wbadge.is-bingo    { background: var(--grn-surf); color: #257a4a; border: 1px solid var(--grn-bdr); }
#wbadge.is-nobingo   { background: var(--surf-deep); color: var(--muted); border: 1px solid var(--bdr); }

/* ── Aftermovie overlay ── */
#mov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: var(--z-win);
  align-items: center; justify-content: center; padding: 12px;
}
#mov.show { display: flex; flex-direction: column; }
#movbox {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; max-width: 100%; max-height: 100%;
}
#movcv {
  width: auto; height: auto;
  max-width: min(100%, 56dvh * 9 / 16);
  max-height: 78dvh;
  border-radius: 16px;
  background: #0e0d0b;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
#movloading {
  position: absolute; color: var(--accl);
  font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 0.06em;
}
#movctrls { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 100%; padding: 0 4px; }
#movctrls .btn { padding: 9px 14px; font-size: 13px; min-width: 44px; }
#movTrack { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   Sticker-redesign — speelse, warme "sticker"-stijl
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --lb-bg-1: #FCEFE0; --lb-bg-2: #FBF4EC; --lb-card: #FBF4EC; --lb-card-active: #FFF8EF;
  --lb-ink: #2A2118; --lb-muted: #9A7B55; --lb-line: #F0E2CE;
  --lb-orange: #E8801C; --lb-teal: #2BA3A0; --lb-green: #3FA24A; --lb-purple: #8A5BC8; --lb-pink: #E0556E; --lb-amber: #F0A92B;
  --lb-tint-cam: #FBEAD6; --lb-tint-find: #E1F1F0; --lb-tint-ask: #EFE7F8;
}
body { background: linear-gradient(180deg, var(--lb-bg-1), var(--lb-bg-2) 40%); background-attachment: scroll; }

/* logo */
.lb-logo { margin: 0; font-family: 'Anton', sans-serif; line-height: .84; text-align: center; letter-spacing: .01em; position: relative; }
.lb-logo .l1 { color: var(--lb-orange); display: block; font-size: clamp(40px, 12vw, 60px); }
.lb-logo .l2 { color: #241B12; display: block; font-size: clamp(30px, 9vw, 44px); }

/* headers op overige schermen (lobby/join/verzilveren) — Fredoka i.p.v. Orbitron */
.setup-title { font-family: 'Fredoka', sans-serif; font-weight: 700; }
.setup-sub   { font-family: 'Nunito', sans-serif; }
.lb-label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #B79D7E; }

/* ── Sticker-badge ── */
.lb-sticker {
  width: 60px; height: 60px; border-radius: 20px; background: var(--c, var(--lb-orange));
  border: 3px solid #fff; flex-shrink: 0;
  box-shadow: 0 7px 14px color-mix(in srgb, var(--c, var(--lb-orange)) 40%, transparent), inset 0 -3px 0 rgba(0,0,0,.08);
  display: grid; place-items: center; transform: rotate(var(--rot, -5deg));
}
.lb-sticker svg { width: 30px; height: 30px; fill: none; stroke: #fff; color: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Spelmodus-kaarten ── */
.lb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lb-mode-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 22px 14px 18px; border-radius: 22px; background: var(--lb-card);
  border: 2px solid rgba(0,0,0,.04); cursor: pointer; width: 100%; font: inherit; color: inherit; text-align: center;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.lb-mode-card:active { transform: scale(.98); }
.lb-mode-card.is-active {
  background: var(--lb-card-active); border: 2.5px solid var(--c, var(--lb-orange));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--c, var(--lb-orange)) 18%, transparent);
}
.lb-mode-card.is-active::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c, var(--lb-orange));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12.2l2.6 2.6L16.2 8.6'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
}
.lb-mode-card__title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; color: var(--lb-ink); }
.lb-mode-card__sub   { font-family: 'Nunito', sans-serif; font-size: 13px; color: var(--lb-muted); line-height: 1.3; }

/* ── Bingobord ── */
#board { display: grid; gap: 8px; width: fit-content; margin: 0 auto 12px; }
.lb-tile {
  cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 14px; padding: 4px 4px;
  background: var(--tint, #fff); border: 1.5px solid rgba(0,0,0,.04); border-top: 3px solid var(--c, var(--lb-orange));
  box-shadow: 0 2px 5px rgba(120,80,30,.07);
  transition: transform .12s, box-shadow .12s; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lb-tile:active:not(.is-claimed):not(.lb-tile--free) { transform: scale(.95); }
@media (hover:hover) { .lb-tile:hover:not(.is-claimed):not(.lb-tile--free) { transform: translateY(-3px); box-shadow: 0 9px 17px rgba(120,80,30,.17); } }
.lb-tile__icon { flex: none; color: var(--c, var(--lb-orange)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-tile__text { font-family: 'Nunito', sans-serif; font-weight: 700; line-height: 1.16; color: #3A2C1C; text-align: center; text-wrap: balance; word-break: break-word; }
.lb-tile--cam  { --c: var(--lb-orange); --tint: var(--lb-tint-cam); }
.lb-tile--find { --c: var(--lb-teal);   --tint: var(--lb-tint-find); }
.lb-tile--ask  { --c: var(--lb-purple); --tint: var(--lb-tint-ask); }

/* geclaimde tegel — donkere teamtint (leesbaar voor alle 6 kleuren) + stempel */
.lb-tile.is-claimed { border: none; cursor: default; box-shadow: 0 6px 15px var(--glow, rgba(0,0,0,.3)); }
.lb-tile.is-pending { opacity: .6; cursor: default; }
.lb-tile__pending { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: rgba(42,33,24,.78); display: flex; align-items: center; justify-content: center; }
.lb-tile__pending svg { width: 10px; height: 10px; fill: none; stroke: #FBF4EC; stroke-width: 2; }
.lb-tile.is-claimed::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 28% 12%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.lb-tile.is-claimed .lb-tile__icon { display: none; }
.lb-tile.is-claimed .lb-tile__text { font-weight: 800; }
.lb-tile__owner { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 8px; opacity: .8; margin-top: 1px; letter-spacing: .03em; }
.lb-tile__pb { position: absolute; left: 5px; top: 5px; opacity: .85; }
.lb-seal { position: absolute; right: 6px; top: 6px; width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; z-index: 3; }
.lb-seal svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-tile.lb-pop { animation: lb-claim .35s cubic-bezier(.34,1.56,.64,1); }
.lb-tile.lb-pop .lb-seal { animation: lb-seal .4s .1s both; }
@keyframes lb-claim { 0% { transform: scale(.82); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes lb-seal  { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.15) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.lb-tile.wc { animation: lb-win .7s ease infinite alternate; }
@keyframes lb-win { from { filter: brightness(1); } to { filter: brightness(1.4); } }

/* VRIJ-vakje */
.lb-tile--free {
  cursor: default; gap: 3px; border: 2.5px solid #fff; padding: 4px;
  background: linear-gradient(150deg, #FFD27A, var(--lb-amber)); box-shadow: 0 7px 18px rgba(220,150,30,.42);
}
.lb-tile--free::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(255,255,255,.4), transparent 55%); }
.lb-tile--free svg { position: relative; z-index: 2; fill: #fff; stroke: #fff; }
.lb-tile--free span { position: relative; z-index: 2; font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px rgba(180,110,10,.45); }

/* ── In-game pill-knoppen ── */
.lb-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 13px; background: #fff; border: 1.5px solid var(--lb-line); box-shadow: 0 3px 7px rgba(150,90,30,.08); font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 13px; color: #3A2C1C; cursor: pointer; white-space: nowrap; }
.lb-btn:active { transform: scale(.96); }
.lb-btn svg { width: 15px; height: 15px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-btn--score svg { stroke: var(--lb-orange); stroke-width: 2.2; }
.lb-btn--photo svg { stroke: var(--lb-teal); }
.lb-btn--movie svg { fill: var(--lb-pink); stroke: var(--lb-pink); }
.lb-btn--stop { background: #FBE4E4; border-color: #F2C9C9; color: #B3414B; }
.lb-btn--stop svg { stroke: #B3414B; stroke-width: 2.4; }
.lb-btn--review { background: #FDF0DA; border-color: #F0D6A0; color: #93651A; }
.lb-btn--review svg { stroke: #C0820A; }
.lb-btn--review #revCount { font-family: 'Orbitron', monospace; font-weight: 700; }

/* ── Timer ── */
#tbar.lb-timer { display: flex; align-items: center; gap: 12px; background: #fff; border: none; border-radius: 18px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(150,90,30,.08); margin-bottom: 8px; }
.lb-timer__time { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 24px; color: #241B12; font-variant-numeric: tabular-nums; min-width: 64px; }
#ttrack.lb-timer__track { flex: 1; height: 14px; border-radius: 99px; background: #F4E7D6; overflow: hidden; box-shadow: inset 0 1px 3px rgba(150,90,30,.18); }
#tfill.lb-timer__fill { height: 100%; border-radius: 99px; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 7px, transparent 7px 14px), linear-gradient(90deg, var(--lb-amber), var(--lb-orange)); background-size: 28px 100%, 100% 100%; animation: lb-shine 1s linear infinite; transition: width .5s linear; }
.lb-timer__label { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; color: var(--lb-muted); white-space: nowrap; }
@keyframes lb-shine { from { background-position: 0 0; } to { background-position: 28px 0; } }

/* ── Teamchips ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lb-team { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 12px; border-radius: 14px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; }
.lb-team__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-team__count { flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; }

/* ── Spelheader (modus-badge + naam) ── */
.game-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.game-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#mlbl { display: flex; align-items: center; gap: 9px; }
#mlbl .lb-mname { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px; color: var(--lb-ink); }

/* ════════ HOME / STARTSCHERM ════════ */
.lb-home { position: relative; overflow: hidden; }
.lb-confetti { position: absolute; opacity: .45; pointer-events: none; }
.lb-cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 19px; border-radius: 22px; cursor: pointer; width: 100%;
  background: linear-gradient(150deg, #F0A92B, var(--lb-orange)); border: 3px solid #fff;
  box-shadow: 0 12px 24px rgba(220,120,20,.34), inset 0 -3px 0 rgba(0,0,0,.08);
}
.lb-cta:active { transform: scale(.98); }
.lb-cta__icon { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.22); display: grid; place-items: center; transform: rotate(-5deg); flex: none; }
.lb-cta__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lb-cta__label { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 2px rgba(170,90,10,.4); }
.lb-home-actions { position: relative; margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.lb-action { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; cursor: pointer; width: 100%; text-align: left; background: #fff; border: 2px solid var(--lb-line); box-shadow: 0 6px 16px rgba(150,90,30,.09); }
.lb-action:active { transform: scale(.98); }
.lb-action__badge { width: 42px; height: 42px; border-radius: 14px; flex: none; background: var(--c, var(--lb-teal)); border: 2.5px solid #fff; box-shadow: 0 5px 11px color-mix(in srgb, var(--c, var(--lb-teal)) 36%, transparent), inset 0 -2px 0 rgba(0,0,0,.08); display: grid; place-items: center; transform: rotate(var(--rot, -5deg)); }
.lb-action__badge svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-action__title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px; color: var(--lb-ink); display: block; }
.lb-action__sub   { font-family: 'Nunito', sans-serif; font-size: 13px; color: var(--lb-muted); display: block; }

/* ════════ LOBBY / WACHTKAMER ════════ */
.lb-code { font-family: 'Anton', sans-serif; font-size: clamp(40px, 13vw, 52px); letter-spacing: .14em; color: var(--lb-orange); line-height: 1; text-align: center; }
.lb-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 99px; background: var(--lb-tint-cam); border: 1.5px solid #F2D6B2; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; color: #9A6A2E; }
.lb-pill svg { width: 15px; height: 15px; fill: none; stroke: #C8853A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-panel { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 6px 18px rgba(150,90,30,.08); margin-bottom: 14px; }
.lb-panel__label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #B79D7E; margin-bottom: 14px; }

.lb-lobbyteam { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 16px; margin-bottom: 11px; border: 1.5px solid var(--tc, #ddd); background: var(--tbg, #f6f1ea); }
.lb-lobbyteam:last-child { margin-bottom: 0; }
.lb-lobbyteam__badge { width: 34px; height: 34px; border-radius: 11px; flex: none; border: 2px solid #fff; display: grid; place-items: center; transform: rotate(var(--rot, -5deg)); box-shadow: 0 4px 9px var(--glow, rgba(0,0,0,.2)); }
.lb-lobbyteam__badge svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-lobbyteam__name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px; color: var(--lb-ink); display: block; }
.lb-lobbyteam__sub  { font-family: 'Nunito', sans-serif; font-size: 12px; color: var(--lb-muted); display: block; }

.lb-input { padding: 13px 15px; border-radius: 14px; background: var(--lb-card); border: 1.5px solid var(--lb-line); font-family: 'Fredoka', sans-serif; font-size: 17px; color: var(--lb-ink); width: 100%; }
.lb-input:focus { outline: none; border-color: var(--lb-amber); }

.lb-pick { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; cursor: pointer; border: 2.5px solid transparent; margin-bottom: 9px; width: 100%; font: inherit; box-shadow: 0 6px 14px var(--glow, rgba(0,0,0,.18)); }
.lb-pick:last-child { margin-bottom: 0; }
.lb-pick__dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.lb-pick__name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15px; flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pick.sel-team { border-color: var(--lb-amber); }
.lb-pick__check { margin-left: auto; width: 18px; height: 18px; display: none; flex: none; }
.lb-pick.sel-team .lb-pick__check { display: block; }
.lb-pick__check svg { fill: none; stroke: var(--lb-amber); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.lb-status { margin-top: 11px; display: flex; align-items: center; gap: 6px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 13px; color: var(--lb-green); }
.lb-status svg { width: 15px; height: 15px; fill: none; stroke: var(--lb-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-status--warn { color: #C0392B; }
.lb-status--warn svg { stroke: #C0392B; }

.lb-leave { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: 18px; width: 100%; background: #fff; border: 2px solid var(--lb-line); box-shadow: 0 4px 12px rgba(150,90,30,.07); cursor: pointer; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 16px; color: var(--lb-muted); }
.lb-leave:active { transform: scale(.98); }
.lb-leave svg { width: 17px; height: 17px; fill: none; stroke: var(--lb-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }