/* ==========================================================================
   EMBER SOLITAIRE — Base, shell and shared components
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--forge-black); color: var(--text); }
body {
  font-family: var(--font-ui); font-size: var(--fs-md); line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
img, svg { display: block; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--white-heat); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App shell ---------------------------------------------------- */
.app { position: fixed; inset: 0; overflow: hidden; background: var(--forge-black); }
#emberField { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; transition: opacity .6s; }
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column;
  padding-top: var(--safe-top);
  opacity: 0; transform: scale(1.012);
  transition: opacity var(--dur-screen) var(--ease-out), transform var(--dur-screen) var(--ease-out);
}
.screen.is-active { display: flex; }
.screen.is-in { opacity: 1; transform: none; }
.screen > .bg {
  position: absolute; inset: -12px; z-index: 0; pointer-events: none;
  background: var(--forge-black) center / cover no-repeat;
  transform: translate3d(calc(var(--px) * -6px), calc(var(--py) * -4px), 0);
  transition: transform .6s var(--ease-out);
}
.screen > .bg::after { content: ""; position: absolute; inset: 0; background: var(--shade, none); }
.screen > .bg::before { content: ""; position: absolute; inset: 0; background: var(--dim, transparent); mix-blend-mode: multiply; }
.screen > .fg { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.has-tabbar > .fg { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
.scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

/* drifting smoke layers */
.smoke { position: absolute; inset: -20% -30%; z-index: 1; pointer-events: none; background: url('../assets/effects/smoke.webp') center / 60% auto repeat; opacity: .16; mix-blend-mode: screen; animation: smoke 38s linear infinite; }
.smoke.b { background-size: 90% auto; opacity: .1; animation-duration: 56s; animation-direction: reverse; }
@keyframes smoke { from { transform: translate3d(-8%, 2%, 0); } to { transform: translate3d(8%, -3%, 0); } }
:root[data-reduced="1"] .smoke { animation: none; }
@media (prefers-reduced-motion: reduce) { .smoke { animation: none; } }

/* ---------- Typography ---------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-display); color: var(--white-heat); text-transform: uppercase; line-height: 1.05; margin: 0; }
.display.lg { font-size: var(--fs-title); }
.display.xl { font-size: var(--fs-hero); }
.display.md { font-size: 20px; }
.display.sm { font-size: 15px; letter-spacing: .1em; }
.ember-text { background: linear-gradient(180deg, #fff4d6 0%, #ffd08a 38%, #f6a23a 62%, #c9621c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(227,107,40,.35)); }
.caps { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 600; color: var(--molten-gold); }
.caps.dim { color: var(--text-dim); }
.muted { color: var(--text-dim); }
.small { font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.rule { display: flex; align-items: center; gap: 10px; color: var(--bronze-300); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.ornament { width: 140px; height: 12px; margin: 6px auto; background:
  radial-gradient(circle at 50% 50%, var(--molten-gold) 0 2.2px, transparent 3px),
  linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 44%, transparent 46%, transparent 54%, var(--line-strong) 56%, var(--line-strong) 70%, transparent) center / 100% 1px no-repeat; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --c: var(--chamfer);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--warm-ivory);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: linear-gradient(180deg, #7a5634, #3a2818 55%, #6b4a2c);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.btn::before { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: inherit; background: linear-gradient(180deg, #252a30, #121518 60%, #0d0f12); }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:disabled { filter: saturate(.3) brightness(.6); }
.btn .ico { width: 20px; height: 20px; }
.btn-block { display: flex; width: 100%; }
.btn-primary {
  min-height: 56px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .12em; color: #fff1d6;
  background: linear-gradient(180deg, #ffd88f, #b86a22 40%, #6d3a12 60%, #e0a04a);
  text-shadow: 0 0 12px rgba(255,150,60,.55), 0 1px 0 rgba(0,0,0,.6);
}
.btn-primary::before { background: radial-gradient(120% 140% at 50% 120%, rgba(227,107,40,.5), transparent 55%), linear-gradient(180deg, #2a1a12, #150e0a 60%, #1c120c); }
.btn-primary::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 1px; height: 2px; background: linear-gradient(90deg, transparent, #ffb35a, #fff0c8, #ffb35a, transparent); box-shadow: 0 0 12px #ff7a1a; }
.cta { filter: drop-shadow(0 0 14px rgba(227,107,40,.38)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.cta.is-ready { animation: ctaPulse 2.2s ease-in-out infinite; }
@keyframes ctaPulse { 50% { filter: drop-shadow(0 0 26px rgba(255,150,60,.7)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); } }
.btn-ghost { background: linear-gradient(180deg, rgba(168,116,63,.55), rgba(93,65,40,.35)); }
.btn-ghost::before { background: rgba(10,12,14,.82); }
.icon-btn {
  width: var(--tap); height: var(--tap); display: inline-grid; place-items: center; border-radius: 50%;
  color: var(--bronze-300); background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), rgba(0,0,0,.2)); border: 1px solid var(--line);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.icon-btn:hover { color: var(--white-heat); border-color: var(--line-strong); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .ico { width: 22px; height: 22px; }
.link-btn { min-height: var(--tap); padding: 0 8px; color: var(--molten-gold); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Panels -------------------------------------------------------- */
.panel {
  --c: 10px;
  position: relative; isolation: isolate; padding: var(--s4);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: linear-gradient(160deg, rgba(217,161,93,.55), rgba(93,65,40,.35) 40%, rgba(60,44,30,.3) 60%, rgba(217,161,93,.45));
}
.panel::before { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: inherit;
  background: linear-gradient(180deg, rgba(24,27,31,.94), rgba(11,13,15,.96)), url('../assets/ui/borders/metal_tile.webp'); background-blend-mode: normal; }
.panel::after { content: ""; position: absolute; inset: 5px; z-index: -1; clip-path: inherit; border: 1px solid rgba(246,162,58,.08); pointer-events: none; }
.panel.flat { background: var(--line-soft); }
.panel.glow { background: linear-gradient(160deg, #ffcf85, #9a5a22 35%, #5d3a18 65%, #f6a23a); }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
:root[data-contrast="1"] .panel::before { background: #0b0d0f; }

/* ---------- Header -------------------------------------------------------- */
.hdr { display: grid; grid-template-columns: var(--tap) 1fr var(--tap); align-items: center; gap: 8px; padding: 10px var(--gutter) 6px; min-height: 60px; }
.hdr .ttl { text-align: center; }
.hdr .ttl .display { font-size: clamp(15px, 4.5vw, 22px); letter-spacing: .06em; line-height: 1.15; }
.hdr .ttl .caps { display: block; margin-top: 4px; font-size: 10px; color: var(--text-dim); }

/* ---------- Tab bar ------------------------------------------------------- */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  padding-bottom: var(--safe-bottom);
  background: linear-gradient(180deg, rgba(10,12,14,.82), rgba(6,7,8,.98) 40%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(0,0,0,.55);
  transform: translateY(0); transition: transform var(--dur-ui) var(--ease-out);
}
.tabbar::before { content: ""; position: absolute; left: 50%; top: -1px; width: 160px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--molten-gold), transparent); }
.tabbar.is-hidden { transform: translateY(110%); }
.tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; margin: 0 auto; height: var(--tabbar-h); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; color: var(--text-faint); font-size: clamp(8.5px, 2.45vw, 10px); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; transition: color var(--dur-fast); }
.tab .ico { width: 24px; height: 24px; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast); }
.tab.is-active { color: var(--white-heat); }
.tab.is-active .ico { color: var(--molten-gold); filter: drop-shadow(0 0 8px rgba(227,107,40,.8)); transform: translateY(-1px); }
.tab.is-active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--ember), transparent); box-shadow: 0 0 10px var(--ember); }
.tab:active .ico { transform: scale(.9); }
:root[data-large="1"] .tab { font-size: 11px; }

