/* ROTOR v100 — UI-only overlays. One PiP language for every panel: radius 10, thin court-blue frame, silver label above, 24 px margins.
   Zones (no overlaps): top left = venue card + tour launcher/FIELD · top right = ENTER NIGHT COURT · bottom left = tagline queue ·
   bottom right = GO TO ROTOR above the arena PiP + its two buttons. The bottom OLED row (3D) stays clear between them.
   Palette: court blue, rotor yellow, ball green, UI lime (interaction only), silver, black/navy. */
:root{--v100-blue:#043cff;--v100-yellow:#ffcf00;--v100-green:#9aff00;--v100-lime:#c7fc68;--v100-silver:#e9eef2;--v100-navy:#010b29;--v100-ease:cubic-bezier(.22,.61,.36,1);
  /* DECIDED (Jarak 2026-10-16 09:18, final): the second tagline line is UI lime #c7fc68. */
  --v100-tag-accent:#c7fc68;
  --v100-r:10px;--v100-frame:1px solid rgba(4,60,255,.85);--v100-panel:rgba(1,11,41,.66);
  /* v101 SAFE GAP (Jarak 10:30 'much more spacing, safer, no overlap, show all'): ONE minimum clearance between every
     pair of panels and the viewport edges. Panels shrink (desktop-scale) before this gap ever does. */
  --ui-gap:clamp(18px,2.2vw,36px);
  --v100-m:var(--ui-gap);--v100-gap:var(--ui-gap);
  --v100-pip-w:320px;--v100-pip-h:180px}
@media(max-width:1340px),(max-height:780px){:root{--v100-pip-w:272px;--v100-pip-h:153px;--v100-m:20px}}

/* shared PiP language */
.v100-lbl{display:flex;align-items:center;gap:8px;font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;color:var(--v100-silver);text-transform:uppercase}
.v100-lbl i{width:6px;height:6px;border-radius:50%;background:var(--v100-green)}
.v100-pip{appearance:none;display:block;position:relative;padding:0;border:var(--v100-frame);border-radius:var(--v100-r);background:#000;cursor:pointer;overflow:hidden;
  width:var(--v100-pip-w);height:var(--v100-pip-h)}
.v100-pip canvas{display:block;width:100%;height:100%}
.v100-pip:hover,.v100-pip:focus-visible{border-color:var(--v100-lime);outline:none}
.v100-btn{appearance:none;cursor:pointer;border:var(--v100-frame);border-radius:var(--v100-r);background:var(--v100-panel);color:var(--v100-silver);
  font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:11px 14px}
.v100-btn[aria-pressed=true]{background:rgba(4,60,255,.72)}
.v100-btn:hover,.v100-btn:focus-visible{border-color:var(--v100-lime);outline:none}

/* ---- bottom left: GTA tagline queue — the last 3 lines, newest at the bottom, each with its detail subtitle ---- */
/* v101 (Jarak 09:46, left-stack screenshot): one glass card PER message — the queue host is transparent; each entry is its
   own section with its own panel + gap, and the newest (GTA hero) gets NO panel so its headline never fights a back card. */
#v100Queue{position:fixed;left:var(--v100-m);bottom:var(--v100-queue-bottom,24px);z-index:40;width:min(400px,var(--v100-queue-max,calc(50vw - 2 * var(--v100-m))));padding:10px 18px 12px 14px;border-radius:12px;background:linear-gradient(90deg,#000e 0%,#000b 72%,#0000 100%); /* playrotor-angle-01 (Joey: 'text should not overlap the court'): the GTA queue sits on a dark glass plate fading out to the right, legible without hiding the glass */
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;pointer-events:none;padding:0;
  background:transparent;border:0;opacity:0;transition:opacity .9s var(--v100-ease),bottom .9s var(--v100-ease)}
#v100Queue.on{opacity:1}
#v100Queue .q{display:grid;gap:3px;opacity:0;transform:translateY(10px);transition:opacity .9s var(--v100-ease),transform .9s var(--v100-ease);
  padding:10px 14px;background:rgba(1,11,41,.78);border:var(--v100-frame);border-radius:var(--v100-r);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
#v100Queue .q:last-child{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:2px 4px;
  /* v101 sharper: tight dark shadows only (no blurry glow), antialiased DOM text, no filters/transforms on the hero at rest */
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 8px rgba(0,0,0,.6)}
#v100Queue .q h3,#v100Queue .q p,#v100Queue .q small{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#v100Queue .q.in{filter:none}
#v100Queue .q.in{opacity:1;transform:none}
#v100Queue .q.old{opacity:.5}
#v100Queue .q.older{opacity:.24}
#v100Queue .q h3{margin:0;font:800 clamp(20px,1.8vw,28px)/.92 "Barlow Condensed",Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--v100-silver)}
#v100Queue .q h3 em{font-style:normal;color:var(--v100-tag-accent)}
#v100Queue .q.old h3,#v100Queue .q.older h3{font-size:clamp(15px,1.2vw,18px)}
/* the newest line is the headline of one combined tagline unit (older lines sit above it, smaller) */
#v100Queue .q:last-child h3{font-size:clamp(28px,2.6vw,40px)}
/* in a match: small and low, clear of the scoreboard and the court action */
body.playing #v100Queue{display:flex!important;bottom:var(--v100-m);width:min(300px,30vw);padding:0;gap:6px}
body.playing #v100Queue .q:not(:last-child){display:none}
body.playing #v100Queue .q:last-child h3{font-size:18px}
body.playing #v100Queue .q p,body.playing #v100Queue .q small{display:none}
#v100Queue .q p{margin:0;font:500 13px/1.35 Inter,sans-serif;color:var(--v100-silver);opacity:.82}
#v100Queue .q small{display:flex;align-items:center;gap:8px;font:600 10px/1 Inter,sans-serif;letter-spacing:.26em;color:var(--v100-silver);opacity:.6;text-transform:uppercase}
#v100Queue .q small i{width:22px;height:2px;background:var(--v100-yellow)}
#v100Queue .q.older p,#v100Queue .q.older small,#v100Queue .q.old small{display:none}

