:root {
  color-scheme: dark;
  --amber: #f2a23a;
  --amber-dark: #8a4f0f;
  --ink: #fff6e0;
  --muted: #c9b48f;
  --wood: #24180f;
  --wood-edge: #4a3320;
  --outline: #1a0f07;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0705;
  color: var(--ink);
  font-family: var(--pixel);
  line-height: 1.6;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#stage { position: relative; }

/* CRT scanlines over everything */
#stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
}

canvas {
  display: block;
  touch-action: none;
  cursor: none;
}

.layer { position: absolute; }
.hidden { display: none !important; }

#overlay {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 3, 0.8);
}
#overlay.soft { background: rgba(10, 6, 3, 0.5); }
/* leave the top of the field free for the speech bubble */
#overlay.with-speech { align-items: flex-end; padding-bottom: 6%; }

.card {
  text-align: center;
  padding: clamp(10px, 2.5vmin, 24px);
  max-width: 94%;
  max-height: 100%;
  overflow: auto;
}

h1 {
  margin: 0 0 0.4em;
  font-size: clamp(20px, 5vmin, 44px);
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-shadow: 4px 4px 0 #6b3a0c;
}

h2 {
  margin: 0 0 0.6em;
  font-size: clamp(15px, 3.4vmin, 28px);
  font-weight: normal;
  color: var(--amber);
  text-shadow: 3px 3px 0 #6b3a0c;
}

p {
  margin: 0.6em 0;
  color: var(--muted);
  font-size: clamp(9px, 1.7vmin, 13px);
}

.big { color: var(--ink); font-size: clamp(11px, 2.2vmin, 16px); }
.hint { font-size: clamp(7px, 1.3vmin, 10px); opacity: 0.75; }
.credit { margin-top: 1.4em; opacity: 0.5; }

/* chunky pixel buttons: hard outline, bevel, no rounding */
.btn {
  appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0.6em;
  padding: 1em 1.4em;
  font: inherit;
  font-size: clamp(9px, 1.8vmin, 14px);
  color: var(--ink);
  background: #3a2a1c;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.35),
    inset 4px 4px 0 rgba(255, 255, 255, 0.12),
    0 0 0 4px var(--outline);
  cursor: pointer;
}
.btn.primary { color: #3b1f04; background: var(--amber); }
.btn:hover { filter: brightness(1.12); }
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.35), 0 0 0 4px var(--outline);
}

.girls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 3vmin, 28px);
  margin: 1.2em 0;
}

.girl {
  width: clamp(92px, 22vmin, 170px);
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: var(--wood);
  box-shadow: 0 0 0 4px var(--wood-edge), 6px 6px 0 4px var(--outline);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.girl:hover, .girl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--amber), 6px 6px 0 4px var(--outline);
  transform: translateY(-4px);
}

.girl .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  font-size: clamp(22px, 5vmin, 40px);
  color: rgba(255, 255, 255, 0.85);
}
.girl .thumb canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.girl .name { margin-top: 10px; font-size: clamp(9px, 1.8vmin, 13px); }
.girl .best { margin-top: 4px; font-size: clamp(7px, 1.3vmin, 10px); color: var(--muted); }

#pause-btn {
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  font: 12px var(--pixel);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px var(--outline);
  cursor: pointer;
}

/* speech bubble growing out of the picture panel */
.bubble {
  z-index: 3;
  padding: 0.9em 1.1em;
  text-align: left;
  color: var(--outline);
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--outline), 6px 6px 0 4px rgba(0, 0, 0, 0.45);
}
.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  border-style: solid;
}
/* landscape: tail on the left, pointing into the picture */
.bubble::before {
  top: 24px;
  left: -24px;
  border-width: 12px 24px 12px 0;
  border-color: transparent var(--outline) transparent transparent;
}
.bubble::after {
  top: 30px;
  left: -14px;
  border-width: 6px 14px 6px 0;
  border-color: transparent var(--ink) transparent transparent;
}
/* portrait: tail on top, pointing up into the picture */
.portrait .bubble::before {
  top: -24px;
  left: calc(50% - 12px);
  border-width: 0 12px 24px 12px;
  border-color: transparent transparent var(--outline) transparent;
}
.portrait .bubble::after {
  top: -14px;
  left: calc(50% - 6px);
  border-width: 0 6px 14px 6px;
  border-color: transparent transparent var(--ink) transparent;
}
.bubble .who { margin-bottom: 0.6em; font-size: clamp(8px, 1.4vmin, 11px); color: #b0601a; }
.bubble .say { margin: 0; min-height: 3.4em; font-size: clamp(9px, 1.6vmin, 13px); line-height: 1.8; color: var(--outline); }

.bubble.pop { animation: pop 0.24s steps(4) both; transform-origin: 0 36px; }
.portrait .bubble.pop { transform-origin: 50% 0; }
@keyframes pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}