/* Monster Therapy: a dark-fantasy look over the cartoon world, after its UI system:
   midnight, royal-navy and slate panels in gold frames, gold capsule buttons, warm ivory
   text, all set in Cormorant Garamond (an elegant old-style serif): bold for titles,
   names, buttons and numbers, medium and semibold for everything you read. Shares its palette
   with js/theme.js (canvas HUD). Ornaments are SVGs in assets/ui. */

:root {
  --midnight: #11182c;
  --navy: #202d4a;
  --slate: #2c3b5a;
  --gold: #ebd39a;
  --gold-rich: #d4b26a; /* frames */
  --gold-deep: #9c7a40;
  --line: rgba(235, 211, 154, 0.45);
  --ivory: #f5eedc;
  --mist: #a9b4cf;
  --success: #78d5a5;
  --danger: #d95c66;
  --flame: #f19a59;
  --thunder: #ebc867;
  --ice: #83ddf5;
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-ui: "Cormorant Garamond", Garamond, Georgia, serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-variant-numeric: lining-nums;
  background: var(--midnight);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

#app {
  min-height: 100%;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0.2em 0.45em;
  border-radius: 5px;
  border: 1px solid rgba(245, 238, 220, 0.7);
  background: rgba(17, 24, 44, 0.6);
  color: var(--ivory);
  font: 600 0.93em/1.3 var(--font-ui);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Buttons: gold capsule (primary), gold-outlined pill (secondary)     */
/* ------------------------------------------------------------------ */

.btn {
  --h: 2.9em; /* height: the capsule's framed ends scale with it */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  height: var(--h);
  padding: 0 1.6em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: none;
  font: 700 1.11rem/1 var(--font-display);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.08s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* The capsule (assets/ui/btn-gold.svg, cropped to its outline so it fills the button's full
   height like the outlined buttons): its pointed ends stay fixed, the middle stretches */
.btn-primary {
  padding: 0 0.2em;
  border: solid transparent;
  border-width: 0 calc(var(--h) * 0.963); /* 52 of the frame's 54 px height, at each end */
  border-radius: 0;
  border-image: url("assets/ui/btn-gold.svg") 0 52 fill / 0 calc(var(--h) * 0.963) stretch;
  color: #241b0d;
  filter: drop-shadow(0 0 14px rgba(235, 211, 154, 0.25)) drop-shadow(0 6px 10px rgba(4, 8, 20, 0.45));
}

/* Vines with leaves growing along the top edge and round the right end, and (the same
   art turned round) along the bottom edge and round the left end */
.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  width: calc(var(--h) * 1.4);
  height: calc(var(--h) * 0.8);
  background: url("assets/ui/btn-vine.svg") center / 100% 100% no-repeat;
  pointer-events: none;
  /* At rest only the vine's root end shows (its curl and first leaves); on hover it grows along
     the button's edge to its full length, like a real vine, uncovered from root to tip */
  clip-path: inset(-10% 52% -10% -10%);
  transition: clip-path 0.7s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.btn-primary::after {
  right: calc(var(--h) * -0.963); /* the frame's end sits in the border */
  top: calc(var(--h) * -0.09);
}

.btn-primary::before {
  left: calc(var(--h) * -0.963);
  bottom: calc(var(--h) * -0.09);
  transform: rotate(180deg);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: drop-shadow(0 0 18px rgba(235, 211, 154, 0.7)) drop-shadow(0 6px 10px rgba(4, 8, 20, 0.45)) brightness(1.06);
}

/* Hover: the glow, and the vines grow out along the button to their full length */
.btn-primary:hover::before,
.btn-primary:hover::after,
.btn-primary:focus-visible::before,
.btn-primary:focus-visible::after {
  clip-path: inset(-10% -10% -10% -10%);
}

.btn-secondary {
  border-color: rgba(235, 211, 154, 0.75);
  background: rgba(17, 24, 44, 0.78);
  color: var(--ivory);
  box-shadow: inset 0 0 0 3px rgba(17, 24, 44, 0.8), inset 0 0 0 4px rgba(235, 211, 154, 0.14), 0 6px 14px rgba(4, 8, 20, 0.35);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--gold);
  background: rgba(32, 45, 74, 0.9);
  color: #fff8e2;
  box-shadow: inset 0 0 0 3px rgba(17, 24, 44, 0.8), inset 0 0 0 4px rgba(235, 211, 154, 0.3), 0 0 20px rgba(235, 211, 154, 0.45);
}

.btn-ghost {
  border-color: rgba(169, 180, 207, 0.35);
  color: var(--mist);
}

.btn-ghost:hover {
  border-color: var(--line);
  color: var(--ivory);
}

.btn kbd {
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  border: 0;
  background: var(--midnight);
  color: var(--ivory);
  font-size: 0.62em;
  padding: 0.35em 0.65em;
}

.btn:focus-visible {
  outline: none;
}

.btn-secondary:focus-visible,
.btn-small:focus-visible,
.link-btn:focus-visible,
.remove-btn:focus-visible,
.text-input:focus-visible,
.menu-item:focus-visible,
.hud-pause:focus-visible,
.skip-btn:focus-visible,
.howto summary:focus-visible,
input[type="range"]:focus-visible,
#boss-preview:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-big {
  --h: 3.1em;
  font-size: 1.25rem;
}

.btn-small {
  --h: 2.5em;
  padding: 0 1.1em;
  font: 600 1.05rem/1 var(--font-ui);
}

.btn .arrow {
  width: 1.2em;
  height: 1.2em;
}

.link-btn {
  background: none;
  border: 0;
  padding: 0.3em;
  color: var(--mist);
  font: 600 1.05rem var(--font-ui);
  text-decoration: underline;
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 4px;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--gold);
}

/* ------------------------------------------------------------------ */
/* Ornaments                                                           */
/* ------------------------------------------------------------------ */

/* Ornate panel: a navy plate with scooped corners under a gold double frame, a star at the
   top and bottom centre (like a storybook card) */
.ornate {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 24px 40px rgba(4, 8, 20, 0.55));
}

