.gb-page { --gb-paper:#f3ebd5; --gb-water:#dce7df; --gb-ink:#273a34; --gb-line:#c7bea2; --gb-muted:#637065; --gb-teal:#326e62; --gb-gold:#be913c; --gb-neutral:#ded7bd; --gb-own:#8db8a2; --gb-copper:#d6a07d; --gb-mist:#9aaec4; width:min(1680px,calc(100vw - 64px)); margin-left:calc((100% - min(1680px,calc(100vw - 64px))) / 2); }
:root[data-theme="dark"] .gb-page { --gb-paper:#1d302e; --gb-water:#132c30; --gb-ink:#f0e8ce; --gb-line:#50605a; --gb-muted:#b3c0b5; --gb-teal:#a1d3ba; --gb-gold:#e2be70; --gb-neutral:#4c5b50; --gb-own:#447e6a; --gb-copper:#986446; --gb-mist:#536f8c; }
.gb-page { --gb-land-base:#e9dfbd; --gb-relief:#b1a282; --gb-relief-shadow:#766f56; --gb-river:#477f96; --gb-river-bank:#f4efdb; --gb-river-glint:#b3d6d7; --gb-forest:#55775b; --gb-shore:#8fb5ad; }
:root[data-theme="dark"] .gb-page { --gb-land-base:#374239; --gb-relief:#a6a38c; --gb-relief-shadow:#566359; --gb-river:#76b4c5; --gb-river-bank:#233c3b; --gb-river-glint:#a8d9de; --gb-forest:#90b599; --gb-shore:#355456; }
.gb-page button { cursor:pointer; } .gb-page button:disabled { cursor:default; opacity:.45; } .gb-page [hidden] { display:none !important; }
.gb-page>.game-toolbar { padding:12px 0; }
.gb-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:4px 4px 12px; }
.gb-kicker, .gb-round>span, .gb-map-caption, .gb-commandbar>div>span, .gb-province-title>span { font-size:10px; font-weight:750; letter-spacing:1.7px; }
.gb-kicker { color:var(--gb-teal); } .gb-heading h2 { font:400 28px/1.2 Georgia,"Times New Roman",serif; margin:6px 0 0; letter-spacing:-.5px; }
.gb-round { text-align:right; display:grid; gap:6px; } .gb-round>span { color:var(--muted); } .gb-round strong { font-size:14px; font-weight:500; }
.gb-workspace { border:1px solid var(--gb-line); background:var(--gb-paper); color:var(--gb-ink); box-shadow:0 16px 40px #14252212; }
.gb-map-column { min-width:0; } .gb-factions { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--gb-line); }
.gb-faction { padding:14px 18px; display:grid; grid-template-columns:1fr auto; gap:4px 12px; border-right:1px solid var(--gb-line); position:relative; }
.gb-faction:last-child { border-right:0; } .gb-faction::before { content:""; width:4px; position:absolute; top:13px; bottom:13px; left:0; background:var(--faction); }
.gb-faction h3 { font-size:13px; margin:0; align-self:center; } .gb-faction small { font-size:10px; color:var(--gb-muted); } .gb-faction strong { grid-row:span 2; grid-column:2; font:400 32px/1 Georgia,serif; align-self:center; }
.gb-map-frame { position:relative; background:var(--gb-water); }
.gb-map-caption { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 0; color:var(--gb-muted); font-size:9px; letter-spacing:1.1px; }
.gb-map-caption i { color:var(--gb-gold); padding:0 6px; }
#gb-map { display:block; width:100%; height:clamp(620px,calc(100vh - 210px),900px); user-select:none; touch-action:none; overflow:hidden; }
.gb-map-navigation { position:absolute; top:48px; right:20px; display:grid; justify-items:end; gap:6px; z-index:1; color:var(--gb-ink); }
.gb-map-zoom { display:flex; border:1px solid var(--gb-line); border-radius:3px; background:var(--gb-paper); box-shadow:0 3px 12px #14252215; }
.gb-map-zoom button { min-width:34px; height:32px; padding:0 8px; border:0; background:transparent; color:var(--gb-ink); font-size:19px; }
.gb-map-zoom #gb-zoom-reset { min-width:66px; border-inline:1px solid var(--gb-line); font-size:11px; font-variant-numeric:tabular-nums; }
.gb-map-zoom button:hover:enabled { background:color-mix(in srgb,var(--gb-paper) 88%,var(--gb-teal)); }
.gb-map-navigation small { font-size:10px; padding:3px 5px; background:var(--gb-water); border-radius:2px; }
#gb-map.panning, #gb-map.panning .gb-province { cursor:grabbing; }
.gb-regions-section { padding:12px 20px 14px; border-bottom:1px solid var(--gb-line); }
.gb-regions-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:12px; font-size:10px; color:var(--gb-muted); letter-spacing:.6px; } #gb-next-reserve { color:var(--gb-teal); font-weight:650; letter-spacing:0; }
.gb-regions { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.gb-region-status { border-left:4px solid var(--region-color); padding-left:9px; font-size:11px; min-width:0; transition:background .2s; }
.gb-region-status b { display:block; margin-bottom:4px; } .gb-region-status span { display:block; font-size:10px; line-height:1.5; color:var(--gb-muted); }
.gb-region-status.is-held { background:color-mix(in srgb,var(--gb-paper) 84%,var(--gb-gold)); } .gb-region-status.is-held span { color:var(--gb-ink); }
.gb-sea-lines { pointer-events:none; } .gb-sea-lines path { stroke:var(--gb-ink); stroke-width:.6; opacity:.055; fill:none; } .gb-sea-lines text { fill:var(--gb-muted); opacity:.55; font:11px Georgia,serif; }
.gb-shallows { fill:none; stroke:var(--gb-shore); stroke-width:28; stroke-opacity:.35; stroke-linejoin:round; pointer-events:none; }
.gb-continent { fill:var(--gb-land-base); pointer-events:none; } .gb-coastline { fill:none; stroke:var(--gb-relief-shadow); stroke-width:1.6; opacity:.8; }
.gb-height-contour { fill:none; stroke:var(--gb-relief-shadow); stroke-width:1; opacity:.12; }
.gb-mountain-face { fill:var(--gb-relief); stroke:var(--gb-relief-shadow); stroke-width:.8; stroke-linejoin:round; } .gb-mountain-shade { fill:var(--gb-relief-shadow); opacity:.45; } .gb-mountain-snow { fill:var(--gb-paper); opacity:.85; }
.gb-forest { fill:var(--gb-forest); opacity:.45; }
.gb-river-bank, .gb-river, .gb-river-glint { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.gb-river-bank { stroke:var(--gb-river-bank); stroke-width:8; } .gb-river { stroke:var(--gb-river); stroke-width:4.5; } .gb-river-glint { stroke:var(--gb-river-glint); stroke-width:1; opacity:.7; }
.gb-lake { fill:var(--gb-river); stroke:var(--gb-river-bank); stroke-width:3; }
.gb-terrain-label { fill:var(--gb-relief-shadow); font:italic 10px Georgia,serif; letter-spacing:1px; } .gb-lake-label { fill:#f2f5e9; font-size:10px; letter-spacing:.5px; } .gb-river-label { fill:var(--gb-river); font-size:12px; }
.gb-region-outline { fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:.9; }
.gb-region-name { fill:var(--gb-ink); font:700 14px Georgia,serif; letter-spacing:1.7px; text-anchor:middle; pointer-events:none; }
.gb-region-bonus { fill:var(--gb-ink); font:11px Georgia,serif; text-anchor:middle; pointer-events:none; }
.gb-region-name, .gb-region-bonus { paint-order:stroke fill; stroke:var(--gb-land-base); stroke-width:5; stroke-linejoin:round; }
.gb-connection { pointer-events:none; } .gb-road-casing { fill:none; stroke:var(--gb-paper); stroke-width:6; opacity:.85; } .gb-road { fill:none; stroke:var(--gb-ink); stroke-width:2; stroke-dasharray:5 4; opacity:.85; }
.gb-bridge rect { fill:var(--gb-paper); stroke:var(--gb-relief-shadow); stroke-width:1; } .gb-bridge path { fill:none; stroke:var(--gb-ink); stroke-width:1.4; }
.gb-connection.is-supplied .gb-road { stroke:var(--gb-teal); stroke-width:3; stroke-dasharray:none; opacity:1; }
.gb-connection.is-selected .gb-road { stroke:var(--gb-gold); stroke-width:3.5; opacity:1; }
#gb-map.dragging, #gb-map.dragging .gb-province { cursor:grabbing; }
.gb-province[data-owner="0"] { cursor:grab; }
.gb-province { outline:none; cursor:pointer; } .gb-province .gb-land { fill:var(--gb-neutral); fill-opacity:.08; stroke:var(--gb-relief-shadow); stroke-opacity:.35; stroke-width:1.1; transition:fill .2s,filter .2s; }
.gb-province[data-owner="0"] .gb-land { fill:var(--gb-own); fill-opacity:.34; } .gb-province[data-owner="1"] .gb-land { fill:var(--gb-copper); fill-opacity:.34; } .gb-province[data-owner="2"] .gb-land { fill:var(--gb-mist); fill-opacity:.34; }
.gb-province .gb-ring { fill:none; stroke:transparent; stroke-width:2.5; pointer-events:none; }
.gb-province.reachable .gb-ring { stroke:var(--gb-gold); stroke-width:2; stroke-dasharray:5 3; }
.gb-province.selected .gb-ring, .gb-province.target .gb-ring { stroke:var(--gb-ink); stroke-width:4; stroke-dasharray:none; }
.gb-province.drop-ready .gb-ring { stroke:var(--gb-teal); stroke-width:5; stroke-dasharray:none; }
.gb-province.drop-blocked .gb-ring { stroke:#b6654e; stroke-width:4; stroke-dasharray:4 3; }
.gb-province:focus-visible .gb-ring { stroke:var(--gb-ink); stroke-width:4; stroke-dasharray:3 3; }
.gb-province:hover .gb-land { filter:brightness(1.07); } .gb-province .gb-hatch { fill:url(#gb-isolated); pointer-events:none; }
.gb-province text { fill:#213a31; text-anchor:middle; pointer-events:none; } :root[data-theme="dark"] .gb-province text { fill:#fcf0d4; }
.gb-province-name, .gb-owner-letter, .gb-marker, .gb-fort { paint-order:stroke fill; stroke:var(--gb-land-base); stroke-width:3; stroke-linejoin:round; }
.gb-province-name { font-family:Georgia,serif; font-size:18px; font-weight:600; } .gb-marker { font-size:17px; } .gb-troop { font-size:23px; font-weight:700; font-family:Georgia,serif; }
.gb-token { fill:var(--gb-paper); stroke:var(--gb-ink); stroke-width:1; } .gb-owner-letter { font-size:10px; font-weight:750; letter-spacing:1px; }
.gb-province[data-owner="0"] .gb-token { stroke:var(--gb-teal); stroke-width:2.5; } .gb-province[data-owner="1"] .gb-token { stroke:#ba784a; stroke-width:2.5; } .gb-province[data-owner="2"] .gb-token { stroke:#7d93b0; stroke-width:2.5; }
.gb-fort { font-size:10px; } .gb-route { stroke:var(--gb-ink); opacity:.35; stroke-width:2; stroke-dasharray:4 5; fill:none; pointer-events:none; }
#gb-drag-layer { pointer-events:none; color:var(--gb-teal); } #gb-drag-line { fill:none; stroke:currentColor; stroke-width:3; stroke-dasharray:7 4; } #gb-drag-token { fill:var(--gb-paper); stroke:currentColor; stroke-width:2; } #gb-drag-count { fill:var(--gb-ink); font:700 20px Georgia,serif; } #gb-drag-layer.invalid { color:#b6654e; }
.gb-compass text { fill:var(--gb-muted); font:10px Georgia,serif; text-anchor:middle; } .gb-compass path { stroke:var(--gb-line); fill:none; stroke-width:1.2; }
.gb-map-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:0 20px 16px; color:var(--gb-muted); font-size:10px; }
.gb-route-swatch, .gb-road-swatch { display:inline-block; width:24px; border-top:3px solid var(--gb-teal); vertical-align:middle; margin-right:6px; } .gb-road-swatch { border-top:2px dashed var(--gb-ink); }
.gb-commandbar { border-bottom:1px solid var(--gb-line); padding:12px 20px; display:flex; align-items:center; gap:18px; justify-content:space-between; }
.gb-commandbar>div>span { color:var(--gb-teal); } .gb-commandbar p { font-size:12px; line-height:1.5; margin:5px 0 0; max-width:560px; } .gb-commandbar .button { flex-shrink:0; }
.gb-commandbar>div:first-child { flex:1; } .gb-commandbar .gb-turn-resources { flex:none; display:flex; align-items:center; gap:18px; font-size:10px; } .gb-commands { width:88px; }
.gb-reserve-button { display:flex; align-items:center; gap:10px; min-width:180px; padding:10px 12px; border:1px solid var(--gb-line); border-radius:3px; background:transparent; color:var(--gb-muted); text-align:left; }
.gb-reserve-button.has-reserve { border-color:var(--gb-gold); background:color-mix(in srgb,var(--gb-paper) 84%,var(--gb-gold)); color:var(--gb-ink); box-shadow:inset 3px 0 var(--gb-gold); }
.gb-reserve-button.has-reserve:hover:enabled { background:color-mix(in srgb,var(--gb-paper) 72%,var(--gb-gold)); }
.gb-reserve-button>strong { font:34px/1 Georgia,serif; min-width:22px; } .gb-reserve-copy { display:grid; gap:4px; } .gb-reserve-copy>b { font-size:12px; } .gb-reserve-copy>small { font-size:10px; }
.gb-page .gb-reserve-button:disabled { opacity:1; } .gb-reserve-button:disabled>strong { opacity:.65; }
.gb-page .button-primary { background:#295c50; color:#fff8e5; border-color:#295c50; border-radius:3px; } .gb-page .button-secondary { border-radius:3px; }
.gb-journal { border-top:1px solid var(--gb-line); font-size:12px; } .gb-journal summary { cursor:pointer; padding:12px 20px; font-weight:650; } .gb-journal summary span { margin-left:16px; font-weight:400; color:var(--gb-muted); font-size:10px; }
.gb-journal ol { margin:0; padding:0 20px 15px 38px; max-height:190px; overflow:auto; } .gb-journal li { padding:5px 0; line-height:1.5; } .gb-journal li span { color:var(--gb-muted); font-size:10px; }
.gb-map-card { position:absolute; left:50%; top:22px; transform:translateX(-50%); z-index:2; width:min(430px,calc(100% - 40px)); padding:24px 28px; color:var(--gb-ink); background:var(--gb-paper); border:1px solid var(--gb-line); box-shadow:0 16px 70px #152c3250; }
.gb-map-card h2 { font:400 28px/1.15 Georgia,serif; letter-spacing:-.6px; margin:12px 0; } .gb-intro p { font-size:12px; line-height:1.6; }
.gb-intro ol { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; list-style:none; padding:4px 0; margin:0 0 16px; } .gb-intro li { font-size:11px; line-height:1.6; }
.gb-intro li b { display:block; color:var(--gb-teal); }
.gb-intro>.button { width:100%; justify-content:space-between; } .gb-intro>small { display:block; text-align:center; font-size:10px; color:var(--gb-muted); margin-top:13px; }
.gb-command-dots { display:flex; gap:6px; margin:6px 0; } .gb-command-dots i { height:4px; flex:1; background:var(--gb-line); } .gb-command-dots i.live { background:var(--gb-teal); }
.gb-field-dialog { position:fixed; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:min(360px,calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 32px); margin:0; padding:20px 24px; border:1px solid var(--gb-line); border-radius:6px; color:var(--gb-ink); background:var(--gb-paper); box-shadow:0 20px 90px #10292365; overflow:auto; }
.gb-field-dialog::backdrop { background:#10292330; }
.gb-reserve-dialog { width:min(440px,calc(100vw - 32px)); padding:24px; border-top:4px solid var(--gb-gold); }
.gb-reserve-dialog h2 { font:28px/1.2 Georgia,serif; margin:18px 0 12px; } .gb-reserve-dialog p { font-size:14px; line-height:1.6; margin:10px 0; } #gb-end-warning-text { font-weight:700; }
.gb-warning-actions { display:grid; gap:10px; margin-top:22px; }
.gb-dialog-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--gb-line); }
.gb-dialog-heading>button { width:30px; height:30px; border:1px solid var(--gb-line); border-radius:3px; background:transparent; color:var(--gb-ink); font-size:22px; }
.gb-province-title>span { font-size:9px; color:var(--gb-muted); letter-spacing:1.1px; } .gb-province-title h2 { font:28px Georgia,serif; margin:8px 0 10px; }
.gb-province-title p { font-size:12px; line-height:1.7; }
.gb-local-orders { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; } .gb-local-orders button { text-align:left; color:var(--gb-ink); border:1px solid var(--gb-line); background:var(--gb-paper); padding:11px 8px; font-size:11px; border-radius:3px; font-weight:650; } .gb-local-orders small { display:block; margin-top:5px; color:var(--gb-muted); font-weight:400; font-size:10px; }
.gb-recruit-amount { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--gb-muted); } .gb-recruit-amount select { padding:5px 8px; border:1px solid var(--gb-line); border-radius:3px; background:var(--gb-paper); color:var(--gb-ink); font-size:11px; }
.gb-field-dialog.is-march .gb-province-title { display:none; }
.gb-target-panel h3 { font:26px Georgia,serif; margin:6px 0; }
.gb-march-route { color:var(--gb-muted); font-size:11px; margin:0 0 12px; }
.gb-stepper { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:10px; }
.gb-stepper>button { background:transparent; border:1px solid var(--gb-line); border-radius:3px; min-height:42px; color:var(--gb-ink); font-size:22px; }
.gb-stepper #gb-amount { display:grid; gap:2px; border:0; min-height:72px; padding:4px; user-select:none; }
#gb-amount strong { font:44px/1 Georgia,serif; } #gb-amount span { font-size:10px; color:var(--gb-muted); } #gb-amount:hover { background:color-mix(in srgb,var(--gb-paper) 90%,var(--gb-teal)); }
.gb-mouse-hint { text-align:center; font-size:10px; color:var(--gb-muted); margin:8px 0; } .gb-mouse-hint b { font-weight:500; color:var(--gb-ink); }
.gb-target-panel input { width:100%; margin:10px 0 0; accent-color:var(--gb-teal); } .gb-amount-limits { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--gb-muted); font-size:10px; margin-bottom:10px; } .gb-amount-limits .gb-text-button { padding:3px 0; font-size:10px; }
.gb-preview { font-size:12px; line-height:1.6; padding:10px; background:color-mix(in srgb,var(--gb-paper) 93%,var(--gb-ink)); border-left:3px solid var(--gb-gold); margin-bottom:12px; }
.gb-preview b { display:block; font-size:13px; } .gb-preview span { display:block; } .gb-preview.danger { border-color:#b6654e; } .gb-target-panel>.button { width:100%; }
.gb-text-button { background:none; border:0; padding:11px 0; color:var(--gb-teal); text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.gb-new { flex-shrink:0; } .gb-selection-hint { font-size:11px; line-height:1.7; color:var(--gb-muted); margin:16px 0 0; }
.gb-session-note { font-size:10px !important; color:var(--gb-muted); line-height:1.6; padding-top:12px; margin:14px 0 0; border-top:1px solid var(--gb-line); }
.gb-result h2 { font-size:34px; } .gb-result>p { font-size:13px; line-height:1.7; } .gb-final-row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--gb-line); font-size:13px; } .gb-final-row b { font:24px Georgia,serif; }
.gb-small-dialog { max-width:480px; } .gb-handbook h3 { font-family:Georgia,serif; margin-top:24px; } .gb-handbook p { line-height:1.8; font-size:14px; }
.gb-page button:focus-visible, .gb-page input:focus-visible { outline:3px solid var(--gb-gold); outline-offset:3px; }
.gb-province.changed .gb-ring { animation:gb-arrival 1.2s ease-out; } @keyframes gb-arrival { 0%,35% { stroke:var(--gb-gold); stroke-width:7; } }
@media (max-height:800px) { .gb-page>.game-toolbar { padding:8px 0; } .gb-heading { padding:5px 4px 12px; } .gb-heading h2 { font-size:26px; } .gb-map-card { padding:18px 24px; } .gb-map-card h2 { font-size:25px; } .gb-field-dialog { padding:14px 20px; } }
@media (max-width:1250px) { .gb-faction { padding:13px 12px; } .gb-commandbar { padding:11px 16px; } .gb-commandbar p { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .gb-page * { animation:none !important; transition:none !important; } }