/* ---- top left (under the venue card): STADIUM FULL TOUR + FIELD ---- */
#v100Tour{position:fixed;left:var(--v100-m);top:var(--v100-tour-top,176px);z-index:40;display:grid;gap:6px;justify-items:start}
#v100Tour>button,#v100Tour .stops button{appearance:none;cursor:pointer;border:var(--v100-frame);border-radius:var(--v100-r);background:var(--v100-panel);color:var(--v100-silver);
  font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:10px 14px;display:flex;align-items:center;gap:10px}
#v100Tour>button b{color:var(--v100-yellow);font-weight:800}
#v100Tour>button[aria-pressed=true]{background:rgba(4,60,255,.78)}
#v100Tour .stops{display:grid;gap:4px}
#v100Tour .stops[hidden]{display:none}
#v100Tour .stops button{padding:8px 12px;font-size:11px;min-width:210px;justify-content:flex-start}
#v100Tour .stops button i{font-style:normal;color:var(--v100-silver);opacity:.55;width:18px}
#v100Tour .stops button small{margin-left:auto;font:500 10px/1 Inter,sans-serif;letter-spacing:.06em;color:var(--v100-silver);opacity:.6;text-transform:none}
#v100Tour .stops button[aria-current=true]{border-color:var(--v100-yellow)}
#v100Tour .stops button[aria-current=true] i{color:var(--v100-yellow);opacity:1}
#v100Tour button:hover,#v100Tour button:focus-visible{border-color:var(--v100-lime);outline:none}

/* ---- top right: ENTER NIGHT COURT (one live view, one label) ---- */
#v100Court{position:fixed;top:var(--v100-m);right:var(--v100-m);z-index:40;display:grid;gap:7px;justify-items:end;opacity:0;pointer-events:none;
  transition:opacity .9s var(--v100-ease)}
#v100Court.on{opacity:1;pointer-events:auto}
#v100Court .v100-pip{--v100-pip-w:240px;--v100-pip-h:135px}
@media(max-height:780px){#v100Court .v100-pip{--v100-pip-w:176px;--v100-pip-h:99px}}   /* stays above the build's FREE CAM toggle */

/* ---- bottom right: GO TO ROTOR above the arena PiP; the PiP's label above it, its two buttons under it ---- */
#v100Stack{position:fixed;right:var(--v100-m);bottom:var(--v100-stack-bottom,24px);z-index:40;display:flex;flex-direction:column;align-items:stretch;gap:var(--ui-gap);
  width:var(--v100-pip-w);opacity:0;pointer-events:none;transition:opacity .9s var(--v100-ease),bottom .9s var(--v100-ease);gap:var(--ui-gap)}
#v100Stack.on{opacity:1}
/* playrotor-angle-01 (Joey: 'stuff overlapping' — the yellow LED ribbon and the 3D PLAY OPPONENT letters showed straight through the right
   stack): the stack's panels are near-black glass, not clear glass; the world stays visible between the cards, never behind the copy. */
#v100Stack .v100-btn,#v100Stack .v100-pip,#v100Stack>div,#v100Stack details{background-color:rgba(2,6,16,.94)!important;backdrop-filter:blur(10px)}
#v100Stack.on>*{pointer-events:auto}
/* v101: ENTER COURT is the primary (court-blue fill, larger); GO TO ROTOR drops to a secondary outline under it. */
#v100Enter{appearance:none;cursor:pointer;border:1px solid var(--v100-blue);border-radius:var(--v100-r);background:var(--v100-blue);color:var(--v100-silver);
  font:800 22px/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:16px 20px;min-height:52px;display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 12px 38px rgba(4,60,255,.5)}
#v100Enter i{width:14px;height:14px;border-radius:50%;border:3px solid var(--v100-yellow)}
#v100Enter:hover,#v100Enter:focus-visible{border-color:var(--v100-lime)}
#v100Enter[aria-busy=true]{cursor:progress;opacity:.8}
#v100Go{appearance:none;cursor:pointer;border:1px solid rgba(4,60,255,.85);border-radius:var(--v100-r);background:rgba(1,11,41,.66);color:var(--v100-silver);
  font:700 17px/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px}