.ornate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(235, 211, 154, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(32, 45, 74, 0.92), rgba(17, 24, 44, 0.95));
  /* Scooped corners: a quarter circle cut out of each, under the frame's line */
  --scoop: 14.5px;
  -webkit-mask:
    radial-gradient(circle at 1.5px 1.5px, #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 1.5px) 1.5px, #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 1.5px calc(100% - 1.5px), #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 1.5px) calc(100% - 1.5px), #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) bottom right / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 1.5px 1.5px, #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 1.5px) 1.5px, #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 1.5px calc(100% - 1.5px), #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - 1.5px) calc(100% - 1.5px), #0000 var(--scoop), #000 calc(var(--scoop) + 0.5px)) bottom right / 51% 51% no-repeat;
}

/* The frame (assets/ui/panel-frame.svg: scooped corners, a gold line and a fainter one
   inside it; its corners stay fixed) and the logo's star at the top and bottom centre. The
   layer reaches 11 px above and below the card so the stars can sit on the line */
.ornate::after {
  content: "";
  position: absolute;
  inset: -11px 0;
  pointer-events: none;
  border: solid transparent;
  border-width: 43px 32px;
  border-image: url("assets/ui/panel-frame.svg") 43 32 / 43px 32px stretch;
  background:
    url("assets/ui/frame-star.svg") 50% 1.5px / 22px no-repeat,
    url("assets/ui/frame-star.svg") 50% calc(100% - 1.5px) / 22px no-repeat;
  background-origin: border-box;
}

/* A vine with a star in the middle and leaves toward the ends, for dividing sections */
.rule {
  display: block;
  width: min(260px, 80%);
  height: 28px;
  margin-inline: auto;
  background: url("assets/ui/vine-divider.svg") center / contain no-repeat;
}

/* Small gold sparkles that slowly twinkle */
@keyframes twinkle {
  50% { opacity: 0.35; }
}

.crest {
  display: block;
  width: 8.2em; /* (the art keeps its size: the crests' canvas was widened so the vines aren't clipped) */
  height: auto;
  filter: drop-shadow(0 0 12px rgba(235, 211, 154, 0.45));
}

/* ------------------------------------------------------------------ */
/* Screen A: creation                                                  */
/* ------------------------------------------------------------------ */

.create {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(10px, 2.4vh, 40px) 16px clamp(10px, 2vh, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 40px); /* (sizes follow the window's height, so the menu fits without scrolling) */
  isolation: isolate;
}

/* The arena itself, out of focus and dimmed behind the menu */
.create::before {
  content: "";
  position: fixed;
  inset: -20px;
  z-index: -1;
  background: var(--arena-bg, none) center / cover no-repeat;
  filter: blur(4px) saturate(0.95) brightness(0.6);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* (the blurred backdrop and the shading over it sit on their own GPU layers, rasterized once:
   repainting a fixed, blurred full-screen layer under the live 3D monster made it flicker) */
.create::before,
.create::after {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

/* The title's drifting still, light rays and mist stop once the title is gone (they kept
   animating, invisibly, under the menu's blurred backdrop) */
.create:not(.is-title):not(.is-leaving-title) .title-scene::before,
.create:not(.is-title):not(.is-leaving-title) .title-rays,
.create:not(.is-title):not(.is-leaving-title) .title-mist {
  animation-play-state: paused;
}

/* The arena still fades in once it is ready (see setBackdrop in js/main.js) */
.has-backdrop .create::before {
  opacity: 1;
}

.create::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10, 14, 28, 0.7) 100%),
    linear-gradient(180deg, rgba(17, 24, 44, 0.35), rgba(17, 24, 44, 0.6));
}

.brand {
  position: relative;
  z-index: 2; /* over the monster's view, which reaches up behind it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  animation: fade-up 0.6s ease-out both;
}

.logo {
  margin: 0;
  line-height: 0;
}

/* The logo art (an inline SVG): the words are SVG text in the display font */
.logo-art {
  display: block;
  width: clamp(200px, min(30vw, 30vh), 350px);
  height: auto;
  overflow: visible;
}

.logo-word {
  font: 700 112px var(--font-display);
  letter-spacing: -1px;
  text-anchor: middle;
}

.logo-word.is-gold {
  font-size: 118px;
}

.logo-on-o {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-on-o.is-placed {
  opacity: 1;
}

.logo-sparkle {
  animation: twinkle 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.logo-sparkle:nth-of-type(2n) {
  animation-delay: 1.1s;
}

/* The tagline reads as the logo's own subtitle: warm gold-ivory, set under the vine's
   star, between two fine gold lines that fade outward */
.tagline {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 clamp(0.8rem, 1.5vw, 0.92rem)/1.6 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0dfb2;
  transition: color 0.8s ease; /* white on the title, gold in the menu */
}

.tagline::before,
.tagline::after {
  content: "";
  flex: none;
  width: clamp(22px, 4vw, 44px);
  height: 1px;
  background: linear-gradient(90deg, rgba(235, 211, 154, 0), rgba(235, 211, 154, 0.9));
}

.tagline::after {
  margin-left: -0.22em; /* the trailing letter spacing */
  background: linear-gradient(90deg, rgba(235, 211, 154, 0.9), rgba(235, 211, 154, 0));
}

/* The card's opening line */
.card-lead {
  margin: 0 0 4px;
  font: 600 1.2rem/1.3 var(--font-ui);
  color: var(--ivory);
  text-align: center;
}

/* One light card, one column: portrait, photo button, name, start. Lighter than the
   other panels: see-through, with a single thin gold line */
.create-panel.ornate {
  filter: drop-shadow(0 18px 30px rgba(4, 8, 20, 0.45));
}

.create-panel.ornate::before {
  background: linear-gradient(180deg, rgba(32, 45, 74, 0.72), rgba(17, 24, 44, 0.78));
  backdrop-filter: blur(6px);
}

/* One card, one column: portrait, photo button, name, start */
.create-panel {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  --card-gap: clamp(10px, 1.9vh, 18px);
  gap: var(--card-gap);
  /* Bottom: the difficulty sits as far above the frame's inner gold line (6.5 px in) as it
     sits below the dividing line over it (half the line's 10 px box + its 2 px margin + the gap) */
  padding: clamp(16px, 2.6vh, 28px) clamp(24px, 5vw, 40px) calc(var(--card-gap) + 13.5px);
  animation: fade-up 0.6s 0.1s ease-out both;
}


.portrait {
  position: relative;
  width: clamp(140px, 20vh, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  transition: filter 0.15s ease;
}

/* Leafy vines along the ring, upper right and lower left (drawn in the canvas's coordinates) */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/ui/ring-vine.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.portrait.is-dragging {
  filter: drop-shadow(0 0 24px rgba(235, 211, 154, 0.55));
}

#boss-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

#boss-preview.is-grabbing {
  cursor: grabbing;
}

#boss-preview.is-locked {
  cursor: default;
}


/* A fine gold line with a star in the middle, between the photo and the name */
.card-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0;
}

.card-sep::before,
.card-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(235, 211, 154, 0), rgba(235, 211, 154, 0.45));
}

