/* Seven Wonders — illuminated tabletop and icon language.
   Engine-pinned source icons are loaded from /assets/generic; the color belongs
   to this game, not to the shared neutral SVGs. */
.game-symbol {
  --symbol-fill:#668b9b;--symbol-ink:#233c47;
  box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  padding:3px 7px;min-height:30px;min-width:30px;
  vertical-align:middle;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--symbol-fill) 78%,black);
  border-radius:5px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--symbol-fill) 60%,white),var(--symbol-fill));
  box-shadow:inset 0 1px 0 #ffffff6b,0 1px 2px #18252c26;
  color:var(--symbol-ink);
  font:800 15px/1.1 Ubuntu,Arial,sans-serif;
}
.game-symbol svg{display:block;flex:0 0 auto;width:19px;height:19px;stroke-width:2.5}
.game-symbol b{font-variant-numeric:tabular-nums;line-height:1}
.game-symbol.small{padding:2px 4px;min-height:23px;min-width:23px;gap:2px;border-radius:4px;font-size:12px}
.game-symbol.small svg{width:17px;height:17px}
.game-symbol.res-wood{--symbol-fill:#d18c4d;--symbol-ink:#532a10}
.game-symbol.res-stone{--symbol-fill:#aabac5;--symbol-ink:#294050}
.game-symbol.res-clay{--symbol-fill:#d9825e;--symbol-ink:#5d2b17}
.game-symbol.res-ore{--symbol-fill:#8a9eb2;--symbol-ink:#253c54}
.game-symbol.res-glass{--symbol-fill:#83cee0;--symbol-ink:#155467}
.game-symbol.res-cloth{--symbol-fill:#d3a2db;--symbol-ink:#632e69}
.game-symbol.res-papyrus{--symbol-fill:#e5cf87;--symbol-ink:#74501c}
.game-symbol.symbol-coin{--symbol-fill:#eac66c;--symbol-ink:#64410f}
.game-symbol.symbol-shield{--symbol-fill:#df8178;--symbol-ink:#6a2423}
.game-symbol.symbol-points{--symbol-fill:#a0caeb;--symbol-ink:#254b6e}
.game-symbol.science-tablet{--symbol-fill:#bad4a7;--symbol-ink:#356036}
.game-symbol.science-gear{--symbol-fill:#83ceaf;--symbol-ink:#1c624d}
.game-symbol.science-compass{--symbol-fill:#99d4c5;--symbol-ink:#1e6b5c}
.game-symbol.type-brown{--symbol-fill:#dba16c;--symbol-ink:#623413}
.game-symbol.type-grey{--symbol-fill:#bfc5d0;--symbol-ink:#384759}
.game-symbol.type-blue{--symbol-fill:#95c8e7;--symbol-ink:#245375}
.game-symbol.type-yellow{--symbol-fill:#f0d48d;--symbol-ink:#77521d}
.game-symbol.type-red{--symbol-fill:#e79a92;--symbol-ink:#842f2d}
.game-symbol.type-green{--symbol-fill:#b4dba7;--symbol-ink:#356333}
.game-symbol.type-purple{--symbol-fill:#d4aedb;--symbol-ink:#663873}
.game-symbol.symbol-type{border-radius:5px}
.materials{display:inline-flex;align-items:center;gap:4px;justify-content:center;flex-wrap:wrap}
.materials .free{display:inline-block;padding:4px 5px;color:inherit;opacity:.67}
.materials.small{gap:2px}
.button-icon{width:19px;height:19px;vertical-align:middle;flex:0 0 auto}
.decision-dock button,.military-summary button,.finish button,.discard-selection button,.wonder-side-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.decision-dock button svg,.military-summary button svg,.finish button svg,.discard-selection button svg{width:19px;height:19px}

/* The book's categories read as individual illustrated card families rather than
   repeated text on beige rectangles. */
.wonder-card {
 --card-motif:#8c795d;
 --card-pale:#f2e1c6;
 --card-ink:#243943;
 --xg-effect-accent:var(--card-motif);
}
.wonder-card.color-brown{--card-motif:#985e38;--card-pale:#f1d6b2;--card-bg:#ead5b7;--card-edge:#95572d}
.wonder-card.color-grey{--card-motif:#637786;--card-pale:#e1e5e9;--card-bg:#e0e2df;--card-edge:#687885}
.wonder-card.color-blue{--card-motif:#367fa2;--card-pale:#e3f0f7;--card-bg:#d5e9f3;--card-edge:#367fa2}
.wonder-card.color-yellow{--card-motif:#b58634;--card-pale:#fff0bd;--card-bg:#f3e5bd;--card-edge:#b58c39}
.wonder-card.color-red{--card-motif:#ab514c;--card-pale:#f9dfd6;--card-bg:#f0d8d0;--card-edge:#aa5552}
.wonder-card.color-green{--card-motif:#48866b;--card-pale:#e2f2d9;--card-bg:#dfebd7;--card-edge:#4a8464}
.wonder-card.color-purple{--card-motif:#90589b;--card-pale:#efdef4;--card-bg:#ecdceb;--card-edge:#94649b}
.wonder-card.xg-card{
 border-width:2px;outline-offset:2px;
 background:var(--card-bg);
 box-shadow:0 6px 0 #09192237,0 10px 22px #101f2c2a;
}
.wonder-card .xg-preset--effect{background:linear-gradient(172deg,var(--card-pale),var(--card-bg) 64%)}
.wonder-card .xg-effect__header{display:flex;align-items:flex-start;gap:5px}
.wonder-card .xg-effect__title{
 display:flex;align-items:flex-start;gap:5px;min-width:0;
}
.wonder-card .xg-effect__title>.game-symbol{margin-top:0;flex:0 0 auto}
.wonder-card .xg-effect__title-text{min-width:0;color:#233443;font-size:clamp(13px,1.06vw,16px);line-height:1.13}
.wonder-card .xg-effect__type{font-size:12px;letter-spacing:.025em;text-transform:uppercase;font-weight:800;color:var(--card-motif)}
.wonder-card .xg-effect__cost{padding:2px;min-height:29px;background:#fff4dfba;border-color:var(--card-edge)}
.wonder-card .xg-effect__cost .materials{max-width:73px;justify-content:flex-end}
.wonder-card .xg-effect__cost .game-symbol.small{padding:1px 2px;min-width:19px;min-height:19px}
.wonder-card .xg-effect__cost .game-symbol.small svg{width:15px;height:15px}
.wonder-card .xg-effect__rules{font-size:12px;line-height:1.23;color:#293b42}
.wonder-card .xg-effect__art{
 position:relative;display:grid;place-items:center;
 border:1px solid color-mix(in srgb,var(--card-motif) 58%,transparent);
 background:
   radial-gradient(circle at 50% 44%,#fffef5c0 0%,transparent 48%),
   repeating-linear-gradient(135deg,transparent 0 24px,#ffffff12 24px 25px),
   linear-gradient(146deg,color-mix(in srgb,var(--card-motif) 30%,white),var(--card-motif));
 min-height:64px;
}
.card-medallion{
 width:100%;height:100%;display:grid;place-items:center;position:relative;
}
.card-medallion:before{position:absolute;content:"";width:65px;height:65px;border:2px solid #ffffffe8;border-radius:50%;box-shadow:0 0 0 5px #ffffff29}
.card-medallion:after{position:absolute;content:"";width:90px;height:47px;border-top:1px solid #ffffffa5;border-bottom:1px solid #ffffffa5;transform:rotate(-28deg)}
.card-medallion-icon{position:relative;z-index:1;width:54px;height:54px;stroke-width:2.3;color:#193c47;filter:drop-shadow(0 1px 0 #ffffffad)}
.wonder-card .xg-effect__icons{gap:3px;min-height:23px}
.power-icons{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.power-icons .game-symbol.small{min-height:24px;min-width:24px}
.power-special{height:21px;width:21px;color:var(--card-motif)}
.production-choice{display:inline-flex;align-items:center;gap:2px}
.production-or{font-size:12px;font-weight:800;color:#627277}
.power-separator{color:#6b777c}
.wonder-card.selected.xg-card{box-shadow:0 5px 0 #1d343e,0 0 0 3px #f1cb84,0 0 22px #f1bb7763}
.hand-cards button:hover,.hand-cards button:focus-visible{transform:translateY(-8px)}
.hand-cards .wonder-card.selected{transform:translateY(-7px)}
.wonder-card:focus-visible,.wonder-side-toggle:focus-visible{outline:3px solid #efc171;outline-offset:2px}
@media(min-width:1500px){.hand-cards .wonder-card.xg-card{--xg-card-width:170px}}

/* A built card becomes a colored ledger entry, keeping every civilization's
   seven families visible without wasting vertical space on empty card faces. */
.city-groups{gap:8px}
.building-group{--family:#bb9162}
.building-group.color-brown{--family:#d59b6b}
.building-group.color-grey{--family:#a6b6c2}
.building-group.color-blue{--family:#78b8dd}
.building-group.color-yellow{--family:#e5c47c}
.building-group.color-red{--family:#df8f8b}
.building-group.color-green{--family:#94c992}
.building-group.color-purple{--family:#c897ce}
.group-name{display:flex;align-items:center;gap:4px;white-space:normal;min-height:25px;color:var(--family);font-size:12px}
.group-name .game-symbol{flex:0 0 auto}
.built-piece{display:flex;align-items:center;gap:5px;min-height:43px;padding:5px 6px;border:1px solid #6b8990;border-left:3px solid var(--family);background:#243a43;box-sizing:border-box}
.built-piece>.game-symbol{flex:0 0 auto}
.built-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font:700 12px/1.18 Ubuntu,Arial,sans-serif;color:#f0e1c5}
.building-stack{min-height:115px}
.empty-building{height:68px;border-style:dotted;background:#22394145;color:#789097}
.built-piece:hover{background:#2b4650;outline:1px solid var(--family)}

/* Coins, military and stage progress become a compact, recognizable ledger. */
.seat{border-left:3px solid #7e9695}
.seat.own{border-left-color:#f4cd87}
.seat.neighbor{border-left-color:#d69f72}
.seat-ledger{display:flex;align-items:center;gap:5px;margin:8px 0;flex-wrap:wrap}
.stage-ledger{display:inline-flex;align-items:center;gap:4px;min-height:23px;padding:2px 5px;background:#36535d;border:1px solid #6e8e95;border-radius:4px;color:#f7e0b4;font-size:12px}
.stage-ledger svg{width:18px;height:18px}
.seat-types{gap:4px}
.seat-types .type{display:inline-flex;align-items:center;gap:3px;padding:0 3px;background:#28414b;border:1px solid #526a70;border-radius:3px}
.seat-types .game-symbol{border:0;padding:2px;min-height:19px;min-width:19px}
.seat-types .game-symbol svg{height:15px;width:15px}

/* Wonder stage powers have the same pictograms as hand cards; the built state
   stays readable in silhouette and structure as well as color. */
.wonder-heading{align-items:center;flex-wrap:wrap;row-gap:8px}
.origin{display:inline-flex;align-items:center;margin-left:auto}
.origin>.game-symbol{min-width:35px;min-height:35px}
.wonder-stage{gap:9px;padding:12px 10px 9px;min-height:145px}
.wonder-stage.built{background:linear-gradient(145deg,#2f5651,#526b58);border-color:#568572;color:#fff2d2}
.wonder-stage.built .stage-status{color:#c9f1c2}
.wonder-stage.next{background:linear-gradient(145deg,#f7e2b8,#d8b680)}
.stage-power{display:flex;align-items:center;justify-content:center;align-content:center;gap:5px;flex-wrap:wrap;width:100%;min-height:32px;font-family:Ubuntu,Arial,sans-serif}
.stage-ability{display:inline-flex;align-items:center;gap:4px;border:1px solid #846d4b;background:#fbebc4;color:#714b25;padding:4px;font:800 12px/1.2 Ubuntu,Arial,sans-serif;letter-spacing:.01em}
.stage-ability svg{width:19px;height:19px}
.wonder-stage.built .stage-ability{background:#e1d2a9;color:#604722}
.stage-no-power{color:#6a7267}
.stage-status{letter-spacing:.08em}

/* Actions and outcomes carry clear silhouettes and color when visual scanning. */
.decision-dock button.primary{background:#d8b077}
.decision-dock button.wonder-action{background:#376e78;border-color:#77b4b7}
.decision-dock button.secondary{background:#664e49;border-color:#b08877}
.decision-dock button:hover,.decision-dock button:focus-visible{filter:brightness(1.13)}
.reveal-chip{display:inline-flex;align-items:center;gap:6px;border-left:3px solid #ceab74}
.reveal-chip svg{width:18px;height:18px}
.reveal-chip.reveal-build{border-left-color:#7fb99c}
.reveal-chip.reveal-wonder{border-left-color:#efc78a}
.reveal-chip.reveal-discard{border-left-color:#c99280}
.age-band{border-bottom:1px solid #567177}
.age-tab.active{background:#d8b477;color:#203a44}
.finish h1:before{content:"✦";display:block;font-size:34px;color:#edca85;padding-bottom:14px}
.score-table th{vertical-align:bottom}
.score-table th svg{display:inline-block;vertical-align:middle;width:19px;height:19px;margin-right:4px}
.score-table td:nth-child(2){color:#e7c793}
.score-table td:nth-child(3){color:#f3d184}
.score-table td:nth-child(4){color:#f0a59e}
.score-table td:nth-child(5){color:#9bcce5}
.score-table td:nth-child(6){color:#a2d2ae}
.score-table td:nth-child(7){color:#ebcd8a}
.score-table td:nth-child(8){color:#d7b1df}
.score-table tr.winner{background:linear-gradient(90deg,#4c6550,#2b4649)}
@media(max-width:1250px){
 .group-name{font-size:0}
 .group-name .game-symbol{font-size:12px}
 .city-groups{gap:5px}
 .built-piece{padding:4px;gap:3px}
 .built-piece>.game-symbol{display:none}
 .built-name{font-size:12px}
 .card-medallion-icon{width:44px;height:44px}
 .card-medallion:before{width:54px;height:54px}
 .wonder-card .xg-effect__cost .materials{max-width:58px}
}
@media(prefers-reduced-motion:reduce){.wonder-card,.game-symbol{transition:none!important}}


/* Seven distinct architectural crests, with an identity carried onto the
   mineral relief of the Wonder board. The symbols always retain a shape
   independent of the palette. */
.wonder-board{--wonder-accent:#4b7787}
.wonder-board[data-wonder="alexandria"]{--wonder-accent:#277b9c}
.wonder-board[data-wonder="babylon"]{--wonder-accent:#7863a2}
.wonder-board[data-wonder="ephesus"]{--wonder-accent:#4b8d67}
.wonder-board[data-wonder="gizah"]{--wonder-accent:#aa7140}
.wonder-board[data-wonder="halikarnassos"]{--wonder-accent:#4a9694}
.wonder-board[data-wonder="olympia"]{--wonder-accent:#a67d38}
.wonder-board[data-wonder="rhodos"]{--wonder-accent:#ac594e}
.wonder-board{border-top:4px solid var(--wonder-accent)}
.wonder-board.night{border-top-color:var(--wonder-accent)}
.wonder-heading .overline{font-size:11px;letter-spacing:.12em;font-weight:800}
.wonder-crest{
 width:50px;height:50px;flex:0 0 auto;display:grid;place-items:center;
 color:#fcf0cc;background:linear-gradient(160deg,var(--wonder-accent),#243d49);
 border:2px solid #efd2a0;box-shadow:0 3px 0 #273c4261,0 0 0 2px #ffffff30;
 border-radius:50%;
}
.wonder-crest svg{width:31px;height:31px;stroke-width:2.2}
.wonder-heading h1{text-shadow:0 1px 0 #ffebc978;white-space:nowrap}
.wonder-side-toggle{font-size:12px;min-height:37px}
.wonder-stage.built{position:relative}
.wonder-stage.built:after{
 content:"";position:absolute;right:7px;top:7px;width:9px;height:9px;
 background:#c1e9b0;border:2px solid #395d44;transform:rotate(45deg);
}
.wonder-stage.next{border-color:var(--wonder-accent)}
.victory-banner{
 display:flex;align-items:center;justify-content:center;gap:12px;
 padding:14px 22px;margin:0 0 26px;
 border-top:2px solid #eac882;border-bottom:2px solid #b79b64;
 background:linear-gradient(90deg,transparent,#d7bb7740 22%,#ecce8445 50%,#d7bb7740 78%,transparent);
 font:800 clamp(16px,2vw,24px)/1.25 Cinzel,Georgia,serif;color:#f4dbab;
}
.victory-banner svg{width:35px;height:35px;color:#eed38a;flex:0 0 auto}
.reveal-chip{animation:reveal-lit .28s cubic-bezier(.2,.65,.2,1) both}
@keyframes reveal-lit{
 from{opacity:0;transform:translateY(7px);filter:brightness(1.35)}
 to{opacity:1;transform:translateY(0);filter:brightness(1)}
}
@media(max-width:1250px){
 .wonder-crest{width:41px;height:41px}
 .wonder-crest svg{width:26px;height:26px}
 .wonder-heading h1{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 .reveal-chip{animation:none}
}

/* Teaching aid lives in Rules, not in the active tabletop. */
.icon-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin:8px 0 14px}
.legend-entry{display:flex;align-items:center;gap:8px;min-height:32px;font-size:14px;font-weight:700;color:#283e47}
.legend-entry .game-symbol{flex:0 0 auto}
.art-credits{font-size:12px;color:#52636a}
.art-credits a{color:#125c85}