/* =========================================================
   PAGES — hero · home blocks · contracts · trophies · arsenal · cantina
   ========================================================= */

/* ================= HERO: a dark room, light only from the hologram and the visor ================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--nav-h) + 50px) 0 40px; }
.hero-bg { position: absolute; inset: 0; background: center bottom / cover no-repeat; opacity: 0; transition: opacity .8s; }
.hero-bg.has-bg { opacity: 1; }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(360px, .8fr) 1.2fr; align-items: center; gap: 10px; }
.copy { max-width: 520px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; color: var(--sand); text-transform: uppercase; margin-bottom: 22px; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); flex: none; }
.hero .lead { margin: 22px 0 30px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.record { display: flex; gap: 28px; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }
.record b { display: block; font: 700 26px/1 var(--f-display); margin-bottom: 6px; }
.record span { font: 500 12px/1.4 var(--f-mono); color: var(--mute); }

.scene { position: relative; height: min(78vh, 720px); min-height: 540px; }
.wall-glow { position: absolute; left: 36%; top: 4%; width: 620px; height: 620px; margin-left: -310px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--h), .14), rgba(var(--v), .06) 45%, transparent 65%); animation: flick 5s infinite; }
.table { position: absolute; left: -8%; right: -14%; bottom: -60px; height: calc(36% + 60px);
  background: linear-gradient(180deg, #221a16 0, #130e0c 25%, #0b0807 100%); clip-path: polygon(9% 0, 93% 0, 100% 100%, 0 100%); }
.table::before { content: ""; position: absolute; inset: 0; opacity: .4; background: repeating-linear-gradient(100deg, transparent 0 60px, rgba(255, 255, 255, .03) 60px 61px); }
.table::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent 10%, rgba(var(--h), .35) 36%, rgba(255, 60, 50, .25) 70%, transparent 92%); }
.hero-bg.has-bg ~ .hero-grid .table { display: none; }   /* the real room picture has its own table */
.pool { position: absolute; border-radius: 50%; pointer-events: none; }
.pool-holo { left: 36%; bottom: 22%; width: 440px; height: 120px; margin-left: -220px; background: radial-gradient(ellipse, rgba(var(--h), .4), rgba(var(--v), .12) 50%, transparent 72%); animation: flick 5s infinite; }
.pool-red { left: 70%; bottom: 8%; width: 320px; height: 70px; margin-left: -160px; background: radial-gradient(ellipse, rgba(255, 40, 40, .3), transparent 70%); animation: visor 4s infinite; }

.beam { position: absolute; left: 36%; bottom: calc(24% + 30px); width: 480px; height: 230px; margin-left: -240px; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--h), .5), rgba(var(--v), .22) 60%, rgba(var(--v), .03)); clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); filter: blur(2px); animation: flick 5s infinite; }
.holo { position: absolute; left: 36%; bottom: calc(24% + 250px); width: 480px; margin-left: -240px; z-index: 4; padding: 18px 20px 20px;
  font-family: var(--f-mono); color: var(--holo-ink); border: 1px solid rgba(var(--h2), .55); border-radius: 6px;
  background: linear-gradient(135deg, rgba(var(--h), .18), rgba(var(--v), .10));
  border-right-color: rgba(var(--v), .6); border-bottom-color: rgba(var(--v), .6);
  box-shadow: -14px -8px 44px -10px rgba(var(--h), .45), 14px 12px 44px -10px rgba(var(--v), .45), inset 0 0 30px rgba(var(--h), .15); animation: flick 5s infinite, jitter 7s infinite; }
.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(var(--h2), .10) 0 1px, transparent 1px 3px); }
.holo .glitch { position: absolute; left: 0; right: 0; height: 14px; background: rgba(var(--h2), .16); top: 30%; animation: glitch 3.4s linear infinite; pointer-events: none; }
@keyframes jitter { 0%, 94%, 100% { translate: 0 0; } 95% { translate: 3px 0; } 96% { translate: -4px 0; } 97% { translate: 0 0; } }
@keyframes glitch { 0% { top: -10%; } 100% { top: 110%; } }
.feed-card { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; transition: opacity .35s, filter .35s, transform .35s; }
.feed-card.out { opacity: 0; filter: blur(5px); transform: scaleY(.2); }
.feed-card.in { opacity: 0; filter: blur(5px) brightness(2); transform: scaleY(1.4); }
.c-no { font-size: 11px; letter-spacing: .16em; color: var(--holo-mute); }
.c-name { margin: 6px 0 12px; font: 700 22px/1.1 var(--f-display); color: var(--holo-hi); text-shadow: 0 0 16px rgba(var(--h), .8); }
.c-bar { margin-top: 12px; height: 3px; background: rgba(var(--h2), .15); overflow: hidden; }
.c-bar i { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 10px var(--holo); transition: width .9s ease-out; }

.prop { position: absolute; }
.prop svg, .prop img { width: 100%; height: auto; }
.scene .projector { left: 36%; bottom: 24%; width: 150px; margin-left: -75px; z-index: 3; }
.scene .helmet { left: 70%; bottom: 11%; width: 290px; margin-left: -145px; z-index: 5; filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .8)); }
.scene .tracker { left: 46%; bottom: 6%; width: 84px; z-index: 6; transform: rotate(-14deg); filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .8)); }
.scene .blaster { left: 76%; bottom: 1%; width: 300px; margin-left: -150px; z-index: 6; transform: rotate(-4deg); filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .85)); }
.scene .prop.has-img { transform: none; }
/* real pictures — placed as on Vlad's sketch: tracker · helmet · blaster on the right */
.scene .helmet.has-img { left: 95%; width: 220px; margin-left: -110px; bottom: 26%; z-index: 5;
  filter: drop-shadow(0 18px 14px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(255,40,40,.28)); }
.scene .tracker.has-img { left: 70%;  width: 104px; margin-left: -52px; bottom: 29%; transform: none; z-index: 4;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.85)) drop-shadow(-6px -4px 14px rgba(var(--h), .35)); }
.scene .blaster.has-img { left: 85%; width: 230px; margin-left: -115px; bottom: 14%; transform: rotate(-2deg); z-index: 6;
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.9)) drop-shadow(-8px -6px 16px rgba(var(--h), .3)); }
.scene .projector.has-img { width: 180px; margin-left: -90px; bottom: 22%; }
.pool-red { left: 94%; bottom: 24%; width: 260px; margin-left: -130px; }
/* the right half of the room falls into shadow — only the visor and the hologram light it */
.hero-bg.has-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 24% 22% at 59% 72%, rgba(var(--h), .38), rgba(var(--v), .14) 55%, transparent 75%),   /* hologram light on the table */
    radial-gradient(ellipse 28% 40% at 98% 16%, rgba(var(--v), .26), transparent 70%),                          /* off-screen blue neon */
    radial-gradient(ellipse 16% 18% at 90% 62%, rgba(255, 40, 40, .16), transparent 70%),                       /* visor glow */
    linear-gradient(0deg, rgba(10, 8, 16, .5), transparent 22%); }
/* night falls only on the right half (where the props are): desaturate + darken + cold tint */
.hero-night { position: absolute; inset: 0 0 0 44%; pointer-events: none;
  backdrop-filter: grayscale(.85) brightness(.55) contrast(1.15); -webkit-backdrop-filter: grayscale(.85) brightness(.55) contrast(1.15);
  background: linear-gradient(90deg, rgba(20, 12, 50, 0), rgba(20, 12, 50, .35) 40%, rgba(12, 8, 30, .5));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }                               /* night tint: cold violet, no teal */
.cap-frame.has-img img { object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0,0,0,.7)); }

/* ================= HOME BLOCKS ================= */
.block { padding: 90px 0 0; }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.block-head .lead { margin-top: 12px; }

.bot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bot-card { display: grid; justify-items: start; gap: 10px; padding: 18px; text-align: left; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.bot-card:hover { transform: translateY(-4px); box-shadow: 0 0 44px -4px rgba(var(--h), .5), inset 0 0 26px rgba(var(--h), .14); }
.bc-code { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; color: var(--holo-mute); }
.bc-name { font: 700 17px/1.15 var(--f-display); color: var(--holo-hi); text-shadow: 0 0 14px rgba(var(--h), .6); }
.bc-title { font-size: 14px; color: var(--ink2); min-height: 2.6em; }
.bc-price { font: 700 18px/1 var(--f-display); color: var(--holo); }

.cap-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.hunt-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hunt-col h2 { margin-bottom: 26px; }
.hunt { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.hunt li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--v), .10), rgba(var(--h), .05) 60%, transparent); }
.hunt .hn { font: 700 22px/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-top: 2px; }
.hunt b { display: block; margin-bottom: 4px; font: 700 18px/1.2 var(--f-display); }
.hunt p { color: var(--ink2); font-size: 15px; }
.hunter { position: relative; margin: 0; }
.hunter-img { position: relative; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 60% 40%, rgba(var(--v), .22), transparent 60%), radial-gradient(ellipse at 30% 80%, rgba(var(--h), .2), transparent 60%), #120e19; border: 1px solid var(--line); }
.hunter-img svg, .hunter-img img { width: 100%; height: 100%; object-fit: cover; }
.hunter-tag { position: absolute; left: 18px; bottom: 18px; display: grid; gap: 4px; padding: 12px 16px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; color: var(--holo-mute); }
.hunter-tag b { font: 700 18px/1.1 var(--f-display); letter-spacing: 0; color: var(--holo-hi); }
.hunter-tag small { font: 400 12px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--holo-ink); }

/* rumor board: futuristic news screen */
.news-screen { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #2a2338; background: #0b0910;
  box-shadow: 0 0 0 6px #17121f, 0 30px 60px -30px #000, -16px -8px 50px -20px rgba(var(--v), .35), 16px 10px 50px -20px rgba(var(--h), .35); }
.news-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 0%, rgba(var(--h), .10), transparent 60%); }
.ns-head { display: flex; justify-content: space-between; padding: 12px 20px; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; color: #fff; background: var(--grad); }
.ns-body { display: grid; grid-template-columns: 1fr 1.3fr; min-height: 300px; }
.ns-list { list-style: none; border-right: 1px solid rgba(var(--h), .25); max-height: 340px; overflow: auto; scrollbar-width: thin; }
.ns-list li { padding: 14px 20px; cursor: pointer; font: 600 15px/1.35 var(--f-sans); color: var(--ink2); border-bottom: 1px solid rgba(255,255,255,.05); transition: .2s; }
.ns-list li:hover { color: var(--ink); background: rgba(var(--h), .06); }
.ns-list li.on { color: var(--holo-hi); background: linear-gradient(90deg, rgba(var(--v), .22), rgba(var(--h), .12)); box-shadow: inset 3px 0 0 var(--holo); }
.ns-k { display: block; font: 600 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--holo-mute); margin-bottom: 6px; }
.ns-main { padding: 26px 30px; font-family: var(--f-mono); }
.ns-main h3 { font: 700 clamp(20px, 2vw, 28px)/1.15 var(--f-display); color: var(--holo-hi); text-shadow: 0 0 18px rgba(var(--h), .55); margin-bottom: 14px; }
.ns-main p { font: 400 15px/1.6 var(--f-mono); color: var(--holo-ink); margin-bottom: 14px; }
.ns-ticker { display: flex; align-items: center; border-top: 1px solid rgba(var(--h), .3); background: rgba(var(--v), .08); }
.ns-tk-l { flex: none; padding: 10px 14px; font: 700 11px/1 var(--f-mono); letter-spacing: .16em; color: #fff; background: rgba(var(--h), .35); }
.ns-tk { overflow: hidden; flex: 1; }
.ns-tk-in { display: flex; gap: 40px; width: max-content; padding: 10px 0; font: 500 13px/1 var(--f-mono); color: var(--holo-ink); white-space: nowrap; animation: tick 40s linear infinite; }
.ns-tk:hover .ns-tk-in { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }

.final { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 28px 34px; }
.final .lead { margin-top: 8px; }
.prop.mini { position: relative; width: 120px; }

/* bots for hire: hologram carousel, each card floats over its projector */
.bot-carousel { position: relative; }
.bcar-stage { position: relative; height: 470px; touch-action: pan-y; user-select: none; overflow-x: clip; overflow-y: visible; }
.bcar-slide { position: absolute; left: 50%; bottom: 0; width: 280px; margin-left: -140px; display: grid; justify-items: center; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; }
.bcar-slide .bot-card { width: 100%; animation: flick 6s infinite; }
.bcar-beam { width: 240px; height: 90px; margin-top: -6px; background: linear-gradient(0deg, rgba(var(--h), .5), rgba(var(--v), .05)); clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); filter: blur(1.5px); }
.bcar-proj { width: 150px; margin-top: -8px; }
.bcar-proj svg, .bcar-proj img { width: 100%; height: auto; }
.bcar-proj.has-img img { filter: hue-rotate(-55deg) saturate(1.3) brightness(.95); }
.bcar-slide[data-pos="0"] { transform: none; z-index: 3; }
.bcar-slide[data-pos="1"] { transform: translateX(300px) scale(.8); opacity: .55; filter: blur(1px) saturate(.7); z-index: 2; }
.bcar-slide[data-pos="-1"] { transform: translateX(-300px) scale(.8); opacity: .55; filter: blur(1px) saturate(.7); z-index: 2; }
.bcar-slide[data-pos="2"] { transform: translateX(530px) scale(.62); opacity: .22; filter: blur(2px); z-index: 1; }
.bcar-slide[data-pos="-2"] { transform: translateX(-530px) scale(.62); opacity: .22; filter: blur(2px); z-index: 1; }
.bcar-slide[data-pos="off"] { transform: scale(.4); opacity: 0; pointer-events: none; }
.bcar-slide:not([data-pos="0"]) { cursor: pointer; }
.bcar-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.bcar-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; color: var(--ink); }
.bcar-btn:hover { border-color: rgba(var(--h), .6); }
.bcar-dots { display: flex; gap: 8px; }
.bcar-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); padding: 0; }
.bcar-dots button.on { background: var(--grad); width: 26px; border-radius: 6px; }

