:root {
  --bg-black: #050505;
  --bg-panel: rgba(14, 10, 10, 0.94);
  --blood-red: #9e1316;
  --blood-bright: #df292d;
  --lamp-yellow: #d9a441;
  --lamp-dim: #7c5c22;
  --text-main: #f3ede2;
  --text-muted: #aca191;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
  color: var(--text-main);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== BINGKAI LANDSCAPE 16:9 / 20:9 ==================== */
.app-frame {
  position: relative;
  width: 100dvw;
  height: 100dvh;
  background: var(--bg-black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
}

@media (min-width: 960px) and (min-height: 600px) {
  .app-frame {
    width: min(100dvw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100dvw * 9 / 16));
    border: 2px solid #261414;
    border-radius: 10px;
    box-shadow: 0 0 60px rgba(158, 19, 22, 0.35), 0 0 15px rgba(0, 0, 0, 0.9);
  }
}

/* ==================== PORTRAIT WARNING OVERLAY ==================== */
.portrait-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at center, #1c0708 0%, #050505 80%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

@media (orientation: portrait) {
  .portrait-overlay {
    display: flex;
  }
}

.portrait-card {
  max-width: 360px;
  background: rgba(15, 8, 8, 0.96);
  border: 1px solid var(--blood-red);
  border-radius: 12px;
  padding: 24px 18px;
  box-shadow: 0 0 30px rgba(158, 19, 22, 0.5);
}

.rotate-icon {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--lamp-yellow);
  margin-bottom: 12px;
  display: inline-block;
  padding: 6px 12px;
  border: 1px dashed var(--lamp-yellow);
  border-radius: 6px;
}

.portrait-card h2 {
  color: var(--lamp-yellow);
  font-size: 1.15rem;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.portrait-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 16px;
}

/* ==================== EFEK HOROR LAPIS ATAS ==================== */
.fx-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 60;
  opacity: 0.06;
  background-image: radial-gradient(#fff 1px, transparent 1px), radial-gradient(#ff0000 1px, #000 1px);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}

.fx-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 61;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.85) 100%);
  transition: all 0.5s ease;
}

.fx-vignette.heavy {
  background: radial-gradient(ellipse at center, transparent 22%, rgba(10, 0, 0, 0.95) 92%);
}

.fx-flicker {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 62;
  background: #000;
  opacity: 0;
}

.fx-flicker.flicker-once {
  animation: animFlickerOnce 0.65s ease;
}
.fx-flicker.flicker-slow {
  animation: animFlickerSlow 4s infinite;
}
.fx-flicker.flicker-fast {
  animation: animFlickerFast 0.45s infinite;
}
.fx-flicker.blackout {
  opacity: 0.9;
}

@keyframes animFlickerOnce {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.78; }
  45% { opacity: 0.1; }
  65% { opacity: 0.85; }
}
@keyframes animFlickerSlow {
  0%, 92%, 100% { opacity: 0; }
  94% { opacity: 0.5; }
  96% { opacity: 0.1; }
  98% { opacity: 0.65; }
}
@keyframes animFlickerFast {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.8; }
}

.fx-red-pulse {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 63;
  background: radial-gradient(circle, transparent 35%, rgba(200, 10, 15, 0.68) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fx-red-pulse.danger {
  animation: redDangerPulse 0.55s infinite alternate;
}

@keyframes redDangerPulse {
  from { opacity: 0.2; }
  to { opacity: 0.9; }
}

.shake-light {
  animation: shakeLight 0.4s ease;
}
.shake-heavy {
  animation: shakeHeavy 0.55s ease;
}
.shake-extreme {
  animation: shakeExtreme 0.85s infinite;
}

@keyframes shakeLight {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, 3px); }
  75% { transform: translate(5px, -3px); }
}
@keyframes shakeHeavy {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-11px, 6px); }
  40% { transform: translate(11px, -8px); }
  60% { transform: translate(-9px, -4px); }
  80% { transform: translate(9px, 6px); }
}
@keyframes shakeExtreme {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-14px, 8px) rotate(-1.5deg); }
  50% { transform: translate(14px, -10px) rotate(1.5deg); }
  75% { transform: translate(-10px, -6px) rotate(-1deg); }
}

.fx-jumpscare {
  position: absolute;
  inset: 0;
  z-index: 85;
  background: radial-gradient(circle, rgba(95, 0, 0, 0.95) 0%, #000 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shakeExtreme 0.2s infinite;
}

.monster-face {
  text-align: center;
  transform: scale(1.25);
}

.monster-eyes {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin-bottom: 18px;
}

.monster-eyes span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ff1a1a;
  box-shadow: 0 0 25px #ff0000, 0 0 50px #ffaa00;
}

.monster-mouth {
  width: 160px;
  height: 64px;
  border: 6px dashed #e0cbb0;
  background: #2b0000;
  border-radius: 20px;
  margin: 0 auto 12px;
}

.monster-sub {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--lamp-yellow);
  letter-spacing: 3px;
}

