/* ICML Provincia: an original Julius-inspired city screen.
   The interface deliberately uses dense, squared game chrome instead of a modern dashboard. */
:root {
  --ink: #2b241a;
  --cream: #eee1bd;
  --cream-hi: #fff6d7;
  --stone: #b7a074;
  --stone-dark: #65563d;
  --line: #806c49;
  --wood: #6d3f22;
  --wood-dark: #412312;
  --red: #a63822;
  --red-dark: #702114;
  --gold: #d2ad58;
  --gold-hi: #f2d889;
  --green: #506e34;
  --shadow: rgba(18, 13, 8, .55);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 1px, transparent 1px) 0 0 / 4px 4px,
    radial-gradient(ellipse at 50% 0, #5d5544 0, #353127 46%, #211e18 100%);
  overflow: hidden;
}
button, input, select { font: inherit; }
b { font-weight: 800; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }

/* Classic Caesar-style top menu and city status band. */
.topbar {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 12px;
  padding: 5px 12px;
  color: #2c210f;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 48%),
    linear-gradient(90deg, #d9c18a, #f2e1ae 46%, #c7aa6d);
  border-top: 2px solid #f9e6ad;
  border-bottom: 3px solid #352414;
  box-shadow: 0 3px 0 #976b37, 0 8px 18px rgba(0,0,0,.45);
}
.game-menu { display: flex; align-items: center; gap: 3px; }
.game-menu button {
  min-width: 57px;
  padding: 7px 8px 6px;
  cursor: pointer;
  color: #f9edc8;
  background: linear-gradient(#895432, #59311c);
  border: 2px solid #4a2918;
  border-top-color: #bd8358;
  border-left-color: #bd8358;
  box-shadow: inset 0 0 0 1px rgba(255,235,180,.14), 1px 1px 0 rgba(255,255,255,.3);
  text-shadow: 1px 1px #251208;
}
.game-menu button:hover { background: linear-gradient(#a4683e, #65381f); }
.game-menu button:active { transform: translate(1px, 1px); }
.brand { display: flex; align-items: center; justify-content: center; min-width: 0; gap: 9px; }
.spqr {
  display: grid; place-items: center; flex: 0 0 39px; height: 45px;
  color: var(--gold-hi); background: linear-gradient(135deg, #7d1f1c, #3e1715);
  border: 2px solid #d6ad58; box-shadow: inset 0 0 0 2px #3d1712, 1px 1px 0 #fff1bf;
  font: 800 13px/1 Georgia, serif; letter-spacing: .06em;
}
.brand h1 { margin: 0; color: #49250f; font-size: clamp(17px, 2.2vw, 25px); letter-spacing: .14em; line-height: 1; text-shadow: 1px 1px #ffeec2; }
.brand p { margin: 4px 0 0; color: #644f31; font-size: 10px; letter-spacing: .035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-stats { display: flex; align-items: stretch; justify-content: flex-end; min-width: 335px; border-left: 1px solid rgba(89,58,25,.35); }
.city-stats span { min-width: 70px; display: flex; flex-direction: column; justify-content: center; padding: 1px 10px 1px 11px; border-right: 1px solid rgba(89,58,25,.35); text-align: right; }
.city-stats small { color: #7a633e; font: 700 8px/1.1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.city-stats b { color: #572413; font-size: 16px; line-height: 1.25; white-space: nowrap; }
.city-stats .snapshot { max-width: 190px; }
.city-stats .snapshot b { overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: #654a28; }

.stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px; padding: 10px 12px 14px; height: calc(100dvh - 68px); max-width: none; margin: 0; }
.town {
  position: relative; min-width: 0; overflow: hidden;
  background: #8fbbd5;
  border: 5px ridge #a98b58;
  box-shadow: 0 0 0 2px #302217, 0 10px 28px var(--shadow);
}
/* Keep the map clean; the original game look comes from the terrain and chrome, not a screen-wide texture mask. */
.town::after { display: none; }
#town { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.clockChip { position: absolute; top: 8px; left: 8px; z-index: 6; min-width: 142px; padding: 6px 9px; color: #f9edc9; background: linear-gradient(#5a351d, #321c10); border: 2px solid #c49e5c; box-shadow: inset 0 0 0 1px #211107, 2px 2px rgba(0,0,0,.35); }
.clockChip span { display: block; font-size: 14px; font-weight: 800; }
.clockChip small { display: block; color: #d8bf87; font: 700 9px/1.4 Arial, sans-serif; letter-spacing: .1em; }
.dayBanner { position: absolute; z-index: 7; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 11px 26px; color: #fff0be; background: linear-gradient(#8a3122, #4d1611); border: 3px ridge #dfbb67; box-shadow: 4px 4px 0 rgba(0,0,0,.36); font-weight: 800; font-size: 25px; letter-spacing: .14em; pointer-events: none; }
.ticker { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: stretch; gap: 8px; padding: 6px; color: #f8edcb; background: linear-gradient(90deg, rgba(61,35,18,.95), rgba(40,26,15,.94)); border: 2px solid #b58e4b; box-shadow: inset 0 0 0 1px #1f130b; }
.ticker-kind { display: grid; place-items: center; min-width: 65px; padding: 4px; color: #301a0f; background: linear-gradient(#f0d47e, #b98936); border: 1px solid #ffe49c; font: 800 9px/1 Arial, sans-serif; letter-spacing: .11em; }
.ticker-body { min-width: 0; padding: 1px 3px; }
.ticker-body strong { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.ticker-body span { display: block; overflow: hidden; margin-top: 2px; color: #d1bd90; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.legend { position: absolute; z-index: 6; top: 8px; right: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; max-width: 320px; padding: 7px; color: #362717; background: rgba(244,229,190,.92); border: 2px solid #886c41; box-shadow: inset 0 0 0 1px #fff0bc; font-size: 9px; }
.legend b { grid-column: 1 / -1; color: #75401d; font: 800 8px/1 Arial, sans-serif; letter-spacing: .14em; }
.legend .row { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend .dot { width: 8px; height: 8px; border: 1px solid rgba(0,0,0,.42); flex: 0 0 auto; }

/* The construction/advisors sidebar is deliberately dense and beveled. */
.panel { display: flex; flex-direction: column; min-height: 0; gap: 9px; padding: 8px; overflow: hidden; background: linear-gradient(90deg, #a88e5b, #dfc58a 10%, #d4b673 89%, #94794d); border: 4px ridge #9e8050; box-shadow: 0 0 0 2px #302217, 0 10px 28px var(--shadow); }
.side-title { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 4px; color: #f8e5ae; background: linear-gradient(#73311f, #3d1d13); border: 2px solid #4a2415; box-shadow: inset 0 0 0 1px #ad6f42; text-transform: uppercase; }
.side-crest { display: grid; place-items: center; width: 28px; height: 27px; color: #5a2013; background: #e8c866; border: 1px solid #ffe69a; font-weight: 900; }
.side-title b { display: block; font-size: 13px; letter-spacing: .06em; }
.side-title small { display: block; margin-top: 2px; color: #d7bb7c; font: 700 8px/1 Arial, sans-serif; letter-spacing: .12em; }
.controls { display: flex; flex-direction: column; gap: 7px; padding: 7px; background: rgba(255,246,211,.35); border: 1px solid #80673f; }
.transport { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.btn { cursor: pointer; padding: 7px 8px; border: 2px outset #c6a266; font: 800 10px/1 Arial, sans-serif; letter-spacing: .025em; text-transform: uppercase; }
.btn.primary { color: #ffedbb; background: linear-gradient(#8f3a25, #591a12); border-color: #ad7547; text-shadow: 1px 1px #2c0e08; }
.btn.stone { color: #442c15; background: linear-gradient(#f8e5ae, #c7a768); }
.btn:hover, .speed:hover { filter: brightness(1.09); }
.btn:active, .speed:active { transform: translate(1px, 1px); border-style: inset; }
.speeds { display: flex; gap: 2px; }
.speed { min-width: 27px; cursor: pointer; padding: 6px 4px; color: #51341e; background: linear-gradient(#f1dca4, #b79455); border: 2px outset #d2ad65; font: 800 10px/1 Arial, sans-serif; }
.speed.active { color: #fff0bd; background: linear-gradient(#a63a24, #631c12); border-color: #5a1b12; }
.scrubber { width: 100%; height: 13px; accent-color: var(--red); }
.rebuild-row { display: flex; align-items: center; gap: 7px; }
.rebuild-status { min-width: 0; color: #665337; font-size: 9px; line-height: 1.15; }
.rebuild-status.ok { color: #2f6732; }.rebuild-status.err { color: #8a2719; }.rebuild-status.busy { color: #765219; }
.overview { display: grid; grid-template-columns: 92px 1fr; gap: 7px; align-items: center; padding: 5px; color: #49341d; background: #ebd59c; border: 2px inset #b8975b; }
.overview b { display: block; font-size: 10px; text-transform: uppercase; }.overview small { display: block; margin-top: 3px; color: #725e3e; font-size: 9px; line-height: 1.2; }
.mini-map { position: relative; height: 50px; overflow: hidden; background: linear-gradient(145deg, #5e813b 0 36%, #b09c69 37% 40%, #4a7135 41% 68%, #799ab0 69% 100%); border: 2px solid #4a3a24; box-shadow: inset 0 0 0 1px #d6bb78; }
.mini-map::after { content:""; position:absolute; inset: 9px 24px 6px 16px; border: 2px solid #e2c466; box-shadow: 0 0 0 1px #64291c; }.mini-map i { position: absolute; width: 10px; height: 6px; background: #b24c2e; border: 1px solid #4f2b18; }.mini-map i:nth-child(1){left:16px;top:12px}.mini-map i:nth-child(2){left:33px;top:27px}.mini-map i:nth-child(3){left:54px;top:17px}.mini-map i:nth-child(4){left:70px;top:32px}.mini-map i:nth-child(5){left:44px;top:39px}
.board { display: flex; flex-direction: column; gap: 5px; padding: 6px; border: 1px solid #8a6f43; background: rgba(255,247,217,.36); }
.panel h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; margin: 0; color: #63331b; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }.panel h3 small { color: #796344; font-size: 8px; font-weight: 400; letter-spacing: 0; text-transform: none; }.muted { color: #796344; font-size: 10px; }
.ladder { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }.ladder li { display: grid; grid-template-columns: 18px 1fr auto; gap: 4px; align-items: center; min-height: 20px; padding: 3px; background: rgba(255,248,219,.48); border-bottom: 1px solid rgba(114,84,42,.22); font-size: 10px; }.ladder li:nth-child(-n+3) { background: linear-gradient(90deg, rgba(218,181,86,.43), rgba(255,248,219,.38)); }.ladder .rk { color: #8f6c30; font-weight: 800; text-align: center; }.ladder .who { display: flex; align-items: center; min-width: 0; gap: 5px; }.ladder .who .chip { width: 9px; height: 9px; border: 1px solid rgba(0,0,0,.35); flex: none; }.ladder .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ladder .pts { color: #8f291a; font-weight: 800; }.ladder .pts small { color: #846d4b; font-weight: 400; }
.roster-wrap { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 6px; padding: 6px; background: rgba(255,247,217,.24); border: 1px solid #8a6f43; }.roster-head { display: flex; align-items: baseline; justify-content: space-between; }.roster-filters { display: flex; gap: 5px; }.roster-filters input, .roster-filters select { min-width: 0; padding: 5px 6px; color: #402c19; background: #fff4d1; border: 2px inset #c4a466; font-size: 10px; }.roster-filters input { flex: 1; }.roster { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 4px; overflow-y: auto; padding-right: 3px; }.roster-card { padding: 6px; background: rgba(255,250,227,.7); border: 1px solid #b29159; }.roster-card .person { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; }.avatar { display: grid; place-items: center; width: 19px; height: 19px; color: #fff; border: 1px solid rgba(0,0,0,.25); border-radius: 50%; font-size: 8px; font-weight: 800; flex: none; }.roster-card .paper { margin: 4px 0 0; color: #624a2f; font-size: 9px; line-height: 1.2; }.metrics { display: flex; gap: 8px; margin-top: 4px; color: #796344; font-size: 9px; }.metric strong { color: #902b1a; }.empty { padding: 14px; color: #796344; font-size: 10px; text-align: center; }.roster::-webkit-scrollbar { width: 8px; }.roster::-webkit-scrollbar-thumb { background: #987947; border: 1px solid #e5ca8d; }

@media (max-width: 980px) { body { overflow: auto; }.topbar { grid-template-columns: auto 1fr; }.city-stats { display: none; }.stage { height: auto; min-height: calc(100dvh - 68px); grid-template-columns: 1fr; }.town { height: 65dvh; min-height: 440px; }.panel { min-height: 620px; }.roster { max-height: 330px; } }
@media (max-width: 620px) { .topbar { min-height: 56px; padding: 4px 6px; }.game-menu button { min-width: 41px; padding: 6px 4px; font-size: 10px; }.spqr { display: none; }.brand { justify-content: flex-start; }.brand h1 { font-size: 16px; }.brand p { max-width: 190px; }.stage { padding: 7px; }.town { border-width: 3px; }.legend { grid-template-columns: 1fr; max-width: 155px; }.ticker-body strong { font-size: 11px; } }