/* ─── CSS Variables ─────────────────────────────────────────────── */
:root {
  --bg:            #0A0908;
  --bg-card:       #131110;
  --bg-card-alt:   #171412;
  --bg-input:      #0F0E0C;
  --bg-btn:        #161412;
  --bg-btn-hover:  #1E1A17;

  --gold:          #D4A017;
  --gold-dim:      #A07810;

  --accent-health: #CC3333;
  --accent-money:  #7A7A7A;
  --accent-nerve:  #C05A80;
  --accent-connct: #C08010;

  --danger:        #E03030;
  --success:       #4FAE63;
  --success-bright:#75DA82;
  --danger-warm:   #E05A30;
  --danger-bright: #FF3636;
  --loss-burgundy: #7A1D2B;

  --win-bg:        #1E3D1E;
  --win-border:    #2D6B2D;
  --lose-bg:       #3D1E1E;
  --lose-border:   #7B2E2E;

  --text-primary:  #E8E0D0;
  --text-secondary:#8A8278;
  --text-gold:     #D4A017;
  --text-danger:   #E03030;
  --text-dim:      #5A544C;

  --dot-active:    #D4801A;
  --dot-inactive:  #2A2622;

  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;

  --gap:           8px;
  --pad:           12px;
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(30, 18, 12, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #0C0B0A 0%, var(--bg) 45%, #070605 100%),
    var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  touch-action: manipulation;
  overflow: hidden;
  overflow-x: hidden;
}

/* Hide scrollbar but keep scroll functionality */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ─── App Container ─────────────────────────────────────────────── */
#app {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--pad) var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
  padding-top: calc(var(--pad) + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: hidden;
  overflow-x: hidden;
  touch-action: manipulation;
}

/* ─── Start Screen ──────────────────────────────────────────────── */
.start-screen {
  min-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
}

.start-card {
  width: 100%;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(212, 160, 23, 0.12) 0%, transparent 54%),
    linear-gradient(180deg, rgba(23, 20, 18, 0.98) 0%, rgba(13, 12, 10, 0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 22px 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 40px rgba(0,0,0,0.42);
}

.start-card__eyebrow {
  margin-bottom: 6px;
  color: var(--text-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
}

.start-card__title {
  color: var(--text-primary);
  font-size: 28px;
  line-height: 1.1;
  text-align: center;
}

.start-card__text {
  max-width: 360px;
  margin: 10px auto 18px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.profession-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profession-btn {
  width: 100%;
  min-height: 74px;
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: var(--radius-md);
  padding: 12px;
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(212, 160, 23, 0.16) 0%, transparent 50%),
    linear-gradient(180deg, rgba(30, 26, 22, 0.96) 0%, rgba(12, 11, 10, 0.98) 100%);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -18px 28px rgba(0,0,0,0.26),
    0 4px 14px rgba(0,0,0,0.30);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.profession-btn:active {
  transform: scale(0.99);
  background:
    radial-gradient(110% 130% at 0% 0%, rgba(212, 160, 23, 0.20) 0%, transparent 50%),
    linear-gradient(180deg, rgba(35, 30, 25, 0.98) 0%, rgba(15, 13, 11, 0.98) 100%);
}

.profession-btn:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.profession-loading {
  margin-top: 14px;
  color: rgba(232, 224, 208, 0.62);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.profession-loading__bar {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.44),
    0 0 0 1px rgba(212, 160, 23, 0.10);
}

.profession-loading__bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(160, 120, 16, 0.35), rgba(212, 160, 23, 0.92), rgba(245, 210, 92, 0.72));
  animation: profession-loading-slide 0.95s ease-in-out infinite;
}

.profession-loading__text {
  margin-top: 7px;
}

.profession-btn--single {
  min-height: 54px;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
}

.profession-btn__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.profession-btn__stats {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

/* ─── Header ────────────────────────────────────────────────────── */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  flex-shrink: 0;
}

.header__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  text-align: center;
}

/* ─── Stats Row ─────────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex-shrink: 0;
}

.stat-card {
  border-radius: var(--radius-sm);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

/* Unified dark background + grey border for all stat cards */
.stat-card--health,
.stat-card--money,
.stat-card--nerve,
.stat-card--connct {
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.06);
}

