/* Increase the reading sizes, not the pixel grid or the page's zoom. */
:root{--client-font-scale:1}
:root .phase-panel>h2,:root .tile-panel .panel-heading h2{font-size:calc(calc(22px * 1) * var(--client-font-scale,1));line-height:1.25}
:root .phase-panel>p,:root .phase-panel .fact-list,:root .phase-panel .info-note,:root .phase-panel .advanced-options p,:root .tile-info,:root #tile-hint{font-size:calc(calc(14px * 1) * var(--client-font-scale,1));line-height:1.55}
:root .operations-column :is(.primary,.secondary,.subtle),:root .tile-form button{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));min-height:44px;white-space:normal;line-height:1.35}
:root .operations-column .text-button{font-size:calc(calc(12px * 1) * var(--client-font-scale,1));min-height:36px;line-height:1.4}
:root .phase-panel>.eyebrow,:root .tile-panel .eyebrow{font-size:calc(calc(10px * 1) * var(--client-font-scale,1))}
:root .compact-form label,:root .tile-form label,:root #settings-dialog label{font-size:calc(calc(11px * 1) * var(--client-font-scale,1));line-height:1.35;letter-spacing:.05em}
:root .field-help,:root .settings-group small,:root .event-rule small,:root .event-rule p{font-size:calc(calc(12px * 1) * var(--client-font-scale,1));line-height:1.55}
:root .compact-form input,:root .compact-form select,:root .tile-form select,:root .settings-group input:not([type=checkbox]),:root .settings-group select,:root .event-row input:not([type=checkbox]),:root .event-row select,:root textarea{font-size:calc(max(16px,calc(14px * 1)) * var(--client-font-scale,1)) !important;min-height:44px}
:root .settings-group h3,:root .events-heading h3{font-size:calc(calc(18px * 1) * var(--client-font-scale,1))}
:root .settings-group .check-field label{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));line-height:1.45}
:root .race-name,:root .player-name{font-size:calc(calc(15px * 1) * var(--client-font-scale,1));line-height:1.3}
:root .race-cash,:root .race-time,:root .race-perk-title,:root .race-perk,:root .player-details{font-size:calc(calc(12px * 1) * var(--client-font-scale,1));line-height:1.45}
:root .race-card{height:auto;min-height:190px}
:root .player-value{font-size:calc(calc(18px * 1) * var(--client-font-scale,1))}
:root .help-content,:root #help-dialog .help-steps article,:root #help-dialog .help-content p{font-size:calc(calc(14px * 1) * var(--client-font-scale,1));line-height:1.65}
:root #help-dialog .help-steps h3{font-size:calc(calc(19px * 1) * var(--client-font-scale,1))}
:root .dialog-heading h2{font-size:calc(calc(23px * 1) * var(--client-font-scale,1));line-height:1.2}
:root .dialog-heading p,:root .dialog-footer,:root .inline-error,:root .toast{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));line-height:1.5}
:root .dialog-footer button{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));min-height:44px;white-space:normal}
:root .guide-copy h2{font-size:calc(calc(20px * 1) * var(--client-font-scale,1));line-height:1.2}
:root .guide-copy p{font-size:calc(calc(12px * 1) * var(--client-font-scale,1));line-height:1.45}
:root .guide-copy .eyebrow{font-size:calc(calc(9px * 1) * var(--client-font-scale,1))}
:root .guide-actions .primary{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));min-height:44px}
:root .guide-actions .text-button{font-size:calc(calc(11px * 1) * var(--client-font-scale,1));min-height:28px}
:root .guide-steps{font-size:calc(calc(10px * 1) * var(--client-font-scale,1));flex-wrap:wrap;row-gap:4px}
:root .guide-step-number{width:18px;height:18px;font-size:calc(11px * var(--client-font-scale,1))}
:root .phase-heading h1{font-size:calc(calc(18px * 1) * var(--client-font-scale,1))}
:root .phase-step{font-size:calc(calc(10px * 1) * var(--client-font-scale,1));min-height:24px}
:root .phase-controls #ready-button,:root .phase-controls #start-button{font-size:calc(clamp(12px,calc(12px * 1),16px) * var(--client-font-scale,1));min-height:44px}
:root .workspace-tab{font-size:calc(clamp(12px,calc(12px * 1),16px) * var(--client-font-scale,1));min-height:44px;padding:5px 3px}
:root .command-dock{grid-template-rows:46px minmax(0,1fr)}
:root .hud-item .resource-name{font-size:calc(clamp(8px,calc(9px * 1),11px) * var(--client-font-scale,1));line-height:1.3}
:root .hud-item .hud-detail{font-size:calc(clamp(8px,calc(8px * 1),10px) * var(--client-font-scale,1));line-height:1.3}
:root .topbar .game-audio-controls .subtle{min-height:44px;font-size:calc(clamp(11px,calc(11px * 1),14px) * var(--client-font-scale,1));padding:6px 9px}
:root .landing-audio-controls{flex-wrap:wrap}
:root .landing-audio-controls .subtle{min-height:44px;font-size:calc(calc(12px * 1) * var(--client-font-scale,1));white-space:normal}
:root #welcome .welcome-copy p,:root .landing-story p,:root #welcome .entry-content>.muted,:root #welcome .entry-note{font-size:calc(calc(15px * 1) * var(--client-font-scale,1));line-height:1.7}
:root .landing-story h2{font-size:calc(calc(27px * 1) * var(--client-font-scale,1));line-height:1.25}
:root .landing-game-steps h3{font-size:calc(calc(18px * 1) * var(--client-font-scale,1));line-height:1.3}
:root .entry-content label{font-size:calc(calc(12px * 1) * var(--client-font-scale,1))}
:root .entry-content input{font-size:calc(max(16px,calc(15px * 1)) * var(--client-font-scale,1));min-height:48px}
.client-options-dialog{width:min(680px,calc(100% - 20px));max-height:calc(100dvh - 20px);padding:0;overflow:auto}
.client-options-body{padding:22px 24px}
.client-audio-settings{padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid #71845c}
.client-audio-settings h3{font-size:calc(calc(18px * 1) * var(--client-font-scale,1));margin:0 0 16px}
.client-audio-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:16px}
.client-audio-row strong{font-size:calc(calc(14px * 1) * var(--client-font-scale,1));line-height:1.5}
.client-audio-row p{font-size:calc(calc(12px * 1) * var(--client-font-scale,1));line-height:1.55;margin:5px 0 0;color:#c2cfae}
.client-audio-row button{min-width:100px;min-height:44px;font-size:calc(calc(13px * 1) * var(--client-font-scale,1));white-space:normal}
.client-audio-row button[aria-pressed=false]{opacity:.75}
:root :is(.landing-audio-controls,.game-audio-controls) .music-note{position:relative;flex:0 0 44px;min-width:44px;min-height:44px;width:44px;padding:3px;font:calc(28px * var(--client-font-scale,1))/1 Arial,sans-serif}
:root .music-note[aria-pressed=false]::after{content:"";position:absolute;width:27px;height:2px;background:currentColor;left:8px;top:21px;transform:rotate(-45deg);pointer-events:none}
.client-options-body>p,.client-options-body label{font-size:calc(calc(14px * 1) * var(--client-font-scale,1));line-height:1.55}
.client-scale-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.client-scale-heading label{margin:0;font-weight:bold;color:#e9ecc6;letter-spacing:0}
.client-scale-heading output{font:bold calc(calc(18px * 1) * var(--client-font-scale,1)) 'Courier New',monospace;color:#e6ebac}
.client-scale-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px}
.client-scale-controls button{min-width:44px;min-height:44px;border:1px solid #899b6c;background:#314c34;font-size:calc(24px * var(--client-font-scale,1))}
.client-scale-controls input[type=range]{width:100%;min-width:0;min-height:44px;padding:0;accent-color:#d8e69b}
.client-scale-range{display:flex;justify-content:space-between;margin:8px 0 18px;font-size:calc(calc(12px * 1) * var(--client-font-scale,1));color:#c2cfae}
.client-text-sample{border:1px solid #71845c;background:#203b2a;padding:16px;font-size:calc(calc(16px * 1) * var(--client-font-scale,1));line-height:1.55;color:#edf0cb}
.client-options-dialog .dialog-footer{position:sticky;bottom:0;z-index:1;flex-wrap:wrap;gap:12px;background:#29452f}
.client-options-dialog .dialog-heading>.icon-button{min-width:44px;min-height:44px}
@media(max-width:1100px){
 :root .guide-copy h2{font-size:calc(calc(18px * 1) * var(--client-font-scale,1))}
 :root .guide-copy p{font-size:calc(calc(11px * 1) * var(--client-font-scale,1))}
 :root .guide-actions .primary{font-size:calc(calc(12px * 1) * var(--client-font-scale,1))}
}
@media(max-width:720px){
 :root .game-layout{grid-template-rows:minmax(188px,45%) minmax(0,1fr)}
 :root .phase-heading h1{font-size:calc(clamp(13px,calc(13px * 1),17px) * var(--client-font-scale,1))}
 :root .guide-copy h2{font-size:calc(calc(16px * 1) * var(--client-font-scale,1))}
 :root .guide-copy p{font-size:calc(calc(11px * 1) * var(--client-font-scale,1))}
 :root .guide-copy .eyebrow{font-size:calc(calc(8px * 1) * var(--client-font-scale,1))}
 :root .guide-actions{max-width:138px}
 :root .guide-actions .primary{font-size:calc(calc(11px * 1) * var(--client-font-scale,1));padding:7px 8px}
 :root .guide-actions .text-button{font-size:calc(calc(10px * 1) * var(--client-font-scale,1))}
 :root .guide-steps{font-size:calc(calc(9px * 1) * var(--client-font-scale,1));gap:5px}
 :root .guide-step-number{width:16px;height:16px;font-size:calc(10px * var(--client-font-scale,1))}
 :root .player-hud{height:64px;min-height:64px}
 :root .hud-item{padding:5px 4px!important}
 :root .hud-item .hud-detail{white-space:normal;font-size:calc(clamp(7px,calc(7px * 1),9px) * var(--client-font-scale,1))}
 :root .topbar .game-audio-controls{justify-content:space-between}
 :root .topbar .game-audio-controls .subtle{flex:1;min-width:0;min-height:44px;font-size:calc(clamp(11px,calc(11px * 1),14px) * var(--client-font-scale,1));padding:5px}
 :root .phase-controls #ready-button,:root .phase-controls #start-button{min-height:44px;font-size:calc(clamp(11px,calc(11px * 1),14px) * var(--client-font-scale,1));max-width:128px}
 :root .phase-controls .clock b{font-size:calc(16px * var(--client-font-scale,1))}
 :root .race-card{min-height:205px}
 :root .landing-story h2{font-size:calc(calc(23px * 1) * var(--client-font-scale,1))}
 .client-options-body{padding:18px 16px}
 .client-scale-controls{gap:8px}
}
@media(max-height:500px) and (orientation:landscape){
 :root .guide-copy h2{font-size:calc(clamp(13px,calc(13px * 1),17px) * var(--client-font-scale,1))}
 :root .guide-copy p{font-size:calc(clamp(10px,calc(10px * 1),12px) * var(--client-font-scale,1))}
 :root .guide-actions .primary{font-size:calc(clamp(11px,calc(11px * 1),13px) * var(--client-font-scale,1));min-height:44px}
 :root .player-hud{height:46px;min-height:46px}
 :root .topbar .game-audio-controls .subtle{padding:4px 6px;min-height:36px}
}
/* On shorter phones the compact guide preserves space for both the map and
   the scrolling operations. The operation text retains the full chosen scale. */
@media(max-width:720px) and (max-height:780px) and (orientation:portrait){
 :root .game-layout{grid-template-rows:minmax(180px,45%) minmax(0,1fr)}
 :root .phase-bar{gap:4px 7px;padding-top:4px;padding-bottom:5px}
 :root .turn-guide{padding:6px 8px;row-gap:3px}
 :root .guide-copy .eyebrow,:root .guide-steps,:root .guide-actions .text-button{display:none}
 :root .guide-copy h2{font-size:calc(clamp(15px,calc(16px * 1),18px) * var(--client-font-scale,1));line-height:1.15;margin:0 0 3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 :root .guide-copy p{font-size:calc(clamp(11px,calc(11px * 1),13px) * var(--client-font-scale,1));line-height:1.35;-webkit-line-clamp:1}
 :root .guide-actions .primary{font-size:calc(clamp(11px,calc(11px * 1),14px) * var(--client-font-scale,1));min-height:44px}
}
/* The phone-wide input zoom guard uses !important. Preserve that guard's
   minimum while letting the auction's large numeric fields follow text size. */
@media(max-width:600px){
 :root .live-auction-dialog #live-price{font-size:calc(calc(17px * 1) * var(--client-font-scale,1)) !important}
 :root .live-auction-dialog #live-quantity{font-size:calc(calc(17px * 1) * var(--client-font-scale,1)) !important}
}

/* Small headings and labels use the same personal text scale as instructions. */
:root body .eyebrow{font-size:calc(calc(10px * 1) * var(--client-font-scale,1)) !important;line-height:1.4;letter-spacing:.08em}
:root .panel-heading h2,:root .roster-heading h3{font-size:calc(calc(18px * 1) * var(--client-font-scale,1));line-height:1.25}
:root .land-sale h3,:root .book-column>span,:root .landing-game-steps strong{font-size:calc(calc(14px * 1) * var(--client-font-scale,1));line-height:1.4}
:root .clock>span,:root .room-chip>span,:root .resource-name,:root .event-kicker,:root .pill{font-size:calc(calc(9px * 1) * var(--client-font-scale,1));line-height:1.4}
:root .hud-item .resource-name{font-size:calc(calc(9px * 1) * var(--client-font-scale,1));white-space:normal}
:root .guide-step-number{font-size:calc(calc(10px * 1) * var(--client-font-scale,1));min-width:1.5em;min-height:1.5em}
:root .landing-game-steps span{font-size:calc(calc(13px * 1) * var(--client-font-scale,1));line-height:1.6}
:root .live-modal-heading .eyebrow,:root .live-auction-dialog label{line-height:1.4}

/* One consistent control size; readable labels live in accessible names/tooltips. */
.game .topbar{height:auto;min-height:60px;flex:none;gap:12px;padding:6px 16px}
.game .topbar .room-chip{display:flex;align-items:center;gap:9px;min-width:0;padding:0;border:0}
.game .topbar #room-code{font:700 calc(15px * var(--client-font-scale,1))/1.2 'Courier New',monospace;letter-spacing:.06em;color:var(--cream)}
.game .topbar .topbar-actions,.game .topbar .game-audio-controls{display:flex;gap:6px;align-items:center}
.game .topbar .topbar-actions{margin-left:auto}
.game .topbar button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;box-sizing:border-box;border:1px solid #77965a;background:#233d2b;color:#ecedbd;font:700 calc(18px * var(--client-font-scale,1))/1 Arial,sans-serif;letter-spacing:0}
.game .topbar button:hover{background:#3a5834;border-color:#cad77e}
.game .topbar button[hidden]{display:none}
.report-panel .panel-heading{padding:16px 18px;min-height:64px;height:auto;box-sizing:border-box}
.report-panel .table-wrap{padding:12px 18px 20px;box-sizing:border-box;min-width:0;overflow:auto}
.report-panel table{width:100%;border-collapse:collapse}
.report-panel .empty-report{margin:0;padding:6px 0;line-height:1.6}
.development-supplies{margin-top:16px;padding-top:14px;border-top:1px solid #566d46}
@media(max-width:900px){
 .game .topbar .connection{display:none}
 .game .topbar .room-chip>span{display:none}
}
@media(max-width:600px){
 .game .topbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;padding:4px 8px;min-height:96px}
 .game .topbar .brand{margin:0;flex:none}
 .game .topbar .room-chip{margin-left:auto;order:0}
 .game .topbar .topbar-actions{flex-basis:100%;margin:0;justify-content:space-between;gap:4px}
 .game .topbar .game-audio-controls{gap:4px}
 .report-panel .panel-heading{padding:12px}
 .report-panel .table-wrap{padding:10px 12px 16px}
}
@media(max-width:600px){
 .game .map-footer{flex-wrap:nowrap;overflow-x:auto;min-height:22px;height:22px}
 .game .terrain-legend{flex-wrap:nowrap;white-space:nowrap}
}


@media(max-width:600px){
 .game .topbar{padding-top:2px;padding-bottom:2px;row-gap:2px;min-height:94px}
}


/* Mobile has one document scroll. Tabs select content; their panels never trap vertical swipes. */
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1000px){
 html{height:auto;overflow-y:auto}
 body.is-playing{height:auto;min-height:100dvh;overflow:visible}
 body.is-playing .game{height:auto;min-height:100dvh;overflow:visible}
 body.is-playing .game-layout{display:flex;flex-direction:column;flex:none;gap:12px;min-height:0;overflow:visible;padding-bottom:12px}
 body.is-playing .planet-panel{height:auto;min-height:0;flex:none}
 body.is-playing .map-scroll{height:clamp(240px,62vw,460px);min-height:240px;max-height:none;flex:none;overscroll-behavior:auto}
 body.is-playing .planet-panel>.panel-heading{height:auto;min-height:44px;flex-wrap:wrap;row-gap:8px;padding:8px}
 body.is-playing .planet-panel:has(.world-overview-toggle:not([hidden]))>.panel-heading{height:auto}
 body.is-playing .map-tools{flex-wrap:wrap;max-width:100%;gap:4px}
 body.is-playing .map-tools .icon-button{min-width:44px;height:44px;flex-shrink:0}
 body.is-playing .map-footer{height:auto;min-height:26px;flex-wrap:wrap;overflow:visible;padding:5px 8px}
 body.is-playing .terrain-legend{flex-wrap:wrap;white-space:normal}
 body.is-playing .colony-status{padding:7px 8px;min-height:15px}
 body.is-playing .command-dock{display:block;height:auto;min-height:0;overflow:visible}
 body.is-playing .dock-content{height:auto;max-height:none;min-height:0;overflow:visible;overscroll-behavior:auto}
 body.is-playing :is(.operations-column,.colonists-panel,.activity-panel,.chat-panel,.report-panel,.players,.activity,.chat-messages){height:auto;max-height:none;min-height:0;overflow:visible}
 body.is-playing .workspace-tabs{height:auto;min-height:46px}
 body.is-playing .game-footer{height:auto;min-height:26px;flex-wrap:wrap;line-height:1.5}
 body.is-playing .guide-copy h2{display:block;overflow:visible;-webkit-line-clamp:unset}
 body.is-playing .guide-copy p{display:block;overflow:visible;-webkit-line-clamp:unset}
 body.is-playing .turn-guide{align-items:center}
 dialog[open]{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
 :is(.help-content,.settings-fields,.event-list,.client-options-body,.world-reading-entries,.event-history-list){max-height:none;overflow-y:visible}
 .world-event-dialog{inset:6px;margin:auto;width:calc(100% - 12px)}
 .world-reading-footer{position:static}
}

/* Whole-page mobile flow has room to show complete phase names and balances. */
@media(max-width:720px), (hover:none) and (pointer:coarse) and (max-width:1000px){
 body.is-playing .phase-heading{display:block;min-width:0;overflow:visible}
 body.is-playing .phase-heading h1,body.is-playing .phase-heading .eyebrow{white-space:normal;overflow:visible;text-overflow:clip;max-width:none;overflow-wrap:anywhere}
 body.is-playing .player-hud{grid-template-columns:repeat(3,minmax(0,1fr));height:auto;min-height:0}
 body.is-playing .hud-item{height:auto;min-height:76px;overflow:visible;padding:8px!important}
 body.is-playing .hud-item strong{display:block;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25}
 body.is-playing .hud-item .resource-name,body.is-playing .hud-item .hud-detail{white-space:normal;overflow:visible;overflow-wrap:anywhere}
 body.is-playing .hud-item:nth-child(4){border-left:0!important}
 body.is-playing .hud-item:nth-child(n+4){border-top:1px solid #566c46!important}
}

/* Selection uses an inner white marker; the outer border always shows ownership. */
.world-map .tile.selected{outline:none!important;box-shadow:none!important}
.world-map .tile.owned:hover,.world-map .tile.owned.guide-eligible{--plot-line-color:var(--owner-color)}
.world-map .tile .tile-selection{position:absolute;inset:20%;z-index:8;pointer-events:none;border:max(1px,var(--art-pixel)) dashed #fff8d5;box-shadow:0 0 0 1px #132c21,inset 0 0 0 1px #132c21}
.world-map .tile.selected:focus-visible .tile-selection{border-style:solid}
.production-explanation{margin-top:16px;padding-top:14px;border-top:1px solid #627851}
.production-explanation h3{font-size:calc(15px * var(--client-font-scale,1));line-height:1.35;letter-spacing:0}
.production-explanation .production-context,.production-explanation .production-note{font-size:calc(11px * var(--client-font-scale,1));line-height:1.5;color:#c1ccb0;margin:8px 0}
.production-explanation dl{margin:10px 0;font-size:calc(12px * var(--client-font-scale,1))}
.production-explanation dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;border-bottom:1px solid #526b443d;padding:7px 0}
.production-explanation dt{min-width:0;overflow-wrap:anywhere}
.production-explanation dt small{display:block;font-size:calc(10px * var(--client-font-scale,1));line-height:1.45;color:#becaa8;margin-top:3px}
.production-explanation dd{margin:0;font-variant-numeric:tabular-nums;color:#f3e7b9;font-weight:bold;overflow-wrap:anywhere;max-width:130px}
.production-explanation .production-total{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px;background:#1b3426;font-size:calc(13px * var(--client-font-scale,1));margin:10px 0 6px}
.production-total strong{color:#d4eaa2}