:root{
    --ink:#0A0A0A;
    --paper:#FAFAFA;
    --blue:#3B82F6;
    --blue-lo:#1E3A8A;
    --blue-hi:#93C5FD;
    --red:#EF4444;
    --red-lo:#7F1D1D;
    --red-hi:#FCA5A5;
    --gold:#E9C46A;
    --gold-hi:#F7E0A6;
    --gold-lo:#8A6A2A;
    --display:'Luckiest Guy','Impact',system-ui,sans-serif;
    --ui:'Inter',system-ui,-apple-system,sans-serif;
    --gs:1;                     /* stream fit — live-adjustable from Ctrl+M */
    /* mostly vh-driven: the vertical capture has the room, a short editing
       window does not, so the floor keeps it usable there too */
    --tileW:clamp(64px,9.5vh,132px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{
    background:#05070C;color:var(--paper);font-family:var(--ui);
    -webkit-font-smoothing:antialiased;user-select:none;touch-action:none;
  }
  canvas{display:block;position:fixed;inset:0}

  .stroke{-webkit-text-stroke:.15em #08080A;paint-order:stroke fill}

  /* ===================== HUD ===================== */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10}

  .topbar{
    /* Position is user-controlled: menu > SCOREBOARD > MOVE, then drag.
       Defaults keep it narrow and centred, since a vertical TikTok crop
       loses the outer edges of a wide window. */
    position:absolute;left:var(--hud-x,50%);top:var(--hud-y,2%);
    transform:translateX(-50%) scale(var(--gs));transform-origin:top center;
    width:min(92vw,760px);
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:clamp(5px,.9vw,11px);
  }
  .topbar.draggable{
    pointer-events:auto;cursor:grab;
    outline:2px dashed var(--gold);outline-offset:9px;border-radius:14px;
  }
  .topbar.draggable:active{cursor:grabbing}

  #dragBar{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:25;
    display:none;align-items:center;gap:14px;pointer-events:auto;
    background:linear-gradient(180deg,#1A2231,#0B0F16);
    border:1px solid rgba(233,196,106,.4);border-radius:12px;padding:10px 14px;
    box-shadow:0 12px 34px rgba(0,0,0,.7);
    font-family:var(--ui);font-weight:900;font-size:12px;letter-spacing:.1em;
    color:var(--gold-hi);white-space:nowrap;
  }
  #dragBar.on{display:flex}

  /* ===================== action rails ===================== */
  #rails{position:fixed;inset:0;z-index:9;pointer-events:none}
  /* `left` is set from JS each frame to the projected outer edge of that team's
     bridge; the transform anchors the rail just outside it. */
  .rail{
    /* left AND top are both set from JS: flush to the outer edge of that team's
       health bar, and vertically clamped so a tall rail can never run off. */
    position:absolute;top:34%;left:50%;
    display:flex;flex-direction:column;gap:clamp(6px,1.5vh,16px);
  }
  .rail.left{transform:translate(-100%,0) scale(var(--gs));transform-origin:right top}
  .rail.right{transform:translate(0,0) scale(var(--gs));transform-origin:left top}
  .slot{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.5vh,5px);width:var(--tileW)}
  .tile{
    pointer-events:auto;position:relative;padding:0;
    width:var(--tileW);aspect-ratio:1;border-radius:20px;
    border:2px solid rgba(255,255,255,.34);
    display:grid;place-items:center;cursor:pointer;
    font-size:clamp(26px,4.2vh,50px);line-height:1;
    transition:transform 150ms cubic-bezier(.2,.8,.3,1),box-shadow 150ms ease-out;
  }
  .tile.blue{
    background:linear-gradient(180deg,#5EA1FF 0%,#2563EB 52%,#173A96 100%);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -14px 22px rgba(0,0,0,.30),
               0 8px 20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6);
  }
  .tile.red{
    background:linear-gradient(180deg,#FF8080 0%,#DC2626 52%,#8B1414 100%);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -14px 22px rgba(0,0,0,.30),
               0 8px 20px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6);
  }
  .tile:hover{transform:translateY(-3px)}
  .tile:active{transform:translateY(1px) scale(.96)}
  .tile:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
  .tile.fire{animation:tileFire .42s cubic-bezier(.2,.8,.3,1)}
  @keyframes tileFire{
    0%{transform:scale(1)}
    28%{transform:scale(1.22) rotate(-5deg);box-shadow:0 0 0 4px var(--gold-hi),0 0 30px var(--gold)}
    100%{transform:scale(1)}
  }
  .tile .ico{
    display:grid;place-items:center;width:78%;height:78%;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
  }
  .tile .ico img{width:100%;height:100%;object-fit:contain;border-radius:13px}
  .tile .key{
    position:absolute;top:4px;right:7px;
    font-family:var(--ui);font-size:10px;font-weight:900;
    color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.7);
  }
  .cap{
    font-family:var(--display);letter-spacing:.005em;line-height:1.04;text-align:center;
    width:100%;white-space:nowrap;font-size:clamp(10px,1.8vh,18px);
    color:#FFE9A8;-webkit-text-stroke:.11em #08080A;paint-order:stroke fill;
    background:rgba(6,8,12,.66);border-radius:7px;padding:.1em .1em .16em;
    box-shadow:0 2px 7px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07);
  }
  .rail.left .cap{color:#CFE9FF}
  .rail.right .cap{color:#FFD3D3}

  /* ===================== cinematic callout ===================== */
  #cineText{
    position:fixed;inset:0;z-index:22;display:grid;place-items:center;
    pointer-events:none;opacity:0;transition:opacity .18s ease-out;text-align:center;
  }
  #cineText.on{opacity:1}
  #cineText .big{
    display:block;font-family:var(--display);line-height:.9;
    font-size:clamp(60px,15vw,190px);
    -webkit-text-stroke:.085em #08080A;paint-order:stroke fill;
    filter:drop-shadow(0 10px 0 rgba(0,0,0,.55));
  }
  #cineText.hit .big{animation:cineHit .42s cubic-bezier(.2,.8,.3,1)}
  @keyframes cineHit{
    0%{transform:scale(.55) rotate(-8deg);opacity:.2}
    38%{transform:scale(1.16) rotate(2deg);opacity:1}
    100%{transform:scale(1) rotate(0)}
  }
  #cineText .sub{
    display:block;margin-top:6px;font-family:var(--display);
    font-size:clamp(14px,2.4vw,30px);letter-spacing:.18em;color:#fff;
    -webkit-text-stroke:.12em #08080A;paint-order:stroke fill;
  }
  .hp{
    /* Sized off WIDTH, not height — the capture window is short and wide. */
    position:relative;height:clamp(24px,2.9vw,36px);
    border-radius:8px;overflow:hidden;
    background:rgba(6,9,14,.85);border:1px solid rgba(0,0,0,.9);
    box-shadow:inset 0 0 0 1px rgba(233,196,106,.22),0 6px 18px rgba(0,0,0,.5);
  }
  .hp i{
    position:absolute;top:0;bottom:0;left:0;width:0%;
    transition:width 150ms cubic-bezier(.2,.8,.3,1);
  }
  .hp.blue i{background:linear-gradient(180deg,#7CB2FF 0%,#2563EB 55%,#16307A 100%)}
  .hp.red  i{background:linear-gradient(180deg,#FF9A9A 0%,#DC2626 55%,#701414 100%);left:auto;right:0}
  .hp b{
    position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:clamp(3px,.55vw,7px);
    font-family:var(--display);letter-spacing:.04em;white-space:nowrap;
    font-size:clamp(13px,1.9vw,22px);color:#fff;
    -webkit-text-stroke:.16em #08080A;paint-order:stroke fill;
  }
  .hp b em{font-style:normal;opacity:.85;font-size:.68em}
  .hp b span{
    display:inline-block;font-variant-numeric:tabular-nums;
    transition:transform 110ms cubic-bezier(.2,.8,.3,1);
  }
  .hp b span.bump{transform:scale(1.12)}
  .hp b .bst{color:var(--gold-hi);opacity:0;transition:opacity .18s ease-out}
  .hp b .bst.on{opacity:1}

  .plaque{
    display:flex;align-items:stretch;
    background:linear-gradient(180deg,#1A2231 0%,#0B0F16 100%);
    border:1px solid rgba(233,196,106,.35);border-radius:12px;overflow:hidden;
    box-shadow:0 12px 34px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);
  }
  .plaque .side{
    padding:clamp(3px,.5vw,7px) clamp(9px,1.2vw,20px);
    text-align:center;min-width:clamp(64px,7vw,98px);
  }
  .plaque .side + .side{border-left:1px solid rgba(255,255,255,.10)}
  .plaque .nm{
    font-family:var(--display);letter-spacing:.04em;
    font-size:clamp(11px,1.5vw,18px);white-space:nowrap;
    -webkit-text-stroke:.15em #08080A;paint-order:stroke fill;
  }
  .plaque .wins{
    font-family:var(--display);font-size:clamp(20px,3vw,36px);line-height:1;
    -webkit-text-stroke:.13em #08080A;paint-order:stroke fill;
  }
  .plaque .lbl{font-size:clamp(7px,.75vw,9px);letter-spacing:.22em;opacity:.62;font-weight:900}
  .side.blue .nm,.side.blue .wins{color:#4FA2FF}
  .side.red  .nm,.side.red  .wins{color:#FF5F5F}

  #weather{
    position:absolute;right:12px;bottom:10px;
    font-family:var(--display);font-size:11px;letter-spacing:.2em;
    color:rgba(250,250,250,.5);text-shadow:0 1px 3px rgba(0,0,0,.9);
  }
  #fps{position:absolute;left:12px;bottom:10px;font-size:10.5px;font-weight:900;
       letter-spacing:.1em;color:rgba(250,250,250,.4);display:none}
  #fps.on{display:block}

  #centerMsg{
    position:absolute;inset:0;display:grid;place-items:center;opacity:0;
    font-family:var(--display);font-size:clamp(56px,15vh,150px);color:#fff;
    -webkit-text-stroke:.11em #08080A;paint-order:stroke fill;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.55));
  }
  #centerMsg.go{animation:pop .6s cubic-bezier(.2,.8,.3,1)}
  @keyframes pop{0%{opacity:0;transform:scale(.55)}20%{opacity:1;transform:scale(1.08)}
                 60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.16)}}

  #flash{position:fixed;inset:0;background:#dbe9ff;opacity:0;pointer-events:none;z-index:20}
  /* Cheap, and it is most of what makes a flat backdrop read as art. */
  #vig{
    position:fixed;inset:0;pointer-events:none;z-index:5;
    background:
      radial-gradient(128% 96% at 50% 42%, transparent 42%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.58) 100%),
      linear-gradient(180deg, rgba(0,0,0,.20) 0%, transparent 22%);
  }

  .hint{
    position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
    font-size:10.5px;font-weight:800;letter-spacing:.16em;white-space:nowrap;
    color:rgba(250,250,250,.34);text-shadow:0 1px 3px rgba(0,0,0,.9);
  }
  .hint kbd{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
            border-radius:4px;padding:1px 5px;font-family:var(--ui);font-size:9.5px}

  /* ===================== Overlays ===================== */
  .overlay{
    position:fixed;inset:0;z-index:30;
    display:flex;align-items:center;justify-content:center;padding:12px;
    background:rgba(4,6,10,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;transition:opacity .2s ease-out;
  }
  .overlay.on{opacity:1;pointer-events:auto}
  /* NB: never set pointer-events:auto on overlay children — a hidden overlay would
     then keep swallowing clicks meant for the overlay behind it. They inherit
     none/auto from .overlay / .overlay.on, which is exactly what we want. */

  .btn{
    font-family:var(--display);letter-spacing:.06em;
    background:linear-gradient(180deg,var(--gold-hi),#C99B33);
    color:#1E1508;border:2px solid #0A0A0A;border-radius:10px;
    padding:11px 26px;cursor:pointer;font-size:clamp(13px,2.1vh,19px);
    box-shadow:0 5px 0 var(--gold-lo),0 10px 24px rgba(0,0,0,.5);
    transition:transform 150ms cubic-bezier(.2,.8,.3,1),box-shadow 150ms ease-out;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--gold-lo),0 14px 30px rgba(0,0,0,.55)}
  .btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-lo)}
  .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .btn.ghost{background:rgba(255,255,255,.06);color:var(--paper);
             border:1px solid rgba(255,255,255,.22);box-shadow:none}
  .btn.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);box-shadow:none}
  .btn.ghost:active{transform:translateY(0)}
  .btn.sm{padding:8px 16px;font-size:13px}

  #start .inner,#winner .inner{text-align:center;padding:0 22px}
  #title{
    font-family:var(--display);line-height:.88;font-size:clamp(40px,11vh,120px);color:#fff;
    -webkit-text-stroke:.09em #08080A;paint-order:stroke fill;
    filter:drop-shadow(0 8px 0 rgba(0,0,0,.55));
  }
  #title .b{color:#5AA9FF}
  #title .g{color:#FF5A5A}
  #subtitle{
    font-family:var(--display);letter-spacing:.14em;margin-top:12px;
    font-size:clamp(11px,2vh,19px);color:var(--gold-hi);
    -webkit-text-stroke:.13em #08080A;paint-order:stroke fill;
  }
  #playBtn{margin-top:clamp(20px,3.6vh,36px)}
  #start .row2{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

  .kick{
    font-family:var(--display);letter-spacing:.18em;font-size:clamp(15px,2.8vh,30px);
    color:var(--gold-hi);-webkit-text-stroke:.16em #08080A;paint-order:stroke fill;
    text-shadow:0 4px 0 rgba(0,0,0,.85);
  }
  #winTitle{
    font-family:var(--display);line-height:.86;font-size:clamp(42px,10vh,124px);color:#fff;
    -webkit-text-stroke:.09em #08080A;paint-order:stroke fill;
    filter:drop-shadow(0 9px 0 rgba(0,0,0,.6));
  }
  #winSub{
    font-family:var(--display);letter-spacing:.09em;margin-top:12px;
    font-size:clamp(11px,1.9vh,18px);opacity:.92;
    -webkit-text-stroke:.13em #08080A;paint-order:stroke fill;
  }
  #winActions{margin-top:clamp(16px,3vh,28px);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

  /* ===================== Control menu ===================== */
  .panel{
    width:min(680px,94vw);
    /* No vh here: 100% resolves against the fixed, inset:0 overlay's content
       box, so the DONE row stays reachable in any window height. */
    max-height:100%;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#151C28,#0A0E14);
    border:1px solid rgba(233,196,106,.28);border-radius:18px;
    padding:22px clamp(18px,3vw,28px) 18px;box-shadow:0 44px 110px rgba(0,0,0,.75);
  }
  .panel h2{font-family:var(--display);font-size:clamp(20px,3.2vh,30px);letter-spacing:.05em;color:var(--gold-hi)}
  .panel .lead{font-size:12px;opacity:.5;margin:2px 0 16px;font-weight:600}
  .panel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
              scrollbar-width:thin;scrollbar-color:rgba(233,196,106,.3) transparent}
  .panel-body::-webkit-scrollbar{width:8px}
  .panel-body::-webkit-scrollbar-thumb{background:rgba(233,196,106,.28);border-radius:99px}
  .grp{margin-bottom:16px}
  .grp h3{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:#FFC46B;margin-bottom:8px}
  .set{display:flex;align-items:center;gap:12px;margin-bottom:7px;font-size:13px;
       background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);
       border-radius:10px;padding:8px 12px}
  .set label{flex:1 1 auto;font-weight:800}
  .set label small{display:block;font-weight:600;opacity:.42;font-size:11px;margin-top:1px}
  .set input[type=range]{flex:0 0 min(190px,38%);accent-color:var(--gold);height:4px;cursor:pointer}
  .set input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  .set output{flex:0 0 auto;width:70px;text-align:right;font-variant-numeric:tabular-nums;font-weight:900}
  .set input[type=text]{
    flex:0 0 min(190px,44%);
    background:#080C12;border:1px solid rgba(255,255,255,.16);color:var(--paper);
    border-radius:8px;padding:7px 10px;
    font-family:var(--ui);font-weight:800;font-size:13px;letter-spacing:.04em;
  }
  .set input[type=text]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
  .sw{position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:99px;cursor:pointer;
      background:rgba(255,255,255,.14);border:1px solid rgba(0,0,0,.6);transition:background .16s ease-out}
  .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
             background:var(--paper);transition:transform .16s cubic-bezier(.2,.8,.3,1);
             box-shadow:0 2px 5px rgba(0,0,0,.5)}
  .sw[aria-checked=true]{background:linear-gradient(180deg,var(--gold-hi),#C99B33)}
  .sw[aria-checked=true]::after{transform:translateX(20px)}
  .sw:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  .chips{display:flex;gap:7px;flex-wrap:wrap}
  .chip{
    font-family:var(--ui);font-weight:900;font-size:12px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
    color:var(--paper);border-radius:8px;padding:7px 11px;transition:background .14s ease-out;
  }
  .chip:hover{background:rgba(255,255,255,.13)}
  .chip:active{transform:translateY(1px)}
  .chip.b{border-color:rgba(79,162,255,.55);color:#9CC7FF}
  .chip.r{border-color:rgba(255,95,95,.55);color:#FFA6A6}
  .acts{flex:0 0 auto;display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
        border-top:1px solid rgba(255,255,255,.09)}

  #loading{position:fixed;inset:0;display:grid;place-items:center;z-index:40;background:#05070C;
           transition:opacity .4s ease}
  #loading.hide{opacity:0;pointer-events:none}
  #loading .d{font-family:var(--display);font-size:14px;letter-spacing:.24em;color:rgba(233,196,106,.6)}

  @media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:1ms !important}}