/* FACT — Gaming Design System v5 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── DARK (default) ──────────────────────────────────────────────── */
:root {
  --bg:           #13100E;
  --surface:      #1C1712;
  --surface-2:    #251F17;
  --surface-3:    #2E2720;
  --border:       rgba(255,200,120,0.10);
  --border-2:     rgba(255,200,120,0.18);

  --red:          #E8380D;
  --red-dk:       #A82508;
  --red-lt:       #FF6B3D;
  --red-soft:     rgba(232,56,13,0.14);
  --red-glow:     rgba(232,56,13,0.38);

  --gold:         #F5C518;
  --gold-dk:      #C49A0A;
  --gold-lt:      #FFE066;
  --gold-soft:    rgba(245,197,24,0.14);

  --cat-hist:     #E8380D;
  --cat-myth:     #A855F7;
  --cat-fun:      #F5C518;
  --cat-geo:      #00C2A8;
  --cat-arch:     #3B82F6;

  --ink:          #F5F0E8;
  --ink-2:        #B0A898;
  --ink-3:        #706860;

  --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:    0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.6);

  /* Backward-compat aliases for existing code */
  --surface-soft:   #251F17;
  --surface-deep:   #2E2720;
  --surface-edge:   #3A3028;
  --card:           #1C1712;
  --card-soft:      #251F17;
  --paper:          #1C1712;
  --paper-edge:     #2E2720;
  --ink-soft:       #B0A898;
  --ink-mute:       #706860;
  --ink-faint:      #4A4040;
  --stamp:          #E8380D;
  --stamp-deep:     #A82508;
  --stamp-soft:     rgba(232,56,13,0.14);
  --stamp-glow:     rgba(232,56,13,0.38);
  --coin:           #F5C518;
  --coin-dk:        #C49A0A;
  --coin-soft:      rgba(245,197,24,0.14);
  --shadow:         0 6px 20px rgba(0,0,0,0.5);
  --primary:        #E8380D;
  --primary-dk:     #A82508;
  --primary-lt:     #FF6B3D;
  --primary-soft:   rgba(232,56,13,0.14);
  --primary-glow:   rgba(232,56,13,0.38);
  --map-bg:         #0E1116;
  --map-surface:    rgba(15,18,24,0.75);
  --map-text:       #F2EADC;
}

/* ─── LIGHT — warm + vibrant ──────────────────────────────────────── */
.theme-light {
  --bg:           #FDF5E8;
  --surface:      #FFF8EE;
  --surface-2:    #F5EDD8;
  --surface-3:    #EDE1C8;
  --border:       rgba(140,100,40,0.12);
  --border-2:     rgba(140,100,40,0.22);
  --ink:          #1A1208;
  --ink-2:        #5C4A30;
  --ink-3:        #A08860;

  --surface-soft:   #F5EDD8;
  --surface-deep:   #EDE1C8;
  --surface-edge:   #D8CDB2;
  --card:           #FFF8EE;
  --card-soft:      #F5EDD8;
  --paper:          #FFF8EE;
  --paper-edge:     #EDE1C8;
  --ink-soft:       #5C4A30;
  --ink-mute:       #A08860;
  --ink-faint:      #C8B890;
  --stamp:          #E8380D;
  --stamp-deep:     #A82508;
  --stamp-soft:     rgba(232,56,13,0.12);
  --stamp-glow:     rgba(232,56,13,0.35);
  --coin:           #D4A820;
  --coin-dk:        #C49A0A;
  --coin-soft:      rgba(212,168,32,0.14);
  --shadow:         0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --primary:        #E8380D;
  --primary-dk:     #A82508;
  --primary-lt:     #FF6B3D;
  --primary-soft:   rgba(232,56,13,0.12);
  --primary-glow:   rgba(232,56,13,0.35);
}

html { height: 100%; overscroll-behavior: none; }

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  overscroll-behavior: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: #0A0806;
}

.app-frame {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ─── TYPE ─────────────────────────────────────────────────────────── */
.d    { font-family: 'Nunito', system-ui; font-weight: 900; }
.h    { font-family: 'Nunito', system-ui; font-weight: 800; }
.display { font-family: 'Nunito', system-ui; font-weight: 900; letter-spacing: -0.02em; }
.serif { font-family: 'DM Sans', system-ui; font-weight: 500; }
.mono  { font-family: 'JetBrains Mono', monospace; }

/* ─── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 16px; border: none;
  background: var(--red); color: #fff;
  font-family: 'Nunito', system-ui; font-weight: 900; font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--red-dk), 0 8px 20px var(--red-glow);
  transition: transform 0.08s, box-shadow 0.08s;
  user-select: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--red-dk), 0 2px 8px var(--red-glow); }
.btn.gold { background: var(--gold); color: var(--gold-dk); box-shadow: 0 5px 0 var(--gold-dk), 0 8px 20px var(--gold-soft); }
.btn.ghost {
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--border-2); box-shadow: none; font-size: 13px;
}
.btn.ghost:active { transform: scale(0.97); }
.btn.stamp { background: var(--red); border-color: var(--red); color: #fff; }

/* Legacy gaming button alias */
.btn-game {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 16px; border: none;
  background: var(--red); color: #fff;
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 16px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--red-dk), 0 8px 20px var(--red-glow);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-game:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--red-dk), 0 4px 10px var(--red-glow); }
.btn-game.coin { background: var(--gold); color: #3D2F00; box-shadow: 0 5px 0 var(--gold-dk), 0 8px 20px var(--gold-soft); }

/* ─── CARD ─────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }

/* ─── XP BAR ───────────────────────────────────────────────────────── */
.xp-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.xp-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-dk), var(--red), var(--red-lt));
  box-shadow: 0 0 8px var(--red-glow);
}