.stat-card--gain {
  background:
    radial-gradient(100% 90% at 50% 0%, rgba(56, 130, 64, 0.34) 0%, transparent 62%),
    var(--bg-input);
  box-shadow: inset 0 0 24px rgba(44, 120, 56, 0.28);
}

.stat-card--loss {
  background:
    radial-gradient(100% 90% at 50% 0%, rgba(120, 22, 36, 0.36) 0%, transparent 62%),
    var(--bg-input);
  box-shadow: inset 0 0 24px rgba(115, 20, 34, 0.30);
}

.stat-card--status-gain {
  background:
    radial-gradient(100% 90% at 50% 0%, rgba(56, 130, 64, 0.16) 0%, transparent 64%),
    var(--bg-input);
}

.stat-card--status-loss {
  background:
    radial-gradient(100% 90% at 50% 0%, rgba(120, 22, 36, 0.16) 0%, transparent 64%),
    var(--bg-input);
}

.stat-card--gain .stat-card__value,
.char-stat--gain .char-stat__value {
  color: #F3FFF5 !important;
  text-shadow: 0 0 10px rgba(160, 244, 170, 0.72);
}

.stat-card--loss .stat-card__value,
.char-stat--loss .char-stat__value {
  color: #FFF0F0 !important;
  text-shadow: 0 0 10px rgba(255, 122, 122, 0.72);
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.stat-card--health::after  { background: rgba(204, 51, 51, 0.42); }
.stat-card--money::after   { background: rgba(122, 122, 122, 0.42); }
.stat-card--nerve::after   { background: rgba(192, 90, 128, 0.42); }
.stat-card--connct::after  { background: rgba(192, 128, 16, 0.42); }

.stat-card__delta {
  position: absolute;
  top: 5px;
  right: 9px;
  z-index: 1;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1px;
  opacity: 0.8;
  pointer-events: none;
}

.stat-card__delta--gain {
  color: var(--success-bright);
  text-shadow: 0 0 7px rgba(117, 218, 130, 0.42);
}

.stat-card__delta--loss {
  color: #FF4B4B;
  text-shadow: 0 0 7px rgba(255, 75, 75, 0.38);
}

.stat-card__main {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-card__icon {
  font-size: 22px;
  line-height: 1;
}

.stat-card__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-card__value--flipping,
.char-stat__value--flipping {
  display: inline-block;
  transform-origin: center;
  animation: split-flap 0.72s ease both;
}

.stat-card__value--changed,
.char-stat__value--changed {
  display: inline-block;
}

.stat-card__value--gain,
.char-stat__value--gain {
  color: #F3FFF5 !important;
  text-shadow: 0 0 10px rgba(160, 244, 170, 0.74);
}

.stat-card__value--loss,
.char-stat__value--loss {
  color: #FFF0F0 !important;
  text-shadow: 0 0 10px rgba(255, 122, 122, 0.74);
}

.stat-card__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ─── Day Bar ───────────────────────────────────────────────────── */
.day-bar {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 8px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.day-bar__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.day-bar__day,
.day-bar__weekday {
  font-size: 15px;
  font-weight: 700;
  color: rgba(232, 224, 208, 0.62);
}

.day-bar__sep {
  color: rgba(232, 224, 208, 0.30);
  font-size: 13px;
  font-weight: 400;
}

.day-bar__loc {
  color: rgba(232, 224, 208, 0.62);
  font-size: 15px;
  font-weight: 700;
}

.day-bar__progress {
  width: 34%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  align-self: center;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.22);
}

.day-bar__progress-fill {
  display: block;
  width: var(--day-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: rgba(232, 224, 208, 0.46);
  box-shadow: 0 0 5px rgba(232, 224, 208, 0.16);
}

.day-bar__dots {
  display: none;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.day-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
  transition: background 0.2s;
}

.day-bar__dot--active {
  background: rgba(232, 224, 208, 0.48);
}

.day-bar__dot--current {
  background: rgba(232, 224, 208, 0.48);
  box-shadow: 0 0 0 2px rgba(255, 248, 232, 0.34);
}

/* ─── Event Scene ───────────────────────────────────────────────── */
.event-scene {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  transform-style: preserve-3d;
}

.event-scene--clickable {
  cursor: pointer;
}

.event-scene--reacting {
  background: #000;
  animation: scene-flip 1s ease both;
}

.event-scene--reacting::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

.event-image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: var(--bg-card);
  position: relative;
  z-index: 1;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.event-image__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(90% 70% at 50% 18%, rgba(212, 160, 23, 0.10) 0%, transparent 58%),
    linear-gradient(180deg, rgba(23, 20, 18, 0.96) 0%, rgba(10, 9, 8, 0.98) 100%);
  color: rgba(232, 224, 208, 0.34);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.event-image--loaded .event-image__placeholder {
  display: none;
}

.event-scene--reacting .event-image img {
  animation: dim-at-half 1s ease both;
}

.event-image--result img,
.event-image--exit-right img {
  filter: grayscale(0.72) brightness(0.58) contrast(0.92);
}

.event-image--exit-right {
  animation: card-exit-right 0.42s ease-in forwards;
}

.event-scene-stack {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.event-scene-stack .event-scene {
  width: 100%;
  height: 100%;
}

.event-scene--underlay {
  position: relative;
  z-index: 1;
}

.event-scene--overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.event-scene--exiting {
  animation: scene-exit-right 0.62s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.event-scene--game-over {
  animation: scene-flip-reverse 0.92s ease both;
}

.event-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.event-loader--reacting {
  animation: loader-show 1.34s linear 0.5s both;
}

.event-loader span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(215, 210, 200, 0.66);
  transform: rotate(calc(var(--i) * 45deg)) translateY(-22px);
  transform-origin: center 22px;
  animation: loader-spin 0.95s linear infinite;
}

.event-loader span:nth-child(1) { --i: 0; opacity: 1; }
.event-loader span:nth-child(2) { --i: 1; opacity: 0.88; }
.event-loader span:nth-child(3) { --i: 2; opacity: 0.76; }
.event-loader span:nth-child(4) { --i: 3; opacity: 0.64; }
.event-loader span:nth-child(5) { --i: 4; opacity: 0.52; }
.event-loader span:nth-child(6) { --i: 5; opacity: 0.40; }
.event-loader span:nth-child(7) { --i: 6; opacity: 0.30; }
.event-loader span:nth-child(8) { --i: 7; opacity: 0.22; }

.event-scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 58%, transparent 100%);
  pointer-events: none;
}

/* ─── Event Text ────────────────────────────────────────────────── */
.event-text {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  background: linear-gradient(180deg, rgba(40, 38, 35, 0.86) 0%, rgba(22, 20, 18, 0.88) 100%);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 17px;
  line-height: 1.5;
  color: #F5EDDF;
  border: 1px solid rgba(210, 202, 190, 0.12);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 0 14px rgba(255,255,255,0.025);
}

.event-text--reacting {
  animation: hide-event-text 1s ease both;
}

.event-text--reaction {
  max-height: calc(100% - 20px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 38, 35, 0.86) 0%, rgba(22, 20, 18, 0.88) 100%);
  border: 1px solid rgba(210, 202, 190, 0.12);
  font-size: 17px;
  color: #F5EDDF;
}

.event-text--typing {
  animation: type-in 0.45s steps(16, end) both;
}

.event-text .coin {
  color: var(--gold);
  font-weight: 600;
}

.event-text__body {
  color: inherit;
}

.event-text__intro {
  color: rgba(241, 233, 218, 0.82);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.reaction-grade {
  font-weight: 900;
}

.reaction-grade--win-common { color: var(--success); }
.reaction-grade--win-rare { color: var(--success-bright); }
.reaction-grade--win-legend { color: var(--gold); }
.reaction-grade--lost-common { color: var(--danger-warm); }
.reaction-grade--lost-rare { color: var(--danger); }
.reaction-grade--lost-legend { color: var(--danger-bright); }

.reaction-main {
  display: inline;
}

.reaction-copy {
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

.reaction-changes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-weight: 900;
}

.reaction-change--gain {
  color: var(--success-bright);
}

.reaction-change--loss {
  color: #FF4B4B;
  text-shadow: 0 0 8px rgba(255, 75, 75, 0.32);
}

.reaction-hint {
  margin-top: 9px;
  color: rgba(232, 224, 208, 0.48);
  font-size: 13px;
  font-weight: 600;
}

.status-acquired {
  margin-top: 7px;
  color: rgba(245, 237, 223, 0.74);
  font-size: 14px;
  line-height: 1.35;
}

.status-acquired__item + .status-acquired__item {
  margin-top: 6px;
}

.status-acquired__item.status--danger {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  background: rgba(120, 22, 36, 0.18);
}

.status-acquired__title {
  color: rgba(245, 237, 223, 0.78);
  font-weight: 700;
}

.status-acquired__effects {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-weight: 800;
}

.status-acquired__timer {
  margin-top: 3px;
  color: rgba(232, 224, 208, 0.56);
  font-weight: 700;
}

.status-strip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(245, 237, 223, 0.72);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.status-strip__item {
  flex-shrink: 0;
  padding: 2px 5px;
  border-radius: 6px;
  white-space: nowrap;
}

.status-strip__more {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 5px;
  border-radius: 6px;
  color: rgba(245, 237, 223, 0.68);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
}

.status-strip__item.status--danger {
  background: rgba(120, 22, 36, 0.20);
}

.status-tooltip {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.48);
}

.status-tooltip__card {
  width: min(460px, calc(100vw - 20px));
  max-height: 60vh;
  overflow: auto;
  border: 1px solid rgba(210, 202, 190, 0.13);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(40, 38, 35, 0.94) 0%, rgba(18, 16, 15, 0.96) 100%);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 10px;
}