#v100Go i{width:12px;height:12px;border-radius:50%;border:3px solid var(--v100-yellow)}
#v100Go:hover,#v100Go:focus-visible{border-color:var(--v100-lime);outline:none}
#v100Go[aria-busy=true]{cursor:progress;opacity:.8}
#v100Arena{display:grid;gap:7px}
#v100Arena .pill{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* the build's own tour PiP shared this corner (two live views doing the same job); while the v100 zones are on, the arena PiP's two
   buttons cover it (EXPLORE ARENA = the full tour, CHILL MODE = the build's slow tour). ?tourpip=1 brings it back. */
/* v102: the #rotorWorldView legacy PiP this rule parked is removed entirely (final-core.js) — rule deleted. */

/* ---- STADIUM FULL TOUR: full-viewport live takeover; minimal HUD = stop name + its GTA lines, thin progress bar, EXIT ---- */
body.v100-touring>*:not(#arena):not(#v100TourHud):not(script):not(style):not(#rotorOpeningFrame):not(#rotorOpeningVeil):not(#rotorOpeningFrameFading):not(#rotorOpeningVeilFading){opacity:0!important;pointer-events:none!important;transition:opacity .9s var(--v100-ease)}
/* playrotor-angle-01 (Joey: 'full UI only when it arrives at the rotor'): while the whole-stadium arrival sweep runs (body.rotor-arriving,
   final-core.js activateOpeningControl → the first .9 of the glide) every DOM panel is held off; it materialises once the camera is home. */
body.rotor-arriving>*:not(#arena):not(script):not(style):not(#rotorOpeningFrame):not(#rotorOpeningVeil):not(#rotorOpeningFrameFading):not(#rotorOpeningVeilFading){opacity:0!important;pointer-events:none!important;transition:opacity .9s var(--v100-ease)}
/* playrotor-angle-01 (Joey: 'READ THE SPIN and THE ROTOR mixed up with other scenes'): the ringed opening (iframe + black veil) sits ABOVE
   every body-level hide — a sweep or tour starting underneath must never punch through the four beats. */
#v100TourHud{position:fixed;inset:0;z-index:2147480;pointer-events:none;opacity:0;transition:opacity .9s var(--v100-ease);color:var(--v100-silver)}
#v100TourHud[hidden]{display:none}
#v100TourHud.on{opacity:1}
#v100TourHud .exit{position:absolute;top:var(--v100-m);right:var(--v100-m);pointer-events:auto;appearance:none;cursor:pointer;color:var(--v100-silver);
  background:rgba(1,11,41,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--v100-frame);border-radius:var(--v100-r);
  padding:11px 16px;font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em}
#v100TourHud .exit:hover,#v100TourHud .exit:focus-visible{border-color:var(--v100-lime);color:var(--v100-lime);outline:none}
/* tour layout: stop name + thin progress along the top, EXIT top-right corner, the GTA tagline as the hero in the lower third */
#v100TourHud .copy{position:static}
#v100TourHud .copy .lbl{position:absolute;left:var(--v100-m);top:calc(var(--v100-m) + 12px);font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.3em;color:var(--v100-yellow)}
#v100TourHud .copy h2{position:absolute;left:var(--v100-m);bottom:calc(var(--v100-m) + 4vh);max-width:min(760px,56vw);margin:0;padding:10px 18px 12px 16px;border-radius:12px;background:linear-gradient(90deg,#000e 0%,#000c 70%,#0000 100%);font:800 clamp(44px,5.6vw,92px)/.86 "Barlow Condensed",Impact,sans-serif; /* playrotor-angle-01 (Joey: 'white/green text should not overlap the court'): a third smaller, on a dark glass plate that fades out to the right, so it reads over the court without hiding it */
  text-transform:uppercase;letter-spacing:.005em;text-shadow:0 4px 36px rgba(0,0,0,.92)}
#v100TourHud .copy h2 span,#v100TourHud .copy h2 em{display:block;font-style:normal}
#v100TourHud .copy h2 em{color:var(--v100-tag-accent)}
#v100TourHud .copy>*{opacity:0;transform:translateX(-18px);transition:opacity .9s var(--v100-ease),transform 1.8s var(--v100-ease)}
#v100TourHud .copy.in>*{opacity:1;transform:none}
#v100TourHud .copy.in h2{transition-delay:.12s}
#v100TourHud .track{position:absolute;left:var(--v100-m);right:calc(var(--v100-m) + 110px);top:var(--v100-m);height:2px;background:rgba(233,238,242,.16);overflow:hidden}
#v100TourHud .track i{display:block;height:100%;background:var(--v100-blue);box-shadow:0 0 10px var(--v100-blue);transform-origin:0 50%;transform:scaleX(0)}
@media(prefers-reduced-motion:reduce){#v100TourHud,#v100TourHud .copy>*{transition:none!important}}

/* ---- FIELD (8841 rotor-field.js stops) ---- */
#rotorField{position:fixed;left:var(--v100-m);top:var(--v100-field-top,120px);z-index:41}
#rotorField[hidden]{display:none}

body.playing #v100Court,body.playing #v100Stack,body.playing #v100Tour,body.in-power-court #v100Court,body.in-power-court #v100Stack,body.in-power-court #v100Tour,
body.final02-landing #v100Court,body.final02-landing #v100Stack,body.final02-landing #v100Tour,body.final02-landing #v100Queue,
body.launch-title-open #v100Court,body.launch-title-open #v100Stack,body.launch-title-open #v100Queue,body.launch-title-open #v100Tour{display:none!important}

@media(prefers-reduced-motion:reduce){#v100Queue,#v100Queue .q,#v100Court,#v100Stack{transition:none!important}}

/* ================================================================
   v101 RESPONSIVE (Jarak 09:42 'completely responsive, best DOM, same in any situation')
   Fluid vars first; zones never move, only scale. Stacking order on small screens (DOM/tab order matches):
   1 court/live view (top right) → 2 primary action GO TO ROTOR → 3 arena preview + its buttons → 4 tagline queue (bottom left).
   Nothing is display:none'd for size alone; panels shrink, then the queue drops its older cards, then gaps compress.
   ================================================================ */
:root{--v100-pip-w:clamp(220px,22vw,320px);--v100-pip-h:calc(var(--v100-pip-w) * .5625)}   /* --v100-m stays var(--ui-gap) from :root (safe gap is the edge margin at every size) */
#v100Court .v100-pip{--v100-pip-w:clamp(168px,17vw,240px);--v100-pip-h:calc(var(--v100-pip-w) * .5625)}
/* v101 DESKTOP-MODE SCALE (Jarak 10:20): the full desktop composition at every size — the corner zones scale
   proportionally (--u set from JS in v100-position.js: min(vw/1440, vh/900), floored .75 so labels stay ≥ ~9px). */
#v100Stack{transform:scale(var(--u,1));transform-origin:bottom right}
#v100Court{transform:scale(var(--u,1));transform-origin:top right}
#v100Tour{transform:scale(var(--u,1));transform-origin:top left}
#v101Rail{transform:scale(var(--u,1));transform-origin:top left}
/* touch + focus: every v101 control ≥40 px tall, visible lime focus ring (interaction colour only) */
.v100-btn,#v100Tour>button,#v100Tour .stops button,#v100TourHud .exit{min-height:40px}
#v100Go{min-height:48px}
.v100-pip:focus-visible,.v100-btn:focus-visible,#v100Go:focus-visible,#v100Enter:focus-visible,#v100Tour button:focus-visible,#v100TourHud .exit:focus-visible{outline:2px solid var(--v100-lime);outline-offset:2px}
#v100Tour .stops{max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain}
/* mid: 1024–1279 and short windows — same zones, smaller PiPs, queue narrows */
@media(max-width:1279px),(max-height:780px){:root{--v100-pip-w:clamp(200px,24vw,272px)}#v100Queue{width:min(340px,var(--v100-queue-max,44vw))}}
/* short wide (e.g. 1600×600): compress gaps first, queue keeps only the hero line, tour stops scroll */
@media(max-height:640px){
  #v100Stack{gap:8px}#v100Queue{gap:6px}
  /* blanket rule: older tagline cards stay (desktop composition) — gaps compress, text shrinks, nothing vanishes */
  #v100Queue .q:last-child h3{font-size:clamp(22px,2.2vw,30px)}
  #v100Tour .stops{max-height:38vh}
}
/* tablet portrait: PiPs shrink, queue above the bottom row at 46 vw max */
@media(max-width:1023px){
  :root{--v100-pip-w:clamp(180px,30vw,240px)}
  #v100Court .v100-pip{--v100-pip-w:clamp(150px,26vw,200px)}
  #v100Queue{width:min(320px,var(--v100-queue-max,46vw))}
  #v100Tour .stops button{min-width:min(210px,52vw)}
}
/* phone portrait: defined stack — court PiP top-right compact, GO + arena bottom-right compact, queue full-width above them.
   The queue/arena JS lift (taglines/position layout) still raises both clear of the 3D bottom row; widths stop them colliding. */
@media(max-width:760px){
  :root{--v100-pip-w:min(46vw,200px)}
  #v100Court{top:var(--v100-m)}
  #v100Court .v100-pip{--v100-pip-w:min(42vw,168px)}
  #v100Court .v100-lbl{font-size:10px;letter-spacing:.14em}
  #v100Stack{width:var(--v100-pip-w)}
  #v100Queue{width:min(calc(100vw - 2 * var(--v100-m)),var(--v100-queue-max,calc(100vw - 2 * var(--v100-m))))}
  /* blanket rule: all queue cards stay visible at phone size too (narrower, smaller type — same desktop composition) */
  #v100Queue .q:last-child h3{font-size:clamp(24px,7vw,32px)}
  #v100Queue .q p{font-size:12px}
  #v100Tour{max-width:54vw}
  #v100TourHud .copy h2{font-size:clamp(40px,11vw,64px);max-width:88vw}
  #v100TourHud .track{right:var(--v100-m);top:calc(var(--v100-m) + 52px)}
}
/* zoom / coarse pointers: keep targets ≥40 px even when layout shrinks */
@media(pointer:coarse){.v100-btn,#v100Tour>button,#v100Tour .stops button{min-height:44px;padding-top:12px;padding-bottom:12px}}

/* ---- v101 EMBLEM CUSTOMIZER (modal popup; court-blue hairline, silver text, lime only on interactive/selected) ---- */
#v101Customize{min-height:40px}
#v101Emblem{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s var(--v100-ease)}
#v101Emblem[hidden]{display:none}
#v101Emblem.on{opacity:1}
#v101Emblem .emb-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
#v101Emblem .emb-panel{position:relative;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:20px 22px;
  background:rgba(1,11,41,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:var(--v100-frame);border-radius:var(--v100-r);color:var(--v100-silver)}
#v101Emblem header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#v101Emblem header small{font:600 10px/1 Inter,sans-serif;letter-spacing:.26em;color:var(--v100-silver);opacity:.65}
#v101Emblem h2{margin:6px 0 0;font:800 28px/.95 "Barlow Condensed",Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase}
#v101Emblem .emb-x{appearance:none;cursor:pointer;background:transparent;border:var(--v100-frame);border-radius:8px;color:var(--v100-silver);
  font-size:20px;line-height:1;width:40px;height:40px;flex:none}
#v101Emblem .emb-preview{display:grid;place-items:center;padding:14px 0 6px}
#v101Emblem .emb-preview svg{width:176px;height:176px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
#v101Emblem .emb-group{display:grid;gap:7px;margin-top:12px}
#v101Emblem .emb-group>span{font:700 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;color:var(--v100-silver);opacity:.75}
#v101Emblem .emb-row{display:flex;flex-wrap:wrap;gap:6px}
#v101Emblem .emb-row button,#v101Emblem .emb-btn{appearance:none;cursor:pointer;min-height:40px;padding:10px 13px;border:var(--v100-frame);border-radius:8px;
  background:rgba(1,11,41,.6);color:var(--v100-silver);font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase}
#v101Emblem .emb-row button[aria-pressed=true]{border-color:var(--v100-lime);color:var(--v100-lime)}
#v101Emblem .emb-swatches button{width:44px;padding:0;background:var(--sw)}
#v101Emblem .emb-mono{width:110px;min-height:44px;padding:10px 12px;border:var(--v100-frame);border-radius:8px;background:rgba(0,0,0,.45);
  color:var(--v100-silver);font:800 20px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase}
#v101Emblem footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
#v101Emblem .emb-apply{background:var(--v100-lime);border-color:var(--v100-lime);color:#0a1402}
#v101Emblem button:hover,#v101Emblem button:focus-visible,#v101Emblem .emb-mono:focus-visible{border-color:var(--v100-lime);outline:2px solid var(--v100-lime);outline-offset:2px}
@media(max-width:760px){#v101Emblem{align-items:stretch}#v101Emblem .emb-panel{width:100%;max-height:none;height:100dvh;border-radius:0;border:0}
  #v101Emblem .emb-preview svg{width:132px;height:132px}}

/* ---- v101 LEFT RAIL: achievements & ranks + player stats (glass cards, silver text, blue hairline; LOCKED is honest) ---- */
#v101Rail{position:fixed;left:var(--v100-m);top:var(--v101-rail-top,292px);z-index:39;width:min(288px,38vw);display:grid;gap:var(--ui-gap);
  opacity:0;pointer-events:none;transition:opacity .9s var(--v100-ease),top .9s var(--v100-ease)}
#v101Rail:not(.off){opacity:1;pointer-events:auto}
#v101Rail.off{display:none}
#v101Rail section{background:var(--v100-panel);border:var(--v100-frame);border-radius:var(--v100-r);padding:12px 14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--v100-silver)}
#v101Rail h3{margin:0 0 9px;font:800 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em}
#v101Rail h4{margin:11px 0 6px;font:700 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em;opacity:.7}
#v101Awards .aw-list{display:grid;gap:6px;max-height:30vh;overflow:auto;scrollbar-width:thin}
#v101Awards .aw-row{display:flex;align-items:center;gap:9px}
#v101Awards .aw-row canvas{width:30px;height:30px;flex:none}
#v101Awards .aw-name{font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em}
#v101Awards .aw-state{margin-left:auto;font:600 9px/1 Inter,sans-serif;letter-spacing:.18em;opacity:.55}
#v101Awards .aw-row.locked .aw-name{opacity:.75}
#v101Awards .aw-rank{display:flex;justify-content:space-between;padding:3px 0;font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.16em;opacity:.45}
#v101Awards .aw-rank.now{opacity:1;color:var(--v100-yellow)}
#v101Awards .aw-rank em{font:600 9px/1 Inter,sans-serif;font-style:normal;letter-spacing:.16em;color:var(--v100-silver)}
#v101Stats dl{margin:0;display:grid;gap:5px}
#v101Stats dl div{display:flex;justify-content:space-between;gap:10px}
#v101Stats dt{font:600 10px/1 Inter,sans-serif;letter-spacing:.2em;opacity:.6}
#v101Stats dd{margin:0;font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.12em}
@media(max-height:640px){#v101Awards .aw-list{max-height:20vh}}

/* ---- v101 RIGHT PLAYER RAIL (DOM, non-home views; green=sphere you, yellow=AI buttons context) ---- */
#v101PlayerRail{position:fixed;right:var(--v100-m);top:calc(var(--v100-m) + clamp(140px,20vh,190px));z-index:39;width:min(252px,34vw);
  background:var(--v100-panel);border:var(--v100-frame);border-radius:var(--v100-r);padding:12px 14px;color:var(--v100-silver);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:scale(var(--u,1));transform-origin:top right}
#v101PlayerRail.off{display:none}
#v101PlayerRail .pr-head{display:flex;gap:10px;align-items:center}
#v101PlayerRail .pr-head canvas{width:44px;height:44px;flex:none}
#v101PlayerRail h3{margin:0;font:800 20px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em}
#v101PlayerRail .pr-rank{display:inline-block;margin-top:4px;padding:2px 7px;border:1px solid var(--v100-blue);border-radius:6px;
  font:700 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;color:var(--v100-yellow)}
#v101PlayerRail .pr-head small{display:block;margin-top:4px;font:600 9px/1 Inter,sans-serif;letter-spacing:.18em;opacity:.65}
#v101PlayerRail .pr-btns{display:grid;gap:6px;margin-top:11px}
#v101PlayerRail .pr-btns button{appearance:none;cursor:pointer;min-height:40px;padding:8px 10px;text-align:left;border:var(--v100-frame);border-radius:8px;
  background:rgba(1,11,41,.6);color:var(--v100-silver);font:700 13px/1.15 "Barlow Condensed",sans-serif;letter-spacing:.14em}
