/* ============================================================
   THE APPRENTICE — the playable floor
   ============================================================ */

#game{
  position:fixed;inset:0;z-index:200;display:grid;
  grid-template-rows:auto auto auto auto minmax(0,1fr);
  background:var(--ink);overflow:hidden;
  opacity:0;transition:opacity .45s ease;
}
#game.on{opacity:1}
/* The UA's [hidden]{display:none} has no specificity and loses to #game above,
   which left this layer permanently on top of the site swallowing every click.
   Restate it at ID strength. */
#game[hidden]{display:none}

.g-bg{
  position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 45%;
  transition:opacity .6s ease,transform 16s linear;transform:scale(1.05);opacity:.42;
  filter:saturate(.85);
}
.g-bg.swap{opacity:0}
.g-bg-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,6,9,.95),rgba(2,6,9,.62) 26%,rgba(2,6,9,.86)),
    radial-gradient(ellipse 90% 70% at 50% 40%,transparent,rgba(2,6,9,.85));
}
.g-fx{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

/* ------------------------------------------------------------------- top */
.g-top{
  position:relative;z-index:10;display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:0 clamp(14px,2.2vw,26px);height:64px;
  background:rgba(2,6,9,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
}
.g-exit{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--dim);transition:.2s}
.g-exit:hover{color:#fff;border-color:var(--gold);background:rgba(255,186,0,.14)}
.g-brand{display:flex;flex-direction:column;line-height:1.2;flex:none}
.g-brand b{font-family:var(--disp);font-size:14px;letter-spacing:.05em}
.g-brand i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--gold-hot)}

.g-wallet{display:flex;gap:1px;margin-left:auto;background:var(--line);border:1px solid var(--line)}
.w-item{background:rgba(12,14,18,.9);padding:8px 16px;min-width:104px}
.w-k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:2px}
.w-v{font-size:15px;font-weight:700;display:block;transition:color .2s}
.w-v.flash-up{animation:vFlashUp .7s}
.w-v.flash-dn{animation:vFlashDn .7s}
@keyframes vFlashUp{0%,60%{color:var(--green-hot);text-shadow:0 0 14px var(--green)}}
@keyframes vFlashDn{0%,60%{color:var(--gold-hot);text-shadow:0 0 14px var(--gold)}}

.g-tape{position:relative;z-index:10;height:26px;overflow:hidden;
  background:rgba(2,6,9,.72);border-bottom:1px solid var(--line);display:flex;align-items:center}
.g-tape .tape-run{animation-duration:52s;font-size:10.5px}