.card-sep::after {
  background: linear-gradient(90deg, rgba(235, 211, 154, 0.45), rgba(235, 211, 154, 0));
}

.card-sep i {
  width: 10px;
  height: 10px;
  background: url("assets/ui/frame-star.svg") center / contain no-repeat;
}

/* The portrait with Upload a face under it, overlapping the bottom of the ring */
.face-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-btn {
  position: relative;
  z-index: 2; /* over the portrait's ring */
  flex-shrink: 0;
  /* centred on the gold ring's bottom edge (14.2% of the portrait above its box's bottom):
     half the button over the photo */
  margin-top: calc(-0.142 * var(--portrait) - var(--h) / 2);
  font-size: 0.88rem;
  padding: 0 0.8em;
  background: #141c33; /* solid, so the ring doesn't show through */
}

.upload-btn:hover,
.upload-btn:focus-within {
  background: #202d4a;
}

.face-row {
  --portrait: clamp(150px, 23vh, 180px);
}

.face-row .portrait {
  flex-shrink: 0;
  width: var(--portrait);
}

/* While a photo is checked: a spinning gold ring instead of the picture icon */
.upload-btn.is-busy {
  cursor: progress;
}

.upload-btn.is-busy .icon {
  display: none;
}

.upload-btn.is-busy::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid rgba(235, 211, 154, 0.3);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}

.upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}

.upload-btn:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.remove-btn {
  position: absolute;
  top: 11%; /* upper left, on the ring: the sprig grows from the upper right and the
               Upload button covers the bottom */
  left: 11%;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(17, 24, 44, 0.85);
  color: var(--ivory);
  cursor: pointer;
}

.remove-btn:hover {
  border-color: var(--danger);
  color: #ffd6da;
}

.remove-btn svg {
  width: 15px;
  height: 15px;
}

.ai-loading {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(17, 24, 44, 0.8);
  backdrop-filter: blur(2px);
  font: 700 1.01rem/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--gold);
}

.spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(235, 211, 154, 0.2);
  border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hint {
  margin: 0;
  max-width: 30ch;
  font: 600 0.99rem/1.45 var(--font-ui);
  color: var(--mist);
  text-align: center;
}

.hint:empty {
  display: none;
}


.col-label {
  margin: 0;
  font: 600 1.05rem var(--font-ui);
  color: var(--ivory);
}


/* The boss itself, rendered with the face on, in a gold frame */




.field {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field-label {
  font: 600 0.78rem/1 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  text-align: left;
}

.name-input {
  height: 48px;
  padding-block: 0;
  text-align: center;
}

/* The default name shows as the placeholder (used if the field is left empty), looking like
   a filled-in name; it clears as soon as the field is focused, ready for a new one */
.name-input::placeholder {
  color: var(--ivory);
  opacity: 1;
}

.name-input:focus::placeholder {
  color: transparent;
}

/* Start Battle: below the card and the monster, centred */
.start-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: fade-up 0.6s 0.2s ease-out both;
}

/* Zoomed down to fit short windows (js/main.js fitMenu) */
.create:not(.is-title) > .brand,
.create:not(.is-title) > .create-main,
.create:not(.is-title) > .start-row {
  zoom: var(--menu-fit, 1);
}

.start-row .btn-big {
  width: 16em;
  font-size: 1.3rem;
}

/* Short windows: a more compact menu, so it still fits without scrolling */
@media (max-height: 760px) {
  .create:not(.is-title) .logo-art {
    width: clamp(150px, 25vh, 200px);
  }

  .create:not(.is-title) .brand {
    gap: 4px;
  }

  .portrait {
    width: clamp(130px, 21vh, 160px);
  }

  .face-row {
    --portrait: clamp(130px, 21vh, 160px);
  }

  .card-lead {
    font-size: 1.08rem;
    margin: 0;
  }

  .name-input {
    font-size: 1.15rem;
  }

  .diff-option span {
    padding: 0.4em 0.3em;
  }

  .start-row .btn-big {
    font-size: 1.15rem;
  }
}

.ai-row {
  align-self: stretch;
}

.ai-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.text-input {
  width: 100%;
  padding: 0.75em 0.95em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 24, 44, 0.78);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.35);
  font: 600 1.3rem/1.2 var(--font-ui);
  color: var(--ivory);
}

.text-input:hover {
  border-color: var(--gold);
}

/* Difficulty: a three-way choice under the name, the picked one lit gold */
.difficulty {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 24, 44, 0.6);
}

.diff-option {
  position: relative;
  cursor: pointer;
}

.diff-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.diff-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.5em 0.3em;
  border-radius: 7px;
  font: 700 1.02rem/1 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--mist);
  transition: color 0.25s ease;
}

.diff-option:hover span {
  color: var(--ivory);
}

/* The gold highlight behind the picked option, sliding across to the new pick */
.difficulty::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - 12px) / 3);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(235, 211, 154, 0.22), rgba(235, 211, 154, 0.08));
  box-shadow: inset 0 0 0 1px rgba(235, 211, 154, 0.55);
  transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1); /* a little overshoot */
  pointer-events: none;
}

.difficulty:has(input[value="medium"]:checked)::before {
  transform: translateX(calc(100% + 6px));
}

.difficulty:has(input[value="hard"]:checked)::before {
  transform: translateX(calc(200% + 12px));
}