/* ================= CONTRACTS: the bounty terminal ================= */
.terminal { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
.bot-list { display: grid; gap: 8px; }
.bot-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); text-align: left; background: rgba(20, 13, 10, .6); transition: .2s; }
.bot-row:hover { border-color: rgba(var(--h), .45); }
.bot-row.on { border-color: var(--holo); background: rgba(var(--h), .12); box-shadow: 0 0 24px -8px rgba(var(--h), .6); }
.br-txt { display: grid; gap: 2px; min-width: 0; }
.br-txt small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--holo-mute); }
.br-txt b { font: 700 14px/1.2 var(--f-display); }
.br-txt span { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-detail { position: sticky; top: calc(var(--nav-h) + 30px); padding: 22px 26px 26px; }
.bd-top { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 18px; }
.bd-name { font-size: clamp(24px, 2.6vw, 34px); color: var(--holo-hi); text-shadow: 0 0 18px rgba(var(--h), .6); }
.bd-title { margin: 8px 0 18px; color: var(--ink2); font-size: 16px; }
.bd-reward b { font: 700 26px/1 var(--f-display); color: var(--holo); }
.bd-h { margin: 22px 0 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--holo-mute); }
.bd-get { font-size: 16px; line-height: 1.55; color: var(--ink); font-family: var(--f-sans); }
.bd-intel { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bd-intel li { padding: 7px 12px; border: 1px dashed rgba(var(--h2), .45); border-radius: 8px; font-size: 14px; font-family: var(--f-sans); }
.bd-time { margin: 18px 0; font: 400 12px/1.4 var(--f-mono); color: var(--holo-mute); }

/* ================= TROPHIES: capsules on the wall ================= */
.cats { margin-bottom: 28px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 40px 28px; }
.capsule { position: relative; display: grid; justify-items: center; text-align: center; text-decoration: none; color: var(--ink); animation: capIn .6s both; }
@keyframes capIn { from { opacity: 0; transform: translateY(20px); filter: brightness(2) blur(3px); } }
.cap-frame { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 2; display: block; }
.cap-frame svg, .cap-frame img { width: 100%; height: 100%; object-fit: contain; }
.cap-frame.has-img img { filter: hue-rotate(230deg) saturate(1.2) drop-shadow(0 18px 18px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(var(--h), .25)); }
/* the frozen droid inside the glass */
.cap-droid { position: absolute; top: 24%; left: 0; right: 0; margin: 0 auto; width: 46%; max-width: 140px; aspect-ratio: 1; display: grid; place-items: center; }
.cap-droid .head { width: 100%; height: 100%; display: grid; place-items: center; }
.cap-droid img, .cap-droid svg { width: 100%; height: 100%; object-fit: contain; }
.cap-droid img { mix-blend-mode: screen; filter: grayscale(.6) brightness(.9) sepia(.3) hue-rotate(170deg) saturate(1.6) contrast(1.05); opacity: .85; }
.cap-frost { position: absolute; top: 21%; height: 55%; left: 50%; width: 62%; max-width: 186px; transform: translateX(-50%); border-radius: 40px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(220, 230, 255, .10), transparent 60%), repeating-linear-gradient(0deg, rgba(220, 230, 255, .05) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 30px rgba(180, 200, 255, .18); }
/* case etched on the glass */
.cap-glass { position: absolute; top: 52%; left: 50%; width: 58%; max-width: 172px; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; font-family: var(--f-mono); color: var(--holo-ink); }
.cap-reg { font-size: 10px; letter-spacing: .12em; color: var(--holo-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cap-metric { font: 700 clamp(17px, 1.6vw, 22px)/1.05 var(--f-display); color: var(--holo-hi); text-shadow: 0 0 12px rgba(var(--h), .9), 0 0 22px rgba(var(--v), .6); word-break: break-word; }
.cap-unit { font-size: 10.5px; line-height: 1.3; opacity: .92; }
.cap-title { margin-top: 14px; font: 700 16px/1.3 var(--f-sans); max-width: 280px; }
.capsule:hover .cap-frame { filter: drop-shadow(0 0 26px rgba(var(--h), .5)); }
.capsule:hover .cap-title { color: var(--holo); }
.cap-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; justify-items: center; }

.case-file h2 { font-size: clamp(22px, 2.6vw, 32px); color: var(--holo-hi); }
.cf-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; flex-wrap: wrap; }
.cf-metric { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cf-metric b { font: 700 30px/1 var(--f-display); color: var(--holo); text-shadow: 0 0 16px rgba(var(--h), .6); }
.cf-metric span { font: 400 13px/1.3 var(--f-mono); color: var(--holo-mute); }
.cf-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.tag { padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(var(--h2), .35); font: 500 12px/1 var(--f-mono); }
.cf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cf-grid section { padding: 16px; border-radius: 8px; background: rgba(10, 6, 5, .5); border: 1px solid rgba(var(--h2), .2); }
.cf-grid section.catch { border-color: var(--holo); }
.cf-grid h3, .cf-h { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--holo-mute); margin-bottom: 10px; }
.cf-h { margin: 24px 0 12px; }
.cf-grid p { font-size: 15px; line-height: 1.55; color: var(--ink); }
.cf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cf-gallery figure { border-radius: 8px; overflow: hidden; border: 1px solid rgba(var(--h2), .25); background: #0e0907; }
.cf-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.cf-gallery figcaption { padding: 8px 10px; font: 400 12px/1.3 var(--f-mono); color: var(--holo-mute); }
.cf-offer { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.cf-offer li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink); }
.cf-offer li::before { content: "▸"; position: absolute; left: 0; color: var(--holo); }
.cf-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px dashed rgba(var(--h2), .35); flex-wrap: wrap; }
.cf-foot .bd-reward b { font: 700 24px/1 var(--f-display); color: var(--holo); }

