:root{
 --paper:#f4ead2;--paper-2:#ebdcb8;--ink:#3b2c1c;--muted:#6f5c42;--line:#b89f74;
 --accent:#8e2a22;--accent-ink:#fbf3e0;--gold:#c99a2e;--ok:#3f7a46;--warn:#a5492a;
 --roman:Cinzel,"Trajan Pro","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;color:var(--ink);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at center,#f1e4c4 0%,#e3d0a6 70%,#d4bd8e 100%) fixed}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--paper-2);border-radius:6px;padding:.35rem .7rem}
button:hover:not(:disabled){border-color:var(--muted)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:linear-gradient(#a33a2f,var(--accent));color:var(--accent-ink);border:1px solid var(--gold);box-shadow:inset 0 0 0 1px #5e1a14;font-weight:bold;font-family:var(--roman);letter-spacing:.05em}
button.ghost{background:transparent}
button.small{padding:.1rem .45rem;font-size:.85rem}
h1{font-family:var(--roman);font-size:1.5rem;letter-spacing:.3em;text-transform:uppercase;margin:0;color:var(--accent);text-shadow:0 1px 0 #fbf3e0}
h2{font-family:var(--roman);font-size:.95rem;font-variant:small-caps;margin:0 0 .5rem;padding-bottom:.25rem;letter-spacing:.08em;border-bottom:1px solid var(--line)}
small,.muted{color:var(--muted)}

.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;padding:.6rem 1rem;border-bottom:3px double var(--ink);background:linear-gradient(#efe1bf,#e4d2a8)}
.turn{font-size:.95rem}
.turn .dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;vertical-align:-.05rem;margin:0 .1rem}
.stocks{display:flex;gap:1rem;margin-left:auto}
.stock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.stock b{font-size:1.1rem}
.stock small{font-size:.75rem}
.stock .neg{color:var(--warn)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1rem;padding:1rem;align-items:start}
.board-wrap{position:relative;background:#e6d5ae;border:1px solid var(--ink);border-radius:3px;padding:.5rem;box-shadow:0 6px 18px rgba(60,40,15,.35),inset 0 0 0 4px #efe2c2,inset 0 0 0 5px var(--line)}
#board{display:block;width:100%;height:auto;user-select:none}
.stage{position:relative}
#scene{display:none;width:100%;height:auto;aspect-ratio:1100/680;background:radial-gradient(ellipse at 50% 45%,#5bb2bf 0%,#3d8fa0 75%,#2f7584 100%);border-radius:2px}
.scene3d #scene{display:block}
.scene3d #board{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.scene3d #board.dragging{cursor:grabbing}
.scene3d #board .tile:hover .hex{fill-opacity:.16}
.view-tools{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem}
.view-tools button{background:rgba(244,234,210,.92)}
.board-wrap:not(.scene3d) .view-tools button:not(#view-toggle){display:none}
#board .tile{cursor:pointer}
#board .tile:hover .hex{filter:brightness(1.08)}
.caption{min-height:2.6rem;margin-top:.5rem;padding:.45rem .7rem;background:var(--paper);border:1px solid var(--line);border-radius:3px;font-size:.95rem}
.caption:empty{display:none}
.banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;border-left:6px solid var(--who);padding-left:.6rem}
.banner .who{font-weight:bold;color:var(--who);font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em}
.banner .what{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 .45rem}
.banner .body{flex-basis:100%}
.timeline{max-height:18rem;overflow:auto}
.timeline .step{display:flex;gap:.45rem;align-items:baseline;padding:.2rem .3rem;border-radius:5px;font-size:.88rem}
.timeline .step .dot{width:.65rem;height:.65rem;border-radius:50%;flex:none}
.timeline .step small{color:var(--muted)}
.timeline .step.done{opacity:.55}
.timeline .step.current{background:var(--paper);outline:2px solid var(--muted);font-weight:bold}
.timeline .step.failed span{text-decoration:line-through;text-decoration-thickness:1px}
#board .pop{animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#board .pop.fade{animation:pop .25s ease-out,fadeaway 1.3s ease-in .8s forwards}
@keyframes fadeaway{to{opacity:0;transform:translateY(-6px)}}

.side{display:flex;flex-direction:column;gap:.8rem}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:.7rem .8rem;box-shadow:0 2px 6px rgba(60,40,15,.18),inset 0 0 0 3px #f8f0dc,inset 0 0 0 4px #e2cfa6}
.panel:empty{display:none}
.panel h2{display:flex;justify-content:space-between;align-items:baseline}
.panel ol,.panel ul{margin:0;padding:0;list-style:none}

.order{display:flex;gap:.5rem;align-items:center;padding:.25rem 0;border-bottom:1px dashed var(--line)}
.order:last-child{border-bottom:0}
.order .num{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.75rem;display:grid;place-items:center;flex:none}
.order .text{flex:1}
.order.bad .text{color:var(--warn)}
.forecast{color:var(--ok)}
.forecast.bad{color:var(--warn);font-weight:bold}
.order .placed{min-width:2.2rem;text-align:center;color:var(--accent)}
.turn .phase{font-family:var(--roman);font-variant:small-caps;color:var(--accent);font-weight:bold}
.neg{color:var(--warn)}
.orders-actions{display:flex;gap:.5rem;margin-top:.6rem}
.orders-actions .primary{flex:1}

.facts{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;font-size:.92rem;margin:.2rem 0 .6rem}
.facts dt{color:var(--muted)}.facts dd{margin:0}
.builds{display:flex;flex-direction:column;gap:.35rem}
.levy{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.5rem}
.levy input{width:3.5rem}
.levy button{flex:1;display:flex;justify-content:space-between;gap:.4rem}
.levy button small{color:inherit;opacity:.8}
.builds button{text-align:left;display:flex;justify-content:space-between;gap:.5rem}
.builds button small{color:inherit;opacity:.8}

.empire{display:flex;align-items:center;gap:.5rem;padding:.2rem 0;font-size:.92rem}
.empire.dead{opacity:.45;text-decoration:line-through}
.empire .dot{width:.8rem;height:.8rem;border-radius:50%;flex:none}
.empire .name{flex:1}
.trade{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.4rem 0}
.trade input{width:3.5rem}
.diplo-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.2rem 0}

#log .entry{font-size:.85rem;padding:.12rem 0;border-bottom:1px dotted var(--line)}
#log .entry span{color:var(--muted);margin-right:.4rem}
#log{max-height:14rem;overflow:auto}

dialog{border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);max-width:min(36rem,calc(100vw - 2rem));padding:1.2rem}
dialog::backdrop{background:rgba(30,20,10,.55)}
.nations{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;border:0;padding:0;margin:0 0 1rem}
.nations legend{margin-bottom:.4rem;color:var(--muted)}
.nation-card{display:flex;align-items:center;gap:.5rem;border:2px solid var(--line);border-radius:8px;padding:.5rem;cursor:pointer}
.nation-card:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.nation-card input{accent-color:var(--accent)}
.nation-card .dot{width:1rem;height:1rem;border-radius:50%}
.row{display:flex;flex-wrap:wrap;gap:1rem}
.row label{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem}
.row input{width:8rem}
.actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}
.online-box{margin-top:1.4rem;padding-top:.8rem;border-top:1px solid var(--line)}
.online-box .row input,#join .row input{width:16rem}
.invite{display:flex;gap:.4rem;margin:.4rem 0 .8rem}
.invite input{flex:1;min-width:0;font-size:.8rem}
.players{margin:.4rem 0 .8rem}
.players li{display:flex;gap:.45rem;align-items:center;padding:.15rem 0}
.players .dot{width:.75rem;height:.75rem;border-radius:50%;flex:none}
.players .state{margin-left:auto;font-size:.85rem;color:var(--muted)}
.players .state.ok{color:var(--ok);font-weight:bold}
.nation-pick{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 .8rem}
.host-settings{display:grid;grid-template-columns:auto 1fr;gap:.35rem .6rem;align-items:center;margin:.4rem 0}
.host-settings input,.host-settings select{width:100%}
.clock{font-family:var(--roman);font-weight:bold;color:var(--accent)}
.offline{color:var(--warn);font-weight:bold}
.sound-row{display:grid;grid-template-columns:12rem 1fr;align-items:center;gap:.8rem;margin:.6rem 0}
.sound-row input{width:100%;accent-color:var(--accent)}
.sound-check{display:flex;gap:.5rem;align-items:center;margin-top:.8rem}
@media (max-width:560px){.sound-row{grid-template-columns:1fr}}

@media (max-width:960px){
 .layout{grid-template-columns:1fr;padding:.6rem}
 .stocks{margin-left:0}
}