/* Legacy xp bar aliases */
.xp-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.15); overflow: hidden; position: relative; }
.xp-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-dk), var(--red), var(--red-lt));
  background-size: 200% 100%;
  animation: xp-shimmer 2.5s linear infinite;
  box-shadow: 0 0 10px var(--red-glow);
}

/* ─── MISC ─────────────────────────────────────────────────────────── */
.no-scroll::-webkit-scrollbar { display: none; }
.no-scroll { scrollbar-width: none; }
.scrollbar::-webkit-scrollbar { width: 0; height: 0; }

.tab-pill {
  display: flex; padding: 3px;
  background: var(--surface-2); border-radius: 999px; border: 1px solid var(--border);
}
.tab-pill button {
  flex: 1; border: none; background: transparent;
  padding: 8px 12px; border-radius: 999px;
  font-family: 'Nunito', system-ui; font-weight: 800; font-size: 13px;
  color: var(--ink-3); cursor: pointer;
}
.tab-pill button.active { background: var(--red); color: #fff; box-shadow: 0 2px 10px var(--red-glow); }

.divider { height: 1px; background: linear-gradient(to right, transparent, var(--border-2), transparent); }

.stamp-mark {
  border: 1.5px solid var(--stamp);
  color: var(--stamp);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-block;
}

.coin-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.08));
  border: 1.5px solid rgba(245,197,24,0.45);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif; font-weight: 900;
  color: var(--coin);
}

/* ─── ANIMATIONS ───────────────────────────────────────────────────── */
@keyframes factBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes factShadow {
  0%,100% { transform: translateX(-50%) scale(1); opacity: 0.4; }
  50%     { transform: translateX(-50%) scale(0.6); opacity: 0.2; }
}
@keyframes pin-bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-11px); }
  60%      { transform: translateY(-5px); }
}
@keyframes pin-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.7); opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes popIn { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes coinFlip { 0%,40%,100%{transform:scaleX(1)} 20%{transform:scaleX(0.1)} }
@keyframes coinFloat { 0%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(-42px)} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes xp-shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes coinSpin { 0%,45%,100%{transform:scaleX(1)} 22%{transform:scaleX(0.12)} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
}

@media (max-width: 500px) {
  body {
    background: #0f0d0a;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #root { align-items: flex-start; height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: hidden; }
}

.screen-transition { animation: slideUp 0.22s ease; }

/* ── Schnitzeljagd hunt target pulse ─────────────────────────── */
@keyframes hunt-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}

.hunt-near .hunt-ring-1,
.hunt-near .hunt-ring-2 {
  animation: hunt-pulse 2s ease-out infinite;
}
.hunt-near .hunt-ring-2 {
  animation-delay: 0.6s;
}

/* ── Coin Marker Animations ──────────────────────────────── */
@keyframes coinFloatFar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
@keyframes coinFloatNear {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
@keyframes coinFloatGold {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes coinShadowNear {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  50%       { transform: scaleX(0.55) scaleY(0.6); opacity: 0.5; }
}
@keyframes coinShadowFar {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  50%       { transform: scaleX(0.65) scaleY(0.7); opacity: 0.55; }
}
@keyframes coinShadowGold {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
  50%       { transform: scaleX(0.6) scaleY(0.65); opacity: 0.5; }
}
@keyframes coinFlyUp {
  0%   { transform: translate(-50%, 0) scale(1.1); opacity: 1; }
  15%  { transform: translate(-50%, -12px) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -220px) scale(0.04); opacity: 0; }
}
@keyframes coinBurstParticle {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: var(--coin-burst-end, translate(0, -30px) scale(0.5)) rotate(540deg); }
}
@keyframes factFlyUp {
  0%   { transform: translateY(105%) scale(0.92); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes coinFloatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -70%) scale(1); }
  80%  { opacity: 1; transform: translate(var(--coin-float-x, 55px), -195%); }
  100% { opacity: 0; transform: translate(var(--coin-float-x, 60px), -210%); }
}
@keyframes coinStampIn {
  0%   { transform: rotate(-8deg) scale(0); opacity: 0; }
  60%  { transform: rotate(-8deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
@keyframes coinVerdientStamp {
  0%   { transform: rotate(-12deg) scale(0); opacity: 0; }
  55%  { transform: rotate(-12deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(-12deg) scale(1); opacity: 0.85; }
}
@keyframes rippleExpand {
  0%   { transform: scale(0); border-radius: 50%; }
  60%  { border-radius: 30%; }
  100% { transform: scale(3); border-radius: 0; }
}
@keyframes coinRevealCard {
  0%   { transform: translateY(60px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes coinCounterBump {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}