/* Ocarina Tracker — styles
   Layout concept: you stand inside a stone hall. A fixed "temple" scene
   (walls, columns, high windows, light shafts, floor, dust) sits behind the
   content; the content itself is carved stone tablets laid on the altar.
   Dark-first: the hall at dusk. Light theme: the same hall at noon. */
:root {
  --bg: #121511;            /* hall shadow */
  --stone: #2a2d27;         /* tablet face */
  --stone-2: #35392f;       /* raised tablet */
  --stone-edge: #4a4e42;    /* chisel line */
  --stone-hi: #5e6353;      /* top-light on stone */
  --wall: #23261f;
  --wall-2: #15180f;
  --floor: #1d2019;
  --floor-2: #262a22;
  --light: 232, 205, 140;   /* window light, rgb triplet */
  --light-strength: .75;
  --bg-elev: var(--stone);
  --bg-elev-2: var(--stone-2);
  --line: var(--stone-edge);
  --text: #ece6d6;
  --text-dim: #a9a797;
  --accent: #d9b14a;        /* gilt */
  --accent-ink: #1a1405;
  --forest: #5aa76b;
  --water: #5a97d0;
  --fire: #d8673f;
  --shadow: #9a7fe0;
  --spirit: #e59350;
  --danger: #d85a5a;
  --ok: #6cbd7d;
  --child: #86c5e3;
  --adult: #dcb07c;
  --radius: 6px;
  --radius-sm: 4px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 10px 24px rgba(0,0,0,.35);
  --font-head: "Cinzel", Georgia, serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-lore: "Alegreya", Georgia, serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #cfc7b2; --stone: #e9e3d2; --stone-2: #f3eee0; --stone-edge: #b8b09a; --stone-hi: #fffdf5;
    --wall: #d8d0bb; --wall-2: #b9b09a; --floor: #c9c0a8; --floor-2: #d9d1bb;
    --light: 255, 248, 225; --light-strength: .75;
    --text: #221f17; --text-dim: #5f5a4a; --accent: #9c7714; --accent-ink: #fff;
    --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 8px 20px rgba(60,50,20,.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #cfc7b2; --stone: #e9e3d2; --stone-2: #f3eee0; --stone-edge: #b8b09a; --stone-hi: #fffdf5;
  --wall: #d8d0bb; --wall-2: #b9b09a; --floor: #c9c0a8; --floor-2: #d9d1bb;
  --light: 255, 248, 225; --light-strength: .75;
  --text: #221f17; --text-dim: #5f5a4a; --accent: #9c7714; --accent-ink: #fff;
  --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 8px 20px rgba(60,50,20,.12);
  color-scheme: light;
}
/* Seven years later: the hall is cooler and dimmer. */
body[data-age="adult"] { --light: 180, 200, 235; --light-strength: .55; }
:root[data-theme="light"] body[data-age="adult"] { --light: 225, 236, 255; --light-strength: .6; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body[data-age="adult"] { --light: 225, 236, 255; --light-strength: .6; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  position: relative;
  isolation: isolate;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; border-radius: 6px; }
.skip:focus { left: 8px; z-index: 100; }

/* Top bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: linear-gradient(180deg, color-mix(in srgb, var(--wall) 92%, transparent), color-mix(in srgb, var(--wall-2) 90%, transparent)); backdrop-filter: blur(10px); border-bottom: 1px solid var(--stone-edge); box-shadow: 0 1px 0 var(--stone-hi) inset, 0 8px 30px rgba(0,0,0,.35); }
.topbar__inner { max-width: 1100px; margin: 0 auto; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand__mark { width: 28px; height: 28px; fill: var(--stone-hi); }
.brand__beam { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--light), .8)); }
.brand__text { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.brand__text em { font-style: normal; color: var(--accent); }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; min-width: 0; }
.search svg { width: 18px; height: 18px; stroke: var(--text-dim); fill: none; stroke-width: 2; flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); outline: none; font: inherit; }
.search input::placeholder { color: var(--text-dim); }
.age { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.age__btn { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--text-dim); font-weight: 600; font-size: .85rem; }
.age__btn[aria-pressed="true"][data-age="child"] { background: var(--child); color: #06202b; }
.age__btn[aria-pressed="true"][data-age="adult"] { background: var(--adult); color: #2b1a06; }

.tabs { max-width: 1100px; margin: 0 auto; padding-block: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: var(--text-dim); text-decoration: none; padding: 8px 12px 10px; font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* Layout */
.main { max-width: 1100px; margin: 0 auto; padding-block: 20px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); min-height: 60vh; }
.foot { max-width: 1100px; margin: 0 auto; padding-block: 16px; font-family: var(--font-lore); font-style: italic; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); color: var(--text-dim); font-size: .8rem; border-top: 1px solid var(--line); }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 1px solid var(--line); border-top-color: var(--stone-hi); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-1); }
.card--accent { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--stone-2) 82%, transparent), color-mix(in srgb, var(--stone) 86%, transparent)); backdrop-filter: blur(3px); }
.card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.muted { color: var(--text-dim); }
.small { font-size: .85rem; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }

