:root {
  /* Layout: a full-bleed hex map with floating panels finished like a war-room table: dark lacquer, gilt hairlines. */
  color-scheme: dark; /* the game commits to one dark look */
  --bg: #0b0e14;
  --panel: rgba(16, 20, 28, 0.92);
  --panel-2: rgba(30, 36, 49, 0.96);
  --line: rgba(255, 255, 255, 0.1);
  --gilt: rgba(240, 222, 164, 0.22);
  --text: #ece8de;
  --muted: #a3a8b2;
  --gold: #e9c23b;
  --gold-2: #f4d76a;
  --red: #ff6b6b;
  --green: #5bd68a;
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 15px/1.4 var(--font-body); user-select: none; }
button { font: inherit; font-weight: 500; color: var(--text); background: linear-gradient(#2c3446, #1f2533);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4);
  transition: background .12s, border-color .12s, transform .06s; }
button:hover:not(:disabled) { background: linear-gradient(#36405a, #262e40); border-color: var(--gilt); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(#f3d464, #d8ab2c); color: #1a1405; border-color: #b8901f; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(0,0,0,.4); }
button.primary:hover:not(:disabled) { background: linear-gradient(#f7de7e, #e2b739); border-color: #c99d22; }
button.danger:hover:not(:disabled) { background: #5a2323; border-color: var(--red); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.center { text-align: center; }
.war { color: var(--red); }
.peace { color: var(--green); }
small { color: var(--muted); }

#map { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; }
#glmap { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; pointer-events: none; visibility: hidden; }
#map:active { cursor: grabbing; }

#topbar { position: fixed; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; gap: 14px;
  padding: 0 14px; background: linear-gradient(#141a24f2, #10141cf0); border-bottom: 1px solid var(--line); z-index: 5; }
.brand { font-family: "Cinzel", serif; font-weight: 700; font-size: 18px; color: var(--gold); letter-spacing: .5px; }
#turnInfo { color: var(--muted); font-weight: 600; }
#stats { display: flex; gap: 14px; }
.spacer { flex: 1; }
.research small { margin-left: 6px; }
.research.attn, #btnIdeo.attn, #btnEnd.pending { animation: pulse 1.6s infinite; border-color: var(--gold); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(233,194,59,.25); } }

.panel { position: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 4; }
#log { top: 60px; right: 12px; width: 340px; max-height: 40vh; overflow: hidden; padding: 8px 12px; font-size: 12.5px; }
#log:empty { display: none; }
#log div { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
#log div:last-child { border-bottom: 0; }
#log .t { color: var(--gold); font-weight: 600; margin-right: 4px; }

#selpanel { left: 12px; bottom: 12px; width: 370px; padding: 12px 14px; }
.sel-head { display: flex; gap: 10px; align-items: center; }
.big { font-size: 34px; line-height: 1; }
.statrow { margin: 8px 0; color: #cfd3da; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; }
.hint { margin-top: 8px; font-size: 12px; color: var(--muted); }

#citypanel { top: 60px; right: 12px; bottom: 236px; width: 360px; padding: 12px 14px; overflow-y: auto; }
.cp-head { display: flex; justify-content: space-between; align-items: flex-start; }
.cp-head h3 { margin: 0; font-family: "Cinzel", serif; color: var(--gold); }
.x { padding: 2px 9px; }
.yields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.yields div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 6px 8px; }
.yields small { display: block; }
.cur { background: rgba(233,194,59,.08); border: 1px solid rgba(233,194,59,.3); border-radius: 8px; padding: 8px; }
.cur span { float: right; color: var(--muted); }
.bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); }
h4 { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.item { display: flex; width: 100%; text-align: left; align-items: center; gap: 8px; margin-bottom: 4px; padding: 6px 8px; }
.item.active { border-color: var(--gold); background: rgba(233,194,59,.12); }
.item .ic { font-size: 20px; width: 26px; text-align: center; }
.item .nm { flex: 1; }
.item .nm small { display: block; font-size: 11px; }
.item .tt { color: var(--gold); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { background: rgba(255,255,255,.06); border-radius: 12px; padding: 2px 8px; font-size: 12px; }

#corner { position: fixed; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 4; }
#endturn { display: flex; gap: 6px; }
#btnEnd { background: var(--gold); color: #1a1405; font-weight: 700; padding: 10px 22px; font-size: 15px; border-color: var(--gold); min-width: 190px; }
#btnEnd:hover { background: var(--gold-2); }
#minimap { border: 1px solid var(--line); border-radius: 8px; background: #000; cursor: crosshair; width: 240px; height: 156px; }

#tooltip { position: fixed; z-index: 8; pointer-events: none; background: rgba(10,12,18,.95); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; max-width: 220px; }
#tooltip .combat { color: var(--gold); margin-top: 3px; }

#toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast { background: rgba(10,12,18,.95); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 14px; transition: opacity .5s; }
.toast.fade { opacity: 0; }

#modalWrap { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 10; }
.modal-card { background: #121722; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-card.wide { width: min(980px, calc(100vw - 32px)); }
.modal-card.wide:has(.techgrid) { width: min(1320px, calc(100vw - 32px)); }
.modal-card h2 { margin: 0; font-family: "Cinzel", serif; color: var(--gold); }
.title { font-family: "Cinzel", serif; color: var(--gold); text-align: center; margin: 4px 0; font-size: 34px; }
.m-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.menu { display: flex; flex-direction: column; gap: 8px; margin: 14px auto 4px; max-width: 280px; }
.menu button { padding: 10px; }

.techgrid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.tcol { display: flex; flex-direction: column; gap: 8px; min-width: 170px; flex: 1; }
.tech { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.tech .cost { font-size: 12px; color: var(--gold); }
.tech small { font-size: 11px; }
.tech.known { background: rgba(91,214,138,.12); border-color: rgba(91,214,138,.4); }
.tech.current { border-color: var(--gold); background: rgba(233,194,59,.15); }
.tech.avail { border-color: rgba(255,255,255,.3); }
.tech.locked { opacity: .5; }
.tech .req { color: #c9a; }

.drow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drow > div { flex: 1; }
.drow.dead { opacity: .5; justify-content: space-between; }

#advisor { top: 60px; left: 12px; width: 330px; padding: 10px 14px; font-size: 13px; border-color: rgba(233,194,59,.45); }
.adv-head { color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.adv-btns { display: flex; gap: 6px; margin-top: 8px; }
button.ghost { background: transparent; color: var(--muted); }
.guide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.guide-tabs button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
#guideSearch { font: inherit; width: 100%; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.gentry { display: flex; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.gentry .gic { font-size: 24px; width: 32px; text-align: center; flex: none; }
.gentry small { display: block; color: var(--gold); opacity: .85; margin: 1px 0 3px; }
.guide-rules { grid-column: 1 / -1; }
.swatch { display: inline-block; width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.4); }

table.rank { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.rank th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.rank td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
table.rank tr.me td { background: rgba(233,194,59,.08); }
table.rank tr.dead td { opacity: .5; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.chart-wrap { position: relative; }
.chart-wrap svg { width: 100%; height: auto; display: block; touch-action: none; }
.chart-wrap .grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.chart-wrap .axis { fill: var(--muted); font-size: 11px; }
.chart-wrap .cross { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text); margin: 4px 0 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.chart-tip { position: absolute; pointer-events: none; background: rgba(10,12,18,.96); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 9px; font-size: 12px; min-width: 130px; z-index: 2; }
.chart-tip div { display: flex; align-items: center; gap: 4px; }
.chart-tip div b { margin-left: auto; padding-left: 10px; }

/* ---------- touch & small screens ---------- */
#map { touch-action: none; }
#minimap { touch-action: none; }
button { touch-action: manipulation; }
@media (max-width: 760px) {
  #topbar { gap: 6px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  #topbar::-webkit-scrollbar { display: none; }
  .brand, #turnInfo, #topbar .lbl { display: none; }
  #topbar button { padding: 6px 7px; white-space: nowrap; }
  #btnResearch { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .research small { display: none; }
  #stats { gap: 6px; font-size: 13px; white-space: nowrap; }
  #stats small { display: none; }
  #stats .opt { display: none; }
  #log { display: none; }
  #corner { right: 8px; bottom: 8px; }
  #minimap { width: 150px; height: 98px; }
  #btnEnd { padding: 10px 14px; }
  #selpanel { left: 8px; right: 8px; width: auto; bottom: 150px; max-height: 45vh; overflow-y: auto; }
  #citypanel { top: 56px; left: 8px; right: 8px; bottom: 8px; width: auto; z-index: 6; }
  #toasts { top: 56px; width: calc(100vw - 32px); }
  #advisor { top: 56px; left: 8px; right: 8px; width: auto; }
  #citypanel { background: linear-gradient(#1a1f2a, #0d1017); } /* full-screen sheet: opaque so nothing shows through */
  .modal-card { padding: 14px 14px; }
  .modal-card.wide, .modal-card.wide:has(.techgrid) { width: calc(100vw - 16px); }
  .tcol { min-width: 150px; }
}
@media (pointer: coarse) {
  button { min-height: 36px; }
  .item, .worklist button { min-height: 44px; }
}

.worklist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.worklist button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; }
.worklist .ic { font-size: 18px; }
.worklist .nm { flex: 1; display: flex; flex-direction: column; }
.worklist .nm small { opacity: 0.7; font-size: 11px; }
.worklist .tt { opacity: 0.8; font-size: 12px; }
.cur .buy { display: block; width: 100%; margin-top: 8px; }
.yields div:last-child:nth-child(odd) { grid-column: span 2; }
.tech .era { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #b9a4ff;
  border: 1px solid rgba(185,164,255,.4); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; }
.tech.medieval:not(.known) { background: rgba(120,100,200,.08); }
.drow .trade { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.drow .trade .muted { flex-basis: 100%; font-size: 12px; }
.drow .trade button { font-size: 12px; padding: 4px 8px; }
.ideogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ideogrid h4 { margin: 0 0 8px; }
.ideo { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.ideo.current { border-color: var(--gold); background: rgba(233,194,59,.1); }
.ideo.locked { opacity: .55; }
.ideo .ih { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ideo .ic { font-size: 20px; }
.ideo .tag { margin-left: auto; font-size: 11px; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; padding: 0 6px; }
.ideo .pro { color: var(--green); font-size: 13px; }
.ideo .con { color: var(--red); font-size: 13px; }
.ideo small { display: block; margin-top: 4px; }
.ideo button { margin-top: 8px; font-size: 12px; padding: 4px 10px; }
@media (max-width: 640px) { .ideogrid { grid-template-columns: 1fr; } }
.setrow { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.setrow .lbl { width: 84px; color: var(--muted); font-weight: 600; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button.on { background: var(--gold); color: #1a1405; border-color: var(--gold); font-weight: 700; }
.setdesc { margin: 2px 0 0 96px; font-size: 12px; }
#seedInput, #leaderInput, #textInput { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; width: 180px; }
@media (max-width: 520px) { .setrow { flex-direction: column; align-items: flex-start; } .setdesc { margin-left: 0; } }
.tech.renaissance:not(.known) { background: rgba(80,160,200,.08); }
.tech.industrial:not(.known) { background: rgba(200,130,80,.08); }
.tech.renaissance .era { color: #7cc7e8; border-color: rgba(124,199,232,.4); }
.tech.industrial .era { color: #e8a47c; border-color: rgba(232,164,124,.4); }
.tech.modern:not(.known) { background: rgba(120,200,160,.08); }
.tech.modern .era { color: #8fe0b8; border-color: rgba(143,224,184,.4); }
.audio-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.audio-row label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.audio-row input[type=range] { width: 120px; accent-color: var(--gold); }
img.sprite { display: inline-block; vertical-align: middle; }
#turnCode { width: 100%; margin-top: 10px; font: 12px/1.4 ui-monospace, monospace; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; }
#turnFile { margin-top: 6px; color: var(--muted); }
/* Hotseat handoff: cover everything so the next player's information can't be read. */
body.handoff #modalWrap { background: #06080c; }
body.handoff #topbar, body.handoff #log, body.handoff #advisor, body.handoff #corner, body.handoff #selpanel,
body.handoff #citypanel, body.handoff #tooltip { visibility: hidden; }

/* ---------- finish: panels, dialogs, top bar ---------- */
.panel, .modal-card { background: linear-gradient(rgba(26,31,42,.95), rgba(13,16,23,.95)); border: 1px solid var(--gilt);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.modal-card h1, .modal-card h2, .cp-head h3 { font-family: var(--font-display); letter-spacing: .02em; }
#topbar { background: linear-gradient(rgba(24,29,40,.97), rgba(13,16,23,.95)); border-bottom: 1px solid var(--gilt);
  box-shadow: 0 4px 16px rgba(0,0,0,.45); }
#stats > span { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 2px 9px;
  font-variant-numeric: tabular-nums; font-weight: 500; }
#stats > span.war { border-color: rgba(255,107,107,.35); }
.item:hover:not(:disabled), .worklist button:hover:not(:disabled) { border-color: rgba(233,194,59,.55); }
.item.active { box-shadow: inset 3px 0 0 var(--gold); }
h4 { color: #c9b98a; }
.yields div { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
#log div { border-bottom-color: rgba(240,222,164,.07); }
img.sprite { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
svg.gi { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.big svg.gi { width: 1em; height: 1em; }
#stats svg.gi, .yields svg.gi, .research svg.gi { width: 1.6em; height: 1.6em; vertical-align: -0.42em; }
.statrow svg.gi { width: 1.25em; height: 1.25em; }
img.badge { display: inline-block; vertical-align: middle; border-radius: 6px; }
.item .ic img.badge, .worklist .ic img.badge { width: 30px; height: 30px; }
/* ---------- store ---------- */
#btnStore { font-variant-numeric: tabular-nums; }
.wallet { margin-left: auto; margin-right: 12px; font-weight: 700; color: #dfe5f0; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.store-item { display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.store-item.on { border-color: rgba(233,194,59,.6); background: rgba(233,194,59,.07); }
.store-item .prev { display: flex; align-items: center; gap: 6px; min-height: 48px; flex-wrap: wrap; }
.store-item small { color: var(--muted); min-height: 2.6em; }
.store-item button { margin-top: auto; }
.store-item .swatch { width: 22px; height: 22px; }
.store-item .swatch.big { width: 36px; height: 36px; border-radius: 8px; }
.big-coin { font-size: 22px; font-weight: 800; }
.ach-list { display: flex; flex-direction: column; gap: 6px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.ach .mark { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: #1a1405; font-weight: 800; flex: none; }
.ach.got .mark { background: var(--gold); border-color: var(--gold); }
.ach small { display: block; color: var(--muted); }
.ach .reward { margin-left: auto; white-space: nowrap; }
.ach:not(.got) { opacity: .75; }
@media (max-width: 760px) { #btnStore { display: none; } }
/* ---------- choosing production ---------- */
#btnEnd small.sub { display: block; font-size: 12px; font-weight: 700; color: inherit; opacity: .75; margin-top: 1px; }
.cur.need { border: 2px solid var(--gold); background: rgba(233,194,59,.12); display: flex; flex-direction: column; gap: 6px;
  animation: needPulse 1.6s ease-in-out 3; }
.cur.need .how { float: none; color: var(--text); }
.cur.need button { align-self: stretch; }
@keyframes needPulse { 50% { box-shadow: 0 0 0 4px rgba(233,194,59,.25); } }
.item.suggested { border-color: rgba(233,194,59,.7); }
.sugtag { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .cur.need { animation: none; } }
/* ---------- city scene ---------- */
.cityscene { position: relative; margin: 10px 0 4px; border-radius: 10px; overflow: hidden; border: 1px solid var(--gilt);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.cityscene canvas { display: block; width: 100%; height: auto; }
.scene-caps { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.scene-caps span { background: rgba(12,14,20,.78); border: 1px solid rgba(240,222,164,.25); border-radius: 999px; padding: 1px 8px;
  font-size: 12px; font-weight: 600; color: #f1ece0; }

/* Leaders: portraits in Diplomacy, audiences (war declarations, first meetings, proposals) */
.leader { display: flex; align-items: center; gap: 12px; flex: 0 1 340px; min-width: 0; }
.leader .portrait { border-radius: 12px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.leader .who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leader .who b { font-family: "Cinzel", serif; font-size: 14px; color: var(--gold-2); }
.leader q { font-style: italic; color: var(--text, #e8e6e1); font-size: 14px; line-height: 1.35; quotes: "“" "”"; }
.drow > .leader { flex: 1 0 100%; }
.drow.self { gap: 12px; }
.drow.self .leader { flex: 0 0 auto; }
.drow.self > .muted { flex: 1; }
.audience { display: flex; justify-content: center; margin: 6px 0 10px; }
.audience .leader { flex: 0 1 520px; gap: 18px; }
.audience .leader q { font-size: 17px; }
.audience.war .portrait { box-shadow: 0 0 0 2px #b8322a, 0 6px 22px rgba(184,50,42,.55); }
button.rename { font-size: 13px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; opacity: .8; }
#textInput { width: 100%; font-size: 16px; padding: 8px 10px; box-sizing: border-box; }
.setrow textarea { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
@media (max-width: 760px) {
  .leader { flex-basis: 100%; }
  .audience .leader { flex-direction: column; text-align: center; }
}

/* Era card and events */
.era-card { text-align: center; }
.era-card .kicker { margin: 0; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.era-card .title { margin: 2px 0 12px; }
.era-card canvas { width: 100%; max-width: 680px; height: auto; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.era-card .blurb { font-size: 17px; font-style: italic; max-width: 56ch; margin: 14px auto; text-wrap: balance; }
.era-card .unlocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 8px; }
.event { text-align: center; }
.event .ev-icon { font-size: 44px; line-height: 1; margin-top: 4px; }
.event p { max-width: 52ch; margin: 8px auto 4px; text-wrap: pretty; }

/* Tutorial coach (reuses the advisor panel) and highlighted controls */
#advisor.coach { width: 360px; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(233,194,59,.35), 0 10px 30px rgba(0,0,0,.5); }
#advisor.coach .tut-title { display: block; font-family: "Cinzel", serif; color: var(--gold-2); margin: 6px 0 4px; font-size: 15px; }
#advisor.coach .adv-btns button.primary { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.tut-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; }
.tut-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.tut-target { position: relative; z-index: 5; animation: tutPulse 1.2s ease-in-out infinite; outline: 3px solid var(--gold); outline-offset: 3px; }
@keyframes tutPulse { 0%, 100% { outline-color: rgba(233,194,59,1); } 50% { outline-color: rgba(233,194,59,.25); } }
@media (prefers-reduced-motion: reduce) { .tut-target { animation: none; } }
@media (max-width: 760px) { #advisor.coach { width: auto; } }
.capmove { margin: 8px 0 4px; }
.capmove button { width: 100%; }

/* Watching the AI play */
#spectate { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: min(560px, calc(100vw - 32px)); border-color: rgba(233,194,59,.5); }
#spectate .sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#spectate .sp-board { display: flex; gap: 10px; font-weight: 700; font-size: 13px; margin-left: auto; }
#spectate button { font-size: 13px; padding: 5px 10px; }
#spectate button.primary { background: var(--gold); color: #1a1408; border-color: var(--gold); }
body.spectating #endturn, body.spectating #selpanel, body.spectating #advisor, body.spectating #citypanel { display: none !important; }
@media (max-width: 760px) { #spectate { top: 54px; } #spectate .sp-board { margin-left: 0; } }
@media (min-width: 761px) { #turnInfo, #stats > span, #btnResearch { white-space: nowrap; } }
.capmove .forced { display: block; line-height: 1.4; font-size: 13px; cursor: pointer; }
#btnSnap, #btnRec { padding: 6px 10px; }
#btnRec.recording { background: #8a1c1c; border-color: #e04a4a; color: #fff; animation: tutPulse 1.2s ease-in-out infinite; }
.capture-media { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: #000; display: block; }
@media (max-width: 760px) { #btnSnap, #btnRec { display: none; } }
.ruler .chip { font-size: 11px; padding: 1px 6px; }
.dynlist { columns: 2; font-size: 13px; padding-left: 18px; }

.chronicle { max-height: 62vh; overflow-y: auto; padding: 14px 18px; border-radius: 10px; background: #efe3c4; color: #3a2a16; font-family: "Alegreya Sans", Georgia, serif; }
.chronicle .chron-era { font-family: "Cinzel", serif; color: #6a4416; border-bottom: 1px solid rgba(106,68,22,.35); margin: 14px 0 8px; }
.chron-entry { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; }
.chron-entry p { margin: 0; font-size: 15px; line-height: 1.45; }
.chron-when { font-size: 12px; color: #8a6a3a; font-variant: small-caps; letter-spacing: .04em; }
.chron-pic { width: 180px; max-width: 40%; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.3); border: 3px solid #fff8e6; flex: none; }

.nego { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nego > div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.nego h4 { flex-basis: 100%; margin: 0 0 4px; }
.nego-item { font-size: 12px; padding: 4px 8px; }
.nego-item.on { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.nego-gold { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; }
.nego-gold button { padding: 2px 10px; }
@media (max-width: 760px) { .nego { grid-template-columns: 1fr; } }

/* ---------- Interface finish: brass-framed panels, engraved headings, parchment details ---------- */
:root { --brass: #c9a24a; --brass-hi: #f1d58a; --brass-lo: #6e5420;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.panel, #modal { background-image: var(--grain), linear-gradient(rgba(28,33,45,.96), rgba(12,15,22,.96)) !important;
  border: 1px solid var(--brass-lo) !important;
  box-shadow: inset 0 0 0 1px rgba(241,213,138,.18), inset 0 0 0 4px rgba(10,12,18,.6), inset 0 0 0 5px rgba(201,162,74,.35), 0 10px 34px rgba(0,0,0,.55) !important; }
#modal { position: relative; }
#modal::before, #modal::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid var(--brass); opacity: .8; }
#modal::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
#modal::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
#modal h2, #modal h3, .m-head h2 { font-family: var(--font-display); letter-spacing: .04em; color: var(--brass-hi);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(241,213,138,.15); }
#modal h4 { font-family: var(--font-display); color: var(--brass); letter-spacing: .08em; }
#topbar { background-image: var(--grain), linear-gradient(rgba(30,35,48,.98), rgba(13,16,23,.97)) !important;
  border-bottom: 1px solid var(--brass-lo) !important; box-shadow: inset 0 -1px 0 rgba(241,213,138,.2), 0 4px 14px rgba(0,0,0,.45); }
.brand { background: linear-gradient(var(--brass-hi), var(--brass) 55%, var(--brass-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }
button { border-color: rgba(201,162,74,.28); }
button:hover:not(:disabled) { border-color: var(--brass); }
button.primary { background: linear-gradient(var(--brass-hi), var(--brass) 60%, #a07a2a) !important; border-color: var(--brass-lo) !important; color: #1f1606 !important; }
.toast { background-image: var(--grain), linear-gradient(rgba(30,35,48,.97), rgba(14,17,24,.97)); border: 1px solid var(--brass) !important;
  box-shadow: inset 0 0 0 3px rgba(10,12,18,.6), inset 0 0 0 4px rgba(201,162,74,.3), 0 6px 18px rgba(0,0,0,.5); font-weight: 600; }
#log .t { font-family: var(--font-display); }
#minimap { border: 2px solid var(--brass-lo) !important; box-shadow: inset 0 0 0 1px rgba(241,213,138,.25), 0 6px 18px rgba(0,0,0,.5); border-radius: 10px; }
.chip { border-color: rgba(201,162,74,.3); }

.drow > .dline { flex: 1 0 100%; font-size: 13px; }

.quest { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; background: rgba(255,255,255,.03); }
.quest > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.quest.done { opacity: .6; }
.quest .bar, #modal .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.quest .bar i, #modal .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--brass-hi)); }
.qrew { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.pass-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
.ptier { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: 12px; background: rgba(255,255,255,.03); }
.ptier b { font-family: var(--font-display); color: var(--brass-hi); }
.ptier.got { border-color: var(--brass); box-shadow: inset 0 0 0 1px rgba(241,213,138,.25); }
.ptier .pprem { color: var(--gold-2); } .ptier .pprem.locked { color: var(--muted); }
@media (max-width: 760px) { .pass-track { grid-template-columns: repeat(3, 1fr); } }
#btnAccount { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; }
#btnAccount .av, .av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--brass); }
.av.big { width: 88px; height: 88px; }
.acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; }
.acct-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.acct-form input, #modal .row input { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.acct-err:empty { display: none; }
.acct-top { display: flex; gap: 16px; align-items: center; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { padding: 3px; border-radius: 50%; width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; border: 1px solid var(--line); }
.pick img { width: 54px; height: 54px; border-radius: 50%; }
.pick.on { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass); }
#modal .row { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-save { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
#modal .legal { font-size: 12px; text-align: center; margin-top: 4px; }
/* early-game helper bubbles beside the selected piece */
.unit-prompt { position: absolute; z-index: 30; max-width: 320px; padding: 10px 12px; border-radius: 12px; background: rgba(14,22,36,.94);
  border: 1px solid var(--brass); box-shadow: 0 8px 24px rgba(0,0,0,.45); font-size: 14px; line-height: 1.4; color: var(--text); }
.unit-prompt::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg);
  background: rgba(14,22,36,.94); border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass); }
.unit-prompt.end { position: fixed; right: 16px; bottom: 236px; }
.unit-prompt.end::after { left: auto; right: 60px; }
.unit-prompt kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border: 1px solid var(--brass); border-bottom-width: 2px; border-radius: 5px;
  font: 700 12px/1.5 inherit; text-align: center; background: rgba(233,185,73,.12); }
.unit-prompt .up-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.unit-prompt .up-btns button { padding: 5px 10px; font-size: 13px; }
@media (max-width: 600px) { .unit-prompt { max-width: calc(100vw - 32px); font-size: 13px; } .unit-prompt.end { bottom: 220px; } }
/* the EmpireWright header mark: emblem plus a gold wordmark with a slow shine */
.brand { display: flex; align-items: center; gap: 8px; flex: none; background: none !important; filter: none !important; color: inherit; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(241,213,138,.45), 0 0 14px rgba(233,185,73,.35); }
.brand-word { font-family: "Cinzel", serif; font-weight: 700; font-size: 23px; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(100deg, #a8741c 0%, #e9b949 22%, #fff3c4 32%, #e9b949 42%, #c9922e 70%, #ffe9a3 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(233,185,73,.25)); animation: brand-shine 7s ease-in-out infinite; }
.brand-w { font-size: 1.08em; }
@keyframes brand-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .brand-word { animation: none; } }
@media (max-width: 760px) { .brand { display: flex !important; } .brand-word { display: none; } .brand-mark { width: 30px; height: 30px; } }
/* welcome screen */
.welcome { max-width: 860px; margin: 0 auto; }
.welcome-hero { text-align: center; padding: 6px 0 10px; }
.welcome-mark { width: 92px; height: 92px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(241,213,138,.5), 0 0 34px rgba(233,185,73,.35); }
.welcome-title { display: block; font-size: clamp(38px, 7vw, 64px); margin: 12px 0 4px; }
.welcome-tag { font-size: clamp(17px, 2.4vw, 21px); color: var(--text); opacity: .9; margin: 0; font-style: italic; }
.welcome-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.welcome-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(241,213,138,.18); }
.welcome-step .ws-icon { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(241,213,138,.22), rgba(0,0,0,.25)); border: 1px solid rgba(241,213,138,.35); font-size: 30px; }
.welcome-step .ws-icon img { width: 52px; height: 52px; }
.welcome-step h3 { margin: 2px 0 6px; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.welcome-step p { margin: 0; font-size: 16.5px; line-height: 1.5; }
.ws-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 14px/1 var(--font-display, serif);
  background: var(--brass); color: #1f1606; flex: none; }
.welcome kbd, .rules-text kbd { display: inline-block; min-width: 1.4em; padding: 0 6px; border: 1px solid var(--brass); border-bottom-width: 2px;
  border-radius: 5px; font-weight: 700; text-align: center; background: rgba(233,185,73,.12); }
.welcome-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.welcome-menu button.big { font-size: 18px; padding: 14px 18px; border-radius: 12px; }
.welcome-menu button.primary { grid-column: 1 / -1; font-size: 20px; }
.welcome-menu small { font-size: 13px; opacity: .75; margin-left: 6px; font-weight: 600; }
.welcome-foot { text-align: center; margin: 14px 0 0; }
button.link { background: none !important; border: none !important; color: var(--brass-hi); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rules-text { font-size: 16.5px; line-height: 1.65; max-width: 78ch; margin: 0 auto; }
.rules-text h2 { font-size: 28px; }
.rules-text li { margin: 6px 0; }
.rules-text p { margin: 0 0 14px; }
@media (max-width: 640px) { .welcome-steps { grid-template-columns: 1fr; } .welcome-step p { font-size: 16px; } }
/* hide helper bubbles whenever a window is open */
body:has(#modalWrap:not(.hidden)) .unit-prompt { display: none; }
.welcome-menu button.primary small { color: #3a2a08; opacity: .8; }
@media (max-width: 640px) {
  .welcome { display: flex; flex-direction: column; }
  .welcome-menu { order: 1; margin-top: 14px; }
  .welcome-foot { order: 2; }
  .welcome-steps { order: 3; gap: 10px; margin: 18px 0 0; }
  .welcome-mark { width: 72px; height: 72px; }
  .welcome-step { padding: 12px; gap: 12px; }
  .welcome-step .ws-icon { width: 48px; height: 48px; } .welcome-step .ws-icon img { width: 42px; height: 42px; }
  .welcome-step h3 { font-size: 17px; }
}
.soon { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--brass); color: #1f1606; font-size: .8em; letter-spacing: .04em; }
.soon-banner { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--brass); background: rgba(233,185,73,.1); font-size: 16px; margin-bottom: 12px; }
.pass-track.preview { opacity: .75; }
#btnMenu { order: -1; font-weight: 700; }
#topbar #btnMenu { border-color: var(--brass); }
.tut-note { margin: 8px 0 0; font-size: 13px; color: var(--brass-hi); }
/* keep every top-bar button on screen: labels drop away before anything overflows */
@media (max-width: 1720px) and (min-width: 761px) {
  #topbar { gap: 10px; }
  #topbar > button:not(#btnMenu):not(#btnResearch) .lbl { display: none; }
  #topbar > button:not(#btnMenu):not(#btnResearch) { padding: 6px 9px; font-size: 18px; }
  #stats { gap: 8px; }
}
@media (max-width: 1440px) and (min-width: 761px) { #turnInfo { display: none; } .brand-word { font-size: 19px; } }
@media (max-width: 1100px) and (min-width: 761px) { .brand-word { display: none; } #btnResearch small { display: none; } }
.bug-form textarea { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.welcome-beta { text-align: center; margin: 10px 0 0; font-size: 15px; opacity: .9; }
.welcome-beta button.link { font-size: 15px; }
@media (max-width: 640px) { .welcome-beta { order: 2; } }
/* sign-up: opt-in checkbox and the required-registration header */
label.check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; cursor: pointer; }
label.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--brass); }
.muted.small { font-size: 13px; }
.acct-form a, #modal a { color: var(--brass-hi); }
.welcome-hero.gate { padding-bottom: 0; }
.welcome-hero.gate .welcome-mark { width: 72px; height: 72px; }
.welcome-hero.gate .welcome-title { font-size: clamp(32px, 6vw, 48px); }
.welcome-hero.gate + .m-head { margin-top: 14px; }
/* text size setting (☰ Menu → Text size): scales the interface, not the map */
#log, #advisor, #selpanel, #citypanel, #corner, #modal, #toasts, .unit-prompt, #tooltip { zoom: var(--ui-zoom, 1); }
#topbar { zoom: calc(1 + (var(--ui-zoom, 1) - 1) * 0.5); } /* the top bar grows half as much so it still fits */
@media (max-width: 1720px) and (min-width: 761px) { html.text-xl .brand-word { display: none; } }
@media (max-width: 1500px) and (min-width: 761px) { html.text-large .brand-word, html.text-xl #btnResearch small { display: none; } }
.ok { color: #6fd18a; font-weight: 700; }
details.danger-zone { margin-top: 18px; border: 1px solid rgba(239,90,76,.4); border-radius: 10px; padding: 8px 12px; }
details.danger-zone summary { cursor: pointer; color: #ef8a7c; font-weight: 700; }
button.danger { border-color: rgba(239,90,76,.6) !important; color: #ffb3a8; }