@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
--bg: #0a0608;
--felt: #0d1f0f;
--card-bg: #fdf6e3;
--gold: #d4a017;
--red: #c0392b;
--green: #27ae60;
--monster: #8b1a6b;
--monster-glow: #ff2ea4;
--player: #1a5276;
--player-glow: #3498db;
--ui-bg: rgba(10,6,8,0.85);
--border: rgba(212,160,23,0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
background: var(--bg);
font-family: 'Crimson Text', serif;
color: #e8d5a3;
min-height: 100vh;
overflow-x: hidden;
background-image:
radial-gradient(ellipse at 50% 0%, rgba(139,26,107,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(26,82,118,0.15) 0%, transparent 60%),
repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(212,160,23,0.02) 30px, rgba(212,160,23,0.02) 31px);
}

/* ── TITLE ─────────────────────────── */
#title-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
gap: 2rem;
text-align: center;
padding: 2rem;
}

#title-screen h1 {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(2rem, 6vw, 5rem);
font-weight: 900;
background: linear-gradient(135deg, #d4a017, #ff9f43, #d4a017, #e74c3c);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter: drop-shadow(0 0 30px rgba(212,160,23,0.5));
animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
0%,100% { filter: drop-shadow(0 0 20px rgba(212,160,23,0.4)); }
50%      { filter: drop-shadow(0 0 50px rgba(212,160,23,0.9)); }
}

#title-screen p {
font-size: 1.3rem;
font-style: italic;
color: rgba(232,213,163,0.7);
max-width: 500px;
}

.big-btn {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.2rem;
padding: 1rem 3rem;
background: linear-gradient(135deg, #d4a017, #b8860b);
color: #0a0608;
border: none;
cursor: pointer;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
transition: all 0.2s;
letter-spacing: 0.1em;
}
.big-btn:hover {
background: linear-gradient(135deg, #f0b429, #d4a017);
transform: scale(1.05);
box-shadow: 0 0 30px rgba(212,160,23,0.6);
}

/* ── GAME AREA ─────────────────────── */
#game-screen { display: none; flex-direction: column; min-height: 100vh; }

/* MONSTER ZONE */
#monster-zone {
background: linear-gradient(180deg, rgba(139,26,107,0.25) 0%, rgba(10,6,8,0) 100%);
border-bottom: 2px solid rgba(139,26,107,0.5);
padding: 1.5rem 2rem;
position: relative;
}

.zone-label {
font-family: 'Cinzel Decorative', cursive;
font-size: 0.75rem;
letter-spacing: 0.2em;
opacity: 0.6;
margin-bottom: 0.5rem;
}

#monster-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
}

#monster-sprite {
font-size: 4rem;
filter: drop-shadow(0 0 20px var(--monster-glow));
animation: monsterBob 2s ease-in-out infinite;
}
@keyframes monsterBob {
0%,100% { transform: translateY(0) rotate(-3deg); }
50%      { transform: translateY(-8px) rotate(3deg); }
}

#monster-info { flex: 1; }
#monster-name {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.4rem;
color: var(--monster-glow);
text-shadow: 0 0 20px var(--monster-glow);
}
#monster-hp-bar { margin-top: 0.5rem; }
.hp-label { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.3rem; }
.bar-track {
height: 12px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.15);
}
.bar-fill {
height: 100%;
border-radius: 6px;
transition: width 0.6s ease;
}
#monster-hp-fill { background: linear-gradient(90deg, #c0392b, #e74c3c); }
#player-hp-fill  { background: linear-gradient(90deg, #1a5276, #2980b9); }

#monster-score {
font-family: 'Cinzel Decorative', cursive;
font-size: 2.5rem;
color: var(--monster-glow);
text-shadow: 0 0 30px var(--monster-glow);
}

/* CARD ROW */
.card-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
min-height: 100px;
align-items: flex-end;
padding: 0.5rem 0;
}

/* CARDS */
.card {
width: 70px;
height: 100px;
border-radius: 8px;
position: relative;
cursor: default;
transform-style: preserve-3d;
transition: transform 0.5s;
}

.card-inner {
width: 100%;
height: 100%;
border-radius: 8px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}

