:root{--sheet-thumb-w:72px;--sheet-thumb-h:64px;--drawer-rim:18px;--drawer-reach-block:10px;--drawer-reach-inline:8px;--bcard-rim:8px;--bcard-reach:3px;--bcard-w:136px;--bcard-foot:var(--touch-min);--drawer-close:36px;--drawer-bottom:2px;--drawer-contrast-pad-inline:6px;--bcard-gap:3px;--bcard-row-gap:2px;--bcard-chip-pad-block:1px;--bcard-chip-pad-inline:6px;--bcard-res-icon:15px;--bcard-time-icon:13px;--bcard-bad-icon:11px;--bcard-foot-icon:14px;--place-arrow:28px}.building-sheet{align-content:start;gap:var(--space-l);padding:var(--space-s) var(--space-xs);font-size:var(--text-caption);display:grid}.panel-header{align-items:center;gap:var(--space-s);display:flex}.panel-header>div{flex:1;min-inline-size:0}.app .panel-body .panel-header h2{font-size:var(--text-section);color:var(--color-text)}.panel-thumb{inline-size:var(--sheet-thumb-w);block-size:var(--sheet-thumb-h);object-fit:contain;flex:none}.panel-thumb.is-fallback{border-radius:var(--radius-s);background:var(--color-surface-alt);color:var(--color-text-muted);place-items:center;display:inline-grid}.panel-section{gap:var(--space-s);display:grid}.panel-section h3{letter-spacing:.04em}.panel-section h4{font-size:var(--text-caption);color:var(--color-text-muted);margin:0}.building-sheet .production-list li{min-block-size:var(--chip-h)}.bonus{align-items:center;gap:var(--space-s);color:var(--color-success);font-weight:600;display:flex}.building-sheet-footer{z-index:1;gap:var(--space-xs);margin-inline:calc(-1 * var(--space-xs));padding:var(--space-s) var(--space-xs);border-block-start:1px solid var(--color-border);background:var(--color-surface);display:grid;position:sticky;inset-block-end:0}.app .panel-body .building-sheet-footer .panel-action{justify-self:stretch}.build-drawer{z-index:var(--z-panel);inset-inline:calc(var(--safe-left) + var(--space-xs)) calc(var(--safe-right) + var(--space-xs));max-block-size:calc(100% - var(--space-xs));box-shadow:var(--shadow-panel);color:var(--color-text);font-size:var(--text-small);flex-direction:column;display:flex;position:fixed;inset-block-end:calc(var(--safe-bottom) + var(--drawer-bottom))}.build-drawer.frame-panel{border-width:var(--drawer-rim);border-image-width:var(--drawer-rim)}.drawer__head{align-items:center;gap:var(--space-m);min-inline-size:0;margin:calc(-1 * var(--drawer-reach-block)) calc(-1 * var(--drawer-reach-inline)) var(--space-xs);display:flex}.drawer__title{color:var(--color-gold-hi);font:700 var(--text-panel) / var(--line-height-tight) var(--font-display);text-shadow:0 1px 0 var(--color-hud-bg);outline:none;flex:none;margin:0}.drawer__head .round-btn{--plate:max(var(--touch-min), var(--drawer-close));background-size:var(--drawer-close) var(--drawer-close);flex:none}.drawer__head .round-btn .mask-icon{inline-size:calc(.46 * var(--drawer-close));block-size:calc(.46 * var(--drawer-close))}.drawer__head .panel-close{margin-inline-start:auto}:root[dir=rtl] .build-back .mask-icon{scale:-1 1}.drawer__head .tabs{align-self:flex-end;min-inline-size:0}.build-drawer .feature-off{margin:0 0 var(--space-xs);padding:var(--bcard-row-gap) var(--space-s);border-radius:var(--radius-s);background:var(--color-surface);color:var(--color-text);font-size:var(--text-micro);justify-self:start}.build-cards-panel{flex-direction:column;min-block-size:0;min-inline-size:0;display:flex}.cards{gap:var(--space-s);min-block-size:0;margin:0 calc(-1 * var(--drawer-reach-inline)) calc(-1 * var(--drawer-reach-block));padding:0 0 var(--space-xs);overscroll-behavior:contain;scrollbar-width:thin;list-style:none;display:flex;overflow:auto hidden}.cards:focus-visible{outline:var(--focus-ring-width) solid transparent;box-shadow:inset var(--focus-shadow)}.bcard{align-content:start;gap:var(--bcard-gap);inline-size:var(--bcard-w);border-style:solid;border-width:var(--bcard-rim);border-image:url(../art/kit/frames/card.svg) 14 fill / var(--bcard-rim) stretch;flex:none;display:grid;position:relative}.bcard>*{margin-inline:calc(-1 * var(--bcard-reach))}.bcard__art{aspect-ratio:4/3;block-size:auto;inline-size:100%;border-radius:var(--radius-s);object-fit:cover;justify-self:center;margin-block-start:calc(-1 * var(--bcard-reach));margin-inline:0;display:block}.bcard__art.is-fallback{background:var(--color-surface-alt)}.bcard__count{padding:var(--bcard-chip-pad-block) var(--bcard-chip-pad-inline);border-radius:var(--radius-pill);background:var(--color-scrim);color:var(--color-text);font-size:var(--text-micro);margin:0;font-weight:700;position:absolute;inset-block-start:var(--space-xs);inset-inline-end:var(--space-xs)}.bcard__name{color:var(--color-gold-hi);font:700 var(--text-hud) / 1.15 var(--font-display);overflow-wrap:anywhere;margin-block:0}.bcard__cost{gap:var(--bcard-row-gap) var(--space-s);font-size:var(--text-small);flex-wrap:wrap;margin-block:0;display:flex}.bcard__cost.muted{color:var(--color-text-muted)}.bcard .cost{align-items:center;gap:var(--bcard-gap);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;font-weight:700;display:inline-flex}.bcard .cost .art-icon{inline-size:var(--bcard-res-icon);block-size:var(--bcard-res-icon)}.bcard .cost--time .mask-icon{inline-size:var(--bcard-time-icon);block-size:var(--bcard-time-icon);color:var(--color-accent)}.bcard .cost--bad{color:var(--color-danger)}.bcard .cost--bad .mask-icon{inline-size:var(--bcard-bad-icon);block-size:var(--bcard-bad-icon)}.bcard__note{color:var(--color-text-muted);font-size:var(--text-micro);margin-block:0}.bcard__foot{align-items:center;gap:var(--space-xs);min-block-size:var(--bcard-foot);font-size:var(--text-small);margin-block-end:calc(-1 * var(--bcard-reach));font-weight:700;display:flex}.bcard__foot .mask-icon{inline-size:var(--bcard-foot-icon);block-size:var(--bcard-foot-icon)}.bcard__foot .btn{min-inline-size:0;min-block-size:var(--bcard-foot);padding-inline:var(--space-s);font-size:var(--text-small);flex:1}.bcard__foot .btn:is([disabled],[aria-disabled=true]):not([aria-busy=true]){min-block-size:var(--bcard-foot);padding:var(--bcard-row-gap) var(--space-s)}.bcard--locked .bcard__art{filter:grayscale()brightness(.6)}.bcard--locked :is(.bcard__name,.bcard__foot){color:var(--color-text-muted)}.bcard--built .bcard__art{filter:brightness(.75)}.bcard--built .bcard__foot{color:var(--color-success)}.build-drawer.place-card{--place-bar-rim:16px;align-items:center;column-gap:var(--space-xl);row-gap:var(--space-xs);inline-size:max-content;max-inline-size:calc(100% - var(--safe-left) - var(--safe-right) - 2 * var(--space-xs));grid-template-columns:minmax(0,1fr);display:grid;inset-inline:50% auto;translate:-50%}:root[dir=rtl] .build-drawer.place-card{translate:50%}.build-drawer.place-bar.frame-panel{border-width:var(--place-bar-rim);border-image-width:var(--place-bar-rim)}.place-card>*{min-inline-size:0}.place-bar__info{margin:calc(-1 * var(--space-s)) 0;gap:2px;max-inline-size:18rem;display:grid}.place-bar__name.drawer__title{flex:initial;font-size:var(--text-section);overflow-wrap:anywhere}.place-bar__cost{gap:var(--bcard-row-gap) var(--space-s);font-size:var(--text-small);flex-wrap:wrap;margin:0;display:flex}.place-bar__cost .cost{align-items:center;gap:var(--bcard-gap);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;font-weight:700;display:inline-flex}.place-bar__cost .cost--time .mask-icon{color:var(--color-accent)}.place-bar__cost .cost--bad{color:var(--color-danger)}.place-bar__actions{justify-content:flex-end;gap:var(--space-l);margin-block:calc(-1 * var(--space-s));display:flex}.place-bar__actions .round-btn{--round-btn:46px}.round-btn--ok{color:var(--color-success)}.round-btn--no{color:var(--color-danger)}.place-card :is(.place-card__notice,.reasons,.feature-off,#build-confirm-offline){font-size:var(--text-micro);grid-column:1/-1;margin:0}.place-card__notice{color:var(--color-gold-hi);font-weight:700}.place-card .reasons{gap:0 var(--space-l);color:var(--color-danger);flex-wrap:wrap;padding:0;list-style:none;display:flex}.place-card :is(.place-card__notice,.feature-off):empty{display:none}@media (width>=600px){.build-drawer.place-card{grid-template-columns:minmax(0,1fr) auto}.place-bar__info{grid-area:1/1}.place-bar__actions{grid-area:1/2}}.city-placement{inset-block:calc(-1 * var(--hud-top-size)) calc(-1 * var(--dock-block-size));pointer-events:none;direction:ltr;position:absolute;inset-inline:0;overflow:clip}.city-placement>*{position:absolute;inset-block-start:0;inset-inline-start:0}.plot-tag{align-items:center;gap:var(--space-xs);translate:-50% var(--space-s);padding:2px var(--space-s);border-radius:var(--radius-pill);background:var(--color-hud-bg);font:700 var(--text-small) / 1.3 var(--font-body);white-space:nowrap;border:1.5px solid;display:inline-flex}.plot-tag--free{border-color:var(--color-place-ok);color:var(--color-success)}.plot-tag--swap{border-color:var(--color-accent);color:var(--color-gold-hi)}.plot-tag--blocked{border-color:var(--color-place-bad);color:var(--color-danger)}.place-arrow{inline-size:var(--place-arrow);min-inline-size:var(--place-arrow);block-size:var(--place-arrow);min-block-size:var(--place-arrow);clip-path:polygon(10% 10%,100% 50%,10% 90%);background:var(--color-place-ok);filter:var(--halo-scene);pointer-events:auto;margin-block-start:calc(-.5 * var(--place-arrow));margin-inline-start:calc(-.5 * var(--place-arrow))}.place-arrow:after{content:"";inset:calc((var(--place-arrow) - var(--touch-min)) / 2);position:absolute}.place-arrow[hidden]{display:none}.city-placement .place-arrow:hover{filter:brightness(1.15) var(--halo-scene)}.city-placement .place-arrow.hk-hud:active{filter:brightness(.9) var(--halo-scene);scale:none}@media (width>=1200px){:root{--bcard-w:196px;--drawer-close:46px}}@media (height<=500px){.building-sheet{gap:var(--space-s)}:root{--sheet-thumb-w:48px;--sheet-thumb-h:42px}}@media (height<=340px) and (orientation:landscape){:root{--sheet-thumb-w:40px;--sheet-thumb-h:36px}}:root[data-theme=contrast] .build-drawer.frame-panel{border:var(--border-heavy) solid var(--color-border);border-radius:var(--radius-m);background:var(--color-surface);padding:var(--space-xs) var(--drawer-contrast-pad-inline)}:root[data-theme=contrast] :is(.drawer__head,.cards){margin:0}:root[data-theme=contrast] .bcard{border:var(--frame-width) solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);border-image:}:root[data-theme=contrast] .bcard>*{margin-inline:0}:root[data-theme=contrast] .build-drawer.place-bar.frame-panel{padding:var(--space-xs) var(--space-s)}:root[data-theme=contrast] :is(.place-bar__info,.place-bar__actions){margin-block:0}:root[data-theme=contrast] .plot-tag{border-width:var(--frame-width)}
