/* A public stage for the table; all hidden cards remain outside this module. */
.city-stage { margin: 17px 0; padding: 12px 13px 10px; border: 1px solid #b6bda4; border-radius: 12px; color: #49523e; background: radial-gradient(ellipse at 50% 50%,#f7f1dc 0,#eeecd9 48%,#e0e5d3 100%); box-shadow: inset 0 0 0 4px #f8f6e55e; overflow: hidden; }
.city-stage-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 0 1px; }
.city-stage-kicker { font-size: 9px; letter-spacing: .13em; }
.city-stage-status { font-size: 14px; line-height: 1.35; font-weight: 650; }
.city-stage-count { color: #727765; font-size: 11px; font-variant-numeric: tabular-nums; }
.city-scene { position: relative; display: grid; grid-template-columns: minmax(75px,1fr) minmax(115px,2.3fr) minmax(75px,1fr); align-items: center; height: 188px; margin: 4px 0 0; }
.city-map { position: relative; height: 182px; min-width: 0; }
.city-map-art { position: absolute; width: 100%; height: 100%; overflow: visible; }
.city-stage-depth { --city-ground: #d5d6b6; --city-terrace: #dfdfbd; --city-stone: #c6c8a4; --city-edge: #6d7958; --city-side: #8b9270; --city-wall: #eee2bd; --city-wall-light: #fcf0ce; --city-wall-dark: #a69876; --city-roof: #778d75; --city-roof-dark: #3d5f57; --city-shadow: #343f35; --city-line: #667150; --city-route: #c1b681; --city-flag: #b74b3e; }
.city-map-depth { isolation: isolate; }
.city-ground-shadow { fill: var(--city-shadow); opacity: .2; }
.city-foundation-face { fill: var(--city-edge); stroke: var(--city-line); stroke-width: .65; }
.city-map-depth .city-boundary { fill: var(--city-ground); stroke: var(--city-stone); stroke-width: .6; stroke-dasharray: none; }
.city-foundation-highlight { fill: none; stroke: #fff9db; stroke-width: 1.15; opacity: .65; }
.city-terrace-face { fill: var(--city-edge); stroke: var(--city-line); stroke-width: .85; }
.city-terrace-top { fill: var(--city-terrace); stroke: var(--city-side); stroke-width: .7; }
.city-terrace-rim { fill: none; stroke: #fff4cf; stroke-width: 1.8; stroke-linecap: round; }
.city-terrace-joints { fill: none; stroke: #23362a; stroke-width: .8; opacity: .48; }
.city-terrace:nth-child(even) .city-terrace-top { fill: var(--city-ground); }
.city-map-depth .city-roads { fill: none; stroke: var(--city-route); stroke-width: .75; opacity: .55; }
.city-map-depth .city-ring { fill: none; stroke: var(--city-side); stroke-width: .65; transition: stroke 300ms ease, stroke-width 300ms ease; }
.city-map-depth .city-ring.is-occupied { stroke: var(--city-roof-dark); stroke-width: 1.6; stroke-dasharray: 1.5 2.5; }
.city-plinth-face { fill: var(--city-side); stroke: var(--city-line); stroke-width: .6; }
.city-map-depth .city-inner-square { fill: #e9dcb0; stroke: #fff3cb; stroke-width: 1; }
.city-map-depth .city-citadel { stroke: var(--city-line); stroke-width: .55; stroke-linejoin: round; }
.city-map-depth .city-citadel-shadow { stroke: none; fill: var(--city-shadow); opacity: .2; }
.city-map-depth .city-districts { stroke: var(--city-line); stroke-width: .4; stroke-linejoin: round; }
.city-building-shadow { fill: var(--city-shadow); stroke: none; opacity: .18; }
.city-wall-light { fill: var(--city-wall-light); }
.city-wall-front { fill: var(--city-wall); }
.city-wall-shade { fill: var(--city-wall-dark); }
.city-roof-light { fill: var(--city-roof); }
.city-roof-shade { fill: var(--city-roof-dark); }
.city-battlement { fill: var(--city-wall-light); stroke: var(--city-line); }
.city-map-depth .city-door { fill: #625f49; stroke: #837654; stroke-width: .6; }
.city-map-depth .city-window { fill: none; stroke: #655e45; stroke-width: 1.5; }
.city-map-depth .city-flagpole { stroke: var(--city-line); stroke-width: 1; }
.city-map-depth .city-flag { fill: var(--city-flag); stroke: #783f32; stroke-width: .65; }
.city-flag-glint { fill: none; stroke: #ffe5c2; stroke-width: .6; opacity: .8; }
.city-map-depth .city-throne { stroke: #755428; stroke-width: .65; stroke-linejoin: round; }
.city-throne-aura { fill: #eac269; stroke: none; opacity: .12; }
.city-throne-shadow { fill: #4e432e; stroke: none; opacity: .2; }
.city-dais-face { fill: #7e7050; }
.city-dais-top { fill: #d6c391; }
.city-dais-highlight { fill: none; stroke: #fff0bf; stroke-width: 1; }
.city-throne-carpet { fill: #a64b3d; stroke: #78382c; }
.city-throne-gold { fill: #d7a545; }
.city-throne-side { fill: #8c642a; }
.city-throne-inset { fill: #a44e40; stroke: #f0c86e; stroke-width: 1.25; }
.city-throne-cushion { fill: #cf7560; }
.city-throne-seam { fill: none; stroke: #7c362e; stroke-width: .6; }
.city-throne-highlight { fill: none; stroke: #fff2c1; stroke-width: 1.35; }
.city-throne-jewel { fill: #537466; stroke: #ffec9f; stroke-width: .8; }
.city-throne-finial { fill: #efd286; stroke: #896229; }
.city-stage.is-conquered .city-throne-aura { opacity: .27; }
.city-stage.is-conquered .city-throne-gold { fill: #e1b349; }
.city-map-caption { position: absolute; left: 50%; top: 89%; transform: translateX(-50%); white-space: nowrap; font-size: 8px; font-weight: 650; letter-spacing: .13em; color: #f9f2d8; text-shadow: 0 1px 2px #354336; }
:root[data-theme="neon"] .city-stage-depth { --city-ground: #354a57; --city-terrace: #49606c; --city-stone: #718895; --city-edge: #192936; --city-side: #263c47; --city-wall: #b6c5c9; --city-wall-light: #e0ebdf; --city-wall-dark: #697e8c; --city-roof: #74bbbd; --city-roof-dark: #396574; --city-shadow: #050d19; --city-line: #243b49; --city-route: #5d7b86; --city-flag: #e97996; background: radial-gradient(ellipse at 50% 35%, #304857, #1e2c38); border-color: #476371; color: #d6e4e7; }
:root[data-theme="neon"] .city-map-depth .city-ring.is-occupied { stroke: #8bf0e3; }
:root[data-theme="neon"] .city-stage-depth .city-stage-count,:root[data-theme="neon"] .city-stage-depth .city-stage-note { color: #aec3c8; }
:root[data-theme="neon"] .city-map-depth .city-inner-square { fill: #7d9296; stroke: #aec8c5; }
:root[data-theme="neon"] .city-terrace-rim { stroke: #83bbbc; }
:root[data-theme="neon"] .city-throne-inset,:root[data-theme="neon"] .city-throne-carpet { fill: #545484; }
:root[data-theme="neon"] .city-throne-cushion { fill: #8674aa; }
:root[data-theme="neon"] .city-throne-jewel { fill: #69e9d7; }
:root[data-theme="woodland"] .city-stage-depth { --city-ground: #bbc599; --city-terrace: #ccd1a5; --city-stone: #b9c198; --city-edge: #5f7353; --city-side: #80915f; --city-wall: #d9bd88; --city-wall-light: #f0d7a6; --city-wall-dark: #9b7955; --city-roof: #899365; --city-roof-dark: #536c4d; --city-shadow: #354a33; --city-line: #70664b; --city-route: #b6b785; --city-flag: #bd6947; }

.city-roster { display: flex; flex-direction: column; justify-content: center; gap: 5px; position: relative; z-index: 2; }
.city-roster-left { padding-right: 3px; }
.city-roster-right { padding-left: 3px; }
.city-player { position: relative; display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 5px; border: 1px solid #c2c5ac; border-radius: 6px; background: #f8f6e9e0; transition: border-color 200ms ease, background-color 200ms ease; }
.city-player-number { display: grid; place-items: center; color: #fffbed; background: var(--player-color); border-radius: 50%; width: 17px; height: 17px; flex: 0 0 17px; font-size: 11px; font-weight: 700; box-shadow: 0 1px 2px #35332021; }
.city-player-copy { min-width: 0; flex: 1; }
.city-player-name { font-size: 11px; line-height: 1.25; font-weight: 650; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b4c40; }
.city-player-stats { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; line-height: 1.3; color: #666957; font-variant-numeric: tabular-nums; margin-top: 2px; }
.city-influence { color: var(--player-color); letter-spacing: 1px; font-size: 10px; }
.city-player-turn { position: absolute; right: -3px; top: -5px; color: var(--player-color); font-size: 11px; text-shadow: 0 0 2px #fffbed,0 0 2px #fffbed; }
.city-player.is-current { border-color: var(--player-color); box-shadow: 0 0 0 1px color-mix(in srgb,var(--player-color) 25%,transparent); background: #fffbed; }
.city-player.is-out { background: #e6e7dcbf; opacity: .67; border-style: dashed; }
.city-player.is-out .city-player-number { background: #878977; }
.city-player-stats b { font-size: 10px; font-weight: 650; letter-spacing: .08em; }
.city-token { position: absolute; z-index: 3; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; display: grid; place-items: center; border: 2px solid #fff9e6; outline: 1px solid color-mix(in srgb,var(--player-color) 80%,#fff); border-radius: 50%; background: var(--player-color); color: #fff9e6; box-shadow: 0 3px 0 color-mix(in srgb,var(--player-color) 65%,#242e2d),0 6px 5px #28352845,inset 0 1px 1px #ffffff60; transition: left 1050ms cubic-bezier(.18,.75,.24,1),top 1050ms cubic-bezier(.18,.75,.24,1),opacity 400ms ease,background-color 400ms ease; }
.city-token > span { font-size: 11px; line-height: 1; font-weight: 750; }
.city-token.is-current { box-shadow: 0 0 0 4px color-mix(in srgb,var(--player-color) 22%,transparent),0 3px 0 color-mix(in srgb,var(--player-color) 65%,#242e2d),0 6px 5px #28352845,inset 0 1px 1px #ffffff60; }
.city-token.is-current::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed var(--player-color); opacity: .65; }
.city-token.is-out { z-index: 1; opacity: .45; background: #888b78; box-shadow: none; outline-color: #8f927e; }
.city-token.is-out > span { text-decoration: line-through; }
.city-token.is-winner { width: 33px; height: 33px; margin: -16.5px 0 0 -16.5px; border-color: #fff3bb; outline-color: #a58539; background: #c0953f; box-shadow: 0 0 0 5px #dbbe713b,0 4px 10px #54472c33; }
.city-token.is-winner svg { width: 22px; height: 22px; fill: #fff1b2; stroke: #6f5220; stroke-width: 1.3; display: block; }
.city-stage-note { text-align: center; font-size: 11px; line-height: 1.4; color: #687057; margin: 2px 0 0; }
.city-stage.is-conquered { border-color: #b49a60; background: radial-gradient(ellipse at center,#fff0c3,#eee9d2 60%,#e1e4cf); }
.city-stage.is-conquered .city-stage-kicker { color: #8a6a26; }
.city-player.is-winner { background: #fff2c9; border-color: #b19752; }
.city-stage.is-conquered .city-map-caption { color: #fff1bb; }
@media (min-width: 1000px) { .city-player-name { font-size: 12px; } }
@media (max-width: 760px) {
  .city-stage { padding: 10px 6px 8px; margin: 14px 0; }
  .city-stage-heading { justify-content: center; gap: 3px 10px; }
  .city-stage-kicker { display: none; }
  .city-stage-status { font-size: 13px; }
  .city-scene { grid-template-columns: minmax(62px,1fr) minmax(102px,1.8fr) minmax(62px,1fr); height: 175px; }
  .city-map { height: 167px; }
  .city-roster { gap: 4px; }
  .city-player { min-height: 35px; padding: 3px; gap: 3px; }
  .city-player-number { width: 15px; height: 15px; flex-basis: 15px; font-size: 10px; }
  .city-player-stats { gap: 1px; }
  .city-coins-word { display: none; }
  .city-player-stats > span:first-child::after { content: ' ●'; color: #a17d33; font-size: 9px; }
  .city-stage-note { font-size: 11px; max-width: 290px; margin: 1px auto 0; }
  .city-token { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
  .city-token > span { font-size: 10px; }
  .city-map-caption { font-size: 7px; letter-spacing: .07em; }
  .city-token.is-winner { width: 29px; height: 29px; margin: -14.5px 0 0 -14.5px; }
}
/* In the expanded phone view the board gets a wide plane; rosters sit below it.
   The compact playing surface retains table-layout.css's existing height budget. */
@media (max-width: 760px) {
  #city-modal .city-stage-depth .city-scene,
  #broadcast-city .city-stage-depth .city-scene { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "map map" "left right"; height: auto; row-gap: 12px; column-gap: 10px; margin-top: 10px; }
  #city-modal .city-stage-depth .city-map,
  #broadcast-city .city-stage-depth .city-map { grid-area: map; width: min(100%,320px); height: 185px; max-height: none; margin: 0 auto; }
  #city-modal .city-stage-depth .city-roster-left,
  #broadcast-city .city-stage-depth .city-roster-left { grid-area: left; padding: 0; }
  #city-modal .city-stage-depth .city-roster-right,
  #broadcast-city .city-stage-depth .city-roster-right { grid-area: right; padding: 0; }
  #city-modal .city-stage-depth .city-stage-note,
  #broadcast-city .city-stage-depth .city-stage-note { margin-top: 12px; }
  #city-modal .city-stage-depth .city-map-caption { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .city-stage *, .city-stage *::before, .city-stage *::after { transition: none !important; animation: none !important; }
}
html[data-motion="reduced"] .city-stage *,html[data-motion="reduced"] .city-stage *::before,html[data-motion="reduced"] .city-stage *::after { transition: none !important; animation: none !important; }