#v101PlayerRail .pr-btns button span{float:right;font-size:10px;color:var(--v100-yellow)}
#v101PlayerRail .pr-btns button small{display:block;font:600 8.5px/1 Inter,sans-serif;letter-spacing:.16em;opacity:.6;margin-top:3px}
#v101PlayerRail .pr-btns button:hover,#v101PlayerRail .pr-btns button:focus-visible{border-color:var(--v100-lime);outline:2px solid var(--v100-lime);outline-offset:2px}
/* movable grips (v101-movable.js) */
.ui-grip{position:absolute;top:4px;right:4px;width:36px;height:28px;appearance:none;cursor:grab;border:1px solid rgba(4,60,255,.7);border-radius:6px;
  background:rgba(1,11,41,.72);color:var(--v100-silver);font-size:13px;line-height:1;z-index:60;touch-action:none}
.ui-grip:active{cursor:grabbing}
.ui-grip:focus-visible{outline:2px solid var(--v100-lime);outline-offset:2px}
.ui-movable{position:fixed!important}
#v101ResetLayout{position:fixed;top:var(--v100-m);left:50%;transform:translateX(-50%);z-index:45;min-height:32px;padding:7px 12px;
  appearance:none;cursor:pointer;border:var(--v100-frame);border-radius:8px;background:var(--v100-panel);color:var(--v100-silver);
  font:700 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em}
