:root {
  color-scheme: dark;
  --ember: #ff9b45;
  --gold: #e4bd78;
  --void: #05040a;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--void); }
body { font-family: Georgia, 'Times New Roman', serif; user-select: none; }
button { font: inherit; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: default; }
/* During a run the ember on the flagstones is the cursor. */
#view.playing { cursor: none; }

#grade, #vignette { position: absolute; inset: 0; pointer-events: none; }
#grade { mix-blend-mode: color; background: radial-gradient(circle at 50% 44%, rgba(255,128,54,.035), rgba(18,12,38,.10) 64%, rgba(4,3,10,.28)); }
#vignette { box-shadow: inset 0 0 min(18vw, 240px) rgba(0,0,0,.72), inset 0 0 35px rgba(4,2,8,.55); }

.panel {
  position: absolute; inset: 0; z-index: 8; display: grid; align-content: center; justify-items: center;
  padding: 8vh 5vw; text-align: center; color: #eadfce;
  background: radial-gradient(circle at 50% 54%, rgba(28,17,24,.24), rgba(3,3,8,.76) 74%);
  opacity: 0; visibility: hidden; transform: scale(1.015);
  transition: opacity .9s ease, transform 1.2s ease, visibility 0s linear .9s;
  pointer-events: none;
}
.panel.open { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; pointer-events: auto; }
#title.open, #end.open { cursor: pointer; }

h1 { margin: 0; color: #d7c59c; font-size: clamp(3.4rem, 9vw, 9.5rem); font-weight: 400; letter-spacing: .24em; text-indent: .24em; text-shadow: 0 0 30px rgba(255,151,65,.14); }
.subtitle { margin: .25rem 0 2.2rem; color: #8b7a67; font: 500 clamp(.65rem, 1vw, .95rem)/1 system-ui, sans-serif; letter-spacing: .68em; text-indent: .68em; }
.dedication { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); margin: 0; color: rgba(224,202,166,.46); font-size: clamp(.65rem, .85vw, .8rem); letter-spacing: .18em; }

.sigil { position: relative; width: 82px; height: 46px; margin-bottom: 1.6rem; filter: drop-shadow(0 0 11px rgba(255,139,56,.55)); }
.sigil::before { content: ''; position: absolute; left: 31px; top: 14px; width: 20px; height: 20px; border: 1px solid #efb25f; border-radius: 50%; box-shadow: inset 0 0 10px #ff7a2e, 0 0 16px rgba(255,110,30,.55); }
.sigil::after { content: ''; position: absolute; left: 40px; top: -5px; width: 1px; height: 22px; background: #a8875c; }
.sigil i { position: absolute; bottom: 0; width: 1px; height: 23px; background: linear-gradient(transparent, rgba(255,167,84,.85), transparent); animation: smoke 3.8s ease-in-out infinite; }
.sigil i:nth-child(1) { left: 32px; animation-delay: -.8s; }
.sigil i:nth-child(2) { left: 41px; height: 31px; }
.sigil i:nth-child(3) { left: 50px; animation-delay: -1.7s; }
@keyframes smoke { 0%,100% { transform: translate(0,0) scaleY(.7); opacity: .2; } 50% { transform: translate(5px,-13px) scaleY(1.3); opacity: .9; } }

#begin, #again {
  position: relative; width: 72px; height: 72px; padding: 0; border: 1px solid rgba(224,181,108,.42);
  border-radius: 50%; color: #f2cf90; background: radial-gradient(circle, rgba(255,125,38,.22), rgba(24,14,18,.74) 64%);
  cursor: pointer; box-shadow: inset 0 0 22px rgba(255,98,29,.15), 0 0 28px rgba(255,116,35,.12);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
#begin::before, #again::before { content: ''; position: absolute; left: 35px; top: 10px; width: 1px; height: 24px; background: linear-gradient(#6e5a43, #e5b96d); }
#begin::after, #again::after { content: ''; position: absolute; left: 25px; top: 33px; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 48% 52% 58% 42%; box-shadow: inset 0 0 12px #ff7428, 0 0 13px rgba(255,106,32,.56); }
#begin i, #again i { position: absolute; left: 31px; top: 39px; width: 8px; height: 8px; border-radius: 50%; background: #fff0bd; box-shadow: 0 0 9px 3px var(--ember); animation: ember 1.8s ease-in-out infinite; }
#begin:hover, #again:hover { transform: scale(1.07); border-color: #e8b86e; box-shadow: inset 0 0 28px rgba(255,98,29,.21), 0 0 34px rgba(255,116,35,.22); }
@keyframes ember { 50% { transform: scale(.72); opacity: .62; } }

/* Gameplay communicates through the body, chain, coal, altar candles, sound,
   and enemy motion. There is intentionally no screen-space HUD. */
#hud, #announcement, #sound, #pause { display: none !important; }

/* The controls, on the title and on the pause card. Plain words, no more than needed. */
.controls { margin: 1.5rem auto 0; max-width: 42rem; color: #9a8873; font-size: clamp(.78rem, 1.05vw, .95rem); line-height: 1.55; letter-spacing: .03em; }
.controls p { margin: 0 0 .35rem; }
.controls .keys { margin-top: .7rem; color: #6f6252; font-size: .86em; }
#title-controls { opacity: 0; transition: opacity 1.2s ease .5s; }
#title.open #title-controls { opacity: 1; }

#pause-card {
  position: absolute; z-index: 7; inset: 0; display: grid; place-content: center;
  background: rgba(4,3,8,.56); backdrop-filter: blur(3px); opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility 0s .35s; pointer-events: none; cursor: pointer; color: #eadfce; text-align: center;
}
#pause-card.open { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
#pause-card .card { display: grid; justify-items: center; padding: 1.6rem 2rem; }
#pause-card i { display: block; width: 32px; height: 32px; margin-bottom: 1.2rem; border: 1px solid rgba(229,193,134,.5); border-radius: 50%; box-shadow: inset 0 0 18px rgba(255,118,35,.18), 0 0 24px rgba(255,109,30,.1); }
#pause-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; text-align: left; }
#pause-card dt { color: #e4bd78; white-space: nowrap; }
#pause-card dd { margin: 0; }
#pause-card .go { margin: 1.4rem 0 0; color: #6f6252; font-size: clamp(.72rem, .9vw, .85rem); letter-spacing: .12em; }

#end { background: radial-gradient(circle at 50% 55%, rgba(24,13,17,.12), rgba(3,3,8,.84) 72%); }
#end #again { width: 92px; height: 92px; }
#end #again::before { left: 45px; top: 12px; height: 32px; }
#end #again::after { left: 32px; top: 43px; width: 26px; height: 26px; }
#end #again i { left: 39px; top: 50px; width: 12px; height: 12px; }
#end.dead #again { color: #ad7046; opacity: .76; filter: saturate(.7); }
#end.victory #again { color: #fff1c6; border-color: rgba(255,232,177,.7); box-shadow: inset 0 0 34px rgba(255,176,73,.28), 0 0 54px rgba(255,151,53,.24); }

#webgl-error { display: none; position: absolute; z-index: 20; inset: 0; place-content: center; padding: 2rem; text-align: center; color: #f1d3b0; background: #08060c; }
#webgl-error.open { display: grid; }

@media (max-width: 720px) {
  h1 { font-size: clamp(3rem, 15vw, 6rem); letter-spacing: .16em; text-indent: .16em; }
  .subtitle { letter-spacing: .4em; text-indent: .4em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}