/* ---------------------------------------------------------------------------
   Tidewater Command — HUD styling.

   Bar heights live in custom properties because JavaScript reads them back to
   work out which part of the screen is "the map". Change them here and the hit
   testing follows automatically.
   --------------------------------------------------------------------------- */
:root {
  --topbar-h: 40px;
  --bottombar-h: 208px;
  --minimap: 192px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tap: 30px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #0a0d10;
  color: #e8e4d8;
  font-family: "Segoe UI", Tahoma, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* The visual viewport height is fed in from JavaScript so a phone's collapsing
   address bar never leaves a strip of blank page under the panel. */
#game {
  position: fixed; left: 0; top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  overflow: hidden;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  display: block;
  touch-action: none;          /* we handle every gesture ourselves */
}
body.touch #view { cursor: default; }

/* Anything marked mouse-only or touch-only appears for one input style. */
body.touch .mouse-only,
body:not(.touch) .touch-only { display: none; }

/* ---------- top bar ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(#1d2530ee, #131920ee);
  border-bottom: 1px solid #3a4756;
  font-size: 15px; font-weight: 600;
  z-index: 5;
}
#topbar .spacer { flex: 1; }
.res { display: flex; align-items: center; gap: 6px; min-width: 86px; }
.icon {
  width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  box-shadow: inset 0 0 0 1px #0006;
  flex: none;
}
.icon.food { background: #d8564a; }
.icon.wood { background: #8a6136; }
.icon.gold { background: #e2b73c; }
.icon.pop  { background: #6fb7e8; }
.icon.age  { background: #b48ce0; }
#age-box { min-width: 108px; }
#btn-idle.hot { background: #6a4a1e; border-color: #ffd97a; color: #ffd97a; }

#clock { font-variant-numeric: tabular-nums; color: #9fb0c2; margin-right: 6px; }

/* Cloud save indicator — a quiet dot until something needs saying. */
#sync {
  font-size: 11.5px; color: #7d8b9a; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
#sync::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #4a5b6f; flex: none;
}
#sync.ok::before   { background: #4ad06a; }
#sync.busy::before { background: #e2b73c; }
#sync.off::before  { background: #ff8a7a; }

.tbtn {
  background: #26313d; color: #dfe6ee; border: 1px solid #46566a;
  border-radius: 4px; padding: 3px 10px; font: inherit; font-size: 13px;
  cursor: pointer; min-height: var(--tap); flex: none;
  touch-action: manipulation;
}
.tbtn:hover { background: #33414f; }

/* ---------- touch chips ---------- */
.tchip {
  background: #26313dee; color: #dfe6ee; border: 1px solid #55677c;
  border-radius: 18px; padding: 0 14px; height: 38px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; flex: none; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.tchip.on { background: #6a4a1e; border-color: #ffd97a; color: #ffd97a; }
.tchip.primary { background: #2f7d4f; border-color: #4bbd77; color: #fff; }
.tchip:disabled { opacity: .4; }

/* One bottom-right stack holds every floating touch control, so the placement
   buttons and the action bar can never land on top of each other. */
#touchstack {
  position: absolute;
  right: calc(8px + var(--safe-r));
  left: calc(8px + var(--safe-l));
  bottom: calc(var(--bottombar-h) + var(--safe-b) + 8px);
  z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  pointer-events: none;                 /* only the buttons themselves catch taps */
}
#touchstack.hidden { display: none; }
#touchstack > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#touchstack button { pointer-events: auto; }
#placebar.hidden { display: none; }

/* ---------- bottom bar ---------- */
#bottombar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--bottombar-h) + var(--safe-b));
  display: flex; gap: 8px;
  padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));
  background: linear-gradient(#131920ee, #0d1218f2);
  border-top: 1px solid #3a4756;
  z-index: 5;
}

#btn-collapse { width: 40px; padding: 0; }

/* Collapsed: the panel folds away so the map gets the whole screen. */
body.collapsed #bottombar {
  height: 0; padding: 0; border-top: none; overflow: hidden;
}
body.collapsed #touchstack { bottom: calc(var(--safe-b) + 8px); }