#v101ResetLayout:focus-visible{outline:2px solid var(--v100-lime);outline-offset:2px}
#v100Queue .ui-grip{pointer-events:auto}

/* v101 left rail redesign: awards as a gallery GRID of badge cells; stats as colour meters (honest values) */
#v101Awards .aw-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:32vh;overflow:auto;scrollbar-width:thin}
#v101Awards .aw-cell{display:grid;justify-items:center;gap:3px;padding:7px 2px 6px;border:1px solid rgba(4,60,255,.45);border-radius:8px;background:rgba(0,0,0,.28);text-align:center}
#v101Awards .aw-cell canvas{width:40px;height:40px}
#v101Awards .aw-cell .aw-name{font:700 10px/1.05 "Barlow Condensed",sans-serif;letter-spacing:.1em}
#v101Awards .aw-cell .aw-state{margin:0;font:600 8px/1 Inter,sans-serif;letter-spacing:.16em;opacity:.55}
#v101Stats .st-row{display:flex;justify-content:space-between;margin-bottom:6px;font:600 10px/1 Inter,sans-serif;letter-spacing:.18em}
#v101Stats .st-row b{font:800 14px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;color:var(--v100-silver)}
#v101Stats .st-meter{display:grid;gap:4px;margin-top:9px;font:600 9px/1 Inter,sans-serif;letter-spacing:.16em;opacity:.95}
#v101Stats .st-meter i{display:block;height:8px;border-radius:4px;background:rgba(233,238,242,.14);overflow:hidden}
#v101Stats .st-meter u{display:block;height:100%;width:0;border-radius:4px;background:var(--v100-blue);text-decoration:none;transition:width .9s var(--v100-ease)}
#v101Stats .m-progress{background:var(--v100-yellow)}
#v101Stats .m-wins{background:var(--v100-green)}
#v101Stats .m-rate{background:rgba(233,238,242,.35)}