/* ------------------------------------------------------------------- nav */
.g-nav{position:relative;z-index:10;display:flex;gap:0;padding:0 clamp(14px,2.2vw,26px);
  background:rgba(2,6,9,.55);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.g-nav::-webkit-scrollbar{display:none}
.g-nav button{
  padding:13px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);position:relative;white-space:nowrap;transition:color .2s;
}
.g-nav button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--gold);transform:scaleX(0);transition:transform .28s var(--ease)}
.g-nav button:hover{color:var(--dim)}
.g-nav button.on{color:#fff}
.g-nav button.on::after{transform:scaleX(1)}
.g-nav .badge{
  display:inline-block;margin-left:8px;min-width:16px;padding:1px 5px;
  background:var(--gold);color:#fff;font-size:9px;border-radius:8px;vertical-align:1px;
}

/* --------------------------------------------------------- objective bar */
.g-guide{
  position:relative;z-index:10;display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  padding:11px clamp(14px,2.2vw,26px);
  background:linear-gradient(90deg,rgba(255,186,0,.16),rgba(255,186,0,.05) 60%,transparent);
  border-bottom:1px solid var(--line);
  animation:guideIn .45s var(--ease);
}
.g-guide[hidden]{display:none}
@keyframes guideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.g-guide .step{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  background:var(--gold);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
.g-guide .txt{min-width:0;flex:1}
.g-guide .goal{
  display:block;font-family:var(--disp);font-size:14.5px;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.2;
}
.g-guide .why{
  display:block;font-size:12.2px;color:var(--dim);line-height:1.4;margin-top:2px;
}
.g-guide .go{flex:none}
.g-guide.done{background:linear-gradient(90deg,rgba(18,201,138,.14),transparent 62%)}
.g-guide.done .step{background:var(--green);color:#05130d}

.g-help{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--dim);transition:.2s;margin-left:6px;
}
.g-help:hover{color:#fff;border-color:var(--gold);background:rgba(255,186,0,.14)}

/* how-it-works modal */
.how{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:16px}
.how .s{background:var(--navy-2);padding:10px 15px;display:flex;gap:12px;align-items:flex-start}
.how .s i{
  flex:none;width:22px;height:22px;display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--gold);color:#fff;
}
.how .s b{display:block;font-family:var(--disp);font-size:13.5px;letter-spacing:.05em;margin-bottom:3px}
.how .s p{font-size:12.4px;color:var(--dim);line-height:1.45;margin:0}
.note{
  border-left:3px solid var(--gold);background:rgba(255,186,0,.08);
  padding:11px 14px;font-size:12.4px;color:var(--dim);line-height:1.5;margin-bottom:18px;
}
.note b{color:var(--gold-hot);font-weight:600}

/* ------------------------------------------------------------------ main */
.g-main{position:relative;z-index:5;overflow-y:auto;overflow-x:hidden;
  padding:clamp(18px,2.4vw,32px) clamp(14px,2.2vw,26px) 60px;
  /* A column, so a view can ask to fill the height instead of ending in a
     band of dead background. #game is a fixed full-viewport grid whose last
     row is this one, so on a tall screen there is a lot of height to fill. */
  display:flex;flex-direction:column}
.g-view{width:min(1720px,100%);margin-inline:auto;animation:viewIn .4s var(--ease);
  /* `flex:1` + `min-height:0` did the opposite of what the old comment claimed.
     min-height:0 removes a flex item's automatic content-sized minimum, so the
     view was free to shrink to the container's height no matter how tall its
     content was. .g-main therefore never saw an overflowing child, never showed
     a scrollbar, and the spill was clipped by #game{overflow:hidden} — content
     you could see was cut off and unreachable.

     `flex:1 0 auto` keeps the fill-the-column behaviour on a tall screen
     (grow:1) while refusing to shrink below the content (shrink:0), which is
     what makes .g-main actually scroll on a short one. */
  flex:1 0 auto;display:flex;flex-direction:column}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.g-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:22px;flex-wrap:wrap}
.g-h h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.g-h .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}

.empty{
  text-align:center;padding:70px 24px;border:1px dashed var(--line-hot);
  background:rgba(12,14,18,.55);
}
.empty h3{font-size:1.5rem;margin-bottom:10px}
.empty p{color:var(--dim-2);font-size:14px;margin-bottom:24px;max-width:46ch;margin-inline:auto}

/* ------------------------------------------------------- trader card grid */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line)}
.tc{
  background:rgba(12,14,18,.92);position:relative;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;transition:background .3s;
}
.tc:hover{background:rgba(30,34,41,.92)}
.tc.sel{background:var(--navy-3);box-shadow:inset 0 0 0 1px var(--gold)}
.tc.risk{box-shadow:inset 0 0 0 1px var(--red);animation:riskPulse 2.4s ease-in-out infinite}
@keyframes riskPulse{50%{box-shadow:inset 0 0 0 1px var(--gold-hot),inset 0 0 34px rgba(255,186,0,.28)}}
.tc.fired{filter:grayscale(1) brightness(.5);pointer-events:none}

.tc-art{position:relative;aspect-ratio:1.12;overflow:hidden}
.tc-art .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;transition:transform .5s var(--ease),opacity .3s}
.tc:hover .tc-art .room{transform:scale(1.07);opacity:.68}
/* See .mc-art — percentage heights on the sprite clip it, so fit it instead. */
.tc-art .who{position:absolute;inset:12% 12% 0;z-index:2;width:76%;height:88%;
  object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.85));transition:transform .45s var(--ease)}