/* ================= ARSENAL ================= */
.dossier-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.dossier { padding: 22px 26px 24px; }
.ds-top { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.ds-top .prop.mini { width: 104px; }
.dossier h2 { color: var(--holo-hi); text-shadow: 0 0 16px rgba(var(--h), .55); font-size: clamp(24px, 2.4vw, 32px); }
.ds-role { margin-top: 8px; font: 400 13px/1.4 var(--f-mono); color: var(--holo-mute); }
.ds-intro { font-size: 18px; line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.ds-facts { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* track record: big holo numbers in the dossier */
.ds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 10px; }
.ds-stats div { position: relative; padding: 9px 12px 9px; border-radius: 10px; border: 1px solid rgba(var(--h), .35); background: linear-gradient(180deg, rgba(var(--h), .12), rgba(var(--h), .03)); overflow: hidden; }
.ds-stats div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #004aad, #cb6ce6); opacity: .9; }
.ds-stats b { display: block; font: 700 clamp(22px, 2vw, 28px)/1 var(--f-display); background: linear-gradient(90deg, #8fb4ff, #e4b5f2); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(var(--h), .45)); margin-bottom: 5px; }
.ds-stats span { display: block; font: 500 11px/1.3 var(--f-mono); color: var(--holo-mute); }
.s1-side .ds-facts li { padding: 7px 10px; font-size: 13px; line-height: 1.35; }
.ds-facts li { padding: 10px 12px; border: 1px solid rgba(var(--h2), .3); border-radius: 8px; font-size: 14px; }
.ds-honest { margin-top: 16px; font: 400 12px/1.4 var(--f-mono); color: var(--holo-mute); }
.code h2 { font-size: 24px; margin-bottom: 16px; }
.code ol { list-style: none; display: grid; gap: 10px; counter-reset: c; }
.code li { counter-increment: c; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.code li::before { content: "0" counter(c); grid-row: span 2; font: 700 18px/1 var(--f-display); color: var(--coral); padding-top: 2px; }
.code li b { font-size: 16px; } .code li span { color: var(--ink2); font-size: 15px; }
.gear { padding-top: 70px; }
.gear-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.rack { display: grid; gap: 14px; }
.rack-row { padding: 16px 18px; border-radius: 14px; background: rgba(20, 13, 10, .65); border: 1px solid var(--line); }
.rack-h { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px; }
.rack-h svg { width: 18px; height: 18px; color: var(--holo); }
.rack-hooks { display: flex; flex-wrap: wrap; gap: 10px; }
.gadget { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); transition: .2s; }
.gadget:hover { border-color: rgba(var(--h), .5); transform: translateY(-2px); }
.gadget.on { border-color: var(--holo); background: rgba(var(--h), .14); box-shadow: 0 0 22px -8px rgba(var(--h), .7); }
.gd-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--h), .14); color: var(--holo); }
.gd-icon svg { width: 18px; height: 18px; }
.gadget b { font: 600 14px/1 var(--f-sans); }
.gear-tag { position: sticky; top: calc(var(--nav-h) + 30px); padding: 20px 22px; }
.gt-name { display: block; font: 700 24px/1.1 var(--f-display); color: var(--holo-hi); text-shadow: 0 0 16px rgba(var(--h), .6); margin-bottom: 10px; }
.gear-tag p { font-size: 16px; line-height: 1.5; color: var(--ink); }

/* ================= CANTINA: holo notes ================= */
#nTabs { margin-bottom: 26px; }
.note { padding: 0; animation: capIn .5s both; }
.note summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; padding: 18px 20px; }
.note summary::-webkit-details-marker { display: none; }
.note summary b { grid-column: 1 / -1; font: 700 17px/1.3 var(--f-sans); color: var(--holo-hi); padding-right: 26px; position: relative; }
.note summary b::after { content: "+"; position: absolute; right: 0; top: -2px; font: 400 22px/1 var(--f-sans); color: var(--holo); transition: transform .25s; }
.note[open] summary b::after { transform: rotate(45deg); }
.n-kind { font: 600 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(var(--h), .18); color: var(--holo-ink); justify-self: start; }
.k-q .n-kind { background: rgba(255, 46, 46, .18); } .k-file .n-kind { background: rgba(217, 163, 126, .2); }
.note time { font: 400 12px/1.6 var(--f-mono); color: var(--holo-mute); justify-self: end; }
.note p { padding: 0 20px 14px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.note .trace { margin: 0 20px 18px; font-size: 14px; }

/* ================= PROSE / 404 ================= */
.prose { max-width: 760px; padding: calc(var(--nav-h) + 80px) 0 20px; }
.prose h1 { margin-bottom: 24px; } .prose h2 { font-size: 22px; margin: 28px 0 10px; }
.prose p { color: var(--ink2); margin-bottom: 12px; } .prose a { color: var(--holo); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.lost { display: grid; justify-items: center; text-align: center; padding: calc(var(--nav-h) + 70px) 0 20px; gap: 14px; }
.lost .prop { position: relative; width: 240px; margin-bottom: 10px; }
.lost .lead { margin-bottom: 14px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .bot-grid { grid-template-columns: repeat(2, 1fr); }
  .note-grid { grid-template-columns: repeat(2, 1fr); }
  .holo { width: 420px; margin-left: -210px; }
}
@media (max-width: 900px) {
  .hero { display: block; padding-top: calc(var(--nav-h) + 50px); }
  .hero-grid { grid-template-columns: 1fr; }
  .scene { order: -1; height: 480px; min-height: 0; margin: 0 -16px 10px; overflow: hidden; }
  .table { bottom: 0; height: 34%; }
  .copy { position: relative; z-index: 3; }
  .holo { width: 330px; margin-left: -165px; left: 50%; bottom: calc(24% + 118px); padding: 12px 14px 14px; }
  .feed-card { grid-template-columns: 76px 1fr; gap: 12px; }
  .feed-card .portrait { width: 76px; height: 92px; }
  .c-name { font-size: 16px; } .c-row { grid-template-columns: 62px 1fr; font-size: 11px; padding: 4px 0; }
  .beam { left: 50%; width: 300px; margin-left: -150px; height: 140px; }
  .scene .projector { left: 50%; width: 100px; margin-left: -50px; }
  .pool-holo { left: 50%; width: 260px; margin-left: -130px; }
  .wall-glow { left: 50%; width: 380px; height: 380px; margin-left: -190px; }
  .scene .helmet { width: 150px; margin-left: -75px; left: 74%; bottom: 8%; }
  .scene .tracker { width: 46px; left: 52%; bottom: 4%; }
  .scene .blaster { width: 160px; margin-left: -80px; left: 80%; bottom: 1%; }
  .pool-red { left: 74%; width: 200px; margin-left: -100px; }
  .record { gap: 20px; } .record b { font-size: 22px; }
  .block { padding-top: 64px; }
  .block-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bot-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bot-card { padding: 14px; } .bc-name { font-size: 15px; } .bc-title { font-size: 13px; }
  .note-grid { grid-template-columns: 1fr; }
  .final { grid-template-columns: 1fr; text-align: left; padding: 22px; gap: 16px; }
  .final .prop.mini { width: 90px; }
  .terminal { grid-template-columns: 1fr; }
  .bot-list { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  .bot-row { scroll-snap-align: start; }
  .bot-detail { position: relative; top: 0; padding: 18px; scroll-margin-top: calc(var(--nav-h) + 30px); }
  .bd-top { gap: 14px; } .bd-top .portrait.lg { width: 104px; height: 122px; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .cap-unit { font-size: 10px; } .cap-title { font-size: 14px; }
  .cf-grid { grid-template-columns: 1fr; } .cf-offer { grid-template-columns: 1fr; }
  .dossier-row { grid-template-columns: 1fr; }
  .ds-facts { grid-template-columns: 1fr; }
  .ds-stats { gap: 6px; } .ds-stats div { padding: 10px; }
  .gear-grid { grid-template-columns: 1fr; }
  .gear-tag { position: sticky; bottom: 10px; top: auto; order: -1; }
}
@media (max-width: 900px) {
  .hunt-block { grid-template-columns: 1fr; gap: 26px; }
  .hunter { order: -1; }
  .ns-body { grid-template-columns: 1fr; }
  .ns-list { display: flex; overflow-x: auto; max-height: none; border-right: 0; border-bottom: 1px solid rgba(var(--h), .25); }
  .ns-list li { flex: 0 0 70%; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.05); }
  .ns-main { padding: 20px; }
  .cap-row { grid-template-columns: 1fr 1fr; } .cap-row .capsule:nth-child(3) { display: none; }
  .wall { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
  .cap-metric { font-size: 15px; } .cap-unit { font-size: 9px; } .cap-reg { font-size: 8.5px; }
}
@media (max-width: 700px) {
  .bcar-stage { height: 430px; }
  .bcar-slide { width: 250px; margin-left: -125px; }
  .bcar-slide[data-pos="1"] { transform: translateX(190px) scale(.72); } .bcar-slide[data-pos="-1"] { transform: translateX(-190px) scale(.72); }
  .bcar-slide[data-pos="2"], .bcar-slide[data-pos="-2"] { opacity: 0; }
}
@media (max-width: 380px) { .bot-grid { grid-template-columns: 1fr; } }
/* the generated projector glows orange — shift it to the neon hologram colour */
.scene .projector.has-img img { filter: hue-rotate(-55deg) saturate(1.4) brightness(1.05); }
@media (max-width: 900px) {
  .scene .helmet.has-img { left: 84%; width: 112px; margin-left: -56px; bottom: 15%; }
  .scene .blaster.has-img { left: 76%; width: 130px; margin-left: -65px; bottom: 4%; }
  .scene .tracker.has-img { left: 60%; width: 58px; margin-left: -29px; bottom: 14%; }
  .scene .projector.has-img { left: 42%; width: 116px; margin-left: -58px; bottom: 20%; }
  .beam, .pool-holo { left: 42%; }
  .pool-red { left: 84%; bottom: 14%; width: 160px; margin-left: -80px; }
}

/* ---------- living visor: a glowing strip laid exactly over the visor of helmet.webp ----------
   coordinates are fractions of the helmet picture (left/top/width/height) */
.scene .helmet.has-img::before, .scene .helmet.has-img::after { content: ""; position: absolute; left: 3.6%; top: 35.9%; width: 29.8%; height: 4.2%; border-radius: 40% 10% 10% 40% / 50%; pointer-events: none; transform: rotate(1.2deg); }
.scene .helmet.has-img::before { background: linear-gradient(90deg, #ff6a5a, #ff2020 40%, #c80d0d); box-shadow: 0 0 8px 2px rgba(255, 40, 40, .9), 0 0 26px 8px rgba(255, 30, 30, .45); animation: visorLive 5s infinite; mix-blend-mode: screen; }
.scene .helmet.has-img::after { background: linear-gradient(90deg, transparent 0 40%, rgba(255, 235, 225, .95) 50%, transparent 60% 100%); background-size: 260% 100%; animation: visorScan 2.6s linear infinite; mix-blend-mode: screen; opacity: .8; }
@keyframes visorLive {
  0%, 100% { opacity: .85; filter: brightness(1); } 30% { opacity: 1; filter: brightness(1.25); } 60% { opacity: .8; }
  70% { opacity: .85; } 71% { opacity: 0; box-shadow: none; } 73% { opacity: .9; } 74% { opacity: 0; box-shadow: none; } 77% { opacity: 1; filter: brightness(1.4); } }
@keyframes visorScan { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* during the blink the visor in the picture itself goes dark too */
.scene .helmet.has-img img { animation: visorDim 5s infinite; }
@keyframes visorDim { 0%, 70%, 77%, 100% { filter: none; } 71%, 74% { filter: brightness(.75) saturate(.6); } }

/* glued hero picture: hide the separate props, keep the coded hologram */
.hero.composite .scene .prop, .hero.composite .pool-red, .hero.composite .hero-night { display: none; }
.hero.composite .hero-bg { background-position: center bottom; }
.visor-scene { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; background: linear-gradient(90deg, #ff6a5a, #ff2020 40%, #c80d0d);
  box-shadow: 0 0 8px 2px rgba(255, 40, 40, .9), 0 0 30px 10px rgba(255, 30, 30, .4); mix-blend-mode: screen; animation: visorLive 5s infinite; }

/* ---------- the still life: helmet + pistol + beacon as one picture (group.webp) ---------- */
.scene .group { left: 80%; bottom: 13%; width: 330px; margin-left: -165px; z-index: 5; filter: drop-shadow(0 22px 16px rgba(0,0,0,.85)); }
.scene .group:not(.has-img) { width: 240px; margin-left: -120px; }
.scene .projector.has-img { left: 36%; width: 210px; margin-left: -105px; bottom: 21%; }
.scene .projector.has-img img { filter: none; }
.pool-red { left: 80%; bottom: 26%; width: 240px; margin-left: -120px; }
/* living visor over group.webp (fractions of that picture) */
.scene .group.has-img::before, .scene .group.has-img::after { content: ""; position: absolute; left: 32.5%; top: 31.6%; width: 26.5%; height: 4.4%; border-radius: 50% 30% 30% 50% / 50%; pointer-events: none; transform: rotate(4.5deg); transform-origin: left center; }
.scene .group.has-img::before { background: linear-gradient(90deg, #ff7a6a, #ff2a2a 40%, #d01010); box-shadow: 0 0 8px 2px rgba(255, 40, 40, .9), 0 0 26px 8px rgba(255, 30, 30, .45); animation: visorLive 5s infinite; mix-blend-mode: screen; }
.scene .group.has-img::after { background: linear-gradient(90deg, transparent 0 40%, rgba(255, 235, 225, .95) 50%, transparent 60% 100%); background-size: 260% 100%; animation: visorScan 2.6s linear infinite; mix-blend-mode: screen; opacity: .75; }
.scene .group.has-img img { animation: visorDim 5s infinite; }
@media (max-width: 900px) {
  .scene .group { left: 72%; width: 170px; margin-left: -85px; bottom: 6%; }
  .scene .projector.has-img { left: 42%; width: 130px; margin-left: -65px; bottom: 19%; }
}

/* ---------- trophies: droids frozen in metal slabs (slabs/<case>.webp); old capsule = fallback ---------- */
.capsule .slab { display: none; width: 100%; max-width: 250px; }
.capsule .slab img { width: 100%; height: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(var(--v), .18)); transition: filter .3s, transform .3s; }
.capsule.has-slab .slab { display: block; }
.capsule.has-slab .cap-old { display: none; }
.cap-old { position: relative; display: block; width: 100%; max-width: 300px; }
.cap-old .cap-droid, .cap-old .cap-frost { top: 24%; }
.capsule:hover .slab img { transform: translateY(-4px); filter: drop-shadow(0 28px 24px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(var(--h), .4)); }
/* engraved plate under the slab */
.cap-plate { position: relative; margin-top: -8px; display: grid; gap: 4px; justify-items: center; width: 86%; max-width: 230px; padding: 10px 12px 12px; border-radius: 8px;
  font-family: var(--f-mono); color: var(--holo-ink); background: linear-gradient(180deg, #2a2733, #16141c); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 20px -10px #000; }
.capsule:not(.has-slab) .cap-plate { margin-top: 10px; }
.cap-plate .cap-reg { font-size: 10px; letter-spacing: .12em; color: var(--holo-mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-plate .cap-metric { font: 700 20px/1.05 var(--f-display); background: linear-gradient(90deg, #6f9dff, #d48bf0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cap-plate .cap-unit { font-size: 10.5px; line-height: 1.3; text-align: center; }
.wall { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 900px) { .cap-plate .cap-metric { font-size: 15px; } .cap-plate .cap-unit { font-size: 9px; } .cap-plate .cap-reg { font-size: 8.5px; } }

/* =====================================================================
   v11 — TROPHY RAIL · BAR WITH TOKENS · ARSENAL STAGE · BIG RUMOR SCREEN
   ===================================================================== */

/* ---------- trophies on the rail ---------- */
.rail-car { position: relative; width: 100%; padding-top: 10px; }
.rail { position: relative; z-index: 3; height: 34px; margin: 0 0 -6px; background: linear-gradient(180deg, #3a3546, #17141e 60%, #0c0a10); box-shadow: 0 8px 18px -6px #000, inset 0 1px 0 rgba(255,255,255,.12);
  background-size: auto 100%; background-repeat: repeat-x; transition: background-position .9s cubic-bezier(.6,0,.2,1); }
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--v), .9) 0 6px, transparent 6px 120px); opacity: .7; }
.rail.has-bg { height: 56px; background-color: transparent; box-shadow: none; margin-bottom: -18px; }
.rail.has-bg::after { display: none; }
.rail-view { overflow: hidden; }
.rail-track { display: flex; transition: transform .9s cubic-bezier(.6,0,.2,1); }
.hanger { flex: none; display: grid; justify-items: center; padding: 0 12px 10px; text-decoration: none; color: var(--ink); background: none; border: 0; cursor: pointer; transform-origin: 50% 0; }
.rail-car.swing-r .hanger.vis { animation: swingR 1.4s ease-out; } .rail-car.swing-l .hanger.vis { animation: swingL 1.4s ease-out; }
@keyframes swingR { 0% { transform: rotate(0); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } 85% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
@keyframes swingL { 0% { transform: rotate(0); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 85% { transform: rotate(.8deg); } 100% { transform: rotate(0); } }
.hanger .arm { position: relative; z-index: 2; display: block; width: 66%; max-width: 220px; height: 120px; margin-bottom: -26px; }
.hanger .arm svg, .hanger .arm img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.hanger .arm.has-img img { filter: drop-shadow(0 12px 10px rgba(0,0,0,.7)); }
.hang-slab { position: relative; z-index: 1; display: block; width: 74%; max-width: 250px; }
.hang-slab img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 22px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(var(--v), .16)); transition: filter .3s, transform .3s; }
.hang-slab .slab-ph { display: none; }
.hang-slab.miss { aspect-ratio: 1 / 2; border-radius: 12px; background: linear-gradient(180deg, #34303f, #17141d); border: 2px solid #4a4558; box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 26px 22px -10px #000; display: grid; place-items: center; }
.hang-slab.miss .slab-ph { display: grid; place-items: center; width: 60%; opacity: .55; filter: grayscale(1) contrast(1.2); }
.hanger:hover .hang-slab img, .hanger:focus-visible .hang-slab img { filter: drop-shadow(0 28px 24px rgba(0,0,0,.8)) drop-shadow(0 0 32px rgba(var(--h), .45)); }
.hanger .cap-plate { margin-top: -6px; }
.rail-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; font: 500 13px/1 var(--f-mono); color: var(--mute); }
#railCar[data-home] { margin-top: 10px; }

/* ---------- contracts: the bar with tokens ---------- */
.page-bg.strong.has-bg { opacity: 1; }
.bar-page .page-bg.strong::after { background: linear-gradient(180deg, rgba(17,14,23,.75), rgba(17,14,23,.35) 40%, rgba(17,14,23,.2) 70%, rgba(17,14,23,.85)); }
.bar-head { padding: calc(var(--nav-h) + 50px) 0 0; }
.bar-head .lead { margin-top: 10px; }
.bar-scene { position: relative; display: flex; flex-direction: column; }
.bar-holo { position: relative; z-index: 2; width: min(920px, calc(100% - 32px)); margin: 20px auto 0; }
/* hologram build-up: rises from the counter, scanline sweep, flicker */
.bar-holo.build .bh-card { animation: holoBuild .75s cubic-bezier(.2,.9,.3,1) both; }
@keyframes holoBuild { 0% { clip-path: inset(100% 0 0 0); filter: brightness(2.2) blur(3px); transform: translateY(30px) scaleY(.6); }
  60% { clip-path: inset(0 0 0 0); filter: brightness(1.4); } 70% { opacity: .6; } 78% { opacity: 1; } 100% { transform: none; filter: none; } }
.bar-holo.build .bh-card::before { content: ""; position: absolute; left: 0; right: 0; height: 40%; z-index: 4; pointer-events: none; background: linear-gradient(0deg, transparent, rgba(var(--h2), .35), transparent); animation: sweep .9s ease-out both; }
@keyframes sweep { from { top: 100%; } to { top: -40%; opacity: 0; } }
.bar-holo.build .portrait .head { animation: headIn 1s .2s both; } @keyframes headIn { from { opacity: 0; transform: scale(.6) rotateY(80deg); } }
.bh-card { position: relative; padding: 20px 24px 18px; }
.bh-grid { display: grid; grid-template-columns: auto 1fr; gap: 26px; }
.bh-target .portrait.lg { width: 210px; height: 240px; }
.bh-target .portrait .head { animation: float 4s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-6px); } }
.bh-info .bd-title { margin: 6px 0 12px; }
.bh-info .bd-get { margin: 12px 0 10px; font-size: 15px; }
.bh-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.bh-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; font: 500 12px/1 var(--f-mono); color: var(--holo-mute); }
.bh-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--h), .4); color: var(--holo-ink); }
/* beam from the chosen token up to the hologram */
.bar-holo::after { content: ""; position: absolute; left: var(--tk-x, 50%); bottom: -118px; width: 200px; height: 122px; margin-left: -100px; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--h), .55), rgba(var(--v), .05)); clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0); filter: blur(2px); transition: left .5s cubic-bezier(.4,0,.2,1); animation: flick 5s infinite; }
.bar-counter { position: relative; z-index: 3; margin-top: 54px; padding: 0 16px 10px; }
.tokens { display: flex; justify-content: center; gap: 4px; max-width: 1240px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; padding: 84px 10px 6px; scroll-snap-type: x proximity; }
.tokens::-webkit-scrollbar { display: none; }
.token { position: relative; flex: none; width: 124px; display: grid; justify-items: center; background: none; border: 0; cursor: pointer; scroll-snap-align: center; }
.tk-coin { display: block; width: 96px; transition: transform .45s cubic-bezier(.3,1.6,.5,1), filter .3s; filter: drop-shadow(0 8px 6px rgba(0,0,0,.8)); }
.tk-coin svg, .tk-coin img { width: 100%; height: auto; }
.tk-label { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 116px; white-space: normal; padding: 6px 10px; border-radius: 6px; font: 700 11px/1.2 var(--f-display); letter-spacing: .02em; color: var(--holo-ink);
  background: rgba(var(--h), .10); border: 1px solid rgba(var(--h), .35); box-shadow: 0 0 16px -6px rgba(var(--h), .6); text-align: center; transition: .3s; animation: flick 6s infinite; }
.tk-label small { display: block; margin-top: 3px; font: 500 10px/1 var(--f-mono); color: var(--holo-mute); }
.tk-beam { position: absolute; bottom: 30px; left: 50%; width: 2px; height: 36px; margin-left: -1px; background: linear-gradient(0deg, rgba(var(--h), .8), transparent); opacity: .5; }
.token:hover .tk-coin { transform: translateY(-6px); }
.token.on .tk-coin { transform: translateY(-16px) rotateX(10deg); filter: drop-shadow(0 22px 12px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(var(--h), .8)); }
.token.on .tk-label { background: var(--grad); color: #fff; border-color: transparent; transform: translateX(-50%) translateY(-8px) scale(1.08); }
.token.on .tk-label small { color: #f2e8ff; }
.token.on .tk-beam { opacity: 1; height: 50px; }

/* ---------- arsenal: two scenes, no page scroll ---------- */
.stage-page { min-height: 0; }
body[data-page="arsenal"] { overflow: hidden; }
body[data-page="arsenal"] #foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
body[data-page="arsenal"] .foot-bar { margin-top: 0; background: rgba(17,14,23,.8); backdrop-filter: blur(6px); width: 100%; padding: 0 max(16px, calc((100vw - 1200px) / 2)); }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.scene-a { position: absolute; inset: 0; padding: calc(var(--nav-h) + 40px) 0 70px; overflow-y: auto; scrollbar-width: none; opacity: 0; visibility: hidden; transition: opacity .7s, transform .8s cubic-bezier(.6,0,.2,1), visibility 0s .8s; }
.scene-a::-webkit-scrollbar { display: none; }
.scene-a.on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s, transform .8s cubic-bezier(.6,0,.2,1), visibility 0s; }
.scene-a.in-up { animation: inUp .8s cubic-bezier(.6,0,.2,1) both; } .scene-a.in-down { animation: inDown .8s cubic-bezier(.6,0,.2,1) both; }
.scene-a.out-up { animation: outUp .8s cubic-bezier(.6,0,.2,1) both; visibility: visible; } .scene-a.out-down { animation: outDown .8s cubic-bezier(.6,0,.2,1) both; visibility: visible; }
@keyframes inUp { from { opacity: 0; transform: translateY(60px) scale(.98); filter: blur(6px); } }
@keyframes inDown { from { opacity: 0; transform: translateY(-60px) scale(.98); filter: blur(6px); } }
@keyframes outUp { to { opacity: 0; transform: translateY(-60px) scale(1.02); filter: blur(6px); } }
@keyframes outDown { to { opacity: 0; transform: translateY(60px) scale(1.02); filter: blur(6px); } }
.stage-dots { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: 10px; }
.stage-dots button { width: 10px; height: 10px; border-radius: 50%; padding: 0; background: rgba(255,255,255,.2); }
.stage-dots button.on { background: var(--grad); height: 28px; border-radius: 6px; }
.stage-hint { position: absolute; left: auto; right: 0; bottom: 70px; writing-mode: vertical-rl; transform: none !important; right: 18px; bottom: auto; top: calc(50% + 40px); transform: translateX(-50%); z-index: 20; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); animation: bob 2s ease-in-out infinite; }
.stage[data-scene="1"] .stage-hint { display: none; }
@keyframes bob { 50% { opacity: .4; } }
/* scene 1 */
.s1-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; align-items: center; min-height: 100%; }
.hunter-fig { margin: 0; }
.hunter-fig .hunter-img { aspect-ratio: 4 / 5; max-height: calc(100svh - 170px); margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 60% 30%, rgba(var(--v), .25), transparent 60%), radial-gradient(ellipse at 30% 90%, rgba(var(--h), .2), transparent 60%), #120e19; }
.hunter-fig .hunter-img svg, .hunter-fig .hunter-img img { width: 100%; height: 100%; object-fit: cover; }
.s1-side { display: grid; gap: 16px; align-content: center; }
.s1-side .dossier { padding: 18px 22px 18px; }
.ds-name { font-size: clamp(26px, 2.6vw, 36px); color: var(--holo-hi); text-shadow: 0 0 16px rgba(var(--h), .5); }
.s1-side .ds-intro { font-size: 16px; margin: 12px 0; }
.s1-side .code h2 { font-size: 20px; margin-bottom: 10px; }
.s1-side .code ol { gap: 6px; }
.s1-side .code li { padding: 7px 14px; }
.s1-side .go-next { justify-self: start; }
/* scene 2: the armory */
.rack-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s; }
.rack-bg.has-bg { opacity: .9; }
.rack-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,14,23,.8), rgba(17,14,23,.35) 30%, rgba(17,14,23,.35) 80%, rgba(17,14,23,.9)); }
.s2-wrap { position: relative; z-index: 1; }
.s2-head { margin-bottom: 18px; } .s2-head .lead { margin-top: 8px; }
.armory { display: grid; gap: 14px; }
.rack-row { position: relative; padding: 14px 16px 22px; border-radius: 14px; background: linear-gradient(180deg, rgba(30,26,40,.75), rgba(16,13,22,.8));
  border: 1px solid var(--line); box-shadow: inset 0 -3px 0 rgba(var(--h), .35), inset 0 1px 0 rgba(255,255,255,.06); }
