/* Funded — portrait frame, monitor overlays, cards. All type in cqw. */

/* Space Grotesk, self-hosted (copied from the studio site; SIL OFL 1.1,
   licence in assets/fonts/OFL.txt), so the page loads nothing from outside. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --clay: #D97757;
  --clay-light: #E8967A;
  --purple: #7B3FC4;
  --slate: #141413;
  --ivory: #FAF9F5;
  --lilac: #B48CE8;
  --surface: #1C1B19;
  --card: #1F1E1B;

  /* Monitors (no clay here) */
  --screen-bg: #0A1424;
  --up: #2FBF71;
  --down: #E5484D;
  --amber: #E8B33A;
  --dim: rgba(250, 249, 245, 0.55);

  /* Screen rectangles, percent of the 9:16 frame. Re-measure here only. */
  --top-l: 11%;   --top-r: 89%;   --top-t: 21.6%; --top-b: 47.6%;
  --bot-l: 11%;   --bot-r: 89%;   --bot-t: 52.4%; --bot-b: 78.4%;
  /* Button hit areas reach down to this share of frame height. */
  --hit-bottom: 83%;

  /* Intro zoom (wide.jpg -> desk.jpg), from projecting HERO_screen_* into CAM_wide. */
  --intro-scale: 3;
  --intro-origin: 44.3% 58.4%;
  --intro-ms: 1200ms;

  /* Rain-day streaks over the window glass (where: WEATHER.streaks in js/config.js). */
  --rain-strength: 0.45; /* 0 = off, 1 = full */
  --rain-fall: 550ms;    /* time for one streak tile to fall; lower = faster */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--slate);
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ivory);
}

