* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #14181d; font-family: system-ui, sans-serif; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hidden { display: none !important; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #20262e, #3a2f1a); z-index: 10; }
.panel { background: rgba(0,0,0,.5); border: 1px solid rgba(255,200,90,.3); border-radius: 18px;
  padding: 40px 48px; text-align: center; backdrop-filter: blur(8px); color: #fff; max-width: 520px; }
.title { font-size: 50px; letter-spacing: 3px; color: #ffd24a; text-shadow: 0 0 24px rgba(255,170,40,.6); }
.subtitle { margin: 10px 0 28px; color: #ffe0a0; }
.btn-primary { font-size: 20px; font-weight: 700; color: #2a1c08; background: linear-gradient(135deg,#ffd24a,#ff9d2e);
  border: none; border-radius: 14px; padding: 14px 40px; cursor: pointer; transition: transform .15s; display: block; width: 100%; }
.btn-primary:hover { transform: scale(1.05); }
.controls { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-top: 26px; font-size: 13px; color: #e8d3b8; text-align: left; }
.controls span:nth-child(odd) { font-weight: 700; color: #ffd24a; }

/* Site-events legend (a11y onboarding + colorblind-safe valence key). Built from SITE_EVENTS in main.js. */
.legend-title { margin-top: 22px; font-size: 13px; font-weight: 700; color: #ffd24a; text-align: left; }
#events-legend { margin-top: 8px; display: grid; gap: 4px; font-size: 13px; color: #e8d3b8; text-align: left; }
.legend-row { display: grid; grid-template-columns: 1.4em 1fr auto; align-items: center; gap: 4px 10px; }
.legend-icon { text-align: center; }
.legend-marker { font-weight: 700; }
.legend-marker.good { color: #7ec96f; }
.legend-marker.bad { color: #ff6b5a; }
.legend-marker.neutral { color: #b8b8b8; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
#hud-time { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.45); padding: 6px 16px; border-radius: 20px; font-size: 22px; font-weight: 800; color: #ffe0a0; }
#hud-floors { position: absolute; top: 14px; left: 16px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 20px; font-weight: 700; }
#hud-progress { position: absolute; top: 52px; left: 16px; width: 160px; height: 8px; background: rgba(0,0,0,.5); border-radius: 6px; overflow: hidden; }
#progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#ffd24a,#ff9d2e); transition: width .2s; }
#hud-crew { position: absolute; top: 14px; right: 16px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 20px; font-weight: 700; }
#hud-score { position: absolute; top: 50px; right: 16px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 20px; color: #ffd24a; font-weight: 700; }
#hud-combo { position: absolute; top: 86px; right: 16px; background: rgba(220,80,20,.7); padding: 5px 12px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 13px; }
#hud-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; opacity: .75; }
#status-chips { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.status-chip { padding: 4px 10px; border-radius: 14px; font-weight: 700; font-size: 12px; color: #fff; white-space: nowrap; }
.status-chip.penalty { background: rgba(200,60,40,.8); }
.status-chip.boost { background: rgba(70,160,70,.85); }

#confront { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 6;
  background: rgba(0,0,0,.62); border: 1px solid rgba(255,200,90,.35); border-radius: 14px;
  padding: 12px 18px; text-align: center; color: #fff; min-width: 240px; }
#confront-name { font-weight: 800; color: #ffd24a; margin-bottom: 6px; }
#confront-rage { width: 100%; height: 7px; background: rgba(255,255,255,.18); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
#confront-rage-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#7ec96f,#ffcf3a,#ff5a3a); transition: width .15s; }
.confront-tactics { display: flex; gap: 14px; justify-content: center; font-size: 13px; }
.confront-tactics b { color: #ffd24a; margin-right: 3px; }

.toast { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 8;
  background: rgba(0,0,0,.6); color: #ffe0a0; padding: 12px 22px; border-radius: 12px; font-weight: 700;
  transition: opacity .4s; pointer-events: none; }
.toast.reward { top: 140px; color: #ffd24a; border: 1px solid rgba(255,210,74,.5); }
/* Colorblind-safe valence border on event toasts (the ▲/▼/◆ marker in the text carries the shape). */
.toast.good { border: 1px solid #7ec96f; }
.toast.bad { border: 1px solid #ff6b5a; }
.toast.neutral { border: 1px solid #b8b8b8; }
.difficulty { display: flex; gap: 8px; justify-content: center; margin: 4px 0 20px; }
.diff-btn { flex: 1; padding: 10px 0; border-radius: 10px; border: 1px solid rgba(255,200,90,.35);
  background: rgba(0,0,0,.3); color: #ffe0a0; font-weight: 700; cursor: pointer; transition: all .15s; }
.diff-btn.selected { background: linear-gradient(135deg,#ffd24a,#ff9d2e); color: #2a1c08; border-color: transparent; }
#hud-funds { position: absolute; top: 86px; left: 16px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 20px; color: #ffd24a; font-weight: 700; }
#hud-funds small { color: #ff9d8a; font-weight: 600; }
/* Hired-manager roster — distance-independent identification (no need to read tiny 3D tags).
   Left rail under the funds pill; one compact pill per hired manager. */
#manager-roster { position: absolute; top: 122px; left: 16px; display: flex; flex-direction: column; gap: 4px; max-width: 200px; }
.roster-row { background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-row small { color: #ff9d8a; font-weight: 600; margin-left: 4px; }
#hire-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 6; padding: 10px 16px; border: none; border-radius: 12px;
  background: linear-gradient(135deg,#ffd24a,#ff9d2e); color: #2a1c08; font-weight: 800; cursor: pointer; }
/* Centered modal (matches pause/result overlays) — no longer overlaps the rightmost plot. */
#hire-panel { position: fixed; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,14,.6); backdrop-filter: blur(3px); }
.hire-card-modal { width: min(560px, 92vw); max-height: 92vh; overflow: auto;
  background: rgba(10,12,16,.96); border: 1px solid rgba(255,200,90,.35); border-radius: 16px; padding: 18px 20px; color: #fff; }
.hire-head { font-weight: 800; color: #ffd24a; margin-bottom: 12px; font-size: 17px; text-align: center; }
/* 2×2 grid so all 4 archetype cards fit at 1280×800 without scrolling. */
#hire-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hire-card { border: 1px solid #2a2e35; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; }
.hire-card h4 { margin-bottom: 3px; font-size: 14px; }
.hire-card p { font-size: 11px; opacity: .85; line-height: 1.4; flex: 1; }
.hire-card button { margin-top: 7px; width: 100%; padding: 7px 0; border: none; border-radius: 8px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg,#ffd24a,#ff9d2e); color: #2a1c08; }
.hire-card button:disabled { background: #555; color: #999; cursor: not-allowed; }
#hire-close { width: 100%; margin-top: 12px; padding: 9px 0; border: none; border-radius: 8px; background: #444; color: #fff; cursor: pointer; font-weight: 700; }
#hud-funds.warn { background: rgba(200,40,20,.85); color: #fff; }
#funds-warn { font-weight: 800; } /* redundant text cue alongside the red .warn color */

/* Accessibility: pause-menu toggles (mute / reduced-motion). */
.settings-toggles { display: flex; gap: 8px; margin-top: 16px; }
.toggle-btn { flex: 1; padding: 9px 0; border-radius: 10px; border: 1px solid rgba(255,200,90,.35);
  background: rgba(0,0,0,.3); color: #e8d3b8; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s; }
.toggle-btn.active { background: linear-gradient(135deg,#ffd24a,#ff9d2e); color: #2a1c08; border-color: transparent; }

/* Reduced motion: kill CSS transitions/hover scale. The @media respects the OS setting; the
   body.reduced-motion class lets the in-game toggle force it regardless of OS preference. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-primary:hover { transform: none; }
}
body.reduced-motion * { transition: none !important; }
body.reduced-motion .btn-primary:hover { transform: none; }
#result-next { margin-top: 10px; }
#story-start-btn { margin-bottom: 12px; }