.card.flipping .card-inner { animation: cardFlip 0.5s ease forwards; }
@keyframes cardFlip {
0%   { transform: rotateY(0deg); }
50%  { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}

.card-front, .card-back {
position: absolute;
inset: 0;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}

.card-front {
background: var(--card-bg);
border: 2px solid rgba(0,0,0,0.15);
box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
flex-direction: column;
padding: 4px;
}

.card-back {
background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
border: 2px solid rgba(139,26,107,0.6);
box-shadow: 0 4px 15px rgba(139,26,107,0.3);
background-image: repeating-linear-gradient(45deg, rgba(212,160,23,0.05) 0px, rgba(212,160,23,0.05) 2px, transparent 2px, transparent 10px);
}

.card-back::after {
content: '🂠';
font-size: 3rem;
opacity: 0.5;
filter: hue-rotate(270deg);
}

.card-corner { position: absolute; font-size: 0.65rem; font-weight: bold; line-height: 1.1; }
.card-corner.tl { top: 4px; left: 5px; text-align: left; }
.card-corner.br { bottom: 4px; right: 5px; text-align: right; transform: rotate(180deg); }
.card-center { font-size: 1.8rem; line-height: 1; }

.red-card .card-corner, .red-card .card-center { color: #c0392b; }
.black-card .card-corner, .black-card .card-center { color: #1a1a1a; }

/* Special card glow effects */
.card.special-gold { animation: goldGlow 1s ease-out; }
@keyframes goldGlow {
0%   { box-shadow: 0 0 0 rgba(212,160,23,0); }
50%  { box-shadow: 0 0 30px rgba(212,160,23,0.9), 0 0 60px rgba(212,160,23,0.4); }
100% { box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
}

.card.deal-in { animation: dealIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes dealIn {
0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* MIDDLE / LOG */
#battle-log-zone {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
position: relative;
}

#battle-log {
background: rgba(10,6,8,0.8);
border: 1px solid var(--border);
padding: 1rem 1.5rem;
max-width: 500px;
width: 100%;
min-height: 80px;
text-align: center;
position: relative;
clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

#battle-log-text {
font-size: 1.1rem;
line-height: 1.6;
font-style: italic;
}

#damage-flash {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: 0;
transition: opacity 0.1s;
}

/* PLAYER ZONE */
#player-zone {
background: linear-gradient(0deg, rgba(26,82,118,0.25) 0%, rgba(10,6,8,0) 100%);
border-top: 2px solid rgba(26,82,118,0.5);
padding: 1.5rem 2rem;
}

#player-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
}

#player-info { flex: 1; }
#player-name {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.2rem;
color: var(--player-glow);
text-shadow: 0 0 20px var(--player-glow);
}

#player-score {
font-family: 'Cinzel Decorative', cursive;
font-size: 2.5rem;
color: var(--player-glow);
text-shadow: 0 0 30px var(--player-glow);
}

#action-bar {
display: flex;
gap: 1rem;
margin-top: 1rem;
flex-wrap: wrap;
}

.action-btn {
font-family: 'Cinzel Decorative', cursive;
font-size: 0.85rem;
padding: 0.6rem 1.5rem;
border: none;
cursor: pointer;
clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
transition: all 0.15s;
letter-spacing: 0.05em;
}
.action-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none !important; }
.action-btn:not(:disabled):hover { transform: scale(1.05); }

#btn-hit {
background: linear-gradient(135deg, #27ae60, #1e8449);
color: white;
}
#btn-hit:not(:disabled):hover { box-shadow: 0 0 20px rgba(39,174,96,0.6); }

#btn-stand {
background: linear-gradient(135deg, #d4a017, #b8860b);
color: #0a0608;
}
#btn-stand:not(:disabled):hover { box-shadow: 0 0 20px rgba(212,160,23,0.6); }

#btn-special {
background: linear-gradient(135deg, #8b1a6b, #c0392b);
color: white;
}
#btn-special:not(:disabled):hover { box-shadow: 0 0 20px rgba(192,57,43,0.6); }

#btn-sound {
background: linear-gradient(135deg, #34495e, #2c3e50);
color: #ecf0f1;
}
#btn-sound:not(:disabled):hover { box-shadow: 0 0 20px rgba(236,240,241,0.25); }

#btn-sound-title {
background: linear-gradient(135deg, #34495e, #2c3e50);
color: #ecf0f1;
}
#btn-sound-title:not(:disabled):hover { box-shadow: 0 0 20px rgba(236,240,241,0.25); }

#special-charges {
font-family: 'Crimson Text', serif;
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.3rem;
display: block;
}

