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

/* ══════════════════════════════════════════════════════
   IRONBOUND — Global Design System
   Tone: AAA Dark Fantasy · Gold on Void · Cinematic
══════════════════════════════════════════════════════ */

:root {
  --void:      #05030A;
  --void2:     #0a0712;
  --gold:      #D4AF37;
  --gold-dim:  rgba(212,175,55,0.12);
  --gold-glow: rgba(212,175,55,0.4);
  --crimson:   #8B1A1A;
  --text:      #E8D5A3;
  --text2:     #9a865d;  /* lifted for WCAG AA (~4.5:1 on --void) */
  --border:    rgba(212,175,55,0.14);
  --panel:     rgba(10,7,18,0.94);
}

/* ── Accessibility: visible keyboard focus (all pages) ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Accessibility: respect reduced-motion (all pages) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Font utilities ── */
.font-cinzel      { font-family: 'Cinzel', serif; }
.font-cinzel-deco { font-family: 'Cinzel Decorative', serif; }
.font-crimson     { font-family: 'Crimson Text', serif; }
.font-raj         { font-family: 'Rajdhani', sans-serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #060309; }
::-webkit-scrollbar-thumb { background: #2e1f08; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8B6914; }
::selection { background: rgba(212,175,55,0.22); color: #E8D5A3; }

/* ══════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════ */

@keyframes goldPulse {
  0%,100% { text-shadow: 0 0 18px rgba(212,175,55,0.5), 0 0 40px rgba(212,175,55,0.2); }
  50%      { text-shadow: 0 0 32px rgba(212,175,55,0.9), 0 0 65px rgba(212,175,55,0.38), 0 0 110px rgba(212,175,55,0.12); }
}
@keyframes goldShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes shimmerSweep {
  0%   { left: -120%; }
  100% { left: 220%; }
}
@keyframes btnGlowPulse {
  0%,100% { box-shadow: 0 0 14px rgba(212,175,55,0.3), 0 2px 8px rgba(0,0,0,0.7); }
  50%      { box-shadow: 0 0 32px rgba(212,175,55,0.6), 0 2px 8px rgba(0,0,0,0.7); }
}
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 0 22px rgba(212,175,55,0.4), 0 0 60px rgba(212,175,55,0.14), 0 4px 16px rgba(0,0,0,0.8); }
  50%      { box-shadow: 0 0 42px rgba(212,175,55,0.7), 0 0 100px rgba(212,175,55,0.28), 0 4px 16px rgba(0,0,0,0.8); }
}
@keyframes alertIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes shake {
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-7px) }
  40%{ transform:translateX(7px) }
  60%{ transform:translateX(-4px) }
  80%{ transform:translateX(4px) }
}
@keyframes borderBeam {
  to { --beam-angle: 360deg; }
}
@property --beam-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

@keyframes navGlow {
  0%,100% { opacity:0.75; }
  50%      { opacity:1; }
}
@keyframes barShine {
  0%,100% { opacity:0.5; }
  50%      { opacity:1; }
}
@keyframes orbitRune {
  from { transform:rotate(0deg) translateX(26px) rotate(0deg); }
  to   { transform:rotate(360deg) translateX(26px) rotate(-360deg); }
}

/* ══════════════════════════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════════════════════════ */
.cursor-ring {
  position:fixed; pointer-events:none; z-index:9999;
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid rgba(212,175,55,0.7);
  transform:translate(-50%,-50%);
  transition:width 0.18s, height 0.18s, border-color 0.18s, opacity 0.18s;
  will-change:left,top;
  mix-blend-mode:screen;
}
.cursor-dot {
  position:fixed; pointer-events:none; z-index:10000;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  transform:translate(-50%,-50%);
  will-change:left,top;
}
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring,
body:has(input:focus) .cursor-ring {
  width:44px; height:44px; border-color:var(--gold);
  box-shadow: 0 0 12px rgba(212,175,55,0.4);
}

/* ══════════════════════════════════════════════════════
   NOISE GRAIN OVERLAY
══════════════════════════════════════════════════════ */
.noise-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:998;
  opacity:0.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ══════════════════════════════════════════════════════
   CLICK RIPPLE
══════════════════════════════════════════════════════ */
.ripple-spawn {
  position:fixed; pointer-events:none; z-index:9990; border-radius:50%;
  border:1px solid rgba(212,175,55,0.5);
  width:1px; height:1px;
  transform:translate(-50%,-50%) scale(0);
  animation:rippleOut 0.7s ease-out forwards;
}
@keyframes rippleOut {
  to { transform:translate(-50%,-50%) scale(80); opacity:0; }
}

/* ══════════════════════════════════════════════════════
   TEXT EFFECTS
══════════════════════════════════════════════════════ */
.gold-glow        { text-shadow:0 0 20px rgba(212,175,55,0.5),0 0 40px rgba(212,175,55,0.2); }
.gold-glow-pulse  { animation:goldPulse 3.5s ease-in-out infinite; }

