/* ═══════════════════════════════════════════════════════════
   BOX OFFICE WAR — v33 styles (Itch.io 2D Game Assets)
   Dark cinematic theme · animated · mobile-first · offline
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#080b11; --bg2:#0e1219; --card:#131826; --card2:#182031;
  --line:#232c40; --line2:#31405e;
  --text:#eaeef6; --dim:#9aa5ba; --dim2:#78829a;
  /* --muted is the legacy alias for --dim: kept so old rules never fall back to
     an invalid colour and silently inherit. Do not remove. */
  --muted:#9aa5ba; --muted2:#78829a;
  --gold:#f5b942; --gold2:#ffd479; --goldDim:#8a6a1f;
  --green:#3ddc84; --red:#ff5d6c; --blue:#5aa2ff; --purple:#b48bff; --cyan:#4dd6e8;
  /* semantic aliases — referenced by JS-rendered inline styles */
  --pos:#3ddc84; --neg:#ff5d6c; --bad:#ff5d6c; --ok:#3ddc84; --warn:#f5b942;
  /* live broadcast accent — "LIVE" pills, on-air dots, live sports rights */
  --live-red:#ff3b47; --live-red-dim:#a3252d;
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-sm:0 4px 14px rgba(0,0,0,.35);
  --glowGold:0 0 22px rgba(245,185,66,.28);
  --glowLive:0 0 14px rgba(255,59,71,.45);
  --r:14px;
  --radius-sm:8px; --radius:12px; --radius-lg:18px;
  /* hover surface for cards/chips — one place to retune every hover state */
  --card-hover:#1b2436;
  --ease-spring:cubic-bezier(.22,1.2,.36,1);
  --ease-out:cubic-bezier(.2,.85,.3,1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:clip}
.btn, .btab, .tab, .chip, .modal-x, .plan-opt, .calendar-row, .arch, .pick-list .card, .fab-week{
  touch-action:manipulation;
}
/* ── a11y: skip link + visible focus ── */
.skip{position:absolute; left:12px; top:-48px; z-index:300; background:var(--gold); color:#1a1204;
  font-weight:800; padding:10px 16px; border-radius:10px; transition:top .15s}