.rack-row::before { content: ""; position: absolute; left: 16px; right: 16px; top: 44px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #3d3849, #16131c); box-shadow: 0 3px 6px #000; }
.rack-tag { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.rack-tag svg { width: 16px; height: 16px; color: var(--holo); }
.rack-slots { position: relative; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.gear { position: relative; display: grid; justify-items: center; gap: 6px; width: 132px; padding: 4px; background: none; border: 0; cursor: pointer; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .3s, filter .3s; z-index: 1; }
.gear::before { content: ""; position: absolute; top: -2px; left: 50%; width: 26px; height: 12px; margin-left: -13px; border-radius: 0 0 6px 6px; background: #4a4558; box-shadow: 0 2px 4px #000; }
.gear-img { position: relative; width: 120px; height: 72px; display: grid; place-items: center; }
.gear-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.8)); }
.gear-img .gear-ph { display: none; }
.gear-img.miss .gear-ph { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: rgba(var(--h), .12); border: 1px solid rgba(var(--h), .35); color: var(--holo); }
.gear-img.miss .gear-ph svg { width: 30px; height: 30px; }
.gear-name { font: 600 12px/1.2 var(--f-sans); color: var(--ink2); text-align: center; }
.gear:hover { transform: translateY(-4px); }
.gear-tag { position: absolute; left: 100%; top: 0; width: 230px; margin-left: 10px; padding: 12px 14px; display: none; text-align: left; transform-origin: left center; }
.gear-tag b { display: block; font: 700 15px/1.1 var(--f-display); color: var(--holo-hi); margin-bottom: 6px; }
.gear-tag span { font: 400 13px/1.45 var(--f-sans); color: var(--holo-ink); }
.armory.has-open .gear:not(.open) { opacity: .35; filter: blur(1px) grayscale(.5); }
.gear.open { z-index: 10; transform: scale(2) translateY(-6px); }
.gear.open .gear-img img { filter: drop-shadow(0 10px 10px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(var(--h), .7)); }
.gear.open .gear-name { opacity: 0; }
.gear.open .gear-tag { display: block; animation: holoBuild .5s both; transform: scale(.5); transform-origin: left top; width: 240px; }
.gear.open.tag-left .gear-tag { left: auto; right: 100%; margin: 0 10px 0 0; transform-origin: right top; }
.s2-wrap .ds-honest { margin-top: 14px; }

/* ---------- cantina: one big screen ---------- */
.news-screen.big .ns-body { min-height: 460px; grid-template-columns: 1fr 1.6fr; }
.news-screen.big .ns-list { max-height: 520px; }
.news-screen.big .ns-main { padding: 34px 40px; }
.news-screen.big .ns-main h3 { font-size: clamp(24px, 2.4vw, 34px); min-height: 2.3em; }
.news-screen.big .ns-main p { font-size: 16px; max-width: 620px; }
.ns-head { align-items: center; gap: 14px; }
.ns-tabs { display: flex; gap: 4px; margin: 0 auto; }
.ns-tabs button { padding: 6px 12px; border-radius: 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); background: rgba(0,0,0,.18); }
.ns-tabs button.on { background: rgba(255,255,255,.9); color: #1b1030; }
.ns-list li { animation: liIn .45s both; } @keyframes liIn { from { opacity: 0; transform: translateX(-14px); } }
.ns-prog { display: block; height: 2px; margin-top: 18px; background: rgba(255,255,255,.08); overflow: hidden; }
.ns-prog i { display: block; height: 100%; width: 0; background: var(--grad); animation: prog 7s linear forwards; }
@keyframes prog { to { width: 100%; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .bar-scene { min-height: 0; }
  .bar-holo { width: calc(100% - 24px); }
  .bh-grid { grid-template-columns: 1fr; gap: 14px; }
  .bh-target { display: flex; justify-content: center; } .bh-target .portrait.lg { width: 150px; height: 172px; }
  .bar-counter { margin-top: 90px; }
  .tokens { justify-content: flex-start; }
  body[data-page="arsenal"] .foot-bar { display: none; }
  .s1-grid { grid-template-columns: 1fr; gap: 18px; }
  .hunter-fig .hunter-img { max-height: 46svh; aspect-ratio: 4 / 5; }
  .stage-dots { right: 8px; }
  .gear { width: 100px; } .gear-img { width: 92px; height: 58px; }
  .gear.open { transform: scale(1.6); }
  .gear.open .gear-tag { position: fixed; left: 12px; right: 12px; top: auto; bottom: 16px; width: auto; margin: 0; transform: none; }
  .news-screen.big .ns-body { grid-template-columns: 1fr; }
  .news-screen.big .ns-main { padding: 20px; }
  .ns-tabs { order: 3; width: 100%; overflow-x: auto; }
  .ns-head { flex-wrap: wrap; }
  .hanger .arm { height: 90px; }
}

/* contracts: the whole bar fits one screen on desktop */
@media (min-width: 901px) {
  .bar-page { min-height: 0; }
  .bar-head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; padding-top: calc(var(--nav-h) + 36px); }
  .bar-head h1 { font-size: clamp(30px, 3vw, 42px); }
  .bar-head .label { margin: 0; }
  .bar-head .lead { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; }
  .bar-holo { margin-top: 14px; }
  .bh-card { padding: 16px 22px 12px; }
  .bh-target .portrait.lg { width: 170px; height: 196px; }
  .bh-info .bd-get { display: none; }
  .bh-info .bd-name { font-size: 30px; }
  .bh-foot { margin-top: 10px; }
  .bd-time { margin: 8px 0 0; }
}
/* armory fits one screen: tracking row full width, the other three side by side */
@media (min-width: 901px) {
  .armory { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .armory .rack-row:first-child { grid-column: 1 / -1; }
  .rack-slots { gap: 6px 10px; }
  .s2-head { margin-bottom: 12px; } .s2-head h2 { font-size: 30px; }
  .scene-a.s2 { padding-top: calc(var(--nav-h) + 28px); }
}
.gear.open { transform-origin: 50% 0; transform: scale(2) translateY(2px); }
@media (max-width: 900px) {
  .gear.open { transform: none; }
  .gear.open .gear-img { transform: scale(1.8); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
  .gear.open .gear-tag { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 16px; top: auto; width: auto; transform: none; animation: holoBuild .45s both; }
  .gear.open .gear-tag span { font-size: 14px; }
}
@media (max-width: 900px) { .rack-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gear { width: auto; } }
.hang-slab.miss .slab-ph .head { display: block; width: 100%; aspect-ratio: 96 / 110; }
.hang-slab.miss .slab-ph svg { width: 100%; height: 100%; }

/* ---------- mini-game: catch the data ---------- */
.game { position: relative; height: 440px; padding: 0; overflow: hidden; cursor: crosshair; }
.game-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 22px; padding: 12px 18px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--holo-mute); border-bottom: 1px dashed rgba(var(--h), .3); background: rgba(10,8,14,.5); }
.game-hud b { font: 700 18px/1 var(--f-display); letter-spacing: 0; color: var(--holo-hi); margin-left: 6px; }
.game-cv { position: absolute; inset: 44px 0 0; width: 100%; height: calc(100% - 44px); touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%23cb6ce6' stroke-width='2'/%3E%3Cpath d='M16 2v8M16 22v8M2 16h8M22 16h8' stroke='%23cb6ce6' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23ff2e2e'/%3E%3C/svg%3E") 16 16, crosshair; }
.game-start { position: absolute; inset: 44px 0 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: radial-gradient(ellipse at center, rgba(17,14,23,.6), rgba(17,14,23,.92)); transition: opacity .3s; }
.game-start.off { opacity: 0; pointer-events: none; }
.game-start p { font: 400 13px/1.4 var(--f-mono); color: var(--holo-mute); }
.game-tiers { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; padding: 0 16px; }
.game-tiers li { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(var(--h), .35); font-size: 13px; color: var(--holo-ink); }
.game-tiers b { margin-right: 8px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--f-display); }
.game.hit { animation: shake .3s; } @keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.game-over { text-align: center; display: grid; gap: 10px; justify-items: center; }
.game-over .h-head { width: 100%; }
.g-k { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--holo-mute); }
.g-score { font: 800 72px/1 var(--f-display); background: linear-gradient(90deg, #6f9dff, #d48bf0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.g-bot { font-size: 14px; color: var(--ink2); }
.g-won { display: grid; gap: 8px; justify-items: center; padding: 16px 22px; border-radius: 12px; border: 1px solid rgba(var(--h), .5); background: rgba(var(--h), .08); }
.g-won b { font: 700 20px/1.2 var(--f-display); color: var(--holo-hi); }
.g-won code { font: 700 20px/1 var(--f-mono); letter-spacing: .1em; padding: 8px 14px; border-radius: 8px; background: rgba(0,0,0,.4); color: #fff; }
.g-next, .g-none { font-size: 14px; color: var(--holo-mute); }
@media (max-width: 900px) { .game { height: 420px; } .game-hud { gap: 12px; font-size: 9px; } .game-hud b { font-size: 15px; } }
@media (max-width: 900px) { .stage-hint { display: none; } }

/* real arm + rail pictures */
.rail.has-bg { height: 60px; background-size: auto 100%; background-repeat: repeat-x; margin-bottom: -10px; }
.hanger .arm.has-img { width: min(74.5%, 252px); max-width: none; height: auto; margin-bottom: calc(min(74.5%, 252px) * -0.1455); }   /* claw tips hug the slab frame */
.hanger .arm.has-img img { height: auto; }
.game { height: min(560px, 70vh); }

/* ---------- armory: gadgets hang on the real rack picture ---------- */
.rack-scene { position: relative; aspect-ratio: 1024 / 572; width: 100%; max-height: calc(100svh - 230px); margin: 0 auto; border-radius: 16px; overflow: visible;
  background: #120e19 center / 100% 100% no-repeat; border: 1px solid var(--line); }
.rack-scene.has-bg { box-shadow: 0 30px 60px -30px #000; }
.rack-scene::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(10,6,20,.28); pointer-events: none; }
.rack-scene .gear { position: absolute; width: auto; padding: 0; display: block; transform-origin: 50% 50%; }
.rack-scene .gear::before { display: none; }
.rack-scene .gear-img { width: 100%; height: auto; display: block; }
.rack-scene .gear-img img { width: 100%; height: auto; max-height: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.9)) brightness(.92); transition: filter .25s; }
.rack-scene .gear-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; margin-top: 4px; font: 600 11px/1 var(--f-mono); color: var(--ink2); opacity: 0; transition: opacity .2s; }
.rack-scene .gear:hover { transform: translateY(-3px); }
.rack-scene .gear:hover .gear-name { opacity: 1; }
.rack-scene .gear:hover .gear-img img { filter: drop-shadow(0 10px 8px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(var(--h), .7)); }
.armory.has-open .rack-scene .gear:not(.open) { opacity: .3; filter: blur(1px) grayscale(.6); }
.rack-scene .gear.open { z-index: 20; transform: scale(2); }
.rack-scene .gear.open .gear-name { opacity: 0; }
.rack-scene .gear-tag { position: absolute; left: 105%; top: 0; width: 150px; margin: 0; padding: 8px 10px; transform: none; display: none; }
.rack-scene .gear.open .gear-tag { display: block; transform: none; animation: holoBuild .45s both; width: 150px; }
.rack-scene .gear.open.tag-left .gear-tag { left: auto; right: 105%; }
.rack-scene .gear.open.tag-up .gear-tag { top: auto; bottom: 0; }
.rack-scene .gear-tag small { display: block; font: 500 6px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--holo-mute); margin-bottom: 4px; }
.rack-scene .gear-tag b { font-size: 9px; margin-bottom: 3px; }
.rack-scene .gear-tag span { font-size: 7px; line-height: 1.4; }
/* hunter: helmet version fades in on hover */
.hunter-fig { position: relative; }
.hunter-fig .hunter-img.alt { position: absolute; inset: 0; margin: 0 auto; opacity: 0; transition: opacity .8s; background: none; border: 0; pointer-events: none; }
.hunter-fig .hunter-img.alt img { width: 100%; height: 100%; object-fit: cover; }
.hunter-fig:hover .hunter-img.alt.has-img { opacity: 1; }
.hunter-fig .hunter-img, .hunter-fig .hunter-img.alt { aspect-ratio: 912 / 1136; }
@media (max-width: 900px) {
  /* phones: the real foam case, twice the screen width, swipe sideways; the info card shows under it */
  .armory { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .armory::-webkit-scrollbar { display: none; }
  .rack-scene { width: 780px !important; max-width: none; max-height: none; }
  .rack-scene .gear-name { opacity: 1; font-size: 10px; }
  .rack-scene .gear, .rack-scene .gear:hover, .rack-scene .gear.open { transform: none; }
  .rack-scene .gear.open .gear-img { transform: scale(1.35); transition: transform .3s; }
  .rack-scene .gear-tag, .rack-scene .gear.open .gear-tag { display: none !important; }
  .gear-info { margin-top: 12px; padding: 14px 16px; }
  .gear-info[hidden] { display: none; }
  .gear-info small { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--holo-mute); margin-bottom: 6px; }
  .gear-info b { display: block; font: 700 17px/1.1 var(--f-display); color: var(--holo-hi); margin-bottom: 6px; }
  .gear-info span { font-size: 14px; line-height: 1.45; color: var(--holo-ink); }
  .rack-swipe { display: block; margin-top: 8px; font: 500 11px/1 var(--f-mono); color: var(--holo-mute); text-align: center; }
  /* the photo is as wide as the dossier under it */
  .hunter-fig .hunter-img, .hunter-fig .hunter-img.alt { max-height: none; width: 100%; }
}
@media (min-width: 901px) { .gear-info, .rack-swipe { display: none !important; } }
/* armory overrides: one big rack, no extra page background */
.armory { display: block !important; }
.s2 .rack-bg { display: none; }
.scene-a.s2 .s2-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.scene-a.s2 .s2-head .label { margin: 0; } .scene-a.s2 .s2-head h2 { font-size: 28px; } .scene-a.s2 .s2-head .lead { margin: 0; font-size: 15px; }
.rack-scene { width: min(100%, calc((100svh - 250px) * 1024 / 572)); }
.rack-scene .gear-tag span { display: block; }
.rack-scene .gear.open .gear-tag { transform: none !important; transform-origin: left top; }
/* home: the seated hunter is a 16:9 shot */
.hunt-block { grid-template-columns: .85fr 1.15fr; }
.hunt-block .hunter-img { aspect-ratio: 16 / 9; }
.hunt-block .hunter-img img { object-fit: cover; object-position: 30% 50%; }
.hunt-block .hunter-tag { left: auto; right: 16px; top: 16px; bottom: auto; }

