/* =====================================================================
   BIBLE TRIVIA — PREMIUM DESIGN SYSTEM
   Two directions: "Codex" (illuminated manuscript) · "Jewel" (gemstone board)
   Themes: dark (default) · light
   ===================================================================== */

:root{
  /* ---- core brand ---- */
  --navy-900:#070b14;
  --navy-800:#0B1120;
  --navy-700:#101a2e;
  --navy-600:#16213a;
  --navy-500:#1d2c49;
  --gold:#C8A45C;
  --gold-bright:#E6C77A;
  --gold-pale:#F0DCAE;
  --gold-deep:#9C7A3C;
  --gold-ink:#6E5424;
  --cream:#F5F0E6;
  --parch:#ECE3CE;
  --parch-deep:#DCCFAE;
  --ink:#241B0B;
  --ink-soft:#473a1b;

  /* ---- gemstone accents (per topic) ---- */
  --gem-torah:#C8A45C;   /* gold        */
  --gem-kings:#9A3247;   /* ruby/garnet */
  --gem-proph:#C0492B;   /* carnelian   */
  --gem-gospel:#2F6E8E;  /* sapphire    */
  --gem-acts:#2E7D5A;    /* emerald     */
  --gem-geo:#B07A2E;     /* amber jasper*/
  --gem-women:#8E5A9E;   /* amethyst    */

  /* ---- fonts ---- */
  --f-display:"Cinzel Decorative", serif;
  --f-head:"Cinzel", serif;
  --f-body:"EB Garamond", Georgia, serif;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- semantic (set by theme below) ---- */
  --accent:var(--gold);
  --accent-bright:var(--gold-bright);
}

