/* SITE THEME: "Monster Manual, but camp"
   An old-school rulebook (parchment, ink, blackletter) defaced with lipstick and rhinestones.
   Loaded after synth.css + the page styles, so it overrides them. */
:root {
   --bg: #efe0bb;
   --panel: #f7ecd0;
   --pink: #d6136f;      /* lipstick */
   --cyan: #8b1a1a;      /* red ink: buttons, links, accents */
   --purple: #5b3a1a;
   --yellow: #8b1a1a;
   --orange: #c2761b;
   --text: #2b1d0e;
   --muted: #6b5537;
   --line: rgba(43, 29, 14, .55);
   --display: "IM Fell English SC", Georgia, serif;
   --script: "Caveat Brush", "Comic Sans MS", cursive;
   --mono: "IM Fell English", Georgia, serif;
   --body: "EB Garamond", Georgia, serif;
   --black: "UnifrakturCook", "Old English Text MT", serif;
}

body {
   background:
      radial-gradient(ellipse at 15% 10%, rgba(139, 90, 43, .18), transparent 40%),
      radial-gradient(ellipse at 85% 70%, rgba(139, 90, 43, .16), transparent 45%),
      radial-gradient(circle at 60% 30%, rgba(255, 255, 255, .35), transparent 50%),
      #efe0bb;
   font-size: 18px;
}
body::after { background: repeating-radial-gradient(circle at 30% 40%, rgba(80, 50, 20, .035) 0 1px, transparent 1px 4px); }
.scene { display: none; }
* { text-shadow: none !important; }
a { color: #8b1a1a; }
a:visited { color: #5b3a1a; }
b, strong { color: #1c1208; }

/* ---------- hero: AD&D-style cover ---------- */
.hero { padding: 26px 18px 18px; border: 3px double var(--text); background: rgba(255, 250, 235, .55); position: relative; }
.hero::before, .hero::after { content: "❦"; position: absolute; top: 8px; font-size: 26px; color: #8b1a1a; }
.hero::before { left: 12px; }
.hero::after { right: 12px; transform: scaleX(-1); }
.tagline { font: 20px var(--display) !important; letter-spacing: .12em !important; color: #8b1a1a !important; }
.chrome {
   font: clamp(44px, 10vw, 96px)/1 var(--black) !important;
   background: none !important; color: #1c1208 !important;
   -webkit-text-fill-color: #1c1208; -webkit-text-stroke: 0 !important; filter: none !important;
   letter-spacing: 0 !important;
}
.script { font: clamp(34px, 7vw, 60px)/1 var(--script) !important; color: var(--pink) !important; transform: rotate(-4deg) !important; margin: .05em 0 .3em !important; }
.script::after { content: " 💋"; font-size: .7em; }
.cover-note { font: italic 16px var(--body); color: var(--muted); margin: 0 0 12px; }
.countdown { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; }
.countdown .big { color: #8b1a1a !important; font: clamp(30px, 6vw, 44px)/1 var(--display) !important; }
.countdown .until { font: italic 18px var(--body) !important; }
.progress { border: 1px solid var(--text) !important; box-shadow: none !important; }
.progress > div { background: repeating-linear-gradient(90deg, #8b1a1a 0 8px, transparent 8px 11px) !important; filter: none !important; }

/* ---------- panels = rulebook boxes ---------- */
.win, .fact, a.page-card {
   background: var(--panel) !important;
   border: 2px solid var(--text) !important;
   border-radius: 0 !important;
   box-shadow: 4px 4px 0 rgba(43, 29, 14, .22) !important;
   position: relative;
}
.titlebar {
   background: #2b1d0e !important; color: #f7ecd0 !important;
   font: 17px/1.2 var(--display) !important; letter-spacing: .06em !important; text-transform: none !important;
   border-bottom: 0 !important; padding: 6px 12px !important;
}
.titlebar .t svg { display: none; }
.sunken { background: rgba(255, 255, 255, .35) !important; border: 1px solid rgba(43, 29, 14, .3) !important; border-radius: 0 !important; }
.notepad { font: 19px/1.45 var(--body) !important; color: var(--text) !important; }
.notepad b { color: #8b1a1a !important; font-weight: 600 !important; }
.notepad::first-letter { font: 46px/0.8 var(--black); color: #8b1a1a; float: left; margin: 6px 6px 0 0; }
.statusbar { font: italic 16px var(--body) !important; border-top: 1px solid var(--line) !important; }
hr.etched { background: var(--line) !important; }

.fact .k { font: 16px var(--display) !important; letter-spacing: .1em !important; color: #8b1a1a !important; }
.fact .v { font: 600 clamp(22px, 2.8vw, 28px)/1.15 var(--body) !important; color: #1c1208 !important; }
a.page-card h3 { font: 22px/1.1 var(--display) !important; text-transform: none !important; color: #1c1208 !important; letter-spacing: .02em !important; }
a.page-card .go { font: italic 17px var(--body) !important; color: #8b1a1a !important; }
a.page-card svg { filter: sepia(.6) !important; }
a.page-card:hover, a.page-card:focus-visible { transform: rotate(-.6deg) translateY(-2px); box-shadow: 6px 6px 0 rgba(43, 29, 14, .3) !important; }
a.page-card.primary { background: #fbe3ea !important; border-color: var(--pink) !important; }
a.page-card.primary .go { color: var(--pink) !important; }

/* lipstick graffiti */
.fact:nth-child(1)::after, .fact:nth-child(3)::after, a.page-card.primary::after, .win.vandal::after {
   position: absolute; font: 22px/1 var(--script); color: var(--pink); pointer-events: none; white-space: nowrap;
}
.fact:nth-child(1)::after { content: "wear heels ♡"; right: 10px; top: 8px; transform: rotate(6deg); }
.fact:nth-child(3)::after { content: "✦ ✦ ✦"; right: 12px; top: 10px; color: #b7a6e0; letter-spacing: 4px; }
a.page-card.primary::after { content: "do this one, babe →"; right: 12px; bottom: -14px; transform: rotate(-3deg); background: var(--bg); padding: 0 4px; }

.section-h { font: italic 26px var(--display) !important; color: #1c1208 !important; }
.section-h::after { background: none !important; border-top: 3px double var(--text); height: 0 !important; }
.section-h small { font: italic 17px var(--body) !important; }

/* ---------- controls ---------- */
.btn, .btn:visited {
   background: #f7ecd0 !important; color: #2b1d0e !important;
   border: 2px solid #2b1d0e !important; border-radius: 0 !important;
   font: 17px/1 var(--display) !important; letter-spacing: .04em !important; text-transform: none !important;
   box-shadow: 3px 3px 0 #2b1d0e !important;
}
.btn:hover { background: #fff6dd !important; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #2b1d0e !important; }
.btn.default, .btn.default:visited { background: #8b1a1a !important; color: #f7ecd0 !important; border-color: #2b1d0e !important; }
input[type=text], select { background: #fffaf0 !important; color: var(--text) !important; border: 1px solid var(--text) !important; border-radius: 0 !important; font-family: var(--body) !important; }
label { color: #8b1a1a !important; font: 16px var(--display) !important; text-transform: none !important; }

.icon, .icon:visited { color: var(--text) !important; font: 15px/1.2 var(--display) !important; text-transform: none !important; }
.icon svg { filter: sepia(.5) !important; }
.icon:hover, .icon:focus-visible { background: rgba(139, 26, 26, .08) !important; border-color: #8b1a1a !important; box-shadow: none !important; }
.explorer .icon .g { color: #8b1a1a !important; font: italic 16px var(--body) !important; }
.explorer .icon .n { color: #fff !important; }

.roster { font: 19px/1.35 var(--body) !important; }
.roster li::before { content: "✠" !important; color: #8b1a1a !important; }
.roster li:nth-child(odd) { background: rgba(139, 26, 26, .06) !important; }
.count { color: #8b1a1a !important; font: 16px var(--display) !important; text-transform: none !important; }
.sheet .name { color: var(--pink) !important; font-family: var(--script) !important; }
.sheet .cls { color: #8b1a1a !important; font: 16px var(--display) !important; text-transform: none !important; }
.stats div { background: #fffaf0 !important; border: 1px solid var(--text) !important; border-radius: 0 !important; }
.stats b { color: #8b1a1a !important; font: 12px var(--display) !important; }
.stats span { color: var(--text) !important; font: 600 26px var(--body) !important; }
.bigroll .die { background: #8b1a1a !important; font-family: var(--display) !important; }
.lcdnum { background: #2b1d0e !important; color: #f7ecd0 !important; font: 56px/1 var(--display) !important; border: 0 !important; }
.quote { color: var(--pink) !important; font-family: var(--script) !important; }
.patrons b { color: #8b1a1a !important; font: 18px var(--display) !important; }
.photo-win img { filter: sepia(.25) contrast(1.05); }
.ticker { background: #2b1d0e !important; color: #f7ecd0 !important; font: 20px var(--display) !important; border: 0 !important; }
.fine, .footer { color: var(--muted) !important; }

/* dialogs */
.dialog-backdrop { background: rgba(43, 29, 14, .45) !important; }
.dialog { box-shadow: 8px 8px 0 rgba(43, 29, 14, .35) !important; }
.dialog .body img.photo { border: 2px solid var(--text) !important; filter: sepia(.2); }
.gameover { background: rgba(239, 224, 187, .97) !important; }
.gameover h2 { color: #8b1a1a !important; font: clamp(44px, 12vw, 110px)/1 var(--black) !important; }
.gameover p { color: var(--text) !important; font-family: var(--display) !important; }
.bat .titlebar { font-size: 12px !important; }
.bat img { filter: none; }  /* flying photos stay full color */

/* nav = rulebook running header */
.tt-nav { background: #2b1d0e !important; border-bottom: 3px double #f7ecd0 !important; box-shadow: none !important; }
.tt-brand { font: 22px/1 "UnifrakturCook", serif !important; color: #f7ecd0 !important; text-shadow: none !important; }
.tt-brand span { color: #ff8fc2 !important; text-shadow: none !important; }
.tt-links a { font: 15px/1 "IM Fell English SC", serif !important; text-transform: none !important; color: #f7ecd0 !important; letter-spacing: .04em !important; }
.tt-links a[aria-current="page"], .tt-links a:hover { color: #ff8fc2 !important; border-bottom-color: #ff8fc2 !important; background: none !important; }
.tt-signup { background: #d6136f !important; box-shadow: none !important; font: 15px/1 "IM Fell English SC", serif !important; text-transform: none !important; border-radius: 0 !important; }

/* ---------- inner pages ---------- */
.page-hero { padding: 22px 16px 16px !important; border: 3px double var(--text); background: rgba(255, 250, 235, .55); margin-bottom: 18px; }
.page-hero h1 {
   font: clamp(42px, 9vw, 84px)/1 var(--black) !important;
   background: none !important; color: #1c1208 !important; -webkit-text-fill-color: #1c1208;
   -webkit-text-stroke: 0 !important; filter: none !important;
}
.page-hero p { color: var(--muted) !important; font-style: italic; }

/* route guide */
.spot rect { fill: rgba(214, 19, 111, .12) !important; }
.spot:hover rect, .spot:focus-visible rect, .spot.active rect { fill: rgba(214, 19, 111, .3) !important; stroke: #8b1a1a !important; }
.spot circle { fill: var(--pink) !important; }
.spot:hover circle, .spot:focus-visible circle, .spot.active circle { fill: #8b1a1a !important; }
.feature-list button { font: 18px var(--body) !important; color: var(--text) !important; }
.feature-list button:hover, .feature-list button:focus-visible, .feature-list button.active { background: rgba(214, 19, 111, .08) !important; border-color: var(--pink) !important; }
.feature-list .num { box-shadow: none !important; font-family: var(--display) !important; }
.feature-list .arrow { color: #8b1a1a !important; font-family: var(--body) !important; }
.roll { font: italic 18px/1.35 var(--body) !important; color: var(--text) !important; border-color: var(--line) !important; background: #fffaf0; }
.roll b { color: #8b1a1a !important; }
.quip { color: var(--pink) !important; font: 22px var(--script) !important; font-style: normal !important; }

/* photos */
.tile { background: #e4d3a8 !important; border: 2px solid var(--text) !important; border-radius: 0 !important; }
.tile:hover, .tile:focus-visible { border-color: var(--pink) !important; box-shadow: 3px 3px 0 var(--pink) !important; }
.tile .play { background: #2b1d0e !important; color: #f7ecd0 !important; border: 0 !important; font: 14px var(--display) !important; }
.lightbox { background: rgba(28, 18, 8, .95) !important; }
.lightbox .bar { color: #e4d3a8 !important; font: 18px var(--display) !important; }

/* upload */
.upload-box { border: 3px dashed #8b1a1a !important; border-radius: 0 !important; background: rgba(139, 26, 26, .05) !important; box-shadow: none !important; }
.upload-box:hover, .upload-box.dragover { background: rgba(214, 19, 111, .1) !important; }
.upload-box .big { color: #8b1a1a !important; font-family: var(--display) !important; }
.upload-box p { font: 20px var(--display) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: .02em !important; }
#uploadBtn { font: 20px var(--display) !important; text-transform: none !important; border-radius: 0 !important; background: #e4d3a8 !important; color: var(--muted) !important; border: 2px solid var(--line) !important; }
#uploadBtn.active { background: #8b1a1a !important; color: #f7ecd0 !important; border-color: #2b1d0e !important; box-shadow: 3px 3px 0 #2b1d0e !important; }
#summary { font: italic 20px var(--body) !important; color: #8b1a1a !important; }
.file-progress { border-radius: 0 !important; border: 2px solid var(--text) !important; }
.file-progress .meta, .file-progress .status { font-family: var(--body) !important; }
.file-progress.ok { border-color: #2e6b2e !important; }
.file-progress .status.ok { color: #2e6b2e !important; }
progress { border-color: var(--text) !important; }

/* ---------- homepage "What" box, above When / Where / Who ---------- */
html { scroll-behavior: smooth; }
#rules { scroll-margin-top: 80px; }
.what {
   display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: center;
   padding: 16px 18px;
   background: var(--panel); border: 2px solid var(--text);
   box-shadow: 4px 4px 0 rgba(43, 29, 14, .22);
   position: relative;
}
.what .k { font: 16px var(--display); letter-spacing: .1em; color: #8b1a1a; }
.what .lede { margin: 0; font: 20px/1.4 var(--body); color: var(--text); }
.what .btn { white-space: nowrap; }
@media (max-width: 760px) {
   .what { grid-template-columns: 1fr; }
   .what .btn { justify-self: start; }
}

/* ---------- the theme, front and center ---------- */
.theme-banner {
   position: relative;
   max-width: 560px; margin: 12px auto 12px; padding: 8px 16px 12px;
   background: #fbe3ea; border: 3px solid var(--pink);
   box-shadow: 5px 5px 0 rgba(214, 19, 111, .3);
   transform: rotate(-1.2deg);
}
.theme-banner::before, .theme-banner::after { content: "✦"; position: absolute; top: 6px; font-size: 22px; color: #b7a6e0; }
.theme-banner::before { left: 10px; }
.theme-banner::after { right: 10px; }
.theme-banner .lbl { font: 15px var(--display); letter-spacing: .14em; color: #8b1a1a; }
.theme-banner .theme-name { font: clamp(34px, 6.5vw, 56px)/1.05 var(--script); color: var(--pink); margin: 2px 0 4px; }
.theme-banner .lbl2 { font: italic 16px/1.35 var(--body); color: var(--text); max-width: 560px; margin: 0 auto; }

/* ---------- silly stuff (js/silly.js) ---------- */
.desktop, .page, .wrap { position: relative; z-index: 1; }
.doodles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.doodle {
   position: absolute; top: -10%;
   opacity: .5; filter: saturate(.7);
   animation-name: doodleFall, doodleSway;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
   animation-direction: normal, alternate;
}
@keyframes doodleFall { to { top: 110%; } }
@keyframes doodleSway { from { transform: translateX(-30px) rotate(-25deg); } to { transform: translateX(30px) rotate(25deg); } }

/* flying bat photos: fixed above the page (the .win rule above must not pin them in place) */
.bat {
   position: fixed !important; top: 0; left: 0; z-index: 900;
   width: 240px; pointer-events: none;
   animation: fly 40s linear infinite;
   transform: rotate(-3deg);
}
.bat img { width: 100%; display: block; }
.bat .titlebar { padding: 3px 8px !important; font-size: 12px !important; }
@media (max-width: 640px) { .bat { width: 150px; } }
@keyframes fly {
   0% { transform: translate(-120%, 110vh) rotate(0deg); }
   12.5% { transform: translate(110vw, -120%) rotate(12deg); }
   25% { transform: translate(-120%, 50vh) scale(1.4) rotate(-10deg); }
   37.5% { transform: translate(-120%, -120%) rotate(-20deg); }
   50% { transform: translate(100vw, 50vh) rotate(0deg); }
   62.5% { transform: translate(20vw, 110vh) rotate(10deg); }
   75% { transform: translate(110vw, 100vh) rotate(10deg); }
   87.5% { transform: translate(50vw, -120%) scale(1.4) rotate(10deg); }
   100% { transform: translate(-120%, 110vh) rotate(0deg); }
}