/* ── Start Screen ─────────────────────────────────────────── */

#start-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0a0a;
}

/* Ken Burns bg layers —
   positioned by left/top from JS so translate math stays in screen pixels.
   Width/height match the container; scale is applied after via transform. */
.start-bg-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform, opacity, left, top;
}

/* Dark gradient scrim over the background so text is always readable */
#start-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.start-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22 * var(--scale));
  text-align: center;
  padding: 0 calc(40 * var(--scale));
}

.start-title {
  font-size: calc(52 * var(--scale));
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: calc(5 * var(--scale));
  line-height: 1.15;
  color: #ffe566;
  text-shadow:
    0 0 30px rgba(255,210,0,0.7),
    0 0 60px rgba(255,180,0,0.3),
    2px 3px 0 rgba(0,0,0,0.8);
}

.start-btn {
  font-size: calc(20 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(4 * var(--scale));
  text-transform: uppercase;
  padding: calc(15 * var(--scale)) calc(60 * var(--scale));
  background: #c8a200;
  color: #000;
  border: 2px solid #ffe566;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 0 20px rgba(255,200,0,0.25);
}

.start-btn:hover {
  background: #ffe566;
  border-color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(255,220,0,0.5);
}

.start-btn:active {
  transform: scale(0.98);
}

.start-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 * var(--scale));
  margin-top: calc(18 * var(--scale));
}

.start-btn-secondary {
  font-size: calc(16 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  padding: calc(10 * var(--scale)) calc(30 * var(--scale));
  background: rgba(0,0,0,0.55);
  color: rgba(255,229,102,0.85);
  border: 1px solid rgba(255,229,102,0.4);
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.start-btn-secondary:hover {
  background: rgba(255,229,102,0.15);
  border-color: #ffe566;
  color: #ffe566;
  transform: scale(1.03);
}

.start-btn-secondary:active { transform: scale(0.98); }

/* Top-right row: options | seed | help button */
.start-toprow {
  position: absolute;
  top: calc(12 * var(--scale));
  right: calc(14 * var(--scale));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--scale));
  color: rgba(255,255,255,0.75);
  font-size: calc(15 * var(--scale));
  background: rgba(0,0,0,0.5);
  padding: calc(6 * var(--scale)) calc(10 * var(--scale));
  border-radius: 4px;
}

.start-seed-group {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--scale));
  transition: color 0.2s;
}

.start-seed-group:hover { color: rgba(255,255,255,0.75); }

.start-seed-label {
  white-space: nowrap;
}

.start-seed-group input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: calc(15 * var(--scale));
  width: calc(120 * var(--scale));
  text-align: right;
  outline: none;
  transition: border-color 0.2s, color 0.2s;
}

.start-seed-group input:focus {
  border-bottom-color: rgba(255,255,255,0.7);
  color: #fff;
}

