/* ============================================================
   遊戯王Genesys 【非】公式サーバー — Cyber-Duel Design Tokens
   Enhanced Futuristic HUD & Holographic Design System
   ============================================================ */

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

:root {
  /* ---------- Core Theme Backgrounds ---------- */
  --bg:            #050814;            /* Ultra deep cosmic navy */
  --bg-soft:       #0a0f26;            /* Layered elevation 1 */
  --bg-card:       #0e1638;            /* Interactive card surface */
  --bg-input:      #080d22;            /* Input fields */
  --bg-tile:       #0a102b;            /* Hologram plate */
  --panel:         rgba(15, 23, 58, 0.7);
  --panel-glass:   rgba(10, 16, 42, 0.78);
  --panel-hover:   rgba(20, 32, 78, 0.85);

  /* ---------- Borders & Dividers ---------- */
  --border:        rgba(124, 156, 255, 0.16);
  --border-strong: rgba(124, 156, 255, 0.4);
  --border-glow:   rgba(94, 234, 212, 0.5);
  --border-dashed: rgba(124, 156, 255, 0.22);

  /* ---------- Foreground & Typography ---------- */
  --text:          #f1f5f9;            /* Main crisp text */
  --text-bright:   #ffffff;            /* Pure white highlight */
  --muted:         #94a3b8;            /* Secondary labels */
  --muted-2:       #64748b;            /* Sub-captions, mono tags */
  --muted-3:       #334155;            /* Inactive indicators */

  /* ---------- Cyber Accents ---------- */
  --accent:        #6366f1;            /* Neon Indigo */
  --accent-light:  #818cf8;            /* Bright Indigo */
  --accent-2:      #06b6d4;            /* Cyan / Cyber Teal */
  --accent-3:      #a855f7;            /* Electric Purple */
  --accent-aurora: #ec4899;            /* Aurora Pink */
  
  --warn:          #f59e0b;            /* Energy Amber */
  --warn-2:        #ea580c;            /* Burning Orange */
  --danger:        #f43f5e;            /* Over-limit Crimson */
  --danger-2:      #e11d48;            /* Severe Red */
  --ok:            #10b981;            /* Safe Green */
  --ok-2:          #059669;            /* Active Link */
  --discord:       #5865f2;            /* Discord Brand Blue */
  --discord-hover: #4752c4;

  /* ---------- Gradients ---------- */
  --grad-primary:  linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --grad-cyan:     linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --grad-teal:     linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-warn:     linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  --grad-danger:   linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  --grad-hologram: linear-gradient(115deg, transparent 20%, rgba(94, 234, 212, 0.4) 40%, rgba(236, 72, 153, 0.4) 60%, transparent 80%);
  --grad-page:     radial-gradient(1200px 700px at 85% -10%, rgba(99, 102, 241, 0.22), transparent 50%),
                   radial-gradient(1000px 600px at -10% 20%, rgba(6, 182, 212, 0.15), transparent 55%),
                   radial-gradient(900px 800px at 50% 110%, rgba(168, 85, 247, 0.18), transparent 60%),
                   var(--bg);
  --grad-panel:    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  --grad-panel-cyber: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(6, 182, 212, 0.04) 100%);

  /* ---------- Card Types & Point Tints ---------- */
  --tint-monster:    rgba(99, 102, 241, 0.16);
  --tint-monster-fg: #c7d2fe;
  --tint-spell:      rgba(6, 182, 212, 0.16);
  --tint-spell-fg:   #a5f3fc;
  --tint-trap:       rgba(236, 72, 153, 0.16);
  --tint-trap-fg:    #fbcfe8;
  --tint-point:      rgba(16, 185, 129, 0.16);
  --tint-point-fg:   #6ee7b7;

  /* ---------- Radii ---------- */
  --radius-sm:     8px;
  --radius:        14px;
  --radius-md:     18px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --radius-pill:   9999px;

  /* ---------- Shadows & Neon Glows ---------- */
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow:        0 20px 45px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 30px 60px rgba(0, 0, 0, 0.65);
  --glow-accent:   0 0 25px rgba(99, 102, 241, 0.45);
  --glow-cyan:     0 0 25px rgba(6, 182, 212, 0.45);
  --glow-aurora:   0 0 30px rgba(236, 72, 153, 0.35);
  --glow-point:    0 0 20px rgba(16, 185, 129, 0.4);

  /* ---------- Motion & Timing ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      0.16s;
  --dur-med:       0.28s;
  --dur-slow:      0.5s;

  /* ---------- Typography ---------- */
  --font-sans:     "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:     "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-cyber:    "Orbitron", "Inter", sans-serif;
}

/* Base Types */
html { color-scheme: dark; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--grad-page);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.t-h1  { font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.t-h2  { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.t-h3  { font-size: 15px; font-weight: 800; margin: 0; }
.t-stat-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; font-family: var(--font-mono); }
.t-stat-v { font-size: 32px; font-weight: 900; font-family: var(--font-cyber); }
.t-stat-s { font-size: 12px; color: var(--muted-2); }
.t-body   { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.t-label  { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.t-section{ font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--accent-2); text-transform: uppercase; font-family: var(--font-mono); }
.t-helper { font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.t-pill   { font-size: 11px; font-weight: 700; color: var(--muted); }
.t-badge  { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; font-family: var(--font-mono); }
.t-mono   { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
.t-cyber  { font-family: var(--font-cyber); }