:root {
  --bronze: #b67a36;
  --bronze-soft: #d9a55f;
  --bronze-dim: #6d4523;
  --paper: #e5dfd3;
  --ink: #080808;
  --halo-power: 1;
  --halo-x: 50%;
  --halo-y: 35%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

* { box-sizing: border-box; }
html { background: #0b0b0b; color-scheme: dark; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #d7d3ca;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(96,64,34,.12), transparent 65%),
    linear-gradient(#101010, #151515 44%, #0c0c0c);
}
button { font: inherit; }
button:focus-visible { outline: 2px solid #e0aa62; outline-offset: 3px; }

.menu-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  height: clamp(230px, 57vw, 282px);
  overflow: hidden;
  isolation: isolate;
  background: #000;
  box-shadow: 0 22px 40px rgba(0,0,0,.38);
  transition: height .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  --scroll-fade: 0;
}
.menu-shell.scrolled {
  height: clamp(205px, 51vw, 248px);
  box-shadow: 0 16px 34px rgba(0,0,0,.6);
}
.bg-gradient {
  position: absolute; inset: 0;
  z-index: -5;
  background:
    radial-gradient(65% 95% at 50% -8%, rgba(68,43,26,.22), rgba(0,0,0,0) 63%),
    linear-gradient(to bottom, #000 0%, #010101 27%, #080808 66%, #171717 100%);
}
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: calc(.9 - var(--scroll-fade) * .22); }
.vignette {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.1), transparent 45%, rgba(0,0,0,.18)),
    radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.56) 100%);
}
.menu-floor {
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(182,122,54,.24) 28%, rgba(221,164,92,.52) 50%, rgba(182,122,54,.24) 72%, transparent);
  box-shadow: 0 -7px 20px rgba(177,113,47,.08);
}

.menu-grid {
  position: absolute;
  top: clamp(56px, 15vw, 78px);
  width: 31.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.2vw, 14px) clamp(4px, 1.2vw, 9px);
  padding-inline: clamp(10px, 2.8vw, 16px);
  z-index: 4;
}
.menu-left { left: 0; }
.menu-right { right: 0; }

.orb {
  justify-self: center;
  width: clamp(31px, 9.2vw, 45px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(218,161,91,.82);
  color: #d7a35f;
  background:
    radial-gradient(circle at 42% 34%, rgba(85,76,65,.27), rgba(15,15,15,.9) 62%, #050505 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,222,171,.06),
    inset 0 0 14px rgba(0,0,0,.9),
    0 2px 7px rgba(0,0,0,.8),
    0 0 0 1px rgba(70,39,18,.36);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.orb .icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 4vw, 20px);
  line-height: 1;
  filter: drop-shadow(0 1px 1px #000);
  transform: translateY(-.5px);
}
.orb:hover,
.orb:active {
  transform: translateY(-2px) scale(1.04);
  border-color: #e7b56e;
  color: #f0c27c;
  box-shadow: inset 0 0 18px rgba(151,96,43,.18), 0 0 15px rgba(182,122,54,.16), 0 3px 10px rgba(0,0,0,.8);
}
.orb:active { transform: translateY(0) scale(.96); }

.sigil {
  position:absolute;
  z-index: 3;
  left:50%;
  top: clamp(-188px, -45vw, -145px);
  width: clamp(236px, 67vw, 344px);
  aspect-ratio: 1;
  transform: translateX(-50%) perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-origin: 50% 54%;
  transition: top .45s cubic-bezier(.2,.8,.2,1), transform .16s ease-out, filter .2s ease;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.76)) drop-shadow(0 0 13px rgba(152,91,35,.22));
}
.menu-shell.scrolled .sigil { top: clamp(-204px, -49vw, -158px); }
.sigil img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; }
.sigil.pulse { animation: sigilPulse .72s ease-out; }
@keyframes sigilPulse {
  0% { filter: drop-shadow(0 9px 13px rgba(0,0,0,.76)) drop-shadow(0 0 10px rgba(152,91,35,.2)); }
  36% { filter: drop-shadow(0 9px 13px rgba(0,0,0,.72)) drop-shadow(0 0 34px rgba(235,167,82,.7)); }
  100% { filter: drop-shadow(0 9px 13px rgba(0,0,0,.76)) drop-shadow(0 0 13px rgba(152,91,35,.22)); }
}