.diff-option input:checked + span {
  color: #fff3d6;
}

.diff-option input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.diff-stars {
  display: flex;
  gap: 1px;
  height: 10px;
}

.diff-stars b {
  width: 10px;
  height: 10px;
  background: url("assets/ui/frame-star.svg") center / contain no-repeat;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.diff-option input:checked + span .diff-stars b {
  opacity: 1;
}

/* The loading screen before the title: midnight and the same loading row as the prologue's (stars chasing round, the words, a gold line filling) */
.boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: radial-gradient(ellipse at 50% 45%, #0d1222, #04060b 70%);
  transition: opacity 0.9s ease;
}

.boot.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot .prologue-loading {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  opacity: 1;
}

/* Until it's gone, the title's entrance waits (its animations hold on their first frame) */
html.is-booting .create,
html.is-booting .create * {
  animation-play-state: paused !important;
}

/* The prologue: black, with the narrator's lines fading up one after another */
.prologue {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  padding: 0 24px;
  background: radial-gradient(ellipse at 50% 45%, #0d1222, #04060b 70%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.prologue.is-dark {
  opacity: 1;
  pointer-events: auto;
}

.prologue.is-lifting {
  opacity: 0;
  transition-duration: 1.1s;
}

.prologue-line {
  margin: 0;
  max-width: 24em;
  font: italic 600 clamp(1.35rem, 3vw, 2.3rem)/1.35 var(--font-display);
  color: #f3e6c4;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.2s ease;
}

.prologue-line.is-on {
  opacity: 1;
  transform: none;
  filter: none;
}

.prologue-star {
  width: 22px;
  height: 22px;
  background: url("assets/ui/frame-star.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.prologue.has-line .prologue-star {
  opacity: 0.9;
}

/* The prologue's loading row, near the bottom: three gold stars chasing round, the words
   and a fine gold progress line with a glint running along it */
.prologue-loading {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 9vh, 88px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.prologue.is-dark .prologue-loading {
  opacity: 1;
}

.prologue.is-loaded .prologue-loading {
  opacity: 0;
  transition-duration: 0.9s;
}

.prologue-spinner {
  position: relative;
  width: 34px;
  height: 34px;
  animation: prologue-spin 1.6s linear infinite;
}

.prologue-spinner i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: url("assets/ui/frame-star.svg") center / contain no-repeat;
  transform-origin: 6px 17px;
  animation: prologue-twinkle 1.6s ease-in-out infinite;
}

.prologue-spinner i:nth-child(2) {
  transform: rotate(120deg);
  animation-delay: -0.53s;
}

.prologue-spinner i:nth-child(3) {
  transform: rotate(240deg);
  animation-delay: -1.07s;
}

@keyframes prologue-spin {
  to { transform: rotate(360deg); }
}

@keyframes prologue-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.prologue-load-text {
  font: 700 0.78rem/1 var(--font-ui);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: rgba(240, 223, 178, 0.75);
}

.prologue-load-text::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: prologue-dots 1.4s steps(4) infinite;
}

@keyframes prologue-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

.prologue-bar {
  position: relative;
  width: min(220px, 60vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(235, 211, 154, 0.16);
  overflow: hidden;
}

.prologue-bar i {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--load, 0));
  background: linear-gradient(90deg, #9c7a40, #ebd39a 70%, #fff3c9);
  box-shadow: 0 0 8px rgba(245, 215, 140, 0.6);
  transition: transform 0.3s linear;
}

/* Toast: messages about the photo, sliding down from the top of the screen */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 20;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 0.75em 1.2em 0.75em 2.6em;
  border-radius: 10px;
  border: 1px solid rgba(217, 92, 102, 0.75);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ff9aa2' stroke-width='2'/%3E%3Cpath d='M12 7v6M12 16.5v.5' stroke='%23ff9aa2' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0.9em center / 1.15em no-repeat,
    linear-gradient(180deg, rgba(58, 24, 36, 0.96), rgba(32, 16, 26, 0.96));
  box-shadow: 0 12px 30px rgba(4, 8, 20, 0.5);
  font: 600 1rem/1.4 var(--font-ui);
  color: #ffe1e4;
  /* Hidden above the top edge; slides down into view, and back up when it goes */
  opacity: 0;
  transform: translate(-50%, calc(-100% - 24px));
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 1, 1), opacity 0.35s ease;
}

.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: transform 0.5s cubic-bezier(0.22, 1.25, 0.36, 1), opacity 0.25s ease; /* a little overshoot */
}

/* The card and the live 3D monster side by side */
.create-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 32px);
  width: 100%;
}

.monster-stage {
  position: relative;
  margin: 0;
  /* Twice the card's width (as room allows); the 3D view also reaches above and below the
     card row, behind the tagline and Start Battle, so the monster stands twice as big */
  width: clamp(400px, calc(100vw - 560px), 800px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fade-up 0.6s 0.2s ease-out both;
}

.monster-stage canvas {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  /* Taller than the row: up to just under the tagline (--stage-lift, measured in main.js, so
     the monster never rises past it) and down toward Start Battle */
  margin: calc(-1 * var(--stage-lift, 0px)) 0 -14%;
  /* Soft edges, so monsters fade in and out as they walk on and off (and fade out at the top) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 6%);
  mask-composite: intersect;
}

/* Under the monster: "Your boss", its name and a dot per monster */
.monster-stage figcaption {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pick-label {
  font: 600 0.82rem var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

#monster-name {
  font: 700 1.5rem/1.2 var(--font-display);
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(4, 8, 20, 0.8);
}

.pick-dots {
  display: flex;
  gap: 7px;
  margin-top: 4px;
}

.pick-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(235, 211, 154, 0.6);
  transition: background 0.2s ease;
}

.pick-dots i.is-on {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(235, 211, 154, 0.6);
}

/* Ornate gold arrows either side of the monster, halfway up: they glow and nudge outward
   on hover */
.pick-btn {
  position: absolute;
  top: 40%;
  z-index: 1;
  width: 88px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17, 24, 44, 0.55), rgba(17, 24, 44, 0));
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(4, 8, 20, 0.6));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.pick-btn svg {
  width: 84px;
  height: 52px;
  overflow: visible;
}