/* Progress */
.progress { height: 10px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f0cd5a); border-radius: 999px; transition: width .4s ease; }
.progress--green > span { background: linear-gradient(90deg, var(--forest), #7dd38e); }
.progress--blue > span { background: linear-gradient(90deg, var(--water), #8dc0ee); }
.progress--purple > span { background: linear-gradient(90deg, var(--shadow), #b6a3ee); }
.progress--red > span { background: linear-gradient(90deg, var(--fire), #f09373); }
.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.stat b { font-family: var(--font-head); font-size: 1.3rem; }
.ring { --p: 0; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-elev-2) 0); position: relative; flex: none; }
.ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg-elev); }
.ring > span { position: relative; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; }

/* Toolbar / filters */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar select, .toolbar input[type="text"] { background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-elev); border-radius: 999px; padding: 5px 11px; font-size: .85rem; cursor: pointer; user-select: none; }
.chip input { accent-color: var(--accent); margin: 0; }
.chip[aria-pressed="true"], .chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg-elev)); }
.btn { border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--danger { color: var(--danger); }
.btn--sm { padding: 5px 10px; font-size: .85rem; }

/* Entry list */
.region { margin: 26px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--stone-edge); box-shadow: 0 1px 0 var(--stone-hi); padding-bottom: 6px; }
.region h2 { letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; color: var(--text-dim); }
.region h2 { margin: 0; font-size: 1.1rem; }
.entries { display: grid; gap: 8px; }
.entry { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); border-top-color: var(--stone-hi) !important; box-shadow: var(--shadow-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: border-color .15s, opacity .15s; }
.entry:has(.entry__check:checked) { opacity: .62; }
.entry:has(.entry__check:checked) .entry__name { text-decoration: line-through; text-decoration-color: var(--text-dim); }
.entry--available { border-left: 3px solid var(--ok); }
.entry--locked { border-left: 3px solid var(--line); }
.entry--wrongage { border-left: 3px solid transparent; }
.entry__check { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.entry__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.entry__name { font-weight: 600; }
.entry__how { margin: 6px 0 0; color: var(--text-dim); font-size: .92rem; }
.entry__reqs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); }
.badge--child { color: var(--child); border-color: color-mix(in srgb, var(--child) 50%, transparent); }
.badge--adult { color: var(--adult); border-color: color-mix(in srgb, var(--adult) 50%, transparent); }
.badge--either { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.badge--night { color: var(--shadow); border-color: color-mix(in srgb, var(--shadow) 50%, transparent); }
.badge--day { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.badge--soil { color: var(--forest); border-color: color-mix(in srgb, var(--forest) 50%, transparent); }
.badge--kind { background: var(--bg-elev-2); }
.req { font-size: .78rem; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text-dim); }
.req--have { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); text-decoration: line-through; }
.req--missing { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.req__note { font-size: .78rem; color: var(--text-dim); align-self: center; }
mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Walkthrough */
.wt { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.wt__nav { position: sticky; top: calc(112px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 130px); overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.wt__nav a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-decoration: none; color: var(--text-dim); padding: 8px 10px; border-radius: var(--radius-sm); font-size: .9rem; }
.wt__nav a[aria-current="true"] { background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); }
.wt__nav a .pct { font-size: .75rem; font-variant-numeric: tabular-nums; }
.wt__nav a.done { color: var(--ok); }
.step { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.step:last-child { border-bottom: 0; }
.step input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); }
.step:has(input:checked) .step__text { color: var(--text-dim); text-decoration: line-through; }
.step__tip { margin-top: 4px; font-size: .88rem; color: var(--accent); }
.step__grants { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.chapter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chapter-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; }
details.area { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
details.area > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
details.area > summary::-webkit-details-marker { display: none; }
details.area > .entries { padding: 0 12px 12px; }

/* Items view */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.subtabs a { text-decoration: none; }
.trade { display: grid; gap: 8px; }
.trade__step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.trade__num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elev-2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.timer { color: var(--fire); font-weight: 600; font-size: .85rem; }

/* Misc */
.empty { text-align: center; color: var(--text-dim); padding: 40px 10px; border: 1px dashed var(--line); border-radius: var(--radius); }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
textarea.export { width: 100%; min-height: 120px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--bg-elev); border: 1px solid var(--accent); color: var(--text); padding: 10px 16px; border-radius: 999px; opacity: 0; transition: .25s; pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reward-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.reward { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: .85rem; }
.reward.done { border-color: var(--ok); }
.reward b { display: block; font-family: var(--font-head); }

@media (max-width: 760px) {
  .topbar__inner { grid-template-columns: 1fr auto; }
  .search { grid-column: 1 / -1; order: 3; }
  .brand__text { font-size: 1rem; }
  .wt { grid-template-columns: 1fr; }
  .wt__nav { position: static; max-height: none; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .wt__nav a { flex: none; }
  .main { padding-block: 14px 32px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Remake additions */
.verify { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.verify select, .verify input { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: .8rem; }
.verify input { flex: 1; min-width: 140px; }
.verify--same select { border-color: var(--ok); color: var(--ok); }
.verify--moved select { border-color: var(--accent); color: var(--accent); }
.verify--gone select { border-color: var(--danger); color: var(--danger); }
.verify--new select { border-color: var(--water); color: var(--water); }
.badge--conf-confirmed { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.badge--conf-reported { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.badge--conf-unknown { color: var(--shadow); border-color: color-mix(in srgb, var(--shadow) 50%, transparent); }
.countdown { display: flex; gap: 14px; align-items: center; }
.countdown b { font-family: var(--font-head); font-size: 2.4rem; line-height: 1; color: var(--accent); }
.fact { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.fact h3 { margin: 0 0 4px; font-size: 1rem; display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.fact__impact { margin: 6px 0 0; font-size: .88rem; color: var(--accent); }
.fact__src { margin: 6px 0 0; font-size: .78rem; color: var(--text-dim); }
.facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }


/* ---------------- The hall ---------------- */
.temple { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--wall-2); }
.temple > * { position: absolute; inset: 0; }
.temple__wall {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--wall-2) 0%, var(--wall) 38%, var(--wall) 58%, var(--wall-2) 100%);
}
/* Masonry courses on the back wall */
.temple__wall::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background:
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(0,0,0,.25) 46px 47px, rgba(255,255,255,.04) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0,0,0,.18) 118px 119px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, transparent 62%); }
/* Columns down each side */
.temple__columns {
  background:
    linear-gradient(90deg, var(--wall-2) 0, var(--stone-hi) 1.2%, var(--wall) 3.5%, var(--wall-2) 6%, transparent 7%),
    linear-gradient(270deg, var(--wall-2) 0, var(--stone-hi) 1.2%, var(--wall) 3.5%, var(--wall-2) 6%, transparent 7%),
    linear-gradient(90deg, transparent 10%, var(--wall-2) 10.4%, var(--stone-hi) 11.2%, var(--wall) 13.4%, var(--wall-2) 15.8%, transparent 16.2%),
    linear-gradient(270deg, transparent 10%, var(--wall-2) 10.4%, var(--stone-hi) 11.2%, var(--wall) 13.4%, var(--wall-2) 15.8%, transparent 16.2%);
  opacity: .9;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 58%, transparent 64%);
}
/* High arched windows along the top of the back wall */
.temple__windows { display: flex; justify-content: center; gap: 6vw; padding-top: 3vh; inset: 0 0 auto; height: 28vh; }
.temple__windows i { display: block; width: clamp(28px, 4.5vw, 64px); height: 100%; border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(var(--light), calc(var(--light-strength) * 1.3)) 0%, rgba(var(--light), calc(var(--light-strength) * .7)) 60%, rgba(var(--light), 0) 100%);
  box-shadow: 0 0 40px rgba(var(--light), calc(var(--light-strength) * .6)); }
