:root{--ink:#17221e;--muted:#707a74;--paper:#f5f5ef;--white:#fff;--green:#c8fa69;--line:#e5e8df;--accent:#375b47}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif,sans-serif}.shell{max-width:1040px;margin:auto;padding:40px 28px 26px}header{display:flex;align-items:center;gap:14px;margin-bottom:54px}.mark{height:43px;width:43px;border-radius:13px;background:var(--green);display:grid;place-items:center;font:700 15px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-1px}.eyebrow{font:500 10px 'DM Mono',ui-monospace,monospace,monospace;letter-spacing:1.25px;color:var(--muted);margin:0 0 7px}h1,h2,h3,p{margin-top:0}h1{font:700 17px 'Space Grotesk',system-ui,sans-serif;margin:0}.live{margin-left:auto;font:500 10px 'DM Mono',ui-monospace,monospace;color:var(--muted);letter-spacing:.7px}.live i{display:inline-block;width:7px;height:7px;background:#79be42;border-radius:50%;margin-right:7px}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px}.entry-grid .card{min-height:350px}.create{background:#e7f3d7}.card h2{font:600 27px 'Space Grotesk',system-ui,sans-serif;letter-spacing:-.8px;margin:22px 0 9px}.card>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:26px}label{display:block;color:#526058;font-size:12px;font-weight:600;margin:18px 0 7px}input{font:500 14px 'DM Sans',system-ui,sans-serif;color:var(--ink);border:1px solid var(--line);background:#fafbf8;border-radius:10px;padding:13px 14px;width:100%;outline:none;margin-top:7px}input:focus{border-color:#719b62}button{font:600 13px 'DM Sans',system-ui,sans-serif;border:0;border-radius:10px;padding:14px 16px;background:var(--ink);color:white;cursor:pointer}button:hover{background:#34483d}button span{float:right;margin-left:20px;font-size:17px;line-height:14px}.create>button{margin-top:18px;width:100%;background:var(--green);color:var(--ink)}.create>button:hover{background:#b9ed54}.join-row{display:flex;gap:9px}.join-row input{font:500 12px 'DM Mono',ui-monospace,monospace;letter-spacing:2px}.join-row button{margin-top:7px}.room{margin-top:6px;min-height:440px}.hidden{display:none!important}.room-top{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line);padding-bottom:20px}.code{font:700 30px 'Space Grotesk',system-ui,sans-serif;letter-spacing:4px}.phase{background:#eef4e9;padding:8px 11px;border-radius:20px;font:500 10px 'DM Mono',ui-monospace,monospace;letter-spacing:1px}.room-columns{display:grid;grid-template-columns:1fr 290px;gap:36px;padding:24px 0}.room-columns h2{font:600 24px 'Space Grotesk',system-ui,sans-serif;margin:0 0 6px}.room-columns p{font-size:13px;color:var(--muted)}.players{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}.player{padding:9px 12px;border-radius:8px;background:#f1f3ed;font-size:12px}.room aside{border-left:1px solid var(--line);padding-left:27px}.room aside h3{font:600 13px 'Space Grotesk',system-ui,sans-serif;margin:0 0 14px}.game-option{border:1px solid var(--line);padding:12px;border-radius:10px;margin-bottom:8px;cursor:pointer}.game-option.active{border-color:#8fac75;background:#f4f9ee}.game-option strong{display:block;font-size:12px}.game-option small{display:block;color:var(--muted);margin-top:4px;font-size:11px}.start{width:100%;margin-top:10px}.play-area{padding:24px 0;border-top:1px solid var(--line)}.play-area h2{font:600 23px 'Space Grotesk',system-ui,sans-serif}.answer-row{display:flex;gap:10px;max-width:430px}.answer-row input{margin:0}.shape-pair{display:flex;gap:16px;align-items:end;margin:18px 0}.shape-pair>div{background:#f5f7f1;border-radius:12px;padding:12px;text-align:center}.shape-pair small{display:block;font:10px 'DM Mono',ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}.country-shape{display:block;width:170px;height:120px;margin-top:8px}.country-shape path{fill:#82a47c;stroke:#375b47;stroke-width:2}.shape-pair>div:first-child .country-shape path{fill:#d4dfc9}.shape-single{background:#f5f7f1;border-radius:12px;width:194px;padding:12px;margin:18px 0}.slider-label{display:flex;justify-content:space-between;max-width:370px;margin:18px 0 8px}.slider-label strong{font:500 12px 'DM Mono',ui-monospace,monospace;color:var(--accent)}.game-slider{display:block;max-width:370px;margin:0 0 17px;padding:0;accent-color:#6a965e}.notice{color:var(--muted);font-size:12px;min-height:18px;margin:14px 0 4px}footer{text-align:center;color:#929b94;font:10px 'DM Mono',ui-monospace,monospace;margin-top:42px;letter-spacing:.5px}@media(max-width:680px){.shell{padding:24px 16px}header{margin-bottom:30px}.entry-grid{grid-template-columns:1fr;gap:12px}.entry-grid .card{min-height:300px;padding:24px}.room{padding:22px}.room-columns{grid-template-columns:1fr;gap:22px}.room aside{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.shape-pair{gap:8px}.country-shape{width:140px;height:100px}}
.map-frame{max-width:600px;margin:18px 0 14px;background:#eef4e9;border-radius:14px;padding:12px}.map-frame svg{display:block;width:100%;height:auto;aspect-ratio:15/11;touch-action:none;cursor:crosshair}.map-frame p{font-size:12px;color:var(--muted);margin:10px 4px 2px}.country-outline{fill:#d9e7ce;stroke:#45684e;stroke-width:1.5;stroke-linejoin:round}.cut-line{stroke:#d14c39;stroke-width:2;stroke-dasharray:4 2;pointer-events:none}button:disabled{opacity:.45;cursor:not-allowed}
.user-pin{fill:#d14c39;stroke:white;stroke-width:1.6;pointer-events:none}.result-pin{fill:#5286bb;stroke:white;stroke-width:.8}.target-pin{fill:#d14c39;stroke:white;stroke-width:1.5}.result-map{max-width:420px}

/* Shared theme surfaces keep controls, maps, and room states consistent. */
:root {
  color-scheme: light;
  --create: #e7f3d7;
  --input: #fafbf8;
  --label: #526058;
  --panel: #eef4e9;
  --chip: #f1f3ed;
  --selected: #f4f9ee;
  --shape-panel: #f5f7f1;
  --button: #17221e;
  --button-text: #fff;
  --button-hover: #34483d;
  --outline-fill: #d9e7ce;
  --outline-stroke: #45684e;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9efe7;
  --muted: #acb9af;
  --paper: #111714;
  --white: #1b241f;
  --line: #3b4b40;
  --accent: #b2d69d;
  --create: #263622;
  --input: #151e19;
  --label: #c0cdbf;
  --panel: #253329;
  --chip: #2b382e;
  --selected: #30452a;
  --shape-panel: #243027;
  --button: #c8fa69;
  --button-text: #17221e;
  --button-hover: #b9ed54;
  --outline-fill: #425b3c;
  --outline-stroke: #b2d69d;
}
.create { background: var(--create); }
label { color: var(--label); }
input, select {
  color: var(--ink);
  background: var(--input);
  border-color: var(--line);
}
select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; margin-top: 7px; font: inherit; }
input::placeholder { color: var(--muted); opacity: 1; }
button { background: var(--button); color: var(--button-text); }
button:hover { background: var(--button-hover); }
.mark, .create > button { color: #17221e; }
.phase, .map-frame { background: var(--panel); }
.player { background: var(--chip); }
.game-option.active { background: var(--selected); }
.shape-pair > div, .shape-single { background: var(--shape-panel); }
.country-outline { fill: var(--outline-fill); stroke: var(--outline-stroke); }
.country-shape polygon { fill: var(--outline-fill); stroke: var(--outline-stroke); stroke-width: 1.5; }
:root[data-theme="dark"] .country-shape path { fill: #82a47c; stroke: #c0d8af; }
:root[data-theme="dark"] .shape-pair > div:first-child .country-shape path { fill: #536a49; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.theme-toggle { padding: 9px 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); white-space: nowrap; }
.theme-toggle:hover { background: var(--panel); }
.theme-toggle[aria-pressed="true"] { border-color: var(--accent); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 680px) {
  header { flex-wrap: wrap; }
  .header-actions { gap: 10px; }
  .header-actions .live { display: none; }
}

.session-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
#round-clock { color: var(--accent); font-variant-numeric: tabular-nums; }
.control-hint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.playlist { padding-left: 22px; margin: 16px 0; font-size: 12px; }
.playlist li { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.playlist li > span { display: block; overflow-wrap: anywhere; }
.playlist-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.playlist-actions button { padding: 6px 8px; font-size: 11px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); min-height: 32px; }
.playlist-actions button:hover { border-color: var(--accent); }
.session-playlist .current { color: var(--accent); font-weight: 700; }
.check-label { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 18px; }
.check-label input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.secondary { margin-top: 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.secondary:hover { background: var(--selected); }
.player.is-locked { border: 1px solid var(--accent); }
.custom-fields { display: grid; max-width: 600px; }
.custom-fields label { margin-top: 6px; }
.answer-locked svg { pointer-events: none; opacity: .7; }
.answer-locked #send-answer { opacity: .85; }
.results-scroll { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.results-table th { color: var(--muted); font-size: 11px; font-weight: 500; }
.results-table td, .results-table th { padding: 13px 10px; border-bottom: 1px solid var(--line); }
.results-table td:nth-last-child(-n+2), .results-table th:nth-last-child(-n+2) { text-align: right; white-space: nowrap; }
.results-table td { overflow-wrap: anywhere; max-width: 320px; }
.answer-color { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.city-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.city-heading h2 { margin-bottom: 6px; }
.city-country { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.city-score-cap { flex-shrink: 0; font-size: 12px; color: var(--accent); padding: 9px 12px; border: 1px solid var(--line); border-radius: 20px; }
.city-instructions { font-size: 14px; line-height: 1.6; margin-top: 20px; color: var(--muted); }
.city-map { position: relative; max-width: 700px; padding: 8px; overflow: hidden; border: 1px solid var(--line); }
.city-map svg { user-select: none; -webkit-user-select: none; }
.city-map svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.city-map .country-outline { vector-effect: non-scaling-stroke; stroke-width: 2; }
.map-north { position: absolute; top: 15px; right: 16px; color: var(--muted); font-size: 11px; pointer-events: none; }
.pin-halo { fill: #dc674833; stroke: #ed886e; stroke-width: .8; }
.pin-center { fill: #d14c39; stroke: #fff; stroke-width: 1.5; }
.pin-crosshair { stroke: #d14c39; stroke-width: 1; }
.pin-action-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; max-width: 700px; }
.pin-action-bar p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pin-buttons { display: flex; gap: 10px; }
.pin-buttons button { min-height: 46px; }
.pin-buttons .secondary { margin-top: 0; }
.pin-is-locked { padding: 12px 16px; border: 1px solid var(--accent); background: var(--panel); border-radius: 12px; }
.pin-is-locked p { color: var(--accent); }
.pin-is-locked #clear-pin { display: none; }
.answer-locked .city-map svg { opacity: 1; }
.city-scoring { max-width: 700px; }
.city-results-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 24px; margin-top: 20px; align-items: start; }
.city-result-map { margin-top: 0; }
.city-result-map svg { cursor: default; }
.city-player-results { display: grid; gap: 8px; }
.city-player-result { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.city-player-result:hover { background: var(--panel); }
.city-player-result[aria-pressed="true"] { border-color: var(--accent); background: var(--selected); }
.city-player-result:disabled { opacity: .7; }
.city-player-result span { float: none; margin: 0; font-size: 13px; line-height: 1.4; }
.city-player-result .pin-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: var(--pin-color); color: #fff; font-size: 12px; }
.city-player-name { flex: 1; overflow-wrap: anywhere; }
.city-player-result small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 4px; }
.city-player-points { text-align: right; flex-shrink: 0; }
.result-pin-number { fill: #fff; font: 700 7px system-ui,sans-serif; pointer-events: none; }
.pin-error-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; }
.correct-target-halo { fill: var(--white); stroke: #d14c39; stroke-width: 1.3; }
.correct-target-dot { fill: #d14c39; }
.correct-target-cross { fill: none; stroke: #d14c39; stroke-width: 1.2; }
.correct-key { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.correct-key i { width: 14px; height: 14px; border: 2px solid #d14c39; border-radius: 50%; background: var(--white); }
.split-cut { stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.split-anchor { fill: var(--accent); stroke: var(--white); stroke-width: 1; pointer-events: none; }
.split-adjustments { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 700px; margin: 16px 0 24px; }
.split-adjustments label { margin: 0; }
.split-adjustments output { float: right; color: var(--accent); font-weight: 500; }
.split-adjustments input { display: block; padding: 0; min-height: 34px; accent-color: var(--accent); }
.split-half { stroke: var(--outline-stroke); stroke-width: .5; }
.split-half-small { fill: #4485d2; fill-opacity: .65; }
.split-half-large { fill: #76ad58; fill-opacity: .65; }
.split-balance { height: 12px; overflow: hidden; border-radius: 8px; background: #76ad58; }
.split-balance span { display: block; height: 100%; background: #4485d2; }
.split-small-key, .split-large-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; background: #4485d2; }
.split-large-key { background: #76ad58; }
#split-balance-summary { margin: 16px 0; font-size: 13px; }
#split-balance-summary p { line-height: 1.5; }
.presentation #stage-title { font-size: 30px; }
.presentation .play-area h2 { font-size: 30px; }
.presentation .map-frame { max-width: 700px; }
@media (max-width: 680px) {
  .session-status { gap: 8px 16px; }
  .answer-row { flex-wrap: wrap; }
  .answer-row button { width: 100%; }
  .results-table td, .results-table th { padding: 12px 5px; }
  .presentation .play-area h2 { font-size: 24px; }
  .city-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .city-score-cap { padding: 7px 10px; }
  .city-results-layout { grid-template-columns: 1fr; gap: 22px; }
  .pin-action-bar { display: grid; }
  .pin-buttons { width: 100%; }
  .pin-buttons #send-answer { flex: 1; }
  .city-map { padding: 4px; }
  .city-instructions { font-size: 13px; }
  .room { display: flex; flex-direction: column; }
  .room-top { order: 0; }
  .session-status { order: 1; }
  .room-columns { display: contents; }
  .room-columns > div { order: 2; padding: 18px 0; }
  #play-area { order: 3; }
  .room aside { order: 4; margin-top: 12px; }
  #notice { order: 5; }
  .map-playing #stage-title, .map-playing #stage-copy { display: none; }
  .map-playing .players { margin-top: 0; }
  .split-adjustments { gap: 14px; }
}
.shape-pair { align-items: center; flex-wrap: wrap; }
.shape-pair > div { flex: 1 1 160px; min-width: 0; }
.shape-pair .country-shape { width: 100%; height: auto; max-height: 240px; }
.shape-pair small { overflow-wrap: anywhere; line-height: 1.5; }
.north-guide { display: block; text-align: center; color: var(--accent); font-weight: 700; margin: 8px 0; }
.shape-results > .north-guide { flex: 1 0 100%; }
.custom-fields input[type="range"] { accent-color: var(--accent); padding: 0; margin: 12px 0; width: 100%; }
.custom-fields output { display: block; color: var(--accent); font: 600 18px 'DM Mono', monospace; }
.round-instructions { max-width: 680px; }
.round-instructions .intro-objective { font-size: 18px; line-height: 1.5; color: var(--ink); }
.round-instructions ol { padding-left: 24px; line-height: 1.7; }
.round-instructions li { margin-bottom: 12px; }
.round-instructions p { line-height: 1.6; }
.invite-row { margin: 14px 0 0; max-width: 600px; }
.invite-row > div { display: flex; gap: 8px; }
.invite-row input { margin: 0; min-width: 0; font-size: 12px; }
.invite-row button { flex-shrink: 0; }
.invite-row label { margin: 0 0 7px; }