/* ============================================================
   TORCHLIT — D&D Companion design system
   ============================================================ */

:root {
  --background: 20 14% 6%;        /* near-black, warm */
  --surface: 24 16% 10%;          /* panel base */
  --foreground: 40 30% 92%;       /* warm parchment white */
  --muted-foreground: 40 10% 58%;
  --primary: 38 92% 55%;          /* ember gold */
  --primary-foreground: 20 14% 6%;
  --damage: 0 78% 48%;            /* blood red */
  --heal: 145 60% 45%;            /* emerald */
  --border: 38 24% 22%;
  --card-glow: 38 92% 55%;

  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;

  /* tweakable */
  --glass-tint: 0.02;
  --shake-scale: 1;
}

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

html, body {
  height: 100%;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; overflow-x: hidden; }

#root { height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; overflow-x: hidden; }

h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: 0.02em; }

::selection { background: hsl(var(--primary) / 0.35); color: hsl(var(--foreground)); }

/* scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border) / 0.7); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.5); }

/* ============================================================
   LIQUID GLASS — shared primitive
   ============================================================ */
.liquid-glass {
  background: rgba(255, 220, 160, var(--glass-tint));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 220, 160, 0.12),
              0 8px 30px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,210,140,0.5) 0%, rgba(255,210,140,0.15) 25%,
    rgba(255,210,140,0) 45%, rgba(255,210,140,0) 55%,
    rgba(255,210,140,0.15) 75%, rgba(255,210,140,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* glass that reacts to hover/press */
.glass-btn { cursor: pointer; transition: transform .15s ease, filter .2s ease; user-select: none; }
.glass-btn:hover { filter: brightness(1.25); }
.glass-btn:active { transform: scale(0.96); }
.glass-btn[disabled], .glass-btn.disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================
   ANIMATIONS — entrance
   ============================================================ */
@keyframes fade-rise { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform: translateY(0);} }
.animate-fade-rise { animation: fade-rise 0.7s ease-out both; }
/* never let the entrance animation trap content invisible for reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .animate-fade-rise { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   DAMAGE
   ============================================================ */
@keyframes damage-flash { 0%{opacity:0;} 15%{opacity:0.75;} 100%{opacity:0;} }
.fx-damage {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, hsl(var(--damage)/0.9) 100%);
  animation: damage-flash 0.6s ease-out forwards;
}
@keyframes shake {
  0%,100%{transform:translate(0,0);} 20%{transform:translate(calc(-7px * var(--shake-scale)), calc(4px * var(--shake-scale)));}
  40%{transform:translate(calc(7px * var(--shake-scale)), calc(-4px * var(--shake-scale)));}
  60%{transform:translate(calc(-5px * var(--shake-scale)), calc(2px * var(--shake-scale)));}
  80%{transform:translate(calc(5px * var(--shake-scale)), calc(-2px * var(--shake-scale)));}
}
.fx-shake { animation: shake 0.4s ease-in-out; }

/* ============================================================
   HEAL
   ============================================================ */
@keyframes heal-pulse { 0%{opacity:0;} 25%{opacity:0.6;} 100%{opacity:0;} }
.fx-heal {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, hsl(var(--heal)/0.7) 100%);
  animation: heal-pulse 1s ease-out forwards;
}

/* Floating combat numbers */
@keyframes float-up {
  0%{opacity:0;transform:translate(-50%,0) scale(0.8);}
  20%{opacity:1;transform:translate(-50%,-12px) scale(1.15);}
  100%{opacity:0;transform:translate(-50%,-70px) scale(1);}
}
.fx-float-num {
  position: fixed; left:50%; top:42%; z-index:9991;
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(2.5rem,12vw,5rem);
  animation: float-up 1.1s ease-out forwards;
}
.fx-float-num.dmg { color: hsl(var(--damage)); text-shadow: 0 0 24px hsl(var(--damage)/0.7); }
.fx-float-num.heal { color: hsl(var(--heal)); text-shadow: 0 0 24px hsl(var(--heal)/0.7); }

/* ============================================================
   DEATH
   ============================================================ */
.is-dead { filter: grayscale(1) brightness(0.55); transition: filter 1.1s ease; }
@keyframes death-settle {
  0%{opacity:0;transform:scale(1.5);letter-spacing:.6em;}
  60%{opacity:1;}
  100%{opacity:1;transform:scale(1);letter-spacing:.18em;}
}
.fx-dead-overlay { position: fixed; inset:0; z-index:10000; background: rgba(0,0,0,0.82); display:grid; place-items:center; }
.fx-dead-text {
  font-family: var(--font-display); font-weight:700; color: hsl(var(--damage));
  font-size: clamp(4rem,20vw,11rem); text-shadow:0 0 50px hsl(var(--damage)/0.6);
  animation: death-settle 1.3s ease-out forwards;
}
.fx-dead-sub { font-family: var(--font-body); color: hsl(var(--muted-foreground)); margin-top: 1.5rem; letter-spacing:.3em; text-transform: uppercase; font-size: 0.8rem; }