.temple__windows i:nth-child(1), .temple__windows i:nth-child(5) { height: 72%; opacity: .7; }
.temple__windows i:nth-child(2), .temple__windows i:nth-child(4) { height: 86%; }
/* Light shafts falling from the windows */
.temple__shafts { inset: -10vh 0 0 0; will-change: transform; }
.temple__shafts i { position: absolute; top: 0; height: 130vh; width: 16vw; left: 50%;
  background: linear-gradient(180deg, rgba(var(--light), calc(var(--light-strength) * .8)) 0%, rgba(var(--light), calc(var(--light-strength) * .32)) 50%, rgba(var(--light), 0) 85%);
  transform-origin: top center; transform: translateX(-50%) skewX(-14deg); filter: blur(14px); animation: shaft 11s ease-in-out infinite alternate; }
.temple__shafts i:nth-child(1) { left: 36%; width: 11vw; animation-delay: -3s; }
.temple__shafts i:nth-child(3) { left: 64%; width: 12vw; animation-delay: -7s; transform: translateX(-50%) skewX(-10deg); }
@keyframes shaft { from { opacity: .75; } to { opacity: 1; } }
/* The checkered floor, receding */
.temple__floor { inset: auto 0 0 0; height: 46vh; perspective: 700px; perspective-origin: 50% 0; overflow: hidden; }
.temple__floor::before { content: ""; position: absolute; left: -60%; right: -60%; top: 0; height: 160%;
  transform: rotateX(62deg); transform-origin: 50% 0;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--floor-2) 0 25%, var(--floor) 0 50%) 0 0 / 160px 160px,
    var(--floor);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset; }
