/* CravAche — pixel UI. Palette per DESIGN.md: navy #23304a, wood #7a4a21/#c98f4e,
   teal #9fe8ff, red #ff5c5c, green #7ee08a, brass #ffe066, sunset #ff9a56/#d35d6e.
   Rules: no default blue, no rounded corners, hard 2px shadows, Silkscreen/VT323 only. */

:root{
  --navy:#23304a; --navy-d:#16203a; --navy-dd:#0d1426;
  --wood:#7a4a21; --wood-l:#c98f4e;
  --teal:#9fe8ff; --red:#ff5c5c; --green:#7ee08a; --brass:#ffe066;
  --sun:#ff9a56; --rose:#d35d6e;
  --khaki:#3a3326; --khaki-l:#473f2f;
  --paper:#f4e8cf; --ink:#1a1410;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ width:100%; height:100%; overflow:hidden; background:var(--navy-dd); }
body{ font-family:'VT323', monospace; color:var(--paper); }

#stage{
  position:absolute; left:50%; top:50%;
  width:1280px; height:720px;
  transform-origin:0 0;
  image-rendering:pixelated;
}
#stage.shake{ animation:shake 0.28s steps(2) 2; }
@keyframes shake{
  0%{ margin-left:0; margin-top:0; }
  25%{ margin-left:-8px; margin-top:4px; }
  50%{ margin-left:6px; margin-top:-6px; }
  75%{ margin-left:-4px; margin-top:2px; }
  100%{ margin-left:0; margin-top:0; }
}

canvas#game{
  position:absolute; left:0; top:0; width:1280px; height:720px;
  image-rendering:pixelated; image-rendering:crisp-edges;
  background:var(--navy-d);
}

/* ---------- pixel frame primitive (chunky 9-slice look, pure CSS) ---------- */
.px-frame{
  background:var(--navy);
  border:3px solid var(--navy-dd);
  box-shadow:
    inset 0 3px 0 rgba(159,232,255,.18),
    inset 3px 0 0 rgba(159,232,255,.10),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset -3px 0 0 rgba(0,0,0,.3),
    2px 2px 0 #000;
}
.px-frame-brass{
  background:#3a3014;
  border:3px solid var(--ink);
  box-shadow:
    inset 0 3px 0 rgba(255,224,102,.4),
    inset 0 -3px 0 rgba(0,0,0,.5),
    2px 2px 0 #000;
}