/* =========================================================
   v14 — frame clips · ambient dust · token shelves · holo rumor screen · contracts drop
   ========================================================= */
/* frame clips over the still picture */
.frames { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity .25s; pointer-events: none; }
.playing > .frames { opacity: 1; }
.hunt-block .hunter-img, .hunter-fig .hunter-img { cursor: pointer; }

/* ambient dust over every page */
#ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; mix-blend-mode: screen; }

/* nav: 7 links now */
@media (max-width: 1180px) and (min-width: 901px) { .nav .links { gap: 14px; } .nav .links a { font-size: 14px; } }

/* a metal shelf with an LED lip (shared) */
.shelf-board, .bcar-shelf { position: relative; height: 34px; border-radius: 4px;
  background:
    linear-gradient(180deg, #2c2638 0, #1b1724 55%, transparent 55%),
    linear-gradient(180deg, transparent 55%, #121019 55%, #0b0a10 100%);
  box-shadow: 0 18px 30px -12px #000, inset 0 1px 0 rgba(255,255,255,.12); }
.shelf-board::after, .bcar-shelf::after { content: ""; position: absolute; left: 2%; right: 2%; top: calc(55% + 4px); height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(var(--h), .8), 0 0 26px rgba(var(--v), .6); opacity: .85; }
.shelf-board::before, .bcar-shelf::before { content: ""; position: absolute; inset: 0 0 45% 0; background: url("../media/common/metal.webp") center / 400px; opacity: .12; mix-blend-mode: overlay; border-radius: 4px 4px 0 0; }

/* home · bots for hire: holo tokens lying on a shelf, the card projects from its token */
.bcar-shelf { width: min(1180px, 100%); margin: -30px auto 0; z-index: 0; }
.bcar-slide { transform-origin: 50% 100%; }
.bcar-slide { z-index: 1; }
.bcar-tok { display: block; width: 120px; margin-top: -10px; position: relative; z-index: 2; filter: drop-shadow(0 6px 4px rgba(0,0,0,.85)); }
.bcar-tok svg, .bcar-tok img { width: 100%; height: auto; display: block; }
.bcar-slide[data-pos="0"] .bcar-tok { filter: drop-shadow(0 6px 4px rgba(0,0,0,.85)) drop-shadow(0 0 16px rgba(var(--h), .75)); }
.bcar-slide:not([data-pos="0"]) .bcar-beam { opacity: 0; }
.bcar-beam { transition: opacity .5s; }
.bcar-ctrl { margin-top: 26px; }

/* home · rumor board as a hologram over a token */
.holo-screen { position: relative; padding-bottom: 150px; perspective: 1400px; }
.news-screen.ns-holo { background: linear-gradient(180deg, rgba(40,22,70,.42), rgba(14,10,30,.62)); border: 1px solid rgba(var(--h), .5); border-radius: 14px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 0 0 1px rgba(var(--v), .25), 0 0 40px -8px rgba(var(--h), .55), inset 0 0 60px -20px rgba(var(--h), .5);
  transform: rotateX(4deg); transform-origin: 50% 100%; animation: flick 7s infinite; }
.news-screen.ns-holo::before { content: ""; position: absolute; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none; background: linear-gradient(0deg, transparent, rgba(var(--h2), .10), transparent); animation: holoScan 6s linear infinite; }
@keyframes holoScan { from { top: 100%; } to { top: -30%; } }
.news-screen.ns-holo .ns-head { background: linear-gradient(90deg, rgba(0,74,173,.75), rgba(203,108,230,.65)); }
.news-screen.ns-holo .ns-ticker { background: rgba(var(--v), .14); }
.hs-beam { position: absolute; left: 50%; bottom: 46px; width: 92%; height: 130px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: linear-gradient(0deg, rgba(var(--h), .55), rgba(var(--v), .10) 70%, transparent); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); filter: blur(3px); animation: flick 5s infinite; }
.hs-tok { position: absolute; left: 50%; bottom: 0; width: 170px; transform: translateX(-50%); filter: drop-shadow(0 10px 8px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(var(--h), .7)); }
.hs-tok svg, .hs-tok img { width: 100%; height: auto; display: block; }

/* contracts · shelf → table */
.tk-shelf { position: relative; z-index: 4; width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; }
.tk-shelf .tokens { position: relative; z-index: 2; justify-content: center; gap: 2px; padding: 8px 6px 0; margin: 0; max-width: none; }
.tk-shelf .shelf-board { margin-top: -22px; z-index: 1; }
.tk-shelf .token { width: 118px; display: grid; justify-items: center; gap: 0; }
.tk-shelf .tk-coin { width: 78px; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s, filter .3s; filter: drop-shadow(0 5px 3px rgba(0,0,0,.85)); }
.tk-shelf .tk-label { position: static; transform: none; order: 2; width: auto; max-width: 112px; margin-top: 20px; padding: 3px 7px; border-radius: 4px; font: 600 10px/1.1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--holo-ink); background: rgba(10,8,16,.85); border: 1px solid rgba(var(--h), .3); box-shadow: none; animation: none; }
.tk-shelf .token:hover .tk-coin { transform: translateY(-5px); filter: drop-shadow(0 9px 5px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(var(--h), .6)); }
.tk-shelf .token.on .tk-coin { opacity: .1; transform: none; filter: none; }
.tk-shelf .token.on .tk-label { background: var(--grad); color: #fff; border-color: transparent; transform: none; }
.tk-shelf .tk-beam { display: none; }

.bar-holo { margin-top: 22px; transition: opacity .25s, filter .25s; }
.bar-holo.off { opacity: 0; filter: brightness(2) blur(4px); }
.bar-holo::after { left: 50%; bottom: -96px; height: 100px; opacity: 0; transition: opacity .3s; }
.bar-holo.build::after { opacity: 1; }
.bar-table { position: relative; z-index: 1; height: 120px; margin-top: 40px;
  background: linear-gradient(180deg, #2a2335 0, #17131f 14%, #0f0c15 60%, #08070b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 2px 0 rgba(var(--h), .25), 0 -20px 50px -30px rgba(var(--h), .5); }
.bar-table::before { content: ""; position: absolute; inset: 0; background: url("../media/common/metal.webp") center / 500px; opacity: .1; mix-blend-mode: overlay; }
.table-slot { position: absolute; left: 50%; top: 4px; width: 150px; transform: translateX(-50%); }
.table-slot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0,0,0,.9)); transition: filter .4s, opacity .25s, transform .25s; }
.table-slot.lit img { filter: drop-shadow(0 8px 6px rgba(0,0,0,.9)) drop-shadow(0 0 24px rgba(var(--h), .9)) brightness(1.15); }
.slot-ring { position: absolute; left: 50%; top: 42%; width: 40%; aspect-ratio: 2.2; border-radius: 50%; transform: translate(-50%, -50%) scale(.4); opacity: 0; border: 2px solid rgba(var(--h2), .9); box-shadow: 0 0 20px rgba(var(--h), .9); }
.table-slot.lit .slot-ring { animation: ringOut .9s ease-out both; }
@keyframes ringOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
.table-slot.leave img { opacity: 0; transform: translateY(-30px) scale(.8); }
.fly-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.fly-coin { position: absolute; height: auto; transform-origin: 50% 50%; filter: drop-shadow(0 8px 6px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(var(--h), .5)); will-change: transform; }

@media (max-width: 900px) {
  .bcar-shelf { margin-top: -26px; }
  .bcar-tok { width: 100px; }
  .holo-screen { padding-bottom: 120px; }
  .news-screen.ns-holo { transform: none; }
  .hs-tok { width: 130px; }
  .tk-shelf { width: 100%; }
  .tk-shelf .tokens { justify-content: flex-start; overflow-x: auto; padding: 8px 12px 0; }
  .tk-shelf .token { width: 96px; }
  .tk-shelf .tk-coin { width: 66px; }
  .bar-table { height: 100px; margin-top: 30px; }
  .table-slot { width: 120px; }
}

/* =========================================================
   v15 — hero boot sequence + blocks that power up on scroll
   ========================================================= */
/* the visor-off copy of the still life sits exactly over group.webp */
.scene .group.off { z-index: 6; pointer-events: none; filter: none; opacity: 0; }
.scene .group.off::before, .scene .group.off::after { display: none !important; }
.scene .group.off img { animation: none !important; }
.hero.boot .scene .group.off.has-img { opacity: 1; }
.hero.s-visor .scene .group.off { animation: visorBootOff .8s steps(1, end) both; }
@keyframes visorBootOff { 0% { opacity: 1; } 18% { opacity: 0; } 28% { opacity: 1; } 46% { opacity: 0; } 54% { opacity: .7; } 66%, 100% { opacity: 0; } }
.hero.boot:not(.s-visor) .scene .group.has-img::before, .hero.boot:not(.s-visor) .scene .group.has-img::after { opacity: 0; animation: none; }
.hero.boot:not(.s-visor) .pool-red { opacity: 0; animation: none; }
.hero.boot .pool-red { transition: opacity .6s .5s; }

/* side light: a cold lamp from the left, the room is black until it starts */
.side-light { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(ellipse 38% 70% at 0% 45%, rgba(var(--v), .30), rgba(var(--v), .08) 45%, transparent 70%),
              radial-gradient(ellipse 16% 40% at 0% 40%, rgba(var(--h2), .18), transparent 70%); }
.hero.boot .hero-bg { filter: brightness(.07) saturate(.4); }
.hero .hero-bg { transition: opacity .8s, filter 1.4s ease-out; }
.hero.s-light .hero-bg { filter: none; }
.hero.s-light .side-light { animation: lampOn 1s steps(1, end) both; }
@keyframes lampOn { 0% { opacity: 0; } 10% { opacity: .8; } 16% { opacity: 0; } 30% { opacity: .5; } 36% { opacity: .1; } 52%, 100% { opacity: 1; } }
.hero.boot .hero-bg.has-bg::after { opacity: 0; }
.hero-bg.has-bg::after { transition: opacity 1s; }
.hero.s-holo .hero-bg.has-bg::after { opacity: 1; }

/* text */
.hero.boot .copy > * { opacity: 0; transform: translateY(16px); }
.hero .copy > * { transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
.hero.s-text .copy > * { opacity: 1; transform: none; }
.hero.s-text .copy > :nth-child(2) { transition-delay: .12s; } .hero.s-text .copy > :nth-child(3) { transition-delay: .26s; }
.hero.s-text .copy > :nth-child(4) { transition-delay: .4s; }  .hero.s-text .copy > :nth-child(5) { transition-delay: .54s; }
.hero.s-done .copy > * { transition-delay: 0s; }

/* hologram: the projector lights up, the cone rises, a thin frame slides out and expands */
.hero.boot .scene .projector { filter: brightness(.35) saturate(.3); }
.hero .scene .projector { transition: filter .5s; }
.hero.s-holo .scene .projector { filter: none; }
.hero.boot:not(.s-holo) .beam, .hero.boot:not(.s-holo) .pool-holo, .hero.boot:not(.s-holo) .wall-glow { opacity: 0; animation: none; }
.hero.boot:not(.s-holo) .holo { opacity: 0; animation: none; }
.hero.boot:not(.s-holo) #dust { opacity: 0; }
#dust { transition: opacity 1.2s; }
.hero.s-holo.boot .beam { animation: beamUp .45s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 100%; }
@keyframes beamUp { 0% { opacity: 0; scale: .2 0; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1 1; } }
.hero.s-holo.boot .pool-holo, .hero.s-holo.boot .wall-glow { animation: fadeUp .9s .2s both; }
@keyframes fadeUp { from { opacity: 0; } }
.hero.s-holo.boot .holo { transform-origin: 50% 100%; animation: holoOn .85s .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes holoOn {
  0% { opacity: 0; scale: .02 .006; translate: 0 230px; filter: brightness(3) blur(2px); }
  25% { opacity: 1; scale: .02 .006; translate: 0 40px; }
  50% { scale: 1 .006; translate: 0 0; filter: brightness(2.4) blur(1px); }
  70% { opacity: .7; }
  78% { opacity: 1; }
  100% { opacity: 1; scale: 1 1; translate: 0 0; filter: none; } }

/* ---------- blocks below: powered off until scrolled to ---------- */
/* bots for hire: tokens dark, no beams, cards folded */
[data-power].bot-carousel:not(.powered) .bcar-tok { filter: brightness(.45) saturate(.2) drop-shadow(0 6px 4px rgba(0,0,0,.85)) !important; }
[data-power].bot-carousel:not(.powered) .bcar-beam { opacity: 0 !important; }
[data-power].bot-carousel:not(.powered) .bot-card { opacity: 0; animation: none; }
[data-power].bot-carousel:not(.powered) .bcar-shelf::after { opacity: 0; }
.bcar-shelf::after { transition: opacity .6s; }
.bot-carousel.powered .bcar-shelf::after { animation: lampOn .9s steps(1, end) both; }
.bot-carousel.powered .bcar-tok { transition: filter .5s; }
.bot-carousel.powered .bcar-beam { animation: beamUp .4s .2s cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 100%; }
.bot-carousel.powered .bot-card { transform-origin: 50% 100%; animation: holoOn .7s .35s cubic-bezier(.2,.8,.2,1) both, flick 6s 1.2s infinite; }
.bot-carousel.powered .bcar-slide:not([data-pos="0"]) .bot-card { animation-delay: .5s, 1.3s; }
@keyframes holoOnS { 0% { opacity: 0; scale: .02 .006; } 40% { opacity: 1; scale: 1 .006; } 100% { opacity: 1; scale: 1 1; } }
.bot-carousel.powered .bot-card { animation-name: holoOnS, flick; }

/* trophies: the rail hangs in the dark until the lights come on */
[data-power].rail-car:not(.powered) { filter: brightness(.12) saturate(.3); }
.rail-car.powered[data-power] { animation: hallLights .9s steps(1, end) both; }
@keyframes hallLights { 0% { filter: brightness(.12) saturate(.3); } 12% { filter: brightness(.8); } 18% { filter: brightness(.15) saturate(.3); } 34% { filter: brightness(.6); } 40% { filter: brightness(.25) saturate(.5); } 58%, 100% { filter: none; } }

/* rumors: the token wakes, the cone rises, the screen unfolds */
[data-power].holo-screen:not(.powered) .news-screen { opacity: 0; animation: none; }
[data-power].holo-screen:not(.powered) .hs-beam { opacity: 0; animation: none; }
[data-power].holo-screen:not(.powered) .hs-tok { filter: brightness(.45) saturate(.2) drop-shadow(0 10px 8px rgba(0,0,0,.85)); }
.holo-screen .hs-tok { transition: filter .5s; }
.holo-screen.powered .hs-beam { animation: beamUp .45s .2s cubic-bezier(.2,.8,.2,1) both, flick 5s 1s infinite; transform-origin: 50% 100%; translate: -50% 0; transform: none; }
.holo-screen.powered .news-screen.ns-holo { animation: holoOnS .75s .35s cubic-bezier(.2,.8,.2,1) both, flick 7s 1.2s infinite; }


/* =========================================================
   v16 — every page boots like the home page
   ========================================================= */
/* side lamp: a cold light from the left, on every page */
.pg-lamp { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(ellipse 34% 60% at 0% 42%, rgba(var(--v), .22), rgba(var(--v), .05) 50%, transparent 72%),
              radial-gradient(ellipse 12% 32% at 0% 38%, rgba(var(--h2), .12), transparent 70%); }
body[data-page="index"] .pg-lamp { display: none; }
body.pg-boot .pg-lamp { opacity: 0; }
body.pg-boot.pg-light .pg-lamp { animation: lampOn .9s steps(1, end) both; }
@keyframes lampOnSoft { from { opacity: 0; } }

/* the room behind the page is black until the lamp starts */
.page-bg, .rack-bg { transition: opacity .8s, filter 1.3s ease-out; }
body.pg-boot:not(.pg-light) .page-bg, body.pg-boot:not(.pg-light) .rack-bg { filter: brightness(.05) saturate(.3); }

/* headings and text */
body.pg-boot :is(.page-head, .bar-head, .s2-head) > *,
body.pg-boot .s1-side > :not(.dossier), body.pg-boot .chips.cats { transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
body.pg-boot:not(.pg-text) :is(.page-head, .bar-head, .s2-head) > *,
body.pg-boot:not(.pg-text) .s1-side > :not(.dossier), body.pg-boot:not(.pg-text) .chips.cats { opacity: 0; transform: translateY(14px); }
body.pg-boot.pg-text :is(.page-head, .bar-head) > :nth-child(2) { transition-delay: .1s; }
body.pg-boot.pg-text :is(.page-head, .bar-head) > :nth-child(3) { transition-delay: .2s; }
body.pg-boot.pg-text .s1-side > :nth-child(2) { transition-delay: .5s; } body.pg-boot.pg-text .s1-side > :nth-child(3) { transition-delay: .7s; }

/* generic devices: a hologram panel unfolds · a lit object comes out of the dark */
[data-power].pw-holo:not(.powered) { opacity: 0; animation: none; }
.pw-holo.powered { transform-origin: 50% 100%; animation: holoOnS .75s cubic-bezier(.2,.8,.2,1) both; }
[data-power].pw-light:not(.powered) { filter: brightness(.1) saturate(.3); }
.pw-light.powered { animation: hallLights .9s steps(1, end) both; }

/* contracts: the shelf lights up, the table catches the light; the table starts empty */
[data-power].tk-shelf:not(.powered) .tokens { filter: brightness(.22) saturate(.3); }
[data-power].tk-shelf:not(.powered) .shelf-board::after { opacity: 0; }
.tk-shelf .tokens { transition: filter .7s .25s; }
.tk-shelf.powered .shelf-board::after { animation: lampOn .9s steps(1, end) both; }
[data-power].bar-table:not(.powered) { filter: brightness(.25); }
.bar-table { transition: filter 1.2s .3s; }
.slot-hint { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--holo-mute); opacity: .6; transition: opacity .3s; animation: flick 6s infinite; }
.table-slot.leave .slot-hint { opacity: 0; }
@media (min-width: 901px) { .bar-holo { min-height: 330px; } }

/* cantina: the big screen is a hologram over a token too */
.holo-screen.big-holo { padding-bottom: 160px; margin-bottom: 20px; }
.holo-screen.big-holo .news-screen.ns-holo { transform: rotateX(3deg); }
.holo-screen.big-holo .hs-tok { width: 190px; }
.bar-holo:not(.build)::after { display: none; }
/* real shelf / counter pictures, when they exist, replace the coded metal */
.shelf-board.has-bg, .bcar-shelf.has-bg { background-size: 100% 100%; background-repeat: no-repeat; box-shadow: none; }
.shelf-board.has-bg::before, .bcar-shelf.has-bg::before { display: none; }
.bar-table.has-bg { background-size: 100% 100%; background-repeat: no-repeat; box-shadow: none; }
.bar-table.has-bg::before { display: none; }

/* the rolling coin: two views of the token in one box */
.fly-coin { position: absolute; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 8px 6px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(var(--h), .5)); }
.fly-coin img { position: absolute; left: 0; width: 100%; }
.fly-coin .f-flat { top: 50%; height: auto; transform: translateY(-50%); }
.fly-coin .f-face { top: 0; height: 100%; transform-origin: 50% 100%; opacity: 0; }
/* arsenal: helmet on → off clip, a click plays it back */
.helmet-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.helmet-clip .bare-photo { z-index: 3; opacity: 0; transition: opacity .35s; pointer-events: none; }
.helmet-clip.bare .bare-photo { opacity: 1; }
.helmet-clip .frames { z-index: 2; transition: none; }
.helmet-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- real shelf / counter / holo table pictures ---------- */
@media (min-width: 901px) {
  .shelf-board.has-bg, .bcar-shelf.has-bg { height: auto; aspect-ratio: 1538 / 207; background-size: 100% 100%; border-radius: 0; }
  .shelf-board.has-bg::after, .bcar-shelf.has-bg::after { top: 45.5%; left: 6.5%; right: 6.5%; height: 3px; }
  .tk-shelf .shelf-board.has-bg { margin-top: -28px; }
  .bcar-shelf.has-bg { margin-top: -30px; }
  .tk-shelf .token { position: relative; }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) .tk-label { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); margin: 0; z-index: 3;
    background: rgba(6,5,10,.75); border-color: rgba(var(--h), .25); }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) .token.on .tk-label { background: var(--grad); }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) .token { padding-bottom: 0; }
}
.bar-table.has-bg { --slot-w: 150px; height: min(26vw, 260px); background-size: 100% auto; background-position: center top; background-color: transparent; filter: none; }
.bar-table.has-bg .table-slot { width: var(--slot-w); top: calc(3.54vw - var(--slot-w) * .324); }
.bar-table.has-bg .slot-hint { top: calc(var(--slot-w) * .75); }
@media (max-width: 900px) { .bar-table.has-bg { --slot-w: 110px; height: 30vw; } }
[data-power].bar-table.has-bg:not(.powered) { filter: brightness(.25); }