.gold-gradient-text {
  background:linear-gradient(90deg,
    #8B6914 0%,#D4AF37 25%,#FFF8C0 45%,#D4AF37 55%,#FFF8C0 70%,#D4AF37 85%,#8B6914 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldShimmer 5s linear infinite;
}

.fade-in-up   { animation:fadeInUp 0.7s ease-out forwards; }
.fade-in-up-2 { opacity:0; animation:fadeInUp 0.7s ease-out 0.15s forwards; }
.fade-in-up-3 { opacity:0; animation:fadeInUp 0.7s ease-out 0.3s  forwards; }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.rpg-btn {
  position:relative; overflow:hidden; cursor:pointer;
  transition:filter 0.2s, transform 0.12s;
  will-change:transform;
}
.rpg-btn::after {
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:skewX(-20deg); pointer-events:none;
}
.rpg-btn:hover::after { animation:shimmerSweep 0.55s ease forwards; }
.rpg-btn:active { transform:scale(0.972) !important; }

.rpg-btn-primary { animation:btnGlowPulse 2.8s ease-in-out infinite; }
.rpg-btn-primary:hover {
  filter:brightness(1.18); animation:none;
  box-shadow:0 0 40px rgba(212,175,55,0.7),0 2px 8px rgba(0,0,0,0.7);
}
.rpg-btn-primary-lg {
  animation:ctaGlow 2.5s ease-in-out infinite;
  font-size:1rem; letter-spacing:0.35em;
}
.rpg-btn-primary-lg:hover {
  animation:none;
  box-shadow:0 0 55px rgba(212,175,55,0.85),0 0 120px rgba(212,175,55,0.32),0 4px 16px rgba(0,0,0,0.8);
  filter:brightness(1.2); transform:translateY(-2px);
}
.rpg-btn-ghost {
  transition:border-color 0.3s,color 0.3s,filter 0.2s,transform 0.12s,box-shadow 0.3s;
}
.rpg-btn-ghost:hover {
  border-color:rgba(212,175,55,0.6)!important;
  box-shadow:0 0 22px rgba(212,175,55,0.18),inset 0 0 14px rgba(212,175,55,0.06);
  filter:brightness(1.1);
}

/* Border-beam wrapper for CTA */
.beam-wrap { position:relative; }
.beam-wrap::before {
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; padding:1px;
  background:conic-gradient(from var(--beam-angle,0deg),
    rgba(212,175,55,0.08) 0%,rgba(212,175,55,0.08) 72%,
    rgba(255,248,200,1) 83%,rgba(212,175,55,0.9) 91%,
    rgba(212,175,55,0.08) 100%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderBeam 3.5s linear infinite;
  opacity:0; transition:opacity 0.3s;
}
.beam-wrap:hover::before { opacity:1; }

/* ══════════════════════════════════════════════════════
   INPUTS
══════════════════════════════════════════════════════ */
.rpg-input:focus {
  outline:none; border-color:rgba(212,175,55,0.6)!important;
  box-shadow:0 0 0 2px rgba(212,175,55,0.1),inset 0 0 12px rgba(212,175,55,0.04);
}
.rpg-input::placeholder { color:#3a2a12; }

.input-line {
  position:absolute; bottom:0; left:0; width:0; height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0.35));
  transition:width 0.35s ease; pointer-events:none;
}
.input-wrap { position:relative; }
.input-wrap:focus-within .input-line { width:100%; }

/* ══════════════════════════════════════════════════════
   PANELS / FRAMES
══════════════════════════════════════════════════════ */
.rpg-panel {
  background:linear-gradient(145deg,rgba(18,13,8,0.97),rgba(8,5,14,0.98));
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.rpg-panel::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(212,175,55,0.04) 0%,transparent 55%);
}

.rpg-frame { position:relative; }
.rpg-corner {
  position:absolute; width:18px; height:18px;
  border-color:rgba(212,175,55,0.5); border-style:solid; pointer-events:none; z-index:2;
  transition:border-color 0.3s;
}
.rpg-frame:hover .rpg-corner { border-color:rgba(212,175,55,0.85); }
.rpg-corner-tl { top:-1px;    left:-1px;  border-width:2px 0 0 2px; }
.rpg-corner-tr { top:-1px;    right:-1px; border-width:2px 2px 0 0; }
.rpg-corner-bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; }
.rpg-corner-br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

/* ══════════════════════════════════════════════════════
   3D TILT CARD (faction / hero cards)
══════════════════════════════════════════════════════ */
.tilt-card {
  transform-style:preserve-3d;
  transition:transform 0.1s ease, box-shadow 0.25s;
  will-change:transform;
  cursor:pointer;
}
.tilt-card:hover {
  box-shadow:0 20px 60px rgba(0,0,0,0.8),0 0 30px rgba(212,175,55,0.15);
}
.tilt-card-inner { transform:translateZ(12px); }

/* ══════════════════════════════════════════════════════
   ALERT STATES
══════════════════════════════════════════════════════ */
.alert-success-rpg {
  animation:alertIn 0.35s ease forwards;
  background:rgba(20,70,20,0.35); border:1px solid rgba(50,180,50,0.35); color:#7ddd7d;
}
.alert-info-rpg {
  animation:alertIn 0.35s ease forwards;
  background:rgba(20,40,90,0.35); border:1px solid rgba(60,100,220,0.35); color:#8ab4f8;
}
.alert-error-rpg {
  animation:alertIn 0.35s ease forwards;
  background:rgba(120,20,20,0.3); border:1px solid rgba(180,40,40,0.4); color:#f87171;
}
.shake { animation:shake 0.4s ease; }