.px-btn{
  font-family:'Silkscreen', monospace; font-size:13px; line-height:1;
  color:var(--ink); background:var(--brass);
  border:3px solid var(--ink);
  padding:8px 14px 7px;
  cursor:pointer; text-transform:uppercase; letter-spacing:.5px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.3), 2px 2px 0 #000;
  transition:none;
}
.px-btn:hover{ background:#fff0a0; }
.px-btn:active{ transform:translate(2px,2px); box-shadow:inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 0 #000; }
.px-btn-big{ font-size:18px; padding:14px 26px 12px; }
.px-btn-dim{ background:var(--khaki-l); color:var(--paper); }
.px-btn-dim:hover{ background:#5a5040; }
.px-btn-red{ background:var(--red); color:#2a0808; }
.px-btn-red:hover{ background:#ff8080; }
.px-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- HUD (one clean tycoon bar over the dark room) ---------- */
#hud{
  position:absolute; left:0; top:0; width:100%;
  display:flex; gap:8px; padding:10px 14px; align-items:stretch;
  pointer-events:none; z-index:30;
}
/* every chip shares ONE border recipe + height. 40px lock so toasts start below.
   Deeper navy than the old bright build so the chrome reads as a tidy bar
   floating over the near-black room, color pops from the values inside. */
.chip{
  pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  height:40px; padding:0 12px;
  background:var(--navy-d);
  border:3px solid #05070f;
  box-shadow:inset 0 2px 0 rgba(159,232,255,.14), inset 0 -3px 0 rgba(0,0,0,.5), 2px 2px 0 #000;
}
.chip-label{ font-family:'Silkscreen', monospace; font-size:9px; color:var(--teal); opacity:.7; }
.chip-val{ font-family:'VT323', monospace; font-size:24px; color:var(--paper); line-height:1; }
/* the merged 3-stat bar */
.statbar{ gap:0; padding:0; }
.statbar .stat{ display:flex; align-items:center; gap:8px; padding:0 14px; height:100%; }
.statbar .stat-sep{ width:2px; align-self:stretch; margin:6px 0; background:rgba(159,232,255,.15); }
#hud-money{ color:var(--green); min-width:104px; text-align:right; }
#hud-money.flash-up{ color:#c8ffd2; }
#hud-money.flash-down{ color:var(--red); }
#hud-rep{ color:var(--brass); }
#chip-clock{ margin-left:auto; }
#chip-clock .chip-label{ opacity:.7; }
#chip-clock .chip-val{ color:var(--teal); }
/* equal square icon buttons matching chip height exactly */
.chip-iconbtn{
  cursor:pointer; width:40px; padding:0; justify-content:center;
  font-size:18px; color:var(--brass);
}
.chip-iconbtn:hover{ background:var(--navy-d); }
.chip-iconbtn:active{ transform:translate(1px,1px); }

.chaos-track{
  display:inline-block; width:96px; height:13px; background:var(--navy-dd);
  border:2px solid #000;
}
.chaos-fill{
  display:block; height:100%; width:0%;
  background:var(--sun);
  transition:width .15s steps(3);
}
.chaos-fill.hot{ background:var(--red); animation:chaosblink .5s steps(2) infinite; }
@keyframes chaosblink{ 0%{opacity:1} 50%{opacity:.55} 100%{opacity:1} }
#hud-chaos{ font-size:20px; color:var(--sun); }

/* ---------- prop-tap notifications: ONE line, centred, replaced on re-tap ----------
   (the brief offers live top-right in #brief-offers; these sit up-centre so they
   never pile onto the briefs or each other — newest text replaces the old) */
#toasts{
  position:absolute; left:50%; top:84px; transform:translateX(-50%);
  max-width:540px; display:flex; flex-direction:column; align-items:center;
  gap:8px; z-index:40; pointer-events:none; text-align:center;
}
.toast{
  background:var(--navy-d);
  border:3px solid #05070f;
  box-shadow:inset 0 2px 0 rgba(159,232,255,.14), inset 0 -3px 0 rgba(0,0,0,.5), 2px 2px 0 #000;
  padding:8px 12px 8px;
  animation:toastin .12s steps(3);
}
/* the overflow collapse chip */
.toast-more{
  background:var(--navy-dd);
  border:3px solid var(--navy-dd);
  box-shadow:inset 0 2px 0 rgba(159,232,255,.12), 2px 2px 0 #000;
  padding:6px 12px 5px; text-align:center;
  font-family:'Silkscreen', monospace; font-size:10px; color:var(--teal);
}
@keyframes toastin{ from{ transform:translateY(-10px); opacity:0 } to{ transform:none; opacity:1 } }
.toast.brief-toast{ border-color:var(--brass); }
.toast-head{ font-family:'Silkscreen', monospace; font-size:10px; color:var(--brass); margin-bottom:4px; }
.toast-title{ font-size:21px; line-height:1.05; color:var(--paper); }
.toast-sub{ font-size:17px; color:var(--teal); margin-top:2px; }
.toast-fee{ font-size:19px; color:var(--green); }
.toast-btns{ display:flex; gap:8px; margin-top:8px; }
.toast-btns .px-btn{ font-size:10px; padding:6px 10px 5px; }
.toast-timer{ height:5px; background:var(--navy-dd); margin-top:8px; border:1px solid #000; }
.toast-timer > div{ height:100%; background:var(--sun); width:100%; }
.toast.info-toast .toast-title{ font-size:18px; }
.toast.bad{ border-color:var(--red); }
.toast.good{ border-color:var(--green); }

/* ---------- dock ---------- */
#dock{
  position:absolute; left:0; bottom:0; width:100%;
  height:96px; z-index:45; /* above toasts: buttons stay clickable when busy */
  background:var(--navy-dd);
  border-top:3px solid #000;
  box-shadow:inset 0 3px 0 rgba(159,232,255,.12);
  display:flex; align-items:center; gap:12px; padding:8px 14px;
}
.tray-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
/* small horizontal tab replacing the rotated BRIEF TRAY label */
.tray-tab{
  font-family:'Silkscreen', monospace; font-size:9px; color:var(--teal);
  letter-spacing:1px; padding-left:2px;
}
#tray{ display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 4px; }
#tray::-webkit-scrollbar{ height:8px; }
#tray::-webkit-scrollbar-thumb{ background:var(--navy); border:2px solid #000; }
.dock-hint{ font-size:14px; color:var(--khaki-l); line-height:1; padding-left:2px; }

.brief-card{
  flex:0 0 auto; width:218px; cursor:grab; user-select:none;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6), 2px 2px 0 #000;
  padding:7px 9px 6px;
  position:relative;
}
.brief-card:active{ cursor:grabbing; }
.brief-card .bc-client{ font-family:'Silkscreen', monospace; font-size:8px; color:var(--wood); }
.brief-card .bc-title{ font-size:18px; line-height:.95; margin:2px 0; }
.brief-card .bc-row{ display:flex; justify-content:space-between; font-size:15px; }
.brief-card .bc-fee{ color:#2e7d3a; }
.brief-card .bc-dl{ color:var(--rose); }
.brief-card .bc-dl.late{ color:var(--red); font-weight:bold; animation:chaosblink .4s steps(2) infinite; }
.brief-card .bc-fine{
  margin-top:3px; padding-top:3px; border-top:1px dashed var(--wood);
  font-size:13px; line-height:1.0; color:#5a4632; font-style:italic;
}
.brief-card .bc-fine::before{ content:"FINE PRINT: "; font-family:'Silkscreen',monospace; font-size:7px; font-style:normal; color:var(--rose); }
.brief-card .bc-diff{ position:absolute; right:7px; top:6px; font-size:11px; color:var(--rose); letter-spacing:1px; }

#drag-ghost{
  position:absolute; z-index:90; pointer-events:none;
  width:218px; opacity:.92; transform:rotate(-2deg);
}
#drag-ghost .brief-card{ width:218px; }

/* ---------- dim + modals ---------- */
#dim{
  position:absolute; inset:0; z-index:50;
  background:rgba(13,20,38,.78);
}
#modal-root{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,20,38,.6);
}
#modal-root.see-through{ background:transparent; pointer-events:none; }
#modal-root.see-through .modal{ pointer-events:auto; }
.hidden{ display:none !important; }