/* cantina: the hologram rises from a real projector table */
.hs-tok.holo-table { width: min(520px, 70%); bottom: -10px; }
.holo-screen.big-holo:has(.holo-table) { padding-bottom: 230px; }
.holo-screen.big-holo:has(.holo-table) .hs-beam { bottom: 150px; height: 120px; width: 90%; }
.hs-tok.holo-table img { filter: none; }
[data-power].holo-screen:not(.powered) .hs-tok.holo-table { filter: brightness(.35) saturate(.2) drop-shadow(0 10px 8px rgba(0,0,0,.85)); }
.hs-tok.holo-table { filter: drop-shadow(0 18px 16px rgba(0,0,0,.85)) drop-shadow(0 -6px 24px rgba(var(--h), .35)); }
@media (min-width: 901px) {
  .tk-shelf { width: min(1000px, calc(100% - 32px)); }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) { overflow: visible; padding-bottom: 46px; }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) .tk-label { top: auto; bottom: -38px; }
  .tk-shelf .tokens:has(~ .shelf-board.has-bg) ~ .shelf-board.has-bg { margin-top: -74px; }
  .bar-page .bar-holo { margin-top: 6px; }
  .bar-table.has-bg { margin-top: 18px; }
}
@media (min-width: 901px) { .bar-page .bar-holo { min-height: 412px; } }
.holo-screen.big-holo .hs-tok.holo-table { width: min(520px, 70%); bottom: -10px; }
.holo-screen.big-holo:has(.holo-table) .hs-beam { bottom: 158px; height: 84px; width: 92%; }
@media (max-width: 900px) {
  .holo-screen.big-holo:has(.holo-table) { padding-bottom: 170px; }
  .holo-screen.big-holo .hs-tok.holo-table { width: 80%; }
  .holo-screen.big-holo:has(.holo-table) .hs-beam { bottom: calc(80vw * .394 * .84 - 10px); height: 60px; }
}
/* the projector table lights up: ring + dock */
.hs-tok.holo-table::before, .hs-tok.holo-table::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; opacity: 0; }
.hs-tok.holo-table::before { left: 9.5%; right: 9.5%; top: 13%; height: 22%; border: 2px solid rgba(var(--h2), .9); box-shadow: 0 0 14px rgba(var(--h), .9), inset 0 0 14px rgba(var(--h), .6); }
.hs-tok.holo-table::after { left: 43%; width: 14%; top: 18%; height: 8%; background: radial-gradient(ellipse, rgba(var(--h2), 1), rgba(var(--h), .6) 45%, transparent 70%); filter: blur(1px); }
.holo-screen.powered .hs-tok.holo-table::before { animation: lampOn .7s steps(1, end) both; opacity: 1; }
.holo-screen.powered .hs-tok.holo-table::after { animation: fadeUp .5s .15s both; opacity: 1; }
.hs-tok.holo-table { position: absolute; }
@media (max-width: 900px) { .shelf-board.has-bg { background-image: none !important; } }