/* ============================================================
   REVIVE
   ============================================================ */
@keyframes revive-burst {
  0%{opacity:0;transform:scale(0.5);}
  35%{opacity:1;transform:scale(1.15);}
  100%{opacity:0;transform:scale(1);}
}
.fx-revive-overlay { position: fixed; inset:0; z-index:10000; display:grid; place-items:center; background: radial-gradient(circle at center, hsl(var(--primary)/0.25), transparent 60%); }
.fx-revive-text {
  font-family: var(--font-display); font-weight:700; color: hsl(var(--primary));
  font-size: clamp(3.5rem,16vw,9rem); text-shadow:0 0 60px hsl(var(--primary)/0.9);
  animation: revive-burst 1.6s ease-out forwards;
}

/* ============================================================
   INTEL pulse
   ============================================================ */
@keyframes intel-pulse { 0%,100%{box-shadow:0 0 0 0 hsl(var(--primary)/0.6);} 50%{box-shadow:0 0 0 14px hsl(var(--primary)/0);} }
.fx-intel-pulse { animation: intel-pulse 1.4s ease-out infinite; }

/* COINS shimmer */
@keyframes coin-shimmer { 0%{transform:scale(1);filter:brightness(1);} 40%{transform:scale(1.18);filter:brightness(1.8);} 100%{transform:scale(1);filter:brightness(1);} }
.fx-coin { animation: coin-shimmer 0.6s ease-out; }

/* ============================================================
   SCENE transitions (Main screen)
   ============================================================ */
@keyframes scene-fade { from{opacity:0;} to{opacity:1;} }
.scene-enter { animation: scene-fade 1.2s ease-out; }
@keyframes letterbox-in { from{transform:scaleY(0);} to{transform:scaleY(1);} }
.letterbox { position:absolute; left:0; right:0; height:12%; background:#000; z-index:50; transform-origin:center; transform: scaleY(0); }
.letterbox.top { top:0; transform-origin: top; }
.letterbox.bottom { bottom:0; transform-origin: bottom; }
.letterbox.show { animation: letterbox-in 0.5s ease-out forwards; }
.letterbox.hide { animation: letterbox-in 0.5s ease-out reverse forwards; }

/* enemy hit */
@keyframes enemy-hit { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px);} 50%{transform:translateX(8px);} 75%{transform:translateX(-5px);} }
.fx-enemy-hit { animation: enemy-hit 0.35s ease-in-out; }
.fx-enemy-dead { filter: grayscale(1) brightness(0.4); opacity: 0.5; transition: all 1s ease; }

@keyframes beat-flash { 0%{filter:brightness(1);transform:scale(1);} 50%{filter:brightness(2);transform:scale(1.1);} 100%{filter:brightness(1);transform:scale(1);} }
.beat-active { background: hsl(var(--primary)) !important; box-shadow: 0 0 24px hsl(var(--primary)/0.8) !important; animation: beat-flash .3s ease; }

/* ============================================================
   UTILITY
   ============================================================ */
.vignette::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(ellipse at center, transparent 35%, hsl(var(--background)/0.9) 100%);
}
.gold { color: hsl(var(--primary)); }
.muted { color: hsl(var(--muted-foreground)); }
.dmg-text { color: hsl(var(--damage)); }
.heal-text { color: hsl(var(--heal)); }

.pill {
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius: 999px; padding: .4rem .85rem;
}
.tag {
  font-family: var(--font-body); font-size: .62rem; letter-spacing:.18em;
  text-transform: uppercase; color: hsl(var(--muted-foreground));
}

.section-label {
  font-family: var(--font-display); font-weight:700;
  letter-spacing:.14em; text-transform: uppercase;
  color: hsl(var(--primary)); font-size: .78rem;
}

.divider { height:1px; background: hsl(var(--border)/0.6); border:none; }

/* generic input */
.tinput {
  background: hsl(var(--background)/0.6); border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)); border-radius: 8px; padding: .4rem .6rem;
  font-family: var(--font-body); font-size: .85rem; outline:none; width:100%;
}
.tinput:focus { border-color: hsl(var(--primary)/0.7); }
select.tinput { cursor: pointer; }

/* stepper button */
.stepper {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  display:grid; place-items:center; font-size: 1.1rem; line-height:1;
  font-family: var(--font-display); font-weight: 700;
}

.danger-outline { box-shadow: inset 0 0 0 1px hsl(var(--damage)/0.6) !important; color: hsl(var(--damage)); }
.heal-outline { box-shadow: inset 0 0 0 1px hsl(var(--heal)/0.6) !important; color: hsl(var(--heal)); }

.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width: none; }