/* Fragment of the Day: candlelit scriptorium at night. */
:root {
  --night: #0d0b10;
  --night-2: #1a1420;
  --vellum: #efe3c4;
  --vellum-dark: #d9c79c;
  --ink: #2a1d12;
  --rubric: #9b2b1e;
  --gold: #e3b54a;
  --gold-hi: #ffe39a;
  --ember: #ff9a3c;
  --text-hi: #f6ecd6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 35%, var(--night-2) 0%, var(--night) 70%);
  color: var(--text-hi);
  font-family: "IM Fell English", Georgia, "Times New Roman", serif;
  font-size: 18px;
  overflow-x: hidden;
  padding: env(safe-area-inset-top, 0) 16px env(safe-area-inset-bottom, 0);
}
#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#glow {
  position: fixed; left: 50%; top: 38%; width: 900px; height: 900px; max-width: 160vw;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 170, 70, 0.20) 0%, rgba(255, 140, 40, 0.06) 40%, transparent 65%);
  animation: flicker 3.2s infinite ease-in-out;
}
@keyframes flicker {
  0%, 100% { opacity: 0.9; } 30% { opacity: 1; } 55% { opacity: 0.8; } 75% { opacity: 0.97; }
}

#bar {
  position: relative; z-index: 1; max-width: 780px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0 10px;
}
#brand {
  font-family: "Grenze Gotisch", "IM Fell English SC", Georgia, serif;
  font-size: 30px; color: var(--gold); letter-spacing: 0.5px;
  text-shadow: 0 0 18px rgba(227, 181, 74, 0.35);
}
#brand span { font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 20px; color: var(--text-hi); }
#meta { display: flex; align-items: center; gap: 10px; font-size: 17px; white-space: nowrap; }
#num { color: var(--gold-hi); }
#streak { color: var(--ember); }
#streak b { color: var(--gold-hi); font-weight: normal; }
body.solved #tray, body.solved #controls { display: none; }

#stage { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding-bottom: 48px; }

/* The torn leaf. */
#leaf {
  position: relative; margin: 18px 0 26px; padding: 34px 38px 28px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(120, 80, 30, 0.25), transparent 55%),
    linear-gradient(160deg, var(--vellum) 0%, var(--vellum-dark) 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(255, 160, 60, 0.12), inset 0 0 50px rgba(110, 70, 20, 0.30);
  clip-path: polygon(0% 2%, 6% 0%, 14% 1.5%, 27% 0.3%, 40% 1.8%, 55% 0.2%, 68% 1.6%, 81% 0.4%, 93% 1.9%, 100% 0.6%,
    99.4% 30%, 100% 62%, 99.2% 97%, 90% 99.5%, 76% 98.3%, 61% 100%, 47% 98.6%, 33% 99.8%, 18% 98.4%, 6% 99.7%, 0% 98%, 0.7% 60%, 0% 28%);
  transform-origin: 50% 60%;
  animation: leaf-in 900ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes leaf-in { from { opacity: 0; transform: translateY(24px) rotate(-1.2deg) scale(0.97); } }
#author-line { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#author { font-family: "IM Fell English SC", Georgia, serif; font-size: 20px; color: var(--rubric); }
#dates { font-style: italic; color: #5a4430; }
#text { font-size: 26px; line-height: 1.75; margin: 0; }
#text::first-letter {
  font-family: "UnifrakturMaguntia", Georgia, serif; color: var(--rubric);
  font-size: 64px; float: left; line-height: 0.9; margin: 6px 3px 0 0;
  text-shadow: 1px 1px 0 rgba(227, 181, 74, 0.8);
}
#cite { margin-top: 18px; font-style: italic; color: #5a4430; font-size: 16px; }

