:root{--color-bg: #0a0e0c;--color-surface: #141a16;--color-text: #e9e3d3;--color-muted: #8b938a;--color-accent: #c9a227;--color-border: #2b342d;--font-heading: Georgia, "Times New Roman", serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius: 4px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:.02em;margin:0}p{margin:0}ul{list-style:none;margin:0;padding:0}button{font-family:inherit;color:inherit}.muted{color:var(--color-muted);font-size:13px;line-height:1.5}.eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:11px;color:var(--color-accent);margin-bottom:10px}.title{font-size:clamp(34px,6vw,64px);line-height:1.05;color:var(--color-text);text-shadow:0 0 40px rgba(201,162,39,.25)}.title-small{font-size:26px}.subtitle{color:var(--color-muted);max-width:620px;line-height:1.6;font-size:15px}.btn{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius);padding:12px 22px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .12s ease}.btn:hover{border-color:var(--color-accent);transform:translateY(-1px)}.btn-primary{background:linear-gradient(180deg,#c9a22738,#c9a22714);border-color:var(--color-accent);color:var(--color-text);font-weight:600}.btn-primary:hover{background:linear-gradient(180deg,#c9a22757,#c9a22724)}.btn-ghost{background:transparent}.btn-small{padding:6px 12px;font-size:11px}.screen{position:relative;height:100%;overflow-y:auto;padding:40px clamp(20px,5vw,72px) 48px;background:radial-gradient(1200px 600px at 50% -10%,rgba(201,162,39,.12),transparent 60%),radial-gradient(900px 500px at 80% 110%,rgba(60,90,70,.18),transparent 65%),var(--color-bg)}.create-glow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.06),transparent 55%)}.create-header{position:relative;max-width:760px;margin:0 auto 34px;text-align:center}.create-header .subtitle{margin:14px auto 0}.class-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1080px;margin:0 auto 26px}.class-card{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;padding:22px 20px 18px;background:linear-gradient(180deg,#141a16f2,#0c100ef2);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.class-card:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--class-color, var(--color-accent));opacity:.5;border-radius:var(--radius) var(--radius) 0 0}.class-card:hover{transform:translateY(-3px);border-color:var(--color-accent)}.class-card.is-active{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),0 18px 40px -24px #c9a227cc}.class-sigil{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--class-color, var(--color-accent)),transparent 70%);border:1px solid var(--color-border);margin-bottom:4px}.class-name{font-family:var(--font-heading);font-size:22px}.class-title{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--color-accent)}.class-desc{font-size:13px;line-height:1.55;color:var(--color-muted)}.class-stats{display:flex;gap:12px;margin-top:6px;font-size:12px;color:var(--color-text);opacity:.8}.create-panel{position:relative;display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.2fr);gap:18px;max-width:1080px;margin:0 auto 22px}.create-form,.skills-preview,.controls-hint,.best-block{background:#141a16b8;border:1px solid var(--color-border);border-radius:var(--radius);padding:20px}.create-form{display:flex;flex-direction:column;gap:16px;justify-content:center}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted)}.field input{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);padding:12px 14px;font-size:16px;font-family:var(--font-body);outline:none;transition:border-color .18s ease}.field input:focus{border-color:var(--color-accent)}.panel-title{font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--color-accent);margin-bottom:14px}.skills-preview li{display:grid;grid-template-columns:26px 1fr auto;grid-template-areas:"key name cost" "key desc desc";gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--color-border)}.skills-preview li:last-child{border-bottom:none}.skill-key{grid-area:key;align-self:center;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius);font-size:12px;color:var(--color-accent)}.skill-name{grid-area:name;font-size:14px}.skill-desc{grid-area:desc;font-size:12px;color:var(--color-muted)}.skill-cost{grid-area:cost;font-size:11px;color:var(--color-muted);white-space:nowrap}.create-footer{position:relative;display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.4fr);gap:18px;max-width:1080px;margin:0 auto}.controls-hint ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 16px;font-size:13px;color:var(--color-muted)}.controls-hint b{color:var(--color-text);font-weight:600}.best-row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--color-muted)}.best-level{color:var(--color-text);font-family:var(--font-heading);font-size:18px}.tag{border:1px solid var(--color-border);border-radius:999px;padding:2px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.tag-win{border-color:var(--color-accent);color:var(--color-accent)}.game-root{position:relative;width:100%;height:100%;overflow:hidden;background:var(--color-bg)}.game-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.game-canvas canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:13px;z-index:20}.hud>*{pointer-events:auto}.hud-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 180px 40px #000000bf;transition:box-shadow .4s ease}.hud-vignette.is-danger{box-shadow:inset 0 0 200px 60px #9614148c}.hud-panel{position:absolute;background:#0a0e0cc7;border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud-hero{top:16px;left:16px;width:300px}.hero-line{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}.hero-name{font-family:var(--font-heading);font-size:17px}.hero-class{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted)}.hero-level{margin-left:auto;color:var(--color-accent);font-size:12px}.bar{position:relative;height:16px;background:#0000008c;border:1px solid var(--color-border);border-radius:2px;overflow:hidden;margin-bottom:6px}.bar-fill{height:100%;transition:width .18s linear}.bar-hp .bar-fill{background:linear-gradient(90deg,#7a1f1f,#c0392b)}.bar-mp .bar-fill{background:linear-gradient(90deg,#1f3a6b,#3f7fd0)}.bar-exp .bar-fill{background:linear-gradient(90deg,#6b5a1f,var(--color-accent))}.bar-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;letter-spacing:.06em;color:var(--color-text);text-shadow:0 1px 2px rgba(0,0,0,.9)}.hud-score{top:16px;right:16px;min-width:190px;display:flex;flex-direction:column;gap:6px}.score-row{display:flex;justify-content:space-between;gap:16px;color:var(--color-muted)}.score-row b{color:var(--color-text);font-weight:600}.hud-score .btn{margin-top:6px}.hud-boss{position:absolute;top:16px;left:50%;transform:translate(-50%);width:min(520px,60vw);text-align:center}.boss-name{font-family:var(--font-heading);color:#e07a5f;letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin-bottom:6px;text-shadow:0 0 18px rgba(224,122,95,.6)}.bar-boss{height:18px}.bar-boss .bar-fill{background:linear-gradient(90deg,#5a1010,#d94a3a)}.hud-target{position:absolute;top:74px;left:50%;transform:translate(-50%);width:240px;text-align:center}.target-name{font-size:12px;color:var(--color-muted);letter-spacing:.1em;text-transform:uppercase}.bar-target{height:8px;margin-top:4px}.bar-target .bar-fill{background:linear-gradient(90deg,#7a1f1f,#d94a3a)}.hud-log{position:absolute;left:16px;bottom:120px;width:320px;display:flex;flex-direction:column;gap:3px;pointer-events:none}.log-line{font-size:12px;line-height:1.4;padding:3px 8px;background:#0a0e0c99;border-left:2px solid var(--color-border);border-radius:2px;animation:logIn .25s ease}.log-damage{color:#e8b4a0;border-left-color:#a34a3a}.log-loot{color:#d9c98a;border-left-color:var(--color-accent)}.log-level{color:#a8e0a0;border-left-color:#4a8a4a}.log-danger{color:#f0a08a;border-left-color:#d94a3a}@keyframes logIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:none}}.hud-skills{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:10px}.skill-slot{position:relative;width:92px;height:74px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px;background:#0a0e0cd1;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.skill-slot-attack{border-color:#c9a22766}.slot-key{position:absolute;top:6px;left:8px;font-size:10px;color:var(--color-accent);letter-spacing:.1em}.slot-name{font-size:11px;line-height:1.2}.slot-mp{font-size:10px;color:var(--color-muted)}.slot-cd{position:absolute;left:0;right:0;bottom:0;background:#000000a6;transition:height .1s linear}.inv-toggle{position:absolute;right:16px;bottom:20px}.inventory{position:absolute;right:16px;bottom:70px;width:280px;max-height:46vh;overflow-y:auto;background:#0a0e0ceb;border:1px solid var(--color-border);border-radius:var(--radius);padding:16px}.inventory li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--color-border);font-size:13px}.inventory li:last-child{border-bottom:none}.inventory .qty{color:var(--color-accent)}.inventory .rarity{grid-column:1 / -1;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted)}.rarity-rare span:first-child{color:#7fb2ff}.rarity-epic span:first-child{color:#c08cff}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#060908b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.pause-card{width:min(460px,90vw);text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.end-screen{display:grid;place-items:center}.end-card{width:min(680px,100%);text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;padding:40px clamp(20px,4vw,48px);background:linear-gradient(180deg,#141a16f2,#0a0e0cf2);border:1px solid var(--color-border);border-radius:var(--radius)}.end-screen.is-win .end-card{border-color:var(--color-accent);box-shadow:0 0 80px -30px #c9a227b3}.end-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:100%;margin:0}.end-stats div{border:1px solid var(--color-border);border-radius:var(--radius);padding:12px;background:#00000040}.end-stats dt{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted);margin-bottom:6px}.end-stats dd{margin:0;font-family:var(--font-heading);font-size:24px;color:var(--color-text)}.best-note{font-size:12px;color:var(--color-muted)}.end-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media (max-width: 860px){.create-panel,.create-footer{grid-template-columns:1fr}}.hud{font-size:12px}.hud-top{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none}.hud-top>*{pointer-events:auto}.hud-hero{position:static;width:min(46vw,210px);padding:6px 8px;background:#0a0e0c9e;border:1px solid var(--color-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-line{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}.hero-name{font-family:var(--font-heading);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-level{margin-left:auto;color:var(--color-accent);font-size:10px;white-space:nowrap}.bar{height:9px;margin-bottom:3px;border-radius:2px}.bar:last-child{margin-bottom:0}.bar-label{font-size:8px;letter-spacing:.02em}.bar-exp{height:4px}.bar-exp .bar-label{display:none}.hud-score{position:static;min-width:0;display:flex;align-items:center;gap:4px;padding:4px 6px;background:#0a0e0c9e;border:1px solid var(--color-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.score-chip{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:0 4px}.score-chip i{font-style:normal;font-size:7px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted)}.score-chip b{font-size:11px;color:var(--color-text)}.icon-btn{width:26px;height:26px;display:grid;place-items:center;font-size:13px;line-height:1;color:var(--color-text);background:#00000059;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer}.icon-btn:active{background:#c9a22740}.hud-boss{top:max(64px,calc(env(safe-area-inset-top) + 56px));width:min(420px,74vw)}.boss-name{font-size:10px;margin-bottom:3px}.bar-boss{height:10px}.hud-target{top:max(64px,calc(env(safe-area-inset-top) + 56px));width:150px}.target-name{font-size:9px}.bar-target{height:5px;margin-top:2px}.hud-log{left:8px;bottom:calc(150px + env(safe-area-inset-bottom));width:min(52vw,240px);gap:2px}.log-line{font-size:10px;line-height:1.3;padding:2px 6px;background:#0a0e0c80}.hud-actions{position:absolute;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.hud-actions>*{pointer-events:auto}.hud-skills{position:static;transform:none;display:flex;gap:5px}.skill-slot{width:52px;height:52px;padding:4px;justify-content:flex-end;gap:0;background:#0a0e0cb8;border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.skill-slot:active{border-color:var(--color-accent)}.slot-key{top:3px;left:4px;font-size:8px}.slot-name{font-size:8px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.slot-mp{font-size:8px;color:var(--color-muted)}.hud-quick{display:flex;gap:5px}.quick-btn{min-width:46px;height:34px;padding:0 8px;font-size:10px;letter-spacing:.04em;color:var(--color-text);background:#0a0e0cb8;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.quick-btn:active{border-color:var(--color-accent);background:#c9a22733}.quick-attack{border-color:#c9a2278c;color:var(--color-accent);font-weight:600}.quick-bag{border-color:#c9a22759}.sheet-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0407068c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20}.inventory-sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:62vh;overflow-y:auto;padding:10px 12px calc(14px + env(safe-area-inset-bottom));background:#0c110ef7;border-top:1px solid var(--color-accent);border-radius:10px 10px 0 0;animation:sheetUp .18s ease}@keyframes sheetUp{0%{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.sheet-head .panel-title{margin:0;font-size:13px}.inv-list{list-style:none;margin:0;padding:0}.inv-list li{display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:6px 0;border-bottom:1px solid var(--color-border);font-size:12px}.inv-list li:last-child{border-bottom:none}.inv-list .qty{color:var(--color-accent)}.inv-list .rarity{grid-column:1 / -1;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted)}.touch-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none}.touch-look{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;touch-action:none}.touch-stick{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));width:112px;height:112px;border-radius:50%;border:1px solid rgba(201,162,39,.35);background:radial-gradient(circle,#141a168c,#0a0e0c59);pointer-events:auto;touch-action:none;display:grid;place-items:center}.stick-knob{width:46px;height:46px;border-radius:50%;background:#c9a22759;border:1px solid rgba(201,162,39,.7);box-shadow:0 0 18px -6px #c9a227cc;pointer-events:none}.pause-overlay{z-index:30}.pause-card{width:min(420px,88vw);padding:22px;gap:12px}@media (max-width: 420px){.hud-hero{width:44vw}.score-chip i{display:none}.skill-slot{width:46px;height:46px}.quick-btn{min-width:42px;height:30px;font-size:9px}.hud-log{width:46vw;bottom:calc(140px + env(safe-area-inset-bottom))}}