.tc:hover .tc-art .who{transform:translateY(-5px) scale(1.05)}
.tc-art::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(2,6,9,.5),transparent 40%,rgba(12,14,18,.9))}

.tc-rank{position:absolute;top:9px;left:9px;z-index:3;font-family:var(--disp);font-size:10.5px;
  letter-spacing:.14em;background:var(--gold);color:#fff;padding:4px 9px 3px;
  clip-path:polygon(0 0,100% 0,100% 68%,86% 100%,0 100%)}
.tc-rar{position:absolute;top:9px;right:9px;z-index:3;font-family:var(--mono);font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;
  border:1px solid var(--rc);color:var(--rc);background:rgba(2,6,9,.7)}
.tc-state{position:absolute;bottom:9px;left:9px;z-index:4;display:flex;align-items:center;gap:6px;
  background:rgba(2,6,9,.72);padding:3px 8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2)}
.tc-state .d{width:6px;height:6px;background:var(--dim-2)}
.tc-state.work{color:var(--green)} .tc-state.work .d{background:var(--green);animation:live 2s ease-in-out infinite}
.tc-state.danger{color:var(--red-hot)} .tc-state.danger .d{background:var(--red-hot);animation:live 1.1s ease-in-out infinite}
.tc-state.idle{color:var(--gold)} .tc-state.idle .d{background:var(--gold)}

.tc-b{padding:13px 14px 15px;border-top:1px solid var(--line)}
.tc-b .nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:9px}
.tc-b .nm b{font-family:var(--disp);font-size:14px;letter-spacing:.04em}
.tc-b .nm .pnl{font-family:var(--mono);font-size:13px;font-weight:700}
.tc-b .kv{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--dim-2);margin-top:4px}
.tc-b .kv b{color:var(--text);font-weight:600}

/* ------------------------------------------------------------ office view */
.office{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
  /* Takes the height the view has rather than a capped one. The scene used to
     stop at its 540px ceiling and leave everything below it as empty
     background — several hundred pixels of it on a large display. */
  flex:1;min-height:clamp(300px,30vw,520px)}
/* min-height rather than aspect-ratio: the side panel is usually the taller of
   the two columns, and a fixed ratio left a dead band under the room. */
.of-scene{background:rgba(12,14,18,.9);position:relative;overflow:hidden;min-height:0}
/* The room art is a 1024x1024 square in a wide panel, so `cover` crops it top
   and bottom — and with the default `center` the crop window moves as the panel
   changes shape, sliding the floor and the chair around underneath a hero that
   is anchored to the container. Pinning object-position keeps the desk line
   still, which is what makes a fixed hero anchor mean anything. */
.of-scene .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center var(--room-y,62%);
  transition:opacity .5s,transform 14s linear;transform:scale(1.03)}
.of-scene .room.swap{opacity:0}
.of-scene::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 50% at 50% 78%,transparent 30%,rgba(2,6,9,.7));pointer-events:none}
/* height, not max-height: the pixel sprites are authored at 160px tall, and
   max-height only caps — it never scales a small source up to fill its slot. */
/* Tunable per room: --hero-y is how far the feet sit above the panel bottom,
   --hero-h the height as a share of the panel. The old 62%/5% put a full-height
   figure at the very bottom edge, standing in front of the desk instead of
   behind it. */
.of-hero{
  position:absolute;left:50%;bottom:var(--hero-y,15%);translate:-50%;
  height:var(--hero-h,44%);width:auto;z-index:2;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.9));animation:idle 4.6s ease-in-out infinite;
}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.of-hero.swap{opacity:0;transition:opacity .25s}
.of-mon{
  position:absolute;left:16px;top:16px;z-index:3;background:rgba(2,6,9,.8);
  border:1px solid var(--line);padding:11px 14px;backdrop-filter:blur(8px);min-width:150px;
}
.of-mon .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:4px}
.of-mon .v{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1}
.of-mon canvas{width:100%;height:38px;margin-top:8px;display:block}

