/* Physical, irregular nine-slice borders. Decorative pixels never cover controls. */
:root{--frame-organic:url('assets/interface/frame-organic.webp');--frame-field:url('assets/interface/frame-field.webp');--frame-archive:url('assets/interface/frame-archive.webp')}
/* Primary containers keep their existing layouts and content padding. */
body :is(.resistance-panel,.raid-command,.milestone,.evolution-cap,.cortex-profile,.mutant-census,.prestige-box,.campaign-progress,.army-composer,.camp-file,.report-panel,.vaccine-console,.vaccine-colony,.vaccine-tree-section,.evolution-current,.evolution-records,.genetics-content,.archive-paper,.camera-console,.operation-plan,.garrison-info,.march-card,.vaccine-alert,.intel-card){
 --frame-art:var(--frame-field);--frame-size:20px;
 border:var(--frame-size) solid transparent;border-image-source:var(--frame-art);border-image-slice:22%;border-image-width:1;border-image-repeat:stretch;
 border-radius:0;background-clip:padding-box;box-shadow:0 9px 20px #0005;
}
body :is(.evolution-cap,.cortex-profile,.mutant-census,.prestige-box,.evolution-current,.evolution-records,.vaccine-console,.vaccine-colony,.vaccine-tree-section,.genetics-content){--frame-art:var(--frame-organic)}
body :is(.campaign-progress,.army-composer,.camp-file,.report-panel,.vaccine-console,.evolution-current,.genetics-content){--frame-size:28px}
body :is(.resistance-panel,.milestone,.raid-command,.evolution-cap,.cortex-profile,.mutant-census){--frame-size:17px}
body .camera-console{--frame-size:12px;background-color:#121d19}
body .genetics-content{background-color:#14221b;background-clip:padding-box}
body .vaccine-console{background-color:#20261d}
body .campaign-progress{background-color:#20231a}
/* Fine frames for individual choices. Rare and legendary surfaces retain their color. */
body :is(.gene-recipe,.gene-outcome,.genome-card,.vaccine-node,.adaptation-choices button,.evolution-choices button,.evolution-record,.cortex-bonus-panel,.report-row,.battle-estimate,.report-operation,.report-totals,.report-itinerary,.birth-history article){
 --card-art:var(--frame-field);border:12px solid transparent;border-image-source:var(--card-art);border-image-slice:22%;border-image-width:1;border-image-repeat:stretch;border-radius:0;background-clip:padding-box;box-shadow:0 4px 12px #0004;
}
body :is(.gene-recipe,.gene-outcome,.genome-card,.vaccine-node,.evolution-choices button,.evolution-record,.cortex-bonus-panel){--card-art:var(--frame-organic)}
body .gene-recipe{border-width:20px}
body :is(.gene-outcome,.genome-card){border-width:15px}
body .gene-outcome.legendary,body .genome-card.legendary{background-color:#35271b;box-shadow:0 0 20px #a9772c1a,inset 0 0 35px #a9772c16}
body .adaptation-choices button{padding:12px;border-width:14px}
body .vaccine-node{padding:12px;border-width:14px}
body .vaccine-node:hover:not(:disabled),body .evolution-choices button:hover{box-shadow:0 0 18px #b6bb6240}
body .vaccine-node:focus-visible,body .evolution-choices button:focus-visible,body .adaptation-choices button:focus-visible{outline:2px solid #e3c184;outline-offset:3px}
/* Archives read as fragile recovered dossiers, rather than a dashboard card. */
body .archive-paper{--frame-art:var(--frame-archive);--frame-size:34px;background:radial-gradient(ellipse at 20% 5%,#74613c20,transparent 65%),repeating-linear-gradient(0deg,#1f231900 0 7px,#aaa07804 8px 9px),#25271d;background-clip:padding-box;box-shadow:0 14px 25px #0006;color:#d5c8a3}
body .archive-paper h2{color:#d7ba80;text-shadow:1px 2px #100d07}
body .archive-paper .archive-signature{border-top:1px dashed #95815377}
body .archive-list button{border:7px solid transparent;border-image:var(--frame-archive) 22% / 1 stretch;background-clip:padding-box;margin-bottom:5px}
body .archive-list button[aria-current=true],body .archive-list button.selected{background-color:#48432b;color:#edcc91}
body .reports-empty{border:0;background:radial-gradient(ellipse at 50% 70%,#7d5a2730,transparent 65%);position:relative}
body .reports-empty::before{content:'';display:block;width:110px;height:28px;margin:0 auto 22px;background:linear-gradient(102deg,transparent 7%,#80503b 8% 12%,transparent 13% 25%,#986e42 26% 30%,transparent 31% 45%,#986e42 46% 50%,transparent 51% 66%,#986e42 67% 71%,transparent 72% 87%,#80503b 88% 92%,transparent 93%);transform:rotate(-7deg);opacity:.7}
/* Small utility controls use chipped edges and inset wear, without a thick ornament. */
body :is(.gene-rewrite,.send-expedition,.raid-command>button,.resistance-panel>button,.reports-empty button,.evolution-mutate,#claimObjective){border:2px solid #92724d;background-image:linear-gradient(110deg,#a9894b16,transparent 35%,#0003);clip-path:polygon(7px 0,calc(100% - 3px) 0,100% 4px,100% calc(100% - 8px),calc(100% - 8px) 100%,3px 100%,0 calc(100% - 3px),0 8px);box-shadow:inset 0 1px #d1ba6d33,inset 0 -3px #0005}
body :is(.gene-rewrite,.send-expedition,.evolution-mutate):hover:not(:disabled){filter:brightness(1.14)}
body .game-tabs button[aria-selected=true]{clip-path:polygon(6px 0,calc(100% - 4px) 0,100% 5px,100% 100%,0 100%,0 6px);background:linear-gradient(110deg,#5a4d2a55,#263322);border-color:#a68b52;box-shadow:inset 0 -3px #c1a567,inset 3px 0 #6e5c3744}
body dialog:not(.victory-screen){border:24px solid transparent;border-image:var(--frame-field) 22% / 1 stretch;background-clip:padding-box;box-shadow:0 18px 70px #000c}
body dialog.evolution-dialog{border-image-source:var(--frame-organic)}
body .intel-card{--frame-size:12px}
body .vaccine-alert{--frame-size:14px}
body .vaccine-alert.lethal{--frame-art:var(--frame-organic)}
body.cortex-saturated .evolution-cap{box-shadow:0 0 22px #a342322b}
@media(max-width:1000px){body :is(.vaccine-console,.campaign-progress,.army-composer,.camp-file,.report-panel,.genetics-content,.evolution-current){--frame-size:20px}body .gene-recipe{border-width:15px}}
@media(max-width:700px){body :is(.resistance-panel,.raid-command,.milestone,.evolution-cap,.cortex-profile,.mutant-census,.prestige-box,.campaign-progress,.army-composer,.camp-file,.report-panel,.vaccine-console,.vaccine-colony,.vaccine-tree-section,.evolution-current,.evolution-records,.genetics-content,.operation-plan,.garrison-info,.march-card){--frame-size:14px}body .archive-paper{--frame-size:20px;padding:18px}body .genetics-content{padding:12px}body :is(.gene-recipe,.gene-outcome,.genome-card,.vaccine-node,.evolution-choices button){border-width:10px}body .gene-recipe{padding:12px}body .adaptation-choices button{border-width:10px}body dialog:not(.victory-screen){border-width:14px}body .vaccine-alert{--frame-size:10px}body .reports-view .report-panel{padding:14px}}
@media(prefers-reduced-motion:reduce){body :is(.gene-rewrite,.send-expedition,.evolution-mutate){transition:none}}
/* Material continues underneath the irregular sprite instead of forming an inset rectangle. */
body :is(.resistance-panel,.raid-command,.milestone,.evolution-cap,.cortex-profile,.mutant-census,.prestige-box,.campaign-progress,.army-composer,.camp-file,.report-panel,.vaccine-console,.vaccine-colony,.vaccine-tree-section,.evolution-current,.evolution-records,.genetics-content,.archive-paper,.camera-console,.operation-plan,.garrison-info,.march-card,.vaccine-alert,.intel-card,.gene-recipe,.gene-outcome,.genome-card,.vaccine-node,.adaptation-choices button,.evolution-choices button,.evolution-record,.cortex-bonus-panel,.report-row,.battle-estimate,.report-operation,.report-totals,.report-itinerary,.birth-history article){background-clip:border-box}
/* Each mutation tier has its own silhouette, materials and corner ornaments. */
:root{--frame-rare:url('assets/interface/frame-rare.webp');--frame-legendary:url('assets/interface/frame-legendary.webp')}
body .gene-result{border:15px solid transparent;border-image:var(--card-art,var(--frame-field)) 22% / 1 stretch;border-radius:0;background-clip:border-box}
body :is(.gene-outcome,.genome-card,.gene-result):not(.rare){--card-art:var(--frame-field)}
body :is(.gene-outcome,.genome-card,.gene-result).rare:not(.legendary){--card-art:var(--frame-rare);border-width:17px}
body :is(.gene-outcome,.genome-card,.gene-result).legendary{--card-art:var(--frame-legendary);border-width:20px}
@media(max-width:700px){body :is(.gene-outcome,.genome-card,.gene-result){border-width:10px}body :is(.gene-outcome,.genome-card,.gene-result).rare:not(.legendary){border-width:12px}body :is(.gene-outcome,.genome-card,.gene-result).legendary{border-width:14px}}
/* Blood-stained archive lettering; clipped to glyphs so copy stays selectable. */
body .archive-view #archiveProgress{
 color:#f4e9df;
 background-image:radial-gradient(ellipse at 14% 34%,#9e1118 0 4%,#6b0911 5%,transparent 7%),radial-gradient(ellipse at 37% 63%,#b51d23 0 2%,transparent 4%),radial-gradient(ellipse at 72% 23%,#850b14 0 5%,transparent 8%),radial-gradient(ellipse at 84% 54%,#a3141c 0 2%,transparent 5%),linear-gradient(174deg,#fff6eb 0%,#f4e8df 34%,#deb9b0 48%,#bd3c40 65%,#8c101a 80%,#4a0810 100%);
 background-size:100% 100%;background-repeat:no-repeat;
 -webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;
 text-shadow:none;filter:drop-shadow(0 2px 0 #190908) drop-shadow(0 4px 3px #0008);
}
@media(forced-colors:active){body .archive-view #archiveProgress{background:none;-webkit-text-fill-color:currentColor;filter:none}}
/* Survivor header and pictograms; text remains live, translated and accessible. */
body .brand-name{display:inline-block;background:linear-gradient(180deg,#d9b79b 0%,#d9b79b 36%,#d79487 48%,#ed3e4b 65%,#ed3e4b 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(1px 2px 0 #080403)}
body .brand-mark{color:#ed3e4b;filter:drop-shadow(0 2px 0 #48080c)}
body .humanity-counter{position:relative;padding-left:42px}
body .humanity-counter::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:29px;height:29px;background-image:url('assets/interface/horror-icons-v2.webp');background-size:400% 200%;background-position:100% 100%;image-rendering:pixelated}
body .humanity-counter strong{color:color-mix(in srgb,#f3e6d2,#cc2530 var(--humanity-red,0%));transition:color 1s linear;font-variant-numeric:tabular-nums}
body .game-tabs{flex-wrap:wrap;gap:6px}
body .game-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;border:7px solid transparent;border-image:var(--frame-field) 22% / 1 stretch;background:linear-gradient(145deg,#34372b,#131d17);box-shadow:inset 0 1px #c2ad6b20;min-height:52px;position:relative}
body .game-tabs button::before{content:'';display:block;flex:0 0 29px;width:29px;height:29px;background-image:url('assets/interface/horror-icons-v2.webp');background-size:400% 200%;image-rendering:pixelated;filter:drop-shadow(1px 2px 1px #0008)}
body #tabCortex::before{background-position:0 0}body #tabEvolution::before{background-position:33.3333% 0}body #tabGenetics::before{background-position:66.6667% 0}body #tabExpeditions::before{background-position:100% 0}body #tabReports::before{background-position:0 100%}body #tabVaccine::before{background-position:33.3333% 100%}body #tabChronicle::before{background-position:66.6667% 100%}
body .game-tabs button[aria-selected=true]{clip-path:none;border-image-source:var(--frame-organic);background:linear-gradient(130deg,#522924,#25251a);color:#f0d4af;box-shadow:inset 0 -2px #ba4c3d66,0 0 12px #8f1c1c22}
body .game-tabs button:focus-visible{outline:2px solid #e2b27c;outline-offset:2px}
body .evolution-mutate,body .evolution-view.mutation-ready .evolution-mutate{border:13px solid transparent;border-image:var(--frame-organic) 22% / 1 stretch;clip-path:none;background:linear-gradient(110deg,#681c23,#a52b32 48%,#4b151b);color:#fff0d8;box-shadow:inset 0 0 20px #22080a77,0 5px 20px #0006;font-size:19px;letter-spacing:.5px;min-height:80px;position:relative}
body .evolution-mutate::before{content:'';display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:12px;background-image:url('assets/interface/horror-icons-v2.webp');background-size:400% 200%;background-position:33.3333% 0;image-rendering:pixelated}
body .evolution-mutate:disabled{opacity:1;background:linear-gradient(110deg,#342022,#482429,#2d1c1f);color:#c2a99b;cursor:not-allowed}
body .evolution-mutate:hover:not(:disabled){background:linear-gradient(110deg,#87232c,#b6343b,#681922);border-image-source:var(--frame-legendary)}
body .evolution-view.mutation-ready .evolution-mutate{animation:mutation-blood-pulse 2.4s ease-in-out infinite}
@keyframes mutation-blood-pulse{50%{box-shadow:inset 0 0 20px #22080a77,0 0 24px #b42b3b55}}
@media(max-width:700px){body .humanity-counter{padding-left:32px}body .humanity-counter::before{left:0;width:25px;height:25px}body .game-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#78302c #172019}body .game-tabs button{flex:0 0 auto;font-size:11px;padding:5px 7px;min-height:48px}body .game-tabs button::before{width:24px;height:24px;flex-basis:24px}body .evolution-mutate{font-size:16px}}
@media(prefers-reduced-motion:reduce){body .evolution-view.mutation-ready .evolution-mutate{animation:none}body .humanity-counter strong{transition:none}}
@media(forced-colors:active){body .brand-name{-webkit-text-fill-color:currentColor;background:none;filter:none}body .humanity-counter strong{color:CanvasText}}
/* Explicit sprite windows also avoid decorative pseudo-elements being suppressed. */
body .game-tabs button::before{content:none}
body .game-tabs button .survivor-nav-art{display:block;position:relative;overflow:hidden;width:29px;height:29px;min-width:29px;flex:0 0 29px;margin:0;pointer-events:none}
body .game-tabs .survivor-nav-art img{display:block;position:absolute;width:400%;height:200%;max-width:none;left:calc(var(--icon-col)*-100%);top:calc(var(--icon-row)*-100%);image-rendering:pixelated}
body #prestigeBtn.evolution-mutate{border:13px solid transparent;border-image:var(--frame-organic) 22% / 1 stretch;clip-path:none;background:linear-gradient(110deg,#681c23,#a52b32 48%,#4b151b)}
body #prestigeBtn.evolution-mutate:disabled{background:linear-gradient(110deg,#342022,#482429,#2d1c1f)}
body #prestigeBtn.evolution-mutate:hover:not(:disabled){background:linear-gradient(110deg,#87232c,#b6343b,#681922);border-image-source:var(--frame-legendary)}
@media(max-width:700px){body .game-tabs button .survivor-nav-art{width:24px;height:24px;min-width:24px;flex-basis:24px}}
@media(min-width:701px){body .game-tabs button{padding-left:6px;padding-right:6px;gap:5px}}
/* First-page neural controls use the same physical materials as the cortex. */
body .neural-meter,body .path-summary{border:17px solid transparent;border-image:var(--frame-organic) 22% / 1 stretch;border-radius:0;background:linear-gradient(145deg,#253026,#17221b);background-clip:border-box;padding:12px;box-shadow:0 6px 16px #0004;min-width:0}
body .neural-meter::before{content:none}
body .path-summary{border-image-source:var(--frame-rare);background:linear-gradient(145deg,#2a2830,#19231c)}
body .neural-meter .neural-track{border-color:#81735188;box-shadow:inset 0 1px 3px #0007}
body .path-summary .cortex-bonus-details{margin-top:12px}
body .path-summary summary:focus-visible{outline:2px solid #d8b68b;outline-offset:4px}
@media(max-width:700px){body .neural-meter,body .path-summary{border-width:13px;padding:10px}}
/* Keep the navigation on one row; narrower displays can scroll it. */
body .game-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#78302c #172019}
body .game-tabs button{flex:0 0 auto;white-space:nowrap}
.gene-unknown-art{display:grid;place-items:center;width:100%;height:100%;min-height:95px;font:700 72px/1 var(--display);color:#817c65;text-shadow:2px 3px #080e09;background:radial-gradient(ellipse,#62593922,transparent 68%);filter:none}
.audio-levels{margin:16px 0 22px;padding:14px 16px;background:#131e16;border-left:3px solid #94404b}
.audio-levels label{display:flex;justify-content:space-between;gap:12px;color:#d8bea0;font:700 15px var(--ui);margin:8px 0}
.audio-levels output{color:#ed7b7e;font-variant-numeric:tabular-nums}
.audio-levels input[type=range]{display:block;width:100%;height:28px;margin:0 0 12px;accent-color:#c9434f;cursor:pointer;touch-action:pan-y}
.audio-levels input[type=range]:focus-visible{outline:2px solid #d2b18d;outline-offset:4px}
.audio-levels input[type=range]{appearance:none;-webkit-appearance:none;background:transparent}
.audio-levels input[type=range]::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,#722c37,#26392c);border:1px solid #776c52;box-shadow:inset 0 2px 3px #0007}
.audio-levels input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:20px;margin-top:-7px;background:#ca4a55;border:2px solid #d7ad89;border-radius:1px;box-shadow:2px 2px #090e09}
.audio-levels input[type=range]::-moz-range-track{height:7px;background:linear-gradient(90deg,#722c37,#26392c);border:1px solid #776c52}
.audio-levels input[type=range]::-moz-range-thumb{width:12px;height:17px;background:#ca4a55;border:2px solid #d7ad89;border-radius:1px;box-shadow:2px 2px #090e09}
/* Tablet header: keep navigation below the title/counter instead of overlapping. */
@media(min-width:701px) and (max-width:1000px){body header{height:auto;min-height:116px;flex-wrap:wrap;gap:8px 14px;padding-top:12px;padding-bottom:12px}body header .brand-group{flex:1 1 100%;justify-content:space-between;max-width:100%}body header nav{width:100%;justify-content:flex-end;gap:14px;margin:0}body header .status{display:none}}