/* The Alba's illuminated cabinet. Original generated paintings, not SVG stand-ins.
   See docs/heroic-ui-analysis.md for the screenshot-by-screenshot art rationale. */
:root {
  --royal:#143b78; --wine:#6c1730; --gold:#f3cf7c; --paper:#fff0c5;
  --hero-wood:url('assets/ui/heroic/walnut.jpg');
  --hero-blue:url('assets/ui/heroic/velvet-blue.jpg');
  --hero-red:url('assets/ui/heroic/velvet-red.jpg');
  --hero-page:url('assets/ui/heroic/parchment.jpg');
  --hero-frame:url('assets/ui/heroic/ornate-frame.webp');
}
#app { --rail-top:62px; --rail-bottom:80px; --frame-side:14px; --cabinet-right:0px; }
body[data-screen=map] #app { --cabinet-right:62px; }
body[data-screen=battle] #app { --cabinet-right:166px; }
body[data-screen=castle] #app { --rail-bottom:24px; }
body[data-screen=encounter] #app,body[data-screen=report] #app { --rail-bottom:24px; }
#panel { z-index:10; }
.icon.painted-icon { position:relative; overflow:visible; filter:drop-shadow(0 1px 1px #0008); }
.icon.painted-icon > img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* A continuous frame, with live controls fitted into its material shelves. */
#game-frame { position:absolute; inset:0; pointer-events:none; z-index:6; border:14px solid transparent; border-image:var(--hero-frame) 210 / 24px / 0 stretch; }
.frame-top-rail,.frame-bottom-rail,.frame-side-cabinet { position:absolute; z-index:-1; background:linear-gradient(#3e1d1244,#160a1580),var(--hero-wood) center/350px; box-shadow:inset 0 0 0 1px #ffe2a385,inset 0 0 0 4px #3a201b,inset 0 0 18px #090716b3; }
.frame-top-rail { left:0; right:0; top:0; height:calc(var(--rail-top) - 14px); border-bottom:3px ridge #d2a951; }
.frame-bottom-rail { left:0; right:0; bottom:0; height:calc(var(--rail-bottom) - 14px); border-top:3px ridge #d2a951; }
.frame-side-cabinet { right:0; top:calc(var(--rail-top) - 14px); bottom:calc(var(--rail-bottom) - 14px); width:var(--cabinet-right); border-left:3px ridge #cfad68; background:linear-gradient(#08162d44,#09142b66),var(--hero-blue) center/280px; }
.frame-inner-rule { position:absolute; inset:calc(var(--rail-top) - 14px) var(--cabinet-right) calc(var(--rail-bottom) - 14px) 0; border:1px solid #ebd293aa; box-shadow:0 0 0 2px #2b172b; }
body:not([data-screen=map]):not([data-screen=battle]) .frame-side-cabinet { display:none; }
#hud { z-index:8; top:14px; left:20px; right:20px; height:44px; gap:6px; }
.hud-left,.hud-right { gap:5px; }
.brand { font:small-caps 700 17px Georgia,serif; color:#ffe5a1; text-shadow:0 2px #281123; }
.hud-right { border:1px solid #be985f; padding:0 3px; background:#23112566; box-shadow:inset 0 0 6px #000; }
.hud-right > button { background:transparent; border:0; box-shadow:inset 1px 0 #a17a4366; border-radius:0; padding:5px; }
.hud-right > button > .icon { width:32px; height:32px; }
.resource-summary { background:none!important; border:0!important; padding:0!important; box-shadow:none!important; }
.resources { background:linear-gradient(#051c3899,#051c38aa),var(--hero-blue) center/230px; border:2px ridge #d1ab63; border-radius:0; padding:3px 8px; gap:10px; box-shadow:inset 0 1px 8px #050920; color:#fff2b9; text-shadow:0 1px #000; }
.resource .icon { width:27px; height:27px; }
.resource-summary .resource { gap:3px; }
.resources.field-resources { height:44px; padding:1px 4px; gap:0 5px; }
.resources.field-resources .icon { width:20px; height:20px; }
#controls { z-index:8; left:20px; right:20px; bottom:14px; height:62px; gap:7px; }
#map-tools { z-index:8; right:20px; top:calc((100% + var(--rail-top) - var(--rail-bottom)) / 2); gap:3px; }
#map-tools > button { width:44px; height:44px; border:1px solid #d5b16b; border-radius:0; box-shadow:inset 0 0 9px #000b; }
#map-tools .icon { width:30px; height:30px; }
.dock-location { display:flex; gap:5px; align-items:center; min-width:0; }
.dock-location > button:last-child { width:44px; height:44px; padding:4px; flex:none; }
.dock-location > button:last-child .icon { width:32px; height:32px; }
.map-position { background:linear-gradient(#f2dda300,#ca9a5b22),var(--hero-page) center/350px; color:#482916; text-shadow:none; border:2px ridge #d0a56a; min-height:48px; padding:4px 8px; max-width:190px; border-radius:0; }
.map-position .location-name { color:#482916; font:bold 13px Georgia,serif; }
.map-position :is(.map-name,small) { color:#75502c!important; }
.map-position { height:54px; padding:3px 6px; display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:16px 12px 10px; gap:0 5px; }
.map-position > .icon { grid-column:1; grid-row:1/4; width:24px; height:24px; }
.map-position > .location-name { grid-column:2; grid-row:1; line-height:16px; }
.map-position > .map-name { grid-column:2; grid-row:2; font-size:9px; line-height:12px; }
.map-position > small { grid-column:2; grid-row:3; font-size:8px; line-height:10px; margin:0; }
body[data-screen=map] .map-position { height:54px; max-height:54px; padding:3px 6px; grid-template-rows:16px 12px 10px; gap:0 5px; }
.road-choice { background:linear-gradient(#29533444,#13372e55),var(--hero-blue) center/130px; color:#ffe6a0; border:2px ridge #e1bc76; border-radius:0; min-width:48px; }
.road-choice > span { text-shadow:0 2px #1d1421; }
.home-plan { background:linear-gradient(#63212d55,#27102266),var(--hero-red) center/150px; }
.home-plan > .icon { width:32px; height:32px; }
#castle-dock { display:none; position:absolute; left:24px; right:24px; bottom:14px; height:16px; z-index:8; color:#ffedb8; text-shadow:0 1px #000; align-items:center; gap:16px; pointer-events:none; }
body[data-screen=castle] .frame-bottom-rail { height:20px; }
body[data-screen=castle] #castle-dock { display:flex; }
#castle-dock b { font:small-caps 15px Georgia,serif; }
#castle-dock span { font-size:10px; color:#ead4a2; }
.castle-caption { display:none; }
body[data-screen=castle] .town-tooltip { bottom:max(30px,calc((100vw * 941 / 1672 - 100dvh) / 2 + 30px)); background:linear-gradient(#130e2970,#130e2970),var(--hero-blue) center/250px; border:3px ridge #d8b76c; border-radius:0; }
.town-marker { width:35px; height:35px; border:3px ridge #edca80; background:radial-gradient(#214e76,#131c39); box-shadow:0 1px 8px #000b,inset 0 0 5px #000; }
.town-marker .icon { width:28px; height:28px; }

/* Real cloth and painted acanthus replace neutral dashboard rectangles. */
.panel,dialog,.start-panel,.load-panel {
  --menu-cloth:var(--hero-blue);
  background:linear-gradient(#090d2580,#1514317a),var(--menu-cloth) center/420px;
  border:2px solid #e5bd79;
  border-image:var(--hero-frame) 210 / 14px / 6px stretch;
  border-radius:0;
  box-shadow:0 14px 60px #040519c9,inset 0 0 24px #08071999;
  color:#fff0c5;
}
dialog::backdrop { background:#080717ba; }
.panel :is(h2,h3),dialog :is(h2,h3) { color:#ffe1a0; }
.panel-top h2,dialog h2 { font-family:Georgia,serif; font-weight:600; text-shadow:0 2px #160f2b; }
.heroic-heading { display:flex; align-items:center; gap:8px; min-width:0; }
.heroic-heading > .icon { width:32px; height:32px; flex:none; }
.heroic-heading > span:not(.icon) { min-width:0; overflow-wrap:anywhere; }
body[data-castle-panel=open] #castle-dock span { display:none; }
.panel p,.panel small,dialog p,dialog small { color:#e8d7b7; }
.panel-top { border-color:#dfbd715e!important; }
.castle-panel > .panel-top { background:linear-gradient(90deg,#0d123640,transparent); }
.castle-panel > .panel-top h2 { display:flex; align-items:center; gap:8px; }
.facility-crest { display:inline-flex; flex:none; align-items:center; justify-content:center; width:44px; height:44px; background:radial-gradient(#bda56344,#120d2655); border:2px ridge #e2bf6d; border-radius:50%; box-shadow:0 2px 5px #0008; }
.facility-crest .icon { width:36px; height:36px; }
.castle-panel[data-facility=stash] { --menu-cloth:var(--hero-red); }
.castle-panel[data-facility=clinic] { background:linear-gradient(#073c1cb8,#083828d9),var(--hero-blue) center/400px; }
.castle-panel[data-facility=graves] { background:linear-gradient(#351135d1,#231134d9),var(--hero-red) center/400px; }
.castle-panel[data-facility=buildings] { --menu-cloth:var(--hero-red); }
.section-label { color:#f7cf7f!important; font-family:Georgia,serif!important; letter-spacing:.07em; }

button {
  color:#ffedbc; background:linear-gradient(#5b361b1a,#190c1480),var(--hero-wood) center/240px;
  border:2px ridge #cba567; border-radius:1px;
  box-shadow:inset 0 0 0 1px #35151e,inset 0 1px #ffe8aa66,0 2px 2px #0005;
  text-shadow:0 1px #251423;
}
button:hover:not(:disabled) { background:linear-gradient(#e9bf6133,#27112155),var(--hero-wood) center/240px; border-color:#ffe1a0; }
button.gold,button.selected { background:linear-gradient(#9e303a33,#370d2e55),var(--hero-red) center/240px!important; color:#fff3c8!important; border-color:#ffdb8f!important; box-shadow:inset 0 0 0 1px #54182b,inset 0 0 8px #f9bc3740,0 2px #170c1d; }
button.gold:hover:not(:disabled) { background:linear-gradient(#e590473f,#84193022),var(--hero-red) center/240px!important; }
button.selected :is(small,b,.icon),button.gold :is(small,b) { color:#fff3c8!important; }
button:disabled { opacity:.68; }
button:active:not(:disabled) { box-shadow:inset 0 3px 8px #160818; }
button:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid #ffdf8d; outline-offset:2px; }
:is(.forge-filters,.rpg-character,.gear-pages) select,select#forge-hero { color:#fbeaca; background:linear-gradient(#0d123ab0,#0d123ab0),var(--hero-blue) center/230px; border:2px ridge #c4a66a; border-radius:0; box-shadow:inset 0 1px 7px #000; }
select option { background:#18254d; color:#fff2ce; }

/* Start and chronicle shelves. */
.start-panel { position:relative; border-left-width:2px; border-image-width:24px; border-image-outset:10px; padding:26px; }
.start-crest { position:absolute; right:14px; top:18px; width:72px; height:72px; filter:drop-shadow(0 3px 5px #000); }
.start-crest .icon { width:100%; height:100%; }
.start-panel h1 { padding-right:45px; color:#ffe4a0; text-shadow:0 2px #492414,0 0 12px #d5943333; font-family:Georgia,serif; }
.start-panel .menu-eyebrow { color:#ffd48a; }
.start-actions button { font-family:Georgia,serif; font-size:18px; letter-spacing:.02em; }
.start-actions button .icon { width:32px; height:32px; }
.menu-subtitle,.menu-note,.save-row small { color:#ecd8b2; }
.save-row > button:first-child { color:#482a1b; text-shadow:none; background:var(--hero-page) center/440px; border:2px ridge #e4c58a; }
.save-row > button:first-child small { color:#765133; }
.save-row > button:first-child:hover { background:linear-gradient(#ffdf7a33,#ffdf7a33),var(--hero-page) center/440px; }

/* Hall and contracts: tangible parchment leaves with illuminated seals. */
.mission-option { position:relative; background:var(--hero-page) center/360px; color:#4c2b1d; border:2px ridge #d5af6a; text-shadow:none; }
.mission-catalog { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:6px; }
.mission-catalog .mission-pages { display:flex; flex-direction:column; justify-content:space-between; align-items:center; margin:0; gap:2px; }
.mission-catalog .mission-pages span { font-size:9px; line-height:10px; }
.mission-catalog .mission-pages button { width:44px; height:44px; padding:4px; }
.fresh-preparation .castle-summary { display:flex; align-items:center; gap:6px; }
.fresh-preparation .castle-summary .party-pages { width:112px; flex:none; margin:0; gap:2px; }
.fresh-preparation .castle-summary .party-pages small { font-size:9px; }
.fresh-preparation .castle-summary > button { min-width:88px; }
.mission-option > .icon { width:34px; height:34px; }
.mission-option b { color:#4b2519; font-family:Georgia,serif; font-size:15px; }
.mission-option small { color:#6c4b2c!important; }
.mission-option.selected { background:linear-gradient(#ffe29c4d,#d9ab4933),var(--hero-page) center/360px!important; box-shadow:inset 4px 0 #9e2833,inset 0 0 0 1px #e9b85e; }
.mission-option.selected :is(b,small) { color:#5c271c!important; }
.hero-tile { background:linear-gradient(#13254c44,#0f173466),var(--hero-blue) center/130px; border:2px ridge #ad8c55; border-radius:0; }
.hero-tile img { background:radial-gradient(#6380ab,#1e345b); border:2px ridge #e3bf77; border-radius:40% 40% 3px 3px; }
.hero-tile.selected { background:linear-gradient(#184a3766,#0f352e88),var(--hero-blue) center/130px!important; border-color:#f8d18b!important; box-shadow:inset 0 -3px #f0c464; }
.hero-tile.selected :is(b,small) { color:#fff0bb!important; }
.recruit-portrait { width:32px; height:32px; object-fit:contain; border:1px solid #d0b177; background:#253f60; border-radius:50%; }
.recruit-choices button { background:linear-gradient(#14386644,#15234088),var(--hero-blue) center/180px; }
.party-readiness { color:#ffe1b4; }

/* Quiet parchment compartments keep small numbers readable. */
.inventory-row,.clinic-row,.forge-object,.rpg-item,.stat-grid > div,.quick-stats > span,
.service-result,.forge-receipt,.road-card,.kit-care,.kit-budget,.return-patients > div,
.loot-comparisons article,.wreck-items article {
  color:#4d2e1d; background:var(--hero-page) center/420px;
  border:2px ridge #b58a4f; border-radius:0; box-shadow:inset 0 0 10px #b27b3422;
  text-shadow:none;
}
:is(.inventory-row,.clinic-row,.forge-object,.rpg-item,.stat-grid,.quick-stats,.service-result,.forge-receipt,.road-card,.kit-care,.kit-budget,.return-patients,.loot-comparisons,.wreck-items) :is(p,small,b,strong,h3) { color:#593723; text-shadow:none; }
.inventory-row .forge-item-owner,.forge-object .forge-item-owner { color:#795019!important; }
.forge-object .section-label { color:#745026!important; }
.inventory-row .forge-sale-price,.item-sale-price { color:#7b3f15; }
.inventory-row > .icon { width:36px; height:36px; }
.forge-empty { color:#f2d6aa; }
.forge-empty > .icon { width:68px; height:68px; }
.forge-toolbar > button { color:#ffe1a0; }
.forge-object-icon { width:92px; height:92px; border:3px ridge #d2b66c; background:linear-gradient(#0e254a44,#15142f66),var(--hero-blue) center/160px; border-radius:0; box-shadow:inset 0 0 12px #000; }
.forge-object-icon .icon { width:80px; height:80px; }
.forge-object-actions > button .icon { width:30px; height:30px; }
.forge-object-actions > button { gap:3px; padding:5px; }
.forge-object-actions small { color:#f2d5a2; }
.forge-options > button { background:linear-gradient(#14305955,#1d142c66),var(--hero-blue) center/240px; }
.service-wallet { padding:8px; background:linear-gradient(#11133a88,#11133a99),var(--hero-blue) center/240px; border:2px ridge #b58a4f; }
.service-price { color:#ffdf8c; }
.service-wallet > small { color:#eed9ae; }
.item-condition { background:#5a281e; box-shadow:inset 0 1px 2px #0008; height:5px; }
.item-condition i { background:linear-gradient(#eee0a5,#a47b3c); }
.building-card,.upgrade-grid article { background:var(--hero-page) center/360px; color:#51321f; border:3px ridge #d1ac68; border-radius:0; box-shadow:inset 0 0 15px #9d652322; }
:is(.building-card,.upgrade-grid article) :is(h3,p,small) { color:#5b3822!important; text-shadow:none; }
.building-card h3 > .icon,.upgrade-grid h3 > .icon { width:34px; height:34px; }
.building-card h3 > .icon { display:inline-flex; }
.building-level { color:#8a551d; text-shadow:0 1px #fff3d0; }
.grave-list > span { background:linear-gradient(#41194266,#32153699),var(--hero-red) center/180px; color:#eed4bd; border:2px ridge #af8c61; border-radius:0; }
.grave-list > span .icon { width:32px; height:32px; }

/* Hero equipment is a physical folio, with existing characters in gilt housings. */
.rpg-character { background:var(--hero-page) center/440px; border:3px ridge #ba9659; border-radius:0; box-shadow:inset 0 0 22px #ba874166; }
.rpg-doll { background:radial-gradient(ellipse,#334e6e55,transparent 70%); }
.rpg-doll > img { filter:drop-shadow(0 3px 2px #55472e55); }
.rpg-doll > img { border-radius:6px; border:3px ridge #dbb974; }
.rpg-stats,.rpg-stats small,.rpg-slot-name,.rpg-slot-name small { color:#50321f!important; }
.gear-slot { background:linear-gradient(#12345666,#10182f99),var(--hero-blue) center/140px; border:3px ridge #e0bb71; border-radius:2px; padding:0; }
.gear-slot .icon { width:30px; height:30px; }
.gear-slot small { color:#ffe6ab; font-size:8px; line-height:9px; }
.gear-slot.selected { border-color:#ffe6a0!important; box-shadow:0 0 0 2px #a25527,inset 0 0 10px #33162f; }
.rpg-item h3 { color:#673721!important; font-family:Georgia,serif; }
.rpg-item h3 .icon { width:34px; height:34px; }
.rpg-item .amulet-effects { color:#245239!important; }
.rpg-tabs { padding-bottom:1px; }
.gear-location { color:#e7d3b0; }
.soldier-heading > img { border:3px ridge #efca81; border-radius:50%; background:var(--hero-blue) center/100px; }
.stat-grid > div > .icon { width:30px; height:30px; }
.stat-grid strong { color:#4f2d1c; }
.soldier-amulet { background:linear-gradient(#3e245a66,#20133388),var(--hero-blue) center/220px; border:2px ridge #ccad6d; border-radius:0; }
.soldier-amulet > .icon { width:32px; height:32px; }
.soldier-amulet small { color:#f3d7af; }
.kit-budget,.kit-care { padding:5px 8px; }
.kit-slots > button { background:linear-gradient(#14386655,#14214b88),var(--hero-blue) center/190px; border:2px ridge #bca170; border-radius:0; }
.kit-slots > button > .icon { width:28px; height:28px; }
.kit-slots :is(b,small) { color:#f5e2be; }

/* Chronicles and rules are actual paper, not white text on a gray app. */
#help { background:var(--hero-page) center/700px; color:#54361f; }
#help :is(h2,h3,p,small,.help-row,blockquote,span:not(.icon)) { color:#553320; text-shadow:none; }
#help h2,#help h3 { color:#792e2a; }
#help .dossier-title { background:var(--hero-page) center/700px; border-bottom:2px ridge #c1a271; }
#help :is(.dossier-columns > section,.local-chronicle,.mission-route) { background:transparent; border-color:#9c70454f; }
#help .journal-return { color:#6c3926!important; }
#help .rules-section { border-color:#b3925b; }
#help .tiny-link { color:#78452c; }
.dossier-title > .icon { width:44px; height:44px; }
.resource-legend .help-row > .icon { width:36px; height:36px; }
.story-panel { --menu-cloth:var(--hero-red); }
.story-copy { background:var(--hero-page) center/500px; padding:12px; border:2px ridge #b79860; color:#4e301f; }
.story-copy p { color:#553822; text-shadow:none; }
.story-choices button { background:linear-gradient(#163a5344,#1a163c66),var(--hero-blue) center/260px; }
.story-choices button > .icon { width:36px; height:36px; }
.story-choices .class-choice { background:linear-gradient(#18483c55,#18483c66),var(--hero-blue) center/260px; border-color:#c4d78a; }
.encounter-panel { position:relative; }
.encounter-panel[data-encounter=camp] { --menu-cloth:var(--hero-red); }
.encounter-panel[data-encounter=trader] { background:linear-gradient(#104b32aa,#15332bce),var(--hero-blue) center/400px; }
.encounter-panel[data-encounter=shrine] { background:linear-gradient(#27236577,#131c4b88),var(--hero-blue) center/400px; }
.encounter-panel .scene-icon > .icon { width:64px; height:64px; }
.loot-item { background:linear-gradient(#39215166,#28153088),var(--hero-blue) center/140px; border:2px ridge var(--tier); border-radius:0; }
.loot-item > .icon { width:30px; height:30px; }
.camp-return > div { color:#51341f; background:var(--hero-page) center/350px; padding:5px 8px; border:2px ridge #b48e53; }
.camp-return > div :is(b,span) { color:#51341f; }
.report-panel { --menu-cloth:var(--hero-red); }
.report-panel h2 { padding-bottom:7px; border-bottom:2px ridge #c99c56; }
.report-panel .reward-line { color:#ffdf91; }
.road-card h3 { color:#683e20; text-shadow:none; }
.road-card button { color:#fff0c2; }
.road-card p,.road-card small,.road-reserve { color:#63442a; }
.road-card .road-service,.road-card .road-reserve,.road-card .road-reserve strong { color:#5d3a22!important; }
.road-card .danger-note { color:#932b29!important; }
.road-bearing { color:#843c2b; }
.road-bearing::before { content:''; display:inline-block; width:24px; height:24px; vertical-align:middle; background:url('assets/ui/heroic/icons-v2/compass.webp') center/contain no-repeat; margin-right:3px; }
.target-detail,.support-detail,.order-detail { background:linear-gradient(#24154388,#14112aaa),var(--hero-blue) center/300px; padding:7px; border:1px ridge #b89a64; }
.target-list > button,.support-list > button { background:linear-gradient(#14396a44,#1c164555),var(--hero-blue) center/220px; border:2px ridge #bfa065; }
.target-list > button.selected,.support-list > button.selected { background:linear-gradient(#8e293e44,#40152e55),var(--hero-red) center/220px!important; }
.target-crew > button { background:linear-gradient(#12365244,#11172e77),var(--hero-blue) center/150px; }
#retreat-plan { --menu-cloth:var(--hero-red); }
.wreck-items { background:linear-gradient(#0a153a66,#11132966),var(--hero-blue) center/300px; border-color:#c29e65; }
.wreck-items article { padding:8px; }
.wreck-items article small { color:#68482b; }
.wreck-items > p { color:#ead9b9!important; }
.report-panel[data-outcome=return] { --menu-cloth:var(--hero-blue); }
.report-panel[data-outcome=defeat] { background:linear-gradient(#2e123cc9,#201137cf),var(--hero-red) center/400px; }
.report-panel[data-outcome=victory] { background:linear-gradient(#795b4222,#1b1c4266),var(--hero-blue) center/400px; }
.report-panel h2 { position:relative; }
.report-panel h2::before { content:''; position:absolute; left:0; top:-3px; width:32px; height:32px; background:url('assets/ui/heroic/icons-v2/flag.webp') center/contain no-repeat; }
.report-panel[data-outcome=return] h2::before { background-image:url('assets/ui/heroic/icons-v2/castle.webp'); }
.report-panel[data-outcome=defeat] h2::before { background-image:url('assets/ui/heroic/icons-v2/skull.webp'); }

/* Battle cabinets are joined to the screen edge, rather than floating HUD pills. */
body[data-screen=battle] #order-hud { z-index:8; left:auto; right:20px; top:calc(var(--rail-top) + 7px); width:144px; max-width:none; }
body[data-screen=battle] #order-hud .selected-soldier { display:flex; flex-direction:column; gap:3px; background:transparent; border:0; padding:0; }
body[data-screen=battle] #order-hud .selected-soldier > button:first-child { width:100%; height:90px; min-height:66px; padding:5px; font-size:10px; border:1px ridge #c9aa70; background:#13173388; }
body[data-screen=battle] #order-hud .selected-soldier > button:last-child { position:absolute; right:0; bottom:-51px; width:44px; height:44px; }
body[data-screen=battle] #selection-hud { z-index:8; left:auto; right:20px; top:calc(var(--rail-top) + 104px); width:144px; padding:0; border:0; border-radius:0; background:none; }
body[data-screen=battle] #selection-hud > button { width:94px; min-height:62px; padding:4px; font-size:10px; gap:2px; flex-direction:column; border:1px ridge #c6a064; }
body[data-screen=battle] #selection-hud small { font-size:9px; white-space:normal; }
body[data-screen=battle] #mission-hud { z-index:8; left:39%; top:20px; bottom:auto; height:26px; width:96px; max-width:96px; transform:translateX(-50%); padding:0; border:0; border-radius:0; background:transparent; font-size:10px; white-space:normal; }
body[data-screen=battle] #mission-hud .hold-target b { font-size:10px; white-space:nowrap; }
body[data-screen=battle] #mission-hud .hold-target small { font-size:8px; white-space:nowrap; }
body[data-screen=battle] .hero-button { background:linear-gradient(#12396144,#19254688),var(--hero-blue) center/140px; border:2px ridge #d0ae6b; border-radius:0; }
body[data-screen=battle] .hero-button.selected { background:linear-gradient(#2b614644,#18413499),var(--hero-blue) center/140px!important; }
body[data-screen=battle] .hero-button img { border:1px ridge #d4b76e; border-radius:30% 30% 0 0; background:#3e5e7c; }
.orders button { border-radius:0; }
.orders button > .icon { width:31px; height:31px; }
#hint { z-index:9; bottom:calc(var(--rail-bottom) + 3px); left:20px; right:calc(var(--cabinet-right) + 20px); font-size:11px; }
body[data-screen=castle] #hint { bottom:26px; }
#wreck-hud { left:24px; bottom:calc(var(--rail-bottom) + 7px); }

@media (min-height:600px) {
  #app { --rail-top:68px; --rail-bottom:88px; }
  body[data-screen=battle] #app { --cabinet-right:188px; }
  body[data-screen=castle] #app { --rail-bottom:28px; }
  #hud { top:16px; }
  body[data-screen=battle] #order-hud,body[data-screen=battle] #selection-hud { width:165px; }
  .castle-panel { padding:20px; }
}
@media (max-width:850px) {
  .brand { display:none; }
  .resources { gap:5px; padding:2px 5px; }
  .resource .icon { width:24px; height:24px; }
  .hud-right { gap:1px; padding:0; }
  .hud-right > button { min-width:44px; }
  .map-position { max-width:150px; }
}
@media (max-height:500px) and (orientation:landscape) {
  #app { --rail-top:62px; --rail-bottom:76px; }
  body[data-screen=castle] #app { --rail-bottom:24px; }
  body[data-screen=encounter] #app,body[data-screen=report] #app { --rail-bottom:24px; }
  .facility-crest { width:36px; height:36px; }
  .facility-crest .icon { width:30px; height:30px; }
  .panel-top h2 { font-size:20px; }
  .start-panel { padding:16px 18px; }
  .start-crest { width:48px; height:48px; right:10px; top:14px; }
  .start-panel h1 { padding-right:33px; }
  .start-actions button { font-size:15px; }
  .start-actions button .icon { width:28px; height:28px; }
  .inventory-row > .icon { width:30px; height:30px; }
  .forge-object-icon { width:66px; height:66px; }
  .forge-object-icon .icon { width:60px; height:60px; }
  .forge-object-actions > button .icon { width:26px; height:26px; }
  .rpg-item h3 .icon { width:24px; height:24px; }
  .rpg-item h3 { font-size:14px; }
  .gear-slot .icon { width:27px; height:27px; }
  .stat-grid > div > .icon { width:24px; height:24px; }
  .story-copy { padding:7px; }
  .story-choices button > .icon { width:28px; height:28px; }
  .target-detail,.support-detail,.order-detail { padding:4px; }
  .camp-return > div { padding:3px 6px; }
  .building-card h3 > .icon,.upgrade-grid h3 > .icon { width:26px; height:26px; }
}
@media (max-height:380px) and (orientation:landscape) {
  #app { --rail-top:62px; --rail-bottom:70px; }
  body[data-screen=castle] #app { --rail-bottom:24px; }
  body[data-screen=encounter] #app,body[data-screen=report] #app { --rail-bottom:24px; }
  .start-panel .menu-subtitle { display:none; }
  .start-panel h1 { font-size:28px; }
  .castle-panel > .panel-top { margin-bottom:5px; padding-bottom:4px; }
  .castle-panel:has(.fresh-preparation),.castle-panel:has(.barracks-layout) { padding:6px 9px; }
  .hero-tile { border-width:1px; }
  .barracks-layout .hero-tile img { width:30px; height:30px; }
  .recruit-portrait { width:24px; height:28px; }
  #map-tools { gap:1px; }
  #controls { height:56px; bottom:14px; }
  #hud { left:18px; right:18px; }
  .hud-left .resources { font-size:10px; }
  .resource-summary .resource { gap:1px; }
  .resource .icon { width:21px; height:21px; }
  .road-choice { min-width:44px; padding:3px; }
  .map-position { max-width:140px; }
  .map-position .location-name { font-size:11px; }
  .road-controls { gap:3px; }
  .orders { gap:3px; }
  .orders button > .icon { width:28px; height:28px; }
  body[data-screen=battle] #order-hud .selected-soldier > button:first-child { font-size:9px; padding:3px; }
}
@media(max-width:650px) and (orientation:landscape) {
  body[data-screen=battle] .hero-button { width:66px; padding:3px; grid-template-columns:27px minmax(0,1fr); }
  body[data-screen=battle] .hero-button img { width:27px; }
  .orders button.big { width:44px; min-width:44px; padding:4px; }
}
@media(min-width:760px) and (max-width:850px) and (min-height:381px) { .brand { display:block; font-size:14px; } }
@media(orientation:portrait) { #rotate { background:linear-gradient(#111d4955,#160e3e88),var(--hero-blue) center/500px; border:16px solid transparent; border-image:var(--hero-frame) 210 / 24px / 0 stretch; } }

/* the project owner's supplied SoC reference: a fine contour, not an opaque screen cabinet.
   Touch targets stay 44px; smaller painted fittings grow out of the perimeter.
   Interior folios above deliberately retain their richer material frames. */
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #app {
  --rail-top:48px; --rail-bottom:58px; --frame-side:4px; --cabinet-right:0px;
  --edge-left:max(4px,env(safe-area-inset-left));
  --edge-right:max(4px,env(safe-area-inset-right));
}
body[data-screen=castle] #app { --rail-bottom:4px; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #game-frame {
  border-width:4px; border-image-width:9px; box-shadow:inset 0 0 0 1px #372320;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) :is(.frame-top-rail,.frame-bottom-rail) {
  left:-4px; right:-4px; height:4px; border:0;
  background:linear-gradient(#ffe8b7,#9b6b31 50%,#281c1d); box-shadow:0 1px 2px #0008;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .frame-top-rail { top:-4px; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .frame-bottom-rail { bottom:-4px; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) :is(.frame-side-cabinet,.frame-inner-rule) { display:none; }

/* Small attached top fittings; transparent space between resources and commands. */
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #hud {
  top:4px; left:var(--edge-left); right:var(--edge-right); height:44px;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-left { align-self:flex-start; gap:0; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .brand { display:none; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .resources {
  min-height:36px; height:36px; border-width:1px; border-top:0;
  border-radius:0 0 9px 3px; background:linear-gradient(#151b32d9,#19172de8);
  padding:2px 7px; gap:7px; box-shadow:inset 0 -2px #d0a66055,0 2px 3px #0006;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .resources.field-resources { height:42px; padding:1px 5px; gap:0 5px; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .resource-summary { align-self:flex-start; align-items:flex-start; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-right {
  align-self:flex-start; height:44px; gap:0; padding:0; border:0; background:none; box-shadow:none;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-right > button {
  position:relative; isolation:isolate; width:44px; height:44px; min-width:44px;
  padding:5px; border:0; background:none; box-shadow:none;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-right > button::before {
  content:''; position:absolute; z-index:-1; inset:-4px 3px 5px;
  border:1px solid #c3a46a; border-top:0; border-radius:0 0 16px 16px;
  background:linear-gradient(#1e2131dd,#192039f2); box-shadow:inset 0 -2px #7c592d,0 2px 3px #0008;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-right > button:hover:not(:disabled)::before { background:#324463; border-color:#ffe4ab; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) .hud-right > button > .icon { width:28px; height:28px; }
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #hint { left:12px; right:12px; bottom:62px; }

/* Bottom tabs meet the thin molding; the world stays visible between groups. */
body:is([data-screen=map],[data-screen=battle]) #controls {
  left:var(--edge-left); right:var(--edge-right); bottom:4px; height:54px; gap:6px; align-items:flex-end;
}
body:is([data-screen=map],[data-screen=battle]) #controls button {
  border-width:1px; border-radius:7px 7px 0 0; box-shadow:inset 0 1px #ffe0a14d,0 -1px 3px #0008;
}
body[data-screen=map] .dock-location { gap:0; align-items:flex-end; }
body[data-screen=map] .map-position {
  height:44px; max-height:44px; min-height:44px; max-width:160px;
  padding:2px 5px; grid-template-columns:22px minmax(0,1fr); grid-template-rows:15px 11px 10px; gap:0 4px;
  border-width:1px; border-radius:8px 0 0 0!important;
}
body[data-screen=map] .map-position > .icon { width:22px; height:22px; }
body[data-screen=map] .map-position .location-name { font-size:11px; line-height:15px; }
body[data-screen=map] .map-position .map-name { font-size:9px; line-height:11px; }
body[data-screen=map] .map-position > small { font-size:8px; line-height:10px; }
body[data-screen=map] .dock-location > button:last-child { border-radius:0 8px 0 0!important; }
body[data-screen=map] .road-choice { height:48px; min-width:44px; padding:2px 7px; background:linear-gradient(#183b51e8,#162b43f2); }
body[data-screen=map] .home-plan { height:44px; padding:3px 6px; background:linear-gradient(#421e35e8,#272039f5); }
body[data-screen=map] #map-tools {
  right:var(--edge-right); top:50%; gap:1px; padding:0;
  border-right:2px ridge #d5b77a; border-radius:15px 0 0 15px;
  background:linear-gradient(90deg,transparent 66%,#332523c4);
}
body[data-screen=map] #map-tools > button {
  position:relative; isolation:isolate; border:0; background:none; box-shadow:none; padding:6px;
}
body[data-screen=map] #map-tools > button::before {
  content:''; position:absolute; inset:5px 0 5px 7px; z-index:-1;
  border:1px solid #d1b273; border-radius:50% 0 0 50%;
  background:linear-gradient(90deg,#171e35ef,#2b2b3cec); box-shadow:inset 1px 0 #ffe5b34d;
}
body[data-screen=map] #map-tools > button .icon { width:27px; height:27px; }
body[data-screen=map] #wreck-hud { left:4px; bottom:62px; }

/* Selected unit and threats are compact edge fittings, not a filled sidebar. */
body[data-screen=battle] #order-hud {
  left:var(--edge-left); right:auto; top:52px; width:174px; max-width:174px;
}
body[data-screen=battle] #order-hud .selected-soldier { gap:0; }
body[data-screen=battle] #order-hud .selected-soldier > button:first-child {
  width:174px; height:64px; min-height:64px; padding:3px 7px;
  border:1px solid #c8a66a; border-left:0; border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,#1b233bf0,#18223be8); box-shadow:inset 0 -2px #8e6b3e55;
}
body[data-screen=battle] .selected-soldier b { display:flex; justify-content:space-between; align-items:center; gap:4px; font-size:11px; line-height:14px; }
body[data-screen=battle] .selected-soldier .unit-numbers { font-size:9px; font-weight:400; }
body[data-screen=battle] .selected-soldier .unit-numbers .icon { width:12px; height:12px; display:inline-flex; vertical-align:-2px; }
body[data-screen=battle] .selected-soldier small { max-width:none; font-size:9px; line-height:12px; }
body[data-screen=battle] .selected-soldier small.ability-status { max-width:none; font-size:10px; line-height:12px; }
body[data-screen=battle] #order-hud .selected-soldier > button:last-child {
  left:0; right:auto; bottom:-44px; height:44px; border:1px solid #bb9d66;
  border-left:0; border-radius:0 0 16px 0; background:linear-gradient(90deg,#1b233bee,#18223bf5);
}
body[data-screen=battle] #selection-hud { right:var(--edge-right); left:auto; top:52px; width:144px; }
body[data-screen=battle] #selection-hud > button {
  width:144px; min-height:52px; padding:4px 7px; flex-direction:row;
  border:1px solid #bd9c65; border-right:0; border-radius:9px 0 0 9px;
  background:linear-gradient(90deg,#3e2139e8,#281c30f0); box-shadow:inset 0 -2px #8e6b3e55;
}
body[data-screen=battle] #selection-hud > button > .icon { width:24px; height:24px; }
body[data-screen=battle] #selection-hud > button > span:not(.icon) { min-width:0; }
body[data-screen=battle] #mission-hud { top:10px; left:39%; }
body[data-screen=battle] #mission-hud:has(.hold-target) {
  top:6px; left:39%; width:100px; max-width:100px; height:36px;
  padding:0; border:0; background:none; gap:2px;
}
body[data-screen=battle] #mission-hud:has(.hold-target) .paused-badge { margin-left:0; font-size:8px; letter-spacing:0; }
body[data-screen=battle] .squad-controls { gap:2px; }
body[data-screen=battle] .hero-button { width:70px; height:52px; padding:3px; grid-template-columns:29px minmax(0,1fr); }
body[data-screen=battle] .hero-button img { width:29px; height:34px; }
body[data-screen=battle] .orders { gap:2px; }
body[data-screen=battle] .orders button.big { width:44px; height:48px; min-width:44px; padding:4px; }
body[data-screen=battle] .orders button > .icon { width:28px; height:28px; }
@media(max-width:650px) and (orientation:landscape) {
  body[data-screen=battle] .hero-button { width:62px; grid-template-columns:26px minmax(0,1fr); }
  body[data-screen=battle] .hero-button img { width:26px; }
}

body[data-screen=castle] #castle-dock {
  left:8px; right:auto; bottom:4px; height:21px; gap:9px; padding:0 9px 0 2px;
  border-bottom:1px solid #c1a06c; border-radius:0 12px 0 0;
  background:linear-gradient(90deg,#161c2ed9,#161c2eaa); color:#ffe7ae;
}
body[data-screen=castle] #castle-dock b { font-size:12px; }
body[data-screen=castle] #castle-dock span { font-size:9px; }
body[data-screen=castle] #hint { bottom:28px; }
.forge-maintenance { display:flex; align-items:center; gap:10px; flex:none; }
.forge-maintenance button { min-height:44px; font-size:12px; }
.forge-maintenance button small { display:block; font-size:10px; }
.forge-maintenance > small { font-size:11px; }
.forge-selectors { display:flex; gap:8px; margin-bottom:7px; }
.forge-selectors .forge-recipient { flex:1; min-width:0; margin:0; gap:6px; }
.forge-selectors > select { width:110px; }
#armor-recipe { width:100%; min-height:44px; font-size:12px; }
#forge-preview .forge-receipt p { line-height:1.25; }
@media (max-height:400px) and (orientation:landscape) {
 #forge-preview { padding:8px; }
 #forge-preview .forge-receipt { margin:5px 0; padding:6px; }
 #forge-preview .forge-receipt h3 { font-size:16px; margin-bottom:3px; }
 #forge-preview .forge-warning { margin-top:3px; }
 .forge-selectors { margin-bottom:5px; }
}

/* Forge workbench: three deliberate services, always object + actual wearer. */
.forge-work-tabs { display:flex; gap:6px; flex:none; }
.forge-work-tabs > button { flex:1; min-height:44px; font-size:13px; padding:4px 10px; }
.forge-work-tabs .icon { width:25px; height:25px; }
.forge-work-tabs [aria-pressed=true] { border-color:#ffda82; box-shadow:inset 0 -3px #d6a64b; background:#315d59; }
.forge-maintenance { width:100%; }
.forge-maintenance > small { max-width:240px; }
.forge-row-service { font-size:11px; padding:3px 7px; flex:none; }
.forge-row-service .icon { width:23px; height:23px; }
.item-lore { font:italic 13px/1.4 Georgia,serif; color:#f3d9ab; margin:8px 0; }
.inventory-row .item-name { overflow-wrap:anywhere; }

/* Illustration and narrative share the left folio; choices keep their own column. */
.story-panel { width:min(1000px,100%); }
.story-copy { min-width:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px; align-items:center; }
.scenario-art { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; border:1px solid #866338; border-radius:3px; margin:0; }
.story-copy p { margin:0; font-size:14px; line-height:1.4; }
@media(max-height:440px) and (orientation:landscape) {
 .story-panel { padding:9px 12px; }
 .story-heading { margin-bottom:6px; }
 .story-layout { grid-template-columns:1.18fr 1fr; gap:10px; }
 .story-copy { padding:6px; }
 .story-copy p { font-size:12px; line-height:1.3; }
 .forge-stock { gap:4px; }
 .forge-work-tabs > button { padding:3px 6px; font-size:12px; }
 .forge-row-service { width:44px; font-size:0; padding:4px; }
 .forge-row-service .icon { width:26px; height:26px; }
 .item-lore { font-size:11px; margin:5px 0; }
}
@media(max-height:340px) and (orientation:landscape) {
 .story-copy p { font-size:11.5px; line-height:1.3; }
}

/* Flush continuous metal molding. Bitmap alpha must never expose world outside it.
   Safe-area affects touch fittings, never the outer screen edge. */
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #game-frame {
 position:fixed; inset:0; border:4px ridge #90764b; border-image:none; border-radius:0;
 box-shadow:inset 0 0 0 1px #352b23,inset 0 0 8px 1px #201b16a8;
}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) :is(.frame-top-rail,.frame-bottom-rail) {
 background:linear-gradient(#b7a16c,#7b6642 48%,#433c2d); box-shadow:none;
}
@media(max-height:380px) and (orientation:landscape) {
 #forge-item-detail .forge-object { padding:6px; gap:9px; }
 #forge-item-detail .forge-object-icon { width:56px; height:56px; flex:none; }
 #forge-item-detail .forge-object-icon .icon { width:50px; height:50px; }
 #forge-item-detail .forge-object-actions,#forge-item-detail .forge-object-footer { margin-top:5px; }
 #forge-item-detail .item-lore { margin:4px 0; }
}

/* Compact Forge: screen space belongs to the item ledger, not stacked headings. */
.castle-panel[data-facility=stash] {
 position:fixed; inset:48px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
 width:auto; max-width:none; height:auto; max-height:none; margin:0; padding:6px;
 border:2px ridge #c0a365; border-image:none; border-radius:3px;
 display:flex; flex-direction:column; gap:4px; overflow:hidden;
}
.castle-panel[data-facility=stash] > .panel-top {
 display:flex; align-items:center; flex:none; min-height:44px; height:44px;
 gap:8px; padding:0; margin:0; border:0;
}
.castle-panel[data-facility=stash] > .panel-top h2 { flex:none; font-size:19px; margin:0; }
.castle-panel[data-facility=stash] .facility-crest { display:none; }
.castle-panel[data-facility=stash] .tab-row { flex:none; margin-left:auto; }
.castle-panel[data-facility=stash] .tab-row button { width:44px; height:44px; padding:4px; border-width:1px; }
.castle-panel[data-facility=stash] .forge-work-tabs { flex:1; max-width:540px; gap:4px; }
.castle-panel[data-facility=stash] .forge-work-tabs > button {
 min-height:44px; height:44px; padding:3px 8px; border:1px solid #c9a26b;
 border-radius:3px; background:#2b3041; font-size:13px; gap:5px;
}
.castle-panel[data-facility=stash] .forge-work-tabs > button[aria-pressed=true] { background:#32624e; border-color:#edd091; box-shadow:inset 0 -2px #e0b15c; }
.castle-panel[data-facility=stash] .forge-work-tabs .icon { width:22px; height:22px; }
.castle-panel[data-facility=stash] .forge-stock { flex:1; min-height:0; gap:4px; }
.castle-panel[data-facility=stash] .forge-toolbar { flex:none; gap:6px; min-height:44px; height:44px; }
.castle-panel[data-facility=stash] .forge-filters { display:flex; gap:4px; min-width:0; flex:1; }
.castle-panel[data-facility=stash] .forge-filters select { min-width:0; flex:1; min-height:44px; padding:3px 6px; font-size:12px; border:1px solid #8e977f; border-radius:3px; }
.castle-panel[data-facility=stash] .forge-toolbar > button { flex:none; min-height:44px; padding:3px 8px; }
.castle-panel[data-facility=stash] .forge-maintenance { width:auto; flex:0 1 240px; min-width:170px; gap:0; }
.castle-panel[data-facility=stash] .forge-maintenance button { flex:1; padding:2px 6px; height:44px; min-height:44px; font-size:12px; }
.castle-panel[data-facility=stash] .forge-maintenance button small { font-size:10px; line-height:11px; }
.castle-panel[data-facility=stash] .forge-bulk-status { color:#ffdcaa; }
.castle-panel[data-facility=stash] .inventory-list { flex:1; min-height:0; max-height:none; margin:0; padding:0 3px 0 0; border:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b3955b #30262b; }
.castle-panel[data-facility=stash] .inventory-row {
 display:grid; grid-template-columns:24px minmax(0,1fr) auto 44px; gap:6px; align-items:center;
 min-height:48px; margin:0 0 3px; padding:1px 4px;
 border:1px solid #bda574; border-left:3px solid var(--item-rarity); border-radius:3px;
}
.castle-panel[data-facility=stash] .inventory-row > .icon { width:24px; height:24px; }
.castle-panel[data-facility=stash] .item-name { min-width:0; font-size:13px; line-height:16px; }
.castle-panel[data-facility=stash] .forge-item-title { display:block; font-size:13px; line-height:16px; font-weight:650; overflow-wrap:anywhere; }
.castle-panel[data-facility=stash] .forge-item-owner { display:block; font-size:11px; line-height:14px; margin:0; }
.castle-panel[data-facility=stash] .forge-row-state { font-size:11px; }
.castle-panel[data-facility=stash] .inventory-row > button { min-width:44px; min-height:44px; height:44px; padding:3px; border:1px solid #997748; border-radius:3px; }
.castle-panel[data-facility=stash] .inventory-row > button[data-action=forge-item] { width:44px; }
.castle-panel[data-facility=stash] .inventory-row > button .icon { width:26px; height:26px; }
.castle-panel[data-facility=stash] .forge-row-service { display:flex; flex-direction:column; justify-content:center; gap:1px; width:auto; min-width:124px; max-width:190px; font-size:11px; background:#315d44; color:#fff7d5; }
.castle-panel[data-facility=stash] .forge-row-cost { display:block; font-size:11px; line-height:13px; font-weight:650; }
.castle-panel[data-facility=stash] .forge-row-status { display:block; font-size:10px; line-height:12px; color:#fff1c6; margin:0; }
.castle-panel[data-facility=stash] .inventory-row[data-affordable=true] { background:linear-gradient(#e3edcce8,#e3edcce8),var(--hero-page); border-top-color:#789766; border-bottom-color:#789766; }
.castle-panel[data-facility=stash] .inventory-row[data-affordable=false] { background:linear-gradient(#efd2c8ed,#efd2c8ed),var(--hero-page); border-top-color:#ba8270; border-bottom-color:#ba8270; }
.castle-panel[data-facility=stash] .inventory-row[data-affordable=false] .forge-row-service { background:#7b3c35; border-color:#a7624e; }
.castle-panel[data-facility=stash] .forge-empty { padding:8px; min-height:0; }
.castle-panel[data-facility=stash] .forge-empty > .icon { width:28px; height:28px; }
.castle-panel[data-facility=stash] .forge-empty h3 { margin:3px 0; font-size:17px; }
.castle-panel[data-facility=stash] .forge-empty p { margin:3px 0; font-size:12px; }
@media(min-width:1100px) and (min-height:600px) {
 .castle-panel[data-facility=stash] { inset:56px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); padding:10px; }
 .castle-panel[data-facility=stash] .forge-filters { max-width:620px; }
}
.castle-panel[data-facility=stash] .inventory-list { gap:3px; }
.castle-panel[data-facility=stash] .inventory-row { flex:none; margin:0; }
.castle-panel[data-facility=stash] .inventory-row > button[data-action=forge-item] { grid-column:4; }

/* Inline ledger costs and bare inspection glyphs: touch areas, no painted boxes. */
.castle-panel[data-facility=stash] .inventory-row > button.forge-row-service,
.castle-panel[data-facility=stash] .inventory-row > button[data-action=forge-item] {
 border:0!important; border-image:none!important; background:none!important; box-shadow:none!important;
 color:#51331f; border-radius:0; padding:2px 4px;
}
.castle-panel[data-facility=stash] .inventory-row > button.forge-row-service { min-width:44px; max-width:none; }
.castle-panel[data-facility=stash] .forge-row-cost { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:8px; font-size:13px; line-height:20px; white-space:nowrap; }
.castle-panel[data-facility=stash] .forge-cost-resource { display:inline-flex; align-items:center; gap:2px; }
.castle-panel[data-facility=stash] .forge-row-cost .forge-cost-resource .icon { width:22px; height:22px; }
.castle-panel[data-facility=stash] .inventory-row > button:focus-visible { outline:2px solid #815c25; outline-offset:-2px; }
/* Very short phone landscapes still show the full painting and all decisions. */
@media (max-height:300px) and (orientation:landscape){
 .story-panel{padding:6px 10px}
 .story-heading{margin-bottom:4px}
 .story-heading h2{font-size:18px;line-height:22px}
 .story-copy{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:8px}
 .story-copy p{line-height:1.25}
 .story-choices{gap:4px}
 .story-choices button{min-height:44px;padding:4px 6px}
 .story-choices small{font-size:10px;line-height:1.15}
}

/* One elongated resource fitting: no implicit or wrapped second row. */
body #hud .resource-summary .resources{display:flex;flex-wrap:nowrap;grid-template-columns:none;grid-template-rows:none;height:36px;min-height:36px;padding:3px 6px;gap:8px;font-size:12px}
body #hud .resource-summary .resource{align-self:center;gap:2px;line-height:20px}
body #hud .resource-summary .resources .icon{width:18px;height:18px}
@media(max-width:800px){body #hud .resource-summary .resources{font-size:11px;padding:2px 5px;gap:4px}body #hud .resource-summary .resource{gap:1px}body #hud .resource-summary .resources .icon{width:16px;height:16px}}
/* Keep carried-wood count inside its painted tab, not below the fitting. */
.hud-right>button[data-count]>.icon{width:24px!important;height:24px!important;transform:translateY(-5px)}
.hud-right>button[data-count]::after{right:6px;bottom:8px;font-size:10px;line-height:11px;text-align:right;text-shadow:0 1px 2px #000}
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #game-frame::before,
body:is([data-screen=map],[data-screen=battle],[data-screen=castle]) #game-frame::after{display:none}