:root{color-scheme:dark;--bg:#121b26;--panel:#1c2937;--line:#3d5064;--text:#f1f4f8;--muted:#b3bfcc;--blue:#426b9f;--orange:#ad7048;--gold:#c5ad7d;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button{cursor:pointer}button:disabled,input:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid #b9d3f4;outline-offset:4px}header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)}.brand{font-weight:850;font-size:24px;text-decoration:none;letter-spacing:-1px}.brand span{color:#a8b9cb}nav{display:flex;align-items:center;gap:18px}nav a{font-size:14px;text-decoration:none}button{border:1px solid var(--line);color:var(--text);background:#202c39;border-radius:7px;padding:11px 15px;min-height:44px;transition:background .15s,transform .15s}button:hover:enabled{background:#314256}button:active:enabled{transform:translateY(1px)}nav button{font-size:12px;padding:8px 11px}main{max-width:1280px;padding:24px 24px 48px;margin:auto}.intro{margin-bottom:18px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);font-weight:700}.intro h1{font-size:clamp(30px,5vw,56px);letter-spacing:-.045em;margin:9px 0;line-height:1.06}.intro h1 span{color:#a9b9cc}.intro sup{font-size:11px;letter-spacing:0;color:var(--gold);margin-left:10px;vertical-align:top}.intro p:last-child{color:var(--muted);font-size:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}.entry-grid h2{font-size:21px;margin:0 0 20px}label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}input,select{display:block;border:1px solid #445365;border-radius:7px;background:#111a24;color:var(--text);padding:13px;width:100%;min-height:46px;font-size:16px}input{margin:8px 0 14px}.primary{background:#486e9d;border-color:#6889b1;font-weight:650}.primary:hover:enabled{background:#557dac}.secondary{background:#222f3d}.entry-grid button{width:100%;margin-top:8px}.steps{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0 0;margin:28px 0 0;list-style:none;border-top:1px solid var(--line);gap:20px}.steps li{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted)}.steps b{font-size:24px;color:#63788e}.room-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;gap:12px;font-size:12px;color:var(--muted)}.room-bar b{font-size:16px;color:white;letter-spacing:.15em;margin-left:8px}.room-bar button{font-size:12px}.room-bar>div{display:flex;gap:6px}.scoreboard{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;margin:20px 0}.side{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 20px;min-width:0}.side.active{border-color:#9db6d2}.side.orange.active{border-color:#d6ae8a}.side span{min-width:0}.side b{display:inline-block;max-width:calc(100% - 25px);overflow-wrap:anywhere;font-size:14px}.side strong{font-size:36px;font-variant-numeric:tabular-nums;transition:color .2s}.side i{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;font-size:10px;font-style:normal;background:var(--blue);margin-right:6px}.side.orange i{background:var(--orange)}.side small{display:block;color:var(--muted);margin-top:5px;font-size:11px}.orange{text-align:right}.versus{text-align:center;font-size:11px;color:var(--muted);letter-spacing:.12em}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{font-size:21px}.section-head span,.muted{font-size:12px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:14px 0}.settings-grid label span{display:block;margin-bottom:6px}.settings-grid select{margin-top:6px;font-size:14px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.match-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;margin:20px 0 10px}.match-strip>span:first-child{color:var(--muted)}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start;max-width:1172px;margin-inline:auto}.board-panel{background:#141d27;border:1px solid var(--line);border-radius:18px;padding:10px;min-width:0}.board-legend{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;margin-bottom:8px}.board-legend span:nth-child(2){color:var(--gold)}.neutral-dot{display:inline-block;width:7px;height:7px;background:#455367;border-radius:50%;margin-right:5px}#board{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}.tile{cursor:pointer;outline:none}.tile path{fill:#222e3c;stroke:#445163;stroke-width:1.3;transition:fill .48s cubic-bezier(.2,.7,.2,1),stroke .32s;transition-delay:var(--delay,0ms);filter:drop-shadow(0px 2px 1px #0003)}.tile:hover path{fill:#2d3b4c;stroke:#8192a8}.tile[data-owner="0"] path{fill:#345881;stroke:#6e93bd}.tile[data-owner="1"] path{fill:#845637;stroke:#c18d65}.tile.special path{stroke:var(--gold);stroke-width:2}.tile.selected path{stroke:#e1ecf9;stroke-width:3;fill:#2e4054}.tile.neighbor path{stroke:#b0c1d4;stroke-width:2;stroke-dasharray:3 3}.tile text{fill:#f5f6f8;pointer-events:none;text-anchor:middle;font-weight:650;font-size:13px}.tile .sub{font-size:9px;fill:#ccd4df;font-weight:450}.tile .owner{font-size:10px;fill:#fff}.tile .star{fill:#e9c98e;font-size:11px}.tile:focus-visible path{stroke:#fff;stroke-width:3}.tile.claim path{animation:claim .65s both;animation-delay:var(--delay,0ms)}@keyframes claim{0%{stroke-width:4;filter:brightness(1.65)}45%{stroke-width:3;filter:brightness(1.15)}100%{filter:brightness(1)}}#feedback{min-height:24px;text-align:center;font-weight:650;font-size:13px;color:#e3d1af;margin:8px 0 0}.control-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.selection h2{margin:8px 0 10px;font-size:22px}.selection>p:not(.eyebrow){font-size:12px;line-height:1.6;color:var(--muted)}#selected-source{font-size:10px;margin-bottom:22px;color:var(--muted)}#selected-source a{margin-right:9px}.input-wrap{position:relative}#suggestions{position:absolute;top:100%;left:0;right:0;margin:0;padding:4px;list-style:none;background:#202e3e;border:1px solid #66798f;z-index:10;border-radius:8px;box-shadow:0 12px 25px #0005;max-height:240px;overflow:auto}#suggestions button{width:100%;text-align:left;border:0;font-size:14px;background:transparent}#suggestions button.selected,#suggestions button:hover{background:#3a4c62}#send{width:100%}#notice{font-size:13px;color:#dbc6a6;min-height:18px}.history{border-top:1px solid var(--line);padding-top:16px;font-size:13px}.history summary{cursor:pointer;display:flex;justify-content:space-between}.history ol{padding-left:20px;max-height:160px;overflow:auto}.history li{padding:5px;font-size:12px;color:var(--muted)}.history li b{color:#e2e8ed}.finish{text-align:center;margin-top:22px}.finish h2{font-size:32px}.finish .actions{justify-content:center}#stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:580px;margin:auto}#stats>div{background:#111b26;padding:15px;border-radius:8px}#stats h3{font-size:15px;overflow-wrap:anywhere}#stats p{font-size:12px;color:var(--muted)}#error,#connection{padding:12px 16px;border-radius:8px;background:#3c3026;color:#f1d3af;overflow-wrap:anywhere;font-size:14px}.rules{margin:28px 0;color:var(--muted);font-size:13px;line-height:1.7}.rules summary{cursor:pointer;color:#d3dce6}.rules a{margin-right:10px}footer{display:flex;justify-content:center;gap:30px;padding:25px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:1000px){.play-layout{grid-template-columns:1fr}.control-panel{padding:18px}.selection>p:not(.eyebrow){max-height:68px;overflow:auto}.board-panel{max-width:872px;width:100%;margin:auto}.intro h1{font-size:38px}.settings-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){header{padding:15px 12px}.brand{font-size:20px}nav{gap:9px}nav a{font-size:12px}nav button{padding:6px 8px}main{padding:16px 6px 32px}.intro{padding:0 5px}.intro h1{font-size:30px}.intro p:last-child{font-size:14px}.panel{padding:18px}.entry-grid{grid-template-columns:1fr;gap:24px}.steps{grid-template-columns:1fr;gap:12px}.steps b{font-size:20px}.room-bar{align-items:flex-start;flex-direction:column}.side{padding:11px 10px;gap:4px}.side strong{font-size:30px}.side b{font-size:12px}.scoreboard{grid-template-columns:1fr 25px 1fr;margin:12px 0}.board-panel{padding:6px 0;border:0;border-radius:0;background:transparent}.board-legend{font-size:9px;padding:4px}.settings-grid{gap:12px}.settings-grid select{font-size:12px;padding:10px 6px}.match-strip{font-size:11px}.play-layout{gap:12px}.section-head h2{font-size:18px}.section-head span{font-size:10px}#stats{gap:8px}#stats>div{padding:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.tile .compact-label{display:none}@media(max-width:480px){.tile .long-label{display:none}.tile .compact-label{display:block;font-size:20px;letter-spacing:-.03em}.tile .sub{font-size:12px}.tile .owner,.tile .star{font-size:14px}}

#suggestions button small{display:block;color:#b3bfcd;font-size:10px;margin-top:3px}

@media(max-width:1000px){.match-strip{position:sticky;top:0;z-index:12;background:#10161e;padding:9px 4px;margin-top:10px}}

/* Stable SVG nodes keep the opponent color visible while ownership transitions. */
.tile.stolen path{animation:takeover-steal .76s both;animation-delay:var(--delay,0ms)}
.tile.golden-claim path{animation:takeover-gold .9s both;animation-delay:var(--delay,0ms)}
@keyframes takeover-steal{0%{stroke-width:2;filter:brightness(1)}35%{stroke-width:4;filter:brightness(1.45)}100%{stroke-width:1.3;filter:brightness(1)}}
@keyframes takeover-gold{0%{filter:brightness(1)}40%{stroke:#ffe2a5;stroke-width:4;filter:drop-shadow(0 0 7px #d5b16f99) brightness(1.3)}100%{stroke:var(--gold);stroke-width:2;filter:brightness(1)}}
#feedback{min-height:44px;line-height:1.45;padding:4px 8px}
#feedback strong{display:block;letter-spacing:.05em;font-size:clamp(16px,2.5vw,23px)}
#feedback span{display:block;color:var(--muted);font-size:12px;font-weight:500}
#feedback.takeover strong{color:#f1dbb1;animation:takeover-message .42s ease-out}
@keyframes takeover-message{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.side strong.score-gain{animation:score-gain .65s ease}
.side strong.score-loss{animation:score-loss .65s ease}
@keyframes score-gain{35%{color:#cce2f8;transform:scale(1.12)}}
@keyframes score-loss{35%{color:#e2b993;transform:scale(.93)}}
.turn-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
button.quiet{background:transparent;font-size:12px;border-color:transparent;color:var(--muted);padding:9px 8px}
button.quiet:hover:enabled{background:#263647;color:var(--text)}
#show-board{display:none}.untimed{font-size:11px;color:var(--muted)}
.control-panel{padding:18px;border-radius:16px}.selection h2{font-size:21px;line-height:1.2}
#answer-panel,#board{scroll-margin-top:54px}
@media(max-width:1000px){.control-panel{max-width:872px;width:100%;margin:auto}.match-strip{max-width:872px;margin-inline:auto}#show-board{display:block}.selection h2{margin:5px 0}.selection .eyebrow{margin-top:0}#selected-source{margin-bottom:14px}.untimed{font-size:10px}}
@media(max-width:480px){.room-bar,.scoreboard,.match-strip{margin-inline:6px}.board-legend{margin-inline:6px}.control-panel{padding:14px}.intro p:last-child{margin-bottom:12px}.intro{margin-bottom:12px}.match-strip{flex-wrap:wrap;gap:5px}.tile .sub{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Local crests and flags add recognition without changing tile ownership colors. */
.category-art{pointer-events:none}
.tile .icon-fallback{display:none;font-size:10px;fill:#f5f6f8}
.tile .crest .category-icon{filter:drop-shadow(0 0 .65px #f1f4f699)}
.tile.icon-unavailable .icon-fallback{display:block}
.tile.has-icon .long-label{font-size:12px}
.selected-identity{display:flex;align-items:center;gap:12px;min-height:48px;margin:12px 0}
.selected-identity h2{margin:0}
#selected-icon{flex:0 0 44px;object-fit:contain;background:transparent;padding:0;filter:drop-shadow(0 0 .65px #f1f4f699)}
@media(max-width:480px){.tile.has-icon .compact-label{font-size:18px}.tile.special .compact-label{font-size:17px}.tile.has-icon .sub{font-size:10px}.tile.has-icon .owner{font-size:12px}}