@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@700;800;900&display=swap");

:root {
  --ink: #1b1220;
  --paper: #fff6ea;
  --navy: #0c1024;
  --gold: #ffc14d;
  --pink: #ff4d8d;
  --good: #b6f5c8;
  --bad: #ffd0dc;
  --skin: #f3c2a0;
  --hair: #3a1630;
  color: var(--paper);
  font-family: Nunito, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: #070a16;
  overscroll-behavior: none;
}

button { font: inherit; touch-action: manipulation; }

.app {
  width: min(100vw, 440px);
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  user-select: none;
}

.screen { min-height: 0; }

#game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.gate {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 70% 42% at 50% 8%, rgba(255, 77, 141, 0.38), transparent 58%),
    radial-gradient(ellipse 80% 46% at 50% 28%, rgba(255, 193, 77, 0.22), transparent 62%),
    linear-gradient(180deg, #1a2748 0%, var(--navy) 58%);
}

.gate-art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 160px;
}

.gate-art svg { width: min(300px, 86vw); height: auto; }

.eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

h1, h2 {
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.gate h1 {
  font-size: clamp(2.5rem, 12vw, 3.6rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--ink);
}

.gate h1 span { color: var(--gold); }

.lede {
  margin: 12px 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  max-width: 28ch;
}

.fine {
  margin: 8px 0 0;
  color: rgba(255, 246, 234, 0.78);
  font-weight: 700;
  line-height: 1.35;
}

.gate-actions, .result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.btn, .choice {
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  min-height: 52px;
  padding: 12px 14px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.btn { text-align: center; }

.btn:active, .choice:active:not(:disabled), .icon-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.btn.primary { background: var(--gold); color: var(--ink); }

.btn.ghost {
  background: transparent;
  color: var(--paper);
  box-shadow: none;
  border-color: rgba(255, 246, 234, 0.45);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 0;
  flex: 0 0 auto;
}

.top h1 {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 0.95;
}

.top h1 span { color: var(--pink); }

.icon-btn {
  width: 52px;
  height: 52px;
  min-height: 52px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
  font-weight: 900;
  font-size: 0.86rem;
  flex: 0 0 auto;
}

.clock {
  margin: 0;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-size: 1.15rem;
  background: var(--gold);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 1px 10px 0;
  box-shadow: 2px 2px 0 var(--ink);
}

.clock.is-midnight {
  background: var(--pink);
  color: #fff;
  animation: pulse 0.45s ease-in-out infinite;
}

.beat-label { color: rgba(255, 246, 234, 0.8); }

.dignity-label { margin-left: auto; color: var(--gold); }

.meter {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px 14px 0;
  flex: 0 0 auto;
}

.meter i {
  display: block;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 246, 234, 0.14);
  border: 1px solid rgba(255, 246, 234, 0.2);
}

.meter i.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 193, 77, 0.65);
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 6px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 42% at 50% 0%, rgba(255, 193, 77, 0.16), transparent 62%),
    linear-gradient(180deg, #1a2748 0%, #14182e 46%, #161226 100%);
}

.stage.is-waiting { box-shadow: inset 0 0 0 4px rgba(255, 193, 77, 0.45); }

.stage.is-shake { animation: shake 0.4s linear; }

.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 1;
  background:
    repeating-linear-gradient(
      90deg,
      #6b3e2e 0 14px,
      #5a3426 14px 16px,
      #754434 16px 34px
    );
  border-top: 4px solid var(--ink);
}

.tenement {
  position: absolute;
  z-index: 0;
  top: 42px;
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  pointer-events: none;
}

.win {
  display: block;
  height: 42px;
  border: 3px solid var(--ink);
  border-radius: 3px 3px 1px 1px;
  background: #10162c;
  position: relative;
  box-shadow: inset 0 0 0 3px #3a342c;
  overflow: hidden;
}