/* Banner Reconnect */
.reconnect-banner {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: rgba(158, 19, 22, 0.95);
  border: 1px solid var(--lamp-yellow);
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

/* ==================== TOP HUD ==================== */
.top-hud {
  position: relative;
  z-index: 50;
  min-height: 44px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.65));
  border-bottom: 1px solid rgba(158, 19, 22, 0.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-size: 0.78rem;
  gap: 6px;
  flex-wrap: nowrap;
}

.hud-left, .hud-center, .hud-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-badge {
  background: var(--blood-red);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-room {
  background: rgba(217, 164, 65, 0.15);
  border: 1px solid var(--lamp-yellow);
  color: var(--lamp-yellow);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.player-pill {
  background: rgba(255, 255, 255, 0.07);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.hud-btn {
  min-height: 34px;
  padding: 4px 10px;
  background: rgba(25, 15, 15, 0.92);
  color: var(--text-main);
  border: 1px solid #4e2c2c;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.hud-btn:hover, .hud-btn:active {
  border-color: var(--lamp-yellow);
  color: var(--lamp-yellow);
}

.hud-btn-skip {
  background: rgba(158, 19, 22, 0.85);
  border-color: var(--lamp-yellow);
  color: #fff;
}

.hud-btn-warn {
  background: #7c4d12;
  border-color: #ffd269;
  color: #fff;
}

/* ==================== SCREENS ==================== */
.screen {
  position: relative;
  z-index: 20;
  flex: 1;
  display: none;
  width: 100%;
  height: calc(100% - 44px);
  overflow: hidden;
}

.screen.active {
  display: flex;
}

.hidden {
  display: none !important;
}

/* ==================== HOME & LOBBY ==================== */
.home-container, .lobby-container, .ending-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: radial-gradient(circle at 50% 30%, rgba(124, 92, 34, 0.18), rgba(5, 5, 5, 0.98) 75%);
  overflow-y: auto;
}

.title-block {
  text-align: center;
  margin-bottom: 10px;
}

.subtitle-tag {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--lamp-yellow);
  margin-bottom: 2px;
}

.game-title {
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--blood-bright);
  text-shadow: 0 0 18px rgba(223, 41, 45, 0.65), 0 2px 4px #000;
  letter-spacing: 2px;
}

.flavor-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

.home-card {
  width: min(680px, 94%);
  background: var(--bg-panel);
  border: 1px solid #381919;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
}

.form-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group label {
  font-size: 0.88rem;
  color: var(--lamp-yellow);
  white-space: nowrap;
  font-weight: 600;
}

input[type="text"] {
  width: 100%;
  min-height: 44px;
  background: #0b0707;
  border: 1px solid #4a2c2c;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 0.95rem;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--lamp-yellow);
}

.home-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
}

.action-col {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.action-col h3 {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.divider-vertical {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: bold;
}

.join-row {
  display: flex;
  gap: 8px;
}

.input-code {
  width: 96px !important;
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
  letter-spacing: 2px;
}

.btn-horror {
  min-height: 48px;
  padding: 10px 16px;
  background: #241111;
  color: var(--text-main);
  border: 1px solid var(--blood-red);
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-horror:hover:not(:disabled) {
  background: var(--blood-red);
  color: #fff;
}

.btn-horror:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #8a0f12, #4d0709);
  border-color: var(--blood-bright);
}

.btn-secondary {
  border-color: var(--lamp-dim);
  color: var(--lamp-yellow);
}

.error-msg {
  color: #ff6b6b;
  font-size: 0.82rem;
  margin-top: 8px;
  min-height: 18px;
  text-align: center;
}

.room-code-display {
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--lamp-yellow);
  background: #0d0905;
  border: 2px dashed var(--lamp-yellow);
  padding: 6px 24px;
  border-radius: 8px;
  margin: 6px 0 10px;
}

.players-grid {
  display: flex;
  gap: 16px;
  width: min(560px, 92%);
  margin-bottom: 12px;
}

.player-slot {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid #3a2020;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.role-badge {
  font-size: 0.7rem;
  color: var(--lamp-yellow);
}

.ready-dot {
  font-size: 0.78rem;
}
.ready-dot.online { color: #5cd679; }
.ready-dot.waiting { color: #d9a441; }

.lobby-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==================== GAMEPLAY 3D & HUD OBJEKTIF ==================== */
#screen-game {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}

#screen-game.active {
  display: flex;
}

.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.webgl-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.webgl-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Banner Objektif Serempak di Kiri Atas Panggung */
.objective-banner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 28;
  width: min(600px, 76%);
  background: rgba(10, 6, 6, 0.88);
  border: 1px solid var(--lamp-yellow);
  border-radius: 8px;
  padding: 7px 12px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.objective-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--lamp-yellow);
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.objective-status {
  font-size: clamp(0.78rem, 1.8vw, 0.9rem);
  color: #fff;
  line-height: 1.35;
}

.waiting-partner-row {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dashed rgba(217, 164, 65, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #80f59b;
}

.btn-mini-skip {
  padding: 3px 10px;
  background: var(--blood-red);
  color: #fff;
  border: 1px solid var(--lamp-yellow);
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

/* Prompt Objek Interaktif Saat Pemain Dekat */
.nearby-prompt {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 29;
  background: rgba(18, 42, 22, 0.92);
  border: 2px solid #55ff77;
  color: #eaffef;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  box-shadow: 0 0 20px rgba(85, 255, 119, 0.45);
  pointer-events: none;
}

/* Modal Pilihan Dialog A/B */
.interactive-modal {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 35;
  width: min(520px, 70%);
  background: rgba(12, 7, 7, 0.96);
  border: 2px solid var(--lamp-yellow);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.95);
  text-align: center;
}

.interactive-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--lamp-yellow);
  margin-bottom: 8px;
}

