/* Keep the city visible. Labels and details live in the panels opened on demand. */
body,.game-shell{height:100dvh}
:root{--papyrus-width:clamp(190px,28vw,238px);--selection-width-limit:min(260px,calc(100vw - 2 * var(--papyrus-width) - 40px))}
.rail,.topbar,.mission-card,.advisor,.mobile-nav,.map-label,.map-coordinates,.mobile-date{display:none!important}
.game-shell{margin:0;position:fixed;inset:0}
.world{position:absolute;inset:0;width:100%;height:100%}
.resource-bar{position:absolute;z-index:9;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));height:36px;width:max-content;max-width:calc(100% - 16px);padding:0 3px;gap:0;background:#162c2470;border:1px solid #ffffff16;border-radius:10px;box-shadow:none;backdrop-filter:none}
.resource-bar .resource{height:34px;min-height:44px;flex:none;padding:0 8px;gap:5px;border:0;min-width:44px;max-width:none}
.resource-bar .resource:first-child{padding-left:8px}
.resource-bar .resource-icon{display:grid;width:16px;height:18px;background:none;border:0}
.resource-bar .resource-icon svg{width:14px;height:14px}
.resource-bar .resource strong{font-size:12px;letter-spacing:0;color:#f0eddb;text-shadow:0 1px 3px #09271b99;font-weight:650}
.resource-bar .resource small,.resource-bar .resource-change,.resource-bar .calendar,.resource-bar .resource em{display:none}
.resource-bar #happiness em{display:inline;font-size:9px;color:#ede9d0;margin:0}
.game-actions,.camera-controls,.time-control{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:2px;height:44px;z-index:7;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.game-actions{left:max(8px,env(safe-area-inset-left))}
.camera-controls{left:max(8px,env(safe-area-inset-left));top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;height:auto;width:44px}
.time-control{left:auto;right:max(8px,env(safe-area-inset-right))}
.game-actions button,.camera-controls button,.time-control>button{position:relative;display:grid;place-items:center;isolation:isolate;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;background:none;border:0;border-radius:12px;color:#ecedda;font-size:11px;box-shadow:none;backdrop-filter:none}
.game-actions button:before,.camera-controls button:before,.time-control>button:before{content:'';position:absolute;inset:4px;z-index:-1;background:#152d2470;border:1px solid #f1e2b02a;border-radius:10px;transition:background .15s}
.game-actions button:hover:before,.camera-controls button:hover:before,.time-control>button:hover:before{background:#152d24b3}
.game-actions svg,.camera-controls svg,.time-control svg{width:18px;height:18px;stroke-width:1.8}
.game-actions button>span,.time-indicator,.events-button{display:none}
.game-actions .build-trigger{color:#ffde95}
.game-actions .build-trigger:before{border-color:#ead19b70;background:#93743850}
.build-open .build-trigger:before{background:#b393506b}
.time-control #pause{color:#efda9a;border:0;border-radius:12px}
#speed-value{position:absolute;bottom:5px;right:3px;font-size:9px;line-height:13px;color:#f3dda5;background:#203427cc;border-radius:4px;padding:0 2px}
#speed-toggle svg{width:17px;transform:translate(-2px,-3px)}
.founding-tip{position:absolute;left:max(8px,env(safe-area-inset-left));top:52px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;background:#152d2459;border:1px solid #eed18d40;border-radius:12px;transform:none;box-shadow:none}
.founding-tip img{width:38px;height:38px;object-fit:contain}
.founding-tip>svg{display:none}
#founding-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.build-dock{display:none;position:absolute;left:8px;right:8px;bottom:60px;max-width:840px;margin:auto;border-radius:12px;background:#173027bd;border:1px solid #eee0b521;box-shadow:none;backdrop-filter:none;z-index:8}
.build-open .build-dock{display:block}
.dock-header{height:44px;padding:0 5px;gap:5px}
.dock-title{display:none}
.build-tabs{display:flex;flex:1;gap:2px;overflow:auto;height:44px;scrollbar-width:none}
.build-tabs button{display:grid;place-items:center;min-width:44px;height:44px;flex-shrink:0;padding:0;border-bottom-width:2px}
.build-tabs button>span{display:none}
.build-tabs button svg{width:18px;height:18px}
#demolish,#build-close{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0!important;color:#d2d7ba;font-size:21px;border:0!important}
#build-close svg{width:17px;height:17px}
.building-list{padding:5px 7px;gap:5px;scrollbar-width:none;touch-action:pan-x}
.building-card{user-select:none;-webkit-touch-callout:none}
.building-card img{pointer-events:none}
.building-card{flex:none;min-width:96px;max-width:96px;height:54px;padding:0 5px 0 0;gap:2px;background:#ffffff05;border-color:#ffffff12}
.building-card img{width:39px;height:39px}
.building-card strong{font-size:9px;line-height:1.3;white-space:normal}
.building-card small{display:flex;gap:3px;align-items:center;font-size:9px;margin-top:3px}
.building-card small svg,.lock-label svg{width:10px;height:10px}
.lock-label{display:flex;align-items:center;gap:2px;font-size:8px;padding:1px 3px}
.dock-footer{height:23px;padding:0 10px 6px;justify-content:flex-end}
.dock-footer>span:first-child{display:none}
.materials{display:flex;gap:4px;align-items:center;font-size:10px;color:#d7d8be}
.materials svg{width:13px;height:13px;margin-left:8px}
.materials b{font-weight:500}
.selection-hint{top:max(8px,env(safe-area-inset-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);max-width:var(--selection-width-limit);width:max-content;min-height:44px;height:auto;padding:0 2px 0 5px;gap:6px;white-space:normal;border-radius:10px;background:#173027a3;border-color:#e2ce9840;box-shadow:none;font-size:10px}
#selection-text{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;padding:4px 0}
#selection-text img{width:32px;height:32px}
#selection-text strong{font-weight:500;font-size:10px}
#selection-text svg{width:12px;height:12px;color:#e6ce93}
#selection-text small{font-size:10px}
.selection-hint button{display:grid;place-items:center;min-width:44px;width:44px;height:44px;font-size:22px}
.toast-stack{left:8px;bottom:62px;max-width:250px}
.building-selected .toast-stack{bottom:62px}
.build-open .toast-stack{bottom:200px}
.toast{font-size:10px;line-height:1.6;padding:8px 11px;background:#173027bf;box-shadow:none;border-radius:9px}
.toast strong{font-size:10px}
.inspector{top:52px;left:auto;right:8px;width:248px;max-height:calc(100% - 112px);padding:13px;background:#173027de;border-radius:12px;box-shadow:none}
.inspector-head img{width:44px;height:44px}
.inspector-head h2{font-size:16px}
.inspector>p{font-size:10px;margin:10px 0}
.inspector-close{display:grid;place-items:center;top:3px;right:3px;width:44px;height:44px}
.inspector-head{padding-right:26px}
.inspector .info-row,.inspector .service-row{font-size:10px}
dialog{max-height:calc(100dvh - 24px);border-radius:15px;background:#173027ed;box-shadow:0 12px 50px #0d211733}
dialog::backdrop{background:#0c241d42;backdrop-filter:none}
dialog[data-panel="building-info"]{max-width:460px}
dialog[data-panel="building-info"] .dialog-inner{padding:15px 20px}
.catalog-info-head{display:flex;align-items:center;gap:12px;padding-right:44px;min-height:58px}
.catalog-info-head img{width:58px;height:58px;flex:none}
.catalog-info-head .panel-title{font-size:23px;margin:5px 0}
.catalog-info-head .panel-eyebrow{font-size:8px;letter-spacing:1px}
dialog[data-panel="building-info"] .panel-intro{margin:10px 0;line-height:1.6}
.catalog-info-cost{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #ffffff12;font-size:11px}
.catalog-info-cost .build-costs{gap:12px;font-size:13px}
.catalog-info-cost .cost-item svg{width:15px;height:15px}
.catalog-info-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.catalog-info-facts .panel-stat{padding:10px}
.catalog-info-facts .panel-stat strong{font-size:15px}
.catalog-info-facts .panel-stat span{font-size:8px;line-height:1.5}
.catalog-info-unlock{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:10px;color:#a9c69d}
.catalog-info-unlock.pending{color:#e0bd85}
.catalog-info-unlock svg{width:14px;height:14px;flex:none}
.dialog-inner{padding:22px 25px}
.dialog-close{position:sticky;float:right;right:0;top:0;z-index:2;width:44px;height:44px;background:#17302766;border-radius:10px}
.panel-title{font-size:25px;margin:10px 0}
.panel-intro{font-size:11px;line-height:1.75;margin-bottom:18px}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.menu-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:60px;padding:7px 4px;border:1px solid #fff2;border-radius:10px;background:#ffffff08;color:#dacf9e}
.menu-grid button:hover{background:#d8bd7c20}
.menu-grid button>span{display:block;font-size:10px;line-height:1.25;text-align:center}
.menu-grid svg{width:19px;height:19px}
.menu-grid [data-panel-action="reset"]{color:#e1ae92;border-color:#bd80584d}
.menu-save-status{font-size:10px;line-height:1.5;color:#c7d6ac;margin:9px 0 0}
.menu-save-status.failed{color:#e1ae92}
.audio-volume{display:grid;grid-template-columns:minmax(120px,1fr) minmax(90px,1fr) 35px;align-items:center;gap:12px;margin:15px 0;color:#c9d3b8;font-size:11px}
.audio-volume input{width:100%;min-height:44px;margin:0;accent-color:var(--gold)}
.audio-volume output{text-align:right;color:var(--gold);font-size:10px}
.senate-review{border-left:2px solid #d8bd7c70;padding:12px 14px;margin:12px 0;background:#d8bd7c08;border-radius:0 8px 8px 0}
.senate-review .coverage-row{margin:9px 0}
.senate-review p{margin:6px 0;line-height:1.5}
.senate-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media(max-width:480px){.senate-goals{grid-template-columns:1fr}}
.senate-criteria summary{cursor:pointer;font-size:11px;color:#c9d3b8;min-height:44px;display:flex;align-items:center}
.senate-criteria summary::before{content:'▸';margin-right:8px;color:var(--gold)}
.senate-criteria[open] summary::before{content:'▾'}
.emergency-market{margin:16px 0;border:1px solid #d8bd7c38;border-radius:8px;padding:0 12px;background:#d8bd7c08}
.emergency-market summary{cursor:pointer;min-height:44px;align-content:center;color:var(--gold);font-size:12px}
.emergency-resource{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #ffffff12}
.emergency-resource>div>strong{font-size:12px}
.emergency-resource small{display:block;color:#b9c3b1;font-size:11px;margin-top:3px}
.emergency-lots{display:flex;gap:6px}
.emergency-lots button{min-height:48px;padding:6px 10px;text-align:center}
.emergency-lots button strong{font-size:11px}
@media(max-width:480px){.emergency-resource{display:block}.emergency-lots{margin-top:10px}.emergency-lots button{flex:1}}
dialog[data-panel="audio"] .control-row .action-button{display:flex;align-items:center;gap:7px;min-height:44px}
dialog[data-panel="audio"] .audio-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
dialog[data-panel="audio"] .dialog-inner{padding:14px 22px}
dialog[data-panel="audio"] .control-row{padding:4px 0;margin:0}
dialog[data-panel="audio"] .audio-volume{grid-template-columns:minmax(0,1fr) 30px;gap:8px;margin:4px 0}
dialog[data-panel="audio"] .audio-volume>span{grid-column:1/-1;font-size:10px}
dialog[data-panel="audio"] .panel-title{font-size:24px;margin:8px 0}
dialog[data-panel="audio"] .panel-intro{margin:0 0 8px}
dialog[data-panel="audio"] .button-row{margin-top:6px}
dialog[data-panel="audio"] .button-row .action-button{min-height:44px}
@media(max-width:480px){dialog[data-panel="audio"] .audio-settings{grid-template-columns:1fr;gap:10px}}
dialog[data-panel="audio"] .action-button svg{width:17px;height:17px}
dialog[data-panel="menu"]{max-width:420px;background:#173027e8}
dialog[data-panel="menu"] .dialog-inner{padding:13px 17px 17px}
dialog[data-panel="menu"] .panel-eyebrow{display:none}
dialog[data-panel="menu"] .panel-title{font-size:20px;margin:12px 0 7px}
dialog[data-panel="menu"] .panel-intro{font-size:10px;margin-bottom:16px}
dialog[data-panel="menu"] .button-row{margin-top:9px;gap:7px}
dialog[data-panel="menu"] .button-row button{display:grid;place-items:center;padding:0;width:48px;height:44px;background:#ffffff08;border-color:#fff2}
dialog[data-panel="menu"] .button-row svg{width:18px;height:18px}
@media(max-width:480px){.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rotate-prompt{display:none}
@media(max-width:400px){
  .resource-bar .resource{padding:0 6px;gap:4px}
  .resource-bar .resource:first-child{padding-left:6px}
  .inspector{left:8px;right:8px;width:auto}
  .dialog-inner{padding:18px}
  .build-tabs{gap:0}
}

@media(max-height:450px){
  .dialog-inner{padding:16px 22px}
  .panel-title{font-size:23px}
  .panel-stats{margin:12px 0}
  .button-row{margin-top:14px}
  dialog[data-panel="menu"] .panel-intro{margin-bottom:12px}
  .menu-grid button{min-height:48px;padding:4px;gap:4px}
  .menu-grid svg{width:17px;height:17px}
  .menu-grid button>span{font-size:9.5px;line-height:1.2}
}
@media(orientation:portrait){
  .touch-device:not(.portrait-allowed) .rotate-prompt{display:flex;position:fixed;inset:0;z-index:30;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;background:#172b24ef}
  .rotate-phone{width:49px;height:83px;border:2px solid #d4be83;border-radius:12px;display:grid;place-items:center;font-size:28px;color:#d4be83;transform:rotate(90deg);margin-bottom:45px}
  .rotate-prompt .eyebrow{color:#afbb99;font-size:9px}
  .rotate-prompt h2{font-family:'Manrope',sans-serif;font-size:28px;font-weight:500;letter-spacing:-.8px;margin:14px 0 9px}
  .rotate-prompt p{color:#a6b79c;font-size:12px;line-height:1.8;max-width:260px;margin:0 0 27px}
  .rotate-prompt .action-button{min-height:44px}
}
/* Materials stay visible while the build palette is closed. */
.resource-bar{max-width:calc(100% - 70px);height:auto;min-height:36px;flex-wrap:wrap}
.resource-bar .resource{padding:0 6px;gap:4px;min-height:36px}
.resource-bar .resource strong{font-size:11px}
.resource-bar .resource-icon{width:14px}
.building-card{min-width:136px;max-width:136px;height:62px}
.building-card>span{min-width:0;flex:1}
.build-costs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px;color:#e9d9a5;font-size:9px;line-height:12px}
.cost-item{display:inline-flex;gap:2px;align-items:center;white-space:nowrap}
.cost-item svg{width:10px;height:10px;flex:none}
.cost-item.insufficient{color:#ff9d8b}
#selection-text .build-costs{margin:0;font-size:10px;gap:7px}
#selection-text .cost-item svg{width:12px;height:12px}
.view-controls{position:absolute;bottom:calc(64px + env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));z-index:10}
#view-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;background:#173027b3;border:1px solid #e8ddb85c;border-radius:50%;color:#ede5c7;box-shadow:0 3px 14px #0c261f35}
#view-toggle svg{width:21px;height:21px}
#view-toggle.active{color:#96dcf9;border-color:#96dcf980}
#view-toggle[aria-expanded="true"]{background:#173027ed;border-color:#ead39a}
#view-toggle:focus-visible,#view-picker button:focus-visible{outline:2px solid #f3d697;outline-offset:3px}
#view-picker{position:absolute;bottom:54px;right:0;max-height:calc(100dvh - 140px);overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);width:230px;gap:5px;padding:8px;border:1px solid #ffffff26;border-radius:12px;background:#173027e8}
#view-picker[hidden],#view-legend[hidden]{display:none}
#view-picker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:52px;border:1px solid #fff2;border-radius:8px;background:#ffffff08;color:var(--view-color);font-size:9px}
#view-picker svg{width:18px;height:18px}
#view-picker button[aria-pressed="true"]{border-color:var(--view-color);background:#ffffff1c}
#view-legend{position:absolute;right:8px;top:52px;z-index:6;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:300px;padding:7px 9px;border-radius:9px;background:#173027bd;color:#e4e4d0;font-size:9px;pointer-events:none}
#view-legend>span{display:flex;align-items:center;gap:4px}
#view-legend>span:before{content:'';width:7px;height:7px;border-radius:2px;background:var(--view-color)}
#view-legend>small{flex-basis:100%;font-size:8px;text-align:right;color:#cbd7c9}
@media(max-width:480px){.resource-bar .resource{padding:0 5px}.founding-tip{top:88px}.inspector{top:92px}#view-legend{top:92px;max-width:240px}}

.building-selected #view-legend{top:calc(104px + env(safe-area-inset-top))}
@media(max-width:480px){.selection-hint{top:calc(88px + env(safe-area-inset-top))}.building-selected #view-legend{top:calc(140px + env(safe-area-inset-top))}}

@media(min-width:481px){.building-selected .resource-bar{max-width:calc(50% - var(--selection-width-limit)/2 - 16px)}.papyrus-open:not(.building-selected) .resource-bar{max-width:calc(100% - var(--papyrus-width) - 28px)}}
@media(max-width:480px){.selection-hint{max-width:calc(100% - 20px)}}
/* The chronicle unfolds over a small part of the map, without a backdrop. */
#event-papyrus{position:absolute;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:var(--papyrus-width);z-index:8;pointer-events:none;color:#503d25}
.paper-trigger{position:relative;float:right;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;pointer-events:auto;background:#e3cc957c;border:1px solid #dbc39399;color:#f5e1b3;box-shadow:0 3px 12px #10282026}
.paper-trigger svg{width:20px;height:20px}
.paper-badge{position:absolute;right:-1px;top:-2px;min-width:17px;height:17px;border-radius:50%;background:#a34839;color:#fff0d2;font-size:9px;line-height:17px;text-align:center;padding:0 3px}
.event-scroll{position:relative;pointer-events:auto;filter:drop-shadow(0 6px 12px #15302542);padding:5px 0}
.scroll-sheet{position:relative;overflow:hidden;padding:9px 16px 4px;background:repeating-linear-gradient(4deg,#89632a08 0 1px,transparent 1px 4px),radial-gradient(ellipse at 45% 38%,#f4e6bf 10%,#e6ce9a 65%,#d4b078 100%);border-left:1px solid #ab7e473b;border-right:1px solid #a77a423b;border-radius:2px}
.scroll-sheet:before{content:'';position:absolute;inset:6px;border:1px solid #a4794033;border-radius:1px;pointer-events:none}
.scroll-roll{position:absolute;left:-5px;right:-5px;height:12px;border-radius:8px;background:linear-gradient(#c5a270 0%,#f1dcad 25%,#e2c58d 52%,#a8814e 100%);border:1px solid #956d3d90;z-index:2;box-shadow:0 2px 3px #684b3929}
.scroll-roll:before,.scroll-roll:after{content:'';position:absolute;top:-2px;width:8px;height:14px;border-radius:4px;background:linear-gradient(90deg,#906a3d,#d2aa70,#825d33);border:1px solid #81613e70}
.scroll-roll:before{left:-3px}.scroll-roll:after{right:-3px}
.scroll-roll-top{top:0}.scroll-roll-bottom{bottom:0}
.paper-heading{display:flex;align-items:center;justify-content:space-between;height:27px;margin-bottom:5px;gap:5px}
.paper-heading>span{font-size:7px;letter-spacing:2px;color:#8e7049;font-weight:650}
.event-scroll button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;color:#735633;border-radius:7px;position:relative;z-index:1}
.event-scroll button:hover{background:#ac85551c}
.event-scroll button:disabled{opacity:.28;cursor:default}
.event-scroll button:focus-visible{outline-color:#88602c;outline-offset:-4px}
.event-scroll button svg{width:15px;height:15px}
.paper-heading button{margin-right:-12px}
.paper-notice{max-height:calc(100dvh - 226px);min-height:65px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ab8954 transparent}
.paper-seal{display:grid;place-items:center;float:left;width:31px;height:31px;margin:0 9px 4px 0;border-radius:50%;color:#75683d;border:1px solid #af9567;background:#ccb77933;box-shadow:inset 0 0 0 2px #ecd6a366}
.paper-seal svg{width:19px;height:19px;stroke-width:1.7}
.event-scroll[data-kind="danger"] .paper-seal{color:#aa4332;border-color:#b9775b;background:#b7725620}
.event-scroll[data-kind="warning"] .paper-seal{color:#9b712f}
.event-scroll[data-kind="good"] .paper-seal{color:#507b54;border-color:#83946a}
.paper-title{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:18px;line-height:1.12;margin:3px 0 9px;color:#553d26;min-height:31px}
.paper-message{font-size:11px;line-height:1.65;margin:0 0 7px;clear:both;color:#6b5133}
.paper-footer{display:flex;align-items:center;gap:0;border-top:1px solid #a5844936;height:40px}
.paper-footer button:first-child{margin-left:-9px}
.paper-footer button:last-child{margin-right:-9px}
.paper-footer button[data-paper="older"] svg{transform:rotate(180deg)}
.paper-date{flex:1;font-size:9px;color:#9a7850;white-space:nowrap}
.paper-pending{font-size:9px;color:#a45b38;font-weight:600;margin:0 3px}
.papyrus-open #view-legend{display:none}
.unrolling .scroll-sheet{animation:papyrus-unroll .55s cubic-bezier(.22,.7,.32,1) both}
.unrolling .scroll-roll-bottom{animation:papyrus-roller .55s cubic-bezier(.22,.7,.32,1) both}
.unrolling .paper-notice,.new-notice .paper-notice{animation:papyrus-ink .65s ease both}
.unrolling .paper-seal,.new-notice .paper-seal{animation:papyrus-seal .65s ease both}
.event-scroll[data-kind="danger"] .paper-seal svg{animation:papyrus-alert .6s ease-in-out 3 alternate}
@keyframes papyrus-unroll{from{clip-path:inset(0 0 calc(100% - 6px) 0)}to{clip-path:inset(0)}}
@keyframes papyrus-roller{from{transform:translateY(calc(12px - var(--paper-height,190px)))}to{transform:translateY(0)}}
@keyframes papyrus-ink{0%,35%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes papyrus-seal{0%,40%{transform:scale(.7) rotate(-12deg)}70%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes papyrus-alert{from{transform:translateY(1px) scale(.92)}to{transform:translateY(-1px) scale(1.07)}}
@media(max-width:480px){#event-papyrus{width:220px}.papyrus-open #event-papyrus{top:calc(140px + env(safe-area-inset-top))}.paper-notice{max-height:calc(100dvh - 306px)}}
@media(max-height:350px) and (min-width:481px){.paper-notice{min-height:45px;max-height:calc(100dvh - 174px)}.paper-title{font-size:16px}.paper-message{font-size:10px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.unrolling .scroll-sheet,.unrolling .scroll-roll-bottom,.unrolling .paper-notice,.new-notice .paper-notice,.unrolling .paper-seal,.new-notice .paper-seal,.event-scroll[data-kind="danger"] .paper-seal svg{animation:none}}

.papyrus-open .view-controls{bottom:max(8px,env(safe-area-inset-bottom));right:calc(104px + env(safe-area-inset-right))}

/* Contextual planning stays off the permanent HUD. */
.planning-hint{position:absolute;bottom:69px;left:50%;transform:translateX(-50%);max-width:calc(100% - 130px);padding:8px 12px;border-radius:5px;background:#e8e2cde8;border:1px solid #98a27f;color:#445440;font-size:11px;line-height:1.4;text-align:center;pointer-events:none;box-shadow:0 2px 6px #263b2520}
.planning-hint.warning{border-color:#b88861;color:#805435}
.commission-panel{margin:20px 0;padding:16px 0;border-bottom:1px solid #9b936343}
.commission-panel h3{font-size:16px;margin:8px 0;color:var(--ink)}
.commission-panel p{font-size:12px;line-height:1.6;color:var(--muted)}
.commission-options{display:flex;gap:8px;flex-wrap:wrap}
.commission-options button{flex:1;min-width:155px;text-align:left;padding:12px}
.commission-options strong,.commission-options small{display:block;font-weight:500;line-height:1.5}
.commission-options small{font-size:10px;margin-top:4px}

.commission-result{padding:10px 12px;border:1px solid #84916b55;border-radius:4px;background:#91a67218;color:#49603e;font-size:12px}
.service-view-select{width:130px;font-size:11px;margin:0;padding:9px}

/* Desktop gets a smaller increase than the touch layout. */
body:not(.compact-ui) .resource-bar .resource{min-height:40px;height:40px;gap:5px}
body:not(.compact-ui) .resource-bar .resource-icon,
body:not(.compact-ui) .resource-bar .resource-icon svg{width:17px;height:17px}
body:not(.compact-ui) .resource-bar .resource strong{font-size:13px}
body:not(.compact-ui) .resource-bar #happiness em{font-size:11px}
body:not(.compact-ui) .game-actions svg,
body:not(.compact-ui) .camera-controls svg,
body:not(.compact-ui) .time-control svg,
body:not(.compact-ui) #speed-toggle svg,
body:not(.compact-ui) #view-toggle svg,
body:not(.compact-ui) .paper-trigger svg{width:22px;height:22px}
body:not(.compact-ui) #speed-value{font-size:11px;line-height:14px;bottom:3px}
body:not(.compact-ui) .founding-tip{top:56px;width:48px;height:48px}
body:not(.compact-ui) .founding-tip img{width:44px;height:44px}
body:not(.compact-ui) .build-tabs button svg,
body:not(.compact-ui) #build-close svg{width:22px;height:22px}
body:not(.compact-ui) #demolish{font-size:25px}
body:not(.compact-ui) .building-card{min-width:168px;max-width:168px;height:80px;gap:4px;padding-right:7px}
body:not(.compact-ui) .building-card img{width:58px;height:58px;flex:none}
body:not(.compact-ui) .building-card strong{font-size:12px;line-height:1.35}
body:not(.compact-ui) .build-costs{font-size:11px;line-height:15px;gap:4px 6px}
body:not(.compact-ui) .cost-item svg{width:12px;height:12px}
body:not(.compact-ui) .lock-label{font-size:10px;padding:2px 4px}
body:not(.compact-ui) .lock-label svg{width:12px;height:12px}
body:not(.compact-ui) .materials{font-size:12px}
body:not(.compact-ui) .materials svg{width:16px;height:16px}
body:not(.compact-ui).build-open .view-controls,
body:not(.compact-ui):has(.inspector:not([hidden])) .view-controls{bottom:max(8px,env(safe-area-inset-bottom));right:calc(104px + env(safe-area-inset-right))}
body:not(.compact-ui).build-open .toast-stack{bottom:220px}
body:not(.compact-ui) #selection-text img{width:42px;height:42px;flex:none}
body:not(.compact-ui) #selection-text strong,
body:not(.compact-ui) #selection-text small{font-size:12px}
body:not(.compact-ui) #selection-text .build-costs{font-size:11px;line-height:15px;gap:4px 6px}
body:not(.compact-ui) .selection-hint button,
body:not(.compact-ui) .dialog-close,
body:not(.compact-ui) .inspector-close{font-size:25px}
body:not(.compact-ui) .inspector{width:286px;top:56px;max-height:calc(100% - 116px);background:var(--papyrus-solid)}
body:not(.compact-ui):has(.inspector:not([hidden])) #view-legend{display:none}
body:not(.compact-ui) .inspector-head img{width:60px;height:60px;flex:none}
body:not(.compact-ui) .inspector-head h2{font-size:20px}
body:not(.compact-ui) .inspector-head small{font-size:10px}
body:not(.compact-ui) .inspector>p,
body:not(.compact-ui) .panel-intro,
body:not(.compact-ui) .help-step p,
body:not(.compact-ui) .mission-panel p,
body:not(.compact-ui) .event-entry p,
body:not(.compact-ui) .warning-text,
body:not(.compact-ui) .finish-legacy{font-size:13px;line-height:1.65}
body:not(.compact-ui) .status-tag{font-size:11px}
body:not(.compact-ui) .info-row,
body:not(.compact-ui) .service-row,
body:not(.compact-ui) .inspector .info-row,
body:not(.compact-ui) .inspector .service-row,
body:not(.compact-ui) .control-row,
body:not(.compact-ui) .coverage-row>div:first-child{font-size:13px}
body:not(.compact-ui) .dialog-inner{font-size:13px;line-height:1.5}
body:not(.compact-ui) .panel-title{font-size:27px}
body:not(.compact-ui) .panel-stat span{font-size:11px}
body:not(.compact-ui) .panel-stat strong{font-size:24px}
body:not(.compact-ui) .panel-eyebrow,
body:not(.compact-ui) .eyebrow{font-size:10px}
body:not(.compact-ui) .panel-section-title,
body:not(.compact-ui) .action-button,
body:not(.compact-ui) .scenario-grid button,
body:not(.compact-ui) .trade-table,
body:not(.compact-ui) .trade-table select,
body:not(.compact-ui) .service-view-select,
body:not(.compact-ui) .house-cap-label,
body:not(.compact-ui) .house-cap-label select{font-size:13px}
body:not(.compact-ui) .control-row small,
body:not(.compact-ui) .trade-table th,
body:not(.compact-ui) .senate-criteria summary,
body:not(.compact-ui) .emergency-resource small,
body:not(.compact-ui) .commission-options small{font-size:12px}
body:not(.compact-ui) .trade-table select{max-width:130px}
body:not(.compact-ui) .service-view-select{width:160px;flex-shrink:0}
body:not(.compact-ui) .help-step h3,
body:not(.compact-ui) .mission-panel h3{font-size:15px}
body:not(.compact-ui) .event-entry strong{font-size:14px}
body:not(.compact-ui) .event-entry small{font-size:11px}
body:not(.compact-ui) .stepper button{min-width:34px;min-height:34px;font-size:20px}
body:not(.compact-ui) dialog[data-panel="menu"]{max-width:480px}
body:not(.compact-ui) dialog[data-panel="menu"] .panel-title{font-size:24px}
body:not(.compact-ui) dialog[data-panel="menu"] .panel-intro{font-size:13px}
body:not(.compact-ui) .menu-grid button{min-height:66px}
body:not(.compact-ui) .menu-grid button>span{font-size:12px;line-height:1.3}
body:not(.compact-ui) .menu-grid svg{width:22px;height:22px}
body:not(.compact-ui) .menu-save-status,
body:not(.compact-ui) .audio-volume,
body:not(.compact-ui) .audio-volume output,
body:not(.compact-ui) dialog[data-panel="audio"] .audio-volume>span{font-size:12px}
body:not(.compact-ui) dialog[data-panel="audio"] .action-button svg{width:20px;height:20px}
body:not(.compact-ui) .catalog-info-head img{width:80px;height:80px}
body:not(.compact-ui) .catalog-info-head .panel-title{font-size:24px}
body:not(.compact-ui) .catalog-info-head .panel-eyebrow{font-size:10px}
body:not(.compact-ui) .catalog-info-cost{font-size:13px}
body:not(.compact-ui) .catalog-info-cost .build-costs{font-size:14px}
body:not(.compact-ui) .catalog-info-cost .cost-item svg{width:17px;height:17px}
body:not(.compact-ui) .catalog-info-facts .panel-stat strong{font-size:18px}
body:not(.compact-ui) .catalog-info-facts .panel-stat span{font-size:11px}
body:not(.compact-ui) .catalog-info-unlock{font-size:12px}
body:not(.compact-ui) #view-picker{width:260px}
body:not(.compact-ui) #view-picker button{min-height:60px;font-size:11px}
body:not(.compact-ui) #view-picker svg{width:22px;height:22px}
body:not(.compact-ui) #view-legend,
body:not(.compact-ui) #view-legend>small{font-size:11px}
body:not(.compact-ui) .paper-badge{font-size:11px}
body:not(.compact-ui) .paper-heading>span{font-size:9px;letter-spacing:1px}
body:not(.compact-ui) .event-scroll button svg{width:19px;height:19px}
body:not(.compact-ui) .paper-title{font-size:20px}
body:not(.compact-ui) .paper-message{font-size:13px}
body:not(.compact-ui) .paper-date,
body:not(.compact-ui) .paper-pending{font-size:11px}
body:not(.compact-ui) .paper-footer{height:auto;min-height:44px;flex-wrap:wrap}
body:not(.compact-ui) .planning-hint,
body:not(.compact-ui) .toast,
body:not(.compact-ui) .toast strong{font-size:12px}

/* Mobile readability: bigger content, while the map controls stay collapsible. */
body.compact-ui .resource-bar .resource{min-height:44px;height:44px;padding:0 7px;gap:5px}
body.compact-ui .resource-bar .resource-icon{width:20px;height:22px}
body.compact-ui .resource-bar .resource-icon svg{width:20px;height:20px}
body.compact-ui .resource-bar .resource strong{font-size:15px}
body.compact-ui .resource-bar #happiness em{font-size:12px}
body.compact-ui .game-actions svg,
body.compact-ui .camera-controls svg,
body.compact-ui .time-control svg,
body.compact-ui #speed-toggle svg,
body.compact-ui #view-toggle svg,
body.compact-ui .paper-trigger svg{width:26px;height:26px}
body.compact-ui #speed-value{font-size:12px;line-height:16px;bottom:2px}
body.compact-ui .founding-tip{top:60px;width:52px;height:52px}
body.compact-ui .founding-tip img{width:50px;height:50px}
body.compact-ui .dock-header,
body.compact-ui .build-tabs{height:48px}
body.compact-ui .build-tabs button{min-width:48px;height:48px}
body.compact-ui .build-tabs button svg,
body.compact-ui #build-close svg{width:26px;height:26px}
body.compact-ui #demolish{font-size:28px}
body.compact-ui .building-list{padding:6px 7px;gap:8px}
body.compact-ui .building-card{min-width:206px;max-width:206px;height:96px;gap:5px;padding-right:8px}
body.compact-ui .building-card img{width:78px;height:78px;flex:none}
body.compact-ui .building-card strong{font-size:14px;line-height:1.35}
body.compact-ui .build-costs{font-size:12px;line-height:17px;gap:4px 7px}
body.compact-ui .cost-item{gap:3px}
body.compact-ui .cost-item svg{width:14px;height:14px}
body.compact-ui .lock-label{font-size:11px;gap:4px;padding:2px 5px}
body.compact-ui .lock-label svg{width:13px;height:13px}
body.compact-ui .dock-footer{height:28px;padding-bottom:7px}
body.compact-ui .materials{font-size:13px}
body.compact-ui .materials svg{width:18px;height:18px}
body.compact-ui.build-open .view-controls{bottom:max(8px,env(safe-area-inset-bottom));right:calc(104px + env(safe-area-inset-right))}
body.compact-ui.build-open .toast-stack{bottom:calc(260px + env(safe-area-inset-bottom))}
body.compact-ui #selection-text img{width:52px;height:52px;flex:none}
body.compact-ui #selection-text strong,
body.compact-ui #selection-text small{font-size:14px}
body.compact-ui #selection-text .build-costs{font-size:12px;line-height:17px;gap:4px 7px}
body.compact-ui #selection-text .cost-item svg{width:14px;height:14px}
body.compact-ui .selection-hint button{font-size:28px}
body.compact-ui .inspector{width:310px;top:60px;max-height:calc(100% - 120px);background:var(--papyrus-solid)}
body.compact-ui:has(.inspector:not([hidden])) .view-controls{bottom:max(8px,env(safe-area-inset-bottom));right:calc(104px + env(safe-area-inset-right))}
body.compact-ui:has(.inspector:not([hidden])) #view-legend{display:none}
body.compact-ui .inspector-head{gap:10px}
body.compact-ui .inspector-head img{width:76px;height:76px;flex:none}
body.compact-ui .inspector-head h2{font-size:22px}
body.compact-ui .inspector-head small{font-size:11px;line-height:1.5}
body.compact-ui .inspector>p{font-size:14px;line-height:1.6}
body.compact-ui .inspector-close{font-size:28px}
body.compact-ui .status-tag{font-size:12px;line-height:1.5}
body.compact-ui .info-row,
body.compact-ui .service-row,
body.compact-ui .inspector .info-row,
body.compact-ui .inspector .service-row,
body.compact-ui .coverage-row>div:first-child,
body.compact-ui .control-row{font-size:14px;line-height:1.5}
body.compact-ui .dialog-inner{font-size:14px;line-height:1.5}
body.compact-ui .dialog-close{font-size:28px}
body.compact-ui .panel-title{font-size:28px}
body.compact-ui .panel-intro{font-size:14px;line-height:1.6}
body.compact-ui .panel-eyebrow,
body.compact-ui .eyebrow{font-size:11px;letter-spacing:1px}
body.compact-ui .panel-section-title{font-size:15px}
body.compact-ui .panel-stat span{font-size:12px}
body.compact-ui .panel-stat strong{font-size:26px}
body.compact-ui .action-button{font-size:14px;min-height:44px}
body.compact-ui .control-row small,
body.compact-ui .emergency-resource small,
body.compact-ui .commission-options small{font-size:13px}
body.compact-ui .control-row>div{min-width:0}
body.compact-ui .control-row .action-button{flex-shrink:0}
body.compact-ui .text-input,
body.compact-ui .trade-table select,
body.compact-ui .house-cap-label select{font-size:16px;min-height:44px}
body.compact-ui .service-view-select{width:180px;flex-shrink:0}
body.compact-ui .trade-table{font-size:14px}
body.compact-ui .trade-table th{font-size:12px}
body.compact-ui .trade-table select{max-width:140px}
body.compact-ui .senate-criteria summary,
body.compact-ui .emergency-market summary,
body.compact-ui .emergency-resource>div>strong,
body.compact-ui .emergency-lots button strong,
body.compact-ui .house-cap-label{font-size:14px}
body.compact-ui .help-step h3{font-size:16px}
body.compact-ui .help-step p,
body.compact-ui .keyboard-note,
body.compact-ui .mission-panel p,
body.compact-ui .commission-panel p,
body.compact-ui .event-entry p,
body.compact-ui .warning-text,
body.compact-ui .finish-legacy{font-size:14px;line-height:1.6}
body.compact-ui .event-entry strong{font-size:16px}
body.compact-ui .event-entry small{font-size:12px}
body.compact-ui .help-step>span{width:30px;height:30px;font-size:14px}
body.compact-ui .mission-panel h3{font-size:16px}
body.compact-ui .scenario-grid button{font-size:14px;min-height:44px}
body.compact-ui .stepper button{width:44px;height:44px;font-size:22px;flex:none}
body.compact-ui dialog[data-panel="menu"]{max-width:540px}
body.compact-ui dialog[data-panel="menu"] .dialog-inner{padding:10px 16px}
body.compact-ui dialog[data-panel="menu"] .panel-title{font-size:26px;line-height:1.15;margin:6px 0 5px}
body.compact-ui dialog[data-panel="menu"] .panel-intro{font-size:14px;margin:0 0 10px}
body.compact-ui .menu-grid{gap:6px}
body.compact-ui .menu-grid button{min-height:72px;gap:6px;padding:5px}
body.compact-ui .menu-grid button>span{font-size:14px;line-height:1.25}
body.compact-ui .menu-grid svg,
body.compact-ui dialog[data-panel="menu"] .button-row svg{width:26px;height:26px}
body.compact-ui .menu-save-status{font-size:13px}
body.compact-ui .audio-volume,
body.compact-ui .audio-volume output,
body.compact-ui dialog[data-panel="audio"] .audio-volume>span{font-size:14px}
body.compact-ui dialog[data-panel="audio"] .action-button svg{width:24px;height:24px}
body.compact-ui .catalog-info-head img{width:100px;height:100px}
body.compact-ui .catalog-info-head .panel-title{font-size:26px}
body.compact-ui .catalog-info-head .panel-eyebrow{font-size:11px}
body.compact-ui .catalog-info-cost{font-size:14px;flex-wrap:wrap}
body.compact-ui .catalog-info-cost .build-costs{font-size:15px;gap:12px}
body.compact-ui .catalog-info-cost .cost-item svg{width:19px;height:19px}
body.compact-ui .catalog-info-facts .panel-stat strong{font-size:20px}
body.compact-ui .catalog-info-facts .panel-stat span{font-size:12px}
body.compact-ui .catalog-info-unlock{font-size:13px}
body.compact-ui .catalog-info-unlock svg{width:18px;height:18px}
body.compact-ui #view-picker{width:280px;gap:7px}
body.compact-ui #view-picker button{min-height:68px;font-size:12px;line-height:1.35}
body.compact-ui #view-picker svg{width:26px;height:26px}
body.compact-ui #view-legend{font-size:12px}
body.compact-ui #view-legend>small{font-size:12px}
body.compact-ui .paper-badge{font-size:12px;min-width:20px;height:20px;line-height:20px}
body.compact-ui .paper-heading>span{font-size:10px;letter-spacing:1px}
body.compact-ui .event-scroll button svg{width:22px;height:22px}
body.compact-ui .paper-title{font-size:21px}
body.compact-ui .paper-message{font-size:14px;line-height:1.5}
body.compact-ui .paper-date,
body.compact-ui .paper-pending{font-size:12px}
body.compact-ui .paper-footer{height:auto;min-height:44px;flex-wrap:wrap}
body.compact-ui .planning-hint,
body.compact-ui .toast,
body.compact-ui .toast strong,
body.compact-ui .commission-result{font-size:13px}
@media(min-width:600px) and (orientation:landscape){
  body.compact-ui dialog[data-panel="menu"]{max-width:600px}
  body.compact-ui .menu-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:760px) and (orientation:landscape){
  body.compact-ui .resource-bar .resource{padding:0 4px;gap:3px}
  body.compact-ui .resource-bar .resource-icon,
  body.compact-ui .resource-bar .resource-icon svg{width:18px;height:18px}
  body.compact-ui .resource-bar .resource strong{font-size:14px}
}
@media(max-width:480px){
  body.compact-ui .inspector{left:8px;right:8px;width:auto;top:108px;max-height:calc(100% - 168px)}
  body.compact-ui .founding-tip{top:108px}
  body.compact-ui .selection-hint{top:calc(108px + env(safe-area-inset-top))}
  body.compact-ui.building-selected #view-legend{top:calc(208px + env(safe-area-inset-top))}
  body.compact-ui.papyrus-open #event-papyrus{top:calc(208px + env(safe-area-inset-top))}
}
body.compact-ui.touch-device .rotate-prompt{background:var(--papyrus-solid);color:var(--ink)}
body.compact-ui .rotate-phone{color:var(--gold);border-color:var(--gold)}
body.compact-ui .rotate-prompt p{font-size:14px;color:var(--ink)}
body.compact-ui .rotate-prompt .eyebrow{font-size:11px;color:var(--gold)}