/* =================== THEME: DARK (default) =================== */
[data-theme="dark"]{
  --bg:        radial-gradient(130% 100% at 50% -10%, #16213a 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  --surface:   linear-gradient(168deg,#15203a,#0e1730);
  --surface-2: linear-gradient(168deg,#1a2745,#111c36);
  --card-parch: linear-gradient(160deg,#f6efdc 0%,#ece0c2 60%,#e3d4b0 100%);
  --fg:        #F3EAD6;
  --fg-dim:    #C7BBA0;
  --fg-faint:  #8C8167;
  --on-parch:  #2a2010;
  --on-parch-dim:#6a5a38;
  --hair:      rgba(200,164,92,.30);
  --hair-soft: rgba(200,164,92,.16);
  --shadow-card:0 26px 60px -24px rgba(0,0,0,.8), 0 4px 16px -8px rgba(0,0,0,.6);
  --glow:      radial-gradient(60% 50% at 50% 0%, rgba(230,199,122,.16), transparent 70%);
}

/* =================== THEME: LIGHT =================== */
[data-theme="light"]{
  --bg:        radial-gradient(130% 100% at 50% -10%, #fbf7ec 0%, #f1e9d6 55%, #e7dcc2 100%);
  --surface:   linear-gradient(168deg,#fffdf7,#f3ebd8);
  --surface-2: linear-gradient(168deg,#fffaf0,#efe5cd);
  --card-parch: linear-gradient(160deg,#fffdf6 0%,#f6eedb 60%,#efe4c8 100%);
  --fg:        #2A2010;
  --fg-dim:    #5b4d30;
  --fg-faint:  #95845c;
  --on-parch:  #2a2010;
  --on-parch-dim:#6a5a38;
  --hair:      rgba(120,92,36,.34);
  --hair-soft: rgba(120,92,36,.18);
  --shadow-card:0 24px 50px -26px rgba(70,52,18,.5), 0 3px 10px -6px rgba(70,52,18,.3);
  --glow:      radial-gradient(60% 50% at 50% 0%, rgba(200,164,92,.18), transparent 70%);
  --accent:var(--gold-deep);
  --accent-bright:var(--gold);
}

/* =================== RESET / BASE =================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}

/* parchment grain overlay, applied to .parch surfaces */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:multiply;opacity:.06;
}

/* =================== APP SHELL =================== */
#app{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,4vw,40px);}
.stage{width:100%;max-width:920px;margin:auto;position:relative}
.screen{display:none;opacity:1}
.screen.active{display:block;animation:screenIn .5s var(--ease-out) both}
@keyframes screenIn{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* =================== ILLUMINATED FRAME =================== */
.codex-frame{position:relative;border-radius:6px;padding:clamp(24px,4vw,52px);
  background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden}
.codex-frame::after{ /* inner gold keyline */
  content:"";position:absolute;inset:12px;border:1px solid var(--hair);border-radius:3px;pointer-events:none}
[data-dir="jewel"] .codex-frame{border-radius:20px}
[data-dir="jewel"] .codex-frame::after{inset:14px;border-radius:14px;border-color:var(--hair-soft)}

/* corner flourishes positioned by JS-inserted .corner spans */
.corner{position:absolute;width:54px;height:54px;color:var(--gold);opacity:.9;z-index:2}
.corner svg{width:100%;height:100%}
.corner.tl{top:8px;left:8px}
.corner.tr{top:8px;right:8px;transform:scaleX(-1)}
.corner.bl{bottom:8px;left:8px;transform:scaleY(-1)}
.corner.br{bottom:8px;right:8px;transform:scale(-1,-1)}
[data-dir="jewel"] .corner{opacity:.55}

/* =================== TYPE =================== */
.eyebrow{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.42em;
  font-size:clamp(10px,1.5vw,12px);color:var(--accent);font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:14px}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:34px;
  background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow::after{background:linear-gradient(90deg,var(--accent),transparent)}

.title-foil{font-family:var(--f-display);font-weight:700;line-height:1.04;
  font-size:clamp(30px,6.2vw,58px);
  background:linear-gradient(180deg,var(--gold-pale) 0%,var(--gold-bright) 38%,var(--gold) 60%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));letter-spacing:.01em}
[data-theme="light"] .title-foil{
  background:linear-gradient(180deg,#D9AE4F 0%,#C8A45C 42%,#9C7A3C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.85px var(--navy-800);
  paint-order:stroke fill;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.6))}
.subtitle{font-family:var(--f-head);font-size:clamp(13px,2vw,17px);letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-dim);font-weight:500}

h2.screen-title{font-family:var(--f-display);font-weight:700;color:var(--fg);
  font-size:clamp(24px,4vw,38px);margin:0;line-height:1.1}
.screen-sub{font-family:var(--f-body);font-size:clamp(15px,2.2vw,19px);color:var(--fg-dim);
  font-style:italic;margin-top:8px}

/* =================== SHIMMER DIVIDER =================== */
.divider{height:18px;display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}
.divider .line{height:1px;flex:1;max-width:160px;
  background:linear-gradient(90deg,transparent,var(--hair),transparent)}
.divider .lozenge{width:9px;height:9px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent)}

/* =================== BUTTONS =================== */
.btn{position:relative;font-family:var(--f-head);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:14px;padding:16px 34px;border-radius:3px;
  color:var(--navy-900);display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 10px 24px -10px rgba(200,164,92,.7),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(200,164,92,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.btn:hover::after{left:130%}
[data-dir="jewel"] .btn{border-radius:999px}

.btn-ghost{font-family:var(--f-head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:12px;color:var(--fg-dim);padding:11px 20px;border-radius:3px;
  border:1px solid var(--hair);background:color-mix(in oklch,var(--fg) 4%,transparent);
  display:inline-flex;align-items:center;gap:9px;transition:.22s var(--ease)}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
[data-dir="jewel"] .btn-ghost{border-radius:999px}

.back-row{display:flex;margin-bottom:22px}

/* =================== GENERIC CARD =================== */
.tile{position:relative;border-radius:5px;padding:24px;text-align:left;
  background:var(--surface-2);border:1px solid var(--hair-soft);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.7)}
.tile.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 22px 44px -20px rgba(0,0,0,.7)}
.tile .tile-glow{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in oklch,var(--accent) 22%,transparent),transparent 72%)}
.tile:hover .tile-glow,.tile.sel .tile-glow{opacity:1}
[data-dir="jewel"] .tile{border-radius:16px}

.tile-icon{color:var(--accent);display:grid;place-items:center;margin-bottom:14px;border-radius:50%;
  background:radial-gradient(circle at 50% 36%, color-mix(in oklch,var(--accent) 24%,transparent), transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 45%,transparent), 0 5px 14px -7px rgba(0,0,0,.45)}
.tile-icon svg{width:56%;height:56%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
.tile h3{font-family:var(--f-head);font-weight:600;font-size:19px;margin:0 0 6px;color:var(--fg)}
.tile p{font-family:var(--f-body);font-size:15px;line-height:1.5;color:var(--fg-dim);margin:0}
.tile .count-chip{margin-top:14px;display:inline-block;font-family:var(--f-head);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
  padding:5px 11px;border:1px solid var(--hair);border-radius:999px}

/* =================== IMAGE SLOT styling =================== */
image-slot{display:block;border-radius:4px;overflow:hidden}
.slot-frame{position:relative;border-radius:4px;padding:6px;background:var(--card-parch);
  border:1px solid var(--hair);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 16px -10px rgba(0,0,0,.5)}
[data-dir="jewel"] .slot-frame{border-radius:14px}

/* =================== STATS (welcome) =================== */
.stat-row{display:flex;justify-content:center;gap:clamp(18px,5vw,52px);flex-wrap:wrap}
.stat{text-align:center}
.stat .n{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,4.5vw,40px);
  color:var(--accent);line-height:1}
.stat .l{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.2em;
  font-size:11px;color:var(--fg-faint);margin-top:7px}
.stat-sep{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--hair),transparent)}

/* =================== utility =================== */
.center{text-align:center}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:16px}
.muted{color:var(--fg-faint)}
.hidden{display:none!important}