@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  font-family:Inter,system-ui,sans-serif;color:#f4e8d1;background:#14252c;
  --session-bg:#10242c;--session-color:#f1e5c6;--session-accent:#d8b27b;--session-border:#40535a;
  --session-background:#10242c;--session-text:#f1e5c6;--session-muted:#c6bca9;--session-control-bg:#213943;--session-control-border:#576c73;
  --card-bg:#f5e6cd;--card-edge:#a88459;--card-text:#223239;
}
*{box-sizing:border-box}
body{margin:0;min-width:1024px;color:#ecdfc8;background:
 radial-gradient(ellipse at 50% 10%,#3d5c65 0,transparent 42%),
 radial-gradient(ellipse at 0% 80%,#2a3939 0,transparent 48%),#11242c}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #f6c27f;outline-offset:3px}
#shell{margin:0 auto;max-width:1920px;padding:22px clamp(22px,3vw,55px) 38px}
#lobby{max-width:1180px;margin:3vh auto}
#notice:not([hidden]){padding:12px 18px;background:#8e473c;color:white;margin:0 0 16px;font-size:14px}
/* The shared lobby is transparent against this game's dark table. Keep its
   text and controls on a dark palette, including the separately mounted dialog. */
.games-lobby-shell,.games-lobby-dialog,.games-spectator-toolbar{
 --surface:#18323b;
 --surface-soft:#2c4650;
 --ink:#f6ebd6;
 --muted:#c1d0d0;
 --border:#66818a;
 --action:#edc687;
 --action-ink:#1e333b;
}
.games-lobby-shell .games-lobby-header h1,
.games-lobby-shell .games-lobby-directory-header h2,
.games-lobby-shell .games-lobby-room-info strong{color:var(--gl-ink)}
.games-lobby-shell .games-lobby-eyebrow{color:#f2ce8f}
.games-lobby-shell .games-lobby-directory,
.games-lobby-shell .games-lobby-room{border-color:var(--gl-border)}
.games-lobby-shell .games-lobby-primary,.games-lobby-dialog .games-lobby-primary{
 background:var(--gl-action);color:var(--gl-action-ink);
}
.games-lobby-shell .games-lobby-secondary,.games-lobby-dialog .games-lobby-secondary{
 background:var(--gl-soft);color:var(--gl-ink);
}
.games-lobby-shell{box-shadow:none}
.games-lobby-shell:has(.games-lobby-directory)::before{
 content:"";display:block;min-height:250px;margin-bottom:24px;border:1px solid #bb9864;
 background:linear-gradient(0deg,#10242bd9,transparent 72%),radial-gradient(ellipse at 45% 122%,#dbb67b 0,#927d60 27%,transparent 28%),
 linear-gradient(154deg,#153947 10%,#41616a 48%,#ac8f64 49%,#344a50 80%);position:relative}
#room-controls{display:none}
.wonders-table{width:100%;min-height:800px}
.age-band{display:flex;justify-content:space-between;align-items:center;min-height:61px;border-bottom:1px solid #587078;margin-bottom:19px;gap:20px}
.age-tabs{display:flex;gap:30px;align-items:center}
.age-tab{font-family:Cinzel,Georgia,serif;font-weight:600;letter-spacing:.11em;color:#92a8a8;font-size:15px;min-width:100px;padding:16px 0 13px;text-align:center}
.age-tab.active{font-weight:700;color:#f5d59b;border-bottom:3px solid #ddb176}
.age-tab.passed{color:#9caeac;opacity:.75}
.draft-step,.overline{font-size:12px;font-weight:800;letter-spacing:.15em;color:#d2bd98}
.game-grid{display:grid;grid-template-columns:clamp(245px,21vw,296px) minmax(0,1fr);gap:clamp(18px,2.5vw,36px);align-items:start}
.region-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.region-heading h2{font:600 17px Cinzel,Georgia,serif;margin:0;color:#e9d6b3}
.faint{font-size:12px;color:#aebcb9}
.players{display:flex;flex-direction:column;gap:7px;min-width:0}
.players>.region-heading{margin-bottom:8px}
.seat{padding:11px 12px;border:1px solid #536a6b;background:#1b333b;min-height:76px}
.seat.neighbor{border-color:#ad9470}
.seat.own{background:#2e4446;border-color:#efc789}
.seat-top{display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden}
.seat-index{flex-shrink:0;background:#3a5559;color:#d4c2a6;font-size:12px;font-weight:800;width:23px;height:23px;display:grid;place-items:center}
.seat-name{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.seat-ready{font-size:12px;color:#a6bbb8;margin-left:auto;font-weight:700}
.seat-ready.done{color:#e4ce96}
.seat-meta{font-variant-numeric:tabular-nums;color:#ded3be;white-space:pre;margin:8px 0 6px;font-size:14px;font-weight:700}
.seat-types{display:flex;flex-wrap:wrap;gap:5px;min-height:18px}
.type{font-size:12px;font-weight:700;line-height:1.3}
.type-brown{color:#e8a77d}.type-grey{color:#d2d1bf}.type-blue{color:#84b6d4}.type-yellow{color:#f0ce8b}
.type-red{color:#e88c80}.type-green{color:#a5d5a0}.type-purple{color:#d7a4d9}
.playing-surface{min-width:0}
.wonder-board{position:relative;min-height:230px;padding:19px 25px 24px;border:1px solid #b28e5d;
 background:linear-gradient(138deg,#e8d2a6f2,#c7ab78f5 45%,#9e865e),repeating-linear-gradient(90deg,transparent 0 120px,#745c4036 121px 122px);
 color:#253b42;overflow:hidden}
.wonder-board:before{position:absolute;inset:0 0 0 auto;width:43%;content:"";
 background:repeating-linear-gradient(70deg,#ae8d6020 0 5px,#ffe9b220 6px 9px);pointer-events:none}
.wonder-heading{display:flex;align-items:baseline;gap:14px;position:relative;margin-bottom:19px}
.wonder-heading .overline{color:#6f573a;white-space:nowrap}
.wonder-heading h1{font:700 clamp(20px,2vw,30px) Cinzel,Georgia,serif;letter-spacing:.075em;margin:0}
.wonder-side-label{font-size:11px;font-weight:800;letter-spacing:.15em;padding:4px 8px;border:1px solid #6f573a;color:#5a4632}
.wonder-side-toggle{background:#304d59;color:#f9e9c7;border:1px solid #304d59;padding:8px 12px;font-size:12px;font-weight:800;border-radius:2px;cursor:pointer;white-space:nowrap}
.wonder-board.night{background:linear-gradient(135deg,#c4bdba,#9f9ca5 50%,#6d777e);border-color:#9cacc3}
.wonder-board.night:before{background:repeating-linear-gradient(70deg,#233c5020 0 5px,#cddbe420 6px 9px)}
.wonder-board.night .wonder-side-label{border-color:#526874;color:#324453}
.origin{margin-left:auto;font-size:27px;font-weight:800;color:#304d59}
.wonder-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;position:relative}
.wonder-stage{min-width:0;min-height:133px;padding:13px 13px 9px;display:flex;flex-direction:column;gap:8px;align-items:center;
 background:#e3cfaa;border:1px solid #8c734d;box-shadow:inset 0 1px 0 #ffedcb}
.wonder-stage.built{background:#56655c;color:#f7dfac;border-color:#677760}
.wonder-stage.next{border:2px solid #294d58;box-shadow:0 0 0 2px #f1ddb5a0,inset 0 1px 0 #f9eccd}
.stage-label,.stage-status{font-size:12px;font-weight:800;letter-spacing:.13em}
.stage-label{opacity:.7}
.stage-power{font:700 19px Cinzel,Georgia,serif;min-height:24px}
.stage-status{margin-top:auto;opacity:.72}
.materials{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.material{font-size:23px;font-weight:800;line-height:1}
.gold{font-weight:800;font-size:13px}
.free{font-size:12px;font-weight:700;opacity:.65}
.built-city{margin-top:22px}
.city-groups{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;min-height:157px}
.building-group{min-width:0}
.group-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px;color:#cfcbbb}
.building-stack{min-height:123px;position:relative;display:flex;flex-direction:column;gap:5px;align-items:stretch}
.empty-building{height:121px;display:grid;place-items:center;color:#7c9091;border:1px dashed #63777a;font-size:24px}
.wonder-card{--card-edge:#b29870;--card-bg:#e9dec4;--card-text:#23353d;display:block;min-width:0;flex-shrink:0;border-radius:3px}
.wonder-card.color-brown{--card-edge:#a26745;--card-bg:#ead1b1}
.wonder-card.color-grey{--card-edge:#889498;--card-bg:#e1e0d8}
.wonder-card.color-blue{--card-edge:#42748b;--card-bg:#d5e5e8}
.wonder-card.color-yellow{--card-edge:#c5a354;--card-bg:#eee0ad}
.wonder-card.color-red{--card-edge:#ad5d57;--card-bg:#f0d6cb}
.wonder-card.color-green{--card-edge:#658760;--card-bg:#d8e6d2}
.wonder-card.color-purple{--card-edge:#987394;--card-bg:#e2d5e2}
.wonder-card.xg-card{--xg-card-radius:4px;--xg-card-aspect:3/4;--xg-card-width:160px;box-shadow:0 5px 0 #10242b33}
.wonder-card .xg-effect__title{font-family:Cinzel,Georgia,serif;font-weight:700;font-size:clamp(13px,1.1vw,16px)}
.wonder-card .xg-effect__rules{font-size:12px;line-height:1.2}
.wonder-card .xg-effect__cost{font-size:12px}
.wonder-card.compact.xg-card{--xg-card-aspect:1/1.05;--xg-card-width:100%;min-width:0;max-width:100%}
.wonder-card.compact .xg-effect__rules{font-size:12px}
.wonder-card.compact .xg-effect__title{font-size:12px}
.wonder-card.compact .xg-effect__icons{display:none}
.hand-area{margin-top:22px;border-top:1px solid #607478;padding-top:17px;min-height:360px}
.hand-cards{display:flex;gap:clamp(7px,1.15vw,16px);overflow-x:auto;align-items:flex-start;min-height:220px;padding:4px 4px 17px;scrollbar-color:#7b8582 transparent}
.hand-cards .wonder-card.xg-card{--xg-card-width:clamp(115px,11vw,159px);flex:0 0 auto;transition:transform .15s ease,box-shadow .15s ease}
.hand-cards button:hover{transform:translateY(-8px)}
.hand-cards .wonder-card.selected{outline:3px solid #f1c67e;outline-offset:2px;transform:translateY(-6px)}
.decision-dock{min-height:96px;border-top:1px solid #425e64;padding:13px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.decision-title{font-size:17px;color:#f8dbab}
.sealed-label{font-weight:800;letter-spacing:.11em;color:#edce93}
.hint{color:#bbc9c2;font-size:14px}
.choice-name{font-size:14px;font-weight:700;color:#f5e1c2;width:100%}
.decision-actions{display:flex;flex-wrap:wrap;gap:9px}
.decision-dock button,.military-summary button,.finish button{border:1px solid #b5a481;border-radius:2px;min-height:42px;padding:9px 15px;background:#33555c;color:#fff1d7;font-size:13px;font-weight:700}
.decision-dock button.primary,.finish button.primary,.military-summary button.primary{background:#e3b977;color:#213d46;border-color:#e3b977}
.decision-dock button.wonder-action{background:#725d40}
.decision-dock button.secondary{background:#2e4247}
.decision-dock button:hover,.finish button:hover,.military-summary button:hover{filter:brightness(1.15)}
.reveal-history{margin-top:18px;border-top:1px solid #48626b;padding-top:12px}
.reveal-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.reveal-chip{padding:8px 11px;border:1px solid #576967;background:#1d353b;color:#ded7bf;font-size:12px}
.discard-selection{margin-top:22px;padding:24px;border:1px solid #b28e5d;background:#223d43}
.discard-selection h2{font:600 24px Cinzel,Georgia,serif;color:#efd69d;margin:6px 0 10px}
.discard-selection p{font-size:14px;color:#e2d6c1;line-height:1.5}
.discard-choices{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 24px;max-height:440px;overflow:auto}
.discard-entry{width:160px;display:flex;flex-direction:column;gap:9px}
.discard-entry button,.discard-selection>button{border:1px solid #b5a481;border-radius:2px;background:#c79b65;color:#1e323a;min-height:42px;padding:9px;font-size:13px;font-weight:700}
.discard-selection>button.secondary{background:#2e4247;color:#fff1d7}
.military-summary{margin-top:25px;padding:23px 28px;border:1px solid #a78a61;background:#284047}
.military-summary h2{font:600 22px Cinzel,Georgia,serif;margin:0}
.military-summary p{font-size:14px;color:#d4c5aa;line-height:1.8}
.spectator-label{padding:35px;color:#c0c8be}
.finish{padding:clamp(35px,6vw,85px) 4vw;max-width:1220px;margin:auto;text-align:center}
.finish h1{font:600 clamp(30px,4vw,55px) Cinzel,Georgia,serif;color:#f8dfa8;margin:8px 0 40px}
.score-table{border-collapse:collapse;width:100%;text-align:left;margin:0 0 35px;font-size:14px;font-variant-numeric:tabular-nums}
.score-table th{text-transform:uppercase;letter-spacing:.08em;color:#c8ba9b;font-size:12px;border-bottom:2px solid #80908c;padding:14px 8px}
.score-table td{border-bottom:1px solid #4d6469;padding:15px 8px}
.score-table td:last-child{font-size:21px;font-weight:800;color:#f4d199}
.score-table tr.winner{background:#425651}
.rules-content{max-width:750px;padding:30px 38px;background:#eae1cf;color:#243a41}
.rules-content header{display:flex;justify-content:space-between;align-items:center}
.rules-content h2,.rules-content h3{font-family:Cinzel,Georgia,serif}
.rules-content p{line-height:1.65}
dialog{border:0;border-radius:4px;box-shadow:0 16px 90px #071c24a8}
dialog::backdrop{background:#081a21aa}
@media(max-width:1250px){#shell{padding:15px 18px}.game-grid{grid-template-columns:240px minmax(0,1fr);gap:16px}.wonder-board{padding:16px}.city-groups{gap:4px}.wonder-card.compact .xg-effect__rules{display:none}.hand-cards{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;scroll-behavior:auto!important}}