/* Gaps in the leaf. */
.gap {
  display: inline-block; min-width: 4.2em; padding: 0 6px; margin: 0 2px;
  border-bottom: 2px dashed rgba(155, 43, 30, 0.6);
  color: transparent; text-align: center; cursor: pointer; line-height: 1.3;
  background: rgba(60, 35, 15, 0.08); border-radius: 4px 4px 0 0;
  transition: background 200ms, color 200ms, transform 200ms;
}
.gap.next { background: rgba(227, 181, 74, 0.28); animation: breathe 1.6s infinite ease-in-out; }
@keyframes breathe { 50% { background: rgba(227, 181, 74, 0.45); } }
.gap.filled { color: var(--ink); border-bottom-style: solid; animation: drop 260ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes drop { from { transform: translateY(-14px) scale(1.15); opacity: 0.2; } }
.gap.locked {
  color: #6b4a08; border-bottom-color: var(--gold); cursor: default;
  background: linear-gradient(180deg, rgba(255, 227, 154, 0.75), rgba(227, 181, 74, 0.55));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: gild 700ms ease-out;
}
@keyframes gild { 0% { box-shadow: 0 0 0 rgba(255, 210, 90, 0); } 40% { box-shadow: 0 0 28px rgba(255, 210, 90, 0.95); transform: scale(1.12); } 100% { box-shadow: 0 0 0 rgba(255, 210, 90, 0); } }
.gap.wrong { animation: shake 420ms; background: rgba(155, 43, 30, 0.25); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Tiles. */
#tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 56px; }
.tile {
  font-family: inherit; font-size: 21px; padding: 9px 18px; cursor: pointer;
  color: var(--ink); border: 0; border-radius: 6px;
  background: linear-gradient(180deg, #f6ead0, #d8c290);
  box-shadow: 0 4px 0 #8c6a35, 0 8px 18px rgba(0, 0, 0, 0.5);
  transition: transform 120ms, box-shadow 120ms, opacity 200ms;
}
#tray.intro .tile { animation: tile-in 500ms cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes tile-in { from { opacity: 0; transform: translateY(18px) scale(0.85); } }
.tile:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 7px 0 #8c6a35, 0 14px 24px rgba(0, 0, 0, 0.55); }
.tile:active { transform: translateY(2px); box-shadow: 0 2px 0 #8c6a35, 0 4px 10px rgba(0, 0, 0, 0.5); }
.tile.used { opacity: 0.16; pointer-events: none; transform: scale(0.94); box-shadow: none; }

/* Buttons. */
button, .ghost, .gold {
  font-family: inherit; font-size: 18px; cursor: pointer; text-decoration: none;
  border-radius: 999px; padding: 10px 22px; display: inline-block;
}
.ghost { background: transparent; color: var(--text-hi); border: 1px solid rgba(246, 236, 214, 0.35); }
.ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
#meta .ghost { padding: 5px 12px; font-size: 16px; }
.gold {
  border: 0; color: #2a1a05; font-weight: bold; letter-spacing: 0.5px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 24px rgba(227, 181, 74, 0.35), 0 4px 0 #8a6416;
}
.gold:hover { filter: brightness(1.08); }
.gold:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
#controls { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
#status { text-align: center; min-height: 1.4em; color: var(--gold-hi); font-style: italic; margin: 14px 0 0; }

/* Solved. */
#done { text-align: center; margin-top: 10px; animation: leaf-in 700ms both; }
#done-head {
  font-family: "Grenze Gotisch", Georgia, serif; font-weight: normal; font-size: 44px;
  color: var(--gold); margin: 6px 0; text-shadow: 0 0 30px rgba(227, 181, 74, 0.6);
}
#done-line { margin: 0 0 10px; }
#share-preview {
  display: inline-block; text-align: left; margin: 6px auto 16px; padding: 12px 18px;
  font-family: ui-monospace, Menlo, monospace; font-size: 15px; line-height: 1.45;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(227, 181, 74, 0.25); border-radius: 10px;
  white-space: pre-wrap; max-width: 100%;
}
#done-buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.next-play { margin-top: 6px; }
.next-play a { color: var(--gold-hi); }
#next-in { color: rgba(246, 236, 214, 0.75); font-style: italic; margin-top: 16px; }
#leaf.solved { animation: glory 1400ms ease-out; }
@keyframes glory { 30% { box-shadow: 0 0 120px rgba(255, 200, 90, 0.75), inset 0 0 50px rgba(110, 70, 20, 0.3); } }

/* Help. */
#help { position: fixed; inset: 0; z-index: 10; background: rgba(5, 4, 8, 0.78); display: grid; place-items: center; padding: 16px; }
#help-card {
  max-width: 520px; padding: 28px 30px; border-radius: 12px; color: var(--ink);
  background: linear-gradient(160deg, var(--vellum), var(--vellum-dark));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
#help-card h2 { font-family: "Grenze Gotisch", Georgia, serif; font-weight: normal; color: var(--rubric); font-size: 34px; margin: 0 0 8px; }
#help-card li { margin-bottom: 6px; }
#help-card .small { font-size: 16px; color: #4a3826; }
#help-card a { color: var(--rubric); }

@media (max-width: 560px) {
  body { font-size: 17px; }
  #brand { font-size: 22px; white-space: nowrap; }
  #brand span { font-size: 15px; }
  #meta { gap: 6px; font-size: 15px; }
  #meta .ghost { padding: 4px 9px; font-size: 14px; }
  #leaf { padding: 26px 20px 22px; }
  #text { font-size: 21px; line-height: 1.7; }
  #text::first-letter { font-size: 50px; }
  .tile { font-size: 19px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}