.pick-btn.is-prev svg {
  transform: scaleX(-1);
}

.pick-btn:hover {
  filter: drop-shadow(0 0 8px rgba(255, 226, 150, 0.75)) drop-shadow(0 2px 4px rgba(4, 8, 20, 0.6));
}

.pick-btn.is-next:hover {
  transform: translateX(3px);
}

.pick-btn.is-prev:hover {
  transform: translateX(-3px);
}

.pick-btn:active {
  transform: scale(0.92);
}

.pick-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Close either side of the monster (about its width from the centre), not out at the edges */
.pick-btn.is-prev {
  left: max(-14px, calc(50% - 280px));
}

.pick-btn.is-next {
  right: max(-14px, calc(50% - 280px));
}

/* No room beside the card on small screens: just the card */
@media (max-width: 860px) {
  .monster-stage {
    display: none;
  }
}


.ai-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ai-note,
.ai-status {
  margin: 0;
  font-size: 0.78rem;
  color: var(--mist);
}

.ai-status {
  color: var(--ivory);
}



.load-status {
  margin: 0;
  font: 600 0.93rem var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  text-align: center;
}

/* Controls: a pill in the top-right corner; the controls drop down below it */
.howto {
  position: absolute;
  top: clamp(14px, 3vh, 28px);
  right: clamp(14px, 3vw, 32px);
  z-index: 3;
}

.howto summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(235, 211, 154, 0.4);
  background: rgba(17, 24, 44, 0.6);
  font: 600 0.99rem var(--font-ui);
  color: var(--gold);
  cursor: pointer;
  list-style: none;
}

.howto summary:hover {
  border-color: var(--gold);
}

.howto summary::-webkit-details-marker {
  display: none;
}

.howto summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

.howto[open]:not(.is-closing) summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.howto summary .icon {
  width: 1.1em;
  height: 1.1em;
}

/* The Settings dropdown: sound, then the controls under their own heading */
.howto .settings-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 28px));
  padding: 16px 24px 10px;
  transform-origin: calc(100% - 40px) -12px; /* grows out of the Settings pill */
  animation: settings-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Closing plays the reverse before the panel is hidden (js/main.js closeSettings) */
.howto.is-closing .settings-panel {
  animation: settings-out 0.2s ease-in both;
}

@keyframes settings-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.94); filter: blur(2px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes settings-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .howto .settings-panel,
  .howto.is-closing .settings-panel {
    animation-duration: 0.01s;
  }
}

.settings-sound {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(235, 211, 154, 0.14);
  font: 700 1.06rem var(--font-display);
  color: var(--ivory);
}

.settings-head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 14px 0 2px;
  font: 600 0.8rem var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}

.settings-head .icon {
  width: 1.5em;
  height: 1.5em;
  color: var(--gold);
}

.howto .controls {
  padding: 4px 0;
}

/* The controls: one per row, keys in a column on the left, what they do on the right */
.controls {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 26px;
  font: 600 1.06rem var(--font-ui);
  color: var(--ivory);
}

.controls div {
  display: grid;
  grid-template-columns: 7.2em 1fr;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}

.controls div + div {
  border-top: 1px solid rgba(235, 211, 154, 0.14);
}

.controls dt {
  display: flex;
  gap: 4px;
}

.controls dd {
  margin: 0;
}

/* Small screens: room at the top for the pill */
@media (max-width: 640px) {
  .create {
    padding-top: 64px;
  }
}

/* ------------------------------------------------------------------ */
/* Stage: canvas scaled to fit, overlays sized with container units     */
/* ------------------------------------------------------------------ */

.stage {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* the whole screen: the view's width follows its shape (Game.resize) */
  container-type: size;
  background: var(--midnight);
  overflow: hidden;
}

#game,
#game3d {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

#game3d {
  display: none;
}

.stage.is-3d #game3d {
  display: block;
}

/* Pause button beside the timer (the HUD itself is drawn on the canvas, in 1280×720 units) */
.hud-pause {
  position: absolute;
  top: calc(18 * var(--u, 1px));
  right: calc(22 * var(--u, 1px));
  width: calc(46 * var(--u, 1px));
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid var(--gold-rich);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2c3b5a, var(--midnight));
  box-shadow: 0 0 0 1.5px var(--midnight), 0 4px 10px rgba(4, 8, 20, 0.45);
  cursor: pointer;
}

.hud-pause::before {
  content: "";
  position: absolute;
  inset: 32% 34%;
  border-left: calc(4.5 * var(--u, 1px)) solid var(--ivory);
  border-right: calc(4.5 * var(--u, 1px)) solid var(--ivory);
}

.hud-pause::after {
  content: "ESC";
  position: absolute;
  left: 50%;
  top: calc(100% + 0.35em);
  transform: translateX(-50%);
  font: 600 clamp(8px, calc(12 * var(--u, 1px)), 13px) var(--font-ui);
  letter-spacing: 0.08em;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(4, 8, 20, 0.9);
}

.hud-pause:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1.5px var(--midnight), 0 0 14px rgba(235, 211, 154, 0.4);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, calc(16.6 * var(--u, 1px)), 17px); /* (follows the HUD's scale, capped at its design size) */
}

.overlay .btn {
  font-size: 1.1em;
}

/* The opening cutscene: letterbox bars, the boss's title card, captions and Skip */
.intro {
  pointer-events: none;
}

/* Letterbox shading: a soft midnight vignette at the top and bottom edges, fading into
   the scene (the captions keep their own shadow for legibility) */
.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 15cqh;
  --shade: linear-gradient(var(--dir),
    rgba(17, 24, 44, 0.82) 0%,
    rgba(17, 24, 44, 0.62) 35%,
    rgba(17, 24, 44, 0.3) 65%,
    rgba(17, 24, 44, 0.08) 88%,
    rgba(17, 24, 44, 0) 100%);
  background: var(--shade);
  animation: bars-in 0.5s ease-out both;
}

.letterbox.is-top {
  top: 0;
  --dir: 180deg;
  --from: -100%;
}

.letterbox.is-bottom {
  bottom: 0;
  --dir: 0deg;
  --from: 100%;
}

