@font-face {
  font-family:Determination;
  src:url('assets/flowey/fonts/determination-ui.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --bg:#000;
  --white:#fff;
  --muted:#8b8987;
  --line:#30302e;
  --yellow:#f6ed80;
  --red:#f13c45;
  --flame:#f00;
  font-family:Determination,'Courier New',monospace;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  min-width:320px;
  overflow:hidden;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button:disabled {
  cursor:wait;
  opacity:.45;
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--yellow);
  outline-offset:5px;
}

button {
  border-radius:0;
}

button[hidden],[hidden] {
  display:none!important;
}

a {
  color:inherit;
  text-decoration:none;
}

.menu {
  --menu-scale:1;
  position:fixed;
  left:50%;
  top:50%;
  width:320px;
  height:240px;
  transform:translate(-50%,-50%) scale(var(--menu-scale));
  transform-origin:center;
  animation:menu-arrive .35s ease both;
  transition:opacity .18s ease;
}

/* --- logo: a stepped one-pixel bob keeps the pixel art crisp --------------- */

.menu-logo {
  position:absolute;
  left:39px;
  top:28px;
  margin:0;
  width:243px;
  height:103px;
  animation:logo-bob 1.8s steps(1,end) infinite;
  will-change:transform;
}

.menu-logo img {
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}

@keyframes logo-bob {
  0%,100% { transform:translateY(0); }
  16.66% { transform:translateY(-1px); }
  33.33% { transform:translateY(-2px); }
  50% { transform:translateY(-2px); }
  66.66% { transform:translateY(-1px); }
  83.33% { transform:translateY(0); }
}

/* --- blocky fire behind the NIGHTMARE row --------------------------------- */

.menu-fire {
  position:absolute;
  left:20px;
  top:172px;
  width:280px;
  height:48px;
  image-rendering:pixelated;
  pointer-events:none;
  z-index:1;
  transform:translateZ(0);
}

.modes {
  position:absolute;
  left:84px;
  top:133px;
  width:200px;
  height:96px;
  z-index:2;
}

/* Rows stay on a fixed 16px grid; only the label magnifies, so the pointer
   never fights a moving hit area. */
.mode {
  position:absolute;
  left:0;
  top:calc(var(--row,0) * 16px);
  height:16px;
  width:180px;
  margin:0;
  padding:0 8px 0 12px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:12px;
  line-height:16px;
  z-index:var(--row-z,2);
}

.mode:disabled {
  opacity:1;
}

/* The moving SOUL is the keyboard focus indicator for these menu items. */
.mode:focus-visible,
.option:focus-visible {
  outline:none;
}

.mode-label {
  display:inline-block;
  transform:scale(var(--dock,1));
  transform-origin:left center;
}

.mode.nightmare {
  color:var(--flame);
}

.mode.nightmare .mode-label {
  text-shadow:
    1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,
    1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
}

.menu-cursor {
  position:absolute;
  left:0;
  top:3px;
  width:9px;
  height:9px;
  image-rendering:pixelated;
  pointer-events:none;
  transition:transform .13s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  z-index:6;
}

.menu-extra {
  position:absolute;
  left:24px;
  top:229px;
  width:272px;
  height:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  font-size:8px;
  line-height:9px;
  color:var(--muted);
}

.menu-extra p {
  margin:0;
}

.menu-extra .quiet-button {
  padding:0 4px;
  font-size:9px;
  line-height:11px;
  letter-spacing:0;
}

.menu.leaving {
  animation:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(var(--menu-scale));
}

@keyframes menu-arrive {
  from { opacity:0; }
  to { opacity:1; }
}

@media(min-width:640px) and (min-height:480px) {
  .menu { --menu-scale:2; }
}

@media(min-width:960px) and (min-height:720px) {
  .menu { --menu-scale:3; }
}

.shell {
  min-height:100svh;
  display:grid;
  place-items:center;
}

.quiet-button {
  background:transparent;
  border:0;
  padding:10px 0;
  color:var(--muted);
  font-size:13px;
  letter-spacing:1px;
}

.quiet-button:hover { color:var(--white); }

.soul {
  display:inline-block;
  background:url('assets/ui/mainmenusoul.png') center / contain no-repeat;
  image-rendering:pixelated;
}

/* --- SETTINGS and KEY BINDINGS -------------------------------------------- */

.screen-title {
  position:absolute;
  top:44px;
  width:100%;
  margin:0;
  font-size:20px;
  font-weight:400;
  text-align:center;
}

.rows {
  position:absolute;
  left:48px;
  top:88px;
  width:224px;
  height:80px;
}

.rows-keys { top:70px; height:144px; }

.option {
  position:absolute;
  left:0;
  top:calc(var(--row,0) * 16px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:224px;
  height:16px;
  margin:0;
  padding:0 4px 0 12px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:12px;
  line-height:16px;
  z-index:var(--row-z,2);
}

.option-value {
  color:var(--white);
  font-size:11px;
  white-space:nowrap;
}

.option[data-setting="back"] .option-value,
.option[data-action="back"] .option-value,
.option[data-action="reset"] .option-value {
  color:var(--muted);
}

.screen-hint {
  position:absolute;
  left:16px;
  top:228px;
  width:288px;
  margin:0;
  text-align:center;
  font-size:8px;
  line-height:9px;
  color:var(--muted);
}

.rows-keys ~ .screen-hint { top:228px; }

.screen-note {
  position:absolute;
  left:16px;
  top:218px;
  width:288px;
  margin:0;
  text-align:center;
  font-size:8px;
  line-height:9px;
  color:var(--yellow);
}

.rows-keys ~ .screen-note { top:218px; }

/* A row caught mid-rebind flashes like a text cursor. */
.option.listening .option-value {
  color:var(--red);
  animation:blink .6s steps(1,end) infinite;
}

.option.denied .option-value {
  color:var(--red);
  animation:deny .18s steps(2,end) 3;
}

@keyframes blink {
  0%,50% { opacity:1; }
  50.01%,100% { opacity:0; }
}

@keyframes deny {
  0% { transform:translateX(-1px); }
  50% { transform:translateX(1px); }
  100% { transform:translateX(0); }
}

.credits-screen { text-align:center; }

.credits-screen h2 {
  position:absolute;
  top:48px;
  width:100%;
  margin:0;
  font-size:20px;
  font-weight:400;
}

.credits-project {
  position:absolute;
  top:91px;
  width:100%;
  margin:0;
  font-size:10px;
  color:var(--muted);
}

.credits-name {
  position:absolute;
  top:108px;
  width:100%;
  margin:0;
  font-size:18px;
}

.credits-original {
  position:absolute;
  top:149px;
  width:100%;
  margin:0;
  font-size:9px;
  line-height:15px;
  color:var(--muted);
}

.credits-original span { color:var(--white); font-size:12px; }

.credits-back {
  position:absolute;
  top:196px;
  left:132px;
  width:60px;
  min-width:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:4px;
}

.credits-back img { image-rendering:pixelated; }

.play-screen {
  width:min(100vw,calc(100svh * 4 / 3));
  animation:menu-arrive .25s ease both;
}

#stage { position:relative; background:#000; container-type:inline-size; }

canvas#game {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  image-rendering:pixelated;
  outline:none;
}

/* --- result screen --------------------------------------------------------
   The death sequence already paints the build's own GAME OVER art on the
   canvas, so the overlay stays transparent there and only adds the pixel-grid
   options at the bottom. Victory fades to black, so that variant paints its
   own panel with the six rescued SOULs. */

.result {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}

.result-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  pointer-events:none;
}