/* TURN INDICATOR */
#turn-indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-family: 'Cinzel Decorative', cursive;
font-size: 3rem;
font-weight: 900;
padding: 0.5rem 2rem;
z-index: 500;
pointer-events: none;
opacity: 0;
}
#turn-indicator.show {
animation: turnPop 1.2s ease-out forwards;
}
@keyframes turnPop {
0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
20%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

/* JOKER CARDS (Balatro style) */
#joker-bar {
display: flex;
gap: 0.5rem;
padding: 0.5rem 2rem;
background: rgba(0,0,0,0.3);
border-top: 1px solid var(--border);
align-items: center;
overflow-x: auto;
}
.joker-label {
font-family: 'Cinzel Decorative', cursive;
font-size: 0.6rem;
letter-spacing: 0.1em;
opacity: 0.5;
white-space: nowrap;
margin-right: 0.5rem;
}
.joker-card {
width: 55px;
height: 75px;
background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
border: 1px solid var(--gold);
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s;
position: relative;
flex-shrink: 0;
}
.joker-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(212,160,23,0.4);
}
.joker-card span {
font-family: 'Cinzel Decorative', cursive;
font-size: 0.45rem;
color: var(--gold);
text-align: center;
margin-top: 2px;
letter-spacing: 0.02em;
}
.joker-card.used { opacity: 0.3; pointer-events: none; }
.joker-card .joker-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(10,6,8,0.95);
border: 1px solid var(--gold);
padding: 0.4rem 0.6rem;
font-size: 0.7rem;
white-space: nowrap;
border-radius: 4px;
color: #e8d5a3;
z-index: 100;
font-family: 'Crimson Text', serif;
}
.joker-card:hover .joker-tooltip { display: block; }

/* GAME OVER */
#game-over-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,6,8,0.9);
z-index: 1000;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1.5rem;
text-align: center;
padding: 2rem;
}
#game-over-title {
font-family: 'Cinzel Decorative', cursive;
font-size: 4rem;
font-weight: 900;
}
.victory   { color: #d4a017; text-shadow: 0 0 40px rgba(212,160,23,0.8); }
.defeat    { color: #c0392b; text-shadow: 0 0 40px rgba(192,57,43,0.8); }

/* SHOP */
#shop-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,6,8,0.86);
z-index: 950;
align-items: center;
justify-content: center;
padding: 1.5rem;
}

#shop-panel {
width: min(560px, 95vw);
background: linear-gradient(160deg, rgba(45,27,78,0.95), rgba(10,6,8,0.95));
border: 1px solid var(--gold);
box-shadow: 0 0 35px rgba(212,160,23,0.25);
padding: 1.2rem;
text-align: center;
clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

#shop-title {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.6rem;
color: var(--gold);
letter-spacing: 0.06em;
}

#shop-subtitle {
font-size: 1rem;
opacity: 0.8;
margin-top: 0.35rem;
}

#shop-coins-wrap {
margin-top: 0.8rem;
font-size: 1rem;
}

#shop-coins {
color: var(--gold);
font-weight: 700;
}

#shop-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
margin-top: 1rem;
}

.shop-btn {
padding: 0.7rem 0.4rem;
font-size: 0.7rem;
background: linear-gradient(135deg, #1a5276, #2d1b4e);
color: #e8d5a3;
}

/* ENDLESS CHOICE */
#endless-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,6,8,0.9);
z-index: 980;
align-items: center;
justify-content: center;
padding: 1.5rem;
}

#endless-panel {
width: min(560px, 95vw);
background: linear-gradient(160deg, rgba(45,27,78,0.95), rgba(10,6,8,0.95));
border: 1px solid var(--gold);
box-shadow: 0 0 35px rgba(212,160,23,0.25);
padding: 1.2rem;
text-align: center;
clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

#endless-title {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.5rem;
color: var(--gold);
letter-spacing: 0.06em;
}

#endless-subtitle {
font-size: 1rem;
opacity: 0.85;
margin-top: 0.5rem;
line-height: 1.5;
}

#endless-actions {
display: flex;
gap: 0.6rem;
justify-content: center;
margin-top: 1rem;
flex-wrap: wrap;
}

/* PUSH CHOICE */
#push-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(10,6,8,0.9);
z-index: 985;
align-items: center;
justify-content: center;
padding: 1.5rem;
}

#push-panel {
width: min(560px, 95vw);
background: linear-gradient(160deg, rgba(45,27,78,0.95), rgba(10,6,8,0.95));
border: 1px solid var(--gold);
box-shadow: 0 0 35px rgba(212,160,23,0.25);
padding: 1.2rem;
text-align: center;
clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

#push-title {
font-family: 'Cinzel Decorative', cursive;
font-size: 1.5rem;
color: var(--gold);
letter-spacing: 0.06em;
}

#push-subtitle {
font-size: 1rem;
opacity: 0.85;
margin-top: 0.5rem;
line-height: 1.5;
}

#push-actions {
display: flex;
gap: 0.6rem;
justify-content: center;
margin-top: 1rem;
flex-wrap: wrap;
}