.start-help-btn {
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
  font-size: calc(15 * var(--scale));
  font-weight: bold;
  font-family: inherit;
  padding: calc(3 * var(--scale)) calc(8 * var(--scale));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.start-help-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* Help modal */
.help-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-modal-backdrop[hidden] { display: none; }

.help-modal {
  position: relative;
  background: #0b160b;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  max-width: calc(980 * var(--scale));
  width: 92%;
  max-height: 88%;
  overflow-y: auto;
  padding: calc(44 * var(--scale)) calc(56 * var(--scale));
  box-shadow: 0 12px 60px rgba(0,0,0,0.85);
}

.help-modal-close {
  position: absolute;
  top: calc(14 * var(--scale));
  right: calc(18 * var(--scale));
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: calc(20 * var(--scale));
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.help-modal-close:hover { color: #fff; }

.help-modal-body h1 {
  font-size: calc(32 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  color: #ffe566;
  margin-bottom: calc(6 * var(--scale));
  text-shadow: 0 0 24px rgba(255,210,0,0.4);
}

.help-modal-body .modal-subtitle {
  font-size: calc(26 * var(--scale));
  color: rgba(255,255,255,0.3);
  letter-spacing: calc(1 * var(--scale));
  text-transform: uppercase;
  margin-bottom: calc(28 * var(--scale));
}

.help-modal-body hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: calc(20 * var(--scale)) 0;
}

.help-modal-body h2 {
  font-size: calc(28 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(2 * var(--scale));
  text-transform: uppercase;
  color: rgba(255,220,80,0.55);
  margin-bottom: calc(14 * var(--scale));
}

.help-modal-body p {
  font-family: Arial, 'Georgia', serif;
  font-size: calc(18 * var(--scale));
  color: rgba(255,255,255,0.82);
  line-height: 1.50;
  margin-bottom: calc(13 * var(--scale));
}

.help-modal-body p:last-child {
  margin-bottom: 0;
}

.help-modal-body em {
  font-style: italic;
}

.start-footer {
  position: absolute;
  bottom: calc(8 * var(--scale));
  right: calc(14 * var(--scale));
  z-index: 3;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
}

.start-footer a {
  color: inherit;
  text-decoration: none;
}

.start-footer a:hover {
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
}


/* ── Intro Screen (dossier) ───────────────────────────────── */

#intro-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  user-select: none;
  /* a dark desk under a lamp */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,220,150,0.10) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%),
    repeating-linear-gradient(92deg, rgba(255,255,255,0.015) 0 2px, rgba(0,0,0,0.03) 2px 7px),
    linear-gradient(180deg, #2a2119 0%, #1d1711 100%);
}

.intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--scale));
}

.dossier-paper {
  position: relative;
  width: calc(900 * var(--scale));
  padding: calc(26 * var(--scale)) calc(38 * var(--scale)) calc(28 * var(--scale));
  color: #2b2620;
  transform: rotate(-1.2deg);
  background:
    radial-gradient(circle at 88% 82%, rgba(120,80,30,0) 0 calc(38 * var(--scale)), rgba(120,80,30,0.13) calc(40 * var(--scale)) calc(44 * var(--scale)), rgba(120,80,30,0) calc(47 * var(--scale))),
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #f1e8d2 0%, #e8dcc0 60%, #ddd0b1 100%);
  box-shadow:
    0 calc(18 * var(--scale)) calc(40 * var(--scale)) rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.4),
    inset 0 0 calc(40 * var(--scale)) rgba(120,90,40,0.18);
}

.dossier-head {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--scale));
  padding-bottom: calc(10 * var(--scale));
  border-bottom: 3px double rgba(43,38,32,0.7);
}

