/* DMForge shared theme for combat mockups — mirrors src/app/globals.css tokens. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --obsidian: #1e1a17;
  --surface: #12100d;
  --crimson: #c41e3a;
  --crimson-deep: #7a1528;
  --gold: #d4af37;
  --gold-soft: #b8943a;
  --gold-bright: #f3d47a;
  --gold-dim: rgba(212, 175, 55, 0.55);
  --gold-hair: rgba(212, 175, 55, 0.35);
  --gold-faint: rgba(212, 175, 55, 0.14);
  --umber: rgba(139, 101, 42, 0.25);
  --cream: #e8dcc8;
  --cream-dim: rgba(232, 220, 200, 0.62);
  --cream-faint: rgba(232, 220, 200, 0.38);
  --parchment: #f5e6d3;
  --parchment-text: #3c2f1e;
  --heal: #3fbf6a;
  --heal-bright: #7ef0a0;
  --temp: #6fb8ff;
  --panel: rgba(30, 26, 23, 0.85);
  --panel-2: rgba(42, 37, 32, 0.80);
  --panel-3: rgba(50, 43, 37, 0.85);
  --panel-solid: #1c1814;
  --font-heading: 'Cinzel', serif;
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-lore: 'EB Garamond', serif;
  --btn-primary: linear-gradient(180deg, #e2bf4d 0%, #d4af37 45%, #a8872b 100%);
  --btn-primary-text: #1a1207;
  --btn-danger: linear-gradient(180deg, #a82a3e 0%, #7a1528 100%);
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; }

/* page backdrop: the app's grand hall, dimmed */
.forge-backdrop {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 175, 55, 0.10), transparent 70%),
    linear-gradient(rgba(12, 10, 8, 0.72), rgba(12, 10, 8, 0.9)),
    url('../assets/bg-hall.png') center 30% / cover no-repeat;
}
.forge-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%); }

/* top nav — same order + treatment as the live app */
.forge-nav {
  display: flex; align-items: center; gap: 28px; height: 58px; padding: 0 22px;
  background: linear-gradient(180deg, #1a1714, #201c18);
  border-bottom: 1px solid var(--gold-hair);
  position: relative; z-index: 20;
}
.forge-nav .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); color: var(--gold); font-weight: 700; letter-spacing: .06em; }
.forge-nav .brand img { width: 30px; height: 30px; }
.forge-nav nav { display: flex; gap: 24px; font-family: var(--font-heading); font-variant: small-caps; font-size: 15px; letter-spacing: .06em; color: var(--cream-dim); overflow: hidden; white-space: nowrap; }
.forge-nav nav a { color: inherit; text-decoration: none; }
.forge-nav nav a.on { color: var(--gold-bright); text-shadow: 0 0 18px rgba(212,175,55,.45); }
.forge-nav .spacer { flex: 1; }
.forge-nav .concept-switch { display: flex; gap: 6px; }
.forge-nav .concept-switch a { white-space: nowrap; font-family: var(--font-heading); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); text-decoration: none; padding: 6px 10px; border: 1px solid var(--gold-faint); border-radius: 999px; }
.forge-nav .concept-switch a.on { color: var(--btn-primary-text); background: var(--btn-primary); border-color: transparent; }
@media (max-width: 1560px) { .forge-nav nav a:nth-child(n+6) { display: none; } }
@media (max-width: 1280px) { .forge-nav nav { display: none; } }

/* type */
.h-display { font-family: var(--font-display); color: var(--gold); letter-spacing: .06em; }
.h-cinzel { font-family: var(--font-heading); letter-spacing: .08em; }
.eyebrow { font-family: var(--font-heading); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim); }
.lore { font-family: var(--font-lore); }
.num { font-variant-numeric: tabular-nums; }

/* panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--umber);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 239, 213, 0.06), 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.panel-gold { border-color: var(--gold-hair); }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hair), transparent); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  font-family: var(--font-heading); font-variant: small-caps; font-weight: 600; letter-spacing: .08em; font-size: 15px;
  border: 1px solid rgba(212,175,55,.45); background: #2a2520; color: var(--cream);
  transition: transform .15s var(--ease-out), box-shadow .2s, background .2s, border-color .2s, filter .2s;
  user-select: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.25); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { background: var(--btn-primary); color: var(--btn-primary-text); border-color: rgba(255,230,150,.5); box-shadow: 0 0 22px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 0 32px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.danger { background: var(--btn-danger); color: #fdf1dc; border-color: rgba(139,26,43,.7); }
.btn.heal { background: linear-gradient(180deg, #2f8f52, #1d6a3b); color: #eafff0; border-color: rgba(126,240,160,.35); }
.btn.ghost { background: transparent; border-color: var(--gold-faint); color: var(--cream-dim); }
.btn.sm { height: 30px; font-size: 13px; padding: 0 11px; border-radius: 8px; }
.btn.lg { height: 52px; font-size: 19px; padding: 0 26px; border-radius: 14px; }
.btn:disabled { opacity: .4; pointer-events: none; }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font: 600 11px/1 var(--font-body); color: var(--cream-dim); border: 1px solid rgba(232,220,200,.2); border-bottom-width: 2px; border-radius: 5px; background: rgba(0,0,0,.25); }
.btn.primary .kbd { color: #3a2a08; border-color: rgba(58,42,8,.35); background: rgba(255,255,255,.18); }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--gold-hair); color: var(--gold); background: rgba(212,175,55,.08); white-space: nowrap; }
.chip.crimson { color: #ff8a9b; border-color: rgba(196,30,58,.5); background: rgba(196,30,58,.14); }
.chip.green { color: var(--heal-bright); border-color: rgba(63,191,106,.45); background: rgba(63,191,106,.12); }
.chip.blue { color: #a8d4ff; border-color: rgba(111,184,255,.45); background: rgba(111,184,255,.12); }

/* inputs */
.input { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(212,175,55,.25); background: rgba(18,16,13,.7); color: var(--cream); outline: none; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }

/* scrollbars */
.scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.3) transparent; }

/* iconify icons inherit size from font-size */
iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

/* ─── shared FX layer ─── */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.fx-float {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 900; font-size: 34px; letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 18px currentColor;
  -webkit-text-stroke: 1px rgba(0,0,0,.45);
}
.fx-float.dmg { color: #ff4d5e; }
.fx-float.heal { color: var(--heal-bright); }
.fx-float.crit { color: #ffd34d; font-size: 48px; }
.fx-float.miss { color: var(--cream-dim); font-size: 22px; font-weight: 700; font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.fx-float.info { color: var(--gold-bright); font-size: 20px; font-weight: 700; }
.fx-float small { font-size: .45em; letter-spacing: .12em; display: block; text-align: center; opacity: .9; }
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 899; }
.fx-embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

.fx-banner {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 950; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 26px 0;
  background: linear-gradient(90deg, transparent, rgba(12,10,8,.92) 18%, rgba(12,10,8,.92) 82%, transparent);
  border-top: 1px solid var(--gold-hair); border-bottom: 1px solid var(--gold-hair);
}
.fx-banner .t { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 6vw, 78px); letter-spacing: .08em; color: var(--gold); text-shadow: 0 0 40px rgba(212,175,55,.5); }
.fx-banner .s { font-family: var(--font-heading); letter-spacing: .4em; text-transform: uppercase; font-size: 13px; color: var(--cream-dim); }
.fx-banner.blood .t { color: #ff5a6a; text-shadow: 0 0 40px rgba(196,30,58,.7); }
.fx-banner.victory .t { color: var(--gold-bright); }

.toast-stack { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 960; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 16px; border-radius: 12px; background: rgba(28,24,20,.96); border: 1px solid var(--gold-hair); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 14px; }
.toast button { background: none; border: 0; color: var(--gold); font-family: var(--font-heading); font-weight: 700; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; padding: 4px 6px; }

@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.55); } 50% { box-shadow: 0 0 0 10px rgba(212,175,55,0); } }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(196,30,58,.6); } 50% { box-shadow: 0 0 0 10px rgba(196,30,58,0); } }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shake-x { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.shake { animation: shake-x .38s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}