@keyframes bars-in {
  from { transform: translateY(var(--from)); }
  to { transform: none; }
}

.cutscene-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13cqh; /* low in the frame, so the monster's face stays clear */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 1.2em 0 1.4em;
  background:
    radial-gradient(ellipse 50% 72% at 50% 52%, rgba(10, 14, 28, 0.82), rgba(10, 14, 28, 0.5) 55%, transparent 80%),
    linear-gradient(90deg, transparent, rgba(10, 14, 28, 0.35) 25%, rgba(10, 14, 28, 0.35) 75%, transparent);
  animation: title-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cutscene-title .crest {
  width: 9em;
  margin-bottom: -0.2em;
}

.intro-name {
  max-width: 70cqw;
  margin: 0;
  font: 700 3.3em/1.05 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ivory);
  text-align: center;
  text-shadow: 0 3px 0 rgba(10, 14, 28, 0.85), 0 0 26px rgba(10, 14, 28, 0.9);
}

.intro-tagline {
  margin: 0;
  font: 600 0.95em var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 6px rgba(4, 8, 20, 0.95);
}

/* Captions sit on the bottom letterbox bar, like film subtitles, centred in it */
.caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 11cqh;
  transform: translateX(-50%);
  width: min(70cqw, 46em);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  text-align: center;
  animation: caption-in 0.3s ease-out both;
}

.caption .speaker {
  font: 700 0.9em var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.caption.is-hero .speaker {
  color: var(--success);
}

.caption .said {
  font: 600 1.45em/1.25 var(--font-ui);
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.caption.is-shout .said {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd9c8;
}

.caption.is-narrator .said {
  font-style: italic;
  font-weight: 500;
  font-size: 1.55em;
  color: var(--gold);
}

@keyframes caption-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translateX(-50%); }
}

.skip-btn {
  position: absolute;
  right: 2.5cqw;
  bottom: 3.5cqh;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.2em;
  border: 0;
  background: none;
  color: var(--mist);
  font: 600 0.95em var(--font-ui);
  cursor: pointer;
  pointer-events: auto;
}

.skip-btn:hover {
  color: var(--gold);
}

@keyframes title-in {
  from { transform: scale(1.08); opacity: 0; letter-spacing: 0.08em; }
  to { transform: none; opacity: 1; }
}

/* Pause: a framed menu; Resume is a gold bar, the rest are rows split by hairlines */
.pause {
  background: radial-gradient(ellipse at center, rgba(17, 24, 44, 0.4), rgba(10, 14, 28, 0.85));
}

.pause-panel {
  width: min(25em, 90%);
  padding: 2em 2em 1.8em;
  animation: fade-up 0.25s ease-out both;
}

.pause-panel h2 {
  margin: -0.1em 0 0.7em;
  font: 700 2.23em/1 var(--font-display);
  letter-spacing: 0.06em;
  text-align: center;
  background: linear-gradient(180deg, #fff8e2 15%, #ebd39a 55%, #b88f48 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 100%;
  padding: 0.8em 0.9em;
  border: 0;
  border-bottom: 1px solid rgba(235, 211, 154, 0.14);
  background: transparent;
  color: var(--ivory);
  font: 700 1.06em var(--font-display);
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.menu > :last-child {
  border-bottom: 0;
}

button.menu-item:hover {
  background: rgba(44, 59, 90, 0.6);
}

.menu-item > span {
  flex: 1;
}

.menu-item .icon {
  color: var(--gold);
}

.menu-item kbd {
  font-size: 0.68em;
  font-family: var(--font-ui);
}

.menu-item.is-primary {
  margin-bottom: 0.3em;
  border: 1px solid #fff3c9;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbefc8, #e3c785 60%, #c9a35a);
  color: #241b0d;
  box-shadow: 0 0 0 1px rgba(17, 24, 44, 0.9), 0 0 16px rgba(235, 211, 154, 0.3);
}

.menu-item.is-primary .icon {
  color: #241b0d;
}

.menu-item.is-primary:hover {
  background: linear-gradient(180deg, #fff5d6, #ebd093 60%, #d1ac62);
}

.menu-item.is-primary kbd {
  border: 0;
  background: var(--midnight);
  color: var(--ivory);
}

.menu-sound {
  cursor: default;
}

.menu-sound label {
  flex: none;
}

.menu-sound output {
  min-width: 3em;
  text-align: right;
  font: 600 1.05em var(--font-ui);
  color: var(--ivory);
}

.menu-sound input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 1.4em;
  margin: 0 0 0 0.6em;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.menu-sound input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ivory) var(--fill, 80%), rgba(169, 180, 207, 0.3) var(--fill, 80%));
}

.menu-sound input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(169, 180, 207, 0.3);
}

.menu-sound input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--ivory);
}

.menu-sound input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--gold-rich);
}

.menu-sound input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--gold-rich);
}

/* Controls, opened from the pause menu: its own framed card, the keys in one column */
.controls-panel .controls {
  padding: 0 0.4em 0.6em;
}

.controls-back {
  justify-content: center;
  margin-top: 0.3em;
  border-top: 1px solid rgba(235, 211, 154, 0.14);
}

.controls-back span {
  flex: none;
}

.menu-item .chevron {
  margin-left: auto;
  opacity: 0.7;
}

/* Results: victory in gold over the arena, defeat in red */
.results {
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 14, 28, 0.78), rgba(6, 9, 18, 0.96)); /* dark, so the gold reads clearly over the arena */
}

.results.is-defeat {
  background: radial-gradient(ellipse at 50% 40%, rgba(58, 8, 14, 0.85), rgba(20, 3, 6, 0.97)); /* a deep red, so the text reads easily */
}

