/* Just Let's Play — the host screen's own shell.
 *
 * Measured, not guessed: wobble, friction and slippy's host <style> blocks opened with the
 * same 204 lines, character for character, before each game's own rules began. This is
 * that prefix — the overlay card and where it sits, the in-game HUD that starts hidden,
 * the leaderboard and invite modals, the share row, the TV guide, the roster chips, the
 * toast layer and the countdown.
 *
 * LOAD ORDER: after arena-chrome.css AND after mode-clips.css, before the page's own
 * <style>. Five selectors here also exist in arena-chrome (#modeBtns, .chipWrap and three
 * keyframe stops) and these are the ones that used to win; two more are re-stated by
 * friction's and slippy's own trailing blocks, which stay inline and so still win. Move
 * this link and both of those stop being true.
 *
 * Tipsy's host is not on this — its style block diverges at the first line, because it was
 * written before the other three settled on a shape.
 */

#game { position: absolute; inset: 0; }
  #stars { margin-left: 12px; letter-spacing: 3px; font-size: 0.7em; vertical-align: middle; }
  #stars .star { display: inline-block; color: var(--taxi); paint-order: stroke fill; -webkit-text-stroke: 1px var(--ink); animation: stamp 400ms cubic-bezier(.2,1.6,.4,1); }
  @keyframes stamp { from { transform: scale(2.4) rotate(24deg); opacity: 0; } }
  #cv { transition: transform 900ms cubic-bezier(.3,.7,.4,1); }
  #specBadge { display: none; top: 120px; left: 18px; font-size: 13px; padding: 6px 12px; transform: rotate(-2deg); }
  #lbModal.hidden, #inviteModal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-1deg) scale(0.9);
    transition: opacity 170ms ease, transform 170ms ease, visibility 0s 170ms;
  }
  /* the one link everybody gets — the rest of the modal is just a delivery channel */
  .invOpt.primary { background: var(--mint); font-size: 17px; padding: 13px 16px; }
  /* The board never runs off the screen. Ten rows plus a view row plus a unit line is
     ~600px, which fits a TV and does not fit a laptop with the browser chrome on — and an
     overflowing modal takes its own close button off the bottom of the screen with it. The
     rows scroll; the title, the toggles and the pager stay put. */
  #lbModal {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 720px);
  }
  #lbModalList { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  #lbKinds { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
  .lbTab.kind.on { background: var(--mint); }
  /* pager: only exists when a board runs past one page (11+ entries) */
  #lbPager { display: none; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
  #lbPager.show { display: flex; }
  #lbPageTxt {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    min-width: 3.6em;
    text-align: center;
    opacity: 0.8;
  }
  .lbTab.pager:disabled { opacity: 0.4; cursor: default; }
  .lbTab.pager:disabled:hover { filter: none; box-shadow: none; }
  /* modal close: a corner ✕, not a word — the modal's own title carries the meaning and the
     button stops competing with the actions inside. Sits on the sticker's top-right corner. */
  #lbClose {
    position: absolute;
    /* straddling the corner, tucked in a little from dead-centre so it reads as attached to
       the sticker rather than floating beside it */
    top: -13px;
    right: -13px;
    width: 34px;
    height: 34px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
    color: var(--ink);
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: 2px 2px 0 rgba(0,0,0,.25);
    cursor: pointer;
  }

  #modeBtns { display: none; justify-content: center; gap: 16px; margin-top: 16px; }

  #outLayer { position: absolute; inset: 0; pointer-events: none; }
  #livesLayer { position: absolute; inset: 0; pointer-events: none; display: none; }
  .laneWrap {
    position: absolute;
    /* the clock's own height scales with the viewport, so this tracks it: 18px offset
       + the sticker's line box (Baloo runs ~1.9) + a constant 14px of daylight.
       A flat 90px cleared the clock on a laptop and sat inside it on a TV. */
    top: calc(18px + clamp(28px, 6vh, 54px) * 1.9 + 22px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
  }
  /* versus: bare name floating above the lives sticker, so you know whose lane is whose */
  .laneName {
    font-family: var(--display);
    font-weight: 800;
    font-size: 22px;
    -webkit-text-stroke: 2.5px var(--ink);
    paint-order: stroke fill; /* stroke behind the fill — otherwise the border eats into the letterforms */
    text-shadow: 2px 2px 0 rgba(0,0,0,.4);
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .livesTag {
    display: flex;
    gap: 10px;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 10px 16px;
    box-shadow: 4px 4px 0 rgba(0,0,0,.3);
  }
  /* winner keeps stacking after the last rival falls — the crown marks the victory lap */
  .crownTag {
    position: absolute;
    top: 42%; /* same shelf as the OUT stamps — clear of the lane name and lives dots */
    transform: translate(-50%, -50%) rotate(3deg);
    background: var(--taxi);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 8px 20px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(16px, 3vh, 26px);
    color: var(--ink);
    box-shadow: 5px 5px 0 rgba(0,0,0,.35);
  }
  .lifeDot {
    width: 30px;
    height: 30px;
    border: 4px solid var(--ink);
    border-radius: 8px;
    background: var(--mint);
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    color: var(--cherry);
    line-height: 23px;
    text-align: center;
  }
  .lifeDot.lost { background: transparent; border-color: rgba(34,30,58,.35); }
  .lifeDot.lost::before { content: "✕"; }
  /* losing a life is a beat: the mint chip pops into flying shards, the ✕ slams in, the sticker flinches */
  .lifeDot.slam::before { display: inline-block; animation: dotSlam 560ms cubic-bezier(.2,1.6,.4,1); }
  @keyframes dotSlam { from { transform: scale(2.6) rotate(24deg); opacity: 0; } }
  .livesTag.kick { animation: tagKick 260ms ease-out; }
  @keyframes tagKick {
    30% { transform: translate(2px, 3px) rotate(1.6deg); }
    65% { transform: translate(-2px, 1px) rotate(-1.2deg); }
  }
  .chipGhost {
    position: absolute;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 8px;
    background: var(--mint);
    border: 4px solid var(--ink);
    pointer-events: none;
    animation: chipPop 380ms ease-out both;
  }
  @keyframes chipPop { to { transform: scale(1.8); opacity: 0; } }
  .lifeShard {
    position: absolute;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 3px;
    background: var(--mint);
    border: 2px solid var(--ink);
    pointer-events: none;
    animation: shardFly 700ms cubic-bezier(.2,.7,.4,1) both;
  }
  @keyframes shardFly {
    60% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 1; }
    100% { transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) + 46px)) rotate(calc(var(--rot) * 1.6)); opacity: 0; }
  }
  /* no reduced-motion gate here: the whole game is motion — a 600ms HUD accent
     is the least of it, and gating it just makes the X appear broken */
  .chipWrap { position: relative; }
  .chipWrap.asleep { opacity: 0.55; }
  .chipWrap.asleep::after { content: "💤"; position: absolute; top: -12px; right: -8px; font-size: 15px; }
  /* versus: an eliminated player's chip freezes and fades — the living rotate, the dead rest */
  .chipWrap.dead { opacity: 0.4; }
  .chipWrap.dead .chip { filter: grayscale(0.85); }

  #warnLayer { position: absolute; inset: 0; pointer-events: none; }
  .warnTag {
    position: absolute;
    top: 32%;
    transform: translate(-50%, -50%) rotate(-3deg);
    background: var(--cherry);
    color: var(--cream);
    border: 4px solid var(--ink);
    border-radius: 16px;
    padding: 10px 22px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(18px, 3.4vh, 30px);
    text-align: center;
    box-shadow: 5px 5px 0 rgba(0,0,0,.4);
    animation: warnPulse 500ms ease-in-out infinite alternate;
  }
  .warnTag .cnt { display: block; font-size: 1.8em; paint-order: stroke fill; -webkit-text-stroke: 1.5px var(--ink); }
  @keyframes warnPulse { from { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } to { transform: translate(-50%, -50%) rotate(-3deg) scale(1.09); } }
  .outTag {
    position: absolute;
    top: 42%;
    transform: translate(-50%, -50%) rotate(-6deg);
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 14px;
    padding: 8px 20px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(20px, 4vh, 34px);
    color: var(--cherry);
    box-shadow: 5px 5px 0 rgba(0,0,0,.35);
  }
  .lbRow.top .r { color: var(--taxi); } /* the true #1 only — page 2's first row is #11, not a champion */
  .lbRow .t { font-variant-numeric: tabular-nums; font-weight: 700; }
  /* the new parts of a row: what a run was set with, and what else it is worth knowing for */
  .lbUnit {
    text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(34,30,58,.55); margin: -6px 0 10px;
  }
  .lbChip {
    margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    background: rgba(34,30,58,.09); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
  }
  .lbChip.solo { background: rgba(78,165,255,.20); }
  .lbCtx { font-size: 11px; font-weight: 700; color: rgba(34,30,58,.5); margin-left: 7px; }
  .lbCrown { margin-right: 5px; }
  .lbEmpty { text-align: center; padding: 18px 6px 8px; font-size: 15px; line-height: 1.5; }
  .lbEmpty b { display: block; margin-top: 4px; }

  /* The card itself. Byte-identical in all three host files, and it only missed the
     block above because a rule before it had already diverged — a reminder that
     'longest common prefix' under-reports how much is actually shared. */
  #overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-1.5deg);
    padding: 26px 40px;
    text-align: center;
    font-size: clamp(18px, 3.6vh, 30px);
    line-height: 1.3; /* Baloo's metric line box is ~1.9 — way too airy for card copy */
    max-width: 80vw;
  }