/* Sir Mucksalot: "Night", the default look (the same Neon Afterglow as every Frizzy G site), with a
   storybook touch: a book serif for the tale, an illuminated drop capital in neon, and the ladder
   of fortunes. Frizzy G is made from this file by make-frizzy.ps1 (Night in grey and green): never
   edit frizzy.css by hand. The burger is lookmenu.css, shared by all the sites. */

:root {
  color-scheme: dark;
  --bg: #0a0820;
  --surface: rgba(25, 19, 60, .76);
  --sunk: rgba(6, 3, 24, .5);
  --text: #f7f4ff;
  --text-2: #d4cff0;
  --text-3: #c0b9e2;
  --pink: #ff4fa3;
  --pink-soft: #ffb6dc;
  --violet: #8b6cff;
  --violet-soft: #d0c2ff;
  --cyan: #2fe5ef;
  --cyan-soft: #98f3f8;
  --amber: #ffb547;
  --amber-soft: #ffd99a;
  --ink: #1c0f26;
  --sunset: linear-gradient(112deg, #ff3f9b 0%, #ff5d82 30%, #ff8760 64%, #ffba4b 100%);
  --luminous: linear-gradient(100deg, #ffffff 0%, #fff0f8 34%, #ffb3da 68%, #c9b8ff 100%);
  --gold: linear-gradient(180deg, #fff6d8 0%, #ffd99a 45%, #ffb547 100%);
  --grad-card: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 64%);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(214, 200, 255, .1);
  --lift: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 36px -18px rgba(4, 0, 24, .9);
  --r-l: 24px;
  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the screens set display: flex; hidden must still hide them */
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--text); font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--pink-soft); }
button { font: inherit; color: inherit; margin: 0; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the sky: deep indigo, three soft lights (violet up top, magenta from the right, cyan low down).
   night.js lays the moving smoke over it on the title and the endings, and keeps it still while you read */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle 64vmax at 0% -6%, rgba(124, 82, 255, .38), rgba(124, 82, 255, .14) 55%, rgba(124, 82, 255, 0) 100%),
    radial-gradient(circle 58vmax at 104% 42%, rgba(255, 52, 160, .28), rgba(255, 52, 160, .1) 55%, rgba(255, 52, 160, 0) 100%),
    radial-gradient(circle 62vmax at -6% 96%, rgba(30, 214, 235, .2), rgba(30, 214, 235, .07) 55%, rgba(30, 214, 235, 0) 100%),
    linear-gradient(180deg, #0d0a29 0%, #0a0820 50%, #08061a 100%);
}
.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.ambient i { display: none; }
.ambient canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.ambient canvas.nfx-in { opacity: 1; }

/* ---------------- the frame ---------------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 680px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 6px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 44px; }
.brand-mark { /* a little crown, lit like the neon */
  width: 26px; height: 20px; background: var(--sunset);
  clip-path: polygon(0 100%, 0 22%, 24% 52%, 50% 0, 76% 52%, 100% 22%, 100% 100%);
  filter: drop-shadow(0 0 8px rgba(255, 79, 163, .55));
}
.brand-name { font: italic 700 18px/1 var(--serif); letter-spacing: .01em; }
main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 10px var(--gutter) 28px; }
.foot { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px var(--gutter) max(22px, env(safe-area-inset-bottom)); }
.foot-line { margin: 0; text-align: center; font-size: 13px; color: var(--text-3); }

