:root {
  /* Primary gold palette */
  --gold: #e0b44e;
  --gold-bright: #ffd96a;
  --gold-dim: #9a7518;
  --gold-glow: rgba(224, 180, 78, 0.45);

  /* Background tones */
  --bg: #0a0806;
  --bg-panel: rgba(10, 6, 2, 0.88);
  --bg-card: rgba(18, 12, 6, 0.82);

  /* Parchment / text tones */
  --parchment: #f5e8cc;
  --parchment-dark: #d4b06a;
  --parchment-light: #fdf2e0;
  --ink: #1a0e04;

  /* Status colors */
  --red: #c43030;
  --green: #28a050;
  --red-glow: rgba(196, 48, 48, 0.3);
  --green-glow: rgba(40, 160, 80, 0.3);

  /* Borders — thick ornamental */
  --border: rgba(224, 180, 78, 0.22);
  --border-strong: rgba(224, 180, 78, 0.5);
  --border-metal: rgba(200, 160, 70, 0.65);
  --border-ornate: 3px solid;
  --border-ornate-color: linear-gradient(180deg, #8b6914 0%, #d4a545 40%, #f0c860 50%, #d4a545 60%, #8b6914 100%);

  /* Shadows */
  --shadow-panel: 0 4px 32px rgba(0, 0, 0, 0.7), 0 0 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(212, 165, 69, 0.08);
  --shadow-button: 0 2px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-glow: 0 0 20px rgba(212, 165, 69, 0.3);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.6), inset 0 0 2px rgba(0,0,0,0.4);

  /* Main background */
  --bg-image: url('../assets/images/background.png');
  --bg-image-menu: url('../assets/images/Background-menu.png');

  /* Typography enhancements */
  --text-shadow-title: 0 2px 4px rgba(0,0,0,1), 0 1px 0 rgba(0,0,0,0.8), 0 0 40px rgba(224,180,78,0.35);
  --text-shadow-glow: 0 0 12px rgba(224,180,78,0.6), 0 0 35px rgba(224,180,78,0.25), 0 2px 3px rgba(0,0,0,0.9);
}

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

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 20px; }   /* Base scale — up from 16px default → 1.25× all rem values */
html, body { width: 100%; height: 100dvh; overflow: hidden; background: var(--bg); }
#app { width: 100%; height: 100%; position: relative; }

/* Scrollbar styling — dark fantasy */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5a4012, #8b6914, #5a4012);
  border-radius: 4px;
  border: 1px solid rgba(212,165,69,0.3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6b4f10, #d4a545, #6b4f10); }

/* ===================== PORTRAIT ROTATE OVERLAY (Mobile) ===================== */
.rotate-overlay {
  display: none; /* Hidden by default — shown via @media portrait */
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: #0a0806;
  flex-direction: column;
}
.rotate-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rotate-icon {
  font-size: 4rem;
  animation: rotatePhone 2s ease-in-out infinite;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-90deg); }
  75% { transform: rotate(0deg); }
}
.rotate-arrow {
  font-size: 2.5rem;
  color: var(--gold-bright);
  animation: rotateArrowPulse 2s ease-in-out infinite;
}
@keyframes rotateArrowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.rotate-text {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: var(--gold-bright);
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  max-width: 280px;
  line-height: 1.5;
}

/* Show rotate overlay ONLY on mobile portrait */
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-overlay { display: flex !important; }
  #app { display: none !important; }
}

/* ===================== FULLSCREEN HINT (mobile only) ===================== */
.fullscreen-hint {
  display: none;
  position: fixed;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  padding: 5px 14px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(212,165,69,0.3);
  border-radius: 20px;
  font-family: 'Crimson Text', serif;
  font-size: 0.75rem;
  color: var(--parchment-dark);
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  animation: hintPulse 3s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* Show hint only on mobile landscape when NOT in fullscreen */
@media (max-width: 900px) and (orientation: landscape) {
  .fullscreen-hint { display: block; }
  .fullscreen-hint.hidden { display: none; }
}

/* ===================== MOBILE SCROLLBAR (thinner) ===================== */
@media (max-width: 900px) {
  ::-webkit-scrollbar { width: 6px; }
}