/* =========================================================================
 * Tokyo Railroad Tycoon — retro early-PC business sim styling
 * (Railroad Tycoon / SimCity / A-Train flavor: beveled gray panels,
 * monospace numerals, teal map chrome).
 * ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font: 13px/1.45 "Lucida Console", "Courier New", monospace;
  background: #20262c;
  color: #d8d4c8;
  display: flex; flex-direction: column;
}

/* ---- chrome ---- */
#topbar {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(#7a8590, #5b656f);
  border-bottom: 2px solid #2c343c;
  padding: 5px 10px;
  color: #f4f1e4;
  text-shadow: 1px 1px 0 #3a424a;
  white-space: nowrap; overflow: hidden;
}
#title { font-weight: bold; letter-spacing: 1px; color: #ffe9a0; }
.spacer { flex: 1; }
.money { color: #b9f3b0; font-weight: bold; }
#pop { color: #d8e6f0; }
div.warn { color: #ec9a7a; }
/* one-line news ticker under the top bar: the latest event-log entry */
#ticker {
  background: #171d23; color: #e6d8a8; border-bottom: 2px solid #2c343c;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ticker:hover { background: #1f272f; }
#ticker:empty { display: none; }
#ticker .dim { color: #8b96a0; }
#statusbar {
  background: #11161b; color: #9fd8a8; border-top: 2px solid #3a444e;
  padding: 4px 10px; min-height: 24px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#main { flex: 1; display: flex; min-height: 0; position: relative; }
/* touch-action:none stops the browser from hijacking finger drags/pinches for
   page scroll & zoom, so our own pan/pinch handlers receive them. */
#map { flex: 1; display: block; background: #1b232b; cursor: crosshair; min-width: 0; touch-action: none; }

/* ---- sidebar ---- */
#sidebar {
  width: 320px; display: flex; flex-direction: column;
  background: #424a52; border-left: 3px solid #2c343c;
}
/* the side menu can be hidden on any device (toggled by #menuBtn); on desktop
   the map reflows to fill the freed space. */
body.sidebar-hidden #sidebar { display: none; }
#tabs { display: flex; flex-wrap: wrap; background: #353d45; }
#tabs .tab {
  flex: 1 0 auto; padding: 6px 4px; font: inherit; font-size: 11px;
  background: #4c565f; color: #cfd6da; border: 2px outset #6c767f; cursor: pointer;
}
#tabs .tab.active { background: #2d6a5a; color: #fff; border-style: inset; }
#panel { flex: 1; overflow-y: auto; padding: 10px; }