.screen.enter { animation: nfx-rise .55s var(--ease) both; }
@keyframes nfx-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------------- the title ---------------- */
.title-screen { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6vh; }
.kicker { margin: 0 0 10px; font: 750 12px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-soft); }
.title {
  margin: 0; padding: 0 .08em .12em;
  font: italic 700 clamp(48px, 15vw, 88px)/1 var(--serif); letter-spacing: -.01em;
  color: var(--text); background: var(--luminous); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(255, 79, 163, .35)) drop-shadow(0 0 2px rgba(255, 220, 240, .35));
}
.title::after { /* a sword laid flat under the name: a glowing blade and a little cross-guard */
  content: ""; display: block; width: min(78%, 360px); height: 14px; margin: 14px auto 0;
  background:
    linear-gradient(90deg, #ffb547, #ffb547) 18% 50% / 4px 14px no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 22%, #ffb6dc 70%, rgba(255, 79, 163, 0)) 0 50% / 100% 2px no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 79, 163, .7));
}
.tagline { max-width: 30em; margin: 22px 0 0; font: 400 19px/1.55 var(--serif); color: var(--text-2); text-wrap: pretty; }
.meta { margin: 14px 0 0; font: 650 12.5px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.btn-begin {
  display: inline-flex; align-items: center; justify-content: center; min-width: 210px; min-height: 58px; margin: 28px 0 0; padding: 0 30px;
  border-radius: 999px; color: var(--ink); background: var(--sunset);
  font: 750 19px/1 var(--font); letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 34px -12px rgba(255, 79, 163, .75), 0 0 0 1px rgba(255, 150, 200, .3);
  transition: transform .2s var(--spring), box-shadow .2s var(--ease);
}
@media (hover: hover) { .btn-begin:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 18px 40px -12px rgba(255, 79, 163, .9), 0 0 0 1px rgba(255, 150, 200, .45); } }
.btn-begin:active { transform: scale(.97); }
.found { width: 100%; max-width: 420px; margin: 36px 0 0; }
.found-label { margin: 0 0 10px; font: 650 13px/1.3 var(--font); color: var(--text-3); text-align: center; }

/* ---------------- a scene ---------------- */
.scene {
  position: relative; padding: 24px 22px 22px; border-radius: var(--r-l);
  background: var(--grad-card), var(--surface); box-shadow: var(--rim), var(--lift);
}
.scene::before { /* a neon rim along the top edge */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 79, 163, 0), #ff4fa3 25%, #8b6cff 55%, #2fe5ef 80%, rgba(47, 229, 239, 0));
  opacity: .8;
}
.scene-kicker { margin: 0 0 6px; font: 750 11.5px/1.2 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan-soft); }
.scene-title { margin: 0 0 14px; font: italic 700 clamp(26px, 7.4vw, 34px)/1.12 var(--serif); color: var(--text); outline: none; text-wrap: balance; }
.scene-text p { margin: 0 0 .9em; font: 400 18.5px/1.62 var(--serif); color: var(--text); text-wrap: pretty; }
.scene-text p:last-child { margin-bottom: 0; }
.scene-text p:first-child::first-letter { /* the illuminated capital */
  float: left; margin: .06em .12em 0 0; padding: 0 .02em;
  font: italic 700 3.3em/.82 var(--serif);
  color: var(--pink); background: var(--sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 79, 163, .45));
}