.status-tooltip__heading {
  padding: 4px 6px 10px;
  color: rgba(245, 237, 223, 0.86);
  font-size: 15px;
  font-weight: 800;
}

.status-tooltip__item {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
}

.status-tooltip__item.status--danger {
  background: rgba(120, 22, 36, 0.18);
}

.status-tooltip__item + .status-tooltip__item {
  margin-top: 8px;
}

.status-tooltip__title {
  color: rgba(245, 237, 223, 0.86);
  font-size: 15px;
  font-weight: 700;
}

.status-tooltip__text {
  margin-top: 6px;
  color: rgba(245, 237, 223, 0.72);
  font-size: 14px;
  line-height: 1.35;
}

.status-tooltip__effects {
  margin-top: 6px;
  color: rgba(245, 237, 223, 0.80);
  font-size: 14px;
  font-weight: 700;
}

.status-tooltip__effects--timer {
  color: rgba(232, 224, 208, 0.66);
}

.status-tooltip__hint {
  margin-top: 10px;
  color: rgba(232, 224, 208, 0.48);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.status-expired {
  margin-top: 10px;
  color: rgba(245, 237, 223, 0.76);
  font-size: 14px;
  line-height: 1.35;
}

.status-expired__item--auto {
  padding: 7px 8px;
  border-radius: var(--radius-sm);
}

.status-expired__item--auto.status--danger {
  background: rgba(120, 22, 36, 0.18);
}

.status-expired__title {
  color: rgba(245, 237, 223, 0.82);
  font-weight: 800;
}

.status-expired__text {
  margin-top: 3px;
  color: rgba(245, 237, 223, 0.68);
  font-style: italic;
}

.status-expired__item + .status-expired__item {
  margin-top: 5px;
}

.status-expired__item--auto .status-expired__effects {
  display: flex;
  gap: 8px;
  margin-top: 3px;
}

.status-expired__effects {
  color: rgba(245, 237, 223, 0.86);
  font-weight: 700;
}

/* ─── Game Over ─────────────────────────────────────────────────── */
.game-over {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 3.7vh, 26px) 18px 14px;
  color: #F2E9DA;
  text-align: center;
  background:
    radial-gradient(80% 45% at 50% 24%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 74%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.18) 46%, rgba(0, 0, 0, 0.68) 100%);
  text-shadow: 0 2px 5px rgba(0,0,0,0.88);
  animation: show-game-over-text 0.92s ease both;
}