.results-panel {
  width: min(46em, 92%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fade-up 0.7s ease-out both;
}

.results-panel .crest {
  width: 14.1em;
  height: auto;
  margin-bottom: 1em; /* (clear space between the crest and the title) */
}

.results.is-defeat .crest {
  filter: drop-shadow(0 0 12px rgba(217, 92, 102, 0.55));
}

.results-panel h2 {
  margin: 0;
  font: 700 4.88em/1.05 var(--font-display);
  letter-spacing: 0.02em;
}

.results.is-victory h2 {
  background: linear-gradient(180deg, #fff8e2 15%, #ebd39a 55%, #b88f48 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(10, 14, 28, 0.9)) drop-shadow(0 0 26px rgba(235, 211, 154, 0.45));
}

/* Pale rose on the red: light enough to stand off the background, inked dark underneath */
.results.is-defeat h2 {
  font-size: 4em;
  background: linear-gradient(180deg, #fff6f2 15%, #ffd6cf 55%, #f2a49c 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(26, 4, 8, 0.95)) drop-shadow(0 0 18px rgba(26, 4, 8, 0.75));
}

.results-sub {
  margin: 0.4em 0 1.1em;
  font: 600 1.41em var(--font-ui);
  color: var(--ivory);
}

.results-panel .rule {
  width: 70%;
}

.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5em, 1fr);
  margin: 0 0 1.8em;
  padding: 1.3em 0;
  border-bottom: 1px solid rgba(235, 211, 154, 0.22);
}

.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding: 0 1.4em;
}

.stats div + div {
  border-left: 1px solid rgba(235, 211, 154, 0.25);
}

.stats .stat-icon {
  width: 1.6em;
  height: 1.6em;
  margin-bottom: 0.3em;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(235, 211, 154, 0.4));
}

.stats dd {
  order: 1;
  margin: 0;
  font: 700 1.7em/1.1 var(--font-display);
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

.stats dt {
  order: 2;
  font: 600 1.11em var(--font-ui);
  color: var(--ivory);
  opacity: 0.85;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4em;
}

/* Both result buttons the same size. The gold capsule's frame reads a little shorter than the
   outlined pill (its rim sits just inside the box and its ends taper), so it gets a touch
   more height to look the same */
.results-actions {
  align-items: center;
}

.results-actions .btn {
  width: 16em;
}

.results-actions .btn-primary {
  --h: 3.15em;
}

/* ------------------------------------------------------------------ */
/* The title screen: just the logo (big), the tagline and Start         */
/* ------------------------------------------------------------------ */

/* The title's picture: sharp and bright, slowly drifting closer. It's framed so the logo
   and tagline sit in open sky, so they need no shadow or darkening. It fades out on Start. */
.title-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

.title-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--title-bg, none) center / cover no-repeat;
  animation: title-drift 24s ease-in-out infinite alternate;
}

.has-title-bg .create.is-title .title-scene {
  opacity: 1;
}

/* (the create screen's darkening sits above the picture: off while the title shows) */
.create::after {
  transition: opacity 0.9s ease;
}

.has-title-bg .create.is-title::after {
  opacity: 0;
}

/* The live scene: the arena's own canvas, crossfading in over the still, in a soft, warm
   grade; drifting motes of light over it */
.title-scene #game3d,
.title-motes {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.title-scene #game3d {
  opacity: 0;
  filter: saturate(1.08) brightness(1.04) contrast(0.96);
  animation: title-live-in 1.6s 0.2s ease forwards;
}

.title-scene.is-live::before {
  animation-play-state: paused;
}

/* Coming back to the title (TitleScene.pullOut): the live view shows at once, without the
   still under it, so the backdrop sharpens straight into it */
.title-scene.is-instant #game3d {
  animation: none;
  opacity: 1;
}

.title-scene.is-instant::before {
  display: none;
}

@keyframes title-live-in {
  to { opacity: 1; }
}

/* Light rays falling from the upper left, slowly breathing */
.title-rays {
  position: absolute;
  inset: -10% -10% 20% -10%;
  z-index: 1;
  background: repeating-linear-gradient(112deg,
    rgba(255, 240, 200, 0) 0 70px,
    rgba(255, 238, 190, 0.26) 90px 130px,
    rgba(255, 240, 200, 0) 160px 230px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 18% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 18% 0%, #000, transparent 75%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: title-rays 9s ease-in-out infinite alternate;
}

@keyframes title-rays {
  from { opacity: 0.55; transform: translateX(-1%); }
  to { opacity: 1; transform: translateX(1.5%); }
}

/* Low mist rolling across the ground */
.title-mist {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -6%;
  height: 42%;
  z-index: 1;
  background:
    radial-gradient(ellipse 30% 45% at 20% 70%, rgba(235, 240, 255, 0.38), transparent 70%),
    radial-gradient(ellipse 28% 40% at 55% 80%, rgba(235, 240, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 32% 50% at 85% 72%, rgba(235, 240, 255, 0.36), transparent 70%);
  filter: blur(10px);
  animation: title-mist 30s ease-in-out infinite alternate;
}

@keyframes title-mist {
  from { transform: translateX(-4%); }
  to { transform: translateX(4%); }
}

.title-motes {
  z-index: 1;
  pointer-events: none;
}

@keyframes title-drift {
  from { transform: scale(1.02) translateX(0); }
  to { transform: scale(1.09) translateX(-1.2%); }
}

.title-actions {
  display: none;
}

.create.is-title .create-main,
.create.is-title .start-row,
.create.is-title .howto {
  display: none;
}

.create.is-title .brand {
  animation: none;
  gap: 14px;
  margin-top: calc(-26vh - 68px); /* up in the sky (the tagline too, clear of the cliffs; the prompt sits apart, at the bottom) */
}

.create.is-title .logo-art {
  width: min(480px, 84vw); /* a set size: it doesn't grow with wide windows */
  animation: logo-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Over the logo on the title screen: a small spaced-out credit, then "introducing" in gold
   italic between two stars, smaller than the logo */
.presents {
  display: none;
}

.create.is-title .presents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 0 -6px;
  animation: fade-up 0.8s 0.1s ease-out both;
}

.presents-by {
  font: 700 clamp(0.78rem, 1.3vw, 0.95rem)/1.4 var(--font-ui);
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* balances the spacing after the last letter, so it centres */
  text-transform: uppercase;
  color: #fff7e2;
}

.presents-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  font: italic 700 clamp(1.7rem, 3.4vw, 2.5rem)/1.1 var(--font-display);
  background: linear-gradient(180deg, #fff3c9 10%, #ebd39a 55%, #c99a45 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.1em 0.08em;
}

.presents-intro::before,
.presents-intro::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  background: url("assets/ui/star-plain.svg") center / contain no-repeat;
  transform: translateY(0.12em); /* level with the middle of the lowercase letters */
}

.create.is-title .tagline {
  font-size: 1.05rem;
  text-shadow: none;
  color: #ffffff; /* white on the title */
  margin-top: -12px; /* tucked up under the logo's vine */
  animation: fade-up 0.7s 0.5s ease-out both;
}

.create.is-title .tagline::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
}

