:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--panel: #111118;--panel-border: #1e1e2e;--accent: #f59e0b;--accent2: #ef4444;--accent3: #22c55e;--accent4: #3b82f6;--text: #e4e4e7;--text-dim: #71717a;--hp: #ef4444;--mp: #3b82f6;--xp: #a855f7;--gold: #f59e0b}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.title-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#1a1020,#0a0a0a 70%);text-align:center;padding:2rem}.title-screen h1{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#f59e0b,#ef4444,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-.02em}.title-screen .subtitle{color:var(--text-dim);font-size:1.1rem;margin-bottom:2rem;max-width:500px}.title-screen .title-icon{font-size:5rem;margin-bottom:1rem;filter:drop-shadow(0 0 20px rgba(245,158,11,.4))}.btn{padding:.75rem 2rem;border:1px solid var(--panel-border);border-radius:.5rem;background:var(--panel);color:var(--text);font-size:1rem;cursor:pointer;transition:all .15s;font-family:inherit}.btn:hover{background:#1e1e2e;border-color:var(--accent)}.btn-primary{background:linear-gradient(135deg,#d97706,#b45309);border-color:#d97706;color:#fff;font-weight:600}.btn-primary:hover{background:linear-gradient(135deg,#f59e0b,#d97706)}.btn-danger{border-color:var(--accent2);color:var(--accent2)}.btn-danger:hover{background:#ef444426}.btn-success{border-color:var(--accent3);color:var(--accent3)}.btn-success:hover{background:#22c55e26}.btn-small{padding:.4rem 1rem;font-size:.85rem}.game-container{display:grid;grid-template-columns:280px 1fr 280px;grid-template-rows:auto 1fr;min-height:100vh;gap:0}.top-bar{grid-column:1 / -1;background:var(--panel);border-bottom:1px solid var(--panel-border);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.top-bar h2{font-size:1.1rem;font-weight:700;color:var(--accent)}.top-bar .location-name{font-size:.95rem;color:var(--text-dim)}.top-bar-actions{display:flex;gap:.5rem}.left-panel{background:var(--panel);border-right:1px solid var(--panel-border);padding:1rem;overflow-y:auto}.char-header{text-align:center;margin-bottom:1rem}.char-header .char-icon{font-size:2.5rem;margin-bottom:.25rem}.char-header .char-name{font-weight:700;font-size:1.1rem}.char-header .char-class{color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}.stat-bars{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.stat-bar-row{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.stat-bar-label{width:28px;font-weight:700;text-align:right}.stat-bar-track{flex:1;height:14px;background:#1a1a2a;border-radius:7px;overflow:hidden;position:relative}.stat-bar-fill{height:100%;border-radius:7px;transition:width .4s ease}.stat-bar-fill.hp{background:linear-gradient(90deg,#dc2626,#ef4444)}.stat-bar-fill.mp{background:linear-gradient(90deg,#2563eb,#3b82f6)}.stat-bar-fill.xp{background:linear-gradient(90deg,#7c3aed,#a855f7)}.stat-bar-value{font-size:.7rem;color:var(--text-dim);min-width:65px;text-align:right}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:1rem}.stat-item{display:flex;justify-content:space-between;font-size:.8rem;padding:.25rem .5rem;background:#ffffff08;border-radius:4px}.stat-item .stat-name{color:var(--text-dim)}.stat-item .stat-val{font-weight:600;color:var(--accent)}.center-panel{padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.game-log{flex:1;min-height:200px;max-height:400px;overflow-y:auto;background:#0000004d;border:1px solid var(--panel-border);border-radius:.5rem;padding:1rem;font-size:.85rem;line-height:1.7}.log-entry{margin-bottom:.25rem}.log-entry.combat{color:var(--accent2)}.log-entry.reward{color:var(--gold)}.log-entry.heal{color:var(--accent3)}.log-entry.info{color:var(--accent4)}.log-entry.lore{color:#a78bfa;font-style:italic}.log-entry.system{color:var(--text-dim);font-size:.8rem}.action-panel{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;background:var(--panel);border:1px solid var(--panel-border);border-radius:.5rem}.action-panel .btn{flex:1;min-width:120px;text-align:center}.right-panel{background:var(--panel);border-left:1px solid var(--panel-border);padding:1rem;overflow-y:auto}.panel-section{margin-bottom:1.5rem}.panel-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:.75rem;padding-bottom:.4rem;border-bottom:1px solid var(--panel-border)}.inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.inv-slot{aspect-ratio:1;background:#ffffff08;border:1px solid var(--panel-border);border-radius:.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:1.4rem;position:relative}.inv-slot:hover{border-color:var(--accent);background:#f59e0b14}.inv-slot .inv-count{position:absolute;bottom:2px;right:4px;font-size:.6rem;color:var(--text-dim)}.inv-slot.equipped{border-color:var(--accent3);background:#22c55e1a}.quest-item{padding:.6rem;background:#ffffff05;border:1px solid var(--panel-border);border-radius:.4rem;margin-bottom:.5rem;font-size:.8rem}.quest-item .quest-name{font-weight:600;margin-bottom:.2rem}.quest-item .quest-desc{color:var(--text-dim);font-size:.75rem}.quest-item .quest-progress{color:var(--accent);font-size:.75rem;margin-top:.3rem}.quest-item.completed{border-color:var(--accent3);opacity:.7}.combat-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.combat-screen{background:var(--panel);border:1px solid var(--panel-border);border-radius:1rem;padding:2rem;max-width:600px;width:90%;text-align:center}.combat-header{font-size:.85rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent2);margin-bottom:1rem}.enemy-display{margin-bottom:1.5rem}.enemy-display .enemy-icon{font-size:4rem;margin-bottom:.5rem}.enemy-display .enemy-name{font-size:1.3rem;font-weight:700}.enemy-display .enemy-level{color:var(--text-dim);font-size:.85rem}.enemy-hp-bar{margin-top:.75rem;max-width:300px;margin-left:auto;margin-right:auto}.enemy-hp-bar .stat-bar-track{height:18px}.enemy-hp-bar .stat-bar-fill{background:linear-gradient(90deg,#991b1b,#ef4444)}.combat-log{max-height:150px;overflow-y:auto;margin-bottom:1rem;font-size:.85rem;text-align:left;padding:.75rem;background:#0000004d;border-radius:.5rem}.combat-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.combat-actions .btn{min-width:100px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--panel);border:1px solid var(--panel-border);border-radius:1rem;padding:2rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.modal h3{font-size:1.2rem;margin-bottom:1rem;color:var(--accent)}.shop-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem;border:1px solid var(--panel-border);border-radius:.4rem;margin-bottom:.5rem;cursor:pointer;transition:all .15s}.shop-item:hover{border-color:var(--accent);background:#f59e0b0d}.shop-item-info{text-align:left}.shop-item-name{font-weight:600;font-size:.9rem}.shop-item-desc{font-size:.75rem;color:var(--text-dim)}.shop-item-price{color:var(--gold);font-weight:700}.location-desc{padding:1rem;background:#ffffff05;border:1px solid var(--panel-border);border-radius:.5rem;font-size:.9rem;color:var(--text-dim);line-height:1.6}.location-desc .loc-icon{font-size:2rem;margin-bottom:.5rem}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.map-node{padding:.75rem;background:#ffffff08;border:1px solid var(--panel-border);border-radius:.5rem;text-align:center;cursor:pointer;transition:all .15s}.map-node:hover{border-color:var(--accent);background:#f59e0b14}.map-node.current{border-color:var(--accent);background:#f59e0b26}.map-node.locked{opacity:.4;cursor:not-allowed}.map-node .map-icon{font-size:1.5rem;margin-bottom:.25rem}.map-node .map-name{font-size:.8rem;font-weight:600}.map-node .map-level{font-size:.7rem;color:var(--text-dim)}.notification{position:fixed;top:1rem;right:1rem;padding:.75rem 1.25rem;background:var(--panel);border:1px solid var(--accent);border-radius:.5rem;font-size:.9rem;z-index:200;animation:slideIn .3s ease,fadeOut .3s ease 2.5s forwards}@keyframes slideIn{0%{transform:translate(100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateY(-20px)}}.levelup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:150}.levelup-content{text-align:center;animation:levelPulse .6s ease}.levelup-content .lu-icon{font-size:5rem;margin-bottom:1rem}.levelup-content h2{font-size:2rem;background:linear-gradient(135deg,#f59e0b,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes levelPulse{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.tooltip{position:absolute;background:#1a1a2e;border:1px solid var(--panel-border);border-radius:.5rem;padding:.75rem;font-size:.8rem;z-index:50;pointer-events:none;min-width:180px;box-shadow:0 4px 20px #00000080}.tooltip .tt-name{font-weight:700;margin-bottom:.25rem}.tooltip .tt-desc{color:var(--text-dim);font-size:.75rem}.tooltip .tt-stats{margin-top:.4rem;color:var(--accent3);font-size:.75rem}@media(max-width:900px){.game-container{grid-template-columns:1fr;grid-template-rows:auto 1fr}.left-panel,.right-panel{display:none}.game-container.show-left .left-panel,.game-container.show-right .right-panel{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}