/* ============================================================
   RACK TO RICHES — game.css
   Step 1: layout + styling only, no game logic yet.

   How this file is organised:
     1. Reset & base
     2. Header
     3. Three-panel layout
     4. Left panel (messages + menu)
     5. Center panel (server room, gauges, market, emergency)
     6. Right panel (shop)
     7. Modals (event, save/load, reset, toast)
     8. Mobile layout (768px and below)
============================================================ */


/* ── 1. Reset & base ────────────────────────────────────── */

/* Remove all default margin/padding and use border-box sizing.
   border-box means padding is included inside the element's width,
   which makes layout maths much easier. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gameBody {
  display: flex;           /* stack header + container vertically */
  flex-direction: column;
  height: 100vh;           /* fill the whole screen */
  font-family: "Courier New", monospace;
  background: #1a1a1a;
  color: #ccc;
  overflow: hidden;        /* prevent the page itself from scrolling */
}


/* ── 2. Header ───────────────────────────────────────────── */

.gameHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111;
  border-bottom: 3px solid #4a9eff;  /* blue accent line */
  padding: 10px 20px;
  flex-shrink: 0;   /* header never shrinks when the window is small */
  gap: 12px;
  flex-wrap: wrap;  /* wraps on very narrow screens */
}

.gameTitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gameTitle h1 {
  font-size: 1.1em;
  color: #fff;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* Small badge next to the title showing the current location */
.locationBadge {
  font-size: 0.7em;
  background: #1a1a1a;
  border: 1px solid #4a9eff;
  color: #4a9eff;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.versionBadge {
  font-size: 0.7em;
  color: #555;
  white-space: nowrap;
}

.modeBadge {
  font-size: 0.65em;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.modeBadge.career   { color: #555; border: 1px solid #333; }
.modeBadge.creative { color: #44cc88; border: 1px solid #44cc88; }

/* The row of four stat chips on the right of the header */
.headerStats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Each individual stat chip (Compute, Credits, Temp, Power) */
.statChip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 10px;
  min-width: 70px;
}

.statLabel {
  font-size: 0.65em;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.statValue {
  font-size: 0.9em;
  color: #fff;
  font-weight: bold;
}

/* Temperature chip changes colour when hot */
.statChip.warm .statValue { color: #ffaa00; }
.statChip.hot  .statValue { color: #ff4444; }


/* ── 3. Three-panel layout ───────────────────────────────── */

/* This div sits between the header and the bottom of the screen.
   flex: 1 makes it fill all remaining vertical space.
   overflow: hidden stops panels from growing beyond the screen. */
.gameContainer {
  display: flex;
  flex: 1;
  overflow: hidden;
}


/* ── 4. Left panel — Messages + Menu ────────────────────── */

.sidebarLeft {
  width: 240px;
  flex-shrink: 0;       /* never shrink this panel */
  background: #111;
  border-right: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  overflow-y: auto;     /* scroll if content is taller than the panel */
}

/* A section inside a panel (there are two: messages and menu) */
.panelSection {
  padding: 12px;
  border-bottom: 1px solid #2a2a2a;
}

/* Small uppercase label at the top of a section */
.panelTitle {
  font-size: 0.65em;
  letter-spacing: 2px;
  color: #555;
  margin-bottom: 8px;
}

/* The scrollable list of game messages */
.messageLog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

/* A single message entry in the log */
.logEntry {
  font-size: 0.78em;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 3px;
  border-left: 3px solid #333;
}

/* Different message types get different colours */
.logSystem  { border-color: #555;    color: #888; }
.logEvent   { border-color: #4a9eff; color: #ccc; }
.logWarning { border-color: #ffaa00; color: #ffaa00; }
.logDanger  { border-color: #ff4444; color: #ff4444; }
.logMom     { border-color: #aa66ff; color: #cc99ff; }
.logGood    { border-color: #44cc88; color: #44cc88; }

/* Menu section: stacks links and buttons vertically */
.menuSection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menuLink {
  color: #aaa;
  text-decoration: none;
  font-size: 0.82em;
  padding: 5px 6px;
  border-radius: 3px;
  transition: color 0.2s;
}
.menuLink:hover { color: #4a9eff; }

/* A thin horizontal line between menu sections */
.menuDivider {
  height: 1px;
  background: #2a2a2a;
  margin: 4px 0;
}

.menuBtn {
  background: transparent;
  border: 1px solid #333;
  color: #aaa;
  font-family: inherit;
  font-size: 0.82em;
  padding: 7px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, color 0.2s;
}
.menuBtn:hover         { border-color: #4a9eff; color: #4a9eff; }
.menuBtnDanger:hover   { border-color: #ff4444; color: #ff4444; }
.soundBtn              { color: #66bb6a; border-color: #2a4a2d; }
.soundBtn:hover        { border-color: #66bb6a; color: #88dd8a; }
.soundBtn.muted        { color: #666;    border-color: #333; }
.soundBtn.muted:hover  { border-color: #888; color: #999; }


/* ── 5. Center panel — Game Dashboard ───────────────────── */

.gameMain {
  flex: 1;               /* takes all remaining width between the two sidebars */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  gap: 16px;
}

/* Server room: holds the machine cards side by side */
/* ── Location bar ── */
.locationBar {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.locationInfoRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.locationName {
  font-size: 0.85em;
  font-weight: bold;
  color: #ddd;
}

.locationMeta {
  font-size: 0.75em;
  color: #888;
}

.locationUpgradeRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.locationUpgradeBtn {
  background: transparent;
  border: 1px solid #ccaa44;
  color: #ccaa44;
  font-family: inherit;
  font-size: 0.78em;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.locationUpgradeBtn:hover:not(:disabled) { background: #ccaa44; color: #000; }
.locationUpgradeBtn:disabled { border-color: #444; color: #555; cursor: default; }

.locationUpgradeCost { opacity: 0.8; }

.locationUpgradeHint {
  font-size: 0.72em;
  color: #666;
  font-style: italic;
}

.serverRoom {
  display: flex;
  flex-wrap: wrap;       /* cards wrap to a new line if there are many */
  gap: 12px;
  justify-content: center;
  width: 100%;
}

/* A single machine card */
.machineCard {
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 14px;
  width: 160px;
}

/* Border colour changes based on machine state */
.machineCard.online  { border-color: #44cc88; }
.machineCard.offline { border-color: #555; opacity: 0.6; }
.machineCard.broken  { border-color: #ff4444; }
.machineCard.warm    { border-color: #ffaa00; }
/* Hot machines pulse between red and orange */
.machineCard.hot     { border-color: #ff4444; animation: cardPulse 1s infinite; }

@keyframes cardPulse {
  0%, 100% { border-color: #ff4444; }
  50%       { border-color: #ff8800; }
}

.machineName {
  font-size: 0.78em;
  color: #fff;
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

/* Small LED indicator dot on each machine card */
.machineLed {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-bottom: 8px;
  background: #333;
}
.machineLed.on     { background: #44cc88; box-shadow: 0 0 6px #44cc88; }
.machineLed.broken { background: #ff4444; box-shadow: 0 0 6px #ff4444; }

.machineStats {
  font-size: 0.72em;
  color: #777;
  line-height: 1.6;
}

/* Wear bar below the machine stats */
.wearBarWrap  { margin-top: 6px; }
.wearBarLabel { font-size: 0.65em; color: #555; margin-bottom: 2px; }
.wearBarTrack { height: 4px; background: #222; border-radius: 2px; }
.wearBarFill  { height: 100%; background: #44cc88; border-radius: 2px; transition: width 0.5s, background 0.5s; }

/* Reboot button shown when a machine is broken */
.machineRebootBtn {
  margin-top: 8px;
  width: 100%;
  padding: 5px;
  background: transparent;
  border: 1px solid #ff4444;
  color: #ff4444;
  font-family: inherit;
  font-size: 0.72em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.machineRebootBtn:hover { background: #ff4444; color: #000; }

/* The two gauges sit side by side */
.gaugeRow {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 500px;
}

.gauge { flex: 1; }

.gaugeLabel {
  font-size: 0.7em;
  color: #666;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.gaugeBar {
  height: 8px;
  background: #222;
  border-radius: 4px;
  overflow: hidden;  /* keeps the fill inside the rounded corners */
}

/* The coloured bar inside the gauge track */
.gaugeFill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s, background 0.5s;
}
.tempFill  { background: #44cc88; }  /* changes to orange/red when hot */
.powerFill { background: #4a9eff; }

.gaugeValue {
  font-size: 0.7em;
  color: #666;
  margin-top: 3px;
}

/* Market row — hidden until tutorial unlocks it */
.marketRow {
  display: none;   /* JS changes this to "flex" */
  gap: 8px;
  width: 100%;
}

.marketSection {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.marketSectionLabel {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: #888;
  text-transform: uppercase;
}

/* The demand badge changes colour based on market state */
.demandBadge          { padding: 2px 10px; border-radius: 3px; font-weight: bold; font-size: 0.9em; }
.demandBadge.low      { background: #2a1a1a; color: #ff6666; }
.demandBadge.medium   { background: #1a1a2a; color: #4a9eff; }
.demandBadge.high     { background: #1a2a1a; color: #44cc88; }
.demandBadge.spike    { background: #2a2a00; color: #ffdd00; }

.sellBtn {
  width: 100%;
  padding: 12px;
  background: #4a9eff;
  border: none;
  color: #000;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.sellBtn:hover  { background: #6abaff; }
.sellBtn:active { transform: scale(0.98); }

/* Emergency row — hidden until a crisis fires */
.emergencyRow {
  display: none;   /* JS changes this to "flex" */
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

/* Individual emergency buttons */
.emergencyBtn {
  display: none;   /* each button shown individually by JS */
  width: 100%;
  padding: 14px;
  border: none;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  /* Pulsing animation to grab the player's attention */
  animation: emergencyPulse 0.8s infinite;
}
.pumpBtn      { background: #0088cc; color: #fff; }
.generatorBtn { background: #cc6600; color: #fff; }
.emergencyBtn:active { transform: scale(0.96); }

@keyframes emergencyPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}


/* ── 5b. Case cards ─────────────────────────────────────── */

.caseCard {
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 14px;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.caseCard.offline   { border-color: #555; opacity: 0.6; }
.caseCard.cold      { border-color: #44aaff; }
.caseCard.normal    { border-color: #44cc88; }
.caseCard.warm      { border-color: #ffaa00; }
.caseCard.hot       { border-color: #ff8800; animation: cardPulse 1.5s infinite; }
.caseCard.danger    { border-color: #ff4444; animation: cardPulse 0.8s infinite; }
.caseCard.critical  { border-color: #dd0000; animation: cardPulse 0.4s infinite; }
.caseCard.meltdown  { border-color: #ff00ff; animation: cardPulse 0.2s infinite; }

.caseCardHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.caseLed {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
  flex-shrink: 0;
}
.caseLed.on { background: #44cc88; box-shadow: 0 0 6px #44cc88; }

.caseName {
  font-size: 0.78em;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.caseTempRow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.caseTempTrack {
  flex: 1;
  height: 4px;
  background: #222;
  border-radius: 2px;
  overflow: hidden;
}
.caseTempFill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s, background 0.5s;
}
.caseTempVal {
  font-size: 0.65em;
  color: #666;
  white-space: nowrap;
}

.casePartsList {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.casePartTag {
  font-size: 0.7em;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #aaa;
  padding: 2px 6px;
  border-radius: 3px;
}
.casePartTag.empty {
  color: #444;
  border-style: dashed;
}

.caseCardBtns { display: flex; gap: 6px; margin-top: 2px; }

.caseOpenBtn, .caseSellBtn {
  flex: 1;
  padding: 5px;
  background: transparent;
  border: 1px solid #4a9eff;
  color: #4a9eff;
  font-family: inherit;
  font-size: 0.72em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.caseOpenBtn:hover { background: #4a9eff; color: #000; }

.caseSellBtn { border-color: #e0a040; color: #e0a040; }
.caseSellBtn:hover { background: #e0a040; color: #000; }

.casePowerBtn { border-color: #44cc88; color: #44cc88; }
.casePowerBtn:hover { background: #44cc88; color: #000; }

.casePowerRow {
  font-size: 0.72em;
  color: #ffaa44;
  margin: 2px 0 4px;
  letter-spacing: 0.02em;
}

/* Mode badge + switch button on case cards */
.caseModeRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.caseModeBadge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.caseModeBadge.rental  { background: #1a3a5c; color: #4a9eff; }
.caseModeBadge.crypto  { background: #3a2a0a; color: #ffaa00; }
.caseModeBadge.hosting { background: #1a3a2a; color: #44cc88; }

.caseModeBtn {
  font-size: 0.65rem;
  padding: 2px 6px;
  background: transparent;
  border: 1px solid #444;
  color: #888;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.caseModeBtn:hover { border-color: #888; color: #ccc; }

.caseModePreview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  color: #555;
  margin-top: 2px;
}
.caseModePreview span.active { color: #ccc; font-weight: 600; }

.noCasesMsg {
  font-size: 0.78em;
  color: #555;
  text-align: center;
  padding: 20px;
  line-height: 1.6;
}


/* ── 5c. Inventory panel ─────────────────────────────────── */

.inventoryList {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  overflow-y: auto;
}

.invItem {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 5px 8px;
}
.invItemName {
  font-size: 0.78em;
  color: #ccc;
}
.invItemMeta {
  font-size: 0.68em;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.invItemType {
  color: #444;
  font-size: 0.9em;
}
.invPlaceBtn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #44cc88;
  color: #44cc88;
  font-family: inherit;
  font-size: 0.85em;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.invPlaceBtn:hover { background: #44cc88; color: #000; }

.invSellBtn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid #e0a040;
  color: #e0a040;
  font-family: inherit;
  font-size: 0.75em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.invSellBtn:hover { background: #e0a040; color: #000; }

.invEmpty {
  font-size: 0.75em;
  color: #444;
  padding: 4px 0;
}


/* ── 5d. Case modal ──────────────────────────────────────── */

.caseModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.caseModal.visible { display: flex; }

.caseModalBox {
  background: #1a1a1a;
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.caseModalBox h2 {
  color: #4a9eff;
  letter-spacing: 2px;
  font-size: 1em;
}

.caseModalSlotsLabel {
  font-size: 0.7em;
  color: #555;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.caseModalSlots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.caseModalSlot {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.caseModalSlot.empty {
  color: #444;
  font-size: 0.78em;
  border-style: dashed;
  justify-content: center;
}
.caseModalSlotInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.caseModalSlotName  { font-size: 0.82em; color: #fff; }
.caseModalSlotStats { font-size: 0.68em; color: #666; }

.caseModalRemoveBtn {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid #ff4444;
  color: #ff4444;
  font-family: inherit;
  font-size: 0.72em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.caseModalRemoveBtn:hover { background: #ff4444; color: #000; }

.caseModalSection { display: flex; flex-direction: column; gap: 6px; }

.caseModalInvItem {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.caseModalInvInfo  { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.caseModalInvName  { font-size: 0.82em; color: #ccc; }
.caseModalInvStats { font-size: 0.68em; color: #666; }

.caseModalInstallBtn {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid #44cc88;
  color: #44cc88;
  font-family: inherit;
  font-size: 0.72em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.caseModalInstallBtn:hover:not(:disabled) { background: #44cc88; color: #000; }
.caseModalInstallBtn:disabled { opacity: 0.35; cursor: not-allowed; border-color: #444; color: #444; }

.caseModalEmpty {
  font-size: 0.78em;
  color: #555;
  padding: 8px 0;
  text-align: center;
}


/* ── 6. Right panel — Shop ───────────────────────────────── */

.sidebarRight {
  width: 260px;
  flex-shrink: 0;
  background: #111;
  border-left: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Row of tab buttons across the top of the shop */
.shopTabRow {
  display: flex;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}

.shopTab {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: #666;
  font-family: inherit;
  font-size: 0.72em;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
.shopTab:hover          { color: #aaa; }
.shopTab.shopTabActive  { color: #4a9eff; border-bottom-color: #4a9eff; }

/* The scrollable area where shop cards appear */
.shopContent {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A single item card in the shop */
.shopCard {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  padding: 10px;
  transition: border-color 0.2s;
}
.shopCard:hover           { border-color: #4a9eff; }
.shopCard.locked          { opacity: 0.4; pointer-events: none; }

.shopCardName  { font-size: 0.8em;  color: #fff;  font-weight: bold; margin-bottom: 3px; }
.shopCardDesc  { font-size: 0.72em; color: #666;  margin-bottom: 6px; line-height: 1.4; }
.shopCardStats { font-size: 0.7em;  color: #888;  margin-bottom: 8px; line-height: 1.6; }

.shopCardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shopCardCost  { font-size: 0.8em; color: #4a9eff; font-weight: bold; }
.shopCardOwned { font-size: 0.7em; color: #555; }

.buyBtn {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #4a9eff;
  color: #4a9eff;
  font-family: inherit;
  font-size: 0.75em;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.buyBtn:hover            { background: #4a9eff; color: #000; }
.buyBtn:disabled         { opacity: 0.35; cursor: not-allowed; border-color: #444; color: #444; }


/* ── 7. Modals ───────────────────────────────────────────── */

/* All modals share this pattern:
   - position: fixed so they cover the whole screen
   - display: none by default
   - JS adds class "visible" to show them */

/* Story / tutorial event modal */
.eventModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.eventModal.visible { display: flex; }

.eventModalBox {
  background: #111;
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 28px;
  max-width: 440px;
  width: 100%;
}

.eventModalText {
  font-size: 0.9em;
  color: #ccc;
  line-height: 1.7;
  margin-bottom: 20px;
  white-space: pre-line;  /* respects \n line breaks in JS strings */
}

.eventModalBtns { display: flex; flex-direction: column; gap: 8px; }

.eventModalBtn {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #4a9eff;
  color: #4a9eff;
  font-family: inherit;
  font-size: 0.85em;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.eventModalBtn:hover { background: #4a9eff; color: #000; }
.eventModalBtn.secondary { border-color: #444; color: #666; }
.eventModalBtn.secondary:hover { border-color: #888; color: #aaa; background: transparent; }

/* Save / Load modal */
.saveModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.saveModal.visible { display: flex; }

.saveModalBox {
  background: #1a1a1a;
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 28px;
  width: 90%;
  max-width: 480px;
}

.saveModalBox h2   { color: #4a9eff; margin-bottom: 20px; letter-spacing: 2px; }
.saveSlots         { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.saveSlot {
  background: #2b2b2b;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 16px;
}

.saveSlotHeader  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.saveSlotName    { font-weight: bold; color: #fff; letter-spacing: 1px; }
.saveSlotActive  { font-size: 0.75em; color: #4a9eff; }
.saveSlotDetails { font-size: 0.82em; color: #888; margin-bottom: 10px; }
.saveSlotBtns    { display: flex; gap: 10px; }

.saveSlotBtns button {
  flex: 1;
  padding: 6px 0;
  border: 1px solid #4a9eff;
  background: transparent;
  color: #4a9eff;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  transition: background 0.2s, color 0.2s;
}
.saveSlotBtns button:hover:not(:disabled) { background: #4a9eff; color: #000; }
.saveSlotBtns button:disabled { opacity: 0.35; cursor: not-allowed; border-color: #555; color: #555; }

.saveSlotBtns .newGameBtn { border-color: #e0a040; color: #e0a040; }
.saveSlotBtns .newGameBtn:hover { background: #e0a040 !important; color: #000 !important; }

.saveModalClose {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #555;
  color: #aaa;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  transition: border-color 0.2s, color 0.2s;
}
.saveModalClose:hover { border-color: #ccc; color: #fff; }

/* Reset modal */
.resetModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.resetModal.visible { display: flex; }

.resetModalBox {
  background: #1a1a1a;
  border: 2px solid #ff4444;
  border-radius: 8px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
}
.resetModalBox h2 { color: #ff4444; margin-bottom: 12px; letter-spacing: 2px; }
.resetModalBox p  { line-height: 1.6; margin-bottom: 24px; }
.resetModalBtns   { display: flex; gap: 12px; }

.resetConfirmBtn {
  flex: 1; padding: 10px;
  background: #ff4444; border: none; color: #fff;
  font-family: inherit; font-size: 0.85em; border-radius: 4px; cursor: pointer;
}
.resetCancelBtn {
  flex: 1; padding: 10px;
  background: transparent; border: 1px solid #555; color: #aaa;
  font-family: inherit; font-size: 0.85em; border-radius: 4px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.resetCancelBtn:hover { border-color: #aaa; color: #fff; }

/* ── v1.3 Hardware system styles ─────────────────────────── */

.caseBootMsg {
  font-size: 0.72em;
  color: #ff8800;
  font-style: italic;
  line-height: 1.4;
  padding: 4px 0 2px;
}

.invPartType {
  font-size: 0.65em;
  color: #4a9eff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: 4px;
}

.caseModalTypeHeader {
  font-size: 0.65em;
  color: #555;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 3px;
}

.caseModalInstallHint {
  font-size: 0.65em;
  color: #555;
  font-style: italic;
}

.shopGroupHeader {
  font-size: 0.65em;
  color: #555;
  letter-spacing: 2px;
  padding: 10px 0 4px;
  border-bottom: 1px solid #222;
  margin-bottom: 6px;
  margin-top: 4px;
}

/* Sell confirmation modal */
.sellConfirmModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sellConfirmModal.visible { display: flex; }

.sellConfirmBox {
  background: #1a1a1a;
  border: 2px solid #e05555;
  border-radius: 8px;
  padding: 28px;
  width: 90%;
  max-width: 360px;
  text-align: center;
}
.sellConfirmBox h2 {
  color: #e05555;
  margin-bottom: 16px;
  letter-spacing: 2px;
}
.sellConfirmDesc {
  color: #ccc;
  margin-bottom: 8px;
  font-size: 1em;
}
.sellConfirmWarning {
  color: #e0a040;
  font-size: 0.85em;
  margin-bottom: 20px;
  min-height: 1em;
}
.sellConfirmBtns {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.sellConfirmCancel,
.sellConfirmOk {
  padding: 10px 24px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sellConfirmCancel {
  background: transparent;
  border: 1px solid #555;
  color: #888;
}
.sellConfirmCancel:hover { border-color: #aaa; color: #fff; }
.sellConfirmOk {
  background: transparent;
  border: 1px solid #e05555;
  color: #e05555;
}
.sellConfirmOk:hover { background: #e05555; color: #fff; }

/* New Game Setup modal */
.newGameSetup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.newGameSetup.visible { display: flex; }

.newGameSetupBox {
  background: #1a1a1a;
  border: 2px solid #4a9eff;
  border-radius: 8px;
  padding: 28px;
  max-width: 480px;
  width: 90%;
}
.newGameSetupBox h2 { color: #4a9eff; letter-spacing: 2px; margin-bottom: 6px; }

.newGameSetupSlotLabel { color: #555; font-size: 0.8em; margin-bottom: 20px; }

.modeCards {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.modeCard {
  flex: 1;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.modeCard:hover { border-color: #555; }
.modeCard.selected { border-color: #4a9eff; background: rgba(74,158,255,0.08); }

.modeCardTitle {
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 6px;
}
.modeCard.selected .modeCardTitle { color: #4a9eff; }

.modeCardDesc { font-size: 0.75em; color: #888; line-height: 1.5; }

.newGameSetupMore {
  font-size: 0.73em;
  color: #444;
  margin-bottom: 20px;
  font-style: italic;
}

.locationPickerSection {
  margin-bottom: 18px;
}

.locationPickerLabel {
  font-size: 0.75em;
  color: #888;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.locationPickerSelect {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  color: #ccc;
  font-family: inherit;
  font-size: 0.82em;
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.locationPickerSelect:focus { outline: none; border-color: #4a9eff; }

.newGameSetupBtns { display: flex; gap: 10px; }

.newGameSetupBtns button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid #555;
  color: #aaa;
  font-family: inherit;
  font-size: 0.9em;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.newGameSetupBtns button:hover { border-color: #aaa; color: #fff; }

.newGameSetupStart {
  border-color: #4a9eff !important;
  color: #4a9eff !important;
}
.newGameSetupStart:hover { background: #4a9eff !important; color: #000 !important; }

/* Small toast notification for "Game Saved ✓" */
.saveToast {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #44cc88;
  color: #000;
  font-size: 0.85em;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 2000;
  pointer-events: none;  /* clicks pass through it */
}
.saveToast.visible { display: block; }


/* ── Dev Console ─────────────────────────────────────────── */

.devConsole {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: #0a0a0a;
  border-top: 2px solid #44cc88;
  z-index: 9999;
  font-family: 'Courier New', monospace;
  font-size: 0.82em;
  flex-direction: column;
}
.devConsole.open { display: flex; }

/* Auth overlay */
.devConsoleAuth {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 14px;
}
.devConsoleAuthLabel {
  color: #44cc88;
  letter-spacing: 3px;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  width: 100%;
}
.devConsoleAuthRow { display: flex; gap: 8px; }
.devConsoleAuthInput {
  background: #111;
  border: 1px solid #333;
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 1em;
  padding: 6px 10px;
  outline: none;
  width: 180px;
  caret-color: #44cc88;
}
.devConsoleAuthInput:focus { border-color: #44cc88; }
.devConsoleAuthBtn {
  background: transparent;
  border: 1px solid #44cc88;
  color: #44cc88;
  font-family: inherit;
  font-size: 0.9em;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.devConsoleAuthBtn:hover { background: #44cc88; color: #000; }
.devConsoleAuthError { color: #ff4444; font-size: 0.8em; min-height: 1em; }

/* Main console content wrapper */
.devConsoleMain {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.devConsoleResizer {
  height: 5px;
  background: #1a1a1a;
  cursor: ns-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}
.devConsoleResizer:hover { background: #44cc88; }

.devConsoleHeader {
  padding: 4px 12px;
  background: #111;
  border-bottom: 1px solid #222;
  color: #44cc88;
  font-size: 0.8em;
  letter-spacing: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.devConsoleHint { color: #333; margin-left: 10px; letter-spacing: 0; flex: 1; }
.devConsoleCloseBtn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #555;
  font-size: 1em;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  letter-spacing: 0;
  transition: color 0.15s;
}
.devConsoleCloseBtn:hover { color: #e05555; }

.devConsoleOutput {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.devConsoleLine       { color: #888; }
.devConsoleLine.cmd   { color: #fff; }
.devConsoleLine.ok    { color: #44cc88; }
.devConsoleLine.err   { color: #ff4444; }
.devConsoleLine.info  { color: #4a9eff; }

.devConsoleInputRow {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.devConsolePrompt { color: #44cc88; margin-right: 8px; }
.devConsoleInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  caret-color: #44cc88;
}
.devConsoleInput::placeholder { color: #333; }


/* Mobile tabs are hidden on desktop — the media query below turns them on */
.mobileTabs { display: none; }


/* ── 8. Mobile layout (768px and below) ──────────────────── */

@media (max-width: 768px) {

  /* Use dvh (dynamic viewport height) on mobile.
     Unlike vh it correctly accounts for the browser's address bar. */
  .gameBody {
    height: 100dvh;
    overflow-x: hidden;
  }

  .gameHeader      { padding: 6px 10px; gap: 6px; }
  .gameTitle h1    { font-size: 0.95em; }
  .locationBadge   { display: none; }  /* hide on mobile, saves space */
  .statChip        { min-width: 55px; padding: 3px 6px; }
  .statLabel       { font-size: 0.6em; }
  .statValue       { font-size: 0.82em; }

  /* On mobile the container is used as a positioning context
     for the panels that slide in as active tabs */
  .gameContainer   { position: relative; }

  /* Hide sidebars by default — tabs reveal them */
  .sidebarLeft,
  .sidebarRight    { display: none; width: 100%; }

  /* Center panel gets bottom padding so content isn't hidden behind the tab bar */
  .gameMain {
    width: 100%;
    padding: 12px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* When a panel is made active by a tab click, it covers the center */
  .sidebarLeft.mobileActive,
  .sidebarRight.mobileActive {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    overflow-y: auto;
  }

  /* Hide the center panel when a sidebar is active */
  .gameMain.mobileHidden { display: none; }

  /* Tab bar pinned to the bottom of the screen */
  .mobileTabs {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #111;
    border-top: 1px solid #2a2a2a;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobileTab {
    flex: 1;
    padding: 12px 4px;
    background: transparent;
    border: none;
    color: #555;
    font-family: inherit;
    font-size: 0.7em;
    cursor: pointer;
    transition: color 0.2s;
  }
  .mobileTab.mobileTabActive { color: #4a9eff; }

  /* Move the save toast above the tab bar on mobile */
  .saveToast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Contracts tab ───────────────────────────────────────── */

.contractsPanel     { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.contractGroupLabel { font-size: 0.62rem; letter-spacing: 0.12em; color: #666; text-transform: uppercase; }
.contractEmpty      { font-size: 0.70rem; color: #555; font-style: italic; padding: 4px 0; }

.contractCard         { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.contractCardActive   { border-color: #333; }
.contractHeader       { display: flex; justify-content: space-between; align-items: center; }
.contractBonus        { color: #4caf50; font-size: 0.72rem; font-weight: 700; }
.contractReq          { font-size: 0.68rem; color: #777; }

.contractTimer        { display: flex; align-items: center; gap: 6px; }
.contractTimerBar     { flex: 1; height: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; }
.contractTimerFill    { height: 100%; border-radius: 2px; }
.contractTimerFill.ok     { background: #4caf50; }
.contractTimerFill.warn   { background: #ff9800; }
.contractTimerFill.danger { background: #f44336; }
.contractTimerLabel   { font-size: 0.62rem; color: #555; min-width: 30px; text-align: right; }

.contractAcceptBtn          { font-size: 0.68rem; padding: 4px 10px; background: #1a3a2a; color: #44cc88; border: 1px solid #2a5a3a; border-radius: 3px; cursor: pointer; align-self: flex-start; }
.contractAcceptBtn:hover    { background: #22482e; border-color: #44cc88; }
.contractAcceptBtn:disabled { background: #1a1a1a; color: #444; border-color: #2a2a2a; cursor: default; }