.skip:focus{top:12px}
:focus-visible{outline:2.5px solid var(--gold2); outline-offset:2px; border-radius:6px}
.modal-x{min-height:44px; min-width:44px}
.name-suggests button{min-height:32px}
::selection{background:rgba(245,185,66,.32)}
body{
  background:var(--bg); color:var(--text); overscroll-behavior-y:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45; min-height:100vh;
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(245,185,66,.085), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(90,162,255,.07), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, rgba(180,139,255,.05), transparent 62%);
  background-attachment:fixed;
}
/* faint film-grain shimmer over everything (pure CSS, no assets) */
body::after{
  content:""; position:fixed; inset:-40%; z-index:1; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1.5%)}
  50%{transform:translate(1.5%,-1%)} 75%{transform:translate(-1%,-2%)} 100%{transform:translate(0,0)}
}
h1,h2,h3,h4{margin:0 0 8px}
button{font-family:inherit}
input[type=text]{font-family:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2c3550,#232c40); border-radius:9px; border:2px solid var(--bg)}
/* ─────────── generic bits ─────────── */
.btn{
  border:1px solid var(--line2); background:var(--card2); color:var(--text);
  border-radius:11px; padding:9px 14px; font-size:14px; font-weight:600;
  cursor:pointer; min-height:40px; position:relative; overflow:hidden;
  transition:transform .08s var(--ease-out), background .18s, border-color .18s, box-shadow .18s;
}
.btn:active{transform:scale(.96) translateY(0); transition-duration:.04s}
.btn-primary{
  background:linear-gradient(135deg,#ffd479,#f0a51e 55%,#d98f10); color:#1a1204; border-color:#f5b942;
  box-shadow:0 4px 20px rgba(245,185,66,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary::after{ /* shine sweep */
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:44%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); animation:shine 3.6s ease-in-out infinite;
}
@keyframes shine{ 0%,55%{left:-70%} 85%,100%{left:150%} }
.btn-danger{background:linear-gradient(135deg,#ff5d6c,#d63c4c); color:#fff; border-color:#ff5d6c; box-shadow:0 4px 18px rgba(255,93,108,.25)}
.btn-ghost{background:transparent}
.btn-alt{background:linear-gradient(135deg,#24334e,#1b2539); border-color:#33456a}
.btn-icon{padding:9px 11px; min-width:42px}
.btn-icon{position:relative}
.bell-badge{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:9px;
  background:var(--red); color:#fff; font-size:10px; font-weight:800; font-style:normal;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:1.5px solid var(--bg); pointer-events:none}
.btn-big{padding:14px; font-size:16px; width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-sm{padding:5px 10px; min-height:32px; font-size:12.5px; border-radius:9px}

/* ═══ Itch.io Game UI Asset Integration ═══ */
.itch-btn-primary {
  background-image: url("assets/itch-ui/buttons/BigBlueButton_Regular.png");
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  border: none; color: #ffffff; font-weight: 800; font-family: var(--font-display);
  text-shadow: 0 2px 4px rgba(0,0,0,.6); padding: 8px 18px; border-radius: 8px;
}
.itch-btn-primary:active {
  background-image: url("assets/itch-ui/buttons/BigBlueButton_Pressed.png");
  transform: translateY(2px);
}
.itch-btn-secondary {
  background-image: url("assets/itch-ui/buttons/SmallBlueSquareButton_Regular.png");
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  border: none; color: #ffffff; font-weight: 700;
  padding: 6px 14px; border-radius: 6px;
}
.itch-btn-secondary:active {
  background-image: url("assets/itch-ui/buttons/SmallBlueSquareButton_Pressed.png");
  transform: translateY(2px);
}
.itch-btn-round {
  background-image: url("assets/itch-ui/buttons/SmallBlueRoundButton_Regular.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border: none; border-radius: 50%; padding: 12px;
}
.itch-btn-round:active {
  background-image: url("assets/itch-ui/buttons/SmallBlueRoundButton_Pressed.png");
  transform: translateY(2px);
}
.itch-btn-danger {
  background-image: url("assets/itch-ui/buttons/BigRedButton_Regular.png");
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
  border: none; color: #ffffff; font-weight: 800;
}
.itch-btn-danger:active {
  background-image: url("assets/itch-ui/buttons/BigRedButton_Pressed.png");
  transform: translateY(2px);
}
.itch-panel {
  background-image: url("assets/itch-ui/wood/wood_tile.png");
  background-size: 120px auto; background-repeat: repeat;
  border-radius: 12px; padding: 18px;
  border: 2px solid rgba(245,185,66,.3);
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
}
.itch-parchment {
  background-image: url("assets/itch-ui/papers/RegularPaper.png");
  background-size: 100% 100%; background-repeat: no-repeat;
  color: #1a1204; border-radius: 8px; padding: 16px;
}
.itch-parchment-special {
  background-image: url("assets/itch-ui/papers/SpecialPaper.png");
  background-size: 100% 100%; background-repeat: no-repeat;
  color: #1a1204; border-radius: 8px; padding: 16px;
}
.itch-star {
  background-image: url("assets/itch-ui/icons/Icon_01.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 24px; height: 24px; display: inline-block; vertical-align: middle;
}
.itch-star-outline {
  background-image: url("assets/itch-ui/icons/Icon_04.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 24px; height: 24px; display: inline-block; vertical-align: middle;
}
.itch-icon-film {
  background-image: url("assets/itch-ui/icons/Icon_06.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 24px; height: 24px; display: inline-block; vertical-align: middle;
}
.itch-icon-video {
  background-image: url("assets/itch-ui/icons/Icon_05.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-icon-gear {
  background-image: url("assets/itch-ui/icons/Icon_10.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-icon-home {
  background-image: url("assets/itch-ui/icons/Icon_05.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-icon-info {
  background-image: url("assets/itch-ui/icons/Icon_12.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-icon-play {
  background-image: url("assets/itch-ui/icons/Icon_09.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-check {
  background-image: url("assets/itch-ui/icons/Icon_07.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
}
.itch-avatar {
  width: 48px; height: 48px; border-radius: 8px;
  background-size: cover; background-position: center;
  border: 2px solid var(--goldDim); box-shadow: var(--shadow-sm);
  image-rendering: pixelated;
}
.itch-avatar-sm { width: 32px; height: 32px; }
.itch-avatar-lg { width: 64px; height: 64px; }

/* ═══ Itch.io Free Game Assets Integration (Tiny Swords & Free Asset Pack) ═══ */
.itch-avatar{
  width:52px; height:52px; border-radius:12px;
  background:rgba(20,28,45,0.85); border:2px solid var(--goldDim);
  box-shadow:0 4px 12px rgba(0,0,0,0.35); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease-out; flex-shrink:0;
}
.itch-avatar:hover{transform:scale(1.1) rotate(-3deg)}
.itch-avatar img{
  width:100%; height:100%; object-fit:contain;
  image-rendering:pixelated; image-rendering:crisp-edges;
}

.itch-btn-primary{
  background-image:url("assets/itch-ui/buttons/BigBlueButton_Regular.png");
  background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  border:none; color:#ffffff; font-weight:700; min-height:44px; padding:10px 20px;
  image-rendering:pixelated; image-rendering:crisp-edges; text-shadow:0 2px 2px rgba(0,0,0,.7);
  box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:pointer;
  transition:transform .08s ease-out;
}
.itch-btn-primary:active{
  background-image:url("assets/itch-ui/buttons/BigBlueButton_Pressed.png");
  transform:translateY(2px) scale(.98);
}
.itch-btn-danger{
  background-image:url("assets/itch-ui/buttons/BigRedButton_Regular.png");
  background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  border:none; color:#ffffff; font-weight:700; min-height:44px; padding:10px 20px;
  image-rendering:pixelated; image-rendering:crisp-edges; text-shadow:0 2px 2px rgba(0,0,0,.7);
  box-shadow:0 4px 12px rgba(0,0,0,.4); cursor:pointer;
  transition:transform .08s ease-out;
}
.itch-btn-danger:active{
  background-image:url("assets/itch-ui/buttons/BigRedButton_Pressed.png");
  transform:translateY(2px) scale(.98);
}
.itch-btn-round{
  background-image:url("assets/itch-ui/buttons/SmallBlueRoundButton_Regular.png");
  background-size:contain; background-position:center; background-repeat:no-repeat;
  border:none; width:44px; height:44px; min-height:44px; padding:0;
  image-rendering:pixelated; image-rendering:crisp-edges; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.itch-btn-round:active{
  background-image:url("assets/itch-ui/buttons/SmallBlueRoundButton_Pressed.png");
  transform:translateY(2px) scale(.94);
}
.itch-banner-header{
  background-image:url("assets/itch-ui/banners/Banner.png");
  background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
  padding:16px 28px; color:#ffffff; text-shadow:0 2px 4px rgba(0,0,0,.85);
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.itch-ribbon{
  background-image:url("assets/itch-ui/ribbons/SmallRibbons.png");
  background-size:contain; background-position:center; background-repeat:no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; font-weight:800; font-size:11.5px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.itch-paper{
  background-image:url("assets/itch-ui/papers/RegularPaper.png");
  background-size:100% 100%; background-position:center;
  image-rendering:pixelated; image-rendering:crisp-edges;
  color:#1b1915; padding:16px; border-radius:10px;
}
.itch-paper *{color:#1b1915}
.itch-special-paper{
  background-image:url("assets/itch-ui/papers/SpecialPaper.png");
  background-size:100% 100%; background-position:center;
  image-rendering:pixelated; image-rendering:crisp-edges;
  color:#1b1915; padding:18px; border-radius:10px;
}
.itch-special-paper *{color:#1b1915}
.itch-wood{
  background-image:url("assets/itch-ui/wood/wood_tile.png");
  background-size:120px auto; background-repeat:repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.itch-bar-track{
  background-image:url("assets/itch-ui/bars/BigBar_Base.png");
  background-size:100% 100%; background-repeat:no-repeat;
  height:18px; width:100%; position:relative; overflow:hidden;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.itch-bar-fill{
  background-image:url("assets/itch-ui/bars/BigBar_Fill.png");
  background-size:auto 100%; background-repeat:repeat-x;
  height:100%; transition:width .25s ease-out;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.itch-icon{
  display:inline-block; width:22px; height:22px; vertical-align:middle;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
/* ═══ Itch.io UI end ═══ */

.chip{
  background:rgba(19,24,38,.85); border:1px solid var(--line); border-radius:999px; padding:4px 11px;
  font-size:13px; white-space:nowrap; color:var(--dim); backdrop-filter:blur(6px);
  transition:border-color .2s, box-shadow .2s;
}
.chip b{color:var(--text); font-variant-numeric:tabular-nums}
.chip-cash b{color:var(--gold2)}
.chip-debt b{color:var(--red)}
/* v10: tappable HUD chips */
.chip-cash,.chip-cash *,#chipDateWrap,#chipDateWrap *{cursor:pointer}
.chip-cash:active,#chipDateWrap:active{transform:scale(.94)}
.chip-cash,#chipDateWrap{transition:transform .12s var(--ease-out)}
.chip-flash-up{animation:chipUp .8s var(--ease-out)}
.chip-flash-down{animation:chipDown .8s var(--ease-out)}
@keyframes chipUp{ 0%{box-shadow:0 0 0 0 rgba(61,220,132,.55); border-color:var(--green)} 100%{box-shadow:0 0 0 14px rgba(61,220,132,0)} }
@keyframes chipDown{ 0%{box-shadow:0 0 0 0 rgba(255,93,108,.55); border-color:var(--red)} 100%{box-shadow:0 0 0 14px rgba(255,93,108,0)} }
.card{
  background:linear-gradient(180deg,var(--card),#111625); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; position:relative;
  transition:transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
.card+.card{margin-top:10px}
.grid{display:grid; gap:10px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.muted{color:var(--dim)} .small{font-size:12.5px} .tiny{font-size:11.5px}
.pos{color:var(--green)} .neg{color:var(--red)} .gold{color:var(--gold2)}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.section-title{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  margin:18px 0 8px; font-weight:700; display:flex; align-items:center; gap:10px;
}
.section-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent)}
.section-title:first-child{margin-top:0}
.bar{height:8px; background:#0a0e16; border-radius:99px; overflow:hidden; border:1px solid var(--line)}
.bar>i{
  display:block; height:100%; border-radius:99px; position:relative; overflow:hidden;
  background:linear-gradient(90deg,var(--gold),#ffdf9a); transition:width .5s var(--ease-out);
}
.bar>i::after{ /* moving shimmer stripe */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  transform:translateX(-100%); animation:barShine 2.2s ease-in-out infinite;
}
@keyframes barShine{ 0%,55%{transform:translateX(-100%)} 90%,100%{transform:translateX(100%)} }
.tag{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:99px; border:1px solid var(--line2); color:var(--dim);
  background:rgba(255,255,255,.02);
}
.tag.gold{color:var(--gold2); border-color:var(--goldDim); background:rgba(245,185,66,.07)}
.tag.green{color:var(--green); border-color:#1d5c3c; background:rgba(61,220,132,.07)}
.tag.red{color:var(--red); border-color:#6e2730; background:rgba(255,93,108,.07)}
.tag.blue{color:var(--blue); border-color:#274a7e; background:rgba(90,162,255,.07)}
.tag.purple{color:var(--purple); border-color:#4d3a7e; background:rgba(180,139,255,.07)}
hr.sep{border:none; border-top:1px solid var(--line); margin:12px 0}

/* ─────────── start screen ─────────── */
.start-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px 14px;
  position:relative; overflow:hidden; z-index:2;
  background:
    radial-gradient(900px 520px at 50% -6%, rgba(245,185,66,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 2px, transparent 2px 7px),
    var(--bg);
}
/* twin projector beams sweeping the marquee */
.start-screen::before{
  content:""; position:absolute; top:-30%; left:-20%; width:60%; height:170%;
  background:linear-gradient(100deg, transparent 30%, rgba(245,185,66,.06) 46%, rgba(255,212,121,.10) 50%, rgba(245,185,66,.06) 54%, transparent 70%);
  transform:rotate(14deg); animation:beamL 9s ease-in-out infinite alternate; pointer-events:none;
}
.start-screen::after{
  content:""; position:absolute; top:-30%; right:-20%; width:60%; height:170%;
  background:linear-gradient(-100deg, transparent 30%, rgba(90,162,255,.05) 46%, rgba(120,180,255,.09) 50%, rgba(90,162,255,.05) 54%, transparent 70%);
  transform:rotate(-14deg); animation:beamR 11s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes beamL{ from{transform:rotate(10deg) translateX(-6%)} to{transform:rotate(20deg) translateX(10%)} }
@keyframes beamR{ from{transform:rotate(-20deg) translateX(-8%)} to{transform:rotate(-9deg) translateX(8%)} }
.start-inner{width:100%; max-width:620px; position:relative; z-index:2; animation:bowFadeUp .6s var(--ease-out) forwards}
.logo-block{text-align:center; margin-bottom:18px; position:relative}
.logo-icon{
  font-size:52px; filter:drop-shadow(0 6px 24px rgba(245,185,66,.45));
  display:inline-block; animation:clapper 3.4s ease-in-out infinite; transform-origin:50% 80%;
}
@keyframes clapper{
  0%,86%,100%{transform:rotate(0)} 90%{transform:rotate(-14deg)} 94%{transform:rotate(8deg)} 97%{transform:rotate(-4deg)}
}
.logo-title{
  font-size:clamp(30px,7vw,46px); letter-spacing:.05em; font-weight:900; margin:6px 0 0;
  background:linear-gradient(100deg,#fff 8%,var(--gold2) 30%,#fff 50%,var(--gold2) 72%,#fff 92%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmerText 5.5s linear infinite;
}
@keyframes shimmerText{ from{background-position:0% 0} to{background-position:-220% 0} }
.logo-title span{color:var(--gold)}
.logo-sub{color:var(--dim); margin:6px 0 0; letter-spacing:.3em; text-transform:uppercase; font-size:11px; animation:subGlow 4s ease-in-out infinite}
/* v28 — "By Movies Flock" credit: sits directly under the game name, quieter
   than the tagline so it reads as a maker's mark rather than a second title. */
.logo-credit{
  display:inline-flex; align-items:center; gap:7px; margin:10px 0 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim2);
  padding:5px 13px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
}
.logo-credit::before{content:""; width:16px; height:1px; background:linear-gradient(90deg, transparent, var(--goldDim))}
.logo-credit::after{content:""; width:16px; height:1px; background:linear-gradient(90deg, var(--goldDim), transparent)}
.logo-credit b{
  font-weight:900; letter-spacing:.12em;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
/* v32.3 start screen enhancements */
.start-badge-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.start-vbadge{
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
  background:rgba(245,185,66,.12); color:var(--gold); border:1px solid rgba(245,185,66,.3);
}

.start-resume-card{
  background:linear-gradient(135deg, rgba(32,40,64,.95), rgba(16,21,34,.98));
  border:1px solid var(--gold); border-radius:18px; padding:18px 20px; margin-bottom:18px;
  box-shadow:var(--glowGold), 0 12px 32px rgba(0,0,0,.6); backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.start-resume-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), #ffe494, var(--gold));
}
.resume-badge{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); background:rgba(245,185,66,.15); padding:3px 8px; border-radius:6px; margin-bottom:8px;
}
.resume-header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.resume-title{font-size:20px; font-weight:900; margin:0; color:#fff; letter-spacing:.02em}
.resume-meta{font-size:12px; color:var(--dim); margin-top:3px}
.resume-cash{font-size:22px; font-weight:900; color:var(--green); letter-spacing:.02em; font-family:'JetBrains Mono',monospace}
.resume-stats-row{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.resume-divider{
  text-align:center; position:relative; margin:16px 0 0;
}
.resume-divider::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line);
}
.resume-divider span{
  position:relative; background:#101522; padding:0 12px; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--dim2);
}

.start-card-header{margin-bottom:14px}
.start-section-tag{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); background:rgba(90,162,255,.12); padding:3px 8px; border-radius:6px; margin-bottom:4px;
}
.start-card-title{font-size:20px; font-weight:900; margin:0; color:#fff}

.arch-header{display:flex; justify-content:space-between; align-items:center}
.arch-tag{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px; background:rgba(255,255,255,.08); color:var(--dim);
}

.start-diff-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px}
.diff-btn{
  display:flex; flex-direction:column; align-items:center; padding:9px 6px; border-radius:10px;
  background:#101522; border:1px solid var(--line); cursor:pointer; transition:all .18s;
}
.diff-btn:hover{border-color:var(--line2); transform:translateY(-1px)}
.diff-btn.sel{background:linear-gradient(135deg,#231d10,#181b14); border-color:var(--gold); box-shadow:var(--glowGold)}
.diff-name{font-size:13px; font-weight:800; color:#fff}
.diff-sub{font-size:10px; color:var(--dim); margin-top:2px}

.start-sandbox-wrap{margin:10px 0 14px}
.sandbox-lbl{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim); cursor:pointer;
  padding:8px 12px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px;
}

.start-slot-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px}
@media(max-width:540px){ .start-slot-grid{grid-template-columns:1fr} }
.start-slot-card{
  background:#101522; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  cursor:pointer; transition:all .18s; position:relative;
}
.start-slot-card:hover{border-color:var(--line2); transform:translateY(-2px)}
.start-slot-card.sel{
  border-color:var(--gold); background:linear-gradient(135deg,#1f1b10,#131824);
  box-shadow:var(--glowGold);
}
.slot-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px}
.slot-num{font-size:11px; font-weight:800; color:var(--dim); text-transform:uppercase; letter-spacing:.08em}
.slot-status-pill{font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:4px; text-transform:uppercase}
.slot-status-pill.occupied{background:rgba(61,220,132,.15); color:var(--green)}
.slot-status-pill.empty{background:rgba(255,255,255,.06); color:var(--dim2)}
.slot-studio-name{font-size:13px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot-meta-row{display:flex; gap:6px; font-size:10.5px; color:var(--dim); margin-top:4px; flex-wrap:wrap}
.slot-cash{color:var(--green); font-weight:700}
.slot-empty-title{font-size:12px; font-weight:700; color:var(--dim2)}
.slot-empty-sub{font-size:10px; color:var(--dim2); margin-top:2px}

.start-card{
  background:linear-gradient(145deg, rgba(25,32,50,.92) 0%, rgba(15,19,30,.95) 100%);
  border:1px solid var(--line2); border-radius:18px; padding:20px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow), 0 0 40px rgba(245,185,66,.05), inset 0 1px 0 rgba(255,255,255,.08);
  animation:bowPop .5s var(--ease-spring) .12s forwards;
}
.field-label{display:block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
#studioName{
  width:100%; background:#0b0f18; border:1px solid var(--line2); color:var(--text);
  border-radius:11px; padding:12px 14px; font-size:16px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#studioName:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,185,66,.14)}
.name-suggests{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.name-suggests button{background:#101522; border:1px solid var(--line); color:var(--dim); font-size:11.5px; border-radius:99px; padding:4px 10px; cursor:pointer; transition:all .15s}
.arch-list{display:grid; gap:8px}
.arch{
  border:1px solid var(--line); border-radius:13px; padding:12px; cursor:pointer; background:#101522;
  transition:border-color .18s, transform .18s var(--ease-out), background .18s, box-shadow .18s;
  animation:bowFadeUp .45s var(--ease-out) forwards;
}
.arch:nth-child(1){animation-delay:.16s} .arch:nth-child(2){animation-delay:.24s} .arch:nth-child(3){animation-delay:.32s}
.arch:hover{border-color:var(--line2); transform:translateY(-2px)}
.arch.sel{
  border-color:var(--gold); background:linear-gradient(135deg,#1f1b10,#171a12);
  box-shadow:var(--glowGold), inset 0 0 24px rgba(245,185,66,.06);
}
.arch h4{font-size:15px; margin:0}
.arch .a-sub{font-size:12.5px; color:var(--dim); margin-top:3px}
.arch .a-stats{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.start-note{text-align:center; color:var(--dim2); font-size:11.5px; margin:12px 0 0}
#btnContinue{margin-top:8px}
.start-feats{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px}
.start-feats span{
  font-size:11px; color:var(--dim); border:1px solid var(--line); padding:4px 12px; border-radius:99px;
  background:rgba(19,24,38,.7); transition:all .2s; border-color:rgba(255,255,255,.08);
}
.start-feats span:hover{border-color:var(--gold); color:#fff}

/* ─────────── app layout ─────────── */
.app{display:flex; flex-direction:column; min-height:100vh; position:relative; z-index:2}
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(8,11,17,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:max(0px, env(safe-area-inset-top));
}
.topbar::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,185,66,.5), transparent)}
.topbar-row{display:flex; align-items:center; gap:10px; padding:9px 14px; flex-wrap:wrap}
.brand{
  font-weight:900; letter-spacing:.03em; font-size:15px; max-width:210px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  background:linear-gradient(90deg,var(--gold2),#f5b942 60%,#c78a1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chip-row{display:flex; gap:6px; flex-wrap:wrap; flex:1}
.topbar-actions{display:flex; gap:6px}
.tabs{
  display:flex; gap:4px; padding:4px 12px; overflow-x:auto; scrollbar-width:none;
  background:rgba(14,20,34,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none; border:none; color:var(--dim); padding:9px 13px 10px; font-size:13px; font-weight:700;
  cursor:pointer; border-radius:8px 8px 0 0; white-space:nowrap; position:relative;
  transition:all .2s var(--ease-out);
}
.tab::after{
  content:""; position:absolute; left:8px; right:8px; bottom:0; height:2.5px; border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--gold),var(--gold2)); transform:scaleX(0); transform-origin:center;
  transition:transform .25s var(--ease-spring);
}
.tab:hover{color:var(--text); background:rgba(255,255,255,0.04)}
.tab.active{color:var(--gold2); text-shadow:0 0 16px rgba(245,185,66,.4); background:rgba(245,185,66,0.06)}
.tab.active::after{transform:scaleX(1); box-shadow:0 -1px 12px rgba(245,185,66,.6)}
.view{flex:1; padding:14px; max-width:1060px; width:100%; margin:0 auto; padding-bottom:86px}
.view-enter{animation:viewIn .32s var(--ease-out)}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.bottomnav{display:none}
/* v28 — mobile sub-tab strip: rendered per group by ui.js, hidden on desktop
   where the full tab bar is visible. */
.subtabs{display:none}
.subtabs[data-group]{scroll-behavior:smooth}
.stab{flex:0 0 auto}

/* staggered card entrances inside freshly switched views */
.view-enter .card{animation:bowFadeUp .4s var(--ease-out) forwards}
.view-enter .card:nth-child(1){animation-delay:.02s} .view-enter .card:nth-child(2){animation-delay:.06s}
.view-enter .card:nth-child(3){animation-delay:.1s}  .view-enter .card:nth-child(4){animation-delay:.14s}
.view-enter .card:nth-child(5){animation-delay:.18s}  .view-enter .card:nth-child(6){animation-delay:.22s}
.view-enter .card:nth-child(n+7){animation-delay:.26s}

/* ─────────── studio tab ─────────── */
.stat-hero{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:12px}
.stat{
  background:linear-gradient(180deg,var(--card),#111625); border:1px solid var(--line); border-radius:var(--r);
  padding:12px; position:relative; overflow:hidden;
  transition:transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
.stat::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 70%); opacity:.55}
.stat:hover{transform:translateY(-2px); border-color:var(--line2); box-shadow:var(--shadow-sm)}
.stat .s-v{font-size:21px; font-weight:900; font-variant-numeric:tabular-nums}
.stat .s-l{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; margin-top:2px}

/* Tooltips */
.stat[data-tooltip]{position:relative}
.stat[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  background:#1a1f2e; color:var(--text); padding:8px 12px; border-radius:8px;
  font-size:11px; line-height:1.4; white-space:normal; max-width:260px;
  border:1px solid var(--line2); box-shadow:var(--shadow); opacity:0; visibility:hidden;
  pointer-events:none; transition:opacity .15s, visibility .15s; z-index:50;
}
.stat[data-tooltip]::before{
  content:""; position:absolute; bottom:122%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#1a1f2e; opacity:0; visibility:hidden;
  transition:opacity .15s, visibility .15s; z-index:50;
}
.stat[data-tooltip]:hover::after,
.stat[data-tooltip]:hover::before{opacity:1; visibility:visible}
.stat[data-tooltip]:focus-within::after,
.stat[data-tooltip]:focus-within::before{opacity:1; visibility:visible}
.newsfeed{display:flex; flex-direction:column; gap:7px; max-height:520px; overflow-y:auto; padding-right:4px}
.news-item{
  display:flex; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:9px 11px; font-size:13px; animation:slideIn .3s var(--ease-out);
  transition:border-color .15s, transform .15s;
}
.news-item:hover{border-color:var(--line2)}
.news-item .n-i{font-size:17px; line-height:1.2}
.news-item .n-w{color:var(--dim2); font-size:10.5px; white-space:nowrap; margin-left:auto}
.news-item.good{border-left:3px solid var(--green)}
.news-item.bad{border-left:3px solid var(--red)}
.news-item.gold{border-left:3px solid var(--gold)}
@keyframes slideIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1}}

/* ─────────── develop tab ─────────── */
.idea-card{position:relative}
.idea-card h4{font-size:16px}
.idea-blurb{color:var(--dim); font-size:12.5px; font-style:italic; margin:4px 0 8px}
.idea-meta{display:flex; gap:6px; flex-wrap:wrap}
.talent-card{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.talent-card .t-avatar{
  font-size:26px; width:42px; text-align:center; flex:none;
  transition:transform .2s var(--ease-spring);
}
.talent-card:hover .t-avatar{transform:scale(1.18) rotate(-4deg)}
.talent-card .t-name{font-weight:800; font-size:14px}
.stars{color:var(--gold); font-size:12px; letter-spacing:1px}
.stars .off{color:#3a4356}
.talent-card .t-stats{font-size:11.5px; color:var(--dim); margin-top:2px}
.pick-list .card:hover, .sel-card{transform:translateY(-2px)}
.sel-card{border-color:var(--gold) !important; background:linear-gradient(135deg,#211c0f,#16180f) !important;
  box-shadow:var(--glowGold), inset 0 0 20px rgba(245,185,66,.06) !important}
.wiz-step{display:flex; gap:6px; margin:4px 0 14px; flex-wrap:wrap}
.wiz-step span{font-size:11px; font-weight:800; letter-spacing:.06em; padding:3px 10px; border-radius:99px; background:#101522; color:var(--dim2); border:1px solid var(--line); transition:all .25s}
.wiz-step span.on{color:var(--gold2); border-color:var(--goldDim); background:#1d1a10; box-shadow:var(--glowGold)}
.wiz-step span.done{color:var(--green); border-color:#1d5c3c}
.pick-list{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); max-height:420px; overflow-y:auto; padding-right:4px}
.pick-list .card{cursor:pointer; transition:border-color .15s, transform .15s var(--ease-out), box-shadow .15s}
.pick-list .card:hover{border-color:var(--goldDim); box-shadow:var(--shadow-sm)}
.slider-row{display:flex; align-items:center; gap:12px}
.slider-row input[type=range]{flex:1; accent-color:var(--gold); min-height:36px}
.slider-val{font-weight:900; font-size:17px; color:var(--gold2); min-width:74px; text-align:right}
.cost-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:4px 12px;
  padding:5px 0; font-size:13.5px; border-bottom:1px dashed var(--line);
}
.cost-line span{min-width:0; overflow-wrap:break-word; flex:0 1 auto}
.cost-line b{
  flex:1 1 auto; min-width:0; text-align:right; font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
.cost-total{display:flex; justify-content:space-between; padding:8px 0 0; font-size:15px; font-weight:900}

/* ─────────── productions ─────────── */
.prod-card .phases{display:flex; gap:3px; margin:10px 0 6px}
.prod-card .ph{flex:1; height:7px; border-radius:99px; background:#0a0e16; border:1px solid var(--line); overflow:hidden; position:relative}
.prod-card .ph>i{position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#3a4f86,#5aa2ff)}
.prod-card .ph.done>i{width:100%; background:linear-gradient(90deg,#1d5c3c,#3ddc84)}
.prod-card .ph.cur>i{background:linear-gradient(90deg,#8a6a1f,#f5b942); overflow:hidden}
.prod-card .ph.cur>i::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);
  animation:barShine 1.6s ease-in-out infinite;
}
.ph-labels{display:flex; justify-content:space-between; font-size:10px; color:var(--dim2); text-transform:uppercase; letter-spacing:.05em}
.calendar-row{display:grid; grid-template-columns:86px 1fr auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:11px; background:#101522; cursor:pointer; transition:all .16s}
.calendar-row:hover{border-color:var(--line2); transform:translateX(2px)}
.calendar-row.sel{border-color:var(--gold); background:#1d1a10; box-shadow:var(--glowGold)}
.cal-when b{display:block; font-size:13px}
.cal-when span{font-size:11px; color:var(--dim)}
.cal-note{font-size:12px; color:var(--dim)}
.cal-note .rival-f{color:var(--red); font-weight:700}
.cal-note .mine-f{color:var(--gold2); font-weight:700}
.film-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:11px 0; border-bottom:1px solid var(--line)}
.film-row:last-child{border-bottom:none}
.film-main{min-width:0}
.film-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.film-head b{min-width:0; overflow-wrap:break-word}
.film-head .film-cb{flex:none; transform:scale(1.15)}
.film-side{text-align:right; min-width:86px}
@media(max-width:560px){
  .film-row{grid-template-columns:minmax(0,1fr)}
  .film-side{text-align:left; min-width:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
}
.chart-bars{display:flex; flex-direction:column; gap:8px}
.chart-bar{display:grid; grid-template-columns:26px 1fr 90px; gap:10px; align-items:center}
.chart-bar .cb-rank{font-weight:900; color:var(--dim2); font-size:15px; text-align:center}
.chart-bar .cb-name{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chart-bar .cb-sub{font-size:11px; color:var(--dim)}
.chart-bar .cb-track{height:22px; background:#0a0e16; border:1px solid var(--line); border-radius:7px; overflow:hidden; grid-column:2/4}
.chart-bar .cb-fill{height:100%; border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-size:11.5px; font-weight:800; color:#0c0d10; min-width:34px; transition:width .5s var(--ease-out)}
.weekly-gross-chart{display:flex; align-items:flex-end; gap:3px; height:110px; padding:8px 0 2px}
.weekly-gross-chart .wg{flex:1; background:linear-gradient(180deg,var(--gold2),var(--gold)); border-radius:4px 4px 0 0; min-height:3px; position:relative}
.weekly-gross-chart .wg span{position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:9.5px; color:var(--dim)}

/* ─────────── OTT ───────── */
.platform-card{display:flex; gap:11px; align-items:center}
.platform-logo{
  width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:21px; flex:none; font-weight:900; color:#0c0d10; box-shadow:inset 0 -6px 12px rgba(0,0,0,.25);
  transition:transform .2s var(--ease-spring);
}
.platform-card:hover .platform-logo{transform:scale(1.08) rotate(-3deg)}
.offer-card{border-left:3px solid var(--purple) !important}
.modal-offer-val{font-size:30px; font-weight:900; color:var(--purple)}

/* Desktop #btnFast styles (mobile styles in @media block below) */
#btnFast{
  min-height:40px; min-width:44px; padding:8px 10px;
  font-size:12.5px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Hover-only styles — only apply on hover-capable devices (desktop) */
@media (hover: hover){
  ::-webkit-scrollbar-thumb:hover{background:#3a4763}
  .btn:hover{border-color:#41506e; transform:translateY(-1px); box-shadow:var(--shadow-sm)}
  .btn-primary:hover{filter:brightness(1.06)}
  .card:hover{border-color:var(--line2)}
  .name-suggests button:hover{color:var(--text); border-color:var(--goldDim); transform:translateY(-1px)}
  .arch:hover{border-color:var(--line2); transform:translateY(-2px)}
  .start-feats span:hover{border-color:var(--goldDim); color:var(--gold2); transform:translateY(-1px)}
  .tab:hover{color:var(--text)}
  .stat:hover{transform:translateY(-2px); border-color:var(--line2); box-shadow:var(--shadow-sm)}
  .stat[data-tooltip]:hover::after,
  .stat[data-tooltip]:hover::before{opacity:1; visibility:visible}
  .news-item:hover{border-color:var(--line2)}
  .talent-card:hover .t-avatar{transform:scale(1.18) rotate(-4deg)}
  .pick-list .card:hover, .sel-card{transform:translateY(-2px)}
  .pick-list .card:hover{border-color:var(--goldDim); box-shadow:var(--shadow-sm)}
  .calendar-row:hover{border-color:var(--line2); transform:translateX(2px)}
  .platform-card:hover .platform-logo{transform:scale(1.08) rotate(-3deg)}
  .modal-x:hover{color:var(--red); background:rgba(255,93,108,.1); transform:rotate(90deg)}
  .bid-card:hover{border-color:var(--purple); transform:translateY(-2px); box-shadow:0 6px 20px rgba(180,139,255,.15)}
  .plan-opt:hover{border-color:var(--line2); transform:translateY(-1px)}
  .review-card:hover{ border-left-color:var(--gold); transform:translateX(2px) }
  .scen:hover{border-color:var(--line2); transform:translateY(-1px)}
  .fold-head:hover{border-color:var(--line2)}
  .card:hover, .stat:hover{border-color:var(--line2); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
  .chip:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(245,185,66,.14)}
  .btn:hover, .btn-alt:hover{border-color:rgba(245,185,66,.35)}
  .btn-danger:hover{border-color:var(--red)}
  .fold-head:hover{border-color:rgba(245,185,66,.4); background:linear-gradient(180deg, rgba(28,34,52,.8), rgba(14,18,28,.5))}
  .news-item:hover{border-color:rgba(245,185,66,.28); transform:translateX(2px)}
}

/* ─────────── finance ─────────── */
.loan-row input[type=range]{width:100%; accent-color:var(--gold); min-height:36px}
.upg-card{display:flex; gap:12px; align-items:flex-start}
.upg-card .u-i{font-size:28px}
.ledger{display:grid; gap:2px}
.ledger .cost-line{border-bottom:1px dashed var(--line)}

/* ─────────── modal ─────────── */
.modal-veil{
  position:fixed; inset:0; background:rgba(4,6,10,.74); backdrop-filter:blur(5px); z-index:100;
  display:flex; align-items:flex-end; justify-content:center; animation:veil .2s ease;
}
@keyframes veil{from{opacity:0}to{opacity:1}}
.modal{
  background:linear-gradient(180deg,#131826,#0e1219); border:1px solid var(--line2); border-bottom:none;
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; border-radius:20px 20px 0 0; padding:18px;
  animation:up .3s var(--ease-spring); box-shadow:0 -20px 60px rgba(0,0,0,.55);
}
@keyframes up{from{transform:translateY(48px) scale(.98); opacity:0}to{transform:translateY(0) scale(1); opacity:1}}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px}
.modal-head h3{font-size:18px; margin:0}
.modal-x{background:none; border:none; color:var(--dim); font-size:20px; cursor:pointer; padding:4px 8px; min-height:36px; border-radius:9px; transition:all .15s}
.modal-x:hover{color:var(--red); background:rgba(255,93,108,.1); transform:rotate(90deg)}
.modal-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.modal-actions .btn{flex:1; min-width:120px}
@media(min-width:700px){
  .modal-veil{align-items:center}
  .modal{border-radius:20px; border-bottom:1px solid var(--line2); box-shadow:var(--shadow)}
}

/* ─────────── toasts ─────────── */
.toasts{position:fixed; top:12px; right:12px; left:12px; z-index:200; display:flex; flex-direction:column; gap:7px; align-items:flex-end; pointer-events:none; max-height:70vh; overflow:hidden}
.toast{
  background:rgba(24,32,49,.94); border:1px solid var(--line2); border-left:3px solid var(--blue); color:var(--text);
  padding:10px 14px; border-radius:11px; font-size:13px; max-width:380px; box-shadow:var(--shadow);
  backdrop-filter:blur(8px); position:relative; overflow:hidden;
  animation:toastIn .38s var(--ease-spring), toastOut .4s ease 4.8s forwards;
}
.toast::after{ /* countdown strip */
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--blue),transparent);
  transform-origin:left; animation:toastCount 5.2s linear forwards;
}
@keyframes toastCount{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.good{border-left-color:var(--green)} .toast.bad{border-left-color:var(--red)} .toast.gold{border-left-color:var(--gold)}
.toast.good::after{background:linear-gradient(90deg,var(--green),transparent)}
.toast.bad::after{background:linear-gradient(90deg,var(--red),transparent)}
.toast.gold::after{background:linear-gradient(90deg,var(--gold),transparent)}
@keyframes toastIn{from{opacity:0; transform:translateX(28px) scale(.95)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px) scale(.97)}}

/* ─────────── game over ─────────── */
.gameover-wrap{text-align:center; padding:30px 10px}
.gameover-wrap .go-i{font-size:56px; animation:bowPop .6s var(--ease-spring) forwards}
.gameover-wrap h2{font-size:26px}

/* ─────────── empire / franchises ─────────── */
.fr-head{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.fr-emblem{
  width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,#2a2416,#4a3a12);
  border:1px solid var(--goldDim); display:flex; align-items:center; justify-content:center;
  font-size:23px; flex:none; box-shadow:var(--glowGold);
}
.fr-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.fr-meters{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-top:10px}
.fr-meter{background:#101522; border:1px solid var(--line); border-radius:10px; padding:8px}
.fr-meter .fm-v{font-weight:900; font-size:15px}
.fr-meter .fm-l{font-size:10.5px; color:var(--dim2); text-transform:uppercase; letter-spacing:.08em}
.pips{letter-spacing:2px; font-size:13px}
.pips .off{color:#333c50}
.bid-card{display:flex; gap:10px; align-items:center; border:1px solid var(--line2); border-radius:12px; padding:10px; margin-top:8px; background:#101522; transition:all .18s}
.bid-card:hover{border-color:var(--purple); transform:translateY(-2px); box-shadow:0 6px 20px rgba(180,139,255,.15)}
.plan-pick{display:grid; gap:8px; margin-top:6px}
.plan-opt{border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; background:#101522; transition:all .16s}
.plan-opt:hover{border-color:var(--line2); transform:translateY(-1px)}
.plan-opt.sel{border-color:var(--gold); background:#1d1a10; box-shadow:var(--glowGold)}
.plan-opt h5{margin:0 0 2px; font-size:14px}
.plan-opt .p-sub{font-size:12px; color:var(--dim)}
.pl-bars{display:flex; align-items:flex-end; gap:3px; height:64px; margin-top:8px}
.pl-bars .pb{flex:1; border-radius:4px 4px 0 0; min-height:3px; position:relative}
.pl-bars .pb.up{background:linear-gradient(180deg,#3ddc84,#1d7a4c)}
.pl-bars .pb.down{background:linear-gradient(180deg,#ff5d6c,#8a2a34)}
.pl-bars .pb span{position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--dim2)}
/* v2: production craft picker + cash-flow forecast */
.craft-block{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#101522; margin-bottom:10px}
.craft-block .row{display:flex; flex-wrap:wrap; gap:6px}
.forecast-bars{display:flex; align-items:flex-end; gap:3px; height:70px; margin-top:6px}
.forecast-bars .fg{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%}
.forecast-bars .fg i{width:100%; background:linear-gradient(180deg,#f5b942,#c78a1f); border-radius:4px 4px 0 0; min-height:3px}
.forecast-bars .fg span{font-size:9px; color:var(--dim2); margin-top:4px}

/* v3: streamer subs + sports rights + windows */
.meter-sub{display:flex; align-items:center; gap:8px}
.meter-sub .sub-cnt{font-weight:900; font-size:15px; color:var(--gold2)}
#scWin .btn,#scDay .btn{min-width:0}
.platform-badge{display:inline-block; padding:2px 8px; border-radius:8px; font-weight:700; font-size:11px; color:#0b0e14}

/* ─────────── responsive hardening: phone & tablet fixes ─────────── */
.view{min-width:0; overflow-x:clip}
.card,.modal,.stat{min-width:0; overflow-wrap:break-word}
.chart-bar{grid-template-columns:26px minmax(0,1fr) auto}
.chart-bar .cb-track{min-width:0}
.chart-bar .cb-fill{overflow:hidden; white-space:nowrap}
.calendar-row{min-width:0}
.cal-note{min-width:0; overflow-wrap:anywhere}
.weekly-gross-chart,.forecast-bars,.pl-bars,.stock-spark{max-width:100%}
.share-card-img,.confetti-canvas{max-width:100%}
.slider-row{flex-wrap:wrap}

/* ─────────── unified phone breakpoint (<= 760px) ─────────── */
@media(max-width:760px){
  body{font-size:14.5px}
  .view{padding:12px 12px calc(124px + env(safe-area-inset-bottom))}
  .topbar-row{padding:8px 10px 6px; gap:6px}
  .brand{font-size:14px; max-width:38vw}
  .chip{font-size:11.5px; padding:4px 8px; min-height:28px}
  .chip-row{gap:4px}
  .topbar-actions{flex-basis:100%; display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:5px; margin-left:0; max-width:none; overflow:visible; padding-bottom:0}
  .topbar-actions .btn{padding:8px 4px; min-height:42px; min-width:0}
  #btnWeek{min-height:44px; font-size:14px; min-width:0}
  #btnFast{min-height:42px; min-width:0; padding:8px 6px; font-size:12.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
  .tabs{display:none}

  /* ── v28 sub-tab strip ─────────────────────────────────────────────
     The bottom bar carries five groups; this strip shows the sections of
     whichever group is active, so all 11 sections stay one tap away. */
  .subtabs{
    display:flex; gap:6px; padding:0 10px 9px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; scroll-padding:0 10px; touch-action:pan-x;
  }
  .subtabs::-webkit-scrollbar{display:none}
  .subtabs:empty{display:none}
  .stab{
    flex:0 0 auto; background:rgba(255,255,255,.045); border:1px solid var(--line);
    color:var(--dim); font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px;
    min-height:36px; cursor:pointer; white-space:nowrap; touch-action:manipulation;
    transition:color .18s, background .18s, border-color .18s, transform .12s var(--ease-out);
  }
  .stab:hover{border-color:var(--line2); color:var(--text)}
  .stab:active{transform:scale(.96)}
  .stab.active{
    color:#1a1204; border-color:var(--gold);
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    box-shadow:0 4px 16px rgba(245,185,66,.3), inset 0 1px 0 rgba(255,255,255,.35);
  }
  /* the bottom bar now holds five groups, so each one gets more room */
  .btab{font-size:10.5px}

  .bottomnav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:rgba(10,13,20,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line2);
    box-shadow:0 -8px 30px rgba(0,0,0,.5);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .bottomnav::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(245,185,66,.4), transparent)}
  .btab{
    flex:1; background:none; border:none; color:var(--dim2); font-size:9.5px; font-weight:700; cursor:pointer;
    display:flex; flex-direction:column; gap:2px; align-items:center; padding:6px 2px; border-radius:10px;
    min-height:54px; position:relative; transition:color .2s;
  }
  .btab span{font-size:20px; transition:transform .25s var(--ease-spring)}
  .btab.active{color:var(--gold2)}
  .btab.active span{transform:translateY(-2px) scale(1.14); filter:drop-shadow(0 3px 10px rgba(245,185,66,.55))}
  .btab.active::before{
    content:""; position:absolute; top:0; left:24%; right:24%; height:2.5px; border-radius:0 0 4px 4px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--gold2), transparent);
    box-shadow:0 2px 10px color-mix(in srgb, var(--gold) 55%, transparent);
  }

  .modal{max-height:93vh; border-radius:22px 22px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); overscroll-behavior:contain}
  .modal-head h3{font-size:19px}
  .modal-actions .btn{min-height:48px; font-size:15px}
  .pick-list{grid-template-columns:1fr; max-height:min(45vh, 460px)}
  .pick-list .card{padding:12px}
  .stat{padding:14px}
  .stat .s-v{font-size:19px}
  .stat-hero{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .chart-bar{grid-template-columns:22px minmax(0,1fr) auto}
  /* v28.9 mobile P2 leftovers */
  .weekly-gross-chart .wg span{font-size:10.5px; top:-17px}
  .trend-board .trend-row{grid-template-columns:minmax(72px,96px) minmax(0,1fr) auto}
  .trend-board .trend-row .tr-name{overflow:visible; text-overflow:clip; white-space:normal; line-height:1.25}
  .row .btn{flex:1 1 auto; min-width:0}
  .start-card{padding:18px 16px}
  .start-inner{padding:14px 10px}
  .logo-title{font-size:30px}
  .chart-bar .cb-fill{font-size:10.5px; padding-right:6px}
  .plan-opt{padding:12px}
  .calendar-row{grid-template-columns:72px minmax(0,1fr); row-gap:6px}
  .calendar-row .tiny.muted:last-child{grid-column:1/-1; text-align:left}
  .toasts{left:10px; right:10px}
  .toast{max-width:100%; font-size:12.5px}
  .split{gap:10px}
  .section-title{font-size:12.5px; margin:22px 0 10px}
  /* Mobile layout polish — eliminate crowding & visual clutter */
  .card{padding:14px; border-radius:12px; margin-bottom:12px}
  .card+.card{margin-top:10px}
  .stat-hero{grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px}
  .stat{padding:10px 12px; border-radius:10px}
  .stat .s-v{font-size:17px}
  .stat .s-l{font-size:10.5px; letter-spacing:0.04em}
  .subnav-pills{display:flex; overflow-x:auto; gap:6px; padding-bottom:8px; -webkit-overflow-scrolling:touch}
  .subnav-pill{flex:0 0 auto; white-space:nowrap; padding:6px 12px; font-size:12px}
  .btn{min-height:40px}
  .btn-sm{min-height:36px; font-size:12.5px; padding:6px 10px}
  .btn-xs{min-height:32px; font-size:11.5px; padding:3px 8px}
  .news-item{padding:9px 10px; font-size:12.5px}
  .talent-card{display:flex; gap:10px; align-items:center}
  .talent-card .t-avatar{width:52px; height:52px; flex:0 0 52px}
  .cost-line{padding:5px 0; font-size:13px}
  .wk-cash{font-size:32px}
  .fab-week{display:block}

  /* Mobile typography clarity */
  .tiny{font-size:11px !important}
  .small{font-size:12px !important}
  .muted{font-size:11.5px !important}
}
/* ─────────── tiny phone breakpoint (<= 400px) ─────────── */
@media(max-width:400px){
  body{font-size:13.5px}
  .view{padding:10px 8px calc(118px + env(safe-area-inset-bottom))}
  .chip:nth-child(4){display:none} /* hide date chip on tiny screens */
  .stat-hero{grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
  .stat{padding:8px 10px}
  .stat .s-v{font-size:15px; overflow-wrap:anywhere}
  .stat .s-l{font-size:10px}
  .g2,.g3{grid-template-columns:minmax(0,1fr); gap:8px}
  #btnWeek{min-height:42px}
  .modal{padding:14px 12px calc(14px + env(safe-area-inset-bottom))}
  .news-item{font-size:12px}
}
@media(min-width:1100px){
  .view{max-width:1160px}
}

/* ═══════════════════════════════════════════════════════════
   v4 — trends board · critic split · stock · tiers · motion
   ═══════════════════════════════════════════════════════════ */

/* ── motion: bars grow in, cards ease up ── */
@keyframes bowGrowW{ from{ width:0 } }
@keyframes bowGrowH{ from{ height:0 } }
@keyframes bowFadeUp{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes bowPop{ 0%{ transform:scale(.94); opacity:.4 } 60%{ transform:scale(1.02) } 100%{ transform:scale(1); opacity:1 } }
.chart-bar .cb-fill{ animation:bowGrowW .65s var(--ease-out) }
.trend-board .tr-fill{ animation:bowGrowW .6s var(--ease-out) }
.bar>i{ animation:bowGrowW .55s var(--ease-out) }
.weekly-gross-chart .wg,
.pl-bars .pb,
.forecast-bars .fg i,
.stock-spark i{ animation:bowGrowH .5s var(--ease-out) }
.chart-bar{ animation:bowFadeUp .35s ease forwards }
.chart-bar:nth-child(2){ animation-delay:.04s } .chart-bar:nth-child(3){ animation-delay:.08s }
.chart-bar:nth-child(4){ animation-delay:.12s } .chart-bar:nth-child(5){ animation-delay:.16s }
.chart-bar:nth-child(6){ animation-delay:.2s }  .chart-bar:nth-child(7){ animation-delay:.24s }

/* ── confetti overlay ── */
.confetti-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999;
}

/* ── genre trend board ── */
.trend-board .trend-row{
  display:grid; grid-template-columns:132px 1fr auto; gap:10px;
  align-items:center; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.03);
}
.trend-board .trend-row:last-of-type{ border-bottom:none }
.trend-board .tr-name{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.trend-board .tr-track{ position:relative; height:9px; background:#0a0e16; border:1px solid var(--line); border-radius:99px; overflow:hidden }
.trend-board .tr-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#4a5570,#7b88a8) }
.trend-board .tr-fill.hot{ background:linear-gradient(90deg,#f5b942,#ff8f4d); box-shadow:0 0 10px rgba(245,185,66,.35) }
.trend-board .tr-fill.cold{ background:linear-gradient(90deg,#3a4a6d,#5aa2ff) }
.trend-board .tr-val{ font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:6px }
@media (max-width:560px){
  .trend-board .trend-row{ grid-template-columns:104px 1fr; }
  .trend-board .tr-val{ grid-column:1 / -1; justify-content:flex-end }
}

/* ── critic / audience split ── */
.split{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px;
  padding:8px 10px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px }
.split .sp-side{ display:flex; align-items:center; gap:8px }
.split .sp-face{ font-size:22px; line-height:1 }
.split b{ font-size:17px }
.review-card{ border-left:3px solid var(--line2); transition:border-color .2s, transform .2s var(--ease-out) }
.review-card:hover{ border-left-color:var(--gold); transform:translateX(2px) }

/* ── stock sparkline ── */
.stock-spark{ display:flex; align-items:flex-end; gap:2px; height:56px; margin:8px 0 10px;
  padding:4px; background:#0a0e16; border:1px solid var(--line); border-radius:10px }
.stock-spark i{ flex:1; min-width:2px; background:linear-gradient(180deg,var(--gold2),var(--goldDim));
  border-radius:2px 2px 0 0; min-height:3px }

/* ── streamer tier cards ── */
.tier-on{ border-color:var(--purple) !important; box-shadow:0 0 0 1px rgba(180,139,255,.35) inset, 0 0 18px rgba(180,139,255,.15) }

/* ── share card modal ── */
.share-card-wrap{ display:flex; justify-content:center; margin:8px 0 4px }
.share-card-img{ max-width:100%; max-height:60vh; border-radius:12px; border:1px solid var(--line2); box-shadow:var(--shadow) }
.btn-xs{ padding:2px 8px; min-height:24px; font-size:11.5px; border-radius:8px }

/* ─────────── v2/v3 expansion styles ─────────── */
/* start screen: scenario / difficulty / slots */
.scen-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-bottom:10px}
.scen{border:1px solid var(--line); border-radius:13px; padding:10px 12px; cursor:pointer; background:#101522; transition:all .18s}
.scen:hover{border-color:var(--line2); transform:translateY(-1px)}
.scen.sel{border-color:var(--purple); background:#17121f; box-shadow:0 0 18px rgba(180,139,255,.18)}
.scen h4{font-size:13.5px; margin:0 0 3px}
.scen .a-sub{font-size:11.5px; color:var(--dim)}
.sandbox-lbl{font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px; margin-left:6px}
.sandbox-lbl input{accent-color:var(--gold)}
.slot{min-width:110px}

/* ── franchise timeline ── */
.fr-timeline{margin-top:8px}
.fr-timeline .tl-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.fr-timeline .tl-track{position:relative;padding-left:16px}
.fr-timeline .tl-track::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--gold2),var(--goldDim))}
.fr-timeline .tl-node{position:relative;padding-left:28px;margin-bottom:4px;display:flex;align-items:flex-start;animation:bowFadeUp .35s var(--ease-out) forwards}
.fr-timeline .tl-marker{position:absolute;left:-4px;top:4px;width:10px;height:10px;background:var(--gold2);border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 2px var(--goldDim),0 0 10px rgba(245,185,66,.5)}
.fr-timeline .tl-gap{height:12px}
.fr-timeline .tl-content{min-width:0}
.fr-timeline .tl-title{font-weight:700;font-size:13px;color:var(--text)}
.fr-timeline .tl-breakout{font-size:9px;background:var(--red);color:#fff;padding:1px 4px;border-radius:4px;margin-left:6px;font-weight:700}
.fr-timeline .tl-meta{font-size:11px;color:var(--dim);margin-top:2px}
.fr-timeline .tl-profit{font-size:11px;margin-top:2px}
.fr-timeline .tl-empty{padding:12px;text-align:center;color:var(--dim);font-style:italic}
.fr-timeline .tl-assets{font-size:11px;color:var(--dim);padding:8px;background:var(--card2);border:1px solid var(--line);border-radius:8px}
.fr-timeline .tl-next{font-size:12px;line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   v8 — week summary · FAB · mobile-first shell
   ═══════════════════════════════════════════════════════════ */

/* floating Next Week action (mobile only) */
.fab-week{
  display:none; position:fixed; right:12px; z-index:56;
  bottom:calc(66px + env(safe-area-inset-bottom));
  border:1px solid #f5b942; border-radius:999px; padding:13px 18px;
  font-size:14px; font-weight:800; color:#1a1204; cursor:pointer;
  background:linear-gradient(135deg,#ffd479,#f0a51e 55%,#d98f10);
  box-shadow:0 8px 26px rgba(245,185,66,.45), inset 0 1px 0 rgba(255,255,255,.4);
  animation:fabPulse 2.6s ease-in-out infinite;
}
@keyframes fabPulse{ 0%,100%{box-shadow:0 8px 26px rgba(245,185,66,.45), inset 0 1px 0 rgba(255,255,255,.4)} 50%{box-shadow:0 8px 34px rgba(245,185,66,.65), inset 0 1px 0 rgba(255,255,255,.4)} }
.fab-week:active{transform:scale(.95)}

/* week summary popup */
.wk-head{
  text-align:center; padding:10px 8px 4px; border-bottom:1px solid var(--line); margin-bottom:10px;
  animation:bowFadeUp .4s var(--ease-out) forwards;
}
.wk-when{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:800}
.wk-cash{font-size:34px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.2;
  text-shadow:0 0 30px rgba(61,220,132,.25)}
.wk-cash.neg{text-shadow:0 0 30px rgba(255,93,108,.25)}



/* ═══════════════════════════════════════════════════════════
   v7 — polish pass: reduce-motion · focus · fine detail
   ═══════════════════════════════════════════════════════════ */
body.rm-motion *, body.rm-motion *::before, body.rm-motion *::after{
  animation-duration:.001s !important; animation-iteration-count:1 !important;
  transition-duration:.001s !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  body::after{display:none}
  .btn-primary::after{display:none}
}

/* ═══════════════════════════════════════════════════════════
   v15 — fold (collapsible sections) · fan mail
   ═══════════════════════════════════════════════════════════ */
.fold{margin:6px 0}
.fold-head{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  padding:9px 10px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));}
.fold-head:hover{border-color:var(--line2)}
.fold-head:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.fold-caret{display:inline-block; color:var(--muted); font-size:12px; transition:transform .18s var(--ease-out)}
.fold.open .fold-caret{transform:rotate(90deg)}
.fold-body{margin-top:6px}
.mail-item{padding:9px 2px; border-bottom:1px dashed var(--line)}
.mail-item:last-child{border-bottom:none}
.mail-item.unread{border-left:3px solid var(--gold); padding-left:8px; border-radius:4px}

/* ═══════════════════════════════════════════════════════════
   v17 — CINEMATIC HUD 2.0
   Design language borrowed from 21st.dev's game-UI collection
   (HUD stat panels, segmented XP bars, achievement medallions)
   and Uiverse's glass / gradient-border / glow patterns — rebuilt
   in vanilla CSS: zero external assets, fully offline, and every
   animation respects the reduced-motion switches above.
   ═══════════════════════════════════════════════════════════ */
:root{
  --hudGold: rgba(245,185,66,.22);
  --hudGlow: 0 12px 36px rgba(0,0,0,.45), 0 0 26px rgba(245,185,66,.10);
  --hudRing: linear-gradient(155deg, rgba(245,185,66,.22), rgba(49,64,94,.6) 40%, rgba(35,44,64,.6));
}

/* ── HUD panels: cards & stats wear a gradient border ring ── */
.card, .stat{
  border:1px solid transparent;
  background:
    linear-gradient(180deg, var(--card), #10141f) padding-box,
    var(--hudRing) border-box;
}
.card:hover, .stat:hover{
  border-color:transparent;
  box-shadow: var(--hudGlow), inset 0 1px 0 rgba(255,255,255,.05);
}
.card{box-shadow: inset 0 1px 0 rgba(255,255,255,.04)}

/* stat medallions: gradient gold value + hover lift (21st.dev stat-panel vibe) */
.stat .s-v{
  background:linear-gradient(120deg,#f7e2b0,var(--gold2) 45%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 8px rgba(245,185,66,.22));
}

/* ── section titles: HUD label with a gold diamond marker ── */
.section-title::before{
  content:"◆"; font-size:7px; color:var(--gold);
  text-shadow:0 0 9px rgba(245,185,66,.65); letter-spacing:0;
}
.section-title::after{background:linear-gradient(90deg, rgba(245,185,66,.30), rgba(49,64,94,.35) 45%, transparent)}

/* ── XP-style segmented bars (8-bit progress, modernized) ── */
.bar>i::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(10,12,18,.28) 9px 11px);
}
.bar{box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}

/* ── HUD chips (topbar): glass ring + signal dot ── */
.chip{
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(22,28,44,.92), rgba(14,18,28,.92)) padding-box,
    linear-gradient(155deg, rgba(245,185,66,.20), rgba(49,64,94,.65)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.35);
}
.chip:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(245,185,66,.14)}
.chip-cash::before, #chipDateWrap::before{
  content:"●"; font-size:7px; margin-right:5px; vertical-align:1px;
  color:var(--gold); text-shadow:0 0 7px rgba(245,185,66,.8);
}
.chip-debt::before{
  content:"●"; font-size:7px; margin-right:5px; vertical-align:1px;
  color:var(--red); text-shadow:0 0 7px rgba(255,93,108,.8);
}

/* ── buttons: sheen cap on primary, glass depth on the rest ── */
.btn{box-shadow: inset 0 1px 0 rgba(255,255,255,.05)}
.btn-primary{box-shadow:0 4px 22px rgba(245,185,66,.32), inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}
.btn-alt:hover, .btn:hover{border-color:rgba(245,185,66,.35)}
.btn-danger:hover{border-color:var(--red)}

/* ── modal: ring + stronger veil ── */
.modal{
  border:1px solid transparent;
  background:
    linear-gradient(180deg, #141a29, #0e1219) padding-box,
    linear-gradient(180deg, rgba(245,185,66,.30), rgba(49,64,94,.45)) border-box;
}

/* ── tags & toasts: HUD glow accents ── */
.tag.gold{box-shadow:inset 0 0 9px rgba(245,185,66,.14)}
.tag.green{box-shadow:inset 0 0 9px rgba(61,220,132,.12)}
.tag.red{box-shadow:inset 0 0 9px rgba(255,93,108,.12)}
.toast{border:1px solid rgba(49,64,94,.7); border-left:3px solid var(--blue)}

/* ── chart bars: glossy cap ── */
.weekly-gross-chart .wg, .cb-fill{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(245,185,66,.10);
}

/* ── fold headers: quest-panel styling ── */
.fold-head{
  border:1px solid rgba(49,64,94,.8);
  background:linear-gradient(180deg, rgba(22,28,44,.7), rgba(14,18,28,.5));
}
.fold-head:hover{border-color:rgba(245,185,66,.4); background:linear-gradient(180deg, rgba(28,34,52,.8), rgba(14,18,28,.5))}
.fold-caret{color:var(--gold); text-shadow:0 0 8px rgba(245,185,66,.5)}
.fold.open .fold-head{border-color:rgba(245,185,66,.28)}

/* ── news & mail: quiet hover accents ── */
.news-item{transition:border-color .18s, transform .18s var(--ease-out)}
.news-item:hover{border-color:rgba(245,185,66,.28); transform:translateX(2px)}
.mail-item.unread{border-left-color:var(--gold2)}

/* ── selection surfaces (wizard / schedule pickers) ── */
.plan-opt.sel, .calendar-row.sel{
  box-shadow:0 0 0 1px rgba(245,185,66,.35), 0 0 20px rgba(245,185,66,.12);
}



/* ── scrollbar: gold whisper ── */
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4a3d1e,#2c3550)}

/* ── start screen: logo ring ── */
.logo-icon{
  box-shadow:0 0 0 1px rgba(245,185,66,.35), 0 0 34px rgba(245,185,66,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════
   v18 — FERALUI GRADIENT PASS
   Palettes designed in the FeralUI gradient studio and rebuilt
   locally: "Opening night sky" aurora (asset: opening-night.jpg,
   68KB) behind the start screen; the aurora palette (Kerria gold
   #F8B500 · violet #B48BFF · cyan #4DD6E8) washes the app body;
   "Premiere gold" drives the primary button in oklab.
   ═══════════════════════════════════════════════════════════ */
.start-screen{
  background:
    radial-gradient(900px 520px at 50% -6%, rgba(245,185,66,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(8,11,17,.46), rgba(8,11,17,.16) 42%, rgba(8,11,17,.66)),
    url("assets/opening-night.jpg") center/cover no-repeat,
    var(--bg);
}
body{
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(248,181,0,.10), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(77,214,232,.055), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, rgba(180,139,255,.07), transparent 62%);
}
.btn-primary{
  background:linear-gradient(135deg,#FCC800,#F8B500 55%,#E09A00);
  background:linear-gradient(135deg in oklab,#FCC800,#F8B500 55%,#E09A00);
}
.section-title::after{background:linear-gradient(90deg, rgba(245,185,66,.32), rgba(180,139,255,.20) 45%, transparent)}
.toast::after{background:linear-gradient(90deg,var(--gold),var(--cyan),transparent)}
.tab.active{color:var(--gold2); text-shadow:0 0 18px rgba(248,181,0,.45)}

/* ═══════════════════════════════════════════════════════════
   v19 — THEME SYSTEM (five FeralUI-designed themes)
   Every accent color now flows from the --gold/--gold2 token set,
   so a theme is one body[data-theme] block. Gradients per theme
   were designed in the FeralUI Gradient Builder:
     Midnight Gold  — "Premiere gold"  #FCC800→#F8B500→#E09A00
     Aurora Night   — "Aurora reel"    #A2D7DD→#4DD6E8→#007BBB
     Violet Premiere— "Violet premiere"#B28FCE→#A59ACA→#745399
     Red Carpet     — "Red carpet rose"#F5B1AA→#F0908D→#B5484D
     Silver Screen  — "Silver screen"  #F4F6F8→#C9CCD1→#8E95A3
   Semantic colors (green=hit, red=flop, blue=info) stay fixed so
   the game stays readable in every theme.
   ═══════════════════════════════════════════════════════════ */
:root{
  --hudRing: linear-gradient(155deg, color-mix(in srgb, var(--gold) 22%, transparent), rgba(49,64,94,.6) 40%, rgba(35,44,64,.6));
  --hudGlow: 0 12px 36px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--gold) 10%, transparent);
  --btnA:#FCC800; --btnB:#F8B500; --btnC:#E09A00; --btnText:#1a1204;
}
/* re-tint the hardcoded-gold details from v17/v18 to the accent token */
.stat .s-v{
  background:linear-gradient(120deg, var(--gold2), var(--gold) 55%, var(--goldDim));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 8px color-mix(in srgb, var(--gold) 24%, transparent));
}
.tab.active{text-shadow:0 0 18px color-mix(in srgb, var(--gold2) 45%, transparent)}
.tab.active::after{box-shadow:0 -1px 10px color-mix(in srgb, var(--gold2) 50%, transparent)}
.section-title::before{text-shadow:0 0 9px color-mix(in srgb, var(--gold) 65%, transparent)}
.section-title::after{background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 32%, transparent), color-mix(in srgb, var(--purple) 20%, transparent) 45%, transparent)}
.chip-cash::before, #chipDateWrap::before{text-shadow:0 0 7px color-mix(in srgb, var(--gold) 80%, transparent)}
.chip:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px color-mix(in srgb, var(--gold) 14%, transparent)}
.btn:hover, .btn-alt:hover{border-color:color-mix(in srgb, var(--gold) 35%, var(--line2))}
.btn-primary{
  background:linear-gradient(135deg, var(--btnA), var(--btnB) 55%, var(--btnC));
  background:linear-gradient(135deg in oklab, var(--btnA), var(--btnB) 55%, var(--btnC));
  color:var(--btnText); border-color:var(--btnB);
  box-shadow:0 4px 22px color-mix(in srgb, var(--btnB) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
.bar>i{background:linear-gradient(90deg, var(--gold), var(--gold2))}
.weekly-gross-chart .wg, .cb-fill{box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px color-mix(in srgb, var(--gold) 10%, transparent)}
.fold-caret{text-shadow:0 0 8px color-mix(in srgb, var(--gold) 50%, transparent)}
.fold-head:hover{border-color:color-mix(in srgb, var(--gold) 40%, var(--line2))}
.fold.open .fold-head{border-color:color-mix(in srgb, var(--gold) 28%, var(--line2))}
.news-item:hover{border-color:color-mix(in srgb, var(--gold) 28%, var(--line2))}
.plan-opt.sel, .calendar-row.sel{box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 0 20px color-mix(in srgb, var(--gold) 12%, transparent)}
.logo-icon{box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 0 34px color-mix(in srgb, var(--gold) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.2)}
.tag.gold{border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 8%, transparent)}

/* ── Hover elevation guards: keep tap states clean on touch devices ── */
@media (hover: hover) {
  .btn:hover{border-color:#41506e; transform:translateY(-1px); box-shadow:var(--shadow-sm)}
  .btn-primary:hover{filter:brightness(1.06)}
  .card:hover{border-color:var(--line2)}
  .name-suggests button:hover{color:var(--text); border-color:var(--goldDim); transform:translateY(-1px)}
  .arch:hover{border-color:var(--line2); transform:translateY(-2px)}
  .start-feats span:hover{border-color:var(--goldDim); color:var(--gold2); transform:translateY(-1px)}
  .tab:hover{color:var(--text)}
  .stat:hover{transform:translateY(-2px); border-color:var(--line2); box-shadow:var(--shadow-sm)}
  .stat[data-tooltip]:hover::after,
  .stat[data-tooltip]:hover::before{opacity:1; visibility:visible}
  .news-item:hover{border-color:var(--line2)}
  .talent-card:hover .t-avatar{transform:scale(1.18) rotate(-4deg)}
  .pick-list .card:hover, .sel-card{transform:translateY(-2px)}
  .pick-list .card:hover{border-color:var(--goldDim); box-shadow:var(--shadow-sm)}
  .calendar-row:hover{border-color:var(--line2); transform:translateX(2px)}
  .platform-card:hover .platform-logo{transform:scale(1.08) rotate(-3deg)}
  .modal-x:hover{color:var(--red); background:rgba(255,93,108,.1); transform:rotate(90deg)}
  .bid-card:hover{border-color:var(--purple); transform:translateY(-2px); box-shadow:0 6px 20px rgba(180,139,255,.15)}
  .plan-opt:hover{border-color:var(--line2); transform:translateY(-1px)}
  .review-card:hover{border-left-color:var(--gold); transform:translateX(2px)}
  .scen:hover{border-color:var(--line2); transform:translateY(-1px)}
  .fold-head:hover{border-color:color-mix(in srgb, var(--gold) 40%, var(--line2))}
  .chip:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(245,185,66,.14)}
  .btn-alt:hover, .btn:hover{border-color:color-mix(in srgb, var(--gold) 35%, var(--line2))}
  .btn-danger:hover{border-color:var(--red)}
  .news-item:hover{border-color:color-mix(in srgb, var(--gold) 28%, var(--line2)); transform:translateX(2px)}
}
@media (hover: none) {
  .stat[data-tooltip]::after,
  .stat[data-tooltip]::before{display:none !important}
  .btn:active, .btab:active, .tab:active, .chip:active, .modal-x:active, .plan-opt:active, .arch:active, .fab-week:active{
    transform:scale(0.96) !important;
    opacity:0.88;
  }
}
body{
  background-image:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--purple) 7%, transparent), transparent 62%);
}


/* ── Aurora Night — FeralUI "Aurora reel" on Samurai-indigo depths ── */
body[data-theme="aurora"]{
  --bg:#0a0f15; --bg2:#0d141c; --card:#0f1822; --card2:#12202b;
  --line:#1b2f3d; --line2:#28475a;
  --gold:#4dd6e8; --gold2:#a2d7dd; --goldDim:#155e75;
  --btnA:#A2D7DD; --btnB:#4DD6E8; --btnC:#007BBB; --btnText:#04222e;
  --hudRing: linear-gradient(155deg, color-mix(in srgb, var(--gold) 20%, transparent), rgba(40,71,90,.65) 40%, rgba(27,47,61,.6));
  background-image:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(39,74,120,.16), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 62%);
}
/* ── Violet Premiere — FeralUI "Violet premiere" on Deep purple ── */
body[data-theme="violet"]{
  --bg:#0d0b16; --bg2:#110e1c; --card:#161027; --card2:#1b1433;
  --line:#2a2140; --line2:#3d3058;
  --gold:#b28fce; --gold2:#cfc0ea; --goldDim:#4a2f6e;
  --btnA:#B28FCE; --btnB:#A59ACA; --btnC:#745399; --btnText:#170b28;
  --hudRing: linear-gradient(155deg, color-mix(in srgb, var(--gold) 22%, transparent), rgba(61,48,88,.65) 40%, rgba(42,33,64,.6));
  background-image:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, rgba(116,83,153,.14), transparent 62%);
}
/* ── Red Carpet — FeralUI "Red carpet rose" on deep maroon ── */
body[data-theme="carpet"]{
  --bg:#120b0c; --bg2:#170e10; --card:#1e1114; --card2:#251519;
  --line:#3a2126; --line2:#553039;
  --gold:#f09199; --gold2:#f5b1aa; --goldDim:#7e3a42;
  --btnA:#F5B1AA; --btnB:#F0908D; --btnC:#B5484D; --btnText:#2b0d10;
  --hudRing: linear-gradient(155deg, color-mix(in srgb, var(--gold) 22%, transparent), rgba(85,48,57,.65) 40%, rgba(58,33,38,.6));
  background-image:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(126,58,66,.14), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 62%);
}
/* ── Silver Screen — FeralUI "Silver screen": classic monochrome cinema ── */
body[data-theme="silver"]{
  --bg:#0b0c0e; --bg2:#0f1114; --card:#15171a; --card2:#1b1e23;
  --line:#26292f; --line2:#3a3f48;
  --gold:#c9ccd1; --gold2:#eceef1; --goldDim:#565b64;
  --btnA:#F4F6F8; --btnB:#C9CCD1; --btnC:#8E95A3; --btnText:#22252b;
  --hudRing: linear-gradient(155deg, color-mix(in srgb, var(--gold) 24%, transparent), rgba(58,63,72,.65) 40%, rgba(38,41,47,.6));
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(236,238,241,.07), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(142,149,163,.08), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, rgba(35,38,43,.5), transparent 62%);
}
/* ── Neon Cyberpunk — High-tech laser grid & vibrant magenta/cyan ── */
body[data-theme="cyberpunk"]{
  --bg:#070a14; --bg2:#0b1122; --card:#0f1730; --card2:#172244;
  --line:#1f2f5c; --line2:#334d94;
  --gold:#00f0ff; --gold2:#70f7ff; --goldDim:#007a82;
  --cyan:#00f0ff; --purple:#ff007f;
  --btnA:#70F7FF; --btnB:#00F0FF; --btnC:#FF007F; --btnText:#040e1f;
  --hudRing: linear-gradient(155deg, rgba(0,240,255,.35), rgba(255,0,127,.25) 50%, rgba(31,47,92,.7));
  background-image:
    radial-gradient(1100px 560px at 85% -10%, rgba(0,240,255,.14), transparent 60%),
    radial-gradient(880px 520px at -10% 110%, rgba(255,0,127,.12), transparent 58%),
    radial-gradient(700px 420px at 50% 120%, rgba(15,23,48,.8), transparent 65%);
}
/* ── 1920s Film Noir — Vintage sepia, cigar smoke & classic cinema ── */
body[data-theme="noir"]{
  --bg:#120f0c; --bg2:#181410; --card:#201a14; --card2:#2a231b;
  --line:#3d3328; --line2:#57493a;
  --gold:#d4af37; --gold2:#e6cf7a; --goldDim:#69561a;
  --btnA:#E6CF7A; --btnB:#D4AF37; --btnC:#8C6D1F; --btnText:#1e1708;
  --hudRing: linear-gradient(155deg, rgba(212,175,55,.28), rgba(87,73,58,.65) 45%, rgba(61,51,40,.6));
  background-image:
    radial-gradient(1100px 560px at 80% -12%, rgba(212,175,55,.12), transparent 62%),
    radial-gradient(880px 520px at -10% 108%, rgba(87,73,58,.16), transparent 60%),
    radial-gradient(700px 420px at 55% 118%, rgba(32,26,20,.6), transparent 62%);
}
/* ── Titanium Slate — Ultra-modern minimalist executive studio ── */
body[data-theme="slate"]{
  --bg:#090d14; --bg2:#0e131d; --card:#131a26; --card2:#1a2333;
  --line:#243044; --line2:#364763;
  --gold:#94a3b8; --gold2:#cbd5e1; --goldDim:#475569;
  --btnA:#CBD5E1; --btnB:#94A3B8; --btnC:#475569; --btnText:#090d14;
  --hudRing: linear-gradient(155deg, rgba(148,163,184,.25), rgba(54,71,99,.6) 40%, rgba(36,48,68,.6));
  background-image:
    radial-gradient(1100px 560px at 82% -12%, rgba(148,163,184,.10), transparent 62%),
    radial-gradient(880px 520px at -12% 108%, rgba(36,48,68,.20), transparent 60%);
}
/* ── Studio Emerald — Prestige Beverly Hills luxury mogul ── */
body[data-theme="emerald"]{
  --bg:#06130d; --bg2:#0a1c14; --card:#0f271c; --card2:#153426;
  --line:#1e4835; --line2:#2d6a4f;
  --gold:#10b981; --gold2:#6ee7b7; --goldDim:#065f46;
  --btnA:#6EE7B7; --btnB:#10B981; --btnC:#047857; --btnText:#031c11;
  --hudRing: linear-gradient(155deg, rgba(16,185,129,.30), rgba(45,106,79,.65) 40%, rgba(30,72,53,.6));
  background-image:
    radial-gradient(1100px 560px at 80% -12%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(880px 520px at -10% 108%, rgba(6,95,70,.18), transparent 60%);
}
/* theme swatches in Settings */
.theme-swatch{display:inline-flex; align-items:center; gap:6px}
.theme-dot{width:13px; height:13px; border-radius:50%; border:1px solid rgba(255,255,255,.3); box-shadow:inset 0 1px 2px rgba(255,255,255,.35)}

/* ═════════════════════════════════════════════════════════════════════════
   FILM FRAME BORDERS & POSTER ARTWORK STYLES
   ═════════════════════════════════════════════════════════════════════════ */
.film-frame-cell {
  position: relative;
  border-left: 14px solid #14171d;
  border-right: 14px solid #14171d;
  background-clip: padding-box;
}
.film-frame-cell::before,
.film-frame-cell::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 8px;
  background-image: repeating-linear-gradient(to bottom, #fff 0px, #fff 6px, transparent 6px, transparent 14px);
  opacity: 0.28;
  pointer-events: none;
}
.film-frame-cell::before { left: -11px; }
.film-frame-cell::after { right: -11px; }

.film-frame-gold {
  position: relative;
  border: 2px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 0 16px var(--gold-glow), inset 0 0 8px rgba(245,185,66,.2);
}
.film-frame-gold::before {
  content: "★ ★ ★";
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--bg);
  padding: 0 8px;
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 2px;
}

.film-frame-neon {
  border: 2px solid var(--cyan);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(0,240,255,.45), 0 0 28px rgba(255,0,127,.25);
}

.film-frame-vhs {
  border: 2px dashed #e6cf7a;
  background: linear-gradient(rgba(18,15,12,.92), rgba(18,15,12,.92)), repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 2px, transparent 2px, transparent 4px);
  border-radius: 6px;
}

/* ═════════════════════════════════════════════════════════════════════════
   PRODUCTION WEATHER FX OVERLAYS
   ═════════════════════════════════════════════════════════════════════════ */
.weather-fx-rain {
  position: relative;
  overflow: hidden;
}
.weather-fx-rain::after {
  content: "";
  position: absolute;
  top: -50px; left: -50px; right: -50px; bottom: -50px;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 90%, rgba(120,200,255,0.25) 92%, rgba(255,255,255,0) 96%);
  background-size: 60px 60px;
  animation: weatherRainAnim 0.75s linear infinite;
  pointer-events: none;
  opacity: 0.65;
}
@keyframes weatherRainAnim {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, 60px); }
}

.weather-fx-snow {
  position: relative;
  overflow: hidden;
}
.weather-fx-snow::after {
  content: "";
  position: absolute;
  top: -40px; left: -40px; right: -40px; bottom: -40px;
  background: radial-gradient(circle at 10px 10px, rgba(255,255,255,0.7) 1.5px, transparent 0),
              radial-gradient(circle at 35px 40px, rgba(255,255,255,0.6) 2px, transparent 0),
              radial-gradient(circle at 55px 15px, rgba(255,255,255,0.8) 1.2px, transparent 0);
  background-size: 70px 70px;
  animation: weatherSnowAnim 2.8s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes weatherSnowAnim {
  0% { transform: translateY(0); }
  100% { transform: translateY(70px); }
}

.weather-fx-heat {
  position: relative;
  overflow: hidden;
}
.weather-fx-heat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(255,140,0,0.18), transparent 70%);
  pointer-events: none;
}

.weather-fx-neon {
  position: relative;
  overflow: hidden;
}
.weather-fx-neon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,240,255,.08), rgba(255,0,127,.08));
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════════
   STUDIO CAMPUS MAP STYLING
   ═════════════════════════════════════════════════════════════════════════ */
.studio-campus-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .studio-campus-map {
    grid-template-columns: repeat(2, 1fr);
  }
}
.studio-lot-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  position: relative;
}
.studio-lot-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.studio-lot-tile.active-tier {
  border-color: var(--border-bright);
}
.studio-lot-tile.active-tier.gold-tier {
  border-color: var(--gold);
  background: linear-gradient(145deg, var(--bg-card), rgba(245,185,66,0.06));
}
.studio-lot-tile .lot-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
}
.studio-lot-tile .lot-name {
  font-weight: 600;
  font-size: 12px;
}
.studio-lot-tile .lot-status {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── THEME HYGIENE (Item 89 & 167) ──
   CRITICAL: Whenever setting `background` on text clipped elements,
   re-declare `-webkit-background-clip: text; background-clip: text;`
   because CSS shorthand resets `background-clip` to `border-box`! */
[style*="-webkit-background-clip:text"],
.logo-title, .cb-fill, .pos-grad {
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Offline Banner (Item 70) ── */
.offline-banner{
  position:sticky; top:0; z-index:999;
  background:linear-gradient(90deg,#1e293b,#0f172a);
  color:var(--cyan); border-bottom:1px solid var(--cyan);
  text-align:center; padding:8px 12px; font-size:12.5px; font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* ── Command Palette (Item 68 & 134) ── */
.cmd-palette-box{
  background:#0e131f; border:1px solid var(--line2); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.7); max-width:540px; margin:0 auto;
}
.cmd-input-wrap{display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); background:#121826}
.cmd-input{width:100%; background:transparent; border:none; color:var(--text); font-size:16px; outline:none}
.cmd-list{max-height:360px; overflow-y:auto; padding:6px}
.cmd-item{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:8px; cursor:pointer; color:var(--text); transition:background .12s}
.cmd-item:hover, .cmd-item.active{background:rgba(245,185,66,.14); color:var(--gold2)}
.cmd-key{font-size:11px; background:rgba(255,255,255,.08); padding:2px 6px; border-radius:4px; color:var(--dim)}

/* ── Pipeline Gantt (Item 96) ── */
.gantt-chart{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:10px; padding:10px; margin-top:8px}
.gantt-row{display:grid; grid-template-columns:120px 1fr 65px; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04)}
.gantt-row:last-child{border-bottom:none}
.gantt-title{font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gantt-track{height:12px; border-radius:6px; background:rgba(255,255,255,.06); position:relative; overflow:hidden}
.gantt-fill{height:100%; border-radius:6px; transition:width .3s}
.gantt-fill.pre{background:var(--blue)}
.gantt-fill.shoot{background:var(--gold)}
.gantt-fill.post{background:var(--purple)}
.gantt-fill.ready{background:var(--green)}

/* ── Metacritic-style Review Distribution (Item 95) ── */
.dist-bar-wrap{display:flex; height:8px; border-radius:4px; overflow:hidden; margin:6px 0; background:rgba(255,255,255,.06)}
.dist-pos{background:var(--green)}
.dist-mid{background:var(--gold)}
.dist-neg{background:var(--red)}

/* ── Studio Level XP Bar (Item 10) ── */
.xp-bar-container{display:flex; align-items:center; justify-content:space-between; position:relative; margin:16px 6px 8px}
.xp-bar-track{position:absolute; left:0; right:0; height:4px; background:var(--line); z-index:1}
.xp-bar-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width .4s}
.xp-node{position:relative; z-index:2; background:#121724; border:2px solid var(--line); border-radius:99px; padding:4px 10px; font-size:11px; font-weight:700; color:var(--dim)}
.xp-node.active{border-color:var(--gold); color:var(--gold2); box-shadow:0 0 14px rgba(245,185,66,.45); background:#1a1c29}
.xp-node.done{border-color:var(--green); color:var(--green)}

/* ── Seasonal Corridor Heatmap (Item 4) ── */
.season-heatmap{display:grid; grid-template-columns:repeat(13,1fr); gap:3px; margin:8px 0}
.season-cell{height:22px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; cursor:default}
.season-cell.hot{background:rgba(245,185,66,.28); color:var(--gold2); border:1px solid var(--gold)}
.season-cell.mid{background:rgba(255,255,255,.06); color:var(--dim)}
.season-cell.dead{background:rgba(255,93,108,.2); color:var(--red); border:1px solid rgba(255,93,108,.4)}

/* ── Language Switcher Flags ── */
#langEn::before{content:"🇺🇸 "}
#langHi::before{content:"🇮🇳 "}

/* ═══════════════════════════════════════════════════════════
   v17 — CINEMATIC HUD 2.0 (Dashboard, Calendar, Film Modal, Franchise Graph, Exec Office)
   ═══════════════════════════════════════════════════════════ */

/* ── Dashboard: stat hero with economic badge ── */
.stat-hero{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:12px}
.stat{transition:transform .18s var(--ease-out), border-color .18s, box-shadow .18s}

/* ── Calendar grid ── */
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-head{text-align:center; font-size:10px; color:var(--dim2); font-weight:700; padding:4px 0}
.cal-cell{min-height:70px; padding:4px; background:#101522; border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:all .15s}
.cal-cell:hover{border-color:var(--line2); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.cal-cell.current{border-color:var(--gold); background:#1a1610; box-shadow:0 0 12px rgba(245,185,66,.15)}
.cal-cell.holiday{background:rgba(245,185,66,.12); border-color:var(--goldDim)}
.cal-week{font-size:11px; font-weight:700; color:var(--gold2); margin-bottom:2px}
.cal-holiday{font-size:8px; color:var(--gold); font-weight:700; margin-top:2px}
.cal-mine{font-size:9px; color:var(--gold2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.cal-rival{font-size:9px; color:var(--red); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}

/* ── Film Detail Modal ── */
.film-modal-tabs{display:flex; gap:4px; margin-bottom:8px; border-bottom:1px solid var(--line); padding-bottom:4px}
.film-modal-tab{padding:6px 12px; background:#101522; border:1px solid var(--line); border-radius:8px 8px 0 0; cursor:pointer; font-size:12px; color:var(--dim); transition:all .15s}
.film-modal-tab.active{background:var(--card); border-color:var(--gold); color:var(--gold2); box-shadow:0 -2px 8px rgba(245,185,66,.1)}
.film-modal-panel{animation:bowFadeUp .25s var(--ease-out)}
.territory-row{display:flex; align-items:center; gap:8px; padding:4px 0}
.territory-flag{font-size:16px; width:28px; text-align:center}
.territory-bar{flex:1; height:6px; background:#0a0e16; border-radius:3px; overflow:hidden}
.territory-fill{height:100%; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold2))}
.territory-value{font-weight:700; font-size:12px; min-width:60px; text-align:right; color:var(--gold2)}

/* ── Franchise Universe Graph ── */
.universe-node{cursor:pointer; transition:transform .2s var(--ease-spring)}
.universe-node:hover{transform:scale(1.15)}
.universe-node circle{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.universe-node text{pointer-events:none; user-select:none}

/* ── Animated Chart ── */
.chart-bar-anim{transform-origin:bottom; transform:scaleY(0); animation:growUp 800ms var(--ease-out) forwards}
@keyframes growUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── Executive Office ── */
.exec-office{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.exec-office .card{background:linear-gradient(145deg, rgba(25,32,50,.92), rgba(15,19,30,.95))}
.exec-office .card:hover{box-shadow:0 0 20px rgba(245,185,66,.15)}

/* ── Economic Cycle Badge ── */
.econ-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.econ-badge.boom{background:rgba(61,220,132,.15); color:var(--green); border:1px solid var(--green)}
.econ-badge.recession{background:rgba(255,93,108,.15); color:var(--red); border:1px solid var(--red)}
.econ-badge.streamglut{background:rgba(180,139,255,.15); color:var(--purple); border:1px solid var(--purple)}
.econ-badge.normal{background:rgba(90,162,255,.15); color:var(--blue); border:1px solid var(--blue)}

/* ── Territory stacked bar in box office tab ── */
.territory-stack{display:flex; flex-direction:column; gap:4px; margin-top:8px}
.territory-stack-bar{display:flex; height:18px; border-radius:4px; overflow:hidden; background:#0a0e16}
.territory-stack-seg{height:100%; transition:width .5s var(--ease-out)}
.territory-stack-label{display:flex; justify-content:space-between; font-size:10px; color:var(--dim); margin-top:2px}


/* ── Mobile P3: perf — replace expensive backdrop-filter with solid backgrounds ── */
@media(max-width:760px){
  .chip{backdrop-filter:none !important; background:rgba(19,24,38,.97) !important}
  .topbar{backdrop-filter:none !important; background:rgba(8,11,17,.99) !important}
  .modal-veil{backdrop-filter:none !important; background:rgba(4,6,10,.88) !important}
  .modal{backdrop-filter:none !important; background:#10141f !important}
  .bottomnav{backdrop-filter:none !important; background:rgba(10,13,20,.99) !important}
  .start-card{backdrop-filter:none !important; background:rgba(16,20,31,.99) !important}
  /* hide full-screen noise overlay on mobile (GPU cost) */
  body::after{display:none !important}
}

/* ── Mobile P4: screen-reader-only helper ── */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ═══════════════════════════════════════════════════════════
   v28.17 — animated backlot set (Productions tab)
   Four crew characters drawn in code as crisp-edge pixel SVGs.
   Exclusive in-app art — nothing external, ships offline.
   (prefers-reduced-motion is honored by the global rule above.)
   ═══════════════════════════════════════════════════════════ */
.backlot{position:relative; margin:2px 0 14px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,#0c111d 0%,#101827 55%,#16223a 100%);
  overflow:hidden; box-shadow:var(--shadow-sm)}
.backlot .bk-boom{position:absolute; top:-10px; width:4px; height:52px; background:#31405e; border-radius:2px}
.backlot .bk-boom::after{content:""; position:absolute; bottom:-13px; left:50%; transform:translateX(-50%);
  width:24px; height:13px; background:linear-gradient(180deg,#ffe3a1,#f5b942); border-radius:3px;
  box-shadow:0 0 22px 7px rgba(245,185,66,.30); animation:bkGlow 2.8s ease-in-out infinite}
.backlot .bk-boom1{left:13%; transform:rotate(24deg)}
.backlot .bk-boom2{right:13%; transform:rotate(-24deg)}
.backlot .bk-boom2::after{animation-delay:1.2s}
.backlot .bk-rec{position:absolute; top:10px; right:12px; font:800 10px/1 system-ui,sans-serif;
  letter-spacing:.12em; color:var(--red)}
.backlot .bk-rec::before{content:"●"; margin-right:5px; animation:bkRec 1.2s steps(1) infinite}
.backlot .bk-rec.bk-idle{color:var(--dim2)}
.backlot .bk-rec.bk-idle::before{animation-duration:2.4s}
.backlot .bk-crew{position:relative; display:flex; justify-content:space-evenly; align-items:flex-end;
  padding:38px 12px 0; z-index:1}
.bk-actor{position:relative; width:58px; display:flex; justify-content:center}
.bk-actor .px{width:38px; height:auto; display:block; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.bk-actor .bk-name{position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  font:800 8px/1 system-ui,sans-serif; letter-spacing:.09em; color:var(--dim2); white-space:nowrap}
.bk-a1 .px{animation:bkBob 1.7s ease-in-out infinite}
.bk-a2 .px{animation:bkBob 2.2s ease-in-out infinite .4s}
.bk-a3 .px{animation:bkBob 1.9s ease-in-out infinite .8s}
.bk-a4 .px{animation:bkBob 2.5s ease-in-out infinite .2s}
/* props */
.bk-prop{position:absolute; display:block}
.bk-meg{top:6px; right:-4px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:15px solid var(--gold); filter:drop-shadow(0 0 5px rgba(245,185,66,.45));
  transform-origin:left center; animation:bkMeg 2.1s ease-in-out infinite}
.bk-cam{top:30px; left:-7px; width:25px; height:16px; background:#1a2233; border:2px solid #31405e; border-radius:3px;
  transform-origin:center; animation:bkPan 3.6s ease-in-out infinite}
.bk-cam::before{content:""; position:absolute; right:-7px; top:2px; width:6px; height:8px; background:#31405e; border-radius:1px}
.bk-cam::after{content:""; position:absolute; right:-11px; top:5px; width:4px; height:4px; background:var(--red); border-radius:50%;
  animation:bkRec 1.2s steps(1) infinite}
.bk-script{top:34px; right:2px; width:15px; height:11px; background:#f2e6c9; border-radius:1px;
  transform-origin:bottom center; animation:bkFlip 2.9s ease-in-out infinite}
.bk-script::after{content:""; position:absolute; inset:2px 3px;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(20,24,36,.45) 2px 3px)}
.bk-board{top:31px; right:-3px; width:21px; height:14px; background:#20293e; border:2px solid #31405e; border-radius:2px}
.bk-board::before{content:""; position:absolute; left:-1px; top:-8px; width:22px; height:7px; border-radius:1px;
  background:repeating-linear-gradient(45deg,#f2f2f2 0 4px,#141824 4px 8px);
  transform-origin:left bottom; animation:bkSnap 2.6s infinite}
.backlot .bk-floor{position:relative; height:22px; margin-top:-6px;
  background:repeating-linear-gradient(90deg,#1c2537 0 18px,#17202f 18px 36px);
  border-top:2px solid #2a3854}
.backlot .bk-caption{position:relative; padding:7px 12px 9px; font:600 11px/1.4 system-ui,sans-serif;
  color:var(--dim); background:rgba(8,11,17,.55)}
.backlot .bk-caption b{color:var(--gold2)}
@keyframes bkBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}}
@keyframes bkMeg{0%,100%{transform:rotate(0)} 50%{transform:rotate(-9deg)}}
@keyframes bkPan{0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)}}
@keyframes bkSnap{0%,86%,94%,100%{transform:rotate(0)} 90%{transform:rotate(-26deg)}}
@keyframes bkFlip{0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(6deg)}}
@keyframes bkRec{0%,49%{opacity:1} 50%,100%{opacity:.12}}
@keyframes bkGlow{0%,100%{opacity:.55} 50%{opacity:1}}
@media(max-width:420px){
  .backlot .bk-crew{padding:34px 4px 0}
  .bk-actor{width:25%}
  .bk-actor .px{width:32px}
  .backlot .bk-caption{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════
   v30: LIVE BROADCASTING, STREAMING, EPG GRID & ANIMATED CHARACTERS
   ═══════════════════════════════════════════════════════════════════ */

/* Live pulse indicator */
.live-dot-pulse {
  display: inline-block;
  box-shadow: 0 0 0 rgba(255, 45, 85, 0.7);
  animation: liveDotPulse 1.8s infinite;
}

@keyframes liveDotPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255, 45, 85, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
}

/* Channel pills row */
.channel-pill {
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.channel-pill:hover {
  transform: translateY(-1px);
  border-color: var(--gold) !important;
}

/* EPG Schedule Table */
.epg-row {
  transition: background-color 0.15s ease;
}
.epg-row:hover {
  background-color: var(--card-hover) !important;
}
.primetime-row {
  border-left: 3px solid var(--gold) !important;
}

/* CRT Broadcast Monitor */
.crt-screen {
  background: radial-gradient(circle at 50% 30%, #0d1424 0%, #060911 100%);
  border: 1px solid rgba(245, 185, 66, 0.25) !important;
}
.crt-scanlines {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 3px;
  animation: scanlinesFlicker 0.15s infinite;
  opacity: 0.65;
}
@keyframes scanlinesFlicker {
  0% { opacity: 0.65; }
  50% { opacity: 0.72; }
  100% { opacity: 0.65; }
}

/* Host Character Stage */
.host-stage {
  box-shadow: inset 0 0 24px rgba(0,0,0,0.6);
}
.host-character-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.host-character-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.host-character-card.active-host {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, var(--card) 0%, rgba(245, 185, 66, 0.05) 100%);
}

/* ── Character SVG Animations (Pure CSS, 0 External Assets) ── */

/* 1. Rex Sterling (Anchor) */
.char-rex .char-chest {
  transform-origin: 80px 140px;
  animation: rexBreathe 3.4s ease-in-out infinite;
}
.char-rex .char-head {
  transform-origin: 80px 105px;
  animation: rexNod 4.2s ease-in-out infinite;
}
.char-rex .char-eye {
  transform-origin: center;
  animation: eyeBlink 3.8s infinite;
}
.char-rex .char-mouth {
  transform-origin: 80px 94px;
  animation: mouthTalk 1.6s ease-in-out infinite;
}
.char-rex .char-mic-light {
  animation: micTally 1.2s infinite alternate;
}

@keyframes rexBreathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.025); }
}
@keyframes rexNod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-1.5deg) translateY(-0.5px); }
  70% { transform: rotate(1.5deg) translateY(-0.5px); }
}
@keyframes eyeBlink {
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.1); }
}
@keyframes mouthTalk {
  0%, 100% { transform: scaleY(0.7); }
  50% { transform: scaleY(1.4); }
}
@keyframes micTally {
  0% { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
  100% { fill: #b91c1c; filter: none; }
}

/* 2. Chloe Glamour (Red Carpet Hostess) */
.char-chloe .char-chest {
  transform-origin: 80px 135px;
  animation: chloeSway 4.8s ease-in-out infinite;
}
.char-chloe .char-head {
  transform-origin: 80px 100px;
  animation: chloeTilt 3.6s ease-in-out infinite;
}
.char-chloe .char-sparkle {
  animation: sparkleShimmer 2.2s ease-in-out infinite alternate;
}
.char-chloe .char-eye {
  transform-origin: center;
  animation: eyeBlink 4.2s infinite;
}
.char-chloe .char-mouth {
  transform-origin: 80px 92px;
  animation: chloeSmile 2.8s ease-in-out infinite;
}
.char-chloe .char-hand-mic {
  transform-origin: 106px 96px;
  animation: micTilt 3.2s ease-in-out infinite alternate;
}

@keyframes chloeSway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@keyframes chloeTilt {
  0%, 100% { transform: rotate(1.5deg); }
  50% { transform: rotate(-1.5deg); }
}
@keyframes sparkleShimmer {
  0% { opacity: 0.4; filter: drop-shadow(0 0 1px #67e8f9); }
  100% { opacity: 1; filter: drop-shadow(0 0 4px #67e8f9); }
}
@keyframes chloeSmile {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes micTilt {
  0% { transform: rotate(-22deg); }
  100% { transform: rotate(-18deg); }
}

/* 3. Coach Buck (Sports Commentator) */
.char-buck .char-head {
  transform-origin: 80px 105px;
  animation: buckBounce 2.4s ease-in-out infinite;
}
.char-buck .char-vu {
  transform-origin: bottom;
  animation: vuMeter 0.9s ease-in-out infinite alternate;
}
.char-buck .char-eye {
  transform-origin: center;
  animation: eyeBlink 3.2s infinite;
}
.char-buck .char-mouth {
  transform-origin: 80px 92px;
  animation: buckYell 1.4s ease-in-out infinite;
}

@keyframes buckBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  75% { transform: translateY(-1px) rotate(2deg); }
}
@keyframes vuMeter {
  0% { transform: scaleY(0.4); }
  50% { transform: scaleY(1.1); }
  100% { transform: scaleY(0.7); }
}
@keyframes buckYell {
  0%, 100% { transform: scale(0.85); }
  50% { transform: scale(1.25); }
}

/* 4. Reely the Mascot Reel */
.char-reely-body {
  transform-origin: 80px 80px;
  animation: mascotWobble 3s ease-in-out infinite;
}
.char-reely .char-wheel {
  transform-origin: 80px 80px;
  animation: reelSpinCycle 8s linear infinite;
}
.char-reely .char-eyes {
  transform-origin: 80px 74px;
  animation: eyeBlink 3.5s infinite;
}

@keyframes mascotWobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-3deg); }
  75% { transform: translateY(-2px) rotate(3deg); }
}
@keyframes reelSpinCycle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════
   v28 — navigation, charts, avatars & misc UI fixes
   ═══════════════════════════════════════════════════════════ */

/* ── animated SVG bar chart (renderBarChartSVG) ── */
.svg-barchart{display:block; width:100%; overflow:visible}
.svg-bar{
  transform-box:fill-box; transform-origin:left;
  animation:svgBarGrow .55s var(--ease-out) forwards;
}
@keyframes svgBarGrow{ from{transform:scaleX(.001)} to{transform:scaleX(1)} }

/* ── animated SVG pie/donut (renderDonutSVG) ── */
.svg-pie{
  transform-box:fill-box; transform-origin:center;
  animation:svgPieIn .5s var(--ease-spring) forwards;
}
@keyframes svgPieIn{ from{opacity:0; transform:scale(.82)} to{opacity:1; transform:scale(1)} }

.pie-wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0}
.pie-legend{flex:1; min-width:170px; display:flex; flex-direction:column; gap:5px}
.pie-legend-row{display:flex; align-items:center; gap:8px; font-size:12.5px}
.pie-dot{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.pie-lab{flex:1; min-width:0; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pie-val{font-variant-numeric:tabular-nums; color:var(--text)}
.pie-abs{font-size:11.5px; color:var(--dim2); font-variant-numeric:tabular-nums; min-width:58px; text-align:right}

/* chart grid so bar/pie panels sit side by side on wide screens */
.chart-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.chart-grid > .card{margin:0}
.chart-cap{font-size:11.5px; color:var(--dim2); margin-top:4px}

/* ── "More" sheet: grouped section directory ── */
.more-group{margin-top:12px}
.more-group-head{display:flex; align-items:center; gap:8px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim2); margin-bottom:6px}
.more-group-head span{font-size:15px}
.plan-opt.sel{border-color:var(--gold); box-shadow:0 0 0 1px rgba(245,185,66,.35) inset}

/* ── LIVE badge (streamer / sports / on-air states) ── */
.live-pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--live-red); box-shadow:var(--glowLive);
}
.live-pill::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#fff;
  animation:liveBlink 1.4s ease-in-out infinite;
}
@keyframes liveBlink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── promo / demo pricing (tiers + cameo) ── */
.price-full{color:var(--dim2); text-decoration:line-through; font-weight:600}
.price-promo{color:var(--green); font-weight:800}
.promo-tag{
  display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#062713; background:linear-gradient(135deg,#6ff2a8,var(--green));
}
.tier-promo{background:rgba(61,220,132,.10); border-color:rgba(61,220,132,.45) !important}

/* ═══════════ Karisoft-style animated character avatars ═══════════
   Every talent gets a deterministic SVG portrait (see talentAvatarSVG in ui.js).
   The animation set is the "living avatar" language: idle bob, periodic blink,
   a soft aura pulse, and per-archetype flourishes (a waving hand for actors,
   a pen scratch for writers, a slate snap for directors, a clipboard tick for
   producers). All keyframes are CSS-only so they cost nothing on the JS thread. */
.t-avatar{
  width:52px; height:52px; border-radius:14px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 12%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), var(--card2);
  border:1px solid var(--line2); overflow:hidden; position:relative;
  transition:transform .25s var(--ease-spring), box-shadow .25s;
}
.t-avatar svg{display:block; width:100%; height:100%}
.talent-card:hover .t-avatar{transform:translateY(-2px) scale(1.06); box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* shared avatar keyframes */
@keyframes avBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.2px)} }
@keyframes avBlink{ 0%,92%,100%{transform:scaleY(1)} 95%,97%{transform:scaleY(.08)} }
@keyframes avAura{ 0%,100%{opacity:.30; transform:scale(.94)} 50%{opacity:.62; transform:scale(1.06)} }
@keyframes avWave{ 0%,60%,100%{transform:rotate(0deg)} 70%{transform:rotate(-26deg)} 80%{transform:rotate(10deg)} 90%{transform:rotate(-14deg)} }
@keyframes avNod{ 0%,100%{transform:rotate(0deg)} 45%{transform:rotate(5deg)} 75%{transform:rotate(-3deg)} }
@keyframes avTick{ 0%,70%,100%{transform:translateY(0)} 80%{transform:translateY(-3px)} }
@keyframes avSpark{ 0%,100%{opacity:.25; transform:scale(.7)} 50%{opacity:1; transform:scale(1.15)} }
@keyframes avFloat{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(1.6px,-2.4px)} }

.av-body   { animation:avBob 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom }
.av-head   { animation:avBob 3.4s ease-in-out infinite; animation-delay:.06s; transform-box:fill-box; transform-origin:center bottom }
.av-hair   { animation:avFloat 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center top }
.av-eye    { animation:avBlink 4.6s steps(1,end) infinite; transform-box:fill-box; transform-origin:center }
.av-aura   { animation:avAura 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.av-hand   { animation:avWave 5s ease-in-out infinite; transform-box:fill-box; transform-origin:left bottom }
.av-pen    { animation:avTick .9s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.av-slate  { animation:avNod 3.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.av-clip   { animation:avTick 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.av-spark  { animation:avSpark 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center }
.av-delay-1{animation-delay:.35s} .av-delay-2{animation-delay:.7s}
.av-delay-3{animation-delay:1.05s} .av-delay-4{animation-delay:1.4s}

/* avatars in modals / pickers get a touch more presence */
.modal .t-avatar{width:56px; height:56px}
.cameo-avatar{width:64px; height:64px; border-radius:16px}
@media(max-width:760px){
  .t-avatar{width:48px; height:48px}
  .modal .t-avatar{width:52px; height:52px}
}

/* ── filter chip rows (every tab) ── */
.filter-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0 10px}
.filter-row .fr-lab{font-size:11.5px; color:var(--dim2); text-transform:uppercase; letter-spacing:.07em; font-weight:800}
.fchip{
  background:rgba(255,255,255,.045); border:1px solid var(--line); color:var(--dim);
  font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; cursor:pointer;
  min-height:30px; white-space:nowrap; touch-action:manipulation;
  transition:color .16s, background .16s, border-color .16s;
}
.fchip:hover{border-color:var(--line2); color:var(--text)}
.fchip.active{color:#1a1204; background:linear-gradient(135deg,var(--gold2),var(--gold)); border-color:var(--gold)}
.fchip .fc-n{opacity:.7; font-weight:600; margin-left:3px}
.filter-empty{padding:14px; text-align:center; color:var(--dim); font-size:13px}

@media(prefers-reduced-motion: reduce){
  .av-body,.av-head,.av-hair,.av-eye,.av-aura,.av-hand,.av-pen,.av-slate,.av-clip,.av-spark,
  .svg-bar,.svg-pie,.live-pill::before{animation:none !important}
}

/* hero row: big avatar + name, shared by the talent profile and the RPG sheet */
.cs-hero{display:flex; align-items:center; gap:12px; margin:2px 0 10px}
.cs-avatar{width:72px !important; height:72px !important; border-radius:18px !important}
.cs-hero h3{line-height:1.25}
@media(max-width:760px){
  .cs-avatar{width:62px !important; height:62px !important}
}

/* search inputs used by the library / box-office filter bars */
.search-in{
  flex:1 1 220px; min-width:160px; min-height:34px; padding:6px 12px;
  background:#0b0f18; border:1px solid var(--line2); border-radius:999px;
  color:var(--text); font-size:13px; outline:none;
  transition:border-color .16s, box-shadow .16s;
}
.search-in::placeholder{color:var(--dim2)}
.search-in:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,185,66,.14)}
.search-in::-webkit-search-cancel-button{cursor:pointer}

/* ═══════════ Home tab — the week command center ═══════════ */
.wk-hero .wk-when{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.wk-delta{font-size:26px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.15}
.wk-delta.pos{color:var(--green); text-shadow:0 0 22px rgba(61,220,132,.28)}
.wk-delta.neg{color:var(--red); text-shadow:0 0 22px rgba(255,93,108,.28)}
.task-card{margin-top:8px; padding:11px 13px}
.task-card b{display:block}

/* film detail modal — cast strip with animated portraits */
.cast-strip{display:flex; gap:10px; flex-wrap:wrap}
.cast-chip{width:74px; text-align:center}
.cast-chip .cast-avatar{width:64px; height:64px; border-radius:16px; margin:0 auto}
.cast-name{font-size:11.5px; font-weight:700; margin-top:4px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

/* ── finance week ledger table ── */
.ledger-table{display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums}
.lt-row{display:grid; grid-template-columns:88px 84px 84px 84px minmax(0,1fr); gap:8px; align-items:center;
  padding:6px 4px; border-bottom:1px solid rgba(255,255,255,.045); font-size:12.5px}
.lt-row:last-child{border-bottom:none}
.lt-head{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim2); font-weight:800;
  border-bottom:1px solid var(--line)}
.lt-foot{border-top:1px solid var(--line); font-weight:800; color:var(--text)}
.lt-row > span:nth-child(4){text-align:right}
.lt-row > span:nth-child(2),.lt-row > span:nth-child(3){text-align:right}
@media(max-width:760px){
  .lt-row{grid-template-columns:64px 1fr 1fr 1fr; gap:6px; font-size:11.5px}
  .lt-row > span:nth-child(5){display:none}
  .lt-head > span:nth-child(5){display:none}
}

/* ── hover surfaces now route through --card-hover ── */
.plan-opt:hover,.film-row:hover,.pick-list .card:hover,.scen:hover{background-color:var(--card-hover)}
.news-item:hover{background-color:var(--card-hover)}
@media (hover:none){ .plan-opt:hover,.film-row:hover,.pick-list .card:hover,.scen:hover,.news-item:hover{background-color:transparent} }

/* ═══════════ Colour-blind cues (body.cb-cues) ═══════════
   Colour must never be the only carrier of meaning. When cues are on, every
   semantic tag gains a glyph: ✓ good, ✕ bad, ◆ attention, ▲/▼ direction.
   Tags that already lead with an emoji are left alone (the emoji is the cue). */
body.cb-cues .tag.green:not([data-no-cue])::before{content:"✓ "; font-weight:900}
body.cb-cues .tag.red:not([data-no-cue])::before{content:"✕ "; font-weight:900}
body.cb-cues .tag.gold:not([data-no-cue])::before{content:"◆ "; font-weight:900}
body.cb-cues .tag.purple:not([data-no-cue])::before{content:"◈ "; font-weight:900}
body.cb-cues .tag.blue:not([data-no-cue])::before{content:"◇ "; font-weight:900}
/* direction cues on the numeric verdict classes */
body.cb-cues .pos::after{content:" ▲"; font-size:.85em; opacity:.75}
body.cb-cues .neg::after{content:" ▼"; font-size:.85em; opacity:.75}
/* the ledger table's coloured cells */
body.cb-cues .lt-row .pos::after,body.cb-cues .lt-row .neg::after{content:""}

/* trend board — 4-quarter SVG sparkline sits inside the heat track */
.trend-board .tr-track{position:relative}
.trend-board .tr-spark{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; pointer-events:none; opacity:.9}
.trend-board .tr-track{display:block; min-height:18px}

/* ── technology tree: layered DAG + per-tech detail preview ── */
.tech-graph svg{display:block; overflow:visible}
.tech-node{transition:transform .18s var(--ease-spring)}
.tech-node:hover{transform:translateY(-2px)}
.tech-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--dim2); margin-top:6px}
.tech-legend span{display:inline-flex; align-items:center; gap:5px}
.tech-legend i{width:9px; height:9px; border-radius:3px; display:inline-block}
.tech-card .tech-preview{
  font-size:11.5px; color:var(--dim2); margin:4px 0 4px; padding:5px 8px;
  background:rgba(255,255,255,.03); border-left:2px solid var(--line2); border-radius:0 6px 6px 0;
}
.tech-card.tech-done{border-color:rgba(61,220,132,.4)}
.tech-card.tech-active{border-color:rgba(245,185,66,.5)}

/* ── release calendar: genre/season heat overlay ── */
.cal-cell.heat{position:relative; overflow:hidden}
.cal-cell.heat::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--heat-col, transparent); opacity:calc(.10 + var(--heat,0%) / 260);
}
.cal-cell.h-hot{--heat-col:#3ddc84}
.cal-cell.h-warm{--heat-col:#a8d94f}
.cal-cell.h-mid{--heat-col:#f5b942}
.cal-cell.h-cold{--heat-col:#ff5d6c}
.cal-cell .cal-heat{position:absolute; right:3px; bottom:2px; font-size:8.5px; color:var(--dim2); font-variant-numeric:tabular-nums}
.cal-cell.heat > *{position:relative; z-index:1}

/* ── cast chemistry web ── */
.chem-wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.chem-wrap svg{flex:0 0 auto; max-width:100%}
.chem-legend{flex:1; min-width:180px}
.chem-node{transition:transform .18s var(--ease-spring)}
.chem-node:hover{transform:scale(1.08)}

/* ═══════════ RTL support (v29) ═══════════
   The layout is written with physical properties in places, so a right-to-left
   document needs these explicit flips. Driven by [dir="rtl"] on <html>, which
   applyDirection() sets from the language table (or the player's override).
   Hindi is LTR — this exists for genuinely RTL locales and for previewing. */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .spread{flex-direction:row-reverse}
[dir="rtl"] .cost-line{flex-direction:row-reverse}
[dir="rtl"] .cost-line > span:first-child{text-align:right}
[dir="rtl"] .row{flex-direction:row-reverse}
[dir="rtl"] .chip-row{flex-direction:row-reverse}
[dir="rtl"] .topbar-row{flex-direction:row-reverse}
[dir="rtl"] .modal-actions{justify-content:flex-start}
[dir="rtl"] .modal-head{flex-direction:row-reverse}
[dir="rtl"] .tabs{flex-direction:row-reverse}
[dir="rtl"] .bottomnav{flex-direction:row-reverse}
[dir="rtl"] .subtabs{flex-direction:row-reverse}
[dir="rtl"] .filter-row{flex-direction:row-reverse}
[dir="rtl"] .filter-row .fr-lab{text-align:right}
[dir="rtl"] .trend-board .trend-row{grid-template-columns:1fr 132px auto}
[dir="rtl"] .chart-bar{grid-template-columns:auto 1fr 26px}
[dir="rtl"] .lt-row > span:nth-child(n+2){text-align:left}
[dir="rtl"] .news-item{flex-direction:row-reverse; text-align:right}
[dir="rtl"] .platform-card{flex-direction:row-reverse}
[dir="rtl"] .talent-card{flex-direction:row-reverse}
[dir="rtl"] .pick-list .card{text-align:right}
[dir="rtl"] .filter-row .fchip,
[dir="rtl"] .section-title{text-align:right}
[dir="rtl"] .pie-legend-row{flex-direction:row-reverse}
[dir="rtl"] .chem-wrap{flex-direction:row-reverse}
[dir="rtl"] .back-arrow,
[dir="rtl"] .go-arrow{display:inline-block; transform:scaleX(-1)}
[dir="rtl"] .skip{left:auto; right:12px}
[dir="rtl"] .fab-week{right:auto; left:12px}
[dir="rtl"] .toasts{left:auto; right:10px}

/* ═══════════════════════════════════════════════════════════
   v29 CSS additions merged into v30 for v31 release
   ═══════════════════════════════════════════════════════════ */

/* ── colour-blind cues ── */
.cb-cues .tag.pos::before{content:"✓ "}
.cb-cues .tag.neg::before{content:"✕ "}
.cb-cues .tag.warn::before{content:"◆ "}
.cb-cues .tag.up::before{content:"▲ "}
.cb-cues .tag.down::before{content:"▼ "}

/* ── chemistry web ── */
.chem-wrap{width:100%; max-width:320px; margin:0 auto}
.chem-node{transition:transform .2s}
.chem-node:hover{transform:scale(1.1)}

/* ── calendar heat ── */
.heat-wrap{display:flex; flex-direction:column; gap:2px; margin:10px 0}
.heat-row{display:flex; gap:2px; align-items:center}
.heat-head{font-weight:700; margin-bottom:4px}
.heat-w{width:60px; font-size:11px; color:var(--dim)}
.heat-g{width:22px; text-align:center; font-size:14px}
.heat-cell{width:22px; height:22px; border-radius:4px}
.h-hot{background:#ff5d6c}
.h-warm{background:#f5b942}
.h-mid{background:#5aa2ff}
.h-cold{background:#3ddc84}

/* ── deepfake drill ── */
.df-timer{font-size:24px; font-weight:800; text-align:center; color:var(--gold); margin:10px 0}
.df-frames{display:flex; gap:8px; justify-content:center; margin:10px 0}
.df-frame{width:60px; height:60px; border-radius:10px; border:2px solid var(--line); background:var(--card); cursor:pointer; font-size:11px; color:var(--dim)}
.df-frame:hover{border-color:var(--gold)}
.df-actions{display:flex; gap:10px; justify-content:center; margin:14px 0}

/* ── board vote ── */
.vote-list{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.vote-row{display:flex; justify-content:space-between; padding:8px 10px; border-radius:8px; font-size:13px}
.vote-yes{background:rgba(61,220,132,.12); color:var(--green)}
.vote-no{background:rgba(255,93,108,.12); color:var(--red)}
.vote-result{text-align:center; font-weight:800; font-size:16px; margin-top:10px}
.vote-result.pass{color:var(--green)}
.vote-result.fail{color:var(--red)}

/* ── RTL support ── */
[dir="rtl"] .topbar-row{flex-direction:row-reverse}
[dir="rtl"] .chip-row{flex-direction:row-reverse}
[dir="rtl"] .tabs{flex-direction:row-reverse}
[dir="rtl"] .bottomnav{flex-direction:row-reverse}


/* ═══════════ v31: animated SVG portraits (v31-features.js) ═══════════ */
.t-avatar svg{width:100%;height:100%;display:block}
@keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes av-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes av-hairdrift{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes av-aurapulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}
@keyframes av-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
@keyframes av-clap{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes av-pen{0%,100%{transform:rotate(24deg) translateY(0)}50%{transform:rotate(24deg) translateY(1.5px)}}
.av-svg .av-body{animation:av-bob 3.2s ease-in-out infinite}
.av-svg .av-eye{animation:av-blink 4.4s infinite;transform-box:fill-box;transform-origin:center}
.av-svg .av-hair{animation:av-hairdrift 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center top}
.av-svg .av-aura{animation:av-aurapulse 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.av-svg .av-fl-actor{animation:av-wave 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.av-svg .av-fl-director{animation:av-clap 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom left}
.av-svg .av-fl-writer{animation:av-pen 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
.av-svg .av-fl-producer{animation:av-bob 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@media (prefers-reduced-motion: reduce){.av-svg *{animation:none!important}}
body.rm-motion .av-svg *{animation:none!important}

/* ═══════════ v31: animated SVG charts ═══════════ */
@keyframes ch-grow{from{transform:scaleY(0)}}
@keyframes ch-fade{from{opacity:0}}
.ch-bar{transform-box:fill-box;transform-origin:bottom;animation:ch-grow .55s cubic-bezier(.2,.8,.3,1) forwards}
.ch-slice{opacity:0;animation:ch-fade .5s ease forwards}
@media (prefers-reduced-motion: reduce){.ch-bar,.ch-slice{animation:none!important;opacity:1;transform:none}}
body.rm-motion .ch-bar,body.rm-motion .ch-slice{animation:none!important;opacity:1;transform:none}

/* ═══════════ v31: color-blind cues — glyphs so hue is never the only signal ═══════════ */
.cb-cues .pos::after{content:" ▲";font-size:.8em}
.cb-cues .neg::after{content:" ▼";font-size:.8em}
.cb-cues .tag.green::after{content:" ✓"}
.cb-cues .tag.red::after{content:" ✕"}
.cb-cues .tag.gold::after{content:" ◆"}

.df-frame.df-picked{outline:2px solid var(--gold);background:rgba(245,185,66,.18);position:relative}
.df-frame.df-picked::after{content:"🚩";position:absolute;top:2px;right:4px;font-size:10px}
.df-timer{font-weight:700;color:var(--gold);margin:4px 0}

/* ═══════════ v32: screen-reader a11y utilities ═══════════ */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ═══════════ v32: New Modern Tab & Subnav System ═══════════ */
.subnav-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding: 4px 2px 8px;
}
.subnav-pills::-webkit-scrollbar { display: none; }
.subnav-pill {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line2);
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
}
.subnav-pill:hover {
  border-color: var(--goldDim);
  color: var(--text);
  background: rgba(255,255,255,0.08);
}
.subnav-pill.active {
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  color: #1a1204;
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(245,185,66,0.35);
}

/* Fast Next Button feedback */
#btnWeek.btn-advancing {
  opacity: 0.82;
  transform: scale(0.97);
  box-shadow: 0 0 12px var(--goldDim);
}

/* Individual Film Breakdown & Territory Grid */
.film-breakdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: rgba(14,20,32,0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  margin: 4px 0;
  flex-wrap: wrap;
}
.film-breakdown-badge span b { font-weight: 800; }
.territory-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.territory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.territory-row .t-name { min-width: 140px; font-weight: 700; font-size: 12.5px; }
.territory-row .t-bar-wrap { flex: 1; height: 8px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; }
.territory-row .t-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--cyan)); border-radius: 4px; }
.territory-row .t-val { min-width: 70px; text-align: right; font-weight: 800; font-size: 13px; color: var(--gold2); }

/* Territory Licensing Modal Mobile Responsive Fixes */
.territory-modal-inner {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}
.territory-deal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 680px) {
  .territory-deal-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.territory-deal-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
}
.territory-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.territory-action-btn {
  flex: 1 1 120px;
  min-width: 110px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════
   2D STUDIO LOT ENGINE & CANVAS STYLES
   ═══════════════════════════════════════════════════════════ */
.studiolot-global-stage {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto 12px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 0 2px #2e3e62;
  background: #0c1017;
  transition: height 0.25s cubic-bezier(0.2, 0.85, 0.3, 1);
  flex-shrink: 0;
}
.studiolot-global-stage.lot-full {
  height: calc(100vh - 120px);
  min-height: 560px;
  margin-bottom: 0;
}
.studiolot-global-stage.lot-compact {
  height: 380px;
  min-height: 350px;
}
.studiolot-global-stage.lot-collapsed {
  height: 0px;
  min-height: 0px;
  overflow: hidden;
  margin-bottom: 0;
  display: none;
}
@media (max-width: 768px) {
  .studiolot-global-stage.lot-compact {
    height: 300px;
    min-height: 280px;
  }
}

.studiolot-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.palette-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
  max-width: 90vw;
}

.lot-card {
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 8px;
  padding: 14px;
  color: #f8fafc;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.lot-card .tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.directing-box {
  animation: pulseGold 2s infinite ease-in-out;
}

@keyframes pulseGold {
  0%, 100% { border-color: rgba(245, 197, 24, 0.4); }
  50% { border-color: rgba(245, 197, 24, 0.9); }
}

/* ═══════════ ITCH 2D TYCOON HUD & PANELS ═══════════ */
.itch-lot-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: rgba(12, 16, 23, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: 8px;
  padding: 8px 14px;
  color: #fff;
  flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.itch-hud-stat {
  display: flex;
  flex-direction: column;
}

.itch-hud-stat .val {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

.itch-hud-stat .lbl {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.itch-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.itch-btn-blue {
  background: #2563eb linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #fff;
  font-weight: 700;
  border: 1px solid #60a5fa;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.itch-btn-blue:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.itch-btn-blue:active {
  transform: translateY(1px);
}

.itch-btn-gold {
  background: #d97706 linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #fff;
  font-weight: 700;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.itch-btn-gold:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.itch-wood-panel {
  background: rgba(15, 23, 42, 0.96);
  border: 2px solid rgba(245, 197, 24, 0.35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
}

.itch-avatar-frame {
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 2px;
  background: #111827;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* ═══════════ Kairosoft 2D Simulation UI Styles ═══════════ */
.kairo-top-header {
  flex-wrap: wrap;
}

.kairo-nav-tab {
  background: rgba(30, 41, 59, 0.85);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.kairo-nav-tab:hover {
  color: #fff;
  border-color: var(--gold);
  background: rgba(45, 60, 85, 0.95);
  transform: translateY(-1px);
}

.kairo-nav-tab.active {
  background: #2563eb linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.kairo-nav-tab:active {
  transform: translateY(1px);
}

/* ═══════════ Kairosoft Department Animated Banners ═══════════ */
.kairo-dept-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #141b2e linear-gradient(180deg, #18233c 0%, #0e1322 100%);
  border: 3px solid #2e3e62;
  border-top: 3px solid #4a6396;
  border-bottom: 5px solid #080b12;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 6px 0 #05070e, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kairo-dept-banner:hover {
  border-color: #ffd479;
  border-top-color: #ffe6a6;
  box-shadow: 0 6px 0 #05070e, 0 0 20px rgba(245, 185, 66, 0.25);
}

/* Authentic 16-Bit Kairosoft Department Scene Window */
.kairo-dept-vignette {
  width: 176px;
  height: 104px;
  border: 3px solid #f5b942;
  border-top: 3px solid #ffdf9a;
  border-bottom: 4px solid #b47810;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #0d121e;
  box-shadow: 0 4px 0 #060910, inset 0 0 16px rgba(0,0,0,0.6);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.kairo-vignette-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(1.04);
  transition: transform 0.25s ease;
}
.kairo-dept-banner:hover .kairo-vignette-bg {
  transform: scale(1.08);
}

.kairo-char-actor {
  position: absolute;
  bottom: 2px;
  height: 48px;
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.85));
  z-index: 2;
}
.kairo-char-actor.left { left: 8px; }
.kairo-char-actor.center { left: 50%; transform: translateX(-50%); }
.kairo-char-actor.right { right: 8px; }

.kairo-speech-bubble {
  position: absolute;
  top: 6px;
  padding: 3px 7px;
  background: #ffffff;
  color: #111827;
  border: 2px solid #111827;
  border-radius: 4px;
  font-family: var(--font-display, monospace);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 0 #000, 0 4px 8px rgba(0,0,0,0.4);
  z-index: 5;
  animation: kairoBubbleBob 2s ease-in-out infinite;
}
.kairo-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 10px;
  border-width: 5px 4px 0;
  border-style: solid;
  border-color: #111827 transparent;
  display: block;
  width: 0;
}
.kairo-speech-bubble.gold {
  background: #fef08a;
  border-color: #854d0e;
  color: #713f12;
}
.kairo-speech-bubble.gold::after {
  border-color: #854d0e transparent;
}
.kairo-speech-bubble.cyan {
  background: #cffafe;
  border-color: #0e7490;
  color: #155e75;
}
.kairo-speech-bubble.cyan::after {
  border-color: #0e7490 transparent;
}
.kairo-speech-bubble.red {
  background: #fee2e2;
  border-color: #991b1b;
  color: #991b1b;
}
.kairo-speech-bubble.red::after {
  border-color: #991b1b transparent;
}

@keyframes kairoBubbleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.kairo-vignette-live-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #4ade80;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  z-index: 4;
}

.kairo-dept-info {
  flex: 1;
  min-width: 280px;
}

.kairo-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.kairo-dept-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 197, 24, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold);
}

.kairo-dept-badge.blue { background: rgba(59, 130, 246, 0.15); border-color: #60a5fa; color: #93c5fd; }
.kairo-dept-badge.cyan { background: rgba(6, 182, 212, 0.15); border-color: #22d3ee; color: #67e8f9; }
.kairo-dept-badge.red { background: rgba(239, 68, 68, 0.15); border-color: #f87171; color: #fca5a5; }
.kairo-dept-badge.magenta { background: rgba(236, 72, 153, 0.15); border-color: #f472b6; color: #fbcfe8; }
.kairo-dept-badge.purple { background: rgba(168, 85, 247, 0.15); border-color: #c084fc; color: #e9d5ff; }
.kairo-dept-badge.green { background: rgba(16, 185, 129, 0.15); border-color: #34d399; color: #a7f3d0; }
.kairo-dept-badge.yellow { background: rgba(234, 179, 8, 0.15); border-color: #facc15; color: #fef08a; }

.kairo-dept-subtag {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.kairo-dept-title {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.kairo-stats-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kairo-stat-chip {
  display: flex;
  flex-direction: column;
}

.kairo-stat-chip .k-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kairo-stat-chip .k-val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.k-val.gold { color: var(--gold); }
.k-val.green { color: #10b981; }
.k-val.cyan { color: #38bdf8; }
.k-val.red { color: #f43f5e; }
.k-val.yellow { color: #f59e0b; }
.k-val.blue { color: #60a5fa; }
.k-val.magenta { color: #ec4899; }
.k-val.purple { color: #a855f7; }

.kairo-dept-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.kairo-btn-action {
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.kairo-btn-action:hover {
  color: #ffffff;
  border-color: var(--gold);
  transform: translateY(-1px);
}

.kairo-btn-action.gold {
  background: #d97706 linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff;
  border-color: #fde68a;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}

.kairo-btn-action.gold:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.6);
}

.kairo-btn-action.blue {
  background: #2563eb linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.kairo-btn-action.blue:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6);
}

/* ═══════════ Micro-Animations ═══════════ */
@keyframes kairoBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.kairo-bob { animation: kairoBob 1.6s ease-in-out infinite; }

@keyframes kairoGlint {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) drop-shadow(0 0 6px rgba(245, 197, 24, 0.8)); }
}
.kairo-glint { animation: kairoGlint 2.4s ease-in-out infinite; }

@keyframes kairoSteamRise {
  0% { opacity: 0; transform: translateY(2px) scale(0.8); }
  50% { opacity: 0.8; transform: translateY(-6px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.3); }
}
.kairo-steam-rise { animation: kairoSteamRise 2s ease-out infinite; }

@keyframes kairoTallyBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px #ef4444; }
  50% { opacity: 0.2; box-shadow: none; }
}
.kairo-tally-blink { animation: kairoTallyBlink 1s ease-in-out infinite; }

@keyframes kairoMarqueeGlow {
  0%, 100% { border-color: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
  50% { border-color: #fde047; box-shadow: 0 0 18px rgba(253, 224, 71, 0.9); }
}
.kairo-marquee-glow { animation: kairoMarqueeGlow 1.8s ease-in-out infinite; }

@keyframes kairoServerBlink {
  0%, 100% { background: #10b981; box-shadow: 0 0 6px #10b981; }
  33% { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
  66% { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
}
.kairo-server-blink { animation: kairoServerBlink 1.4s steps(1) infinite; }

@keyframes kairoLaserSweep {
  0% { transform: translateY(-20px); opacity: 0.3; }
  50% { transform: translateY(20px); opacity: 1; }
  100% { transform: translateY(-20px); opacity: 0.3; }
}
.kairo-laser-sweep { animation: kairoLaserSweep 2s ease-in-out infinite; }

@keyframes kairoSpriteJump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px) scaleY(1.1); }
  50% { transform: translateY(-10px) scaleY(1); }
  60% { transform: translateY(-8px) scaleY(0.9); }
}
.kairo-sprite-jump { animation: kairoSpriteJump 1.2s ease-in-out infinite; }

@keyframes kairoScanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.kairo-scanline::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(56,189,248,0.15) 50%, rgba(255,255,255,0) 100%);
  animation: kairoScanline 3s linear infinite;
  pointer-events: none;
}

/* Pixel Art Vignette Elements */
.kairo-pixel-desk { width: 44px; height: 22px; background: #854d0e; border: 2px solid #451a03; border-radius: 2px; position: absolute; bottom: 8px; }
.kairo-pixel-chair { width: 18px; height: 32px; background: #1e293b; border: 2px solid #0f172a; border-radius: 4px; position: absolute; bottom: 12px; }
.kairo-pixel-trophy { width: 14px; height: 20px; background: #f59e0b; border: 1px solid #fde047; position: absolute; top: 10px; right: 12px; border-radius: 2px; }
.kairo-pixel-typewriter { width: 28px; height: 18px; background: #334155; border: 2px solid #1e293b; position: absolute; bottom: 12px; }
.kairo-pixel-steam { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; position: absolute; top: 16px; right: 14px; }
.kairo-pixel-cameradolly { width: 36px; height: 24px; background: #475569; border: 2px solid #1e293b; position: absolute; bottom: 10px; }
.kairo-pixel-tallylight { width: 8px; height: 8px; background: #ef4444; border-radius: 50%; position: absolute; top: 8px; left: 8px; }
.kairo-pixel-marquee { width: 60px; height: 32px; background: #1e1b4b; border: 2px solid #f59e0b; border-radius: 4px; position: absolute; top: 12px; }
.kairo-pixel-serverrack { width: 32px; height: 50px; background: #0f172a; border: 2px solid #334155; position: absolute; bottom: 8px; }
.kairo-pixel-leds { width: 20px; height: 4px; position: absolute; top: 10px; left: 6px; }
.kairo-pixel-laser { width: 100%; height: 2px; background: #06b6d4; box-shadow: 0 0 6px #06b6d4; position: absolute; }
.kairo-pixel-crtgame { width: 44px; height: 36px; background: #022c22; border: 3px solid #1e293b; border-radius: 4px; position: absolute; bottom: 12px; }
.kairo-pixel-sprite { width: 12px; height: 12px; background: #10b981; border-radius: 2px; position: absolute; bottom: 8px; left: 16px; }
.kairo-pixel-goldvault { width: 36px; height: 44px; background: #713f12; border: 3px solid #eab308; border-radius: 4px; position: absolute; bottom: 10px; }

/* Subnav Pills Enhancement */
.subnav-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.subnav-pills::-webkit-scrollbar { display: none; }

.subnav-pill {
  background: rgba(30, 41, 59, 0.85);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.subnav-pill:hover {
  color: #ffffff;
  border-color: var(--gold);
  background: rgba(45, 60, 85, 0.95);
  transform: translateY(-1px);
}

.subnav-pill.active {
  background: #2563eb linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.45);
}

.subnav-pill:active {
  transform: translateY(1px);
}

/* ═══════════ Mobile Landscape — Game Dev Tycoon & Kairosoft Studio Stage ═══════════ */
.studiolot-global-stage.lot-backdrop {
  display: none;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
  body {
    overflow: hidden !important;
  }
  #app {
    height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Fixed Topbar HUD + Tab Bar (56px total) */
  header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 0 !important;
    background: rgba(8, 12, 22, 0.96) !important;
    border-bottom: 1.5px solid rgba(245, 197, 24, 0.4) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .topbar-row {
    height: 30px !important;
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .brand {
    font-size: 12px !important;
    max-width: 120px !important;
  }
  .chip {
    font-size: 10px !important;
    padding: 1px 6px !important;
    min-height: 20px !important;
  }
  .topbar-actions {
    gap: 3px !important;
  }
  .topbar-actions .btn {
    padding: 2px 6px !important;
    min-height: 22px !important;
    font-size: 10.5px !important;
  }
  #btnWeek {
    min-height: 22px !important;
    font-size: 10.5px !important;
    padding: 2px 8px !important;
  }
  #btnFast {
    min-height: 22px !important;
    padding: 2px 6px !important;
    font-size: 10.5px !important;
  }

  /* Sleek Horizontal Tab Bar */
  .tabs {
    position: relative !important;
    display: flex !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 8px !important;
    gap: 3px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: rgba(6, 9, 16, 0.98) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tab {
    padding: 2px 9px !important;
    font-size: 11px !important;
    min-height: 22px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    font-weight: 700 !important;
    color: #94a3b8;
    background: transparent;
    border: 1px solid transparent;
  }
  .tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .tab.active {
    color: #0b0f19 !important;
    background: linear-gradient(135deg, #fde047 0%, #eab308 100%) !important;
    border-color: #fef08a !important;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.45);
    font-weight: 800 !important;
  }

  .bottomnav,
  .subtabs {
    display: none !important;
  }

  /* 2D Stage — Continuous Living Backdrop in Landscape */
  .studiolot-global-stage.lot-full,
  .studiolot-global-stage.lot-backdrop {
    position: fixed !important;
    top: 58px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 58px) !important;
    z-index: 10 !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .studiolot-global-stage.lot-compact,
  .studiolot-global-stage.lot-collapsed {
    display: none !important;
  }
  .studiolot-viewport {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
  }

  /* Management Tab Windows — Floating Over the 2D Studio Stage */
  .view {
    position: fixed !important;
    top: 64px !important;
    bottom: 8px !important;
    right: 10px !important;
    width: min(650px, 60vw) !important;
    z-index: 40 !important;
    display: block !important;
    background: rgba(9, 13, 22, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(245, 197, 24, 0.45) !important;
    border-radius: 12px !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.85), 0 8px 24px rgba(0, 0, 0, 0.9) !important;
    overflow-y: auto !important;
    padding: 10px 14px 28px !important;
    max-width: none !important;
  }
  .view.view-hidden-lot {
    display: none !important;
  }

  @media (max-width: 740px) {
    .view {
      width: calc(100vw - 20px) !important;
      left: 10px !important;
      right: 10px !important;
    }
  }

  /* Compact Density inside Department Panels */
  .kairo-dept-banner {
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
    border-width: 1.5px !important;
    gap: 8px !important;
  }
  .kairo-dept-vignette {
    display: none !important;
  }
  .kairo-dept-title {
    font-size: 13px !important;
  }
  .kairo-stats-strip {
    gap: 6px !important;
  }
  .kairo-stat-chip {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
  .kairo-dept-actions {
    gap: 4px !important;
  }
  .kairo-btn-action {
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    min-height: 24px !important;
  }
  .card {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }
  .modal-box, .modal-inner, .modal {
    max-height: 94vh !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
  }
}

@media screen and (orientation: portrait) and (max-width: 680px) {
  .orientation-landscape-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0f172a;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    margin: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
  }
}