.win.lit { background: linear-gradient(#ffe7a4, #ff9a3c); }

.win.party { background: linear-gradient(#ff7aa8, #7a2a55); }

.win::before,
.win::after {
  content: "";
  position: absolute;
  background: var(--ink);
  opacity: 0.45;
  z-index: 1;
}

.win::before { width: 2px; top: 0; bottom: 0; left: 50%; }

.win::after { height: 2px; left: 0; right: 0; top: 46%; }

.win span {
  position: absolute;
  width: 10px;
  height: 16px;
  left: 28%;
  bottom: 2px;
  background: var(--ink);
  border-radius: 6px 6px 2px 2px;
  opacity: 0.35;
}

.stage.is-booming .win.lit { background: linear-gradient(#ffd0e6, #ffc14d); }

.stage.is-booming .win.party { background: linear-gradient(#fff6ea, #ff4d8d); }

.lights {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 8px;
  right: 8px;
  height: 18px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.lights::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 1px;
  height: 2px;
  background: var(--ink);
}

.lights i {
  width: 8px;
  height: 12px;
  margin-top: 2px;
  border-radius: 3px 3px 6px 6px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  position: relative;
}

.lights i:nth-child(3n) {
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

.fireworks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px #fff6ea;
  opacity: 0.4;
  animation: flare 2.3s ease-in infinite;
  animation-delay: var(--d, 0s);
}

.stage.is-booming .spark {
  opacity: 1;
  animation-duration: 0.7s;
}

.props { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.prop { display: none; position: absolute; height: auto; }

.stage[data-scene="door"] .prop-door { display: block; left: 6px; bottom: 9%; width: 104px; }

.stage[data-scene="crisps"] .prop-crisps { display: block; right: 8px; bottom: 16%; width: 86px; }

.stage[data-scene="speech"] .prop-speech { display: block; left: 6px; bottom: 10%; width: 78px; }

.stage[data-scene="speaker"] .prop-speaker { display: block; right: 6px; bottom: 10%; width: 84px; }

.stage[data-scene="bells"] .prop-telly { display: block; right: 8px; bottom: 12%; width: 88px; }

.stage[data-scene="bake"] .prop-bake { display: block; left: 6px; bottom: 9%; width: 108px; }

.stage[data-scene="kiss"] .prop-kiss { display: block; left: 4px; bottom: 10%; width: 96px; }

.stage[data-scene="close"] .prop-close { display: block; left: 0; bottom: 16%; width: 48px; }

.screen-glow { fill: #24306a; }

.stage.is-booming .screen-glow { fill: #ffc14d; }

.morag {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.morag-svg {
  width: min(300px, 88%);
  height: auto;
  max-height: 100%;
  overflow: visible;
  display: block;
}

.speech {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 10px;
  right: 74px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px 16px 16px 6px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 8px 10px;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.25;
  pointer-events: none;
}

.timer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 56px;
  height: 56px;
  z-index: 5;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
}

.timer svg { width: 100%; height: 100%; display: block; }

.timer span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-size: 1rem;
  color: var(--ink);
}

.ring-bg, .ring { fill: none; stroke-width: 4; }

.ring-bg { stroke: rgba(27, 18, 32, 0.15); }

.ring {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: calc(113.1 * (1 - var(--p, 1)));
  transform: rotate(-90deg);
  transform-origin: 22px 22px;
}

.timer.is-low { animation: pulse 0.45s ease-in-out infinite; }

.timer.is-low .ring { stroke: var(--pink); }

.timer.is-low span { color: var(--pink); font-size: 0.78rem; }

.burst {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 6;
  margin: 0;
  pointer-events: none;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--paper);
  text-shadow:
    3px 3px 0 var(--ink),
    -2px -2px 0 var(--ink),
    0 6px 0 var(--pink);
}

.burst.go { animation: burst 0.72s cubic-bezier(.2, 1.4, .3, 1) both; }

.panel {
  flex: 0 1 auto;
  max-height: 52%;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: #101628;
  border-top: 4px solid var(--ink);
}

.prompt, .intro p, .result-copy {
  margin: 0 0 10px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--paper);
}

.prompt { font-size: 1.02rem; }

.note {
  margin: 8px 0;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.3;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice:disabled { cursor: default; }

.choice:disabled:not(.is-right):not(.is-wrong) { opacity: 0.45; }

.choice.is-right { background: var(--good); }

.choice.is-wrong { background: var(--bad); }

.choice.is-timeout { box-shadow: 4px 4px 0 var(--ink), inset 0 0 0 3px var(--gold); }

.choice.is-wait {
  text-align: center;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  background: #172038;
  color: var(--gold);
}

.choice.is-bells {
  text-align: center;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.03em;
  background: var(--pink);
  color: #fff;
  text-shadow: 3px 3px 0 var(--ink);
  min-height: 68px;
  animation: pulsebtn 0.4s ease-in-out infinite;
}

.choice.is-wait.is-wrong,
.choice.is-bells.is-wrong {
  background: var(--bad);
  color: var(--ink);
  text-shadow: none;
  animation: none;
}

.choice.is-bells.is-right {
  background: var(--good);
  color: var(--ink);
  text-shadow: none;
  animation: none;
}

#next { margin-top: 10px; }

.result h2 {
  font-size: clamp(1.7rem, 8vw, 2.35rem);
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--ink);
}

.score-num {
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--gold);
  margin: 0 0 4px;
}

.share-note, .result-copy, .prompt { user-select: text; }

.share-note {
  margin: 0;
  font-weight: 800;
  line-height: 1.35;
  color: var(--gold);
}

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

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Big Morag */

.rig { transform-box: fill-box; transform-origin: 50% 92%; }

.mood-poised .rig { animation: breathe 3.2s ease-in-out infinite; }

.mood-dancing .rig { animation: bop 0.42s ease-in-out infinite; }

.mood-hiding .rig { transform: translateY(18px); }

.mood-sparkling .rig { animation: shimmer 0.9s ease-in-out infinite; }

.mood-ruined .rig { transform: rotate(6deg) translate(6px, 8px); }

.mood-triumphant .rig { animation: proud 1.1s ease-in-out infinite; }

.face,
.arms-still,
.arms-up,
.arms-hide,
.arms-droop,
.kick,
.shoe-lost,
.coal,
.crown,
.crown-fallen,
.hide-hands,
.ruin-hand,
.sweat,
.glints { display: none; }

.mood-poised .arms-still,
.mood-sparkling .arms-still,
.mood-dancing .arms-up,
.mood-triumphant .arms-up,
.mood-hiding .arms-hide,
.mood-ruined .arms-droop,
.mood-poised .face-poised,
.mood-dancing .face-dancing,
.mood-hiding .face-hiding,
.mood-sparkling .face-sparkling,
.mood-ruined .face-ruined,
.mood-triumphant .face-triumphant { display: block; }

.mood-dancing .kick { display: block; }

.mood-dancing .leg-r,
.mood-dancing .shoe-r,
.mood-ruined .shoe-r { display: none; }

.mood-ruined .shoe-lost,
.mood-ruined .crown-fallen,
.mood-ruined .ruin-hand,
.mood-ruined .sweat,
.mood-hiding .hide-hands,
.mood-hiding .sweat { display: block; }

.mood-sparkling .glints,
.mood-sparkling .crown,
.mood-triumphant .glints,
.mood-triumphant .crown,
.mood-triumphant .coal { display: block; }

.blush { fill: var(--pink); opacity: 0.35; }

.mood-dancing .blush,
.mood-sparkling .blush,
.mood-triumphant .blush { opacity: 0.72; }

.mood-ruined .blush { opacity: 0.9; }

.specs { transform-box: fill-box; transform-origin: center; }

.mood-dancing .specs { transform: rotate(-8deg); }

.mood-ruined .specs { transform: translate(8px, 16px) rotate(14deg); }

.sequin { transform-box: fill-box; transform-origin: center; }

.mood-sparkling .sequin,
.mood-triumphant .sequin,
.mood-dancing .sequin { animation: twinkle 0.55s ease-in-out infinite alternate; }

.sequins .sequin:nth-child(odd) { animation-delay: 0.18s; }

.mood-hiding .sweat path,
.mood-ruined .sweat path { animation: drip 1.15s ease-in infinite; }

.drop-b { animation-delay: 0.35s; }

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes bop {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-8px); }
}

@keyframes shimmer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes proud {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

@keyframes drip {
  0% { transform: translateY(0); opacity: 1; }
  80% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes flare {
  0% { transform: translate(0, 10px) scale(0.3); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes pulsebtn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes burst {
  0% { transform: translate(-50%, -40%) scale(0.2) rotate(-8deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(1.05) rotate(6deg); opacity: 0; }
}

@media (max-height: 700px) {
  .win { height: 30px; }
  .tenement { top: 36px; gap: 6px; }
  .speech { font-size: 0.8rem; padding: 6px 8px; }
  .gate h1 { font-size: 2.3rem; }
  .prompt { font-size: 0.95rem; }
  .morag { top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .spark { opacity: 0.95; }

  .stage.is-booming .spark {
    box-shadow: 0 0 0 3px #fff6ea, 0 0 10px var(--c);
  }
}