.of-side{background:rgba(12,14,18,.9);padding:26px 26px 30px;
  display:flex;flex-direction:column;overflow-y:auto}
.of-name{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.of-name h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.of-tags{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--line-hot);color:var(--dim)}
.tag.rank{border-color:var(--gold);color:var(--gold-hot)}
.tag.rar{border-color:var(--rc);color:var(--rc)}

.of-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:20px}
.of-stats .s{background:rgba(20,23,29,.9);padding:13px 15px}
.of-stats .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:5px}
.of-stats .v{font-family:var(--mono);font-size:16px;font-weight:700}

.of-next{border:1px solid var(--line);padding:16px 18px;margin-bottom:18px;
  background:linear-gradient(180deg,rgba(30,34,41,.6),transparent)}
.of-next .h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.of-next .h span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.of-next .h b{font-family:var(--disp);font-size:15px;letter-spacing:.04em;color:var(--gold-hot)}
.of-next .d{font-size:12.5px;color:var(--dim);line-height:1.55;margin-bottom:12px}
.of-next .cost{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;
  padding-top:10px;border-top:1px solid var(--line);color:var(--dim-2)}
.of-next .cost b{color:var(--text)}

.of-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:18px}

/* ---------------------------------------------------------- hire / gacha */
.hire-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:2px;
  background:var(--line);border:1px solid var(--line)}
.hire-stage{background:rgba(12,14,18,.9);position:relative;min-height:420px;overflow:hidden;
  display:grid;place-items:center;padding:26px}
.hire-stage .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hire-stage::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 62% 66% at 50% 55%,transparent,rgba(2,6,9,.82))}
.hire-slot{position:relative;z-index:2;display:grid;place-items:center;text-align:center;gap:14px}
.hire-slot .ph{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2)}
.hire-slot img{height:min(46svh,380px);width:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.9))}
.hire-slot img.roll{animation:rollFlip .09s steps(1) infinite}
@keyframes rollFlip{50%{opacity:.72}}
.hire-slot .reveal{animation:revealPop .6s var(--ease)}
/* No blur, no brightness. `brightness(3)` blew the sprite out to a white blob
   the size of the stage, and a 10px blur is both wrong for pixel art and forces
   a compositing layer for the whole element — if the layer outlives the 0.6s
   animation, so does the white. Scale and opacity carry the same punch. */
@keyframes revealPop{
  0%{opacity:0;transform:scale(.55) rotate(-8deg)}
  55%{opacity:1;transform:scale(1.08) rotate(1deg)}
  100%{opacity:1;transform:none}
}
.hire-burst{position:absolute;inset:0;z-index:1;pointer-events:none}