.frame {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  width: min(100vw, calc(100dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  overflow: hidden;
  overflow: clip; /* never scrollable, even by focus (the zoomed intro shot is 3x the frame) */
  background: var(--slate);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 0.5cqw solid var(--lilac); outline-offset: 0.3cqw; }

/* ---------- Backdrops and intro ---------- */

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.bg-wide { transform-origin: var(--intro-origin); }
.bg-desk { opacity: 0; }

.frame.intro .bg-wide {
  transform: scale(var(--intro-scale));
  transition: transform var(--intro-ms) cubic-bezier(.55, .05, .55, .95);
}
.frame.intro .bg-desk,
.frame.desk .bg-desk {
  opacity: 1;
  transition: opacity calc(var(--intro-ms) / 2) ease-in calc(var(--intro-ms) / 2);
}
.frame.desk .bg-wide { opacity: 0; }
.frame.desk:not(.intro) .bg-wide, .frame.desk.ui .bg-wide { display: none; } /* done with the intro shot */
/* Time-of-day layers over the desk (opacity set from js/fx.js) */
.bg-tod { opacity: 0; }
.bg-tod:not(.ok), .frame:not(.desk) .bg-tod { display: none; }
/* Backdrop crossfade layer (tier desks, the fired box) */
.bg-alt { opacity: 0; transition: opacity 700ms ease; }
.frame.desk .bg-alt.show { opacity: 1; }
/* Rendered intro move (STUDIO.introVideo): shown over the wide shot while it plays */
.bg-intro { opacity: 0; }
.frame.vid .bg-intro { opacity: 1; }
.frame.vid .bg-desk { transition: none; } /* the clip ends on the desk, so cut straight to it */
.frame.desk.ui .bg-intro { display: none; }
/* Edge props on the desk (EDGE_PROPS in js/config.js), placed in percent of the frame */
.props { position: absolute; inset: 0; pointer-events: none; transition: opacity 600ms ease; }
.frame:not(.desk) .props, .frame.vid:not(.ui) .props, .props.off { opacity: 0; }
.prop { position: absolute; opacity: 0; transform: translateY(1.2%); transition: opacity 500ms ease, transform 500ms ease; }
.prop.in { opacity: 1; transform: none; }
/* The desk mouse (js/clicker.js): a clean plate over the baked-in mouse, and the mouse on top */
.desk-mouse { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
.desk-mouse.ok { opacity: 1; }
.frame:not(.desk) .desk-mouse, .frame.vid:not(.ui) .desk-mouse, .desk-mouse.off { opacity: 0; }
.desk-mouse .m-layer { position: absolute; width: 100%; height: 100%; }
.desk-mouse .m-layer[data-tod] { opacity: 0; }
.desk-mouse .hand {
  position: absolute;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform var(--glide, 160ms) cubic-bezier(.3, .7, .4, 1);
}
.desk-mouse.click .hand .m-layer { animation: mclick 160ms ease; }
@keyframes mclick { 40% { filter: brightness(0.9); transform: translateY(0.4%); } }
/* The pointer: ivory arrow on the monitors, touch screens only */
.pointer {
  position: absolute; z-index: 12; pointer-events: none;
  width: 4.2cqw; aspect-ratio: 24 / 36;
  background: url(../assets/pointer.svg) 0 0 / contain no-repeat;
  filter: drop-shadow(0.3cqw 0.4cqw 0.3cqw rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition-property: left, top, opacity;
  transition-timing-function: cubic-bezier(.3, .7, .4, 1);
  transform-origin: 8% 6%;
}
.pointer.show { opacity: 1; }
.pointer:not(.show) { transition: opacity 500ms ease; }
.frame:not(.ui) .pointer { display: none; }
.pointer.click { animation: pclick 180ms ease; }
.pointer.click::after { /* ring where it clicked */
  content: ''; position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.6cqw; height: 3.6cqw;
  border: 0.35cqw solid rgba(250, 249, 245, 0.8); border-radius: 50%;
  animation: pring 360ms ease-out forwards;
}
@keyframes pclick { 45% { transform: scale(0.82); } }
@keyframes pring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
/* Rain days: streaks falling behind the glass, one strip per window area (js/fx.js) */
.rain { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 900ms ease; }
.rain.on { opacity: var(--rain-strength); }
.frame:not(.desk) .rain, .frame.vid:not(.ui) .rain { opacity: 0; }
.rain span { position: absolute; overflow: hidden; }
.rain span::before, .rain span::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: -24cqw; bottom: 0;
  background: url(../assets/rain-streaks.svg) 0 0 / 12cqw 24cqw;
  animation: rainfall var(--rain-fall) linear infinite;
  will-change: transform;
}
.rain span::after { /* nearer, bigger, fainter drops at a different pace */
  top: -36cqw;
  background-size: 18cqw 36cqw; background-position: 7cqw 0;
  opacity: 0.5;
  animation-name: rainfall-near; animation-duration: calc(var(--rain-fall) * 0.8);
}
.rain:not(.on) span::before, .rain:not(.on) span::after { animation-play-state: paused; }
@keyframes rainfall { to { transform: translateY(24cqw); } }
@keyframes rainfall-near { to { transform: translateY(36cqw); } }

/* ---------- Monitor screens ---------- */

.screen {
  position: absolute;
  background: var(--screen-bg);
  border-radius: 0.8cqw;
  box-shadow: 0 0 3cqw rgba(80, 140, 255, 0.18), inset 0 0 2cqw rgba(80, 140, 255, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.screen::before { /* scanlines and glass glow */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(140, 180, 255, 0.10), transparent 60%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}
.frame.ui .screen { opacity: 1; pointer-events: auto; }

.screen-top {
  left: var(--top-l);
  right: calc(100% - var(--top-r));
  top: var(--top-t);
  bottom: calc(100% - var(--top-b));
  display: flex;
  flex-direction: column;
  padding: 1cqw 1.4cqw 0.8cqw;
  overflow: hidden;
}

.screen-bottom {
  left: var(--bot-l);
  right: calc(100% - var(--bot-r));
  top: var(--bot-t);
  bottom: calc(100% - var(--bot-b));
  display: grid;
  /* account, meters, position, size selector, buttons */
  grid-template-rows: 5.3cqw 5.8cqw 5.3cqw 8.4cqw 1fr;
  gap: 0.9cqw;
  padding: 1.2cqw 1.6cqw 1.6cqw;
}

/* ---------- Top monitor ---------- */

.mkt-head {
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
  font-size: 3cqw;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mkt-head .sym { letter-spacing: 0.04em; }
.mkt-head .chg { font-size: 2.6cqw; }
.mkt-head .spacer { flex: 1; }
.mkt-head .clock { font-size: 3cqw; }
.mkt-head .daynum { font-size: 2.3cqw; color: var(--dim); font-weight: 500; }
.pause-btn {
  display: flex;
  gap: 0.6cqw;
  align-self: center;
  padding: 0.8cqw 1cqw;
  margin: -0.8cqw -0.6cqw -0.8cqw 0;
}
.pause-btn i { display: block; width: 0.7cqw; height: 2.4cqw; background: var(--dim); border-radius: 0.2cqw; }
.clock.pulse { animation: pulse 1s steps(2, jump-none) infinite; color: var(--down); }
@keyframes pulse { 50% { opacity: 0.35; } }

.up { color: var(--up); }
.down { color: var(--down); }

.chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 0.6cqw;
}
#chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.news-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0.6cqw 1cqw;
  font-size: 2.6cqw;
  font-weight: 700;
  background: rgba(10, 20, 36, 0.92);
  border: 1px solid currentColor;
  border-radius: 0.6cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: flash 0.25s steps(2, jump-none) 4;
  z-index: 2;
}
@keyframes flash { 50% { background: rgba(250, 249, 245, 0.18); } }

.bell {
  position: absolute;
  right: 6.5cqw;
  bottom: 4cqw;
  font-size: 4.6cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.3cqw 1cqw;
  border-radius: 0.6cqw;
  background: rgba(10, 20, 36, 0.85);
  border: 1px solid currentColor;
  z-index: 2;
}
.bell.hot { color: var(--down); animation: pulse 1s steps(2, jump-none) infinite; }

.paused {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--screen-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border-radius: inherit;
  cursor: pointer;
}
.paused-title { font-size: 6cqw; font-weight: 700; color: var(--lilac); letter-spacing: 0.06em; text-transform: uppercase; }
.paused-sub { font-size: 3cqw; color: var(--dim); text-align: center; max-width: 80%; }

/* ---------- Bottom monitor ---------- */

.acct {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3cqw;
  font-weight: 500;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.acct b { color: var(--ivory); font-weight: 700; margin-left: 0.8cqw; }
.acct b.up { color: var(--up); }
.acct b.down { color: var(--down); }

.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.meter { display: flex; flex-direction: column; justify-content: center; gap: 0.5cqw; }
.m-label {
  display: flex;
  justify-content: space-between;
  font-size: 2.2cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.m-label b { color: var(--ivory); }
.m-bar { height: 1.3cqw; border-radius: 1cqw; background: rgba(250, 249, 245, 0.12); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: 0; background: var(--up); border-radius: inherit; transition: width 120ms linear; }
.meter.amber .m-bar i { background: var(--amber); }
.meter.red .m-bar i { background: var(--down); }
.meter.red .m-label b { color: var(--down); }
.meter.target .m-bar i { background: var(--lilac); }
.meter.target.met .m-bar i { background: var(--up); }

.pos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  font-size: 3cqw;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 0 1cqw;
  border-radius: 0.6cqw;
  background: rgba(250, 249, 245, 0.05);
}
.pos .side { letter-spacing: 0.04em; }
.pos .muted { color: var(--dim); font-weight: 500; }

.sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(250, 249, 245, 0.25);
  border-radius: 0.8cqw;
  overflow: hidden;
}
.sizes button {
  font-size: 3cqw;
  font-weight: 700;
  color: var(--dim);
  border-left: 1px solid rgba(250, 249, 245, 0.15);
}
.sizes button:first-child { border-left: 0; }
.sizes button[aria-checked="true"] { background: var(--lilac); color: var(--slate); }

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.4cqw;
}
.act {
  position: relative;
  font-size: 4.2cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.9cqw;
  min-height: 44px;
  transition: transform 60ms ease, filter 60ms ease;
}
/* Invisible hit area reaching below the bezel, down to --hit-bottom of the frame.
   (bot-b -> hit-bottom) of frame height in cqw, plus the screen's bottom padding. */
.act::after {
  content: '';
  position: absolute;
  left: -0.7cqw;
  right: -0.7cqw;
  top: 0;
  bottom: calc(-1 * ((83 - 78.4) * 16 / 9 * 1cqw + 1.6cqw));
}
.act.buy { background: var(--up); color: #06210F; }
.act.sell { background: var(--down); color: #2A0506; }
.act.flat { background: transparent; color: var(--ivory); border: 1px solid rgba(250, 249, 245, 0.6); font-size: 3.4cqw; }
.act.pressed { transform: scale(0.95); filter: brightness(1.25); }
.act:disabled { opacity: 0.35; }

.screen.shake { animation: shake 180ms linear; }
@keyframes shake {
  25% { transform: translate(0.6cqw, -0.3cqw); }
  50% { transform: translate(-0.6cqw, 0.3cqw); }
  75% { transform: translate(0.3cqw, 0.2cqw); }
}

/* Level 2 order book strip (perk) */
.l2 {
  position: absolute;
  left: 0.6cqw;
  bottom: 4.6cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.4cqw 1cqw;
  font-size: 2.1cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(10, 20, 36, 0.85);
  border: 1px solid rgba(250, 249, 245, 0.18);
  border-radius: 0.6cqw;
  z-index: 1;
}
.l2 .tag { color: var(--lilac); }
.l2 .bar { width: 11cqw; height: 1.1cqw; border-radius: 1cqw; background: var(--down); overflow: hidden; }
.l2 .bar i { display: block; height: 100%; background: var(--up); }

.news-banner.early { border-style: dashed; }

/* Options tier: today's strike, both premiums, implied volatility, earnings time */
.opt {
  position: absolute;
  left: 0.6cqw;
  top: 0.6cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 0.4cqw 1cqw;
  font-size: 2.1cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: rgba(10, 20, 36, 0.85);
  border: 1px solid rgba(250, 249, 245, 0.18);
  border-radius: 0.6cqw;
  z-index: 1;
}
.opt .tag, .opt .earn { color: var(--lilac); }
.opt .iv { color: var(--dim); }

/* ---------- Tutorial coach ---------- */

.coach {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  z-index: 15;
  padding: 3cqw 3.6cqw;
  background: var(--card);
  border: 1px solid var(--lilac);
  border-radius: 2.4cqw;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.55);
  font-size: 3.5cqw;
  line-height: 1.4;
  pointer-events: none;
  animation: fadein 250ms ease;
}
.coach-text b { color: var(--lilac); }
.coach-next {
  pointer-events: auto;
  display: block;
  margin: 2.4cqw 0 0 auto;
  padding: 1.6cqw 4.5cqw;
  border-radius: 1.6cqw;
  background: var(--lilac);
  color: var(--slate);
  font-size: 3.4cqw;
  font-weight: 700;
}
.coach-focus {
  outline: 0.7cqw solid var(--lilac);
  outline-offset: 0.4cqw;
  border-radius: 1cqw;
  animation: focuspulse 1.1s ease-in-out infinite;
}
@keyframes focuspulse { 50% { outline-color: rgba(180, 140, 232, 0.35); } }

/* ---------- Cards (brand surfaces: clay allowed) ---------- */

.card-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6cqw;
  background: rgba(20, 20, 19, 0.55);
  animation: fadein 300ms ease;
}
.card-layer.clear { background: transparent; }
.card-layer[hidden] { display: none; }
@keyframes fadein { from { opacity: 0; } }

.card {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  background: var(--card);
  border: 1px solid rgba(250, 249, 245, 0.08);
  border-radius: 3cqw;
  padding: 6cqw 6cqw 5cqw;
  box-shadow: 0 3cqw 10cqw rgba(0, 0, 0, 0.5);
  font-size: 3.8cqw;
  line-height: 1.4;
}
.card.title-card { background: rgba(20, 20, 19, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card h1, .card h2 { margin: 0 0 1cqw; line-height: 1.05; letter-spacing: -0.01em; }
.card h1 { font-size: 13cqw; color: var(--ivory); }
.card h1 .dot { color: var(--clay); }
.card h2 { font-size: 8cqw; }
.card .eyebrow {
  font-size: 3cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-light);
  margin-bottom: 2cqw;
}
.card p { margin: 0 0 3cqw; color: rgba(250, 249, 245, 0.8); }
.card .fired { color: var(--clay); }
.card .rule-name { font-size: 5cqw; font-weight: 700; color: var(--ivory); margin-bottom: 1cqw; }
.card ul.rules { margin: 0 0 4cqw; padding: 0; list-style: none; font-size: 3.4cqw; }
.card ul.rules li { display: flex; justify-content: space-between; padding: 1.2cqw 0; border-bottom: 1px solid rgba(250, 249, 245, 0.08); }
.card ul.rules li span:first-child { color: rgba(250, 249, 245, 0.7); }
.card ul.rules li b { font-variant-numeric: tabular-nums; }
.card .up { color: var(--up); }
.card .down { color: var(--down); }

.cta {
  display: block;
  width: 100%;
  margin-top: 2cqw;
  padding: 3.6cqw;
  border-radius: 2cqw;
  background: var(--clay);
  color: var(--slate);
  font-size: 4.6cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cta:active { filter: brightness(1.1); transform: scale(0.98); }
.cta.ghost { background: transparent; color: var(--lilac); border: 1px solid rgba(180, 140, 232, 0.5); font-size: 3.6cqw; padding: 2.6cqw; }

.card .cta.ghost + .cta.ghost { margin-top: 1.6cqw; }
.cta.ghost.small { font-size: 3cqw; padding: 1.8cqw; border-color: rgba(180, 140, 232, 0.3); color: rgba(250, 249, 245, 0.7); }
.perk { padding: 2cqw 0; border-bottom: 1px solid rgba(250, 249, 245, 0.08); display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw 2cqw; align-items: center; }
.perk h3 { margin: 0; font-size: 4cqw; }
.perk p { grid-column: 1; margin: 0; font-size: 3.1cqw; }
.perk .buy {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 1.8cqw 3cqw;
  border-radius: 1.6cqw;
  background: var(--clay);
  color: var(--slate);
  font-size: 3.2cqw;
  font-weight: 700;
  white-space: nowrap;
}
.perk .buy:disabled { background: transparent; color: rgba(250, 249, 245, 0.45); border: 1px solid rgba(250, 249, 245, 0.2); }
.rep { color: var(--clay-light); font-weight: 700; }
.perk h3 .rep { font-size: 3cqw; margin-left: 1cqw; }
.perk .buy.toggle { background: transparent; color: rgba(250, 249, 245, 0.7); border: 1px solid rgba(250, 249, 245, 0.3); min-width: 12cqw; }
.perk .buy.toggle.on { background: var(--lilac); color: var(--slate); border-color: var(--lilac); }
.perk.edge.rare h3 { color: var(--lilac); }
/* Edge card art (assets/cards/): a prop still life to the left of the text */
.perk.edge:has(.edge-art) { grid-template-columns: auto 1fr auto; }
.perk.edge .edge-art { grid-row: 1 / span 2; grid-column: 1; width: 17cqw; height: 17cqw; object-fit: contain; border-radius: 2cqw; background: radial-gradient(circle at 50% 60%, rgba(180, 140, 232, 0.16), rgba(10, 20, 36, 0.6) 70%); }
.perk.edge:has(.edge-art) h3, .perk.edge:has(.edge-art) p { grid-column: 2; }
.perk.edge:has(.edge-art) .buy { grid-column: 3; }
.perk.edge.rare .edge-art { box-shadow: 0 0 0 1px rgba(180, 140, 232, 0.55), 0 0 2.4cqw rgba(180, 140, 232, 0.25); }
.perk .tag { font-size: 2.4cqw; letter-spacing: 0.08em; padding: 0.3cqw 1cqw; border-radius: 1cqw; border: 1px solid var(--lilac); color: var(--lilac); vertical-align: middle; margin-left: 1cqw; }

.fine { font-size: 2.8cqw; color: rgba(250, 249, 245, 0.45); margin-top: 3cqw; text-align: center; }

/* ---------- Juice ---------- */

/* Cards slide in and fade out */
.card { animation: cardin 280ms cubic-bezier(.2, .9, .3, 1.15); }
@keyframes cardin { from { opacity: 0; transform: translateY(4cqw) scale(0.97); } }
.card-layer.leaving { animation: fadeout 180ms ease forwards; pointer-events: none; }
@keyframes fadeout { to { opacity: 0; } }

/* Big headlines land like a stamp; "You're fired." shudders after */
.card .stamp { animation: stamp 460ms cubic-bezier(.2, 1.5, .4, 1) both; }
.card .fired.stamp { animation: stamp 460ms cubic-bezier(.2, 1.5, .4, 1) both, shudder 320ms ease 460ms; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7); } 55% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes shudder { 20%, 60% { transform: translateX(-1.2cqw); } 40%, 80% { transform: translateX(1.2cqw); } }

/* Fills tint the position line */
.pos.fill-up { animation: fillup 380ms ease-out; }
.pos.fill-down { animation: filldown 380ms ease-out; }
.pos.fill-flat { animation: fillflat 380ms ease-out; }
@keyframes fillup { from { background: rgba(47, 191, 113, 0.45); } }
@keyframes filldown { from { background: rgba(229, 72, 77, 0.45); } }
@keyframes fillflat { from { background: rgba(250, 249, 245, 0.3); } }

/* Realized P&L floats up from the position line */
.pnl-pop {
  position: absolute;
  left: 50%;
  z-index: 4;
  font-size: 4.4cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0.3cqw 1.2cqw rgba(0, 0, 0, 0.7);
  animation: pnlpop 1250ms ease-out forwards;
}
@keyframes pnlpop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -2cqw) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -10cqw) scale(1); }
}