.dossier-title {
  font-size: calc(34 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(8 * var(--scale));
  text-transform: uppercase;
}

.dossier-class {
  font-size: calc(15 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  color: #a3241c;
  border: 2px solid #a3241c;
  padding: 0 calc(8 * var(--scale));
  transform: rotate(-3deg);
  opacity: 0.85;
}

.dossier-file {
  margin-left: auto;
  font-size: calc(14 * var(--scale));
  letter-spacing: calc(1 * var(--scale));
  opacity: 0.7;
  white-space: nowrap;
}

.dossier-body {
  display: flex;
  gap: calc(30 * var(--scale));
  padding: calc(20 * var(--scale)) 0 calc(18 * var(--scale));
}

/* Photo slot: mugshot backdrop with height lines; the doll canvas sits on top */
.dossier-photo {
  position: relative;
  flex: 0 0 auto;
  width: calc(230 * var(--scale));
  height: calc(270 * var(--scale));
  border: 2px dashed rgba(43,38,32,0.45);
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}

.dossier-photo.has-photo {
  border: calc(6 * var(--scale)) solid #fbf8f0;
  background: #fbf8f0;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  transform: rotate(var(--photo-tilt, 1.5deg));
}

.dossier-affix {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(15 * var(--scale));
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  color: rgba(43,38,32,0.35);
}

.dossier-photo.has-photo .dossier-affix { display: none; }

.dossier-photo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.dossier-photo.has-photo canvas { opacity: 1; }

.dossier-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.dossier-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dossier-label {
  font-size: calc(12 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  color: rgba(43,38,32,0.55);
  margin-top: calc(12 * var(--scale));
}

.dossier-label:first-child { margin-top: 0; }

.dossier-name {
  font-size: calc(30 * var(--scale));
  font-weight: bold;
  line-height: 1.15;
  color: #1c1814;
  overflow-wrap: anywhere;
}

.dossier-value {
  font-size: calc(17 * var(--scale));
  line-height: 1.3;
}

.dossier-value::first-letter { text-transform: uppercase; }

.dossier-crimes {
  font-size: calc(16 * var(--scale));
  line-height: 1.3;
  padding-left: calc(26 * var(--scale));
}

.dossier-crimes li { margin-top: calc(5 * var(--scale)); }

.dossier-op {
  padding-top: calc(10 * var(--scale));
  border-top: 1px solid rgba(43,38,32,0.4);
}

.dossier-op-name {
  font-size: calc(24 * var(--scale));
  font-weight: bold;
  line-height: 1.2;
  color: #1c1814;
}

.dossier-tagline {
  margin-top: calc(6 * var(--scale));
  font-size: calc(14 * var(--scale));
  font-style: italic;
  line-height: 1.35;
  color: rgba(43,38,32,0.75);
}

.intro-begin-btn {
  font-size: calc(20 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(4 * var(--scale));
  text-transform: uppercase;
  padding: calc(13 * var(--scale)) calc(54 * var(--scale));
  background: #c8a200;
  color: #000;
  border: 2px solid #ffe566;
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(255,200,0,0.25);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.intro-begin-btn[hidden] { visibility: hidden; display: block; }

.intro-begin-btn:hover,
.intro-begin-btn:focus-visible {
  background: #ffe566;
  border-color: #fff;
  transform: scale(1.04);
  box-shadow: 0 0 30px rgba(255,220,0,0.5);
  outline: none;
}

.intro-begin-btn:active { transform: scale(0.98); }


/* ── Lose Screen ──────────────────────────────────────────── */

#lose-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0a0000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--scale));
  overflow: hidden;
}

.lose-noise {
  position: absolute;
  inset: 0;
  background-repeat: repeat, repeat;
  background-size: 200px 200px, 200px 200px;
  pointer-events: none;
  animation: noise-drift 13s linear infinite;
}

@keyframes noise-drift {
  from { background-position: 0 0,        0 0; }
  to   { background-position: 200px 80px, -80px 200px; }
}

.lose-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, #4a0000 100%);
  pointer-events: none;
  animation: vignette-pulse 3s ease-in-out infinite;
}

@keyframes vignette-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}

.lose-title {
  font-size: calc(72 * var(--scale));
  font-weight: bold;
  color: #e0c0c0;
  letter-spacing: calc(6 * var(--scale));
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 1.0s ease forwards;
  animation-delay: 0.8s;
  position: relative;
  z-index: 1;
}

.lose-subtitle {
  font-size: calc(20 * var(--scale));
  color: #a09090;
  max-width: calc(560 * var(--scale));
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  animation: fade-in 1.0s ease forwards;
  animation-delay: 2.0s;
  position: relative;
  z-index: 1;
}

.lose-buttons {
  display: flex;
  gap: calc(28 * var(--scale));
  opacity: 0;
  animation: fade-in 0.8s ease forwards;
  animation-delay: 2.5s;
  position: relative;
  z-index: 1;
}

.lose-btn {
  font-size: calc(18 * var(--scale));
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: calc(14 * var(--scale)) calc(36 * var(--scale));
  background: #1a0a0a;
  color: #c0a0a0;
  border: 1px solid #5a2020;
  border-radius: 3px;
  transition: background 0.15s, border-color 0.15s;
}

.lose-btn:hover {
  background: #2e1010;
  border-color: #a04040;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Cutscene Screen ──────────────────────────────────────── */

#cutscene-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cutscene-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Options modal (js/screens/options.js) ─────────────────────────────── */

.options-backdrop {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}

.options-modal {
  background: #0b160b;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  width: calc(560 * var(--scale));
  max-height: 92%;
  overflow-y: auto;
  padding: calc(26 * var(--scale)) calc(34 * var(--scale));
  box-shadow: 0 12px 60px rgba(0,0,0,0.85);
  color: rgba(255,255,255,0.85);
  font-size: calc(16 * var(--scale));
}

.opt-title {
  font-size: calc(28 * var(--scale));
  font-weight: bold;
  letter-spacing: calc(3 * var(--scale));
  text-transform: uppercase;
  text-align: center;
  color: #ffe566;
  text-shadow: 0 0 24px rgba(255,210,0,0.4);
  margin-bottom: calc(18 * var(--scale));
}

.opt-row {
  display: grid;
  grid-template-columns: calc(150 * var(--scale)) calc(36 * var(--scale)) 1fr calc(52 * var(--scale));
  align-items: center;
  gap: calc(10 * var(--scale));
  padding: calc(6 * var(--scale)) 0;
  transition: opacity 0.15s;
}

.opt-row.is-dim .opt-slider,
.opt-row.is-dim .opt-pct { opacity: 0.35; }

.opt-label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.opt-row-master .opt-label {
  font-weight: bold;
  color: #ffe566;
}

.opt-hint {
  font-size: calc(11 * var(--scale));
  color: rgba(255,255,255,0.38);
  margin-top: calc(2 * var(--scale));
}

.opt-mute {
  width: calc(34 * var(--scale));
  height: calc(30 * var(--scale));
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  font-size: calc(16 * var(--scale));
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.opt-mute:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); }
.opt-mute:active { transform: scale(0.92); }
.opt-mute.is-muted { background: rgba(255,80,60,0.22); border-color: rgba(255,100,80,0.5); }

.opt-pct {
  text-align: right;
  font-size: calc(14 * var(--scale));
  color: rgba(255,255,255,0.6);
}

/* Range slider: yellow fill up to the thumb via --fill (set inline by options.js) */
.opt-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(6 * var(--scale));
  min-height: 4px;
  border-radius: 3px;
  background: linear-gradient(to right, #ffe566 var(--fill, 100%), rgba(255,255,255,0.15) var(--fill, 100%));
  outline: none;
  cursor: pointer;
}

.opt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(16 * var(--scale));
  height: calc(16 * var(--scale));
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffe566;
  box-shadow: 0 0 8px rgba(255,210,0,0.5);
}

.opt-slider::-moz-range-thumb {
  width: calc(16 * var(--scale));
  height: calc(16 * var(--scale));
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffe566;
  box-shadow: 0 0 8px rgba(255,210,0,0.5);
}

.opt-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255,229,102,0.45); }