.hire-side{background:rgba(12,14,18,.9);padding:26px;display:flex;flex-direction:column}
.hire-side h3{font-size:1.3rem;margin-bottom:10px}
.hire-side p{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:22px}
.odds{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px}
.odds .o{background:rgba(20,23,29,.9);padding:9px 14px;display:flex;justify-content:space-between;
  align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.odds .o .n{display:flex;align-items:center;gap:9px;text-transform:uppercase}
.odds .o .n i{width:8px;height:8px;background:var(--rc)}
.odds .o .p{color:var(--dim-2)}

/* --------------------------------------------------------- daily review */
.rev{display:grid;gap:2px;background:var(--line);border:1px solid var(--line)}
.rev-head{background:rgba(20,23,29,.95);display:grid;
  grid-template-columns:40px minmax(0,1fr) 92px 84px 104px 108px;gap:14px;padding:11px 18px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
.rev-row{
  background:rgba(12,14,18,.92);display:grid;
  grid-template-columns:40px minmax(0,1fr) 92px 84px 104px 108px;gap:14px;padding:12px 18px;
  align-items:center;position:relative;transition:background .25s;
  animation:rowIn .4s var(--ease) backwards;
}
@keyframes rowIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.rev-row:hover{background:rgba(30,34,41,.92)}
.rev-row.win{box-shadow:inset 3px 0 0 var(--gold)}
.rev-row.lose{box-shadow:inset 3px 0 0 var(--red)}
.rev-row .pos{font-family:var(--disp);font-size:15px;color:var(--dim-2)}
.rev-row.win .pos{color:var(--gold-hot)}
.rev-row .who{display:flex;align-items:center;gap:11px;min-width:0}
.rev-row .who img{width:34px;height:34px;object-fit:contain;object-position:top;flex:none;
  background:rgba(30,34,41,.8);border:1px solid var(--line)}
.rev-row .who .n{min-width:0}
.rev-row .who b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-row .who i{font-style:normal;font-family:var(--mono);font-size:9px;color:var(--dim-2);letter-spacing:.12em}
.rev-row .num{font-family:var(--mono);font-size:13px;font-weight:700}
.rev-row .verdict{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line-hot);color:var(--dim-2);text-align:center}
.rev-row .verdict.top{border-color:var(--gold);color:var(--gold-hot);background:rgba(255,186,0,.1)}
.rev-row .verdict.risk{border-color:var(--red);color:var(--red-hot);background:rgba(224,30,55,.12)}
.rev-row .verdict.safe{border-color:rgba(18,201,138,.5);color:var(--green)}
.rev-row .verdict.demoted,.rev-row .verdict.warned{border-color:var(--gold);color:var(--gold-hot)}
.rev-row .verdict.fired{border-color:var(--red);color:#fff;background:var(--red-deep)}

.rev-timer{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:2px;border:1px solid var(--gold);
  background:linear-gradient(90deg,rgba(255,186,0,.16),transparent);
}
.rev-timer .t{display:flex;align-items:baseline;gap:12px}
.rev-timer .t b{font-family:var(--disp);font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--gold-hot);
  line-height:1;font-variant-numeric:tabular-nums}
.rev-timer .t span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.rev-bar{height:2px;background:rgba(255,255,255,.08);position:relative;overflow:hidden;margin-bottom:2px}
.rev-bar i{position:absolute;inset:0 auto 0 0;background:var(--gold-hot);box-shadow:0 0 14px var(--gold-hot);
  transition:width .25s linear}

/* -------------------------------------------------------- boss toast */
.g-boss{
  position:absolute;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:60;
  display:flex;align-items:flex-end;gap:0;pointer-events:none;
  opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
  max-width:min(430px,84vw);
}
.g-boss.on{opacity:1;transform:none}
.g-boss img{width:104px;flex:none;filter:drop-shadow(0 12px 20px rgba(0,0,0,.9));margin-right:-6px;
  transform-origin:bottom center}
.g-boss.on img{animation:bossPop .45s var(--ease)}
@keyframes bossPop{0%{transform:translateY(30px) scale(.8)}70%{transform:translateY(-4px) scale(1.03)}100%{transform:none}}
.gb-body{background:rgba(6,9,13,.96);border:1px solid var(--line-hot);border-left:3px solid var(--gold);
  padding:13px 17px;backdrop-filter:blur(10px);box-shadow:var(--shadow);min-width:0}
.gb-who{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-hot);margin-bottom:5px}
.gb-txt{font-size:13.6px;line-height:1.48}

/* ------------------------------------------------------- boardroom scene */
.g-board{position:absolute;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden}
.g-board[hidden]{display:none}
.gb-bg{position:absolute;inset:0;background:url('../assets/img/bg/bg-boardroom.jpg') center/cover;
  opacity:0;transform:scale(1.2)}