.choices { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 18px 12px 14px;
  border-radius: 18px; text-align: left; color: var(--text);
  background: var(--grad-card), rgba(30, 23, 72, .78); box-shadow: var(--rim), 0 10px 26px -18px rgba(0, 0, 0, .9);
  transition: transform .2s var(--spring), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
@media (hover: hover) { .choice:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(255, 150, 205, .5), 0 0 22px -6px rgba(255, 79, 163, .55), 0 10px 26px -18px rgba(0, 0, 0, .9); } }
.choice:active { transform: scale(.985); }
.choice-n {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: 750 15px/1 var(--font); color: var(--ink); background: var(--sunset);
  box-shadow: 0 0 14px -2px rgba(255, 79, 163, .6);
}
.choice-text { font: 600 17px/1.35 var(--serif); text-wrap: pretty; }
.choices li:nth-child(2) .choice-n { background: linear-gradient(135deg, #b07cff, #8b6cff); box-shadow: 0 0 14px -2px rgba(139, 108, 255, .6); }
.choices li:nth-child(3) .choice-n { background: linear-gradient(135deg, #98f3f8, #2fe5ef); box-shadow: 0 0 14px -2px rgba(47, 229, 239, .55); }
.choices li:nth-child(4) .choice-n { background: linear-gradient(135deg, #ffd99a, #ffb547); box-shadow: 0 0 14px -2px rgba(255, 181, 71, .55); }

.scene-nav { display: flex; justify-content: space-between; gap: 12px; margin: 18px 2px 0; }
.link-btn {
  min-height: 44px; padding: 0 4px; font: 650 14.5px/1 var(--font); color: var(--text-2);
  text-decoration: underline; text-decoration-color: rgba(212, 207, 240, .35); text-underline-offset: 4px;
}
@media (hover: hover) { .link-btn:hover { color: var(--text); text-decoration-color: var(--pink); } }
.link-btn[hidden] { display: none; }
.scene-nav .link-btn:only-child, .scene-nav .link-btn[hidden] + .link-btn { margin-left: auto; }

/* ---------------- an ending ---------------- */
.end-screen { text-align: center; }
.end-rank { margin: 8px 0 6px; font: 750 12px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-soft); }
.end-name {
  margin: 0 0 20px; padding: 0 .06em .08em; outline: none;
  font: italic 700 clamp(34px, 10vw, 54px)/1.05 var(--serif); text-wrap: balance;
  color: var(--text); background: var(--luminous); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 79, 163, .32));
}
body[data-rank="1"] .end-name, body[data-rank="2"] .end-name { background-image: var(--gold); filter: drop-shadow(0 0 24px rgba(255, 181, 71, .45)); }
body[data-rank="9"] .end-name { background-image: linear-gradient(180deg, #ffe0e6, #ff6f8e); }
body[data-rank="10"] .end-name { background-image: linear-gradient(180deg, #f1e6c8, #c9a46a); filter: drop-shadow(0 0 18px rgba(201, 164, 106, .35)); }
.end-scene { text-align: left; }
.end-title { margin: 0 0 12px; font: italic 700 23px/1.2 var(--serif); color: var(--pink-soft); }
.ladder-head { margin: 30px 0 12px; font: 750 12px/1.2 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.end-screen .found-label { margin: 14px 0 0; }
.end-screen .btn-begin { margin-top: 22px; }
.end-screen .scene-nav { justify-content: center; gap: 28px; }

/* the ladder of fortunes: the crown at the top, the slop at the bottom */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.rung {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 14px 6px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .07);
  color: var(--text-3); font: 600 15px/1.25 var(--serif);
}
.rung-n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 750 12.5px/1 var(--font); color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .22);
}
.rung.is-found { color: var(--text); background: rgba(139, 108, 255, .09); }
.rung.is-found .rung-n { color: var(--text); box-shadow: inset 0 0 0 1px rgba(203, 187, 255, .5); }
.rung.is-you { color: var(--ink); background: var(--sunset); box-shadow: 0 0 24px -6px rgba(255, 79, 163, .7); font-weight: 700; }
.rung.is-you .rung-n { color: var(--ink); background: rgba(255, 255, 255, .5); box-shadow: none; }
.rung-name { flex: 1; }
.rung-you { flex: none; padding: 3px 9px; border-radius: 999px; font: 800 11px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; background: rgba(28, 15, 38, .85); color: #ffd2ea; }

/* ---------------- wider screens ---------------- */
@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .scene { padding: 32px 34px 30px; }
  .scene-text p { font-size: 19.5px; }
  .title-screen { padding-top: 10vh; }
}

:root { --mk-fx-night: on; } /* tells night.js this sheet is live (the switch can load sheets late) */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .title, .end-name, .scene-text p:first-child::first-letter { -webkit-text-fill-color: CanvasText; background: none; filter: none; }
  .scene, .choice, .rung, .btn-begin { border: 1px solid CanvasText; }
  .rung.is-you { outline: 2px solid Highlight; }
  body::before, .title::after, .scene::before { display: none; }
}