@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   OCULUS DOMINI — shared design system  (oculus.css)
   Loaded LAST on the imperial-ledger pages so it supersedes
   their older inline styling. Only safe, consistently-roled
   tokens are overridden; page-specific tokens (--faint borders,
   --up/--soon/--oxblood) are left untouched.
   ============================================================ */

:root {
  --gold:#c9a44c;
  --gold-hi:#e6cd86;
  --gold-dim:#8f7330;
  --parch:#efe6cc;
  --text:#dcd2ba;
  --body:#dcd2ba;
  --text-dim:#9a8f74;
  --dim:#9a8f74;
  --bg:#0a0907;
  --ink:#0a0907;
  --bg-card:#15120c;
  --card:#15120c;
  --panel:#15120c;
  /* shared helpers used by the new component rules */
  --edge:rgba(201,164,76,.20);
  --edge-lit:rgba(201,164,76,.55);
  --gild-wash:rgba(201,164,76,.10);
  --plate:linear-gradient(180deg,rgba(201,164,76,.055),rgba(201,164,76,.012) 42%,transparent);
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
}

/* ── Foundation ─────────────────────────────────────────── */
body{
  font-family:var(--font-body);
  font-size:17px;
  letter-spacing:.005em;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(201,164,76,.09), transparent 55%),
    radial-gradient(90% 60% at 50% 0%, #16120b 0%, var(--bg) 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* fine vignette + grain, non-interactive, above bg / below content */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(130% 100% at 50% 0%, transparent 62%, rgba(0,0,0,.45) 100%);
}
body>*{position:relative;z-index:1;}

::selection{background:rgba(201,164,76,.28);color:#fff;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:#0d0b08;}
::-webkit-scrollbar-thumb{background:#3a3016;border:2px solid #0d0b08;border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

a{color:var(--gold);}
a:hover{color:var(--gold-hi);}

/* ── Typography ─────────────────────────────────────────── */
h1{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--parch);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 34px rgba(201,164,76,.18);
}
h1 em{
  font-family:var(--font-body);font-style:italic;font-weight:500;
  -webkit-text-fill-color:currentColor;color:var(--parch);
}
h2,h3{font-family:var(--font-display);font-weight:500;color:var(--gold);}
.sub,.subtitle{font-family:var(--font-body);font-style:italic;}
.mono,code,kbd{font-family:var(--font-mono);}

/* ── Cards (index app grid) ─────────────────────────────── */
.card{
  background:var(--plate),var(--card);
  border:1px solid var(--edge);
  border-radius:5px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}
a.card:hover{
  border-color:var(--edge-lit);
  transform:translateY(-3px);
  box-shadow:0 16px 42px rgba(0,0,0,.6), 0 0 22px rgba(201,164,76,.12);
}
.card h2{font-family:var(--font-display);font-weight:600;color:var(--gold);}
.card.ghost::before{opacity:.15;}

/* ── Stat plates (mug .stile / cockpit .tot) ────────────── */
.stile,.tot{
  background:var(--plate),var(--card);
  border:1px solid var(--edge);
  border-radius:5px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  position:relative;overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.stile::before,.tot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45;
}
.stile:hover,.tot:hover{border-color:var(--edge-lit);transform:translateY(-2px);}
.stile .v,.tot .v{
  font-family:var(--font-mono);font-weight:500;
  color:var(--gold-hi);text-shadow:0 0 14px rgba(201,164,76,.22);
  letter-spacing:-.01em;
}
.stile .k,.tot .k{
  font-family:var(--font-mono);color:var(--text-dim);
  font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
}

/* ── Tables (cockpit / reckoning) ───────────────────────── */
th{font-family:var(--font-mono);font-weight:500;color:var(--text-dim);letter-spacing:.14em;}
td{font-family:var(--font-body);}
tbody tr{transition:background .15s;}
tbody tr:hover{background:rgba(201,164,76,.04);}
td.r,th.r,.mono,.score,.ff,.cd,.h,.meta{font-family:var(--font-mono);}
.score{color:var(--gold-hi);}

/* ── Buttons ────────────────────────────────────────────── */
button,.btn-imperial{
  font-family:var(--font-display)!important;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
button:hover{box-shadow:0 0 18px rgba(201,164,76,.15);}
.cta{font-family:var(--font-display);font-weight:600;letter-spacing:.16em;
  box-shadow:0 6px 18px rgba(201,164,76,.14);}

/* ── Inputs ─────────────────────────────────────────────── */
input{font-family:var(--font-mono)!important;letter-spacing:.02em;}
input:focus,input:focus-visible{outline:1px solid var(--gold);outline-offset:2px;border-color:var(--gold-dim)!important;}

/* ── Status dots (index cards) ──────────────────────────── */
.dot.up{box-shadow:0 0 8px rgba(76,175,80,.75);}

/* ── Tags (reckoning) / pills ───────────────────────────── */
.tag{font-family:var(--font-mono);border-radius:3px;letter-spacing:.1em;}

/* ── Section rules (player-home style, offered site-wide) ─ */
.sechead .lbl{font-family:var(--font-display);}

/* ── Home badge wordmark ────────────────────────────────── */
.oculus-home-word{font-family:var(--font-display)!important;font-weight:600;}
.oculus-home-sub{font-family:var(--font-body)!important;font-style:italic;}

/* ============================================================
   INTERACTIVITY LAYER  (paired with oculus.js)
   Gated on .oc-js so nothing hides if the script never runs.
   ============================================================ */

/* cursor-following gold spotlight inside panels */
.oc-js .card,.oc-js .stile,.oc-js .tot,.oc-js .hall,.oc-js .tribute{position:relative;}
.oc-js .card::after,.oc-js .stile::after,.oc-js .tot::after,
.oc-js .hall::after,.oc-js .tribute::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(201,164,76,.14),transparent 46%);
  opacity:0;transition:opacity .3s ease;mix-blend-mode:screen;
}
.oc-js .card:hover::after,.oc-js .stile:hover::after,.oc-js .tot:hover::after,
.oc-js .hall:hover::after,.oc-js .tribute:hover::after{opacity:1;}
.oc-js .card,.oc-js .stile,.oc-js .tot,.oc-js .hall{will-change:transform;}

/* rise-into-view reveal */
.oc-js .oc-reveal{opacity:0;transform:translateY(10px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.oc-js .oc-reveal.oc-in{opacity:1;transform:none;}

/* candlelight flicker over the vignette */
@keyframes oc-flicker{0%,100%{opacity:1}44%{opacity:.92}68%{opacity:.97}82%{opacity:.9}}
.oc-js body::after{animation:oc-flicker 8s ease-in-out infinite;}

/* drifting gold motes */
#oc-motes{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}

@media (prefers-reduced-motion: reduce){
  .oc-js body::after{animation:none;}
  .oc-js .oc-reveal{opacity:1;transform:none;transition:none;}
  #oc-motes{display:none;}
}

/* ── Motion courtesy ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;}
  .card,.stile,.tot{transition:none;}
}