/* Tepes Tarot, circa 2003, after midnight */

:root {
  --bg: #0b0709;
  --panel: #150d11;
  --panel-2: #1d1117;
  --line: #4a2a35;
  --line-hi: #7a4656;
  --blood: #8b0f1f;
  --blood-hi: #c41e3a;
  --gold: #c9a35a;
  --bone: #e6dccb;
  --dim: #9a8a86;
  --link: #d4b06a;
  --link-hover: #ff5a6e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--bone);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(139, 15, 31, 0.25), transparent 60%),
    url("tile.svg");
  background-attachment: fixed, scroll;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); }
a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

#fog {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 110%, rgba(180,170,190,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 120%, rgba(180,170,190,0.06), transparent 55%);
}

#wrap {
  position: relative; z-index: 1;
  max-width: 820px;
  margin: 24px auto;
  background: rgba(10, 6, 8, 0.92);
  border: 3px double var(--line-hi);
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(139, 15, 31, 0.35);
}

/* ---------- header ---------- */
#header {
  position: relative;
  text-align: center;
  padding: 30px 16px 18px;
  background: linear-gradient(180deg, #24121a 0%, #120a0e 70%, #0b0709 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.moon {
  position: absolute; top: 18px; right: 34px;
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e6, #d8cdb4 55%, #a69a82);
  box-shadow: 0 0 30px rgba(255, 240, 210, 0.35);
  opacity: 0.85;
  border: 0; padding: 0; cursor: pointer;
  transition: box-shadow .4s ease, opacity .4s ease, background .4s ease, transform .4s ease;
}
.moon:hover, .moon:focus-visible {
  opacity: 1; outline: none; transform: scale(1.06);
  box-shadow: 0 0 44px rgba(255, 240, 210, 0.7);
}
.tiny-top {
  margin: 0; font-family: Verdana, Tahoma, sans-serif;
  font-size: 10px; letter-spacing: 3px; color: var(--dim); text-transform: uppercase;
}
h1 {
  margin: 6px 0 0;
  font-family: "UnifrakturMaguntia", "Old English Text MT", serif;
  font-weight: normal;
  font-size: clamp(44px, 10vw, 76px);
  line-height: 1.05;
  color: var(--bone);
  text-shadow: 0 0 2px #000, 2px 2px 0 var(--blood), 0 0 18px rgba(196, 30, 58, 0.55);
}
.tagline {
  margin: 6px 0 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic; font-size: 18px; color: var(--gold);
}
.bats span {
  position: absolute; font-size: 18px; filter: grayscale(1) brightness(0.35);
  animation: flit 9s ease-in-out infinite;
}
.bats span:nth-child(1) { top: 22px; left: 8%; }
.bats span:nth-child(2) { top: 60px; left: 18%; font-size: 13px; animation-delay: -3s; }
.bats span:nth-child(3) { top: 30px; right: 22%; font-size: 14px; animation-delay: -6s; }
@keyframes flit {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(14px, -8px); }
  50% { transform: translate(-6px, 6px); }
  75% { transform: translate(10px, 4px); }
}

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; white-space: nowrap;
  background: var(--blood);
  border-top: 1px solid var(--blood-hi);
  border-bottom: 1px solid #3a050c;
  font-family: Verdana, Tahoma, sans-serif; font-size: 11px; font-weight: bold;
  letter-spacing: 1px; color: #fbe9d0; padding: 4px 0;
}
.ticker-inner { display: inline-block; padding-left: 100%; animation: tick 38s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------- layout ---------- */
#cols { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
#sidebar { flex: 0 0 190px; }
#main { flex: 1; min-width: 0; }

/* ---------- boxes ---------- */
.box {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-top-color: var(--line-hi);
  box-shadow: inset 0 0 0 1px #000, 0 2px 6px rgba(0,0,0,0.6);
  padding: 0 14px 12px;
  margin-bottom: 14px;
  scroll-margin-top: 12px;
}
.box-title {
  margin: 0 -14px 12px;
  padding: 5px 10px;
  background: linear-gradient(180deg, #3a1520, #220c13);
  border-bottom: 1px solid var(--line);
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 11px; font-weight: bold; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gold);
  text-align: center;
}
#main .box-title { font-size: 12px; }

.small { font-size: 13px; }
.dim { color: var(--dim); }
.center { text-align: center; }
.hidden { display: none !important; }
.quote { font-family: "IM Fell English", Georgia, serif; font-style: italic; color: var(--dim); margin: 12px 0 0; }

/* ---------- nav ---------- */
.nav { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0 0 5px; }
.nav a {
  display: block; border: 1px solid #000;
  padding: 5px 8px;
  font-family: Verdana, Tahoma, sans-serif; font-size: 11px; font-weight: bold;
  color: var(--bone);
  background: linear-gradient(180deg, #2c1820, #170c11);
  box-shadow: inset 1px 1px 0 #4d2b37, inset -1px -1px 0 #0a0406;
}
.nav a:hover {
  color: #fff; border-bottom-color: #000;
  background: linear-gradient(180deg, var(--blood-hi), var(--blood));
}

.moonphase { text-align: center; }
#moon-glyph { display: block; font-size: 38px; line-height: 1.2; filter: grayscale(0.4); }
#moon-name { font-family: Verdana, Tahoma, sans-serif; font-size: 11px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; }

/* ---------- event ---------- */
.event { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.event-date {
  flex: 0 0 74px; text-align: center;
  border: 2px ridge var(--gold);
  background: #0e070a;
  padding: 6px 0;
  font-family: Verdana, Tahoma, sans-serif;
}
.ev-dow, .ev-mon { display: block; font-size: 11px; font-weight: bold; letter-spacing: 2px; color: var(--gold); }
.ev-day { display: block; font-family: "IM Fell English", Georgia, serif; font-size: 38px; line-height: 1; color: var(--blood-hi); text-shadow: 0 0 10px rgba(196,30,58,0.5); }
.event-info h3 {
  margin: 0; font-family: "IM Fell English", Georgia, serif;
  font-weight: normal; font-size: 24px; line-height: 1.2; color: var(--bone);
}
.event-info p { margin: 6px 0; }
.ev-when { color: var(--gold); font-weight: bold; }
.ev-where { color: var(--dim); font-style: italic; }

/* ---------- readings menu ---------- */
.menu { width: 100%; border-collapse: collapse; margin: 6px 0 8px; }
.menu td { padding: 8px 6px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.menu tr:last-child td { border-bottom: 0; }
.m-name { width: 38%; font-family: "IM Fell English", Georgia, serif; font-size: 17px; color: var(--gold); }
.m-desc { font-size: 14px; }

/* ---------- card draw ---------- */
.draw-area { display: flex; justify-content: center; gap: 22px; padding: 8px 0; flex-wrap: wrap; }
.card {
  width: 120px; height: 196px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 12px 6px;
  font: inherit; color: inherit;
}
.card.back {
  cursor: pointer;
  border: 2px solid var(--gold);
  background:
    repeating-linear-gradient(45deg, rgba(201,163,90,0.12) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-45deg, rgba(201,163,90,0.12) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #4a0b16, #1c050a);
  box-shadow: 0 0 0 4px #0b0709, 0 0 0 5px var(--line-hi), 0 6px 18px rgba(0,0,0,0.7);
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card.back:hover, .card.back:focus-visible {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 0 0 4px #0b0709, 0 0 0 5px var(--gold), 0 0 24px rgba(196,30,58,0.6);
  outline: none;
}
.back-sigil { font-size: 22px; color: var(--gold); letter-spacing: 2px; }
/* ---------- buttons ---------- */
.btn {
  display: inline-block; cursor: pointer;
  font-family: Verdana, Tahoma, sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 12px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #3a1520, #1a080d);
  box-shadow: inset 1px 1px 0 #5d3040, inset -1px -1px 0 #0a0406;
}
.btn:hover { color: #fff; border-bottom-color: #000; background: linear-gradient(180deg, var(--blood-hi), var(--blood)); }
.btn.big { font-size: 13px; padding: 10px 18px; }

.dropcap {
  float: left; font-family: "UnifrakturMaguntia", serif;
  font-size: 54px; line-height: 0.9; margin: 4px 8px 0 0; color: var(--blood-hi);
}

/* ---------- footer ---------- */
#footer {
  text-align: center; padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  font-family: Verdana, Tahoma, sans-serif; font-size: 10px; color: var(--bone);
  background: linear-gradient(180deg, #0b0709, #160a0f);
}
#footer p { margin: 4px 0; }
.badges { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 31px; font-size: 9px; font-weight: bold; line-height: 1.1;
  letter-spacing: 1px; border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.5);
}
.b1 { background: linear-gradient(180deg, #5a0e1a, #2a050b); color: var(--gold); }
.b2 { background: linear-gradient(180deg, #222, #000); color: #e6dccb; }
.b3 { background: linear-gradient(180deg, #2b2440, #120e1d); color: #cfc3ff; }
.b4 { background: linear-gradient(180deg, #c9a35a, #6e5426); color: #1a0d05; }

/* ---------- small screens ---------- */
@media (max-width: 680px) {
  #wrap { margin: 0; border-left: 0; border-right: 0; }
  #cols { flex-direction: column; padding: 12px; }
  #sidebar { flex: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  #sidebar .box:first-child { grid-column: 1 / -1; }
  .nav { display: flex; flex-wrap: wrap; gap: 5px; }
  .nav li { margin: 0; flex: 1 1 auto; }
  .nav a { text-align: center; }
  .hide-mobile { display: none; }
  .moon { width: 38px; height: 38px; right: 16px; top: 14px; }
  .event { flex-direction: column; }
  .event-date { display: flex; gap: 8px; align-items: baseline; justify-content: center; padding: 6px 12px; flex: none; }
  .ev-day { font-size: 28px; }
  .m-name { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .menu td { display: block; }
  .menu tr { display: block; border-bottom: 1px dashed var(--line); }
  .menu tr:last-child { border-bottom: 0; }
  .menu td.m-desc { border-bottom: 0; padding-top: 2px; }
}

/* ---------- coming soon ---------- */
.pricing {
  text-align: center; margin: 4px 0 2px; padding: 10px 12px 4px;
  border: 1px dashed var(--line-hi);
  background: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .pricing { background: rgba(255, 250, 240, 0.6); }
.pricing-label {
  margin: 0; font-family: Verdana, Tahoma, sans-serif; font-size: 11px; font-weight: bold;
  letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
}
.pricing .soon { margin: 0 0 4px; }
.card.sealed { cursor: default; opacity: 0.75; filter: saturate(0.6); }
.soon {
  margin: 12px 0 2px;
  font-family: "UnifrakturMaguntia", serif; font-size: 30px;
  color: var(--blood-hi); text-shadow: 0 0 12px rgba(196, 30, 58, 0.4);
}

/* ==========================================================
   LIGHT VERSION (click the moon): parlor by daylight
   ========================================================== */
:root[data-theme="light"] {
  --bg: #efe4cf;
  --panel: #f6eedd;
  --panel-2: #fbf5e8;
  --line: #c9b38c;
  --line-hi: #8b5e3c;
  --blood: #8b0f1f;
  --blood-hi: #a3162b;
  --gold: #7a5418;
  --bone: #2b1a14;
  --dim: #6e5a4c;
  --link: #8b0f1f;
  --link-hover: #c41e3a;
}
[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at top, rgba(255, 214, 140, 0.45), transparent 60%),
    url("tile-light.svg");
}
[data-theme="light"] #fog { display: none; }
[data-theme="light"] #wrap {
  background: rgba(250, 244, 230, 0.94);
  box-shadow: 0 0 0 1px #b89b6e, 0 6px 30px rgba(90, 60, 30, 0.25);
}
[data-theme="light"] #header { background: linear-gradient(180deg, #fff4dc 0%, #f3e6c9 70%, #efe4cf 100%); }
[data-theme="light"] h1 { color: #2b1a14; text-shadow: 2px 2px 0 rgba(139, 15, 31, 0.25); }
[data-theme="light"] .moon {
  background: radial-gradient(circle at 50% 50%, #fff6c8, #ffd46b 55%, #f0a43a);
  box-shadow: 0 0 0 6px rgba(255, 200, 90, 0.25), 0 0 34px rgba(255, 170, 40, 0.75);
  opacity: 1;
}
[data-theme="light"] .moon:hover, [data-theme="light"] .moon:focus-visible {
  box-shadow: 0 0 0 8px rgba(255, 200, 90, 0.3), 0 0 50px rgba(255, 170, 40, 0.9);
}
[data-theme="light"] .bats span { filter: grayscale(1) brightness(0.2); opacity: 0.35; }
[data-theme="light"] .box {
  box-shadow: inset 0 0 0 1px #fffaf0, 0 2px 6px rgba(90, 60, 30, 0.15);
}
[data-theme="light"] .box-title {
  background: linear-gradient(180deg, #8b1a2b, #5e0b18);
  color: #f7e7c4; border-bottom-color: #4a0812;
}
[data-theme="light"] .nav a, [data-theme="light"] .btn {
  color: #2b1a14; border-color: #9c8460;
  background: linear-gradient(180deg, #fffaf0, #e9dcc0);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c9b38c;
}
[data-theme="light"] .nav a:hover, [data-theme="light"] .btn:hover {
  color: #fff; background: linear-gradient(180deg, var(--blood-hi), var(--blood));
}
[data-theme="light"] .event-date { background: #fffaf0; }
[data-theme="light"] .card.back { box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--line-hi), 0 6px 14px rgba(90,60,30,0.35); }
[data-theme="light"] #footer { background: linear-gradient(180deg, #efe4cf, #e4d5b8); }
[data-theme="light"] .badge { box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35), inset -1px -1px 0 rgba(0,0,0,0.35); }

@media (prefers-reduced-motion: reduce) {
  .ticker-inner, .bats span { animation: none; }
  .ticker-inner { padding-left: 0; white-space: normal; }
}