:root{--bg-primary: #0B0E14;--bg-secondary: #141923;--bg-card: rgba(26, 33, 46, .7);--bg-card-border: rgba(255, 255, 255, .08);--accent-gold: #E5B869;--accent-gold-glow: rgba(229, 184, 105, .25);--accent-crimson: #E64A19;--accent-blue: #3B82F6;--accent-green: #10B981;--accent-purple: #8B5CF6;--text-main: #F1F5F9;--text-muted: #94A3B8;--text-gold: #F6D58D;--font-heading: "Cinzel", serif;--font-body: "Inter", sans-serif;--font-mono: "Fira Code", monospace;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-main);font-family:var(--font-body);min-height:100vh;background-image:radial-gradient(circle at 50% 0%,rgba(229,184,105,.08) 0%,transparent 70%),radial-gradient(circle at 100% 100%,rgba(139,92,246,.05) 0%,transparent 50%);background-attachment:fixed;overflow-x:hidden}.glass-panel{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--bg-card-border);border-radius:var(--radius-md);box-shadow:0 8px 32px #0000005e}.gold-border{border:1px solid rgba(229,184,105,.3)}.glow-gold{box-shadow:0 0 15px var(--accent-gold-glow)}h1,h2,h3,h4,.font-heading{font-family:var(--font-heading);letter-spacing:.05em;color:var(--text-gold)}.app-container{width:100vw;max-width:100vw;margin:0;padding:16px 24px;min-height:100vh;display:flex;flex-direction:column;gap:16px}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}.game-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px;flex:1}@media (max-width: 1024px){.game-grid{grid-template-columns:1fr}}.btn{background:linear-gradient(135deg,#e5b86926,#e5b8690d);border:1px solid var(--accent-gold);color:var(--text-gold);padding:12px 20px;border-radius:var(--radius-sm);font-family:var(--font-heading);font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:8px;justify-content:center}.btn:hover{background:linear-gradient(135deg,#e5b8694d,#e5b8691a);box-shadow:0 0 15px var(--accent-gold-glow);transform:translateY(-2px)}.btn-crimson{background:linear-gradient(135deg,#e64a1933,#e64a190d);border-color:var(--accent-crimson);color:#ff8a65}.btn-crimson:hover{background:linear-gradient(135deg,#e64a1966,#e64a1926);box-shadow:0 0 15px #e64a194d}.btn-blue{background:linear-gradient(135deg,#3b82f633,#3b82f60d);border-color:var(--accent-blue);color:#93c5fd}.btn-blue:hover{background:linear-gradient(135deg,#3b82f666,#3b82f626);box-shadow:0 0 15px #3b82f64d}.progress-bar-container{height:10px;background:#0006;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.1);position:relative}.progress-bar-fill{height:100%;transition:width .4s ease-out;border-radius:5px}.bg-hp{background:linear-gradient(90deg,#dc2626,#ef4444);box-shadow:0 0 8px #ef444480}.bg-xp{background:linear-gradient(90deg,#7c3aed,#a855f7);box-shadow:0 0 8px #a855f780}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out forwards}