/* ---- v101 SMOKY BUFFER BARS (top/bottom sizing buffers; greyed smoked glass, hairline edges, behind panels) ---- */
#v101BarTop,#v101BarBot{position:fixed;left:0;right:0;height:clamp(34px,6vh,64px);z-index:30;pointer-events:none;
  background:linear-gradient(rgba(16,19,24,.62),rgba(10,12,16,.55));-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
#v101BarTop{top:0;border-bottom:1px solid rgba(233,238,242,.16)}
#v101BarBot{bottom:0;border-top:1px solid rgba(233,238,242,.16);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--v100-m);font:600 10px/1 Inter,sans-serif;letter-spacing:.24em;color:var(--v100-silver)}
#v101BarBot .bar-right{display:flex;gap:var(--ui-gap);align-items:center}
#v101BarBot .bar-sound{pointer-events:auto;appearance:none;cursor:pointer;background:transparent;border:0;color:inherit;
  font:inherit;letter-spacing:inherit;min-height:32px;padding:6px 2px}
#v101BarBot .bar-sound:hover,#v101BarBot .bar-sound:focus-visible{color:var(--v100-lime);outline:none}
body.playing #v101BarBot .bar-ctl,body.in-power-court #v101BarBot .bar-ctl{opacity:.45}

/* tour HUD destination nav (glass, tracked caps, always visible during the tour) */
#v100TourHud .tournav{position:absolute;right:var(--v100-m);bottom:var(--v100-m);display:flex;gap:8px;pointer-events:auto}
#v100TourHud .tournav button{appearance:none;cursor:pointer;min-height:44px;padding:12px 18px;color:var(--v100-silver);
  background:rgba(1,11,41,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--v100-frame);border-radius:var(--v100-r);
  font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em}