.interactive-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.interactive-feedback {
  margin-top: 6px;
  font-size: 0.8rem;
  color: #f3c663;
}

.choice-btn {
  min-height: 48px;
  padding: 8px 14px;
  background: #221111;
  color: #fff;
  border: 1px solid var(--lamp-yellow);
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.choice-btn:hover {
  background: var(--blood-red);
}

/* ==================== VIRTUAL ANALOG JOYSTICK 360° (KIRI BAWAH) ==================== */
.controls-left {
  position: absolute;
  left: calc(14px + var(--safe-left));
  bottom: calc(36% + 8px);
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.joystick-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  touch-action: none;
}

.joystick-base {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.16) 0%, rgba(12, 8, 8, 0.78) 80%);
  border: 2px solid rgba(217, 164, 65, 0.55);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75);
}

.joystick-knob {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e5b352, #8c5c16);
  border: 2px solid #fff2cc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
  transform: translate(0px, 0px);
  pointer-events: none;
}

.joystick-hint {
  font-size: 0.66rem;
  color: var(--lamp-yellow);
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* ==================== TOMBOL KANAN (MINIMAL 56PX, NYAMAN DUA JEMPOL) ==================== */
.controls-right {
  position: absolute;
  right: calc(14px + var(--safe-right));
  bottom: calc(36% + 8px);
  z-index: 36;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctrl-btn {
  min-width: 74px;
  min-height: 56px;
  background: rgba(20, 12, 12, 0.88);
  color: var(--text-main);
  border: 2px solid rgba(217, 164, 65, 0.55);
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8);
  touch-action: manipulation;
}

.ctrl-btn:active {
  transform: scale(0.94);
}

.action-main {
  background: linear-gradient(135deg, rgba(168, 20, 24, 0.94), rgba(95, 10, 12, 0.94));
  border-color: #ff6666;
  color: #fff;
}

.action-main.highlight-ready {
  border-color: #55ff77;
  box-shadow: 0 0 18px rgba(85, 255, 119, 0.65);
}

.action-sub {
  background: rgba(28, 22, 14, 0.9);
  border-color: var(--lamp-yellow);
}

.action-skip {
  background: rgba(45, 25, 25, 0.9);
  border-color: #b58c50;
}

/* ==================== KOTAK DIALOG ANTI-TERPOTONG (AUTO HEIGHT, MAKS 38% LAYAR) ==================== */
.dialog-box {
  position: relative;
  z-index: 40;
  width: 100%;
  height: auto;
  min-height: 112px;
  max-height: 38dvh;
  background: linear-gradient(to bottom, rgba(14, 9, 9, 0.96), rgba(5, 3, 3, 0.99));
  border-top: 2px solid var(--blood-red);
  padding: 10px 18px calc(10px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dialog-speaker {
  font-weight: 800;
  font-size: clamp(0.86rem, 2vw, 1rem);
  color: var(--lamp-yellow);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.dialog-type-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.dialog-page-indicator {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(217, 164, 65, 0.2);
  color: var(--lamp-yellow);
}

.dialog-timer {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--lamp-yellow);
  font-family: monospace;
}

/* Teks dialog wrap penuh, tidak terpotong baris pertama, cadangan overflow-y:auto */
.dialog-text {
  width: 100%;
  min-height: 2.8em;
  max-height: 18dvh;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: clamp(0.92rem, 2.15vw, 1.14rem);
  line-height: 1.52;
  color: var(--text-main);
  padding: 4px 2px;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: fadeInText 0.18s ease-out;
}

@keyframes fadeInText {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.sync-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dialog-footer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-scene-skip {
  min-height: 44px;
  padding: 6px 12px;
  background: #6b4310;
  color: #fff;
  border: 1px solid #ffd269;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.btn-next {
  min-height: 44px;
  min-width: 118px;
  padding: 6px 16px;
  background: var(--blood-red);
  color: #fff;
  border: 1px solid var(--lamp-yellow);
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-next:hover {
  background: var(--blood-bright);
}

/* Ending Screen */
.ending-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--blood-bright);
  letter-spacing: 8px;
  margin: 6px 0 12px;
  text-shadow: 0 0 25px var(--blood-red);
}

.ending-quote {
  max-width: 520px;
  text-align: center;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 16px;
}

.ending-stats {
  font-size: 0.88rem;
  color: var(--lamp-yellow);
  margin-bottom: 18px;
}