/* ══════════════════════════════════════════════════════
   SUCCESS SEAL (register)
══════════════════════════════════════════════════════ */
.check-circle { stroke-dasharray:160; stroke-dashoffset:160; animation:checkDraw 0.6s ease forwards 0.1s; }
.check-mark   { stroke-dasharray:50;  stroke-dashoffset:50;  animation:checkDraw 0.4s ease forwards 0.7s; }

@keyframes sealPulse {
  0%,100% { filter:drop-shadow(0 0 8px rgba(212,175,55,0.4))  drop-shadow(0 0 20px rgba(212,175,55,0.15)); }
  50%      { filter:drop-shadow(0 0 18px rgba(212,175,55,0.7)) drop-shadow(0 0 45px rgba(212,175,55,0.3)); }
}
.seal-icon { animation:sealPulse 2.5s ease-in-out infinite 0.9s; }

@keyframes successFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes runeSpinIn  { from{opacity:0;transform:scale(0.5) rotate(-30deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes textReveal  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.success-panel { animation:successFadeIn 0.6s ease forwards; }
.success-rune  { animation:runeSpinIn 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards 0.2s; opacity:0; }
.success-title { animation:textReveal 0.5s ease forwards 0.6s; opacity:0; }
.success-body  { animation:textReveal 0.5s ease forwards 0.8s; opacity:0; }
.success-link  { animation:textReveal 0.5s ease forwards 1.0s; opacity:0; }

/* ══════════════════════════════════════════════════════
   GAME UI — Top Bar / Nav
══════════════════════════════════════════════════════ */
@keyframes logo-breathe {
  0%,100% { text-shadow:0 0 20px rgba(212,175,55,0.55),0 0 45px rgba(212,175,55,0.2); }
  50%      { text-shadow:0 0 32px rgba(212,175,55,0.9),0 0 70px rgba(212,175,55,0.35),0 0 110px rgba(180,120,10,0.12); }
}
.logo { animation:logo-breathe 3.5s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════
   IDLE BAR SYSTEM
══════════════════════════════════════════════════════ */
.idle-bar-track { height:5px; background:rgba(212,175,55,0.07); border-radius:3px; overflow:hidden; box-shadow:inset 0 0 10px rgba(0,0,0,0.5); }
.idle-bar-fill  {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,rgba(120,70,5,0.7) 0%,rgba(212,175,55,0.9) 55%,rgba(255,200,70,1) 100%);
  box-shadow:0 0 14px rgba(212,175,55,0.65),0 0 30px rgba(212,175,55,0.2);
  transition:width 1.4s cubic-bezier(0.25,1,0.5,1);
  position:relative;
}
.idle-bar-fill::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:20px;
  background:linear-gradient(to right,transparent,rgba(255,240,150,0.8));
  animation:barShine 2s ease-in-out infinite;
}
.idle-bar-fill.capped {
  background:linear-gradient(90deg,#D4AF37,#f5a623);
  animation:btnGlowPulse 2s ease-in-out infinite;
}

/* Google OAuth */
.rpg-btn-google {
  background:rgba(255,255,255,0.03); border:1px solid rgba(212,175,55,0.18)!important; color:#8B7355;
  transition:background 0.25s,border-color 0.25s,color 0.25s,box-shadow 0.25s;
}
.rpg-btn-google:hover {
  background:rgba(255,255,255,0.06)!important; border-color:rgba(212,175,55,0.5)!important;
  color:var(--gold)!important; box-shadow:0 0 22px rgba(212,175,55,0.14),inset 0 0 14px rgba(212,175,55,0.05);
}

/* Faction pip colors (kept for game.ejs) */
.faction-pip.f-light:hover  .faction-pip-icon { box-shadow:0 0 20px rgba(255,220,80,0.5);  border-color:rgba(255,220,80,0.45); }
.faction-pip.f-shadow:hover .faction-pip-icon { box-shadow:0 0 20px rgba(130,60,255,0.5);  border-color:rgba(130,60,255,0.45); }
.faction-pip.f-forest:hover .faction-pip-icon { box-shadow:0 0 20px rgba(50,200,80,0.5);   border-color:rgba(50,200,80,0.45); }
.faction-pip.f-undead:hover .faction-pip-icon { box-shadow:0 0 20px rgba(150,150,200,0.5); border-color:rgba(150,150,200,0.45); }
.faction-pip.f-inferno:hover .faction-pip-icon{ box-shadow:0 0 20px rgba(255,80,20,0.5);   border-color:rgba(255,80,20,0.45); }
.faction-pip.f-void:hover   .faction-pip-icon { box-shadow:0 0 20px rgba(140,0,255,0.5);   border-color:rgba(140,0,255,0.45); }

/* Backward compat */
.bg-texture::before { content:''; position:fixed; inset:0; background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px); pointer-events:none; z-index:0; }