.modal{
  width:520px; max-width:92%;
  background:var(--navy);
  border:3px solid var(--brass);
  box-shadow:inset 0 3px 0 rgba(159,232,255,.15), inset 0 -3px 0 rgba(0,0,0,.5), 2px 2px 0 #000;
  padding:18px 20px 16px;
  animation:modalin .12s steps(3);
}
@keyframes modalin{ from{ transform:scale(.92); } to{ transform:none; } }
.modal.modal-red{ border-color:var(--red); }
.modal.modal-green{ border-color:var(--green); }
.modal-kicker{ font-family:'Silkscreen', monospace; font-size:10px; color:var(--teal); margin-bottom:6px; }
.modal-title{ font-family:'Silkscreen', monospace; font-size:20px; color:var(--brass); line-height:1.1; margin-bottom:10px; }
.modal-body{ font-size:21px; line-height:1.12; color:var(--paper); margin-bottom:12px; }
.modal-body .q{ color:var(--teal); }
.modal-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.modal-fine{ font-size:16px; color:#b9ac8e; margin-top:10px; }

/* verdict slot */
.slot-box{
  margin:6px 0 14px; padding:14px 10px;
  background:var(--navy-dd); border:3px solid #000;
  text-align:center;
}
.slot-word{
  font-family:'Silkscreen', monospace; font-size:26px; letter-spacing:1px;
  color:var(--paper); min-height:34px;
}
.slot-word.v-approve{ color:var(--green); }
.slot-word.v-viral{ color:var(--brass); text-shadow:2px 2px 0 var(--rose); }
.slot-word.v-scrapped{ color:var(--red); }
.slot-word.v-small{ color:var(--sun); }
.slot-payout{ font-size:24px; margin-top:6px; color:var(--green); min-height:26px; }

/* call modal hold bar */
.hold-track{ height:18px; background:var(--navy-dd); border:2px solid #000; margin:10px 0 4px; }
.hold-fill{ height:100%; width:0%; background:var(--teal); }
.call-shake{ animation:ringring .3s steps(2) infinite; }
@keyframes ringring{ 0%{transform:rotate(-1deg)} 50%{transform:rotate(1.4deg)} 100%{transform:rotate(-1deg)} }

/* report card */
.report-grid{ display:grid; grid-template-columns:1fr auto; gap:2px 14px; font-size:16px; margin-bottom:6px; }
.report-grid .rg-k{ color:var(--teal); white-space:nowrap; }
.report-grid .rg-v{ text-align:right; color:var(--paper); }
.report-grid .rg-v.neg{ color:var(--red); }
.report-grid .rg-v.pos{ color:var(--green); }
.stamp{
  display:inline-block; font-family:'Silkscreen', monospace; font-size:15px;
  padding:6px 10px 5px; transform:rotate(-4deg);
  border:3px solid var(--green); color:var(--green);
  margin:6px 0 10px;
}
.stamp.fail{ border-color:var(--red); color:var(--red); }
.quote-of-week{
  border-left:4px solid var(--brass); padding:4px 0 4px 10px;
  font-size:19px; color:var(--sun); margin-bottom:10px; font-style:italic;
}
.shop-row{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:6px 8px; margin-bottom:6px;
  background:var(--navy-dd); border:2px solid #000;
}
.shop-row .sr-name{ font-size:19px; }
.shop-row .sr-desc{ font-size:14px; color:var(--khaki-l); display:block; }
.shop-row .px-btn{ font-size:10px; padding:5px 9px 4px; flex:0 0 auto; }

/* start screen */
#start-screen{
  position:absolute; inset:0; z-index:100;
  background:var(--navy-dd);
  display:flex; align-items:center; justify-content:center;
}
.start-box{ text-align:center; width:560px; }
.start-logo{
  font-family:'Silkscreen', monospace; font-size:64px; font-weight:700;
  color:var(--brass); text-shadow:4px 4px 0 var(--rose), 8px 8px 0 #000;
  letter-spacing:2px;
}
.start-logo span{ color:var(--teal); }
.start-tag{ font-family:'Silkscreen', monospace; font-size:12px; color:var(--sun); margin:8px 0 18px; }
.start-body{ font-size:23px; line-height:1.15; color:var(--paper); margin-bottom:24px; }
.start-foot{ font-size:16px; color:var(--khaki-l); margin-top:16px; }

/* end screens */
.end-big{
  font-family:'Silkscreen', monospace; font-size:34px; color:var(--green);
  text-shadow:3px 3px 0 #000; margin-bottom:12px; line-height:1.1;
}
.end-big.lose{ color:var(--red); }

/* confetti */
.confetti{
  position:absolute; width:8px; height:8px; z-index:95; pointer-events:none;
  animation:confallin 1.4s steps(12) forwards;
}
@keyframes confallin{
  from{ transform:translateY(-30px) rotate(0deg); opacity:1; }
  to{ transform:translateY(740px) rotate(540deg); opacity:.7; }
}

/* count-up flash */
.bump{ animation:bump .15s steps(2); }
@keyframes bump{ 50%{ transform:scale(1.18); } }

/* ---------- v3: role chips, urgency, dock buttons, collection ---------- */
.bc-role{
  font-family:'Silkscreen', monospace; font-size:8px;
  padding:2px 6px 1px; border:2px solid var(--ink);
  background:var(--navy); color:var(--teal);
}
.brief-card .bc-role{ background:var(--navy); }
.bc-role-production{ color:var(--sun); }
.bc-role-content{ color:var(--green); }
.bc-role-any{ color:var(--paper); }

.toast-urgency{
  float:right; font-family:'Silkscreen', monospace; font-size:9px;
  padding:2px 6px 1px; border:2px solid currentColor;
}
.u-chill{ color:var(--green); }
.u-tight{ color:var(--sun); }
.u-insane{ color:var(--red); animation:chaosblink .5s steps(2) infinite; }

.toast-read-hint{
  font-size:12px; color:var(--khaki-l); margin-top:4px; display:none;
}
.toast.reading .toast-read-hint{ display:block; color:var(--teal); }
.toast.reading{ border-color:var(--teal); }
/* other offers freeze too while you read one: subtle held cue */
.toast.held{ border-color:rgba(159,232,255,.45); }
.toast.held .toast-timer > div{ background:rgba(159,232,255,.5); }

/* dock buttons: equal width, equal border, labelled-icon (Dave-the-Diver). */
.dock-side{ display:flex; gap:12px; flex:0 0 auto; align-items:stretch; }
.dock-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:76px; height:74px; padding:0; white-space:nowrap;
}
.dock-btn .db-ico{ font-size:22px; line-height:1; }
.dock-btn .db-cap{ font-family:'Silkscreen', monospace; font-size:9px; line-height:1; }
.dock-btn #collect-badge{ font-size:8px; }
#btn-collect.has-money{ background:var(--green); animation:chaosblink 1.2s steps(2) infinite; }
#collect-badge{ font-size:8px; }