#minimap-wrap {
  width: var(--minimap); height: var(--minimap); flex: none;
  border: 1px solid #46566a; border-radius: 4px; overflow: hidden;
  background: #05080b;
}
#minimap {
  width: 100%; height: 100%; display: block; cursor: pointer;
  image-rendering: pixelated; touch-action: none;
}

/* The panel is a fixed-height box: info block on top (scrolls if needed),
   command buttons pinned underneath. Neither may overlap the other. */
#panel {
  flex: 1; min-width: 0;
  border: 1px solid #46566a; border-radius: 4px;
  background: #10161d; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
#panel-info {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 5px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
#sel-title { font-size: 15px; font-weight: 700; color: #f0e9d6; flex: none; }

/* Current job — the thing you most want to read at a glance. */
#job-line {
  flex: none; display: flex; align-items: center; gap: 8px;
  background: #17222c; border: 1px solid #33475a; border-left: 3px solid #6fb7e8;
  border-radius: 3px; padding: 4px 8px; font-size: 13.5px;
}
#job-line.hidden { display: none; }
#job-text { color: #9fd4e8; font-weight: 700; white-space: nowrap; }
#job-detail { color: #93a3b4; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#job-bar {
  margin-left: auto; flex: none; width: 90px; height: 7px;
  background: #0b1116; border: 1px solid #33475a; border-radius: 4px; overflow: hidden;
}
#job-bar i { display: block; height: 100%; width: 0%; background: #d8a54a; }
#job-line.idle { border-left-color: #ffb36b; }
#job-line.idle #job-text { color: #ffb36b; }
#job-line.fight { border-left-color: #ff8a7a; }
#job-line.fight #job-text { color: #ff8a7a; }