/* EFFECTS */
.shake { animation: shake 0.4s ease; }
@keyframes shake {
0%,100% { transform: translateX(0); }
20%     { transform: translateX(-10px); }
40%     { transform: translateX(10px); }
60%     { transform: translateX(-8px); }
80%     { transform: translateX(8px); }
}

.damage-number {
position: fixed;
font-family: 'Cinzel Decorative', cursive;
font-size: 2rem;
font-weight: 900;
pointer-events: none;
z-index: 800;
animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp {
0%   { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

.bust-text {
color: #e74c3c;
text-shadow: 0 0 20px rgba(231,76,60,0.8);
}

/* Responsive */
@media(max-width: 600px) {
.card { width: 55px; height: 80px; }
.card-center { font-size: 1.4rem; }
#monster-sprite { font-size: 2.5rem; }
#shop-actions { grid-template-columns: 1fr; }
}
/* ── MODE SELECT (index.html) ──────── */
.mode-select-container {
  display: flex;
  align-items: stretch;
  max-width: 680px;
  width: 100%;
  padding: 0 1rem;
}

.mode-card {
  flex: 1;
  background: linear-gradient(160deg, rgba(212,160,23,0.08) 0%, rgba(10,6,8,0.6) 100%);
  border: 1px solid rgba(212,160,23,0.35);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Glow overlay */
.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,160,23,0.18), transparent 70%);
  pointer-events: none;
}

/* Ripple element injected by JS */
.mode-card .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleOut 0.55s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* Hover lift */
.mode-card:hover { transform: translateY(-7px); }
.mode-card:hover::before { opacity: 1; }

/* Press */
.mode-card:active { transform: scale(0.96) translateY(0); transition-duration: 0.08s; }

/* Launch animation on click */
.mode-card.launching {
  animation: cardLaunch 0.35s ease-out forwards;
}
@keyframes cardLaunch {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0; }
}

/* Fun card — gold */
#mode-fun { border-color: rgba(212,160,23,0.35); }
#mode-fun:hover {
  border-color: rgba(212,160,23,0.8);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 40px rgba(212,160,23,0.15);
}
#mode-fun .ripple { background: rgba(212,160,23,0.4); }

/* Realistic card — blue */
#mode-realistic {
  background: linear-gradient(160deg, rgba(52,152,219,0.08) 0%, rgba(10,6,8,0.6) 100%);
  border-color: rgba(52,152,219,0.35);
}
#mode-realistic::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(52,152,219,0.18), transparent 70%);
}
#mode-realistic:hover {
  border-color: rgba(52,152,219,0.8);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 40px rgba(52,152,219,0.15);
}
#mode-realistic .ripple { background: rgba(52,152,219,0.4); }

/* Divider */
.mode-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  gap: 0.5rem;
  color: rgba(232,213,163,0.3);
  font-family: 'Cinzel Decorative', cursive;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.mode-divider-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(212,160,23,0.25), transparent);
}

/* Card content */
.mode-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 14px rgba(212,160,23,0.4));
  transition: transform 0.2s ease;
}
.mode-card:hover .mode-icon { transform: scale(1.12) rotate(-4deg); }

.mode-title {
  font-family: 'Cinzel Decorative', cursive;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}
#mode-realistic .mode-title { color: #3498db; }

.mode-desc {
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(232,213,163,0.6);
  line-height: 1.55;
  flex: 1;
}

.mode-tag {
  display: inline-block;
  background: rgba(212,160,23,0.12);
  border: 1px solid rgba(212,160,23,0.4);
  color: var(--gold);
  font-family: 'Cinzel Decorative', cursive;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  margin-top: 0.4rem;
}
.mode-tag-blue {
  background: rgba(52,152,219,0.12);
  border-color: rgba(52,152,219,0.4);
  color: #3498db;
}

/* Arrow that slides in on hover */
.mode-arrow {
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
  color: var(--gold);
}
#mode-realistic .mode-arrow { color: #3498db; }
.mode-card:hover .mode-arrow { opacity: 1; transform: translateX(0); }

/* Page transition flash */
#page-flash {
  position: fixed;
  inset: 0;
  background: #0a0608;
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.3s ease;
}
#page-flash.active { opacity: 1; pointer-events: all; }

/* Responsive */
@media (max-width: 560px) {
  .mode-select-container { flex-direction: column; align-items: center; padding: 0; gap: 0.75rem; }
  .mode-divider { flex-direction: row; padding: 0; width: 100%; max-width: 320px; }
  .mode-divider-line { width: 60px; height: 1px; background: linear-gradient(to right, transparent, rgba(212,160,23,0.25), transparent); }
  .mode-card { width: 100%; max-width: 340px; }
}