.opt-divider {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: calc(12 * var(--scale)) 0;
}

.opt-check {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--scale));
  cursor: pointer;
  user-select: none;
}

.opt-check input[type="checkbox"] {
  accent-color: #ffe566;
  width: calc(16 * var(--scale));
  height: calc(16 * var(--scale));
  cursor: pointer;
}

.opt-btns {
  display: flex;
  justify-content: center;
  gap: calc(14 * var(--scale));
}

.opt-btns[hidden], .opt-confirm[hidden] { display: none; }

.opt-btn {
  padding: calc(8 * var(--scale)) calc(22 * var(--scale));
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-size: calc(16 * var(--scale));
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.opt-btn:hover { background: rgba(255,229,102,0.18); border-color: rgba(255,229,102,0.6); }
.opt-btn-exit:hover { background: rgba(255,60,60,0.3); border-color: rgba(255,80,80,0.5); }
.opt-btn:active { transform: scale(0.97); }

.opt-confirm { text-align: center; }
.opt-confirm p { margin: 0 0 calc(14 * var(--scale)); }
.opt-confirm small { font-size: calc(13 * var(--scale)); opacity: 0.6; }

/* ── Trophy Room ──────────────────────────────────────────── */

#trophy-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  color: #e8e2cf;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,229,102,0.06) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, #17181b 0%, #0d0d0f 100%);
}

.trophy-header {
  width: calc(900 * var(--scale));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(28 * var(--scale)) 0 calc(10 * var(--scale));
}