.g-board.run .gb-bg{animation:boardIn 1.2s var(--ease) forwards}
@keyframes boardIn{to{opacity:.62;transform:scale(1.02)}}
.g-board::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 60% 55% at 50% 55%,transparent,rgba(0,0,0,.93) 78%)}
.gb-fx{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.gb-stage{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,5vw,90px);width:100%;height:100%;padding-bottom:9vh}
.gb-boss{height:min(62svh,560px);width:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.95));opacity:0}
.g-board.run .gb-boss{animation:bossStorm .8s var(--ease) .35s forwards}
@keyframes bossStorm{from{opacity:0;transform:translateX(-70px) scale(.9)}to{opacity:1;transform:none}}
.gb-victim{height:min(40svh,340px);width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.95)) brightness(.8);opacity:0}
.g-board.run .gb-victim{animation:victimIn .8s var(--ease) .55s forwards}
@keyframes victimIn{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
/* Swapping the animation drops victimIn's forwards fill, so the exit would
   otherwise start from the base opacity:0 and the sprite would just blink out.
   Restate the settled state as the declared value. */
.g-board.run .gb-victim.out{opacity:1;animation:victimOut .9s var(--ease-in) forwards}
@keyframes victimOut{to{opacity:0;transform:translateX(190px) rotate(9deg) scale(.72)}}

.gb-word{
  position:absolute;z-index:6;top:14%;font-family:var(--disp);
  font-size:clamp(2.4rem,10.5vw,8.6rem);line-height:.86;color:var(--gold-hot);
  text-shadow:0 0 70px rgba(255,210,74,.85),0 6px 0 rgba(0,0,0,.5);
  letter-spacing:.02em;text-align:center;opacity:0;pointer-events:none;
  border-top:7px solid var(--gold-hot);border-bottom:7px solid var(--gold-hot);padding:.06em .1em;
}
.gb-word.go{animation:slam .55s var(--ease-in) forwards}
.gb-sub{
  position:absolute;z-index:6;bottom:16%;font-family:var(--mono);font-size:clamp(10px,1.3vw,13px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--dim);opacity:0;text-align:center;
  padding-inline:20px;
}
.gb-sub.go{animation:fadeUp .6s var(--ease) .7s forwards}
.gb-close{position:absolute;z-index:7;bottom:5%;left:50%;translate:-50%;opacity:0}
.g-board.run .gb-close{animation:fadeUp .5s var(--ease) 1.5s forwards}

/* ------------------------------------------------------------------ modal */
.g-modal{position:absolute;inset:0;z-index:400;display:grid;place-items:center;padding:20px}
.g-modal[hidden]{display:none}
.gm-scrim{position:absolute;inset:0;background:rgba(2,5,8,.86);backdrop-filter:blur(8px);
  animation:fade .3s}
@keyframes fade{from{opacity:0}}
.gm-card{
  /* calc against the viewport, not a percentage: a centred grid item sizes to
     max-content, so the percentage does not resolve and the card overflows. */
  position:relative;width:min(580px,calc(100vw - 40px));background:var(--navy);border:1px solid var(--line-hot);
  box-shadow:var(--shadow);padding:28px 30px 26px;animation:cardIn .4s var(--ease);
  max-height:88svh;overflow-y:auto;
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.gm-card h3{font-size:1.6rem;margin-bottom:12px}
.gm-card p{font-size:13.6px;color:var(--dim);line-height:1.55;margin-bottom:16px}
.gm-card .rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:22px}
.gm-card .rows .r{background:var(--navy-2);padding:11px 15px;display:flex;justify-content:space-between;
  align-items:baseline;font-family:var(--mono);font-size:11.5px}
.gm-card .rows .r span{color:var(--dim-2);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
.gm-card .rows .r b{font-size:13px}
/* The card scrolls on short screens, so keep the actions pinned to its bottom
   edge instead of stranding them below the fold. */
.gm-acts{display:flex;gap:10px;flex-wrap:wrap;
  position:sticky;bottom:-27px;padding:12px 0 0;
  background:linear-gradient(180deg,transparent,var(--navy) 30%)}

/* ------------------------------------------------------------- the floor */
.floor-hint{font-size:13px;color:var(--dim-2);margin-bottom:18px}
.pf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:22px}
.pf .s{background:rgba(20,23,29,.9);padding:15px 17px}
.pf .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:6px}
.pf .v{font-family:var(--mono);font-size:19px;font-weight:700}