#sel-body { display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; }
#sel-portraits {
  display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start;
  width: 210px; flex: none; overflow-y: auto; max-height: 84px;
}
.port {
  width: 26px; height: 26px; border-radius: 3px; border: 1px solid #55677c;
  position: relative; cursor: pointer; background: #1a222c;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; touch-action: manipulation;
}
.port .hpbar {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 3px;
  background: #400; border-radius: 2px; overflow: hidden;
}
.port .hpbar i { display: block; height: 100%; background: #4ad06a; }
#sel-stats { font-size: 12.5px; color: #b9c6d4; line-height: 1.5; flex: 1; min-width: 0; }
#sel-stats b { color: #f0e9d6; }

#commands {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 76px; overflow-y: auto; padding-top: 6px;
  border-top: 1px solid #2a3644;
  -webkit-overflow-scrolling: touch;
}
.cmd {
  min-width: 74px; padding: 5px 8px; text-align: left;
  background: #212b36; color: #e4ecf4;
  border: 1px solid #4a5b6f; border-radius: 4px;
  font: inherit; font-size: 12px; cursor: pointer; line-height: 1.35;
  position: relative; overflow: hidden; touch-action: manipulation;
}
.cmd:hover { background: #2d3a48; border-color: #6b8098; }
.cmd .k { color: #ffd97a; font-weight: 700; }
.cmd .cost { display: block; color: #93a3b4; font-size: 10.5px; margin-top: 1px; }
.cmd.disabled { opacity: .45; cursor: not-allowed; }
.cmd.active { border-color: #ffd97a; box-shadow: 0 0 0 1px #ffd97a55 inset; }
.cmd .badge {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  background: #ffd97a; color: #1a222c; border-radius: 8px;
  font-size: 11px; font-weight: 700; vertical-align: middle;
}
.cmd .prog {
  position: absolute; left: 0; bottom: 0; height: 3px; background: #6fb7e8;
}
body.touch .cmd { min-height: 40px; min-width: 88px; font-size: 12.5px; }
body.touch .k { display: none; }

#log {
  width: 240px; flex: none; overflow: hidden;
  border: 1px solid #46566a; border-radius: 4px; background: #0d1319;
  padding: 6px; font-size: 11.5px; color: #93a3b4;
  display: flex; flex-direction: column; gap: 2px;   /* newest first, at the top */
}
#log div:first-child { color: #cfe0f0; }
#log div { line-height: 1.4; }
#log .warn { color: #ffb36b; }
#log .bad { color: #ff8a7a; }
#log .good { color: #86e29b; }

/* Build-cursor banner: says what is being placed and how to stop. */
#place-hint {
  position: absolute; top: calc(var(--topbar-h) + var(--safe-t) + 12px);
  left: 50%; transform: translateX(-50%);
  z-index: 6; pointer-events: none;
  background: #17222cee; border: 1px solid #4a5b6f; border-left: 3px solid #7fe08f;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; color: #cfe0f0;
  white-space: nowrap; max-width: calc(100vw - 24px);
  overflow: hidden; text-overflow: ellipsis;
}
#place-hint.hidden { display: none; }

/* ---------- unit activity trace ---------- */
#trace-panel {
  position: absolute; top: calc(var(--topbar-h) + var(--safe-t) + 8px);
  right: calc(8px + var(--safe-r)); width: min(430px, calc(100vw - 16px));
  max-height: calc(var(--app-h, 100vh) - var(--topbar-h) - var(--bottombar-h) - 32px);
  z-index: 7; display: flex; flex-direction: column;
  background: #0d1319f2; border: 1px solid #46566a; border-radius: 5px;
  font-size: 11.5px; box-shadow: 0 10px 30px #0008;
}
#trace-panel.hidden { display: none; }
#trace-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid #2a3644; color: #cfe0f0; flex-wrap: wrap;
}
#trace-head b { color: #ffd97a; }
#trace-count { color: #7d8b9a; flex: 1; font-size: 11px; }
#trace-head .tbtn { padding: 2px 8px; font-size: 11px; min-height: 26px; }
#trace-rows { overflow-y: auto; padding: 4px 6px; }
#trace-rows div { display: flex; gap: 7px; padding: 1px 0; line-height: 1.45; }
.tr-t { color: #5f6f80; font-variant-numeric: tabular-nums; flex: none; }
.tr-u { color: #8fb4d8; flex: none; min-width: 92px; }
.tr-m { color: #b9c6d4; }
.tr-order .tr-m { color: #ffd97a; }
.tr-state .tr-m { color: #9fd4e8; }
.tr-path  .tr-m { color: #86e29b; }
.tr-job   .tr-m { color: #c3b6e0; }
.tr-warn  .tr-m { color: #ff9b8f; }
.tr-empty { color: #7d8b9a; font-style: italic; }
#btn-trace.hot { background: #2f4a6a; border-color: #6fb7e8; color: #cfe6ff; }
#place-hint b { color: #ffd97a; }

/* Crash notice: visible, dismissable, and never fatal. */
#crash {
  position: absolute; top: calc(var(--topbar-h) + var(--safe-t) + 12px);
  left: 50%; transform: translateX(-50%);
  z-index: 9; max-width: min(720px, calc(100vw - 20px));
  background: #2a1618f2; border: 1px solid #a05a5a; border-left: 4px solid #ff8a7a;
  border-radius: 5px; padding: 10px 16px; color: #ffd7d0; font-size: 13px; line-height: 1.6;
}
#crash.hidden { display: none; }
#crash b { color: #ff8a7a; }
.crash-at { color: #c99; font-size: 11.5px; font-family: Consolas, monospace; word-break: break-all; }
.crash-hint { color: #d0b3ae; font-size: 12px; }
#crash button { margin-left: 12px; }

/* ---------- alerts ---------- */
#alerts {
  position: absolute; top: calc(var(--topbar-h) + var(--safe-t) + 12px);
  left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: 4px; align-items: center;
  pointer-events: none; max-width: calc(100vw - 20px);
}
.alert {
  background: #1d2530dd; border: 1px solid #5a6d84; border-radius: 4px;
  padding: 5px 14px; font-size: 13.5px; color: #ffd97a; text-align: center;
  animation: fade 3.2s forwards;
}
@keyframes fade { 0%{opacity:0;transform:translateY(-6px)} 10%{opacity:1;transform:none} 80%{opacity:1} 100%{opacity:0} }

/* ---------- overlays ---------- */
#overlay, #endcard, #gate {
  position: absolute; inset: 0; z-index: 10;
  background: radial-gradient(circle at 50% 30%, #16202bee, #05080bf5);
  display: none; align-items: center; justify-content: center;
  padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l));
}
#overlay.show, #endcard.show, #gate.show { display: flex; }
#gate { z-index: 12; }

/* When the help card is opened mid-game it becomes a pause screen: the
   new-game controls step aside so the current match is never lost by accident. */
#btn-resume { display: none; }
#overlay.ingame #btn-resume {
  display: inline-block;
  background: #2f7d4f; color: #fff; border: 1px solid #4bbd77;
  border-radius: 5px; padding: 9px 26px; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; min-height: 44px;
}
#overlay.ingame #btn-resume:hover { background: #3a9a61; }
#overlay.ingame #btn-start { background: #3a2a2a; border-color: #6b4a4a; font-size: 13px; padding: 7px 16px; }
#overlay:not(.ingame) .newgame-note { display: none; }
.newgame-note { color: #ffb36b; }
.savenote {
  margin-top: 14px; font-size: 13px; color: #86e29b;
  border-left: 3px solid #2f7d4f; padding-left: 10px;
}
.savenote:empty { display: none; }

.dialog {
  width: min(860px, 100%); max-height: 100%; overflow: auto;
  background: #121a22; border: 1px solid #4a5b6f; border-radius: 8px;
  padding: 22px 26px; box-shadow: 0 20px 60px #000a;
  -webkit-overflow-scrolling: touch;
}
.dialog h1 { font-size: 30px; color: #ffd97a; letter-spacing: .5px; }
.dialog .sub { color: #a9b8c8; margin: 4px 0 16px; }
.dialog h3 { margin: 10px 0 6px; color: #cfe0f0; font-size: 15px; }
.dialog ul { margin-left: 18px; font-size: 13.5px; color: #b9c6d4; line-height: 1.65; }
.dialog b { color: #f0e9d6; }
.cols { display: flex; gap: 28px; flex-wrap: wrap; }
.cols > div { flex: 1; min-width: 260px; }

/* Who is signed in, above the start card. */
.whoami {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: #9fb0c2; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid #2a3644;
}
#who-name { color: #ffd97a; font-weight: 700; }
#who-record { flex: 1; min-width: 120px; }
.whoami .tbtn.hidden { display: none; }

.pwform {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: -4px 0 12px; font-size: 12.5px;
}
.pwform.hidden { display: none; }
.pwform input {
  background: #1d2530; color: #e8e4d8; border: 1px solid #4a5b6f;
  border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 16px;
  min-height: 40px; flex: 1 1 170px; min-width: 0;
}
.pwform input:focus { outline: none; border-color: #6fb7e8; }
#pw-msg { color: #9fb0c2; flex: 1 1 100%; }
#pw-msg.good { color: #86e29b; }
#pw-msg.bad { color: #ff8a7a; }

.startrow {
  display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: #b9c6d4;
}
.startrow select, .startrow input {
  background: #1d2530; color: #e8e4d8; border: 1px solid #4a5b6f;
  border-radius: 4px; padding: 8px; font: inherit; margin-left: 6px;
  min-height: 40px;
}
.startrow input { width: 120px; }
#btn-start, #btn-again {
  background: #2f7d4f; color: #fff; border: 1px solid #4bbd77;
  border-radius: 5px; padding: 9px 26px; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; margin-left: auto; min-height: 44px;
}
#btn-start:hover, #btn-again:hover { background: #3a9a61; }
#btn-again { margin: 18px 0 0; }
.foot { margin-top: 12px; font-size: 12px; color: #7d8b9a; }

#end-stats { font-size: 14px; color: #b9c6d4; line-height: 1.8; margin-top: 10px; }
#end-stats b { color: #f0e9d6; }

/* ---------- account gate ---------- */
.gate-dialog { width: min(440px, 100%); }
.gate-lead { font-size: 13.5px; color: #9fb0c2; line-height: 1.6; margin-bottom: 16px; }
.gate-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.gate-tab {
  flex: 1; background: #1a222c; color: #9fb0c2; border: 1px solid #3a4756;
  border-radius: 5px; padding: 10px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 44px; touch-action: manipulation;
}
.gate-tab.is-on { background: #26313d; color: #ffd97a; border-color: #6b8098; }
.field { display: block; font-size: 12.5px; color: #9fb0c2; margin-bottom: 12px; }
.field.hidden { display: none; }
.field input {
  display: block; width: 100%; margin-top: 5px;
  background: #1d2530; color: #e8e4d8; border: 1px solid #4a5b6f;
  border-radius: 5px; padding: 11px 12px; font: inherit; font-size: 16px;  /* 16px stops iOS zooming on focus */
  min-height: 46px;
}
.field input:focus { outline: none; border-color: #6fb7e8; }
.gate-go {
  width: 100%; background: #2f7d4f; color: #fff; border: 1px solid #4bbd77;
  border-radius: 5px; padding: 12px; font: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; min-height: 48px; touch-action: manipulation;
}
.gate-go:hover { background: #3a9a61; }
.gate-go:disabled { opacity: .6; cursor: default; }
.gate-msg { font-size: 13px; line-height: 1.5; margin: 0 0 12px; min-height: 0; color: #ffb36b; }
.gate-msg:empty { display: none; }
.gate-msg.good { color: #86e29b; }
.gate-msg.bad { color: #ff8a7a; }
.gate-foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.linkbtn {
  background: none; border: none; color: #6fb7e8; font: inherit; font-size: 12.5px;
  cursor: pointer; padding: 6px 0; text-decoration: underline; touch-action: manipulation;
}
.linkbtn.hidden { display: none; }

/* ---------------------------------------------------------------------------
   Responsive sizes. Everything below only changes the custom properties and a
   few visibility rules — the layout itself is the same on every screen.
   --------------------------------------------------------------------------- */

/* Narrow desktop / large tablet: the message log is the first thing to go. */
@media (max-width: 1180px) {
  #log { display: none; }
}

@media (max-width: 900px) {
  :root { --topbar-h: 38px; --bottombar-h: 168px; --minimap: 132px; --tap: 34px; }
  #topbar { gap: 10px; font-size: 13.5px; padding-left: calc(8px + var(--safe-l)); padding-right: calc(8px + var(--safe-r)); }
  .res { min-width: 0; gap: 4px; }
  #age-box { min-width: 0; }
  .tbtn { padding: 3px 8px; font-size: 12px; }
  #sel-portraits { width: 132px; max-height: 60px; }
  #commands { max-height: 96px; }
  .dialog { padding: 16px 16px; }
  .dialog h1 { font-size: 24px; }
  .cols { gap: 12px; }
}

/* Phones. The age name, the clock and the optional buttons go; the resource
   numbers and the pop count stay, because you cannot play without them. */
@media (max-width: 620px) {
  :root { --topbar-h: 40px; --bottombar-h: 176px; --minimap: 112px; }
  #topbar { gap: 8px; font-size: 13px; }
  #r-age, #clock, .tbtn.opt, #sync { display: none; }
  #age-box { display: none; }
  #btn-idle { padding: 3px 7px; }
  #sel-body { flex-direction: column; gap: 6px; }
  #sel-portraits { width: 100%; max-height: 34px; }
  #sel-stats { font-size: 12px; }
  #commands { max-height: 104px; }
  .startrow { gap: 10px; }
  .startrow input { width: 96px; }
  #btn-start, #btn-again { margin-left: 0; width: 100%; }
  #overlay.ingame #btn-resume { width: 100%; }
  .dialog ul { font-size: 13px; }
}

/* Phone held sideways: very little height, so the panel gets thin and the
   minimap shrinks to match. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --topbar-h: 34px; --bottombar-h: 124px; --minimap: 100px; }
  #topbar { font-size: 12.5px; }
  #sel-portraits { max-height: 30px; }
  #commands { max-height: 62px; }
  #panel-info { gap: 3px; }
  #sel-title { font-size: 13px; }
  .dialog { padding: 12px 14px; }
  .dialog h1 { font-size: 20px; }
  .dialog .sub { margin-bottom: 8px; }
}

/* Very small phones in portrait. */
@media (max-width: 400px) {
  :root { --bottombar-h: 164px; --minimap: 96px; }
  #topbar { gap: 6px; font-size: 12.5px; }
  .icon { width: 11px; height: 11px; }
  .tchip { padding: 0 11px; font-size: 12px; height: 36px; }
}