/* Phase 2: bespoke artifact assets. Art supports the existing semantic controls; it never replaces them. */

/* The generated astrolabe is a quiet material plate behind the live, readable dials. */
.global-instability-zone{isolation:isolate;background:linear-gradient(110deg,rgba(17,11,8,.76),rgba(40,24,14,.64),rgba(12,8,7,.76))}
.astrolabe-art{position:absolute;z-index:0;left:50%;top:53%;width:min(470px,78%);aspect-ratio:1;transform:translate(-50%,-50%);background:url('assets/art/ui/phase2/astrolabe.webp') center/contain no-repeat;opacity:.3;mix-blend-mode:screen;filter:saturate(.78) contrast(1.08);pointer-events:none;mask-image:radial-gradient(ellipse 48% 37% at 50% 50%,#000 35%,transparent 78%)}
.global-instability-zone::after{z-index:3}.global-instability-zone::before,.instability-board,.astrolabe{z-index:4}
.instability{position:relative;isolation:isolate;background:linear-gradient(140deg,rgba(25,15,11,.72),rgba(9,7,6,.68));backdrop-filter:none}
.instability::after{content:"";position:absolute;inset:2px;z-index:0;border-radius:1px;background:radial-gradient(circle at 24px 50%,color-mix(in srgb,var(--element-color) 8%,transparent),transparent 58%);pointer-events:none}
.instability>*{position:relative;z-index:1}
.dial{background:repeating-conic-gradient(from -2deg,#c39a5d55 0 1deg,transparent 1deg 30deg),radial-gradient(circle,#130d0b 0 36%,#8b6235 38% 41%,#120c0a 43% 100%);box-shadow:inset 0 0 9px #000,0 0 0 1px #0a0605,0 0 8px color-mix(in srgb,var(--element-color) 15%,transparent)}

/* Catastrophes live inside a bespoke blackened-iron reliquary. */
.catastrophe-deck{isolation:isolate;overflow:hidden;background:linear-gradient(155deg,rgba(24,19,17,.54),rgba(8,7,7,.68));border-color:#816c56}
.reliquary-art{position:absolute;z-index:0;inset:50% auto auto 50%;width:230px;aspect-ratio:1;transform:translate(-50%,-50%);background:url('assets/art/ui/phase2/reliquary.webp') center/contain no-repeat;opacity:.78;mix-blend-mode:screen;filter:saturate(.72) contrast(1.2);pointer-events:none;mask-image:radial-gradient(ellipse 46% 44% at 50% 50%,#000 34%,transparent 76%)}
.catastrophe-deck::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 50% 56%,rgba(164,56,27,.12),transparent 38%),linear-gradient(115deg,rgba(255,255,255,.025),transparent 28% 72%,rgba(255,255,255,.018));pointer-events:none}
.catastrophe-deck::after{z-index:2;border-color:#8f785a30}
.cat-title,.cat-count,.catastrophe-pips,.cat-last{position:relative;z-index:1;text-shadow:0 2px 5px #000}
.catastrophe-pips i{border-color:#806f5e;background:linear-gradient(#2b2724,#0b0909);box-shadow:inset 0 0 0 1px #050404,0 1px 2px #000}
.catastrophe-pips i.used{border-color:#d1794d;background:radial-gradient(circle,#ffb45f 0 12%,#9e321d 35%,#260b08 72%);box-shadow:0 0 8px #cf4f28,inset 0 0 3px #ffd38b}

/* Consequential actions stay text-first: decorative seals caused clipping and muddy alignment. */
.primary-button{min-height:42px;overflow:hidden}
.primary-button::before{content:none}
.primary-button:focus-visible{outline:2px solid #f1d592;outline-offset:4px}
.start-content>.primary-button{min-width:min(100%,280px)}

/* Small bronze corner furniture gives leather surfaces a shared crafted provenance. */
.hand-section::before,.mage-card::before{background-image:linear-gradient(135deg,#d1a65d55 0 2px,transparent 2px),linear-gradient(225deg,#d1a65d55 0 2px,transparent 2px),linear-gradient(315deg,#d1a65d55 0 2px,transparent 2px),linear-gradient(45deg,#d1a65d55 0 2px,transparent 2px);background-position:4px 4px,calc(100% - 4px) 4px,calc(100% - 4px) calc(100% - 4px),4px calc(100% - 4px);background-repeat:no-repeat;background-size:16px 16px}
.hand-section{position:relative}
.hand-section::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none}

@media(max-width:1199px),(max-height:679px){
  .astrolabe-art{width:min(430px,82%);opacity:.24}
  .reliquary-art{width:210px;opacity:.68}
}
@media(max-width:800px){
  .astrolabe-art{width:360px;opacity:.21}
}