/* --------------------------------------------------------------- vault */
.vault{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.vault .h{background:rgba(20,23,29,.9);padding:15px 17px}
.vault .h .sym{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.vault .h .sym b{font-family:var(--disp);font-size:15px;letter-spacing:.05em}
.vault .h .sym i{font-style:normal;font-family:var(--mono);font-size:11px}
.vault .h .qty{font-family:var(--mono);font-size:11px;color:var(--dim-2)}
.vault .h .val{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold-hot);margin-top:5px}

@media (max-width:980px){
  .office,.hire-lay{grid-template-columns:1fr}
  .rev-head,.rev-row{grid-template-columns:34px minmax(0,1fr) 82px 100px}
  .rev-head .h-mult,.rev-head .h-pay,.rev-row .m1,.rev-row .m2{display:none}
  .rev-row .btn.sm{grid-column:auto}
}
@media (max-width:620px){
  .rev-head{display:none}
  .rev-row{grid-template-columns:28px minmax(0,1fr) 76px;row-gap:9px}
  .rev-row .verdict,.rev-row .btn.sm{grid-column:1 / -1}
}
@media (max-width:760px){
  .g-top{height:auto;flex-wrap:wrap;padding-block:10px;gap:10px}
  .g-wallet{order:3;width:100%;margin-left:0}
  .w-item{flex:1;min-width:0}
  .g-boss img{width:74px}
  #game{grid-template-rows:auto auto auto auto minmax(0,1fr)}
  .g-guide{flex-wrap:wrap;gap:9px}
  .g-guide .txt{flex:1 1 100%;order:2}
  .g-guide .go{order:3}
}
@media (max-width:520px) and (orientation:portrait){
  .rotate-note{
    display:none;position:fixed;inset:0;z-index:9999;place-items:center;text-align:center;
    background:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--dim-2);padding:40px;
  }
}

.rev-row .btn{white-space:nowrap;justify-content:center;padding-inline:14px}

/* ---------------------------------------------------- animated sprites
   The clip sits exactly over its still and fades in once it can play, so a
   missing or slow WebM degrades to the static sprite instead of a blank box. */