.create.is-title .tagline::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.create.is-title .title-actions {
  display: block;
  position: fixed; /* near the bottom of the view, over the ground */
  left: 0;
  right: 0;
  bottom: clamp(28px, 8vh, 80px);
  text-align: center;
  animation: fade-up 0.7s 0.8s ease-out both;
}

/* "Press Enter To Play": warm white capitals lit from within by an amber glow that breathes
   (swells and settles every 3 s), over a haze and a thin streak of light that breathe with
   it; the words stay fully visible. Enter anywhere on the title (or a click on it) starts */
.press-start {
  position: relative;
  isolation: isolate;
  padding: 0.6em 1.2em;
  border: 0;
  background: none;
  font: 700 1.35rem var(--font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fffaf0;
  text-shadow: 0 0 2px rgba(196, 120, 20, 0.95), 0 0 8px rgba(230, 160, 50, 0.95), 0 0 18px rgba(217, 147, 47, 0.8), 0 0 36px rgba(190, 115, 25, 0.6);
  cursor: pointer;
  animation: glow-breathe 3s ease-in-out infinite;
}

.press-start:hover,
.press-start:focus-visible {
  color: var(--gold);
}

.press-start::before,
.press-start::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* The amber haze behind the words */
.press-start::before {
  width: 130%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(214, 140, 40, 0.75), rgba(190, 115, 25, 0.35) 55%, transparent);
  filter: blur(8px);
  animation: haze-breathe 3s ease-in-out infinite;
}

/* A thin streak of light through the middle, brightest at the centre */
.press-start::after {
  width: 115%;
  height: 3px;
  background: radial-gradient(closest-side, rgba(255, 240, 200, 0.95), rgba(244, 193, 88, 0.5) 50%, transparent);
  filter: blur(1px);
  animation: streak-breathe 3s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% {
    text-shadow: 0 0 2px rgba(196, 120, 20, 0.85), 0 0 6px rgba(230, 160, 50, 0.75), 0 0 14px rgba(217, 147, 47, 0.55), 0 0 26px rgba(190, 115, 25, 0.35);
  }
  50% {
    text-shadow: 0 0 2px rgba(196, 120, 20, 1), 0 0 10px rgba(240, 170, 60, 1), 0 0 24px rgba(217, 147, 47, 0.9), 0 0 46px rgba(190, 115, 25, 0.7);
  }
}

@keyframes haze-breathe {
  0%, 100% { transform: translate(-50%, -50%) scaleX(0.85); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scaleX(1.05); opacity: 1; }
}

@keyframes streak-breathe {
  0%, 100% { transform: translate(-50%, -50%) scaleX(0.9); opacity: 0.55; }
  50% { transform: translate(-50%, -50%) scaleX(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .press-start,
  .press-start::before,
  .press-start::after {
    animation: none;
  }
}

@keyframes logo-in {
  from { opacity: 0; transform: scale(0.9); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Leaving the title: the logo glides up while the camera pushes in on the monster
   (js/main.js, js/titleScene.js), the scene dissolves into the menu's backdrop, then the card,
   the monster, Start Battle and Controls follow, one after another. (.is-quick: no live scene
   or reduced motion, so no push-in to wait for.) */
.has-title-bg .create.is-leaving-title .title-scene {
  opacity: 1;
}

.has-title-bg .create.is-leaving-title::after {
  opacity: 0;
}

.create.is-entering .create-panel {
  animation: fade-up 0.6s 1.5s ease-out both;
}

.create.is-entering .monster-stage {
  animation: fade-up 0.6s 1.65s ease-out both;
}

.create.is-entering .start-row {
  animation: fade-up 0.6s 1.8s ease-out both;
}

.create.is-entering .howto {
  animation: fade-up 0.5s 1.95s ease-out both;
}

.create.is-entering.is-quick .create-panel { animation-delay: 0.35s; }
.create.is-entering.is-quick .monster-stage { animation-delay: 0.5s; }
.create.is-entering.is-quick .start-row { animation-delay: 0.6s; }
.create.is-entering.is-quick .howto { animation-delay: 0.75s; }

/* Going back to the title (Escape): the reverse, the menu leaves last in first out while the
   live scene comes up on the close-up and zooms out (js/main.js backToTitle) */
.create.is-returning .howto { animation: fade-down-out 0.35s ease-in both; }
.create.is-returning .start-row { animation: fade-down-out 0.35s 0.1s ease-in both; }
.create.is-returning .monster-stage { animation: fade-down-out 0.35s 0.2s ease-in both; }
.create.is-returning .create-panel { animation: fade-down-out 0.35s 0.3s ease-in both; }

@keyframes fade-down-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(14px); opacity: 0; }
}

@keyframes fade-up {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* Low-end devices (js/perf.js sets html.is-low-end): the costliest     */
/* effects off, the look kept                                           */
/* ------------------------------------------------------------------ */

/* No live blur of what's behind the card; a slightly more solid fill instead */
.is-low-end .create-panel.ornate::before {
  backdrop-filter: none;
  background: linear-gradient(180deg, rgba(32, 45, 74, 0.86), rgba(17, 24, 44, 0.9));
}

.is-low-end .ai-loading {
  backdrop-filter: none;
}

/* The title's light rays and mist hold still (big blurred layers, repainted as they move) */
.is-low-end .title-rays,
.is-low-end .title-mist {
  animation: none;
}

/* "Press Enter To Play": the glow holds steady (animating text-shadow repaints every frame);
   the haze and the streak behind still breathe (they only move, which is cheap) */
.is-low-end .press-start {
  animation: none;
}

/* The card's soft drop shadow (a filter over the whole card) */
.is-low-end .create-panel.ornate {
  filter: none;
}