:root {
  --bg: #1d2733; --panel: #f7f5ef; --ink: #1d2430; --muted: #6b7380;
  --good: #2e8b47; --bad: #c0392b; --warn: #c27c0e; --accent: #2f7fc1;
  --tap: 48px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }

#app { height: 100dvh; display: flex; flex-direction: column; max-width: 100vw;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }

#top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; color: #fff; min-height: 52px; min-width: 0; }
/* Civ name over the turn number: a narrow two-line block, so a long turn number never pushes the buttons off screen. */
#title { flex: none; display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
#civname { font-size: 12px; font-weight: 600; }
#turn { font-size: 16px; font-weight: 700; }
#civname { color: #8fc3ee; }
/* Totals take the space that is left and shrink (never overflow) when the numbers get long. */
#totals { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; gap: 7px; justify-content: flex-end; font-size: 14px; white-space: nowrap; }
#totals span { flex: none; }
.iconbtn { flex: none; }
#totals .bad { color: #ff8a7a; font-weight: 700; }
.iconbtn { min-width: var(--tap); min-height: var(--tap); border: 0; border-radius: 12px; background: #2c3a4a; color: #fff; font-size: 20px; }

#board { flex: 1; min-height: 0; display: flex; }
#mapwrap { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; background: #cfe0e8; }
#mapwrap svg { width: 100%; height: 100%; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#side { display: none; }

#lastturn { background: var(--panel); max-height: 21vh; display: flex; flex-direction: column; }
#events { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.events { list-style: none; margin: 0; padding: 4px 8px; }
.events li { padding: 6px 2px; border-bottom: 1px solid #e3dfd3; font-size: 14px; display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
.events li:last-child { border-bottom: 0; }
.evi { width: 20px; text-align: center; flex: none; }
.ev-bad { color: var(--bad); font-weight: 600; } .ev-warn { color: var(--warn); } .ev-good { color: var(--good); } .ev-info { color: var(--muted); }

#bottom { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--panel); }
.big { width: 100%; min-height: 60px; border: 0; border-radius: 16px; background: var(--accent); color: #fff; font-size: 21px; font-weight: 700; }
.big:active { transform: scale(.98); } .big:disabled { opacity: .6; }

/* --- map --- */
.sea { fill: #cfe0e8; }
.cell { stroke: none; }
.border { stroke-width: 2.6; stroke-linejoin: round; }
.border-fog { stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .8; }
.fog .card, .fog .field, .fog .tree { opacity: .8; }
.tree { fill: #2f6b34; }
.fog .tree { fill: #5c7a5f; }
.card { fill: rgba(255,255,255,.88); stroke: rgba(0,0,0,.12); }
.card-fog { fill: rgba(250,250,250,.72); stroke-dasharray: 3 2; }
.nm { font-weight: 700; font-size: 10.5px; }
.src { font-size: 7.4px; fill: #555; font-style: italic; }
.fog .src { fill: #7a5c00; }
.ic { font-size: 7.5px; }
.bl { font-size: 7.1px; fill: #333; }
.bar-bg { fill: #e4e2dc; }
.fog .range { stroke: #666; stroke-width: .5; stroke-dasharray: 1.5 1; }
.tick { stroke: #1d2430; stroke-width: .9; }
.granary rect, .granary path { fill: #a0522d; stroke: #5b2e14; stroke-width: .6; }
.region { cursor: pointer; }
.region:focus { outline: none; }
.region:focus .border, .region:hover .border { stroke-width: 3.6; }

.route .rline { fill: none; stroke-width: 3; stroke-linecap: round; }
.route .rhit { fill: none; stroke: transparent; stroke-width: 18; }
.route-trade .rline { stroke-dasharray: 7 5; stroke: #6b7380; }
.route-stewards .rline { stroke: #2f7fc1; stroke-dasharray: 1.5 4; stroke-width: 3.4; }
.rs-ok .rline { stroke: var(--good); } .rs-refused .rline { stroke: var(--bad); } .rs-partial .rline { stroke: var(--warn); }
.route { cursor: pointer; }
.chip { fill: #fff; stroke: #6b7380; stroke-width: 1.2; }
.chiptext { font-size: 10px; font-weight: 700; fill: #333; }
.rs-ok .chip { stroke: var(--good); } .rs-ok .chiptext { fill: var(--good); }
.rs-refused .chip { stroke: var(--bad); fill: #fff0ee; } .rs-refused .chiptext { fill: var(--bad); }
.rs-partial .chip { stroke: var(--warn); fill: #fff7e6; } .rs-partial .chiptext { fill: var(--warn); }
.rs-none .chip { stroke-dasharray: 3 2; } .rs-none .chiptext { fill: #555; font-weight: 600; }
.route-stewards .chip { stroke: #2f7fc1; } .route-stewards .chiptext { fill: #2f7fc1; }
.mark circle { stroke-width: 1.5; }
.mark-bad circle { fill: #fff0ee; stroke: var(--bad); } .mark-good circle { fill: #eefaf0; stroke: var(--good); } .mark-warn circle { fill: #fff7e6; stroke: var(--warn); }
.mark text { font-size: 11px; }
.flash .pulse { animation: pulse 1.1s ease-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* --- sheet --- */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 78dvh; overflow-y: auto; background: var(--panel);
  border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.35); padding: 6px 14px calc(16px + env(safe-area-inset-bottom)); z-index: 10; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -6px; background: var(--panel); padding-top: 4px; }
.sheet-head h3 { margin: 0; font-size: 20px; }
.sheet .iconbtn { background: #e3dfd3; color: var(--ink); }
.sub { color: var(--muted); margin: 2px 0 8px; font-size: 14px; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e3dfd3; }
.row b { text-align: right; } .row small, .hint { color: var(--muted); font-weight: 400; }
.row.bad b, .bad { color: var(--bad); } .row.good b, .good { color: var(--good); } .row.warn b, .warn { color: var(--warn); }
.hint { font-size: 13px; margin: 4px 0 8px; }
h4 { margin: 14px 0 2px; }
.slider { display: block; margin: 14px 0 0; }
.slider input { width: 100%; height: var(--tap); accent-color: var(--accent); }
.slider input::-webkit-slider-thumb { width: 34px; height: 34px; }
.act { display: block; width: 100%; min-height: 52px; margin: 8px 0; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; font-size: 17px; }
.act.ghost { background: #e3dfd3; color: var(--ink); }
.act.done { background: #d5e9d8; color: var(--good); }
.two { display: flex; gap: 8px; } .two > * { flex: 1; }
.two input { min-height: 52px; margin: 8px 0; border-radius: 14px; border: 1px solid #ccc; padding: 0 12px; font-size: 17px; }
.seg { display: flex; gap: 8px; margin-top: 12px; }
.seg button { flex: 1; min-height: 58px; border-radius: 14px; border: 2px solid #c9c4b6; background: #fff; font-weight: 700; }
.seg button.on { border-color: var(--accent); background: #e6f0fa; color: var(--accent); }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0 0; }
.stepper button { width: 60px; height: 52px; border-radius: 14px; border: 0; background: #e3dfd3; font-size: 26px; font-weight: 700; }
.stepper output { font-size: 26px; font-weight: 700; min-width: 3ch; text-align: center; }
.belief { border-radius: 12px; padding: 4px 10px; margin: 10px 0; font-size: 14px; }
.belief.bad { background: #fff0ee; color: var(--ink); border-left: 4px solid var(--bad); }
.belief.good { background: #eefaf0; color: var(--ink); border-left: 4px solid var(--good); }
.legend p { margin: 8px 0; }
code { font-size: 12px; word-break: break-all; }

#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); background: #1d2430; color: #fff;
  padding: 10px 14px; border-radius: 12px; z-index: 20; max-width: 92vw; font-size: 14px; }
#toast.bad { background: var(--bad); }
#toast.top { bottom: auto; top: calc(10px + env(safe-area-inset-top)); }
/* Its own row under the list (never on top of an event line). */
#more { flex: none; text-align: right; padding: 2px 12px 4px; color: var(--muted); font-size: 12px; border-top: 1px solid #e3dfd3; pointer-events: none; }
#more[hidden] { display: none; }

#loading { position: fixed; inset: 0; background: var(--bg); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; }
#loading[hidden] { display: none; }
.spinner { width: 42px; height: 42px; border: 4px solid #456; border-top-color: #8fc3ee; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- desktop: the same map plus a side panel with the full turn report and trade list --- */
@media (min-width: 1024px) {
  #app { max-width: none; }
  #side { display: block; width: 440px; flex: none; overflow-y: auto; background: var(--panel); padding: 4px 14px 14px; }
  #side h2 { font-size: 15px; margin: 14px 0 4px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  #side pre { font-size: 11.5px; white-space: pre-wrap; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid #e3dfd3; }
  #side table { width: 100%; border-collapse: collapse; font-size: 13px; }
  #side td, #side th { text-align: left; padding: 5px 4px; border-bottom: 1px solid #e3dfd3; vertical-align: top; }
  #side tr[data-at] { cursor: pointer; }
  #lastturn { display: none; }
  #bottom { display: flex; justify-content: flex-end; }
  .big { width: 440px; }
  .sheet { left: auto; right: 460px; width: 420px; bottom: 90px; border-radius: 18px; max-height: 80vh; }
}