/* ===== Mobile-landscape optimized | Exit Gate auto-positions under Chase ===== */
:root{
  --bg:#0b0f14;
  --panel:#0f151d;
  --grid:#243244;
  --lane:#0f1b27;
  --lane-line:#2c3b50;

  --col-gap:clamp(.4vw,.8vw,1vw);
  --lane-pad:.5px;
  --slots-per-side:10;
  --slot-h:clamp(12px,1.9vh,18px);
  --slot-max-w:42%;
  --median-gap:clamp(1px,.35vw,4px);

  --stage-w:clamp(640px,92vw,1200px);

  --chase-offset:clamp(16px,2.8vh,28px);

  --car:#5ec0f3;
  --chase:#4ee0b0;
  --walker:#ffd166;

  /* Left anchor for gate; top is computed in JS */
  --gate-left:clamp(180px,40vw,520px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#dbe7f3;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;overscroll-behavior:none}
.t1-app{height:100svh;height:100vh;width:100vw;overflow:hidden;display:grid;grid-template-columns:1fr}
.center-col{height:100%;position:relative;background:var(--panel);border:1px solid var(--grid);border-radius:16px;padding:clamp(6px,1.0vw,14px);display:grid;grid-template-rows:auto 1fr;row-gap:clamp(4px,.6vw,10px);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 30px rgba(0,0,0,.35)}
.stage{width:var(--stage-w);max-width:100%;margin-inline:auto;position:relative}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--col-gap)}
.brand-row{align-items:center}
.brand-cell{display:flex;align-items:center;justify-content:center}
.brand{border-radius:999px;padding:clamp(4px,.55vw,10px) clamp(8px,1.0vw,14px);font-weight:800;letter-spacing:.04em;border:1px solid var(--grid);font-size:clamp(10px,.9vw,16px);color:#e5f3ef;background:#0a2a1d;white-space:nowrap}
.brand.emeraldclub{background:#0c5e42}.brand.executive{background:#0e6a37}.brand.national{background:#0b5c42}.brand.enterprise{background:#124e2b}.brand.alamo{background:#124bcb;color:#ffcc00}

.lane-grid{margin-top:clamp(4px,.6vw,10px);display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--col-gap);row-gap:var(--col-gap);align-items:start}
.lane{background:var(--lane);border:1px dashed var(--lane-line);border-radius:12px;padding:var(--lane-pad);box-shadow:inset 0 0 0 2px rgba(255,255,255,.03);min-height:0}
.lane-inner{display:grid;grid-template-columns:1fr var(--median-gap) 1fr;column-gap:var(--median-gap);align-items:center}
.median{width:100%;height:100%;border-right:2px dashed #2b4c72;opacity:.45;transform:translateX(1px)}
.bank{display:grid;grid-template-rows:repeat(var(--slots-per-side),1fr);row-gap:clamp(4px,1vh,8px);align-items:center;justify-items:center}
.slot{height:var(--slot-h);width:100%;max-width:var(--slot-max-w);border-radius:999px;background:rgba(232,241,252,.08);border:1px solid rgba(208,225,244,.55)}
.slot.hidden-slot{opacity:0}

.overlay-grid{margin-top:clamp(2px,.4vw,6px);display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--col-gap);position:relative}
.chase-park{margin-inline:auto;margin-top:var(--chase-offset);width:16px;height:70px;border-radius:10px;border:1px solid rgba(208,225,244,.55);background:rgba(232,241,252,.08);display:flex;align-items:center;justify-content:center}
.chase-park span{font-size:10px;color:#9fb3c8;letter-spacing:.06em;transform:rotate(-90deg)}

.entry-cluster.inside{position:absolute;right:clamp(6px,1vw,12px);bottom:clamp(6px,1vw,12px);display:flex;flex-direction:row;align-items:center;gap:.45rem}
.plaque{text-transform:uppercase;letter-spacing:.08em;font-weight:800;border-radius:12px;padding:.18rem .42rem;text-align:center;border:1px solid var(--grid);font-size:clamp(9px,.75vw,12px)}
.entry-pill{background:#0f1b27;color:#bfe7d2}
.scan{background:#1a1824;color:#c8b7ff}

/* SHORT Exit Gate: position absolute; LEFT via CSS var; TOP computed in JS */
.gate-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.35rem .45rem;border:1px solid var(--grid);border-radius:12px;background:#0e141b;width:max-content}
.gate-svg{width:60px;height:auto;display:block}
.gate-svg.mirror{transform:scaleX(-1)}
.gate-arm{fill:#9fb3c8;transform-origin:8px 40px;transition:transform 400ms ease}
.gate-card.open .gate-arm{transform:rotate(-70deg)}
.gate-pivot{fill:#d2dee9}
.gate-label{font-size:clamp(9px,.75vw,13px);color:#88a0b8;letter-spacing:.06em}
.gate-floating{position:absolute;left:var(--gate-left);} /* top set in JS */

/* Tokens / walker / debug */
.tokens{position:absolute;inset:0;pointer-events:none;z-index:10}
.token{position:absolute;left:0;top:0;transform:translate(-9999px,-9999px);padding:.18rem .42rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);font-size:11px;letter-spacing:.04em;display:flex;align-items:center;gap:.35rem;transition:transform 600ms cubic-bezier(.25,.8,.25,1)}
.token.car{color:#cfefff;border-color:rgba(120,200,255,.35);background:#0f2232}
.token.chase{color:#cfffe7;border-color:rgba(120,255,210,.35);background:#0e2d24}
.token.slot-fit{padding:0;border-radius:999px;font-size:0;border:none;box-shadow:none;background:#5ec0f3}
.walker{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffd166;box-shadow:0 0 10px rgba(255,209,102,.5);transform:translate(-9999px,-9999px);transition:transform 650ms linear}

.debug{position:fixed;left:8px;bottom:8px;padding:.25rem .5rem;background:#1b2430;border:1px solid #334155;border-radius:8px;font:12px/1.2 ui-monospace,Menlo,Consolas;color:#cbd5e1;z-index:9999;opacity:.9}
.noscript{position:fixed;top:8px;left:8px;background:#3b82f6;color:#fff;padding:.25rem .5rem;border-radius:6px;font:12px/1.2 ui-sans-serif}

@media (orientation: landscape) and (max-height: 420px){
  .brand{font-size:10px;padding:4px 8px}
  .grid-5{column-gap:clamp(2px,.5vw,8px)}
  .bank{row-gap:4px}
  :root{ --slot-h:12px; --chase-offset:14px; }
  .gate-svg{width:52px}
  .debug{display:none}
}