/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  --bg-deep:#0d0d1a; --bg-panel:#12122a; --bg-card:#1a1a35;
  --accent:#e8c96e; --accent2:#7c6ef7; --text:#e8e4d4;
  --text-muted:#8884aa; --success:#4caf7d; --danger:#e05c5c;
  --border:rgba(232,201,110,0.18); --radius:10px;
  --font-display:'Cinzel',serif; --font-body:'IBM Plex Mono',monospace;
  --shadow:0 4px 24px rgba(0,0,0,0.55);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.12) 0%,transparent 100%),radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.08) 0%,transparent 100%),radial-gradient(2px 2px at 40% 55%,rgba(232,201,110,.07) 0%,transparent 100%);pointer-events:none;z-index:0}
h1,h2,h3{font-family:var(--font-display);letter-spacing:.05em}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border:1.5px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text);font-family:var(--font-body);font-size:.88rem;letter-spacing:.04em;cursor:pointer;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;white-space:nowrap;user-select:none;text-decoration:none}
.btn:hover{background:rgba(232,201,110,.08);border-color:var(--accent);box-shadow:0 0 12px rgba(232,201,110,.2)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#0d0d1a;border-color:var(--accent);font-weight:500}
.btn-primary:hover{background:#f5d97e;border-color:#f5d97e;box-shadow:0 0 20px rgba(232,201,110,.4)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:rgba(224,92,92,.1)}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
select{background:var(--bg-panel);border:1.5px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-body);font-size:.85rem;padding:8px 12px;cursor:pointer;outline:none;transition:border-color .15s}
select:focus{border-color:var(--accent)}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;letter-spacing:.06em;font-weight:500}
.badge-gold{background:rgba(232,201,110,.18);color:var(--accent)}
.badge-purple{background:rgba(124,110,247,.18);color:var(--accent2)}
.badge-green{background:rgba(76,175,125,.18);color:var(--success)}
.badge-red{background:rgba(224,92,92,.18);color:var(--danger)}
.loader{width:24px;height:24px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .4s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){:root{font-size:14px}.btn{padding:8px 16px}}