/* The death sequence scrolls its laugh text up the canvas, so the options sit
   in a solid black band (the build's own letterbox look) that keeps them
   legible without covering the GAME OVER art above. */
.result[data-won="false"] .result-inner {
  gap:calc(0.5cqw);
  padding:2.2cqw 0 2.6cqw;
  background:#000;
}

.result[data-won="true"] {
  align-items:center;
  background:#000;
  pointer-events:auto;
}

.result[data-won="true"] .result-inner {
  justify-content:center;
  gap:1.6cqw;
  pointer-events:auto;
}

.result-art { display:none; }

.result-souls {
  display:flex;
  gap:1.2cqw;
  margin-bottom:0.4cqw;
}

.result-souls img {
  width:4cqw;
  height:4cqw;
  image-rendering:pixelated;
  animation:soul-bob 2.4s steps(1,end) infinite;
}

.result-souls img:nth-child(2n) { animation-delay:.3s; }
.result-souls img:nth-child(3n) { animation-delay:.6s; }

@keyframes soul-bob {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-0.5cqw); }
}

.result-eyebrow,
.result-body,
.result-hint {
  margin:0;
  text-align:center;
  font-family:Determination,'Courier New',monospace;
  color:var(--white);
}

.result-eyebrow {
  font-size:calc(2.2cqw);
  line-height:1;
  letter-spacing:0.2cqw;
}

.result[data-won="true"] .result-eyebrow {
  font-size:calc(4cqw);
  letter-spacing:0.4cqw;
}

.result-body {
  font-size:calc(1.7cqw);
  line-height:1.25;
  color:var(--muted);
}

.result[data-won="true"] .result-body { font-size:calc(2cqw); color:var(--white); }

.result-hint {
  font-size:calc(1.3cqw);
  color:var(--muted);
}

/* Options reuse the title screen's row styling and SOUL cursor. */
.result-options {
  position:relative;
  width:calc(30cqw);
  height:calc(5.6cqw);
  pointer-events:none;
}

.result[data-won="false"] .result-options {
  width:calc(34cqw);
  height:calc(5.6cqw);
}

.result-option {
  position:absolute;
  left:0;
  top:calc(var(--row,0) * 2.8cqw);
  width:100%;
  height:calc(2.8cqw);
  display:flex;
  align-items:center;
  padding:0 0 0 3.4cqw;
  border:0;
  background:transparent;
  color:var(--white);
  text-align:left;
  font-size:calc(2cqw);
  line-height:1;
  pointer-events:auto;
  white-space:nowrap;
}

.result-option .mode-label {
  transform:scale(var(--dock,1));
  transform-origin:left center;
}

.result-option:focus-visible { outline:none; }

.result-options .menu-cursor {
  left:0;
  top:calc(0.9cqw);
  width:2.6cqw;
  height:2.6cqw;
  transition:transform .13s cubic-bezier(.2,.8,.2,1);
}

body.reduce-motion .result-souls img { animation:none; }
body.reduce-motion .result-options .menu-cursor { transition:none; }

/* SETTINGS > REDUCE MOTION: stop the decorative motion the menus own. */
body.reduce-motion .menu-logo { animation:none; }
body.reduce-motion .menu-cursor { transition:none; }
body.reduce-motion .menu,
body.reduce-motion .play-screen { animation:none; }
body.reduce-motion .menu.leaving { transition:opacity .08s linear; }
body.reduce-motion .option.listening .option-value { animation:none; opacity:1; }

/* AUTO follows the OS preference; an explicit OFF opts out of it. */
@media(prefers-reduced-motion:reduce) {
  body:not([data-motion="off"]) *,
  body:not([data-motion="off"]) *::before,
  body:not([data-motion="off"]) *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}