@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700&display=swap');
:root {
  --bg-dark: #151010; --bg-medium: #1e1812; --bg-panel: #2a2218; --bg-panel-light: #3d3224;
  --gold: #d4a044; --gold-bright: #f0c868; --blood: #8c1c1c; --blood-bright: #c42a2a;
  --bronze: #b07840; --bronze-bright: #d49a58; --sand: #c8b494; --sand-dark: #8a7a60;
  --text: #ece0cc; --text-dim: #a09480; --text-disabled: #5c5040;
  --hp-green: #5a9044; --mana-blue: #4a6a8c; --xp-purple: #7a4a90;
  --common: #908070; --uncommon: #5a9a44; --rare: #4488cc; --epic: #9a44bb; --legendary: #d4aa22; --cursed: #cc2222;
  --font-pixel: 'Press Start 2P', monospace; --font-ui: 'Inter', sans-serif;
  --radius: 3px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
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;} }
@media(max-width:900px) { [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; } }

/* === 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(18,14,10,0.74); z-index:0; pointer-events:none; }
#auth-screen, #game-screen { position:relative; z-index:2; }
.top-bar { background:rgba(22,18,12,0.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(176,120,64,0.2); }
.nav-bar { background:rgba(22,18,12,0.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(176,120,64,0.15); z-index:100; }
.panel { background:rgba(34,28,18,0.92); backdrop-filter:blur(4px); border:1px solid rgba(176,120,64,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(176,120,64,0.25); }
.panel-header { border-bottom:1px solid rgba(176,120,64,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(176,120,64,0.3); }
button.primary { background:linear-gradient(180deg,#8c2020,#5c1010); border-color:#a03030; color:#ece0cc; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
button.primary:hover { background:linear-gradient(180deg,#a82828,#7c1818); border-color:#c43030; }
.item-row { border-radius:4px; transition:background .2s; border-bottom:1px solid rgba(176,120,64,0.08); }
.opponent-card { border-radius:4px; transition:border-color .2s; }
.opponent-card:hover { border-color:rgba(176,120,64,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(176,120,64,0.08); }
.nav-bar button:hover { color:var(--gold); background:rgba(176,120,64,0.05); transform:none; box-shadow:none; }
input,select { background:rgba(18,14,10,0.8); border:1px solid rgba(176,120,64,0.2); border-radius:3px; transition:border-color .2s; }
input:focus,select:focus { border-color:var(--gold); box-shadow:0 0 6px rgba(176,120,64,0.15); }
.toast { background:rgba(34,28,18,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(176,120,64,0.2); }
.battle-log { background:rgba(18,14,10,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(18,14,10,0.5); } ::-webkit-scrollbar-thumb { background:rgba(176,120,64,0.3); border-radius:3px; }

/* === ROMAN STONE ACCENTS === */
.panel { border-top:2px solid rgba(176,120,64,0.18); }
.panel-header h2 { text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.top-bar { border-top:2px solid var(--bronze); background:linear-gradient(180deg,rgba(30,24,16,0.96),rgba(22,18,12,0.94)); }
.nav-bar { border-top:1px solid rgba(176,120,64,0.1); }
h1 { text-shadow:0 2px 4px rgba(0,0,0,0.6); }
.class-card { background:rgba(34,28,18,0.6); border:1px solid rgba(176,120,64,0.1); }
.class-card:hover,.class-card.selected { background:rgba(44,36,24,0.8); border-color:var(--bronze); }
.result-panel { background:rgba(28,22,14,0.95); }
button,.btn { border-color:var(--bronze); color:var(--sand); }
button:hover,.btn:hover { background:var(--bronze); color:#151010; box-shadow:0 2px 8px rgba(176,120,64,0.25); }
.stat-bar .bar { background:rgba(18,14,10,0.6); border:1px solid rgba(176,120,64,0.08); }
.opponent-card { background:rgba(34,28,18,0.5); border:1px solid rgba(176,120,64,0.1); }
input,select { background:rgba(18,14,10,0.9); border:1px solid rgba(176,120,64,0.18); color:var(--text); }

/* === EQUIPMENT TOOLTIP === */
.equip-slot { position:relative; transition:border-color .2s, transform .15s; }
.equip-slot.equipped:hover { transform:translateY(-2px); border-color:var(--gold) !important; z-index:10; }

/* === GAME MODAL === */
.game-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,8,6,0.85); z-index:9999; display:flex; align-items:center; justify-content:center; animation:modalFadeIn .2s; }
.game-modal { background:linear-gradient(180deg,#2a2218,#1e1812); border:2px solid var(--bronze); border-radius:6px; padding:0; min-width:320px; max-width:480px; width:90%; box-shadow:0 8px 40px rgba(0,0,0,0.8),0 0 20px rgba(176,120,64,0.1); animation:modalSlideIn .25s; }
.game-modal-header { padding:14px 18px; border-bottom:1px solid rgba(176,120,64,0.2); background:rgba(176,120,64,0.06); display:flex; align-items:center; gap:10px; }
.game-modal-header .modal-icon { font-size:1.5rem; }
.game-modal-header h3 { font-size:.75rem; color:var(--gold); letter-spacing:1px; }
.game-modal-body { padding:18px; color:var(--text); font-size:.88rem; line-height:1.6; }
.game-modal-footer { padding:12px 18px; border-top:1px solid rgba(176,120,64,0.12); display:flex; gap:8px; justify-content:flex-end; }
.game-modal-footer button { min-width:100px; }
.game-modal-footer .btn-cancel { background:transparent; border:1px solid var(--text-disabled); color:var(--text-dim); }
.game-modal-footer .btn-cancel:hover { background:rgba(176,120,64,0.1); border-color:var(--bronze); color:var(--text); }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
@keyframes modalSlideIn { from{opacity:0;transform:translateY(-20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }

/* === COSMETICS === */
.gold-frame { border:2px solid var(--frame-color, var(--gold)) !important; box-shadow:0 0 12px color-mix(in srgb, var(--frame-color, var(--gold)) 40%, transparent),0 0 24px color-mix(in srgb, var(--frame-color, var(--gold)) 15%, transparent); animation:goldPulse 3s ease-in-out infinite; }
@keyframes goldPulse { 0%,100%{box-shadow:0 0 12px color-mix(in srgb, var(--frame-color, var(--gold)) 40%, transparent),0 0 24px color-mix(in srgb, var(--frame-color, var(--gold)) 15%, transparent)} 50%{box-shadow:0 0 18px color-mix(in srgb, var(--frame-color, var(--gold)) 60%, transparent),0 0 36px color-mix(in srgb, var(--frame-color, var(--gold)) 25%, transparent)} }
.glow-nick { color:var(--gold-bright) !important; text-shadow:0 0 8px rgba(240,200,104,0.6),0 0 16px rgba(240,200,104,0.3); animation:nickGlow 2s ease-in-out infinite; }
@keyframes nickGlow { 0%,100%{text-shadow:0 0 8px rgba(240,200,104,0.6),0 0 16px rgba(240,200,104,0.3)} 50%{text-shadow:0 0 14px rgba(240,200,104,0.8),0 0 28px rgba(240,200,104,0.4)} }
.vip-badge::after { content:'👑'; margin-left:4px; font-size:.7rem; }

/* === NAV ICONS === */
.nav-icon { width:22px; height:22px; image-rendering:pixelated; vertical-align:middle; margin-right:3px; margin-top:-2px; filter:brightness(0.7); }
.nav-bar button.active .nav-icon { filter:brightness(1.2) drop-shadow(0 0 3px rgba(240,200,104,0.5)); }
.nav-bar button:hover .nav-icon { filter:brightness(1); }

/* === NAV ICONS === */
.nav-icon { width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; margin-right:2px; filter:brightness(0.8); }
.nav-bar button.active .nav-icon { filter:brightness(1.2) drop-shadow(0 0 3px rgba(240,200,104,0.4)); }
.nav-bar button:hover .nav-icon { filter:brightness(1.1); }

/* === INLINE UI ICONS === */
.ico { width:14px; height:14px; image-rendering:pixelated; vertical-align:middle; margin:0 1px; }
.ico-sm { width:12px; height:12px; image-rendering:pixelated; vertical-align:middle; margin:0 1px; }

/* === INLINE PIXEL ICONS === */
.ico { width:22px; height:22px; image-rendering:pixelated; vertical-align:middle; margin-top:-2px; }
.ico-sm { width:18px; height:18px; image-rendering:pixelated; vertical-align:middle; margin-top:-1px; }
.ico-lg { width:28px; height:28px; image-rendering:pixelated; vertical-align:middle; margin-top:-2px; }
.stat-ico { width:18px; height:18px; image-rendering:pixelated; vertical-align:middle; }