/* ========= tokens ========= */
  :root{
    --bg:#0b0a14;
    --surface:#15131f;
    --surface-2:#1d1b29;
    --ink:#000000;
    --text:#f5f3ff;
    --text-mute:#6b6885;
    --accent-a:#7c3aed;   /* SPIN + brand-dot */
    --accent-b:#ff8a3d;   /* WIN reveal */
    --accent-c:#34d399;   /* BONUS signal: stamp + pre-spin announce + cabinet */
    --display:'Archivo Black','Arial Black',sans-serif;
    --sans:'Archivo',system-ui,-apple-system,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --shadow-stick:4px 4px 0 0 var(--ink);
    --shadow-stick-sm:3px 3px 0 0 var(--ink);
    --tilt-card:-1.4deg;
    --tilt-cab:.5deg;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;background:var(--bg);min-height:100vh;min-height:100svh}
  body{
    color:var(--text);
    font-family:var(--sans);
    font-size:14px;
    line-height:1.4;
    display:flex;
    justify-content:center;
    background-image:radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:4px 4px;
  }
  .app{
    width:100%;
    max-width:430px;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
    position:relative;
    overflow:hidden;
  }

  /* ========= screen routing ========= */
  .screen{display:none;flex-direction:column;flex:1;min-height:0}
  .app[data-screen="picker"] .scr-picker,
  .app[data-screen="setup"]  .scr-setup,
  .app[data-screen="game"]   .scr-game{display:flex}

  /* ========= shared header ========= */
  .hdr{display:flex;align-items:center;gap:10px;padding:14px 0 16px}
  .burger,.back{
    appearance:none;
    width:36px;height:36px;
    background:var(--bg);
    color:var(--text);
    border:2px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    font-family:var(--display);
    font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;
  }
  .burger:active,.back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}
  .brand{
    flex:1;
    font-family:var(--display);
    font-size:18px;letter-spacing:.01em;
    text-transform:uppercase;
    margin:0;display:flex;align-items:center;gap:8px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .brand .dot{
    width:11px;height:11px;border-radius:50%;
    background:var(--accent-a);
    display:inline-block;flex:none;
    box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink);
  }
  .round-pill{
    font-family:var(--mono);
    font-size:11px;font-weight:700;
    letter-spacing:.16em;
    padding:7px 10px 5px;
    border:2px solid var(--text);
    line-height:1;flex:none;
  }
  /* city segmented control (header; sticker idiom, compact) */
  .city-toggle{
    display:inline-flex;flex:none;
    border:2px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    background:var(--surface);
  }
  .ct-btn{
    appearance:none;background:transparent;color:var(--text);
    border:none;border-left:2px solid var(--ink);
    padding:6px 8px 5px;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1;cursor:pointer;
  }
  .ct-btn:first-child{border-left:none}
  .ct-btn.on{background:var(--text);color:var(--ink)}
  .eb{
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
  }

  /* ========= picker ========= */
  .pk-hero{padding:8px 4px 16px}
  .pk-hero .eb{margin-bottom:6px}
  .pk-title{
    font-family:var(--display);
    font-size:42px;line-height:.95;
    letter-spacing:-.02em;
    text-transform:uppercase;
    margin:0;
  }
  .view-toggle{
    display:flex;
    border:2.5px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    margin:8px 4px 18px;
    background:var(--surface);
  }
  .vt-btn{
    appearance:none;background:transparent;color:var(--text);
    flex:1;border:none;
    padding:11px 8px 10px;
    font-family:var(--display);
    font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;
    cursor:pointer;
    border-left:2px solid var(--ink);
  }
  .vt-btn:first-child{border-left:none}
  .vt-btn.on{background:var(--text);color:var(--ink)}

  /* geolocation opt-in / status (no accent tokens) */
  .pk-geo{margin:-6px 4px 16px;text-align:center}
  .pk-geo:empty{display:none}
  .pk-geo-btn{
    appearance:none;width:100%;
    background:var(--text);color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    font-family:var(--display);
    font-size:12px;letter-spacing:.04em;
    text-transform:uppercase;
    padding:11px 14px 10px;line-height:1.15;
    cursor:pointer;
  }
  .pk-geo-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}
  .pk-geo-msg,.pk-geo-hint,.pk-geo-sorted{
    display:block;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--text-mute);
    line-height:1.4;
  }
  .pk-geo-sorted{color:rgba(255,255,255,.55)}
  .pk-geo-retry{
    appearance:none;
    background:transparent;color:var(--text);
    border:2px dashed var(--ink);
    font-family:var(--display);
    font-size:11px;letter-spacing:.04em;
    text-transform:uppercase;
    padding:8px 14px 7px;line-height:1;
    cursor:pointer;margin-top:8px;
  }
  .pk-geo-retry:active{transform:translate(2px,2px)}

  .pk-view{flex:1;overflow-y:auto;padding:2px 4px 24px;min-height:0}
  .pk-view[hidden]{display:none}

  /* list view */
  .place-card{
    display:block;
    text-decoration:none;color:inherit;
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 0 var(--ink);
    padding:14px 16px 14px;
    margin:0 6px 14px 0;
    position:relative;
    cursor:pointer;
    transition:transform .08s ease, box-shadow .08s ease;
  }
  .place-card:active{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--ink)}
  .place-card:nth-child(1){transform:rotate(-.6deg)}
  .place-card:nth-child(2){transform:rotate(.5deg)}
  .place-card:nth-child(3){transform:rotate(-.4deg)}
  .place-card:nth-child(4){transform:rotate(.7deg)}
  .place-card:nth-child(1):active{transform:rotate(-.6deg) translate(3px,3px)}
  .place-card:nth-child(2):active{transform:rotate(.5deg) translate(3px,3px)}
  .place-card:nth-child(3):active{transform:rotate(-.4deg) translate(3px,3px)}
  .place-card:nth-child(4):active{transform:rotate(.7deg) translate(3px,3px)}
  .pc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .pc-name{
    font-family:var(--display);
    font-size:22px;line-height:.98;
    letter-spacing:-.01em;
    text-transform:uppercase;
    margin:0 0 5px;
  }
  .pc-addr{
    font-family:var(--mono);
    font-size:10px;font-weight:500;
    letter-spacing:.12em;
    color:rgba(255,255,255,.55);
    text-transform:uppercase;
  }
  .place-distance{
    margin-top:5px;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.1em;
    color:rgba(255,255,255,.55);
    text-transform:uppercase;
  }
  .pk-empty{
    padding:48px 16px;
    text-align:center;
    font-family:var(--mono);
    font-size:12px;font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-mute);
  }
  .pc-foot{
    margin-top:12px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .pc-foot .spacer{flex:1}
  .pc-nav{
    appearance:none;
    background:var(--text);color:var(--ink);
    border:2px solid var(--ink);
    box-shadow:2px 2px 0 0 var(--ink);
    font-family:var(--display);
    font-size:10px;letter-spacing:.06em;
    text-transform:uppercase;
    padding:6px 9px 5px;line-height:1;
    cursor:pointer;
    display:inline-flex;align-items:center;gap:4px;
  }
  .pc-nav:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--ink)}
  .tag{
    font-family:var(--mono);
    font-size:9px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
    padding:4px 7px 3px;
    border:1.5px solid rgba(255,255,255,.5);
    color:rgba(255,255,255,.85);
    line-height:1;
  }
  .pc-arrow{
    font-family:var(--sans);font-weight:700;
    font-size:22px;
    line-height:1;flex:none;
  }
  .pc-count{
    position:absolute;
    top:-12px;right:10px;
    background:var(--text);
    color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:3px 3px 0 0 var(--ink);
    padding:6px 9px 5px;
    transform:rotate(6deg);
    font-family:var(--display);
    font-size:14px;line-height:1;
  }
  .pc-count .lbl{
    display:block;
    font-family:var(--mono);
    font-size:7px;font-weight:700;
    letter-spacing:.16em;
    color:var(--text-mute);
    margin-top:2px;
  }

  /* map view (Leaflet, dark) */
  .pk-map{position:relative}
  .map-frame{
    position:relative;
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 0 var(--ink);
    aspect-ratio:1 / 1.15;
    margin:0 6px 18px 0;
    overflow:hidden;
  }
  #pickerMap{position:absolute;inset:0;background:var(--surface-2)}
  .pk-locate{
    position:absolute;top:10px;right:10px;z-index:1000;
    appearance:none;
    width:36px;height:36px;
    background:var(--bg);color:var(--text);
    border:2px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;
  }
  .pk-locate[hidden]{display:none}
  .pk-locate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ink)}
  .leaflet-container{background:var(--surface-2);font-family:var(--sans);outline:none}
  .leaflet-control-attribution{
    background:rgba(11,10,20,.7)!important;
    color:var(--text-mute)!important;
    font-family:var(--mono);font-size:8px;
  }
  .leaflet-control-attribution a{color:var(--text-mute)!important}
  .leaflet-bar a{
    background:var(--surface-2);color:var(--text);
    border-color:var(--ink);
  }
  .leaflet-div-icon{background:transparent;border:none}
  .map-pin{
    cursor:pointer;
    background:var(--surface-2);
    border:2.5px solid var(--ink);
    box-shadow:3px 3px 0 0 var(--ink);
    padding:8px 10px 7px;
    color:var(--text);
    text-align:left;
    line-height:1;
    min-width:96px;
    white-space:nowrap;
  }
  .map-pin .mp-name{
    font-family:var(--display);
    font-size:11px;letter-spacing:-.005em;
    text-transform:uppercase;
    line-height:1;
  }
  .map-pin .mp-cnt{
    font-family:var(--mono);
    font-size:9px;font-weight:700;
    letter-spacing:.14em;
    color:var(--text-mute);
    text-transform:uppercase;
    margin-top:5px;
  }
  /* user-location dot: subtle stroke-opacity pulse (SVG-safe, no transform) */
  @keyframes geoPulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.35}}
  .user-location-marker{animation:geoPulse 2s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.user-location-marker{animation:none}}

  .pk-foot{
    padding:0 4px 6px;
    text-align:center;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.16em;
    color:var(--text-mute);
    text-transform:uppercase;
  }

  /* ========= setup ========= */
  .st-hero{padding:6px 4px 14px}
  .st-hero .eb{margin-bottom:6px}
  .st-title{
    font-family:var(--display);
    font-size:42px;line-height:.95;
    letter-spacing:-.02em;
    text-transform:uppercase;
    margin:0;
  }
  .st-sub{
    font-family:var(--mono);
    font-size:11px;font-weight:700;
    letter-spacing:.14em;
    color:var(--text-mute);
    margin-top:8px;
    text-transform:uppercase;
  }
  .st-list{margin:14px 4px 8px 4px;padding:0;list-style:none;overflow-y:auto;min-height:0}
  .st-row{
    display:flex;align-items:center;gap:10px;
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    padding:6px 10px 6px 14px;
    margin-bottom:10px;
    position:relative;
  }
  .st-row:nth-child(odd){transform:rotate(-.4deg)}
  .st-row:nth-child(even){transform:rotate(.3deg)}
  .st-row .idx{
    font-family:var(--display);
    font-size:14px;
    color:var(--text-mute);
    width:14px;text-align:right;
  }
  .st-row input{
    flex:1;
    appearance:none;
    background:transparent;
    border:none;
    color:var(--text);
    font-family:var(--display);
    font-size:18px;line-height:1;
    padding:10px 0;
    letter-spacing:-.01em;
    text-transform:uppercase;
    outline:none;
    min-width:0;
  }
  .st-row input::placeholder{color:rgba(245,243,255,.35)}
  .st-row .x{
    appearance:none;
    background:transparent;border:none;
    color:var(--text-mute);
    font-family:var(--display);font-size:14px;
    width:32px;height:32px;line-height:1;
    cursor:pointer;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .st-row .x:disabled{opacity:.25;cursor:default}

  .st-add{
    appearance:none;background:transparent;
    border:2px dashed rgba(245,243,255,.4);
    color:var(--text);
    font-family:var(--display);
    font-size:13px;letter-spacing:.04em;
    text-transform:uppercase;
    padding:14px 10px 13px;
    margin:0 4px 16px 4px;
    cursor:pointer;
    width:calc(100% - 8px);
  }
  .st-add:disabled{opacity:.3;cursor:default}

  .st-rondes{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:var(--shadow-stick-sm);
    padding:12px 14px;
    margin:0 4px 14px;
  }
  .stepper{display:flex;align-items:center;gap:0;border:2px solid var(--text)}
  .stepper button{
    appearance:none;background:transparent;border:none;color:var(--text);
    font-family:var(--display);font-size:18px;
    width:34px;height:34px;line-height:1;
    cursor:pointer;
  }
  .stepper button:disabled{opacity:.25;cursor:default}
  .stepper span{
    font-family:var(--display);font-size:18px;
    width:34px;text-align:center;line-height:1;
    border-left:2px solid var(--text);
    border-right:2px solid var(--text);
    padding:8px 0 7px;
  }

  .scr-setup .actions{margin-top:auto;padding:6px 0 22px;display:flex;flex-direction:column;gap:10px}

  /* ========= game ========= */
  .player{
    position:relative;
    background:var(--surface);
    color:var(--text);
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 0 var(--ink);
    padding:18px 18px 18px;
    margin:6px 12px 18px 4px;
    transform:rotate(var(--tilt-card));
    transition:transform .25s ease,opacity .25s ease;
  }
  .player .name{
    font-family:var(--display);
    font-size:36px;line-height:.95;
    letter-spacing:-.015em;
    text-transform:uppercase;
    margin:6px 0 0;
  }
  .level-badge{
    position:absolute;
    top:-16px;right:-12px;
    background:var(--text);
    color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:3px 3px 0 0 var(--ink);
    padding:8px 10px 7px;
    transform:rotate(5deg);
    text-align:center;
  }
  .level-badge .lb-num{
    font-family:var(--display);
    font-size:14px;line-height:1;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--ink);white-space:nowrap;
  }

  /* meter */
  .meter{margin-top:14px}
  .meter-eb{
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    margin-bottom:8px;
  }
  .meter-track{
    position:relative;
    height:16px;
    border:2px solid var(--text);
    overflow:hidden;
    background:linear-gradient(90deg,
      #6bd66b 0%,
      #c7d92e 22%,
      #facc15 42%,
      #fb923c 62%,
      #ef4444 82%,
      #b91c1c 100%);
  }
  .meter-track::before{
    content:"";
    position:absolute;inset:0;
    background-image:repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100%/7 - 1.5px),
      rgba(255,255,255,.85) calc(100%/7 - 1.5px),
      rgba(255,255,255,.85) calc(100%/7)
    );
    pointer-events:none;
    z-index:2;
    mix-blend-mode:difference;
  }
  /* meter-fill is the COVER - anchored right, shrinks as score grows */
  .meter-fill{
    position:absolute;
    top:0;right:0;bottom:0;
    width:100%;
    background:var(--meter-cover, var(--surface));
    border-left:2px solid var(--text);
    margin-left:-2px;
    transition:width .9s cubic-bezier(.22,1,.32,1);
    z-index:1;
  }
  .meter-fill[data-empty="1"]{border-left-color:transparent}
  /* player-sticker context: cover matches the sticker bg */
  .player{--meter-cover:var(--surface)}
  .meter-word{
    margin-top:10px;
    font-family:var(--display);
    font-size:22px;line-height:1;
    letter-spacing:-.01em;
    text-transform:uppercase;
    transform-origin:left center;
  }
  .meter-word.flash{animation:wordFlash .55s cubic-bezier(.34,1.56,.64,1)}
  @keyframes wordFlash{
    0%  {transform:translateY(-6px) scale(.94);opacity:.55}
    55% {transform:translateY(2px)  scale(1.03);opacity:1}
    100%{transform:translateY(0)    scale(1);   opacity:1}
  }

  .cabinet{
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 0 var(--ink);
    padding:10px;
    margin:0 4px 14px 12px;
    transform:rotate(var(--tilt-cab));
  }
  .cabinet.is-rondje,
  .cabinet.is-strong{transition:box-shadow .2s ease,border-color .2s ease}
  .cabinet.is-rondje{
    border-color:var(--accent-c);
    box-shadow:5px 5px 0 0 var(--ink),0 0 0 3px var(--accent-c);
  }
  .cabinet.is-strong{
    border-color:var(--accent-c);
    box-shadow:5px 5px 0 0 var(--ink),0 0 22px 2px var(--accent-c);
  }
  .cab-label{
    text-align:center;padding:3px 0 8px;
    font-family:var(--mono);
    font-size:9px;font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
  }
  .reels{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;
    background:var(--bg);
    border:1.5px solid rgba(255,255,255,.1);
    padding:6px;
  }
  .reel{
    position:relative;height:88px;
    background:var(--surface-2);
    border:1.5px solid rgba(255,255,255,.08);
    overflow:hidden;
  }
  .reel-strip{will-change:transform;transform:translate3d(0,0,0)}
  .reel-cell{
    height:88px;
    display:flex;align-items:center;justify-content:center;
    font-size:48px;line-height:1;user-select:none;
  }

  .result-row{
    text-align:center;
    padding:10px 4px;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--text-mute);
    border-top:1.5px dashed rgba(255,255,255,.18);
    border-bottom:1.5px dashed rgba(255,255,255,.18);
    margin:0 0 14px;
    min-height:36px;
    display:flex;align-items:center;justify-content:center;gap:3px;
  }
  .result-row .dots span{
    display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--text-mute);
    margin:0 2px;
    animation:blink 1.2s infinite ease-in-out;
  }
  .result-row .dots span:nth-child(2){animation-delay:.15s}
  .result-row .dots span:nth-child(3){animation-delay:.3s}
  @keyframes blink{
    0%,80%,100%{opacity:.3;transform:scale(.85)}
    40%{opacity:1;transform:scale(1)}
  }

  .actions{
    margin-top:auto;
    padding:6px 0 22px;
    display:flex;flex-direction:column;gap:10px;
  }
  .btn{
    appearance:none;
    font-family:var(--display);
    text-transform:uppercase;
    cursor:pointer;
    border:2.5px solid var(--ink);
    border-radius:0;padding:0;
    position:relative;
    transition:transform .08s ease,box-shadow .08s ease;
    user-select:none;
  }
  .btn:active:not(:disabled){
    transform:translate(3px,3px);
    box-shadow:1px 1px 0 0 var(--ink) !important;
  }
  .btn:disabled{opacity:.45;cursor:default}
  .spin{
    background:var(--accent-a);color:#fff;
    box-shadow:5px 5px 0 0 var(--ink);
    height:62px;font-size:20px;
    letter-spacing:.04em;
    padding:0 56px 0 22px;
    text-align:left;line-height:1;
  }
  .spin .arrow{
    position:absolute;right:18px;top:50%;
    transform:translateY(-50%);
    font-family:var(--sans);font-weight:700;font-size:24px;
  }
  .skip{
    background:var(--text);color:var(--ink);
    box-shadow:var(--shadow-stick-sm);
    height:46px;font-size:12px;
    letter-spacing:.04em;
    padding:0 14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .skip .skip-count{
    font-family:var(--mono);font-size:10px;font-weight:700;
    letter-spacing:.16em;
    background:var(--ink);color:var(--text);
    padding:4px 7px 3px;
  }
  .skip[hidden]{display:none}
  body.is-overlay .scr-game .actions{visibility:hidden}

  /* ========= bonus announce (pre-spin) ========= */
  .bonus-announce{
    position:fixed;inset:0;display:none;
    align-items:center;justify-content:center;
    z-index:70;                 /* above overlay(50) / drawer / endgame */
    pointer-events:none;
    background:rgba(11,10,20,.55);
    opacity:0;transition:opacity .18s ease;
  }
  .bonus-announce.show{display:flex;opacity:1}
  .ba-card{
    display:inline-flex;flex-direction:column;align-items:center;gap:6px;
    background:var(--accent-c);
    color:var(--ink);
    border:3px solid var(--ink);
    box-shadow:8px 8px 0 0 var(--ink);
    padding:26px 30px 22px;
    font-family:var(--display);
    text-transform:uppercase;
    transform:rotate(-3deg) scale(.7);opacity:0;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;
  }
  .bonus-announce.show .ba-card{transform:rotate(-2deg) scale(1);opacity:1}
  .bonus-announce.is-strong .ba-card{transform:rotate(3deg) scale(.7)}
  .bonus-announce.is-strong.show .ba-card{transform:rotate(1.5deg) scale(1)}
  .ba-em{font-size:54px;line-height:1}
  .ba-text{font-size:22px;letter-spacing:.04em;text-align:center;line-height:1.05}

  /* ========= overlay (W2 / W3) ========= */
  .overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;pointer-events:none}
  .overlay.show{display:flex;pointer-events:auto}
  .scrim{
    position:absolute;inset:0;
    background:rgba(11,10,20,.42);
    opacity:0;
    transition:opacity .25s ease;
  }
  .overlay.show .scrim{opacity:1}

  .ticket{
    position:relative;
    width:84%;max-width:300px;
    background:var(--text);
    color:var(--ink);
    border:3px solid var(--ink);
    box-shadow:8px 8px 0 0 var(--ink);
    padding:30px 22px 22px;
    transform:rotate(-3deg) translateY(40px) scale(.88);
    opacity:0;
    transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;
    background-image:
      radial-gradient(rgba(0,0,0,.045) 1px,transparent 1.2px),
      radial-gradient(rgba(0,0,0,.025) 1px,transparent 1.2px);
    background-size:7px 7px,11px 11px;
    background-position:0 0,3px 4px;
  }
  .overlay.show .ticket{
    transform:rotate(-1.2deg) translateY(0) scale(1);
    opacity:1;
  }
  .ticket::before,.ticket::after{
    content:"";
    position:absolute;left:-3px;right:-3px;
    height:12px;
    background-image:radial-gradient(circle,var(--ink) 0 4.5px,transparent 5px);
    background-size:14px 12px;
    background-repeat:repeat-x;
    background-position:left top;
  }
  .ticket::before{top:-1px}
  .ticket::after{bottom:-1px;transform:rotate(180deg)}

  .tk-stamp{
    position:absolute;
    top:-14px;left:50%;
    transform:translateX(-50%) rotate(8deg) scale(.7);
    opacity:0;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1) .15s,opacity .25s ease .15s;
    display:inline-flex;align-items:center;gap:5px;
    background:var(--accent-b);
    color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:3px 3px 0 0 var(--ink);
    padding:6px 11px 5px;
    font-family:var(--display);
    font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;white-space:nowrap;
  }
  .overlay.show .tk-stamp{
    transform:translateX(-50%) rotate(-3deg) scale(1);
    opacity:1;
  }
  .ticket.is-bonus .tk-stamp{background:var(--accent-c)}

  .tk-emoji{font-size:72px;line-height:1;text-align:center;margin:8px 0 4px}
  .tk-eb{
    text-align:center;
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-mute);
  }
  .tk-name{
    text-align:center;
    font-family:var(--display);
    font-size:clamp(20px,7vw,30px);
    line-height:.98;letter-spacing:-.02em;
    text-transform:uppercase;
    margin:6px 0 12px;
    overflow-wrap:normal;word-break:normal;hyphens:none;
  }
  .tk-meta{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
  .tk-meta span{
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    border:1.5px solid var(--ink);
    padding:4px 7px 3px;
  }
  /* ticket mini lam-meter */
  .tk-meter{
    --meter-cover:var(--text);
    margin:0 0 14px;
  }
  .tk-meter .meter-eb{
    font-family:var(--mono);font-size:9px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink);opacity:.55;
    margin-bottom:6px;
  }
  .tk-meter .meter-track{
    height:14px;border:2px solid var(--ink);
    background:linear-gradient(90deg,
      #6bd66b 0%,#c7d92e 22%,#facc15 42%,
      #fb923c 62%,#ef4444 82%,#b91c1c 100%);
    position:relative;overflow:hidden;
  }
  .tk-meter .meter-track::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100%/7 - 1.5px),
      rgba(255,255,255,.85) calc(100%/7 - 1.5px),
      rgba(255,255,255,.85) calc(100%/7)
    );
    pointer-events:none;z-index:2;mix-blend-mode:difference;
  }
  .tk-meter .meter-fill{
    position:absolute;top:0;right:0;bottom:0;
    width:100%;
    background:var(--text);
    border-left:2px solid var(--ink);margin-left:-2px;
    transition:width .9s cubic-bezier(.22,1,.32,1);z-index:1;
  }
  .tk-meter .meter-word{
    margin-top:8px;
    font-family:var(--display);
    font-size:15px;line-height:1;
    letter-spacing:-.005em;
    text-transform:uppercase;color:var(--ink);
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .tk-meter .meter-word .delta{
    font-family:var(--mono);font-size:10px;font-weight:700;
    letter-spacing:.14em;color:var(--ink);opacity:.55;
  }
  .tk-rondje{
    text-align:left;
    padding:10px 0 12px;
    border-top:1.5px dashed var(--ink);
    border-bottom:1.5px dashed var(--ink);
    font-family:var(--mono);
    font-size:10px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);
    margin-bottom:14px;
  }
  .tk-rondje .ro-eb{margin-bottom:6px;opacity:.7}
  .tk-rondje .ro-list{
    display:flex;flex-wrap:wrap;gap:4px;
  }
  .tk-rondje .ro-pl{
    background:var(--ink);color:var(--text);
    padding:4px 7px 3px;
    font-family:var(--display);font-size:11px;
    letter-spacing:.02em;
  }
  .tk-actions{display:flex;flex-direction:column;gap:8px}
  .tk-actions .btn.proost{
    background:var(--ink);color:var(--text);
    box-shadow:var(--shadow-stick-sm);
    height:50px;
    font-size:14px;
    padding:0 44px 0 14px;
    text-align:left;line-height:1;position:relative;
  }
  .tk-actions .btn.proost .arrow{
    position:absolute;right:14px;top:50%;
    transform:translateY(-50%);
    font-family:var(--sans);font-weight:700;font-size:18px;
  }
  .tk-actions .btn.tk-skip{
    background:transparent;
    border:2px dashed var(--ink);box-shadow:none;
    color:var(--ink);
    height:40px;font-size:11px;
    padding:0 12px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .tk-actions .btn.tk-skip .skip-count{
    background:var(--ink);color:var(--text);
    padding:3px 6px 2px;
    font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  }
  .tk-actions .btn.tk-skip[hidden]{display:none}

  /* W3 flood */
  .flood{
    position:absolute;inset:0;
    background:var(--accent-b);
    color:var(--ink);
    display:none;flex-direction:column;align-items:center;justify-content:center;
    padding:24px;text-align:center;
    opacity:0;
    transition:opacity .35s ease;
  }
  .flood.is-active{display:flex}
  .overlay.show .flood.is-active{opacity:1}
  .flood .fl-eb{
    font-family:var(--mono);
    font-size:12px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;
    white-space:nowrap;
  }
  .flood .fl-emoji{font-size:120px;line-height:1;margin:14px 0 6px}
  .flood .fl-name{
    font-family:var(--display);
    font-size:clamp(30px,9.5vw,54px);
    line-height:.92;letter-spacing:-.03em;
    text-transform:uppercase;
    margin:8px 0 0;
    overflow-wrap:normal;word-break:normal;hyphens:none;
    max-width:92%;
  }
  .flood .fl-meta{
    margin-top:14px;
    font-family:var(--mono);
    font-size:12px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    white-space:nowrap;
  }
  .flood .fl-actions{
    margin-top:32px;
    display:flex;flex-direction:column;gap:10px;
    width:80%;max-width:280px;
  }
  .flood .btn.proost{
    background:var(--ink);color:var(--accent-b);
    box-shadow:5px 5px 0 0 var(--ink);
    height:56px;font-size:16px;
    padding:0 44px 0 18px;
    text-align:left;line-height:1;position:relative;
  }
  .flood .btn.proost .arrow{
    position:absolute;right:18px;top:50%;
    transform:translateY(-50%);
    font-family:var(--sans);font-weight:700;font-size:20px;
  }
  .flood .btn.tk-skip{
    background:transparent;border:2px solid var(--ink);
    box-shadow:none;color:var(--ink);
    height:42px;font-size:11px;padding:0 14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .flood .btn.tk-skip .skip-count{
    background:var(--ink);color:var(--accent-b);
    padding:3px 6px 2px;
    font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  }
  .flood .btn.tk-skip[hidden]{display:none}

  /* ========= end-game ========= */
  .endgame{
    position:fixed;inset:0;
    background:var(--bg);color:var(--text);
    display:none;flex-direction:column;
    align-items:center;justify-content:center;
    padding:32px 20px;text-align:center;z-index:60;
  }
  .endgame.show{display:flex}
  .endgame .eg-eb{
    font-family:var(--mono);
    font-size:11px;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--text-mute);
  }
  .endgame .eg-title{
    font-family:var(--display);
    font-size:46px;line-height:.95;letter-spacing:-.02em;
    text-transform:uppercase;
    margin:8px 0 24px;
  }
  .endgame .eg-list{
    width:100%;max-width:320px;margin:0 0 28px;padding:0;list-style:none;
  }
  .endgame .eg-row{
    display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
    background:var(--surface);
    border:2.5px solid var(--ink);
    box-shadow:4px 4px 0 0 var(--ink);
    padding:12px 14px;margin-bottom:8px;text-align:left;
  }
  .endgame .eg-row.first{background:var(--accent-b);color:var(--ink);transform:rotate(-1deg)}
  .endgame .eg-row .rk{
    font-family:var(--display);font-size:18px;
    width:24px;text-align:center;
  }
  .endgame .eg-row .nm{
    font-family:var(--display);font-size:16px;
    text-transform:uppercase;letter-spacing:-.005em;
  }
  .endgame .eg-row .lv{
    font-family:var(--mono);font-size:10px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;opacity:.7;
  }
  .endgame .btn.proost{
    background:var(--text);color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:5px 5px 0 0 var(--ink);
    height:54px;font-size:15px;padding:0 22px;line-height:1;
  }

  /* ========= drawer ========= */
  .drawer{
    position:fixed;inset:0;
    background:rgba(11,10,20,.92);
    z-index:55;
    display:none;flex-direction:column;
    padding:24px 20px;
  }
  .drawer.show{display:flex}
  .drawer .dr-close{
    align-self:flex-end;
    background:transparent;border:2px solid var(--text);
    color:var(--text);
    font-family:var(--display);font-size:14px;
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;line-height:1;
  }
  .drawer .dr-title{
    font-family:var(--display);
    font-size:32px;letter-spacing:-.01em;
    text-transform:uppercase;margin:18px 0 14px;
  }
  .drawer .dr-list{
    margin:0;padding:0;list-style:none;
    width:100%;max-width:420px;
    overflow-y:auto;
    flex:1;min-height:0;
  }

  /* receipt (scorekaart card per speler) */
  .receipt{
    background:var(--text);
    color:var(--ink);
    border:2.5px solid var(--ink);
    box-shadow:4px 4px 0 0 var(--ink);
    padding:18px 16px 16px;
    margin:0 0 16px;
    position:relative;
    font-family:var(--mono);
    font-size:11px;font-weight:500;
    letter-spacing:.02em;
    background-image:
      radial-gradient(rgba(0,0,0,.04) 1px,transparent 1.2px),
      radial-gradient(rgba(0,0,0,.025) 1px,transparent 1.2px);
    background-size:7px 7px,11px 11px;
    background-position:0 0,3px 4px;
  }
  .receipt:nth-child(odd){transform:rotate(-.3deg)}
  .receipt:nth-child(even){transform:rotate(.2deg)}
  .receipt::before,.receipt::after{
    content:"";
    position:absolute;left:-3px;right:-3px;
    height:10px;
    background-image:radial-gradient(circle,var(--bg) 0 4px,transparent 4.5px);
    background-size:12px 10px;
    background-repeat:repeat-x;
    background-position:left top;
  }
  .receipt::before{top:-1px}
  .receipt::after{bottom:-1px;transform:rotate(180deg)}
  .receipt.current{box-shadow:4px 4px 0 0 var(--accent-a)}
  .rcp-head{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:10px;margin-bottom:2px;
  }
  .rcp-name{
    font-family:var(--display);
    font-size:20px;letter-spacing:-.005em;
    text-transform:uppercase;line-height:1;
  }
  .rcp-name .you{
    display:inline-block;
    background:var(--accent-a);color:#fff;
    font-family:var(--mono);font-size:8px;font-weight:700;
    letter-spacing:.16em;
    padding:2px 5px 1px;
    margin-left:6px;vertical-align:middle;
  }
  .rcp-lvl{
    font-family:var(--display);
    font-size:11px;text-transform:uppercase;line-height:1;
    white-space:nowrap;
  }
  .rcp-sub{
    font-family:var(--mono);font-size:9px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    opacity:.55;
    display:flex;justify-content:space-between;
    margin-bottom:10px;
  }
  .rcp-lines{
    padding:8px 0;
    border-top:1.5px dashed var(--ink);
    border-bottom:1.5px dashed var(--ink);
  }
  .rcp-line{
    display:flex;align-items:baseline;gap:6px;
    padding:3px 0;
  }
  .rcp-line .nm{
    flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .rcp-line .pr{font-variant-numeric:tabular-nums}
  .rcp-sub-line{
    display:flex;justify-content:space-between;
    font-size:9px;opacity:.5;
    padding:0 0 4px;
  }
  .rcp-empty{
    padding:18px 0;text-align:center;
    font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;opacity:.45;
  }
  .rcp-foot{
    display:flex;justify-content:space-between;align-items:baseline;
    padding-top:10px;
    font-family:var(--display);font-size:14px;
    text-transform:uppercase;letter-spacing:-.005em;
  }
  .rcp-foot .totals{
    display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
  }
  .rcp-foot .totals .pt{
    font-family:var(--mono);font-size:9px;font-weight:700;
    letter-spacing:.14em;opacity:.55;
    margin-top:2px;
  }
  .drawer .dr-actions{
    margin-top:auto;display:flex;flex-direction:column;gap:10px;
    width:100%;max-width:380px;
  }
  .drawer .btn.dr-prim{
    background:var(--text);color:var(--ink);
    box-shadow:var(--shadow-stick-sm);
    height:48px;font-size:13px;padding:0 16px;
  }
  .drawer .btn.dr-sec{
    background:transparent;color:var(--text);
    border:2px dashed var(--text);box-shadow:none;
    height:42px;font-size:12px;padding:0 16px;
  }

  /* keep single-line button labels from wrapping/clipping in fixed-height
     stickers (e.g. "Spin voor <14-char name>" beside the absolute arrow) */
  .spin > span:first-child,
  .tk-actions .btn.proost > span:first-child,
  .flood .btn.proost > span:first-child{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* responsive nudges (reel cell height kept fixed so landing math stays exact) */
  @media (max-width: 360px){
    .player .name{font-size:30px}
    .reel-cell{font-size:42px}
    .spin{height:58px;font-size:18px}
    .pk-title,.st-title{font-size:36px}
  }