.game-over__hero {
  max-width: 92%;
  font-size: clamp(18px, 5.1vw, 27px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.game-over__survived {
  margin-top: 1px;
  font-size: clamp(15px, 4vw, 21px);
  line-height: 1.05;
  font-weight: 400;
  color: rgba(242, 233, 218, 0.82);
}

.game-over__days {
  position: relative;
  max-width: calc(100% - 52px);
  margin-top: clamp(42px, 10vh, 78px);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.82));
}

.game-over__days-main {
  position: relative;
  color: #F4EFE4;
  font-size: clamp(46px, 13.7vw, 78px);
  line-height: 0.92;
  font-weight: 1000;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.game-over__days-main::after {
  content: '';
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(103deg, transparent 0 10%, rgba(0,0,0,0.30) 10.5% 12%, transparent 12.5% 32%, rgba(0,0,0,0.22) 33% 35%, transparent 36% 100%),
    repeating-linear-gradient(176deg, transparent 0 9px, rgba(0,0,0,0.24) 10px 12px, transparent 13px 22px);
  mix-blend-mode: multiply;
  opacity: 0.72;
  pointer-events: none;
}

.game-over__days-main span {
  letter-spacing: -0.08em;
}

.game-over__record {
  margin-top: 12px;
  color: var(--gold);
  font-size: clamp(18px, 5vw, 25px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.86),
    0 0 14px rgba(212,160,23,0.34);
}

.game-over__death {
  position: relative;
  width: min(88%, 336px);
  margin-top: auto;
  margin-bottom: 3px;
  padding: 18px 16px 14px;
  border: 4px solid rgba(146, 30, 34, 0.52);
  border-radius: 8px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(128, 22, 26, 0.35) 0%, transparent 62%),
    rgba(48, 10, 12, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 28px rgba(0,0,0,0.30),
    0 7px 18px rgba(0,0,0,0.42);
}

.game-over__grave {
  position: absolute;
  left: 50%;
  top: -21px;
  width: 33px;
  height: 33px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #7B161C;
  color: #0A0908;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.38);
}

.game-over__death-text {
  color: rgba(243, 232, 220, 0.82);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(18px, 5vw, 25px);
  line-height: 1.22;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.game-over__death-text span {
  display: block;
}

/* ─── Action Buttons ────────────────────────────────────────────── */
.buttons-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.action-btn {
  background: var(--bg-btn);
  border-radius: var(--radius-md);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 56px;
  border: 2px solid rgba(255,255,255,0.07);
  -webkit-user-select: none;
  user-select: none;
  padding-right: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -16px 28px rgba(0,0,0,0.32),
    inset 0 0 30px rgba(0,0,0,0.20),
    0 4px 14px rgba(0,0,0,0.36);
}

.action-btn:active {
  background: var(--bg-btn-hover);
  transform: scale(0.99);
}

.action-btn:disabled {
  cursor: default;
}

.action-btn--disabled {
  opacity: 0.48;
  filter: grayscale(0.9);
}

.action-btn--selected {
  border-color: rgba(245, 215, 120, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -16px 28px rgba(0,0,0,0.30),
    0 0 0 1px rgba(245, 215, 120, 0.34),
    0 0 22px rgba(212, 160, 23, 0.24) !important;
}

.action-btn--muted {
  filter: grayscale(1);
  opacity: 0.58;
}

.action-btn__icon {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  padding: 0 4px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.28) 100%),
    rgba(0,0,0,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset -10px 0 16px rgba(0,0,0,0.14);
}

.action-btn__text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.action-btn__outcomes {
  width: 78px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: transparent;
  border: none;
  align-self: center;
  margin: 5px 0;
  min-height: 42px;
}

.action-btn__outcomes--unavailable {
  filter: grayscale(1);
}

.action-btn__outcomes--unavailable .action-btn__win,
.action-btn__outcomes--unavailable .action-btn__lose {
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0) 42%),
    rgba(18, 18, 18, 0.42);
  border-color: rgba(255,255,255,0.08);
}