#v100TourHud .tournav button:first-child{background:var(--v100-blue)}
#v100TourHud .tournav button:hover,#v100TourHud .tournav button:focus-visible{border-color:var(--v100-lime);outline:2px solid var(--v100-lime);outline-offset:2px}

/* left rail never reaches the tagline zone: internal scroll, bottom reserve = queue height + safe gap */
#v101Rail{max-height:max(190px,calc(100dvh - var(--v101-rail-top,292px) - 320px));overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}

/* v102 single-slot tagline: outgoing card crossfades in the same slot, then is removed — never a stack */
#v100Queue .q.leaving{position:absolute;left:0;bottom:0;width:100%;opacity:0!important;pointer-events:none}

/* v102 glass families for messaging: queue rotation cards alternate house materials (blue-hairline glass / smoky grey) */
#v100Queue .q.smoke{background:rgba(12,14,18,.8);border-color:rgba(233,238,242,.28)}
/* AAA badge motion: slow chrome sheen sweep across award cells (transform only, no layout cost) */
#v101Awards .aw-cell{position:relative;overflow:hidden}
#v101Awards .aw-cell::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  transform:translateX(-70%);animation:awSheen 7s cubic-bezier(.22,.61,.36,1) infinite}
#v101Awards .aw-cell:nth-child(2)::after{animation-delay:1.2s}#v101Awards .aw-cell:nth-child(3)::after{animation-delay:2.4s}
#v101Awards .aw-cell:nth-child(4)::after{animation-delay:3.6s}#v101Awards .aw-cell:nth-child(5)::after{animation-delay:4.8s}
@keyframes awSheen{0%,72%{transform:translateX(-70%)}88%,100%{transform:translateX(70%)}}
@media(prefers-reduced-motion:reduce){#v101Awards .aw-cell::after{animation:none}}

/* v102 FIT RULE (Jarak 11:07): the whole composition fits the viewport at once — shell overflow locked (not by
   cutting content: the coordinated --u scale shrinks panels before anything wraps, scrolls, or leaves). */
html,body{overflow:hidden!important;overscroll-behavior:none}
#v101Rail{overflow-y:auto} /* panel-internal only; the page itself never scrolls */

/* v102 rail compaction: everything in the left rail fits its cap at 900px height — no internal scroll needed */
#v101Awards .aw-cell canvas{width:30px;height:30px}
#v101Awards .aw-cell{padding:5px 1px 4px;gap:2px}
#v101Awards .aw-ranks{display:flex;flex-wrap:wrap;gap:3px 10px}
#v101Awards .aw-rank{padding:1px 0}
#v101Stats .st-meter{margin-top:6px}
#v101Rail section{padding:9px 11px}
#v101Rail h3{margin-bottom:6px}

/* ---- v102 FULL INTRO PiP (left column, under the tour launcher; left rail stacks below it) ---- */
#v100Intro{position:fixed;left:var(--v100-m);top:calc(var(--v100-tour-top,159px) + 118px);z-index:40;display:grid;gap:7px;justify-items:start;
  opacity:0;pointer-events:none;transform:scale(var(--u,1));transform-origin:top left;transition:opacity .9s var(--v100-ease)}
#v100Intro.on{opacity:1}
#v100Intro.on .v100-pip{pointer-events:auto}
#v100Intro .pip-phase{position:absolute;left:8px;bottom:6px;padding:3px 8px;border:1px solid rgba(4,60,255,.85);border-radius:6px;
  background:rgba(1,11,41,.72);color:var(--v100-silver);font:700 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.22em}

/* ---- v102 AAA panel polish (screenshot 11:16): ranks as chips, premium meters, cinematic messaging card ---- */
#v101Awards .aw-ranks{display:flex;flex-wrap:wrap;gap:5px}
#v101Awards .aw-rank{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(4,60,255,.5);border-radius:999px;opacity:.55}
#v101Awards .aw-rank.now{opacity:1;border-color:var(--v100-yellow);color:var(--v100-yellow)}
#v101Awards .aw-rank em{padding:2px 6px;border-radius:999px;background:var(--v100-yellow);color:#141002;font:700 8px/1 Inter,sans-serif;letter-spacing:.14em}
#v101Awards .aw-cell{border-color:rgba(4,60,255,.55);background:linear-gradient(180deg,rgba(4,26,80,.5),rgba(0,0,0,.32))}
#v101Stats .st-meter i{height:10px;border-radius:5px;background:rgba(233,238,242,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),inset 0 -1px 0 rgba(233,238,242,.14)}
#v101Stats .st-meter u{box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#v101Stats .st-meter span{display:flex;justify-content:space-between}
#v101Stats .st-meter b{font:800 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;color:var(--v100-silver)}
#v100Queue .q{padding:12px 16px}
#v100Queue .q:last-child{padding:4px 6px}
#v100Queue .q p{line-height:1.5}
#v100Queue .q small{letter-spacing:.3em}
#v100Queue .q:not(:last-child){background:rgba(3,9,26,.82)}