/* =========================================================
   v18 — new counter with a dock hole · bigger shelves · wider holo tables
   ========================================================= */
/* counter: the picture keeps its proportions, the token lies in the hole (inner ring: x 50%, y 14%, 12.8% wide) */
.bar-table.has-bg { --sq: .42; height: auto; aspect-ratio: 1584 / 250; background-size: 100% 100%; margin-top: 18px; }
.bar-table.has-bg .table-slot { left: 50%; top: 14%; width: 12.4%; transform: translate(-50%, -50%); }
.bar-table.has-bg .table-slot img { transform: scaleY(var(--sq)); }
.bar-table.has-bg .table-slot.leave img { transform: translateY(-30px) scaleY(var(--sq)); }
.bar-table.has-bg .slot-ring { top: 50%; width: 120%; aspect-ratio: 5.8; }
.bar-table.has-bg .slot-hint { top: auto; bottom: -1.6vw; }
@media (max-width: 900px) { .bar-table.has-bg { height: auto; } }
.bar-scene:has(.bar-table.has-bg) .fly-coin .f-flat { transform: translateY(-50%) scaleY(.42); }

/* contracts shelf: big, tokens stand on the top surface, names sit on the front lip */
@media (min-width: 901px) {
  .tk-shelf { --sw: min(1240px, calc(100vw - 48px)); width: var(--sw); }
  .tk-shelf:has(.shelf-board.has-bg) .tokens { position: absolute; z-index: 2; left: 8%; right: 8%; bottom: calc(100% - var(--sw) * .1346 * .26); padding: 0; margin: 0; overflow: visible; justify-content: space-between; gap: 0; }
  .tk-shelf:has(.shelf-board.has-bg) .token { width: calc(var(--sw) * .84 / 9); padding: 0; }
  .tk-shelf:has(.shelf-board.has-bg) .tk-coin { width: 74%; }
  .tk-shelf:has(.shelf-board.has-bg) .tk-label { position: absolute; left: 50%; top: calc(100% + var(--sw) * .1346 * .1); bottom: auto; transform: translateX(-50%); margin: 0;
    max-width: 96%; padding: 2px 6px; font-size: 10px; background: rgba(6,5,10,.8); border-color: rgba(var(--h), .25); }
  .tk-shelf:has(.shelf-board.has-bg) .token.on .tk-label { background: var(--grad); }
  .tk-shelf .shelf-board.has-bg, .tk-shelf .tokens:has(~ .shelf-board.has-bg) ~ .shelf-board.has-bg { margin-top: calc(var(--sw) * .1346 * .2 + 20px); }
}
/* the groove light on the shelf picture: x 6.2…93.8%, y 47…54% */
.shelf-board.has-bg::after, .bcar-shelf.has-bg::after { left: 6.4% !important; right: 6.4% !important; top: 47% !important; height: 6% !important; border-radius: 99px;
  background: linear-gradient(90deg, #2a6bff, #8f7bff 50%, #e08cff); box-shadow: 0 0 10px 2px rgba(var(--h), .9), 0 0 34px 6px rgba(var(--v), .55), 0 0 70px 10px rgba(var(--h), .25); opacity: 1; }

/* home: wider shelf under the bot tokens */
@media (min-width: 901px) {
  .bcar-shelf.has-bg { width: calc(100% + 80px); margin-left: -40px; margin-top: calc((100% + 80px) * -.1346 * .25); }
}

/* holo tables (cantina + home rumors): measured on holo-table.webp — glass disc x 10.8…89%, y 4…36%, dock at 50% / 16% */
.holo-screen:has(.holo-table) { --tw: min(860px, calc(100vw - 40px)); padding-bottom: calc(var(--tw) * .3933 * .84 + 50px) !important; }
.holo-screen.home-holo { --tw: min(640px, calc(100vw - 40px)); }
.holo-screen .hs-tok.holo-table { width: var(--tw) !important; bottom: -10px !important; left: 50%; transform: translateX(-50%); }
.holo-screen:has(.holo-table) .hs-beam { bottom: calc(var(--tw) * .3933 * .84 - 16px) !important; height: 70px !important; width: 92% !important; }
.hs-tok.holo-table::before { left: 10.8% !important; right: 11% !important; top: 4.2% !important; height: 32% !important; border-width: 2px; }
.hs-tok.holo-table::after { left: 41.6% !important; width: 16.7% !important; top: 11.5% !important; height: 9% !important; }
@media (min-width: 901px) {
  .tk-shelf:has(.shelf-board.has-bg) { padding-top: 70px; margin-top: 0; }
  .tk-shelf .shelf-board.has-bg, .tk-shelf .tokens:has(~ .shelf-board.has-bg) ~ .shelf-board.has-bg { margin-top: 0 !important; }
  .tk-shelf:has(.shelf-board.has-bg) .tokens { bottom: calc(var(--sw) * .1346 * .72); }
  .bar-page .bar-holo { min-height: 372px; margin-top: 0; }
  .bar-table.has-bg { margin-top: -14px; }
  .bar-head { padding-top: calc(var(--nav-h) + 26px) !important; }
}
@media (min-width: 901px) {
  .tk-shelf:has(.shelf-board.has-bg) .tk-label { top: calc(100% + var(--sw) * .1346 * .065); padding: 1px 6px; font-size: 9px; line-height: 1.2; }
}
.bar-table.has-bg .slot-hint { top: calc(100% + .6vw); bottom: auto; }
@media (min-width: 901px) {
  .tk-shelf:has(.shelf-board.has-bg) .tokens .tk-label { top: calc(100% + var(--sw) * .1346 * .07) !important; }
}
.bar-table.has-bg .table-slot .slot-hint { top: calc(50% + 2.4vw) !important; }
@media (min-width: 901px) {
  .tk-shelf:has(.shelf-board.has-bg) .tokens .tk-label { padding: 0 6px !important; font: 600 9px/14px var(--f-mono) !important; height: 15px; }
}
/* contracts: the cone rises from the token in the dock to the card (sized in contracts.js) */
.bar-holo::after { left: var(--bx, 50%) !important; top: var(--bt, 100%) !important; bottom: auto !important; height: var(--bh, 0px) !important; width: 420px !important; margin-left: -210px !important;
  clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0) !important; background: linear-gradient(0deg, rgba(var(--h2), .65), rgba(var(--h), .28) 45%, rgba(var(--v), .08)) !important; z-index: -1; }
@media (min-width: 901px) { .bar-table.has-bg { margin-top: 46px !important; } .bar-page .bar-holo { min-height: 0 !important; } }

/* =========================================================
   v19 — trophy filter · contracts beam · page leave · stacked contracts head
   ========================================================= */
.hanger.leave { animation: hangUp .55s cubic-bezier(.5,0,.8,.4) both !important; pointer-events: none; }
@keyframes hangUp { 0% { transform: none; } 25% { transform: translateY(14px); } 100% { transform: translateY(-115%); opacity: 0; } }
.hanger.arrive { animation: hangDown 1.1s cubic-bezier(.2,.9,.3,1.25) both !important; }
@keyframes hangDown { 0% { transform: translateY(-115%); opacity: 0; } 55% { opacity: 1; } 70% { transform: translateY(10px) rotate(.8deg); } 85% { transform: translateY(-3px) rotate(-.4deg); } 100% { transform: none; } }

/* contracts: the beam rises from the token in the dock up to the hologram */
.table-slot .slot-beam { position: absolute; left: 50%; bottom: 50%; width: 360%; height: var(--beam, 0px); transform: translateX(-50%); pointer-events: none; z-index: -1; opacity: 0;
  background: linear-gradient(0deg, rgba(var(--h), .6), rgba(var(--v), .08) 85%, transparent); clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); filter: blur(2px); }