.trophy-header #trophy-back { justify-self: start; }

.trophy-title {
  font-size: calc(36 * var(--scale));
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: calc(5 * var(--scale));
  color: #ffe566;
  text-shadow: 0 0 24px rgba(255,210,0,0.45), 2px 3px 0 rgba(0,0,0,0.8);
}

.trophy-backup {
  justify-self: end;
  display: flex;
  gap: calc(10 * var(--scale));
}

#trophy-screen .start-btn-secondary {
  font-size: calc(13 * var(--scale));
  padding: calc(8 * var(--scale)) calc(16 * var(--scale));
  cursor: pointer;
}

#trophy-screen .start-btn-secondary:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,229,102,0.4);
  color: rgba(255,229,102,0.85);
}

.trophy-note {
  min-height: calc(20 * var(--scale));
  font-size: calc(13 * var(--scale));
  color: rgba(232,226,207,0.7);
  margin-bottom: calc(6 * var(--scale));
}

.trophy-note.error { color: #e2706a; }

.trophy-list {
  flex: 1;
  min-height: 0;
  width: calc(900 * var(--scale));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--scale));
  padding: 0 calc(10 * var(--scale)) calc(30 * var(--scale)) 0;
  scrollbar-color: rgba(255,229,102,0.35) transparent;
}

.trophy-empty {
  margin-top: calc(120 * var(--scale));
  text-align: center;
  font-size: calc(20 * var(--scale));
  color: rgba(232,226,207,0.55);
}

.trophy-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--scale));
  padding: calc(12 * var(--scale)) calc(20 * var(--scale)) calc(12 * var(--scale)) calc(12 * var(--scale));
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,229,102,0.18);
  border-radius: 3px;
}

/* Portrait (sepia, laid on its side) with a black mourning ribbon across the top-left corner */
.trophy-portrait {
  position: relative;
  flex: none;
  width: calc(124 * var(--scale));
  height: calc(124 * var(--scale));
  overflow: hidden;
  border: 2px solid #2a2a2a;
  background: linear-gradient(160deg, #a8946f 0%, #6b5a40 100%);
}

/* Sepia, like an old photo on a memorial */
.trophy-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: sepia(0.85) contrast(1.05);
}

.trophy-portrait::after {
  content: '';
  position: absolute;
  top: calc(18 * var(--scale));
  left: calc(-32 * var(--scale));
  width: calc(124 * var(--scale));
  height: calc(16 * var(--scale));
  background: #0b0b0b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transform: rotate(-45deg);
}

.trophy-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--scale));
}

.trophy-name {
  font-size: calc(22 * var(--scale));
  font-weight: bold;
  color: #f2ecd8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trophy-meta {
  font-size: calc(15 * var(--scale));
  color: rgba(232,226,207,0.85);
}

.trophy-label {
  font-size: calc(12 * var(--scale));
  text-transform: uppercase;
  letter-spacing: calc(2 * var(--scale));
  color: rgba(255,229,102,0.6);
}

.trophy-time { margin-right: calc(28 * var(--scale)); }

/* ── Flashback overlay (js/flashback.js) ──────────────────── */
/* On <body>, centered over #app like #app itself, above mineBlast's canvas (9999). */

#flashback-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--app-width);
  height: var(--app-height);
  pointer-events: none;
  z-index: 10000;
  animation: fb-fade-in 1.2s ease-out;
}

#flashback-overlay > div {
  position: absolute;
  inset: 0;
}

/* Soft blur toward the edges; the middle stays sharp */
.fb-blur {
  backdrop-filter: blur(calc(2.5 * var(--scale)));
  -webkit-backdrop-filter: blur(calc(2.5 * var(--scale)));
  mask-image: radial-gradient(ellipse 72% 72% at center, transparent 66%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at center, transparent 66%, #000 100%);
}

.fb-vignette {
  background: radial-gradient(ellipse 80% 80% at center, transparent 48%, rgba(0, 0, 0, 0.62) 100%);
}

.fb-grain {
  background-repeat: repeat;
  opacity: 0.6;
}

@keyframes fb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}