/* Illustrated architecture catalogue: existing parchment, heraldry and atlas. */
.action-sheet[data-view='catalog']{--catalog-ornament-top:-6px;top:0;bottom:0;left:0;right:0;width:100%;max-height:100%;overflow:visible}
.action-sheet[data-view='catalog']::before{display:block;content:'';position:absolute;inset:-10px;z-index:5;pointer-events:none;border:14px solid transparent;border-image:url('./art-web/hud-frame-v1-7e9c949098.webp') 18% 6% / 14px / 0 stretch}
.action-sheet[data-view='catalog'] .sheet-handle{display:none}
.action-sheet[data-view='catalog'] .sheet-heading{min-height:90px;justify-content:center;padding:9px calc(50px + var(--sheet-close-inset) + var(--space)) 12px;text-align:center}
.action-sheet[data-view='catalog'] .sheet-heading>div{min-width:0}
.action-sheet[data-view='catalog'] .sheet-heading h2{font:700 27px/1.05 var(--serif);color:#30210f;margin-top:5px}
.action-sheet[data-view='catalog'] #sheet-kicker{font:600 9px/1.3 var(--sans);letter-spacing:.16em;color:#72532a}
.action-sheet[data-view='catalog'] .sheet-heading::before{content:'';position:absolute;left:-10px;top:var(--catalog-ornament-top);width:76px;height:91px;background:url('./art-web/governor-regalia-v1-d5b7eac8bf.webp') left center/200% 100% no-repeat;filter:drop-shadow(1px 2px 1px #25180b77);pointer-events:none}
.action-sheet[data-view='catalog'] #close-sheet{position:absolute;right:var(--sheet-close-inset);top:var(--catalog-ornament-top);z-index:3;flex:none;width:50px;height:50px;min-width:50px;min-height:50px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent url('./art-web/governor-regalia-v1-d5b7eac8bf.webp') right center/200% 100% no-repeat;color:#e0be70;filter:drop-shadow(0 2px 1px #31180999)}
.action-sheet[data-view='catalog'] #close-sheet .icon{width:25px;height:25px;stroke-width:1.8}
.action-sheet[data-view='catalog'] .sheet-content{padding:9px 3px 12px;scroll-padding-block:10px;min-height:0}
.catalog-panel{min-width:0;color:var(--antique-ink)}
.sheet-content .catalog-intro{margin:2px auto 12px;max-width:520px;text-align:center;font:13px/1.4 var(--sans);color:#654a2d}
.catalog-filters{display:flex;gap:4px;margin:0 0 12px;padding:2px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#9b7940 transparent}
.catalog-filter{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-width:58px;min-height:44px;padding:7px 5px;border:2px ridge #a08046;border-radius:2px;background:linear-gradient(#392c1ba8,#21170eb8),url('./art-web/wood-dark-v3-331b77e862.webp') center/350px auto;box-shadow:inset 0 0 0 1px #e2c58744,0 1px 3px #3d281f44;color:#e6cea0;font:600 12px/1.1 var(--serif);white-space:nowrap}
.catalog-filter>span:first-child{display:none}
.catalog-filter .icon{width:22px;height:22px;flex:none}
.catalog-filter.is-active{border-color:#d3b16b;color:#ffedb7;background:linear-gradient(#21452ec9,#082a1eed),url('./art-web/wood-dark-v3-331b77e862.webp') center/350px auto;box-shadow:inset 0 0 0 1px #edc875,0 1px 4px #52361988}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:2px;align-items:stretch}
.catalog-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:5px 6px 10px;border:1px solid #ad8951;border-radius:3px;background:radial-gradient(ellipse at 50% 32%,#fff1d159,#c29c5717 82%);box-shadow:inset 0 0 0 2px #f5e1b340,inset 0 0 12px #7451261a,0 1px 3px #65451d30;color:#392b18;text-align:center}
.catalog-card::before{content:'';position:absolute;inset:3px;border:1px solid #9b72373d;background:linear-gradient(135deg,#a37a30 0 4px,transparent 4px) top left,linear-gradient(225deg,#a37a30 0 4px,transparent 4px) top right,linear-gradient(45deg,#a37a30 0 4px,transparent 4px) bottom left,linear-gradient(315deg,#a37a30 0 4px,transparent 4px) bottom right;background-size:10px 10px;background-repeat:no-repeat;pointer-events:none}
.catalog-card-symbol{position:absolute;top:9px;left:9px;color:#816236;z-index:1}
.catalog-card-symbol .icon{width:22px;height:22px}
.catalog-card-art{display:grid;place-items:center;width:100%;aspect-ratio:1.25;min-width:0;overflow:hidden}
.catalog-card-art .building-sprite{width:80%;height:auto;aspect-ratio:1;max-width:185px;flex:none;filter:drop-shadow(0 3px 2px #49381c40)}
.catalog-card[data-catalog-select='mine'] .building-sprite,.catalog-card[data-catalog-select='barracks'] .building-sprite,.catalog-card[data-catalog-select='archery'] .building-sprite,.catalog-card[data-catalog-select='stable'] .building-sprite{clip-path:inset(0 0 10%)}
.catalog-card-name{display:grid;place-items:center;min-height:36px;font:700 17px/1.08 var(--serif);overflow-wrap:anywhere}
.catalog-card-state,.catalog-card-time{display:block;font:11px/1.3 var(--sans);margin-top:3px;color:#655032}
.catalog-card-time{margin-top:1px}
.catalog-card-time .icon{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.catalog-card.is-selected{border-color:#b8964d;color:#f9e7b1;background:radial-gradient(ellipse at 50% 22%,#56724999,#0f3328ed 85%),url('./art-web/wood-dark-v3-331b77e862.webp') center/350px auto;box-shadow:inset 0 0 0 2px #e6c06a,0 0 0 1px #72531d,0 2px 5px #47331966}
.catalog-card.is-selected::before{border-color:#dfbd6999;filter:brightness(1.7)}
.catalog-card.is-selected :is(.catalog-card-state,.catalog-card-time,.catalog-card-symbol){color:#ead6a4}
.catalog-card.is-selected .catalog-card-art{filter:drop-shadow(0 3px 4px #05140b88)}
.catalog-card.is-locked:not(.is-selected) .catalog-card-art{filter:saturate(.6);opacity:.85}
.catalog-card.is-building:not(.is-selected) .catalog-card-state{color:#27603f;font-weight:700}
.catalog-detail{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;margin:16px 0 0;padding:10px 4px;border:8px solid transparent;border-image:var(--ornate-paper) 8% fill / 8px / 0 stretch;scroll-margin-block:12px;box-shadow:0 2px 5px #61421c33}
.catalog-detail-art{display:grid;place-items:start center;min-width:0;overflow:hidden}
.catalog-detail-art .building-sprite{width:100%;height:auto;aspect-ratio:1;max-width:none;filter:drop-shadow(0 3px 2px #49381c40)}
.catalog-detail-copy{min-width:0}
.sheet-content .catalog-detail-copy h3{display:flex;align-items:center;gap:7px;margin:0 0 5px;font:700 23px/1.1 var(--serif);color:#342310;overflow-wrap:anywhere}
.catalog-detail-copy h3 .icon{flex:none;width:23px;height:23px;color:#785b2d}
.sheet-content .catalog-detail-copy p{margin:4px 0;font:12px/1.4 var(--sans);color:#594126}
.catalog-detail-summary{display:contents}
.catalog-detail-copy{grid-column:2}
.catalog-detail-benefits,.catalog-detail-actions{grid-column:1/-1;min-width:0}
.catalog-detail-benefits{margin:3px 0;padding:6px 0;border-block:1px solid #a182494d}
.catalog-detail-benefits h4{font:700 15px/1.3 var(--serif);margin:0 0 7px;color:#694a23}
.catalog-detail-benefits dl{margin:0}
.catalog-detail-benefits dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font:12px/1.4 var(--sans);gap:8px;padding:5px 0;border-bottom:1px solid #a1824926}
.catalog-detail-benefits dd{margin:0;text-align:right;overflow-wrap:anywhere}
.catalog-detail-benefits strong{font-size:12px;text-align:right}
.catalog-detail-actions{display:flex;flex-direction:column;gap:7px}
.catalog-detail-actions :is(.primary-button,.secondary-button){width:100%;min-width:0;min-height:44px;margin:5px 0;--button-overhang:-7px}
.catalog-detail-actions .costs{margin:0 0 4px}
.catalog-detail-actions .reason{font:12px/1.4 var(--sans);overflow-wrap:anywhere}
.catalog-back{grid-column:1/-1;justify-self:start;min-height:44px;padding:7px 3px;border:0;background:none;color:#6c4c23;font:600 13px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px}
.sheet-content .catalog-footer{text-align:center;margin:12px 0 2px;font:600 15px/1.3 var(--serif);color:#79582b}
.catalog-footer::before,.catalog-footer::after{content:'◆';font-size:9px;margin:0 9px;color:#9b793b}
.catalog-panel button:focus-visible,.action-sheet[data-view='catalog'] #close-sheet:focus-visible{outline:2px solid #694815;outline-offset:3px}
.catalog-card.is-selected:focus-visible{outline-color:#f9e7b1;outline-offset:-7px}
.catalog-detail h3:focus{outline:2px solid #95713b;outline-offset:4px}
.catalog-panel .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover){.catalog-card:hover{border-color:#977132;box-shadow:inset 0 0 0 2px #d8b96f,0 2px 5px #47331966}.catalog-filter:hover{filter:brightness(1.15)}}
@media(min-width:700px){
 .action-sheet[data-view='catalog']{--catalog-ornament-top:-10px;left:auto;right:18px;top:18px;bottom:18px;width:720px;max-width:calc(100% - 36px);max-height:calc(100% - 36px)}
 .action-sheet[data-view='catalog']::before{inset:-14px;border-width:18px;border-image-width:18px}
 .action-sheet[data-view='catalog'] .sheet-heading{min-height:102px;padding:12px 86px 14px}
 .action-sheet[data-view='catalog'] .sheet-heading h2{font-size:38px}
 .action-sheet[data-view='catalog'] #sheet-kicker{font-size:11px;letter-spacing:.19em}
 .action-sheet[data-view='catalog'] .sheet-heading::before{width:100px;height:116px;left:-8px}
 .action-sheet[data-view='catalog'] #close-sheet{width:58px;height:58px}
 .action-sheet[data-view='catalog'] .sheet-content{padding:10px 12px 16px}
 .sheet-content .catalog-intro{font-size:15px;margin-bottom:15px}
 .catalog-filters{gap:7px;margin-bottom:14px}
 .catalog-filter{font-size:17px;padding:8px 7px;gap:7px}
 .catalog-filter>span:first-child{display:flex}
 .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .catalog-card{padding:7px 8px 12px}
 .catalog-card-symbol .icon{width:27px;height:27px}
 .catalog-card-name{font-size:21px;min-height:44px}
 .catalog-card-state,.catalog-card-time{font-size:12px}
 .catalog-detail{grid-template-columns:160px minmax(0,1fr);gap:14px;padding:14px 8px}
 .catalog-detail-art{grid-row:2/5;align-self:center}
 .catalog-detail-benefits,.catalog-detail-actions{grid-column:2}
 .sheet-content .catalog-detail-copy h3{font-size:29px}
 .sheet-content .catalog-detail-copy p{font-size:14px}
}
@media(max-width:340px){.action-sheet[data-view='catalog'] .sheet-heading h2{font-size:24px}.catalog-filter{min-width:52px;font-size:11px}.catalog-grid{gap:7px}.catalog-card-name{font-size:16px}.catalog-detail{grid-template-columns:65px minmax(0,1fr)}}
@media(forced-colors:active){.action-sheet[data-view='catalog']::before,.action-sheet[data-view='catalog'] .sheet-heading::before,.catalog-card::before{display:none}.catalog-card,.catalog-filter,.catalog-detail{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none;border-image:none}.catalog-card.is-selected,.catalog-filter.is-active{outline:2px solid Highlight}.catalog-card :is(.catalog-card-state,.catalog-card-time,.catalog-card-symbol){color:CanvasText}.action-sheet[data-view='catalog'] #close-sheet{background:ButtonFace;color:ButtonText;border:1px solid ButtonText;filter:none}}