.action-btn__win {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: rgba(28, 58, 24, 0.52);
  border: 1px solid rgba(145, 205, 125, 0.24);
  border-bottom: 1px solid rgba(0,0,0,0.32);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 4px 2px;
}

.action-btn__lose {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0) 48%),
    rgba(14, 14, 14, 0.50);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 0 0 1px rgba(0,0,0,0.12);
  padding: 4px 9px;
}

.action-btn__outcomes--lose-only .action-btn__lose {
  flex: 1;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}

.action-btn__outcomes--win-only .action-btn__win {
  flex: 1;
  border-bottom: 1px solid rgba(145, 205, 125, 0.24);
  border-radius: var(--radius-sm);
}

/* Individual outcome emoji pills — no background, icons are bare */
.outcome-pill {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 17px;
  padding: 0 1px;
  font-size: 13px;
  line-height: 1;
}

.outcome-pill--win,
.outcome-pill--lose {
  background: none;
  box-shadow: none;
}

.outcome-pill--lose .outcome-icon {
  filter: grayscale(0.5);
}

.outcome-icon {
  display: inline-block;
  font-size: var(--outcome-size, 100%);
  line-height: 1;
}

.outcome-sep {
  color: rgba(255,255,255,0.25);
  font-size: 11px;
  font-weight: 300;
  line-height: 1;
  margin: 0 1px;
  user-select: none;
}