/* top border identity kickers: small tracked caps in the border's negative space */
#v101BarTop{display:flex;align-items:center;justify-content:space-between;padding:0 var(--v100-m);
  font:600 9px/1 Inter,sans-serif;letter-spacing:.3em;color:var(--v100-silver);opacity:1}
#v101BarTop span{opacity:.55}
body:not(.hud-ready) #v101BarTop span,body:not(.hud-ready) #v101BarBot .bar-ctl,body:not(.hud-ready) #v101BarBot .bar-right{opacity:0}

/* rail pagination (no internal scrolling anywhere) */
#v101Rail{overflow:hidden}
#v101Rail.tight section.slot-off{display:none}
#v101Awards .aw-list{overflow:hidden}

/* GREEN ROOM bottom button: lime LIVE dot is sanctioned (available interaction); soft 2.4 s pulse, never a strobe */
#v101GreenRoom{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px}
#v101GreenRoom .gr-dot{width:8px;height:8px;border-radius:50%;background:var(--v100-lime);box-shadow:0 0 8px var(--v100-lime);animation:grPulse 2.4s ease-in-out infinite}
#v101GreenRoom em{font:700 9px/1 Inter,sans-serif;font-style:normal;letter-spacing:.22em;color:var(--v100-lime)}
@keyframes grPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#v101GreenRoom .gr-dot{animation:none}}
/* v102 smaller refined tags: little labels/kickers/border status step down a scale (still >= 8.5px, fit one line) */
.v100-lbl{font-size:10.5px}
#v100Intro .pip-phase{font-size:9px}
#v101BarBot{font-size:9px}
#v100Queue .q small{font-size:9px}
#v101Awards .aw-state{font-size:8.5px}
#v101Stats dt{font-size:9px}
#v100TourHud .copy .lbl{font-size:11px}
/* bottom-left GTA block: utmost spacing rhythm — one aligned left edge, deliberate leading/gaps */
#v100Queue .q{gap:0}
#v100Queue .q h3{line-height:.94}
#v100Queue .q p{margin-top:7px;line-height:1.5}
#v100Queue .q small{margin-top:9px}
#v100Queue .q{padding:14px 18px}

/* v102 responsive spec: dynamic viewport units, aspect reserves, safe-area, fluid GTA type */
#v101BarTop,#v101BarBot{height:clamp(34px,6dvh,64px)}
#v101BarBot{padding-left:max(var(--v100-m),env(safe-area-inset-left));padding-right:max(var(--v100-m),env(safe-area-inset-right))}
.v100-pip{aspect-ratio:16/9}
html{scrollbar-gutter:stable}
/* GTA block: house type locked in, tighter tracking, yellow rule on the hero, premium clear glass */
#v100Queue .q h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;letter-spacing:.012em}
#v100Queue .q p{font-family:Inter,sans-serif;letter-spacing:.01em}
#v100Queue .q small{font-family:Inter,sans-serif}
#v100Queue .q:last-child{border-left:3px solid var(--v100-yellow);border-radius:2px;padding-left:14px}
#v100Queue .q:not(:last-child){-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#v101BarBot .bar-mid{letter-spacing:.34em;opacity:.8}
body:not(.hud-ready) #v101BarBot .bar-mid{opacity:0}
/* chrome detail on the border bands: hairline chrome edge + end brackets */
#v101BarTop{border-bottom:1px solid rgba(233,238,242,.35);box-shadow:0 1px 0 rgba(4,60,255,.35)}
#v101BarBot{border-top:1px solid rgba(233,238,242,.35);box-shadow:0 -1px 0 rgba(4,60,255,.35)}

/* v102 compact ranking: gallery + ladder mount only while expanded (sheen paused when collapsed = zero cost) */
#v101Awards .aw-head{display:flex;justify-content:space-between;align-items:center}
#v101Awards .aw-head h3{margin:0}
#v101Awards .aw-viewall{appearance:none;cursor:pointer;min-height:32px;padding:7px 10px;border:var(--v100-frame);border-radius:7px;background:rgba(1,11,41,.6);
  color:var(--v100-silver);font:700 10px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em}
#v101Awards .aw-viewall:hover,#v101Awards .aw-viewall:focus-visible{border-color:var(--v100-lime);outline:2px solid var(--v100-lime);outline-offset:2px}
#v101Awards .aw-compact{display:grid;gap:5px;margin-top:8px}
#v101Awards .awc-rank{font:800 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.08em;color:var(--v100-yellow)}
#v101Awards .awc-track{display:block;height:8px;border-radius:4px;background:rgba(233,238,242,.12);overflow:hidden}
#v101Awards .awc-bar{display:block;height:100%;background:var(--v100-yellow);text-decoration:none}
#v101Awards .awc-next{font:600 9px/1 Inter,sans-serif;letter-spacing:.18em;opacity:.65}
#v101Awards .aw-list,#v101Awards .aw-ranks,#v101Awards h4{display:none}
#v101Awards.open .aw-list{display:grid}
#v101Awards.open .aw-ranks{display:flex}
#v101Awards.open h4{display:block}
#v101Awards:not(.open) .aw-cell::after{animation-play-state:paused}

/* one animated badge only: sheen runs on the single .live cell, paused everywhere else */
#v101Awards .aw-cell::after{animation:none}
#v101Awards .aw-cell.live::after{animation:awSheen 7s cubic-bezier(.22,.61,.36,1) infinite}