/* summary-first stat tiles atop every panel (v0.5 UI tidy) */
/* two columns so long yen figures fit without being clipped */
.statTiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 8px; }
.statTile { background: #2c333a; border: 1px solid #444d55; border-radius: 3px; padding: 4px 5px; min-width: 0; }
.statK { color: #8b96a0; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.statV { color: #eef3f6; font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statV.warn { color: #ff9d6b; }

/* in-panel sub-tab row (Money: Finance/Property, Company: R&D/Workforce/Rivals, System: Settings/Log) */
.subtabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; border-bottom: 1px solid #444d55; padding-bottom: 6px; }
.subtab {
  padding: 3px 10px; font: inherit; font-size: 11px; border-radius: 3px;
  background: #3a424a; color: #c2cad0; border: 1px solid #545e67; cursor: pointer;
}
.subtab.active { background: #2d6a5a; color: #fff; border-color: #2d6a5a; }

/* collapsible secondary-content sections */
.collapseHead {
  display: block; width: 100%; text-align: left; margin: 6px 0 2px;
  padding: 4px 6px; font: inherit; font-size: 12px; color: #c2cad0;
  background: #333b42; border: 1px solid #4a535b; border-radius: 3px; cursor: pointer;
}
.collapseHead:hover { background: #3b444c; }
.collapseBody { margin: 2px 0 6px; padding-left: 4px; }

.ptitle {
  color: #ffe9a0; letter-spacing: 1px; border-bottom: 1px solid #6c767f;
  margin-bottom: 8px; padding-bottom: 3px;
}
.lbl { color: #b8c4cc; margin-top: 6px; display: inline-block; }
.lbl.block { display: block; }
.dim { color: #97a2aa; }
.small { font-size: 11px; }
.sect { margin: 8px 0; }
.btnrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; align-items: center; }

.ubtn {
  font: inherit; font-size: 11px; padding: 4px 8px; cursor: pointer;
  background: linear-gradient(#6a747e, #525c66); color: #f0ede0;
  border: 2px outset #8a949e;
}
.ubtn:active { border-style: inset; }
.ubtn.active { background: #2d6a5a; border-style: inset; }
.ubtn.go { background: linear-gradient(#3f8f5f, #2d6a45); }
.ubtn.warn { background: linear-gradient(#9a5a4a, #7a4438); }
.ubtn.wide { display: block; width: 100%; text-align: left; margin: 3px 0; }
.usel, .uinp {
  font: inherit; font-size: 11px; background: #2a3138; color: #e8e4d8;
  border: 2px inset #6c767f; padding: 3px; max-width: 220px;
}
.uinp { width: 70px; }

.selbox {
  border: 2px solid #7CFC9A; background: #2a3a30; padding: 8px; margin: 0 0 10px;
}
.selbox .lhead { border-left: 4px solid #7CFC9A; margin-bottom: 4px; }
.linebox { border: 2px groove #6c767f; padding: 6px; margin: 8px 0; background: #3a424a; }
.lhead { font-weight: bold; color: #f4f1e4; padding-left: 6px; }

.ftable { width: 100%; border-collapse: collapse; margin: 4px 0; }
.ftable td, .ftable th { padding: 2px 4px; border-bottom: 1px solid #525c66; text-align: left; }
.ftable .num { text-align: right; color: #b9f3b0; }
.ftable .num.neg { color: #f3a8a0; }

.logline { padding: 3px 0; border-bottom: 1px dotted #525c66; font-size: 11px; }
.logline.major { color: #ffb3a0; }
.logline.event { color: #ffe9a0; }

/* ---- modal ---- */
#modal {
  position: fixed; inset: 0; background: rgba(10, 14, 18, 0.65);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
#modal.hidden { display: none; }
#modalBox {
  width: 420px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
  background: #424a52; border: 3px outset #8a949e; padding: 14px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
}
.modalTitle { color: #ffe9a0; font-weight: bold; letter-spacing: 1px; margin-bottom: 10px; }
.modalBtns { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- end screen ---- */
.endBanner {
  text-align: center; font-size: 20px; font-weight: bold; letter-spacing: 4px;
  padding: 10px 6px; margin-bottom: 6px; border: 2px solid #6c767f;
  background: #2a3138; color: #ffe9a0; text-shadow: 2px 2px 0 #5b4a1a;
}
.endBanner.win {
  color: #b9f3b0; border-color: #7CFC9A; text-shadow: 2px 2px 0 #1f4a30;
  animation: endBlink 1s steps(1, start) infinite;
}
@keyframes endBlink { 50% { opacity: 0.35; } }
.endSub { text-align: center; color: #9fb0bb; font-size: 11px; margin: 0 0 10px; }
.endRow.endRank1 { border-color: #ffd76a; box-shadow: 0 0 0 1px #ffd76a; }
.endRow.endYou { background: #2a3a30; }
.endThanks { text-align: center; margin-top: 10px; color: #ffe9a0; font-size: 12px; }

/* ---- start screen ---- */
#startScreen {
  position: fixed; inset: 0; background: rgba(10, 14, 18, 0.85);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#startScreen.hidden { display: none; }
#startBox {
  width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
  background: #424a52; border: 3px outset #8a949e; padding: 16px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
}
#startBox .modalTitle { font-size: 16px; }
#startBox hr { border: none; border-top: 1px solid #6c767f; margin: 10px 0; }
.airow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; }
.airow .lbl { margin: 0; }

/* ---- mobile / small screens ----
 * The side menu becomes an overlay floating over the map (so the canvas always
 * fills the screen), the top bar wraps instead of clipping its buttons, and
 * tap targets grow. The map is pan/pinch-driven by touch (see ui.js). */
@media (max-width: 760px) {
  #topbar { flex-wrap: wrap; overflow: visible; gap: 6px 8px; padding: 6px 8px; }
  #topbar .spacer { display: none; }          /* let items pack & wrap, keep every button reachable */
  #title { font-size: 12px; }
  #clock { font-size: 11px; }

  #sidebar {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(340px, 90vw); z-index: 40; border-left: 3px solid #2c343c;
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.55);
  }

  /* roomier tap targets */
  #tabs .tab { padding: 9px 6px; font-size: 12px; }
  .ubtn { padding: 7px 10px; font-size: 12px; }
  #panel { padding: 10px 10px 28px; }
}