:root {
  color-scheme: dark;
  --ink: #050711;
  --paper: #f4f4ff;
  --muted: #a9abc6;
  --bloom: #ff5fcf;
  --tide: #5de8ff;
  --ember: #ffc45b;
  --glass: rgba(12, 15, 32, .68);
  --line: rgba(231, 233, 255, .16);
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--paper);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; color: inherit; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

#vignette, #grain { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#vignette {
  background: radial-gradient(circle at 50% 44%, transparent 36%, rgba(2, 3, 9, .17) 67%, rgba(1, 2, 8, .74) 115%);
  mix-blend-mode: multiply;
}
#grain {
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(2) infinite;
}
@keyframes grain { 0%,100% { transform: translate(0); } 25% { transform: translate(-1.5%, 1%); } 50% { transform: translate(1%, -1.5%); } 75% { transform: translate(1.5%, 1%); } }

.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .85s ease, visibility .85s;
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }

#loading { background: #050711; }
#loading p { color: var(--muted); text-transform: uppercase; letter-spacing: .3em; font-size: 10px; margin-top: 24px; }
.loading-mark { position: relative; width: 76px; height: 76px; }
.loading-mark i { position: absolute; width: 12px; height: 12px; border-radius: 50%; filter: drop-shadow(0 0 12px currentColor); animation: wake 1.5s ease-in-out infinite; }
.loading-mark i:nth-child(1) { color: var(--bloom); background: currentColor; left: 0; top: 32px; }
.loading-mark i:nth-child(2) { color: var(--tide); background: currentColor; left: 32px; top: 0; animation-delay: -.5s; }
.loading-mark i:nth-child(3) { color: var(--ember); background: currentColor; right: 0; top: 32px; animation-delay: -1s; }
@keyframes wake { 0%,100% { transform: scale(.55); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }

#title { place-items: end start; padding: clamp(28px, 6vw, 92px); background: linear-gradient(90deg, rgba(3,4,12,.78) 0%, rgba(3,4,12,.28) 48%, transparent 76%); }
.title-copy { position: relative; z-index: 2; width: min(680px, 92vw); padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.eyebrow { margin: 0 0 14px; color: #c5c7df; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
h1 { margin: 0; font-size: clamp(58px, 8vw, 124px); line-height: .8; text-shadow: 0 12px 48px rgba(0,0,0,.48); }
h1 span { display: block; margin-left: .07em; font-size: .45em; font-style: italic; letter-spacing: -.02em; color: #d3d4e6; line-height: 1.25; }
.tagline { margin: clamp(20px, 3vh, 34px) 0 28px; color: #d5d6e8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(16px, 1.5vw, 21px); font-style: italic; line-height: 1.55; }

.primary {
  position: relative;
  min-width: 240px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,95,207,.23), rgba(93,232,255,.19));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 40px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s, background .2s;
}
.primary::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(100deg, var(--bloom), var(--tide), var(--ember)); opacity: .22; filter: blur(9px); z-index: -1; }
.primary span { display: block; font-weight: 750; letter-spacing: .02em; }
.primary small { display: block; margin-top: 4px; color: #b8bad0; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.primary:hover, .primary:focus-visible { transform: translateY(-2px); border-color: rgba(255,255,255,.58); background: linear-gradient(120deg, rgba(255,95,207,.34), rgba(93,232,255,.29)); outline: none; }
.primary:active { transform: translateY(1px) scale(.99); }
.primary.compact { min-width: 180px; padding: 12px 20px; }
.title-actions { display: flex; gap: 24px; margin: 18px 0 0 8px; }
.text-button { padding: 4px 0; border: 0; border-bottom: 1px solid transparent; color: #babcd2; background: none; font-size: 11px; letter-spacing: .08em; cursor: pointer; }
.text-button:hover, .text-button:focus-visible { color: white; border-color: rgba(255,255,255,.4); outline: none; }
.credit { position: absolute; right: clamp(22px, 4vw, 64px); bottom: max(22px, env(safe-area-inset-bottom)); color: rgba(226,227,243,.48); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.title-orbit { position: absolute; right: 14vw; top: 26vh; width: min(25vw, 300px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; animation: orbit 28s linear infinite; }
.title-orbit::before, .title-orbit::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.title-orbit::after { inset: 38%; }
.title-orbit i { position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 18px currentColor; background: currentColor; }
.title-orbit i:nth-child(1) { left: 6%; top: 27%; color: var(--bloom); }
.title-orbit i:nth-child(2) { right: 15%; top: 10%; color: var(--tide); }
.title-orbit i:nth-child(3) { right: 2%; bottom: 24%; color: var(--ember); }
@keyframes orbit { to { transform: rotate(360deg); } }

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,3,10,.62);
  backdrop-filter: blur(14px) saturate(.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .28s ease;
}
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-card { width: min(660px, 94vw); max-height: 90vh; overflow: auto; padding: clamp(26px, 5vw, 54px); border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(21,24,49,.95), rgba(6,8,20,.97)); box-shadow: 0 36px 100px rgba(0,0,0,.55); text-align: center; }
.modal-card h2 { margin: 0 0 28px; font-size: clamp(38px, 6vw, 68px); line-height: .92; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.how-grid > div { min-height: 116px; padding: 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.025); }
.how-grid .key { display: inline-block; margin-bottom: 14px; color: var(--tide); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.how-grid strong { display: block; font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.how-grid p, .kindness { color: #aaacc4; font-size: 12px; line-height: 1.5; }
.how-grid p { margin: 5px 0 0; }
.kindness { margin: 24px auto; }

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: 0; transition: opacity .6s; }
body[data-mode="playing"] #hud, body[data-mode="paused"] #hud { opacity: 1; }
.hud-top { position: absolute; top: var(--safe-top); left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); display: grid; grid-template-columns: 1fr minmax(200px, 1.4fr) 1fr; align-items: start; }
.gods-readout { justify-self: start; }
#gods-count { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
#god-pips { display: flex; gap: 4px; margin-top: 8px; }
#god-pips i { width: 14px; height: 3px; border-radius: 10px; background: rgba(255,255,255,.14); transition: .5s; }
#god-pips i.lit { background: var(--pip, white); box-shadow: 0 0 9px var(--pip, white); }
#objective { justify-self: center; margin: 0; max-width: 460px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(4,6,16,.35); backdrop-filter: blur(8px); color: #d9daea; font-family: Georgia, serif; font-size: 13px; font-style: italic; text-align: center; transition: opacity .3s; }
.hud-actions { justify-self: end; display: flex; gap: 8px; pointer-events: auto; }
.icon-button { width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(4,6,16,.45); backdrop-filter: blur(8px); cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { border-color: rgba(255,255,255,.45); outline: none; }

#beat { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%,-50%); opacity: .55; transition: opacity .2s; }
#beat i, #beat b { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; }
#beat b { inset: 22px; border: 0; background: rgba(255,255,255,.7); box-shadow: 0 0 12px white; }
#beat.ready i { border-color: var(--note-color, white); box-shadow: 0 0 16px color-mix(in srgb, var(--note-color, white) 55%, transparent); }
#beat.hit { animation: hit .3s ease-out; }
@keyframes hit { 50% { transform: scale(1.35); opacity: 1; } }

#toast { position: absolute; left: 50%; top: 31%; width: min(560px, 86vw); transform: translate(-50%, -8px); color: white; font-family: Georgia, serif; font-size: clamp(16px, 2.2vw, 25px); font-style: italic; text-align: center; text-shadow: 0 3px 18px #000; opacity: 0; transition: .3s ease; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

#note-dock { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 26px); display: flex; gap: 8px; transform: translateX(-50%); padding: 5px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: rgba(4,6,16,.52); backdrop-filter: blur(12px); pointer-events: auto; }
.note { --c: var(--bloom); display: flex; align-items: center; gap: 8px; min-width: 94px; padding: 8px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #a8aac0; cursor: pointer; transition: .22s ease; }
.note:nth-child(2) { --c: var(--tide); }
.note:nth-child(3) { --c: var(--ember); }
.note i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.note span { font-family: Georgia, serif; font-size: 12px; }
.note small { margin-left: auto; color: rgba(255,255,255,.36); font-size: 8px; }
.note.active { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); color: white; box-shadow: inset 0 0 14px color-mix(in srgb, var(--c) 8%, transparent); }
.note:hover, .note:focus-visible { color: white; outline: none; }
#desktop-hint { position: absolute; left: 50%; bottom: var(--safe-bottom); transform: translateX(-50%); margin: 0; color: rgba(224,225,241,.48); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }

#touch-controls { display: none; position: absolute; inset: 0; }
body[data-touch="true"] #touch-controls { display: block; }
body[data-touch="true"] #desktop-hint { display: none; }
.stick-zone { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: calc(var(--safe-bottom) + 28px); width: 152px; height: 152px; pointer-events: auto; }
.stick-base, .stick-knob { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.stick-base { width: 98px; height: 98px; border: 1px solid rgba(255,255,255,.12); background: rgba(6,8,18,.25); }
.stick-knob { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); background: rgba(203,207,238,.12); box-shadow: inset 0 0 16px rgba(255,255,255,.05); }
.touch-actions { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: calc(var(--safe-bottom) + 38px); display: flex; align-items: end; gap: 12px; pointer-events: auto; }
.touch-actions button { border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(6,8,18,.4); backdrop-filter: blur(8px); }
.touch-actions span { font-family: Georgia, serif; font-size: 11px; }
#touch-dash { width: 58px; height: 58px; }
#touch-sing { width: 82px; height: 82px; border-color: color-mix(in srgb, var(--note-color, var(--bloom)) 50%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--note-color, var(--bloom)) 12%, transparent); }
.touch-actions button:active { transform: scale(.94); background: rgba(255,255,255,.12); }

.pause-card { width: min(440px, 94vw); }
.pause-card .text-button { display: block; margin: 20px auto 0; }
#ending { justify-content: start; padding: clamp(28px, 7vw, 100px); background: linear-gradient(90deg, rgba(3,4,12,.78), rgba(3,4,12,.2) 70%, transparent); }
.ending-copy { width: min(550px, 92vw); }
.ending-copy h2 { margin: 0 0 24px; font-size: clamp(58px, 8vw, 106px); line-height: .81; }
.ending-copy > p:not(.eyebrow) { color: #d2d3e6; font-family: Georgia, serif; font-style: italic; }
.ending-copy dl { display: flex; gap: 28px; margin: 30px 0; }
.ending-copy dl div { min-width: 90px; }
.ending-copy dt { color: #9799b3; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.ending-copy dd { margin: 7px 0 0; font-family: Georgia, serif; font-size: 21px; }
#fatal { background: #050711; }
#fatal .modal-card p:last-child { color: #b4b6cc; }

@media (max-width: 720px), (pointer: coarse) {
  #title { place-items: end center; padding: max(24px, env(safe-area-inset-top)) 24px max(34px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(3,4,12,.92), rgba(3,4,12,.12) 78%); text-align: center; }
  .title-copy { width: 100%; }
  h1 { font-size: clamp(54px, 17vw, 92px); }
  .tagline { font-size: 15px; }
  .title-actions { justify-content: center; margin-left: 0; }
  .credit { display: none; }
  .title-orbit { right: 50%; top: 13vh; width: 40vw; transform: translateX(50%); }
  @keyframes orbit { from { transform: translateX(50%) rotate(0); } to { transform: translateX(50%) rotate(360deg); } }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .how-grid > div { min-height: 104px; padding: 14px; }
  .how-grid .key { margin-bottom: 8px; }
  .hud-top { grid-template-columns: 1fr auto; }
  #objective { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; font-size: 12px; }
  .hud-actions { grid-column: 2; grid-row: 1; }
  #beat { top: 44%; }
  #note-dock { bottom: calc(var(--safe-bottom) + 142px); gap: 2px; padding: 4px; }
  .note { min-width: 68px; padding: 7px 9px; gap: 5px; }
  .note small { display: none; }
  #desktop-hint { display: none; }
  .ending-copy { text-align: center; }
  .ending-copy dl { justify-content: center; gap: 16px; }
}

@media (max-width: 420px) {
  .modal-card { padding: 25px 18px; border-radius: 22px; }
  .how-grid { gap: 7px; }
  .how-grid > div { min-height: 94px; padding: 12px; }
  .how-grid strong { font-size: 18px; }
  .how-grid p { font-size: 10px; }
  #note-dock { bottom: calc(var(--safe-bottom) + 166px); }
  .note { min-width: 63px; }
  .stick-zone { left: 4px; bottom: calc(var(--safe-bottom) + 10px); width: 142px; height: 142px; }
  .touch-actions { right: 15px; bottom: calc(var(--safe-bottom) + 26px); }
}

@media (max-height: 500px) and (orientation: landscape) {
  #ending { justify-content: center; padding: 16px max(28px, env(safe-area-inset-left)); overflow-y: auto; }
  .ending-copy { width: min(720px, 92vw); }
  .ending-copy h2 { margin-bottom: 8px; font-size: clamp(42px, 13vh, 56px); line-height: .9; }
  .ending-copy h2 br { display: none; }
  .ending-copy > p:not(.eyebrow) { margin: 6px 0; }
  .ending-copy dl { margin: 10px 0; }
  .ending-copy dd { margin-top: 3px; font-size: 17px; }
  .ending-copy .primary { padding: 11px 20px; }
}

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