.anim{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:inherit;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.anim.on{opacity:1}
/* The still underneath is a fallback, not a backdrop: once the clip is running
   js/anim.js fades it out inline, or its frozen pose shows through the clip's
   transparent areas. */

/* Each sprite slot becomes the positioning context for its clip.

   `.g-boss` is deliberately NOT in this list. It is already `position:absolute`
   above, which makes it a containing block anyway — and because this rule has
   the same specificity and comes later, including it here overrode that and
   dropped the toast into the grid flow. It then reserved a permanent ~200px row
   at the bottom of the game shell for a bubble that is invisible most of the
   time: a black band under every screen. */
.of-scene,.tc-art,.hire-slot,.gb-stage{position:relative}
/* `inset` is a shorthand for all four offsets, so listing it AFTER left/bottom
   reset them both to auto and the clip fell back to the top-left corner of the
   scene — a second, half-cropped character beside the real one. Reset first,
   then place. */
/* Matched on the clip's own classes, not on a sibling: the still beside it is
   hidden once the clip runs and sibling selectors are fragile to that kind of
   change. `inset:auto` first — it is a shorthand and would otherwise wipe the
   left/bottom set after it. */
.of-hero.anim{
  position:absolute;inset:auto;
  left:50%;bottom:5%;translate:-50%;
  width:auto;height:62%;
}
.tc-art .who.anim{inset:12% 12% 0;width:76%;height:88%;object-position:bottom}
.hire-slot img + .anim{position:absolute;inset:0;width:100%;height:100%}
.g-boss img + .anim{position:absolute;inset:0;width:104px;height:100%}
.gb-boss + .anim,.gb-victim + .anim{display:none}

/* ============================================================
   CHAIN BADGE
   Demo is the default and must read as deliberate, not as a
   degraded state — a grey dot, not a warning.
   ============================================================ */
.g-chain{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.03);color:var(--dim);
  font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:border-color .18s,color .18s,background .18s;
}
.g-chain:hover{border-color:var(--gold);color:var(--ink-2)}
.g-chain .dot{
  width:7px;height:7px;border-radius:50%;background:var(--dim);
  box-shadow:0 0 0 0 rgba(18,201,138,.5);
}
.g-chain.live{border-color:rgba(18,201,138,.5);color:#12c98a;background:rgba(18,201,138,.07)}
.g-chain.live .dot{background:#12c98a;animation:chainPulse 2.4s ease-out infinite}
.g-chain.busy{opacity:.55;pointer-events:none}
@keyframes chainPulse{
  0%{box-shadow:0 0 0 0 rgba(18,201,138,.45)}
  70%{box-shadow:0 0 0 7px rgba(18,201,138,0)}
  100%{box-shadow:0 0 0 0 rgba(18,201,138,0)}
}
@media (max-width:820px){ .g-chain span{display:none} .g-chain{padding:7px 9px} }

/* ============================================================
   AVAILABILITY GATE
   ============================================================ */
.geo-gate{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(2,5,8,.86);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s ease;
}
.geo-gate.on{opacity:1}
.geo-box{
  width:min(560px,92vw);padding:32px 34px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.geo-box h3{font-size:1.5rem;margin:10px 0 14px;line-height:1.2}
.geo-box p{color:var(--dim);font-size:.94rem;line-height:1.6;margin-bottom:12px}
.geo-box b{color:var(--ink-2)}
.geo-acts{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 14px}
.geo-fine{font-size:.78rem!important;color:var(--dim2)!important;
  border-top:1px solid var(--line);padding-top:12px;margin:0!important}
.gb-clip{margin-right:10px}

/* Demo money, labelled where the number is. A seven-figure figure in a wallet
   slot reads as funds the player holds; the chain badge in the corner is too
   far away to qualify it. */
.w-k.demo{color:var(--gold);opacity:.9}

/* Why the hire costs what it costs. The base is quoted everywhere on the site;
   the desk asks for more because of the escalation, and that gap is the most
   confusing number in the game. */
.hire-why{
  width:100%;margin-bottom:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);
  display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;
}
.hire-why b{color:var(--dim);font-weight:600}

/* ------------------------------------------------- session + stock of the day
   Two readouts in the top bar. The session is the game's actual clock — a
   trader is only ever scored between one closing bell and the next — and the
   stock of the day is what the top of the book gets paid in. Both hide
   themselves when the chain has nothing to say, rather than showing a dash
   that reads as a broken feed. */

.g-session,.g-sotd{
  display:flex;align-items:center;gap:9px;padding:7px 14px;
  border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.02);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;white-space:nowrap;
}
.g-session[hidden],.g-sotd[hidden]{display:none}

.g-session .s-k,.g-sotd .s-k{color:var(--dim-2);text-transform:uppercase}
.g-session .s-v,.g-sotd .s-v{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

.g-session .dot{width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:none}
/* Open, and the bell is a while away. */
.g-session.open .dot{background:var(--green-hot);box-shadow:0 0 9px var(--green-hot)}
/* Inside the protection window: the last hours before the book is ranked. */
.g-session.closing .dot{background:var(--gold);box-shadow:0 0 9px var(--gold)}
.g-session.closing .s-v{color:var(--gold)}
/* Weekend, holiday, or after the bell — nobody is scored and nobody is fired. */
.g-session.shut .dot{background:var(--dim-2)}
.g-session.shut .s-v{color:var(--dim)}

.g-sotd .s-v{color:var(--gold)}

@media (max-width:1180px){ .g-sotd{display:none} }
@media (max-width:920px){ .g-session{display:none} }