.temple__floor::after { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(var(--light), calc(var(--light-strength) * .35)), transparent 70%),
    linear-gradient(180deg, var(--wall-2) 0%, transparent 22%, transparent 75%, rgba(0,0,0,.5) 100%); }
.temple__haze { background: radial-gradient(70% 40% at 50% 60%, rgba(var(--light), calc(var(--light-strength) * .18)), transparent 70%), radial-gradient(50% 30% at 50% 8%, rgba(var(--light), calc(var(--light-strength) * .25)), transparent 70%); }
.temple__dust { width: 100%; height: 100%; opacity: .9; }
.temple__vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); }
:root[data-theme="light"] .temple__vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(60,50,20,.25) 100%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .temple__vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(60,50,20,.25) 100%); } }
@media (max-width: 760px) {
  .temple__windows { gap: 5vw; }
  .temple__windows i:nth-child(1), .temple__windows i:nth-child(5) { display: none; }
  .temple__shafts i { width: 26vw; filter: blur(10px); }
  .temple__columns { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .temple__shafts i { animation: none; } }

/* ---------------- The altar (progress widget) ---------------- */
.altar { width: 100%; max-width: 420px; height: auto; display: block; }
.altar text { font-family: var(--font-head); fill: var(--text-dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.altar .stone-block { fill: var(--stone-2); stroke: var(--stone-edge); }
.altar .stone-dark { fill: var(--stone); stroke: var(--stone-edge); }
.altar .socket { fill: var(--wall-2); stroke: var(--stone-edge); }
.altar .gem { opacity: .18; transition: opacity .4s, filter .4s; }
.altar .gem.lit { opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.altar .seal { fill: var(--wall-2); stroke: var(--stone-edge); }
.altar .seal.lit { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.altar .door { fill: var(--stone); stroke: var(--stone-edge); transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.altar.open .door--l { transform: translateX(-22px); }
.altar.open .door--r { transform: translateX(22px); }
.altar .beam { fill: rgba(var(--light), 0); transition: fill .9s; }
.altar.open .beam { fill: rgba(var(--light), .55); }
.altar .sword { stroke: var(--stone-edge); fill: var(--stone-2); opacity: .5; transition: opacity .4s; }
.altar.drawn .sword { opacity: 1; stroke: var(--accent); fill: var(--stone-hi); filter: drop-shadow(0 0 6px rgba(var(--light), .9)); }
.altar__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--text-dim); margin-top: 6px; }
.altar__legend b { color: var(--text); font-family: var(--font-head); font-weight: 500; }
.hero { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 24px; align-items: center; }
.hero h1 { font-size: 1.9rem; text-wrap: balance; }
.hero .lore { font-family: var(--font-lore); font-style: italic; font-size: 1.05rem; color: var(--text-dim); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }

/* 3D altar host */
.altar3d { position: relative; width: 100%; max-width: 440px; }
.altar3d__canvas { display: block; width: 100%; height: auto; border-radius: var(--radius); cursor: grab; }
.altar3d__canvas:active { cursor: grabbing; }
.altar3d__hint { display: none; position: absolute; right: 8px; bottom: 6px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); opacity: .7; pointer-events: none; }
.altar3d--live .altar { display: none; }
.altar3d--live .altar3d__hint { display: block; }
@media (prefers-reduced-motion: reduce) { .altar3d__hint { display: none !important; } }

/* Ad layout preview (index.html?ads=preview); placeholders only, no ad code */
.adslot { position: relative; z-index: 1; margin: 12px auto 0; width: min(728px, calc(100% - 32px)); height: 90px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; background: rgba(127,127,127,.08); color: var(--text-dim); font-size: .75rem; letter-spacing: .04em; text-align: center; padding: 0 8px; }
.adslot[hidden] { display: none; }
.adslot--foot { height: 250px; margin: 0 auto 16px; width: min(970px, calc(100% - 32px)); }
@media (max-width: 760px) {
  .adslot--top { height: 100px; width: min(320px, calc(100% - 32px)); }
  .adslot--foot { width: min(300px, calc(100% - 32px)); }
}

/* Community suggestions (static-site build with --api) */
.suggest { margin-left: auto; border: 1px solid var(--line); background: transparent; color: var(--text-dim); border-radius: 999px; padding: 1px 9px; font-size: .75rem; cursor: pointer; }
.suggest:hover { color: var(--accent); border-color: var(--accent); }
.suggest-dialog { width: min(560px, calc(100vw - 32px)); background: linear-gradient(180deg, var(--stone-2), var(--stone)); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-1); }
.suggest-dialog::backdrop { background: rgba(0,0,0,.55); }
.suggest-dialog .field { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.suggest-dialog input, .suggest-dialog select, .suggest-dialog textarea { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px; font: inherit; font-weight: 400; }
.suggest-dialog .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* About / Privacy / Terms */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.foot__links { margin-top: 6px; font-style: normal; }