.outcome-amount {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  opacity: 0.7;
}

.action-btn--third .outcome-amount {
  font-size: var(--outcome-size, 100%);
  line-height: 1;
}

.buttons-list--final {
  gap: 7px;
}

.final-action {
  min-height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.09);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -16px 28px rgba(0,0,0,0.32),
    0 4px 14px rgba(0,0,0,0.36);
}

.final-action:active {
  transform: scale(0.99);
}

.final-action--retry {
  background:
    radial-gradient(115% 145% at 0% 0%, rgba(46, 104, 57, 0.34) 0%, transparent 52%),
    linear-gradient(180deg, rgba(30, 72, 39, 0.78) 0%, rgba(10, 26, 15, 0.96) 100%);
  border-color: rgba(82, 145, 90, 0.48);
}

.final-action--leaders {
  background:
    radial-gradient(115% 145% at 0% 0%, rgba(90, 86, 80, 0.30) 0%, transparent 52%),
    linear-gradient(180deg, rgba(48, 45, 41, 0.86) 0%, rgba(15, 14, 13, 0.98) 100%);
  border-color: rgba(160, 154, 144, 0.22);
}

.final-action--menu {
  background:
    radial-gradient(115% 145% at 0% 0%, rgba(90, 86, 80, 0.30) 0%, transparent 52%),
    linear-gradient(180deg, rgba(48, 45, 41, 0.86) 0%, rgba(15, 14, 13, 0.98) 100%);
  border-color: rgba(160, 154, 144, 0.22);
}

.final-action__icon {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  padding: 0 4px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.09) 0%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.28) 100%),
    rgba(0,0,0,0.14);
  border-right: 1px solid rgba(255,255,255,0.12);
}