.halo {
  position:absolute;
  left:50%; top: clamp(-41px, -3vw, -16px);
  width: clamp(200px, 58vw, 300px);
  aspect-ratio:1;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events:none;
  opacity: calc(.92 * var(--halo-power));
  filter: saturate(.82);
  transition: top .45s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.menu-shell.scrolled .halo { top: clamp(-52px, -6vw, -24px); }
.halo::before,
.halo::after {
  content:""; position:absolute; inset:12%; border-radius:50%;
}
.halo::before {
  background: radial-gradient(circle, rgba(240,185,103,.12) 0 20%, rgba(221,151,71,.065) 34%, transparent 63%);
  filter: blur(10px);
}
.halo::after {
  inset: -5%;
  background: conic-gradient(from 30deg,
    transparent 0 8%, rgba(241,183,99,.13) 12%, transparent 18% 31%,
    rgba(255,207,136,.11) 36%, transparent 41% 57%, rgba(202,126,55,.12) 64%, transparent 70% 88%, rgba(232,166,81,.09) 94%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 50% 53%, transparent 61%);
          mask: radial-gradient(circle, transparent 0 44%, #000 50% 53%, transparent 61%);
  animation: haloDrift 11s linear infinite;
  filter: blur(2px);
}
.halo-ring { position:absolute; inset:16%; border-radius:50%; }
.halo-ring-a {
  border: 1px solid rgba(232,172,96,.2);
  box-shadow: 0 0 16px rgba(211,139,63,.18), inset 0 0 20px rgba(211,139,63,.05);
  animation: haloBreathe 4.7s ease-in-out infinite;
}
.halo-ring-b {
  inset:25%;
  border:1px solid rgba(255,216,159,.08);
  filter: blur(.4px);
  animation: haloBreathe 6s ease-in-out infinite reverse;
}
.halo-core {
  position:absolute; inset:31%; border-radius:50%;
  background: radial-gradient(circle at var(--halo-x) var(--halo-y), rgba(255,211,144,.18), rgba(186,111,45,.075) 29%, transparent 68%);
  filter: blur(11px);
}
.halo-ray {
  position:absolute;
  left:50%; top:44%; width:38%; height:90%;
  transform:translateX(-50%);
  background: linear-gradient(to bottom, rgba(210,145,70,.13), rgba(179,116,58,.035) 37%, transparent 82%);
  filter: blur(16px);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  opacity:.58;
}
@keyframes haloDrift { to { transform: rotate(360deg); } }
@keyframes haloBreathe { 0%,100%{transform:scale(.98);opacity:.55} 50%{transform:scale(1.045);opacity:1} }

.toast {
  position:absolute; z-index:8; left:50%; bottom:15px; transform:translate(-50%,10px);
  padding:7px 11px; border:1px solid rgba(190,128,59,.26); border-radius:999px;
  background:rgba(8,8,8,.74); backdrop-filter:blur(8px); color:#c8aa82;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:0; pointer-events:none;
  transition:.25s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

.page {
  position:relative;
  z-index:1;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 14px calc(86px + env(safe-area-inset-bottom));
}
.placeholder-card,
.mini-card {
  border:1px solid rgba(185,126,59,.2);
  background: linear-gradient(145deg, rgba(30,30,30,.93), rgba(14,14,14,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.02), 0 18px 45px rgba(0,0,0,.18);
}
.placeholder-card { border-radius:18px; padding:24px 20px; margin-bottom:14px; }
.hero { min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding-top:80px; }
.eyebrow { color:#a87743; letter-spacing:.22em; font-size:10px; margin:0 0 10px; }
h1,h2 { margin:.1em 0 .5em; font-family: Georgia, "Times New Roman", serif; font-weight:500; color:#eee8dc; }
h1 { font-size:clamp(34px,10vw,58px); line-height:.98; }
h2 { font-size:27px; }
p { color:#a9a59d; line-height:1.65; }
.hero-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.primary,.secondary,.lab-reset {
  min-height:44px; border-radius:10px; padding:0 16px; cursor:pointer;
}
.primary { border:1px solid #b47839; color:#e0ba87; background:linear-gradient(#24190f,#130f0b); }
.secondary { border:1px solid #3c3934; color:#b8b3aa; background:#141414; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.mini-card { border-radius:14px; min-height:122px; padding:14px 12px; display:flex; flex-direction:column; gap:4px; }
.mini-card b { font-family:Georgia,serif; font-size:24px; color:#bc8449; font-weight:500; }
.mini-card span { color:#d4d0c8; }
.mini-card small { color:#6e6a64; }
.tall-card { min-height:710px; }
.skeleton-lines { display:grid; gap:9px; margin:24px 0; }
.skeleton-lines span { height:8px; border-radius:99px; background:linear-gradient(90deg,#262626,#34312e,#252525); }
.skeleton-lines span:nth-child(2n) { width:88%; }
.skeleton-lines span:nth-child(3n) { width:72%; }
.fake-media {
  height:310px; border-radius:14px; border:1px solid rgba(182,122,54,.12);
  background:
    radial-gradient(circle at 50% 15%, rgba(122,77,39,.14), transparent 36%),
    linear-gradient(135deg,#151515,#0c0c0c);
  box-shadow: inset 0 0 70px rgba(0,0,0,.55);
}
.skeleton-lines.short { width:78%; }
footer { text-align:center; color:#55514c; letter-spacing:.18em; font-size:10px; padding:34px 0; }

.lab-toggle {
  position:fixed; z-index:40; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(189,128,61,.45);
  color:#c99a61; background:rgba(8,8,8,.84); backdrop-filter:blur(10px); cursor:pointer;
  font-size:10px; letter-spacing:.12em;
}
.lab-panel {
  position:fixed; z-index:41; right:12px; bottom:calc(70px + env(safe-area-inset-bottom));
  width:min(290px,calc(100vw - 24px)); padding:14px; border-radius:16px;
  border:1px solid rgba(189,128,61,.35); background:rgba(10,10,10,.92); backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.55); transform:translateY(12px) scale(.98); opacity:0; pointer-events:none; transition:.2s ease;
}
.lab-panel.open { transform:none; opacity:1; pointer-events:auto; }
.lab-head { display:flex; align-items:center; justify-content:space-between; color:#d8c5aa; margin-bottom:10px; }
.lab-head button { background:none; color:#a89f95; border:0; font-size:24px; cursor:pointer; }
.lab-panel label { display:grid; grid-template-columns:1fr auto; gap:6px 10px; color:#aaa49c; font-size:12px; margin:12px 0; }
.lab-panel input { grid-column:1 / -1; width:100%; accent-color:#a76f36; }
.lab-panel output { color:#d7a764; font-variant-numeric:tabular-nums; }
.lab-reset { width:100%; border:1px solid #37322e; color:#aaa39a; background:#151515; }

@media (min-width: 680px) {
  .menu-shell { height: 300px; }
  .menu-shell.scrolled { height: 258px; }
  .menu-grid { width:28%; top:82px; }
  .orb { width:48px; }
  .sigil { width:360px; top:-196px; }
  .menu-shell.scrolled .sigil { top:-218px; }
  .halo { width:320px; top:-30px; }
  .page { padding-inline:24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior:auto !important; }
}