@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700&display=swap');
:root {
  --bg-dark: #0d0a0e; --bg-medium: #1a1320; --bg-panel: #241a2e; --bg-panel-light: #2f2340;
  --gold: #c9963c; --gold-bright: #ffd666; --blood: #8c2020; --blood-bright: #cc3333;
  --text: #e8d5c4; --text-dim: #9a8a7a; --text-disabled: #5a4a4a;
  --hp-green: #4a8c4a; --mana-blue: #3a5a8c; --xp-purple: #6a3a8c;
  --common: #888; --uncommon: #44aa44; --rare: #4488cc; --epic: #aa44cc; --legendary: #ccaa22; --cursed: #cc2222;
  --font-pixel: 'Press Start 2P', monospace; --font-ui: 'Inter', sans-serif;
  --radius: 4px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-dark); color:var(--text); font-family:var(--font-ui); min-height:100vh; }
h1,h2,h3 { font-family:var(--font-pixel); color:var(--gold); }
h1 { font-size:1.2rem; } h2 { font-size:0.85rem; } h3 { font-size:0.7rem; }
a { color:var(--gold); text-decoration:none; }
button,.btn { background:var(--bg-panel-light); color:var(--gold); border:1px solid var(--gold); padding:8px 16px; border-radius:var(--radius); cursor:pointer; font-family:var(--font-pixel); font-size:0.6rem; transition:all .2s; }
button:hover,.btn:hover { background:var(--gold); color:var(--bg-dark); }
button.primary { background:var(--blood); border-color:var(--blood-bright); color:#fff; }
button.primary:hover { background:var(--blood-bright); }
button:disabled { opacity:.4; cursor:not-allowed; }
input,select { background:var(--bg-dark); color:var(--text); border:1px solid var(--bg-panel-light); padding:8px 12px; border-radius:var(--radius); font-family:var(--font-ui); font-size:.9rem; width:100%; }
input:focus,select:focus { outline:none; border-color:var(--gold); }
.container { max-width:900px; margin:0 auto; padding:12px; }
.panel { background:var(--bg-panel); border:1px solid var(--bg-panel-light); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--bg-panel-light); }
.grid { display:grid; gap:8px; } .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:1fr 1fr 1fr; }
.stat-bar { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:.85rem; }
.stat-bar .label { min-width:40px; font-weight:700; color:var(--gold); }
.stat-bar .bar { flex:1; height:10px; background:var(--bg-dark); border-radius:2px; overflow:hidden; }
.stat-bar .bar .fill { height:100%; border-radius:2px; transition:width .3s; }
.stat-bar .val { min-width:30px; text-align:right; font-size:.8rem; }
.fill-str { background:var(--blood-bright); } .fill-dex { background:var(--gold); } .fill-agi { background:var(--hp-green); }
.fill-con { background:#8b6914; } .fill-int { background:var(--mana-blue); } .fill-cha { background:var(--xp-purple); }
.fill-hp { background:var(--hp-green); } .fill-xp { background:var(--xp-purple); } .fill-gold { background:var(--gold); }
.class-card { text-align:center; padding:16px; cursor:pointer; transition:all .2s; border:2px solid transparent; }
.class-card:hover,.class-card.selected { border-color:var(--gold); background:var(--bg-panel-light); }
.class-card h3 { margin:8px 0 4px; } .class-card p { font-size:.75rem; color:var(--text-dim); }
.class-icon { font-size:2.5rem; }
.item-row { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid var(--bg-dark); cursor:pointer; }
.item-row:hover { background:var(--bg-panel-light); }
.item-row .rarity-dot { width:8px; height:8px; border-radius:50%; }
.item-row .details { flex:1; } .item-row .details .name { font-weight:600; } .item-row .details .sub { font-size:.75rem; color:var(--text-dim); }
.item-row .actions { display:flex; gap:4px; }
.item-row .actions button { font-size:.5rem; padding:4px 8px; }
.battle-log { max-height:300px; overflow-y:auto; font-size:.75rem; }
.battle-log .turn { padding:4px 0; border-bottom:1px solid var(--bg-dark); }
.battle-log .crit { color:var(--gold-bright); font-weight:700; }
.battle-log .dodge { color:var(--hp-green); font-style:italic; }
.battle-log .block { color:var(--mana-blue); }
.nav-bar { display:flex; justify-content:center; gap:2px; padding:8px; background:var(--bg-medium); position:sticky; top:36px; z-index:100; border-bottom:1px solid var(--bg-panel-light); flex-wrap:wrap; }
.nav-bar button { font-size:.5rem; padding:6px 10px; border:none; background:transparent; color:var(--text-dim); }
.nav-bar button.active { color:var(--gold); border-bottom:2px solid var(--gold); }
.nav-bar button:hover { color:var(--gold-bright); background:transparent; }
.top-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg-medium); border-bottom:1px solid var(--bg-panel-light); font-size:.75rem; }
.top-bar .gold { color:var(--gold); } .top-bar .gems { color:var(--mana-blue); }
.opponent-card { padding:12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.opponent-card .info { flex:1; } .opponent-card .info .name { font-weight:700; font-size:.9rem; }
.opponent-card .info .meta { font-size:.75rem; color:var(--text-dim); }
.result-panel { text-align:center; padding:24px; }
.result-panel.win { border-color:var(--hp-green); } .result-panel.lose { border-color:var(--blood); }
.result-panel h2 { font-size:1.1rem; margin-bottom:12px; }
.result-panel .rewards { font-size:.85rem; color:var(--gold); margin:8px 0; }
.toast { position:fixed; top:20px; right:20px; background:var(--bg-panel); border:1px solid var(--gold); padding:12px 20px; border-radius:var(--radius); z-index:999; animation:fadeIn .3s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.hidden { display:none!important; }
@media(max-width:600px) { .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr 1fr;} h1{font-size:.9rem;} }

/* === FULL PAGE BACKGROUND === */
body { background-color:var(--bg-dark); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
#bg-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(13,10,14,0.72); z-index:0; pointer-events:none; }
#auth-screen, #game-screen { position:relative; z-index:2; }
.top-bar { background:rgba(18,12,22,0.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(201,150,60,0.2); }
.nav-bar { background:rgba(18,12,22,0.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(201,150,60,0.15); z-index:100; }
.panel { background:rgba(30,20,40,0.9); backdrop-filter:blur(4px); border:1px solid rgba(201,150,60,0.12); box-shadow:0 2px 12px rgba(0,0,0,0.4); }

/* === POLISHED UI === */
.panel { transition: border-color 0.2s; }
.panel:hover { border-color:rgba(201,150,60,0.25); }
.panel-header { border-bottom:1px solid rgba(201,150,60,0.15); }
.panel-header h2 { font-size:0.8rem; letter-spacing:1px; }
h3 { letter-spacing:0.5px; }
.stat-bar { padding:3px 0; }
.stat-bar .bar { height:14px; border-radius:3px; border:1px solid rgba(255,255,255,0.05); }
.stat-bar .fill { border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }
.stat-bar .label { font-size:.82rem; min-width:100px; }
.stat-bar .val { font-size:.85rem; font-weight:600; color:var(--gold); min-width:35px; }
button,.btn { letter-spacing:0.5px; text-transform:uppercase; transition:all .2s; border-radius:3px; }
button:hover,.btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(201,150,60,0.3); }
button.primary { background:linear-gradient(180deg,#a02020,#701515); border-color:#cc3333; }
button.primary:hover { background:linear-gradient(180deg,#cc3333,#a02020); }
.item-row { border-radius:4px; transition:background .2s; border-bottom:1px solid rgba(201,150,60,0.08); }
.opponent-card { border-radius:4px; transition:border-color .2s; }
.opponent-card:hover { border-color:rgba(201,150,60,0.3); }
.top-bar { font-size:.8rem; padding:10px 16px; }
.nav-bar button { font-size:.55rem; padding:8px 12px; border-radius:0; border:none; transition:all .15s; letter-spacing:0.5px; }
.nav-bar button.active { color:var(--gold-bright); border-bottom:2px solid var(--gold); background:rgba(201,150,60,0.08); }
.nav-bar button:hover { color:var(--gold); background:rgba(201,150,60,0.05); transform:none; box-shadow:none; }
input,select { background:rgba(13,10,14,0.8); border:1px solid rgba(201,150,60,0.2); border-radius:3px; transition:border-color .2s; }
input:focus,select:focus { border-color:var(--gold); box-shadow:0 0 6px rgba(201,150,60,0.15); }
.toast { background:rgba(30,20,40,0.95); border:1px solid var(--gold); backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.result-panel.win { border:1px solid var(--hp-green); box-shadow:0 0 20px rgba(74,140,74,0.15); }
.result-panel.lose { border:1px solid var(--blood); box-shadow:0 0 20px rgba(140,32,32,0.15); }
.class-card { border-radius:6px; transition:all .25s; }
.class-card:hover,.class-card.selected { box-shadow:0 0 15px rgba(201,150,60,0.2); }
.battle-log { background:rgba(13,10,14,0.5); border-radius:4px; padding:8px; margin-top:8px; }
.battle-log .turn { padding:5px 4px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:.78rem; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:rgba(13,10,14,0.5); } ::-webkit-scrollbar-thumb { background:rgba(201,150,60,0.3); border-radius:3px; }