/* Monitor flash: bell, fired, pass */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
}
.screen.flashing::after { animation: screenflash 600ms ease-out; }
.screen[data-flash="bell"]::after { background: rgba(250, 249, 245, 0.55); }
.screen[data-flash="fired"]::after { background: rgba(229, 72, 77, 0.6); }
.screen[data-flash="pass"]::after { background: rgba(47, 191, 113, 0.5); }
@keyframes screenflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Desk monitor edge pulses while a rule meter is in the red */
.screen-bottom.danger { animation: danger 1s ease-in-out infinite; }
@keyframes danger { 50% { box-shadow: 0 0 3cqw rgba(229, 72, 77, 0.55), inset 0 0 2.4cqw rgba(229, 72, 77, 0.5); } }

/* Target meter fills */
.meter.target.pop { animation: tgtpop 700ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tgtpop { 30% { transform: scale(1.12); } }

/* Link back to the studio hub */
.hub { display: block; margin-top: 3cqw; text-align: center; font-size: 2.9cqw; color: var(--lilac); text-decoration: none; }
.hub:hover, .hub:focus-visible { text-decoration: underline; }
.ver { margin-top: 1.5cqw; text-align: center; font-size: 2.4cqw; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .frame.intro .bg-wide { transition-duration: 1ms; }
  .screen.shake, .news-banner, .clock.pulse, .bell.hot, .coach-focus { animation: none; }
  .card, .card .stamp, .card .fired.stamp, .card-layer.leaving, .meter.target.pop,
  .pos.fill-up, .pos.fill-down, .pos.fill-flat, .screen.flashing::after { animation: none; }
  .screen-bottom.danger { animation: none; box-shadow: inset 0 0 2.4cqw rgba(229, 72, 77, 0.5); }
  .bg-alt { transition: none; }
  .props, .prop { transition: none; transform: none; }
  .rain { display: none; } /* the rain render already has drops on the glass */
  .pointer { transition: opacity 200ms ease; }
  .desk-mouse .hand { transition: none; }
}