.final-action--leaders .final-action__icon,
.final-action--menu .final-action__icon {
  filter: grayscale(0.4);
}

.final-action__text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ─── Char Stats ────────────────────────────────────────────────── */
.char-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background:
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,0.10) 10%, rgba(255,255,255,0.10) 90%, transparent 90%) 33.333% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, transparent 10%, rgba(255,255,255,0.10) 10%, rgba(255,255,255,0.10) 90%, transparent 90%) 66.666% 0 / 1px 100% no-repeat,
    var(--bg-card);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  flex-shrink: 0;
}

.char-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-sm);
  padding: 2px 0;
}

.char-stat--gain {
  background: radial-gradient(80% 100% at 50% 0%, rgba(56, 130, 64, 0.28) 0%, rgba(0,0,0,0) 72%);
}

.char-stat--loss {
  background: radial-gradient(80% 100% at 50% 0%, rgba(120, 22, 36, 0.30) 0%, rgba(0,0,0,0) 72%);
}

.char-stat--status-gain {
  background: radial-gradient(80% 100% at 50% 0%, rgba(56, 130, 64, 0.14) 0%, rgba(0,0,0,0) 72%);
}

.char-stat--status-loss {
  background: radial-gradient(80% 100% at 50% 0%, rgba(120, 22, 36, 0.15) 0%, rgba(0,0,0,0) 72%);
}

.char-stat__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.char-stat__row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.char-stat__icon {
  font-size: 13px;
  line-height: 1;
}

.char-stat__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card__value.stat-card__value--gain,
.char-stat__value.char-stat__value--gain {
  color: #F3FFF5 !important;
  text-shadow: 0 0 10px rgba(160, 244, 170, 0.74);
}

.stat-card__value.stat-card__value--loss,
.char-stat__value.char-stat__value--loss {
  color: #FFF0F0 !important;
  text-shadow: 0 0 10px rgba(255, 122, 122, 0.74);
}

@keyframes scene-flip {
  0% { transform: rotateY(0deg); }
  49% { transform: rotateY(88deg); }
  50% { transform: rotateY(90deg); }
  51% { transform: rotateY(88deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes profession-loading-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@keyframes scene-flip-reverse {
  0% { transform: rotateY(0deg); }
  49% { transform: rotateY(-88deg); }
  50% { transform: rotateY(-90deg); }
  51% { transform: rotateY(-88deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes dim-at-half {
  0%, 49% { filter: none; }
  50%, 100% {
    filter: grayscale(0.72) brightness(0.58) contrast(0.92);
  }
}

@keyframes hide-event-text {
  0%, 49% {
    opacity: 1;
    visibility: visible;
  }
  50%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes show-game-over-text {
  0%, 49% {
    opacity: 0;
    visibility: hidden;
  }
  50%, 100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes loader-spin {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes loader-show {
  0% { opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes type-in {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.78;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes split-flap {
  0% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
  45% {
    transform: rotateX(88deg);
    filter: brightness(1.7);
  }
  100% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }
}

@keyframes card-exit-right {
  to {
    transform: translateX(115%) rotate(7deg);
    opacity: 0;
  }
}

@keyframes scene-exit-right {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  72% {
    opacity: 0.78;
  }
  100% {
    transform: translateX(118%) rotate(7deg);
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .event-text {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 8px 10px;
    font-size: 16.8px;
    line-height: 1.32;
  }

  .event-text--reaction {
    max-height: calc(100% - 16px);
    font-size: 15.12px;
    line-height: 1.32;
  }

  .event-text__body,
  .reaction-copy {
    font-size: 15.12px;
    line-height: inherit;
  }

  .action-btn__lose {
    gap: 1px;
    padding: 3px 5px;
  }

  .outcome-pill {
    gap: 0;
    padding: 0;
  }

  .outcome-sep {
    margin: 0;
  }

  .stat-card__delta {
    top: 3px;
    right: 5px;
    font-size: 11px;
    letter-spacing: 0;
  }
}