/* night skip button floats above the dock */
#btn-skipnight{
  position:absolute; right:14px; top:-46px;
  background:var(--navy); color:var(--teal); border-color:var(--teal);
}
#btn-skipnight:hover{ background:var(--navy-d); }

/* restructure mode */
#restructure{
  position:absolute; inset:0; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  pointer-events:none;
  background:repeating-linear-gradient(45deg, rgba(255,224,102,.05) 0 24px, transparent 24px 48px);
}
.rs-banner{
  margin-top:54px; padding:10px 22px;
  background:var(--navy-dd); border:3px solid var(--brass);
  box-shadow:4px 4px 0 #000; text-align:center;
}
.rs-title{ font-family:'Silkscreen', monospace; font-size:18px; color:var(--brass); }
.rs-sub{ font-size:17px; color:var(--paper); max-width:560px; }
#btn-letsgo{ pointer-events:auto; margin-top:10px; animation:bump 1.6s steps(2) infinite; }

/* ---------- friday IG recap reel ---------- */
.modal.modal-reel{
  background:transparent; border:none; box-shadow:none; padding:0;
  display:flex; justify-content:center;
}
.ig-phone{
  width:300px; height:560px; background:#0b0f1e;
  border:3px solid #16203a; box-shadow:2px 2px 0 #000;
  display:flex; flex-direction:column; cursor:pointer; user-select:none;
  position:relative; overflow:hidden;
}
.ig-bars{ display:flex; gap:4px; padding:8px 10px 0; }
.ig-bar{ flex:1; height:4px; background:#2a3654; }
.ig-bar > div{ height:100%; width:0%; background:#f4e8cf; }
.ig-head{
  font-family:'Silkscreen',monospace; font-size:9px; color:#f4e8cf;
  padding:10px 12px; display:flex; align-items:center; gap:8px;
}
.ig-avatar{
  width:22px; height:22px; background:#ffe066; color:#0b0f1e;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; border:2px solid #f4e8cf;
}
.ig-dim{ color:#5a6a8a; }
.ig-slide{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:0 18px; gap:10px;
}
.ig-label{
  font-family:'Silkscreen',monospace; font-size:9px; color:#9fe8ff;
  letter-spacing:1px;
}
.ig-big{
  font-family:'Silkscreen',monospace; font-size:34px; color:#f4e8cf;
  line-height:1.15; text-shadow:3px 3px 0 #000;
}
.ig-sub{ font-family:'VT323',monospace; font-size:18px; color:#9aa7c4; line-height:1.3; }
.ig-delta{ font-family:'VT323',monospace; font-size:19px; }
.ig-delta.pos{ color:#7ee08a; }
.ig-delta.neg{ color:#ff5c5c; }
.ig-mvp-wrap{
  width:128px; height:192px; overflow:hidden; image-rendering:pixelated;
  border:3px solid #ffe066; background:#16203a; box-shadow:4px 4px 0 #000;
}
.ig-mvp{ width:256px; height:192px; image-rendering:pixelated; }
.ig-foot{
  font-family:'VT323',monospace; font-size:16px; color:#9aa7c4;
  padding:10px 14px 12px; border-top:2px solid #16203a;
}

/* ---------- the craanes ---------- */
.modal.modal-craanes{ border-color:#ffe066; }
.craanes-result{ margin:8px 0; padding:8px 10px; border:2px solid #2a3654; }
.craanes-result.won{ border-color:#ffe066; background:rgba(255,224,102,0.07); }
.craanes-result.lost{ opacity:0.85; }
.craanes-result .cr-cat{
  font-family:'Silkscreen',monospace; font-size:9px; color:#9fe8ff; margin-bottom:4px;
}
.craanes-result .cr-verdict{ font-family:'VT323',monospace; font-size:19px; color:#f4e8cf; }
.craanes-result.won .cr-verdict{ color:#ffe066; }

/* fine print inside dark toasts: the brief-card brown is unreadable on navy */
.toast .bc-fine{ color:#d8c9a8; border-top-color:#5a6a8a; }

/* ---------- MONDAY dread (week transition overlay) ---------- */
#monday-dread{
  position:absolute; inset:0; z-index:90;
  background:rgba(0,0,0,0.82);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; user-select:none;
  /* jitter lives on .md-word, NOT here: translating the full-cover backdrop
     by 1px lifted its bottom edge and flashed the office behind it. */
}
/* scanline flicker band over everything */
#monday-dread .md-scan{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,92,92,.07) 0 2px, transparent 2px 5px);
  animation:mdscan 0.2s steps(2) infinite;
}
#monday-dread .md-word{
  font-family:'VT323', monospace;
  font-size:210px; line-height:0.85; letter-spacing:14px;
  display:flex;
  animation:mdjitter 0.12s steps(2) infinite;
}
#monday-dread .md-ch{
  color:var(--red);
  text-shadow:6px 6px 0 #000, 12px 12px 0 rgba(122,20,20,.6), 0 0 22px rgba(255,92,92,.45);
  opacity:0; transform:translateY(-40px) scale(1.4);
  animation:mdslam 0.18s steps(2) forwards;
}
#monday-dread .md-sub{
  font-family:'VT323', monospace; font-size:46px; color:var(--sun);
  margin-top:6px; opacity:0;
  animation:mdfade 0.5s steps(4) forwards; animation-delay:1.25s;
}
#monday-dread .md-tag{
  font-family:'Silkscreen', monospace; font-size:11px; color:#6a7a9a;
  letter-spacing:1px; margin-top:18px; opacity:0;
  animation:mdfade 0.6s steps(4) forwards; animation-delay:1.7s;
}
@keyframes mdslam{
  0%{ opacity:0; transform:translateY(-40px) scale(1.4); }
  60%{ opacity:1; transform:translateY(6px) scale(0.92); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes mdfade{ to{ opacity:1; } }
@keyframes mdjitter{ 50%{ transform:translate(1px,-1px); } }
@keyframes mdscan{ 50%{ opacity:.5; } }

/* ---------- pixel text input (neon naming) ---------- */
.px-input{
  display:block; width:100%; margin:10px 0 4px;
  font-family:'Silkscreen', monospace; font-size:18px; letter-spacing:2px;
  text-transform:uppercase; color:var(--brass);
  background:var(--navy-dd); border:3px solid var(--brass);
  padding:10px 12px 8px; outline:none;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.5);
}
.px-input:focus{ border-color:var(--sun); color:var(--sun); }
.px-input::selection{ background:var(--sun); color:var(--navy-dd); }
.neon-preview{
  text-align:center; margin:12px 0 4px; padding:12px 0;
  background:#0c1322; border:2px solid #1a2440;
}
.neon-preview span{
  font-family:'Silkscreen', monospace; font-size:20px; color:var(--sun);
  text-shadow:0 0 10px rgba(255,154,86,.8), 2px 2px 0 #5a2a14;
}

/* tall modal lists (hiring etc.) scroll instead of spilling off-stage */
.modal{ max-height:680px; overflow:hidden; display:flex; flex-direction:column; }
.modal [data-hires], .modal [data-gshop], .modal [data-shop], .modal [data-cats], .modal [data-inv]{
  overflow-y:auto; min-height:0;
}
.modal [data-hires]{ max-height:430px; padding-right:6px; }
/* the weekly shop sits inside the (overflow:hidden) report card; without an
   explicit cap + visible scrollbar it collapsed to ~187px and players never
   discovered the other items. Give it the same chunky scroll treatment. */
.modal [data-shop]{ max-height:300px; padding-right:6px; }
.modal [data-hires]::-webkit-scrollbar,
.modal [data-shop]::-webkit-scrollbar{ width:10px; }
.modal [data-hires]::-webkit-scrollbar-thumb,
.modal [data-shop]::-webkit-scrollbar-thumb{ background:var(--navy-dd); border:2px solid #000; }
/* persistent "there's more below" hint above the shop grid */
.shop-scroll-hint{ text-align:center; font:11px/1 'Silkscreen', monospace;
  color:var(--teal); opacity:.85; margin:4px 0 2px; letter-spacing:1px; }

/* pause menu volume row */
.vol-row{ display:flex; gap:8px; margin-top:6px; }

/* ---------- weekly SHOP: tidy tile grid that reads like a store ---------- */
.shop-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  padding:2px 0 4px;
}
.shop-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  padding:10px 11px 11px; position:relative;
  background:var(--navy-dd); border:3px solid #05070f;
  box-shadow:inset 0 2px 0 rgba(159,232,255,.12), inset 0 -3px 0 rgba(0,0,0,.5), 2px 2px 0 #000;
}
.shop-card:hover{ border-color:rgba(159,232,255,.35); }
.shop-card .sc-icon{
  font-size:30px; line-height:1; margin-bottom:2px;
  filter:drop-shadow(2px 2px 0 #000);
}
.shop-card .sc-name{
  font-family:'Silkscreen', monospace; font-size:12px; color:var(--brass);
  line-height:1.15; letter-spacing:.3px;
}
.shop-card .sc-desc{
  font-size:15px; line-height:1.05; color:#b9ac8e; flex:1 0 auto;
}
.shop-card .sc-buy{
  align-self:stretch; margin-top:6px; font-size:12px; padding:7px 10px 6px;
  text-align:center;
}
.shop-card .sc-tag{
  position:absolute; right:8px; top:8px;
  font-family:'Silkscreen', monospace; font-size:8px; color:var(--green);
  border:2px solid var(--green); padding:2px 5px 1px;
}
/* states */
.shop-card.is-owned{ border-color:var(--green); }
.shop-card.is-owned .sc-icon{ filter:drop-shadow(2px 2px 0 #000) saturate(1.2); }
.shop-card.is-locked{ opacity:.55; }
.shop-card.is-locked .sc-name{ color:var(--khaki-l); }
.shop-card.cant-afford .sc-buy{ color:var(--red); }
@media (max-width:560px){ .shop-grid{ grid-template-columns:1fr; } }

/* shop grid scrolls inside the modal like the other lists */
.modal [data-shop]{ overflow-y:auto; min-height:0; padding-right:4px; }

/* ---------- EMPLOYEES roster rows (FIRE) ---------- */
.modal [data-roster]{ overflow-y:auto; min-height:0; max-height:230px; padding-right:6px; }
.roster-row{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:6px 8px; margin-bottom:6px;
  background:var(--navy-dd); border:2px solid #000;
}
.roster-row .rr-info{ min-width:0; }
.roster-row .rr-stars{ color:var(--brass); }
.roster-row .rr-fire{ font-size:10px; padding:5px 9px 4px; flex:0 0 auto; }
.custom-hire-btn{ display:block; width:100%; text-align:center; }

/* custom-hire dept selector */
.ch-depts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.ch-depts .px-btn{ font-size:10px; padding:6px 9px 5px; }