.table-slot.lit .slot-beam { animation: beamUp .45s cubic-bezier(.2,.8,.2,1) both, flick 5s .5s infinite; opacity: 1; transform-origin: 50% 100%; }
@media (min-width: 901px) { .bar-table.has-bg { margin-top: 56px !important; } .bar-page .bar-holo { min-height: 0; } }

/* contracts head stacked like every other page */
@media (min-width: 901px) {
  .bar-head { display: block !important; }
  .bar-head .label { margin: 0 0 10px !important; display: inline-flex; }
  .bar-head h1 { font-size: clamp(34px, 3.4vw, 48px) !important; }
  .bar-head .lead { margin-top: 8px !important; }
}

/* leaving a page: the reverse of the boot — devices off, text out, lamp flickers off, dark */
body.pg-leave main, body.pg-leave .page-bg, body.pg-leave #ambient { transition: opacity .45s .12s, filter .45s; filter: brightness(.25) saturate(.3); opacity: 0; }
body.pg-leave .pg-lamp { animation: lampOff .5s steps(1, end) both; }
@keyframes lampOff { 0% { opacity: .55; } 20% { opacity: .05; } 35% { opacity: .5; } 50%, 100% { opacity: 0; } }
body.pg-leave .holo, body.pg-leave .ns-holo, body.pg-leave .bh-card, body.pg-leave .bot-card, body.pg-leave .dossier { animation: holoOffAll .35s cubic-bezier(.6,0,.8,.2) both !important; transform-origin: 50% 100%; }
@keyframes holoOffAll { 0% { opacity: 1; scale: 1 1; } 60% { scale: 1 .01; filter: brightness(2.5); } 100% { scale: 0 .01; opacity: 0; } }
body.pg-leave #foot { transition: opacity .3s; opacity: 0; }

/* contracts: the hologram has a reserved, fixed spot — the counter never moves when a contract opens */
@media (min-width: 901px) {
  .bar-page .bar-holo { height: 430px; min-height: 0 !important; display: flex; flex-direction: column; justify-content: flex-end; }
  .bar-page .bar-holo .bh-card { max-height: 430px; overflow: hidden; }
}

/* contracts: the target card is a real hologram like the rumor screen — see-through glass, scan band, flicker, slight tilt */
.bar-page .bh-card.holo-panel { background: linear-gradient(180deg, rgba(40,22,70,.38), rgba(14,10,30,.55)); border: 1px solid rgba(var(--h), .5); border-radius: 14px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--v), .25), 0 0 40px -8px rgba(var(--h), .55), inset 0 0 60px -20px rgba(var(--h), .5); }
.bar-page .bar-holo { perspective: 1400px; }
.bar-page .bar-holo .bh-card { transform: rotateX(4deg); transform-origin: 50% 100%; }
.bar-page .bar-holo.build .bh-card { animation: holoBuild .75s cubic-bezier(.2,.9,.3,1) both, flick 7s 1s infinite; }
.bar-page .bh-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(var(--h2), .05) 0 1px, transparent 1px 3px); }
.bar-page .bh-card > .bh-scan { position: absolute; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, transparent, rgba(var(--h2), .10), transparent); animation: holoScan 6s linear infinite; }

/* =========================================================
   v20 — Holo-droid range
   ========================================================= */
.game { height: auto !important; aspect-ratio: 2 / 1; max-height: calc(100svh - 150px); margin: 0 auto; width: min(100%, calc((100svh - 150px) * 2)); cursor: default; user-select: none; -webkit-user-select: none; }
.game.playing, .game.playing .game-cv { cursor: none; }
.game .game-cv { inset: 44px 0 0; }
.game-hud { align-items: center; }
.g-lives { display: flex; gap: 5px; }
.g-lives i { width: 14px; height: 14px; clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); background: rgba(255,255,255,.12); }
.g-lives i.on { background: #ff4a4a; box-shadow: 0 0 10px #ff4a4a; }
.g-ammo { display: flex; align-items: center; gap: 8px; }
.g-ammo i { display: flex; gap: 3px; }
.g-ammo i b { width: 5px; height: 15px; border-radius: 2px 2px 1px 1px; background: rgba(255,255,255,.12); margin: 0; }
.g-ammo i b.on { background: linear-gradient(180deg, #ffe7b0, #c99a3c); box-shadow: 0 0 6px rgba(255,210,120,.6); }
.g-ammo > b { margin-left: 0 !important; font-size: 15px !important; opacity: .75; }
.g-best { margin-left: auto; }
.game.reloading .g-ammo i { animation: flick 1s infinite; }
.g-touch { display: none; position: absolute; right: 12px; bottom: 12px; z-index: 3; gap: 10px; }
.g-touch button { min-width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(var(--h), .6); background: rgba(12,9,20,.7); color: var(--holo-hi); font: 700 11px/1 var(--f-mono); letter-spacing: .08em; touch-action: none; }
.g-touch button:active { background: var(--grad); color: #fff; }
@media (pointer: coarse) { .game.playing .g-touch { display: flex; } }
@media (max-width: 700px) { .game-hud { gap: 10px; flex-wrap: wrap; } .g-best { display: none; } .g-ammo i b { width: 4px; height: 12px; } }
body[data-page="range"] .page-head { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 18px; }
body[data-page="range"] .page-head h1 { font-size: clamp(30px, 3.2vw, 44px); }
body[data-page="range"] .page-head .lead { margin-top: 8px; font-size: 15px; max-width: 720px; }
.game { max-height: none !important; width: min(100%, calc((100svh - 300px) * 2)) !important; }
.game .game-cv { inset: 0 !important; height: 100% !important; }
.game { border-radius: 18px; }
.g-bestline { font: 500 12px/1 var(--f-mono); color: var(--holo-mute); }
.game-start { inset: 0 !important; background: radial-gradient(ellipse at center, rgba(17,14,23,.35), rgba(17,14,23,.85)) !important; }
.game { aspect-ratio: 16 / 9 !important; width: min(100%, calc((100svh - 260px) * 16 / 9)) !important; background: #050407; }
.game .g-touch button#gFire { min-width: 84px; height: 84px; }
/* range: bigger window + full screen */
body[data-page="range"] .wrap:has(#game) { max-width: min(1600px, calc(100vw - 32px)); }
.game { width: min(100%, calc((100svh - 190px) * 16 / 9)) !important; }
.g-full { display: block; margin: 12px auto 0; }
.game:fullscreen { width: 100vw !important; height: 100vh !important; max-height: none; aspect-ratio: auto !important; border-radius: 0; border: 0; }
.game:fullscreen .game-start { inset: 0 !important; }
@media (pointer: coarse) { .g-full { display: none; } }
.g-btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.g-btns .g-full { margin: 0; }

/* ---------- phone fixes (oct 2026) ---------- */
@media (max-width: 900px) {
  /* hero: text first, the table with the props below it; the table is the scene's own picture so the props stand on it */
  .scene { order: 0; height: 470px; margin: 26px -16px 0; }   /* one background for the whole hero: text on top, the table at the bottom under the props */
  .hero-bg { background-position: center bottom; }
  .scene > * { z-index: 2; }
  .scene .projector.has-img { left: 36%; bottom: 23%; }
  .beam, .pool-holo { left: 36%; }
  .holo { bottom: calc(23% + 112px); }
  .scene .group { left: 72%; width: 210px; margin-left: -105px; bottom: 15%; }
  .pool-red { left: 72%; bottom: 17%; }
  /* home: the seated hunter goes above "how a contract goes", full width */
  .hunt-block { grid-template-columns: 1fr; }
  .hunt-block .hunter { order: -1; }
}

/* ---------- range on phones: a compact start card in the page, the game itself in a full-window layer ---------- */
.g-mrules, .g-exit, .g-rotate { display: none; }
@media (pointer: coarse), (max-width: 900px) {
  .game:not(.g-max) { aspect-ratio: auto !important; width: 100% !important; height: 340px !important; }
  .game-start { gap: 10px; padding: 12px; }
  .game-start .g-rules { display: none; }
  .game-start .g-mrules { display: block; font-size: 12px; max-width: 320px; }
  .game-tiers { gap: 6px; padding: 0; }
  .game-tiers li { font-size: 11.5px; padding: 6px 9px; }
}
html.g-lock, html.g-lock body { overflow: hidden !important; overscroll-behavior: none; }
.game.g-max { position: fixed !important; inset: 0 !important; z-index: 1000; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none; max-height: none !important; aspect-ratio: auto !important; margin: 0 !important; border: 0; border-radius: 0 !important; background: #050407; }
.game.g-max .game-cv { inset: 0 !important; height: 100% !important; }
.game.g-max .g-exit { display: block; position: absolute; top: 10px; left: 10px; z-index: 6; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--h), .5); background: rgba(12,9,20,.75); color: var(--holo-hi); font: 700 16px/1 var(--f-sans); }
.game.g-max .g-rotate { position: absolute; inset: 0; z-index: 7; place-content: center; justify-items: center; gap: 12px; background: rgba(5,4,8,.94); color: var(--holo-hi); font: 600 15px/1.3 var(--f-sans); text-align: center; padding: 24px; }
.game.g-max .g-rotate b { font-size: 46px; color: var(--holo); animation: spinHint 2s ease-in-out infinite; }
@keyframes spinHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
/* phone held upright (or rotation locked): the whole layer is turned 90° so the game always plays sideways */
@media (orientation: portrait) {
  .game.g-max { inset: auto !important; top: 0 !important; left: var(--ww, 100vw) !important; width: var(--wh, 100vh) !important; height: var(--ww, 100vw) !important; transform-origin: 0 0; transform: rotate(90deg) !important; }
}
.game.g-max { animation: none !important; }
@media (orientation: landscape) { .game.g-max { width: var(--ww, 100vw) !important; height: var(--wh, 100vh) !important; } }
html.g-lock .nav, html.g-lock .pg-lamp, html.g-lock #ambient, html.g-lock .skip { display: none !important; }
html.g-lock main { z-index: auto; }
.game.g-max, .game.g-max * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* touch buttons: fire & cover on the right edge, the rest on the left — over the side bars, not over the targets */
.game.g-max .g-touch { position: absolute; inset: 0; pointer-events: none; display: none; }
.game.g-max.playing .g-touch { display: block; }
.game.g-max .g-touch button { position: absolute; pointer-events: auto; min-width: 0; width: 62px; height: 62px; font-size: 10px; }
.game.g-max .g-touch #gFire { left: calc(var(--gx, 0px) + 18px); bottom: calc(var(--gy, 0px) + 22px); width: 88px; height: 88px; font-size: 12px; }
.game.g-max .g-touch #gCover { left: calc(var(--gx, 0px) + 30px); bottom: calc(var(--gy, 0px) + 122px); }
.game.g-max .g-touch #gWeapon { left: calc(var(--gx, 0px) + 30px); bottom: calc(var(--gy, 0px) + 196px); font-size: 18px; }
.game.g-max .g-touch #gReload { right: calc(var(--gx, 0px) + 18px); bottom: calc(var(--gy, 0px) + 22px); }
.game.g-max .g-touch #gMode { right: calc(var(--gx, 0px) + 18px); bottom: calc(var(--gy, 0px) + 96px); }
.game.g-max .g-touch #gPower { right: calc(var(--gx, 0px) + 18px); bottom: calc(var(--gy, 0px) + 170px); }
.game.g-max .g-touch button { background: rgba(12,9,20,.45); backdrop-filter: blur(2px); }
.game.g-max .g-exit { left: auto; right: calc(var(--gx, 0px) + 12px); top: calc(var(--gy, 0px) + 12px); }

/* contracts: the table reaches the footer */
.bar-page ~ #foot .foot-bar { margin-top: 0; }
/* contracts on phones: like the desktop — shelf, room for the hologram, the table under it */
@media (max-width: 900px) {
  .bar-page .bar-holo { min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 10px; }
  .bar-table.has-bg { width: calc(100% + 32px); margin: 0 -16px !important; aspect-ratio: 1584 / 250; height: auto !important; background-size: 100% 100%; }
  .bar-scene { padding-bottom: 0; }
}
.g-touch #gCover.on { background: var(--grad); color: #fff; }

.ds-stats b { font-size: clamp(19px, 1.75vw, 25px); white-space: nowrap; }