/* ---------- Molten progress channel --------------------------------------- */
.molten { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(180deg, #050606, #121416); box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(168,116,63,.55), 0 0 0 3px rgba(0,0,0,.6), 0 0 0 4px rgba(168,116,63,.25); }
.molten > .fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc((100% - 4px) * var(--p, 0)); border-radius: 999px; background: var(--molten); box-shadow: 0 0 10px rgba(227,107,40,.9), 0 0 22px rgba(227,107,40,.4); transition: width .9s var(--ease-out); overflow: hidden; }
.molten > .fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,245,215,.55) 45%, transparent 60%) 0 0 / 220% 100%; animation: shimmer 2.8s linear infinite; mix-blend-mode: screen; }
.molten > .fill::before { content: ""; position: absolute; right: -2px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); border-radius: 50%; background: #fff6de; box-shadow: 0 0 8px #fff0c8, 0 0 16px #ff9a3a; }
.molten .ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(0,0,0,.55) calc(20% - 1px) 20%); border-radius: 999px; pointer-events: none; }
.molten.thin { height: 8px; }
.molten.thin > .fill::before { width: 6px; height: 6px; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
:root[data-reduced="1"] .molten > .fill::after { animation: none; }

/* ---------- Segmented tabs ----------------------------------------------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border: 1px solid var(--line); background: rgba(6,7,8,.7); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.seg button { min-height: 38px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); clip-path: inherit; transition: color var(--dur-fast), background var(--dur-fast); }
.seg button[aria-selected="true"] { color: var(--white-heat); background: linear-gradient(180deg, rgba(227,107,40,.28), rgba(90,30,8,.35)); box-shadow: inset 0 -2px 0 var(--ember); }

/* ---------- Toggles & sliders --------------------------------------------- */
.switch { position: relative; width: 52px; height: 30px; flex: none; border-radius: 999px; background: linear-gradient(180deg, #07080a, #1a1d21); box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(168,116,63,.55); transition: background var(--dur-ui); }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9dde1, #6f757b 55%, #2b2f33); box-shadow: 0 2px 4px rgba(0,0,0,.6); transition: transform var(--dur-ui) var(--ease-out), background var(--dur-ui); }
.switch[aria-checked="true"] { background: linear-gradient(180deg, #7a2a0c, #d45a1c); box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px #f6a23a, 0 0 14px rgba(227,107,40,.45); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: radial-gradient(circle at 35% 30%, #fff6dc, #f6c56a 55%, #8a5218); }
.range { -webkit-appearance: none; appearance: none; width: 130px; height: 30px; background: transparent; --v: 50%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b8400f, #f6a23a var(--v), #0a0b0c var(--v)); box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(168,116,63,.5); }
.range::-moz-range-track { height: 6px; border-radius: 999px; background: #0a0b0c; box-shadow: 0 0 0 1px rgba(168,116,63,.5); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b8400f, #f6a23a); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6dc, #f6c56a 55%, #8a5218); box-shadow: 0 0 10px rgba(227,107,40,.6), 0 2px 4px #000; }
.range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6dc, #f6c56a 55%, #8a5218); }

/* ---------- Overlays / modals -------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--gutter); background: rgba(3,4,5,.76); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-ui); }
.overlay.is-in { opacity: 1; }
.sheet { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; transform: translateY(12px) scale(.98); transition: transform var(--dur-ui) var(--ease-out); }
.overlay.is-in .sheet { transform: none; }
.sheet .panel { padding: 24px 20px 20px; }
.menu-list { display: grid; gap: 10px; margin-top: 18px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px + var(--safe-bottom)); z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 18px; max-width: calc(100% - 32px); white-space: nowrap; border: 1px solid var(--line); background: rgba(10,12,14,.94); color: var(--text); font-size: var(--fs-sm); border-radius: 999px; box-shadow: var(--shadow-2); transition: opacity var(--dur-ui), transform var(--dur-ui) var(--ease-out); text-align: center; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast.ember { border-color: var(--line-strong); color: var(--white-heat); }

/* sparks */
.spark { position: fixed; z-index: 90; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: #ffe0a8; box-shadow: 0 0 6px #ff9a3a, 0 0 14px #ff6a14; }

/* ember counter chip */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(8,9,11,.72); border: 1px solid var(--line); font-weight: 700; font-size: var(--fs-sm); color: var(--white-heat); }
.chip .ico { width: 18px; height: 18px; color: var(--ember); filter: drop-shadow(0 0 6px rgba(227,107,40,.7)); }

/* ---------- Artifact presentation (shared) -------------------------------- */
.artifact-stage { position: relative; display: grid; place-items: end center; }
.artifact-stage .art-glow { position: absolute; left: 50%; bottom: 18%; width: 90%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,50,calc(.12 + var(--heat, 0) * .35)), rgba(227,107,40,calc(.05 + var(--heat, 0) * .12)) 40%, transparent 68%); filter: blur(6px); pointer-events: none; }
.artifact-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 18px rgba(0,0,0,.65)); }
.artifact-svg .art-tint { opacity: var(--tint, .85); mix-blend-mode: screen; }
.artifact-svg .art-hot { animation: heatPulse 3.2s ease-in-out infinite; }
.artifact-svg.is-silhouette .art-base { filter: brightness(0) drop-shadow(0 0 1px rgba(246,162,58,.5)); opacity: .9; }
@keyframes heatPulse { 50% { opacity: .78; } }
:root[data-reduced="1"] .artifact-svg .art-hot { animation: none; }
.tier-legendary .artifact-svg { filter: drop-shadow(0 0 16px rgba(255,150,60,.55)) drop-shadow(0 18px 18px rgba(0,0,0,.65)); }

@media (prefers-reduced-motion: reduce) { .artifact-svg .art-hot, .molten > .fill::after, .cta.is-ready { animation: none; } }