:root{--gold: #e2c072;--gold2: #a9843c;--gold3: #5e4617;--panel: linear-gradient(180deg, rgba(30, 33, 44, .94), rgba(13, 15, 22, .95));--ink: #0d1017;--text: #ece6d6;--muted: #a39b88;--hp: #e03b43;--xp: #9a6bff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Inter,system-ui,sans-serif;color:var(--text);-webkit-user-select:none;user-select:none}#app canvas{display:block;cursor:crosshair}.hidden{display:none!important}kbd{background:#1a1d29;border:1px solid var(--gold3);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:inherit;font-weight:800;color:var(--gold);font-size:11px}#labels{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}#vignette{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(210,0,0,.55));opacity:0;transition:opacity .3s}.ornate{position:relative;background:var(--panel);border:1px solid var(--gold2);border-radius:12px;box-shadow:inset 0 0 0 1px #ffdc9614,inset 0 1px #ffffff0f,0 12px 32px #0000008c}.ornate:before,.ornate:after{content:"";position:absolute;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 6px #e2c07280;pointer-events:none}.ornate:before{left:-4px;top:-4px}.ornate:after{right:-4px;bottom:-4px}.ornate.round{border-radius:50%}.ornate.round:before,.ornate.round:after{display:none}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#plate{position:absolute;left:18px;top:18px;display:flex;gap:12px;align-items:center;padding:10px 18px 10px 10px}.portrait{position:relative;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#35508a,#141c33 70%);border:2px solid var(--gold2);box-shadow:inset 0 0 12px #0009,0 0 0 3px #00000059;display:grid;place-items:center;color:var(--gold)}.portrait svg{width:36px;height:36px}.lvl-badge{position:absolute;right:-6px;bottom:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:linear-gradient(180deg,#ffe39a,#c8972c);color:#2a1b05;font-weight:800;font-size:12px;display:grid;place-items:center;border:1px solid #fff2c7;box-shadow:0 2px 6px #0009}.plate-name{font-family:Cinzel,serif;font-weight:800;letter-spacing:.6px;font-size:15px;margin-bottom:6px;color:#fff4d6;text-shadow:0 1px 2px #000}.plate-name span{color:var(--gold);font-size:11px;margin-left:8px;font-family:Inter,sans-serif;font-weight:600;letter-spacing:.3px;opacity:.9}.bar{position:relative;width:250px;height:18px;background:#0a0c12;border-radius:4px;overflow:hidden;border:1px solid #2a2418;box-shadow:inset 0 2px 4px #000c}.bar .fill{height:100%;width:100%;transition:width .15s}.bar.hp .fill{background:linear-gradient(180deg,#ff7b76,#d7363f 45%,#8e1a22);box-shadow:0 0 10px #ff464673}.bar .gloss{position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,#ffffff38,#fff0);pointer-events:none}.bar.xp{height:8px;margin-top:5px}.bar.xp .fill{background:linear-gradient(90deg,#6c43d6,#b48cff);box-shadow:0 0 8px #9a6bff99}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:11px;font-weight:800;text-shadow:0 1px 2px #000,0 0 4px #000;letter-spacing:.3px}.bar.xp span{font-size:8px;opacity:0}#mapwrap{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:auto}#minimap{width:180px;height:180px;padding:4px;overflow:hidden;background:#0b0d14}#minimap canvas{width:100%;height:100%;border-radius:50%;display:block}#zone{font-family:Cinzel,serif;font-weight:800;font-size:13px;letter-spacing:1px;color:var(--gold);text-shadow:0 1px 2px #000,0 0 10px rgba(0,0,0,.8)}.map-hint{font-size:10px;color:var(--muted);text-shadow:0 1px 2px #000}#skills{position:absolute;bottom:26px;left:50%;transform:translate(-50%);display:flex;gap:10px;align-items:flex-end;pointer-events:auto;padding:10px 14px 20px;border-radius:14px;background:linear-gradient(180deg,#0a0c1200,#0a0c128c)}.skill{position:relative;width:62px;height:62px;border-radius:10px;background:linear-gradient(160deg,#262c3d,#10131c);border:1px solid var(--gold2);box-shadow:inset 0 0 0 1px #ffdc9614,0 6px 16px #0000008c;display:grid;place-items:center;color:var(--gold)}.skill .ico svg{width:32px;height:32px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.8))}.skill .cd{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9px;background:conic-gradient(rgba(4,6,12,.82) calc(var(--cd, 0) * 360deg),transparent 0);pointer-events:none}.skill .cdText{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;text-shadow:0 2px 3px #000;pointer-events:none}.skill .key{position:absolute;top:-9px;left:50%;transform:translate(-50%);background:#0b0e17;border:1px solid var(--gold2);border-radius:5px;padding:1px 6px;font-size:9px;font-weight:800;color:var(--gold);white-space:nowrap;letter-spacing:.3px;z-index:1}.skill .name{position:absolute;bottom:-17px;left:50%;transform:translate(-50%);font-size:10px;color:#d9d2c0;white-space:nowrap;text-shadow:0 1px 2px #000}.skill.ready{animation:ready .5s}@keyframes ready{0%{box-shadow:0 0 #f3c969e6}to{box-shadow:0 0 0 16px #f3c96900}}.skill.btn{cursor:pointer;width:52px;height:52px}.skill.btn:hover{background:linear-gradient(160deg,#33405a,#171b27)}#skills .sep{width:1px;height:44px;margin:0 4px 8px;background:linear-gradient(180deg,transparent,var(--gold2),transparent)}#perf{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}.perf-toggle{display:flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;background:#0c0e14d9;border:1px solid var(--gold3);border-radius:7px;color:var(--muted);font:700 11px Inter,sans-serif;letter-spacing:.4px;cursor:pointer}.perf-toggle svg{width:16px;height:16px}.perf-toggle:hover,.perf-toggle.on{border-color:var(--gold2);color:var(--gold)}.perf-box{padding:10px 12px;width:246px;font-size:11px;font-variant-numeric:tabular-nums}.perf-box canvas{display:block;margin:6px 0 8px;background:#00000059;border-radius:4px}.perf-rate{display:flex;align-items:baseline;gap:6px;color:var(--muted)}.perf-rate b{font-size:24px;font-weight:800}.perf-rate span{margin-left:auto;font-weight:700}.perf-box .good{color:#6cc46c}.perf-box .fair{color:#e2b04a}.perf-box .poor{color:#e0524a}.perf-box dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}.perf-box dt{color:var(--muted)}.perf-box dd{margin:0;text-align:right;white-space:nowrap;color:var(--text);font-weight:600}.perf-box dd i{font-style:normal;color:var(--muted);font-weight:400;margin-left:4px}#toasts{position:absolute;top:110px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.toast{background:#0c0e14e6;border:1px solid var(--gold3);border-left:3px solid var(--gold);padding:8px 16px;border-radius:6px;font-weight:600;font-size:13px;animation:toast 2.8s forwards;white-space:nowrap;box-shadow:0 6px 18px #00000080}@keyframes toast{0%{opacity:0;transform:translateY(-8px)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0}}#banner{position:absolute;top:26%;left:50%;transform:translate(-50%);font-family:Cinzel,serif;font-size:58px;font-weight:800;color:var(--gold);text-shadow:0 0 30px rgba(255,190,80,.8),0 4px 8px #000;opacity:0;white-space:nowrap;letter-spacing:4px}#banner.show{animation:banner 2.2s forwards}@keyframes banner{0%{opacity:0;transform:translate(-50%) scale(.6)}15%{opacity:1;transform:translate(-50%) scale(1.06)}25%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%) scale(1)}}.floating-text{position:absolute;left:0;top:0;font-weight:800;font-size:20px;color:#fff;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.7);white-space:nowrap;will-change:transform}.floating-text span{display:inline-block;animation:pop .9s forwards}@keyframes pop{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.3);opacity:1}30%{transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(.9)}}.floating-text.critical{color:#ffd84a;font-size:30px}.floating-text.hurt{color:#f55;font-size:22px}.floating-text.experience{color:#c69bff;font-size:15px}.floating-text.slowed{color:#8cf5d2;font-size:16px;letter-spacing:1px}.mob-bar{position:absolute;left:0;top:0;width:88px}.mob-bar .name{font-size:11px;font-weight:800;text-align:center;text-shadow:0 1px 2px #000;margin-bottom:2px}.mob-bar .name b{color:#ffcf6b}.mob-bar .track{height:7px;background:#000000b3;border:1px solid rgba(0,0,0,.9);border-radius:3px;overflow:hidden}.mob-bar .fill{height:100%;background:linear-gradient(180deg,#ff5d4d,#b71c1c)}.loot-label{position:absolute;left:0;top:0;font-size:12px;font-weight:800;padding:2px 9px;background:#080a10c7;border-radius:5px;border:1px solid currentColor;white-space:nowrap}.panel{position:fixed;z-index:10;padding:16px 20px 14px}#inventory{right:28px;top:50%;transform:translateY(-50%);width:600px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--gold3)}.panel-head.draggable{cursor:move;-webkit-user-select:none;user-select:none}.panel h2{margin:0;font-family:Cinzel,serif;color:var(--gold);letter-spacing:2px;font-size:20px;text-shadow:0 1px 2px #000}.panel .close{background:none;border:1px solid var(--gold3);color:#ddd;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:12px}.panel .close:hover{border-color:var(--gold);color:var(--gold)}.inv-body{display:flex;gap:20px}.equip{width:206px;display:flex;flex-direction:column;gap:12px}.paperdoll{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border-radius:10px;background:radial-gradient(ellipse at 50% 20%,#5064a040,#00000059 70%);border:1px solid rgba(255,220,150,.1)}.paperdoll .doll{width:56px;height:56px;color:#e2c07259}.slot{position:relative;width:58px;height:58px;border-radius:8px;background:linear-gradient(180deg,#ffffff0d,#00000040);border:1px solid rgba(255,220,150,.14);display:grid;place-items:center;cursor:pointer;transition:transform .08s,box-shadow .12s,border-color .12s}.slot:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:0 0 10px #e2c07240}.slot.filled{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rar) 28%,transparent),#0000004d 75%);border-color:color-mix(in srgb,var(--rar) 70%,#000)}.slot.filled:hover{border-color:var(--rar);box-shadow:0 0 12px color-mix(in srgb,var(--rar) 55%,transparent)}.slot svg{width:40px;height:40px;filter:drop-shadow(0 0 5px var(--rar, transparent))}.slot .lv{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;opacity:.85}.doll-grid{display:grid;grid-template-columns:repeat(3,58px);gap:8px 6px;justify-items:center}.doll-grid .cell{display:flex;flex-direction:column;align-items:center;gap:2px}.doll-grid .cell span{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}.doll-grid .cell:nth-child(1){grid-column:2}.doll-grid .cell:nth-child(2){grid-column:3}.doll-grid .cell:nth-child(6){grid-column:2}.equip-slot{width:56px;height:56px}.equip-slot svg{width:40px;height:40px}.equip-slot:not(.filled){border-style:dashed;border-color:#ffdc9638;background:#00000040}.equip-slot .ph-ico{opacity:.22;filter:none}.equip-slot.filled{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rar) 45%,#1a1d28),#0d0f16 78%);border:2px solid var(--rar);box-shadow:0 0 12px color-mix(in srgb,var(--rar) 50%,transparent),inset 0 0 0 1px #ffffff14}.equip-slot.pop{animation:equipPop .45s ease-out}@keyframes equipPop{0%{transform:scale(.7);box-shadow:0 0 #fff0c8e6}60%{transform:scale(1.12)}to{transform:scale(1);box-shadow:0 0 12px color-mix(in srgb,var(--rar) 50%,transparent)}}.slot.drop-hint{border-color:var(--gold);box-shadow:0 0 10px #e2c07259}.slot .ph{font-size:10px;color:var(--muted);text-align:center;line-height:1.2}.slot-label{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}button.ghost{background:linear-gradient(180deg,#ffffff0f,#0003);border:1px solid var(--gold3);color:var(--gold);border-radius:6px;padding:5px 14px;font-weight:700;font-size:11px;cursor:pointer;letter-spacing:.5px}button.ghost:hover{border-color:var(--gold);background:#e2c0721f}button.ghost:disabled{opacity:.35;cursor:default}#stats{font-size:12px;background:#0000004d;border:1px solid rgba(255,220,150,.08);border-radius:10px;padding:10px 12px}#stats div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06)}#stats div:last-child{border-bottom:0}#stats span{color:var(--muted)}#stats b{color:#fff}#stats b.bonus{color:#7ee787}.bagwrap{flex:1}.bag-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}.grid{display:grid;grid-template-columns:repeat(5,58px);gap:8px;align-content:start}.inv-footer{margin-top:14px;padding-top:10px;border-top:1px solid var(--gold3);display:flex;align-items:center;justify-content:space-between;gap:12px}.inv-hint{font-size:11px;color:var(--muted)}.salvage-zone{flex-shrink:0;padding:7px 12px;border:1px dashed rgba(255,120,90,.45);border-radius:8px;font-size:11px;color:#ff9678bf;transition:background .12s,border-color .12s,color .12s}.salvage-zone.armed{border-color:#ff7a5a;color:#ffb3a0;background:#ff5a3c1f;box-shadow:0 0 10px #ff5a3c40}.inv-hint b{color:var(--text)}#bigmap{left:50%;top:50%;transform:translate(-50%,-50%);width:640px}#bigCanvas{display:block;width:600px;height:600px;border-radius:10px;background:#0b0d14;border:1px solid var(--gold3)}.legend{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:11px;color:var(--muted)}.legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}.dot.you{background:#fff;box-shadow:0 0 5px #fff}.dot.portal{background:#6cffb0;box-shadow:0 0 5px #6cffb0}.dot.camp{background:#ff4b3a}.dot.ruin{background:#9fb4d8}.dot.shrine{background:#5fd8ff}.dot.loot{background:#c06bff}.dot.npc{border-radius:1px;transform:rotate(45deg) scale(.85)}#tooltip{position:fixed;z-index:20;pointer-events:none;width:240px;background:linear-gradient(180deg,#161821fa,#0a0c12fa);border:1px solid var(--gold3);border-top:2px solid var(--rar, var(--gold2));border-radius:8px;padding:10px 12px;font-size:13px;box-shadow:0 12px 30px #000000b3}.tt-name{font-family:Cinzel,serif;font-weight:800;font-size:16px;color:var(--rar)}.tt-sub{font-size:11px;color:var(--muted);margin-bottom:8px}.tt-req{font-size:11px;color:#9dffcf;margin:-4px 0 8px}.tt-req.locked{color:#ff6363;font-weight:700}.tt-stat{margin:3px 0;display:flex;justify-content:space-between}.tt-stat .d{font-weight:700;font-size:12px}.up{color:#5dff8a}.down{color:#ff6363}.tt-hint{margin-top:8px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.08);font-size:11px;color:var(--muted)}#death{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#3c000059,#000000bf);pointer-events:none;z-index:25}.death-card{text-align:center}#death h1{font-family:Cinzel,serif;font-size:62px;color:#ff5a4a;margin:0;letter-spacing:4px;text-shadow:0 0 30px rgba(255,0,0,.6),0 4px 10px #000}#death p{color:var(--muted);font-size:14px;letter-spacing:1px}.slot.equipped-mark:after{content:"E";position:absolute;left:3px;top:2px;font-size:9px;font-weight:800;color:#1a1206;background:var(--gold);border-radius:3px;padding:0 3px}.slot.drop-ok{border-color:var(--gold)!important;box-shadow:0 0 14px #e2c0728c,inset 0 0 0 1px var(--gold);background:#e2c07224}.slot.dragging{opacity:.35}#dragGhost{position:fixed;z-index:40;pointer-events:none;width:52px;height:52px;transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}#dragGhost svg{width:100%;height:100%}.slot.swap-hint:before{content:"⇄";position:absolute;right:3px;top:1px;font-size:11px;font-weight:800;color:var(--gold);text-shadow:0 1px 2px #000}.tt-cmp{margin-top:6px;font-size:11px;color:var(--muted)}.mob-bar.elite{width:120px}.mob-bar.elite .name{color:#ffb347;font-size:12px}.mob-bar.elite .track{height:9px;border-color:#7a4a1a}.mob-bar.elite .fill{background:linear-gradient(180deg,#ffb347,#c2501a)}.mob-bar.enraged .name{color:#ff5a3a}.mob-bar.enraged .fill{background:linear-gradient(180deg,#ff6a4a,#8a0f0f);box-shadow:0 0 8px #ff3c1eb3}.start-over{margin-top:10px}.menu-card{width:560px;max-width:calc(100vw - 32px);padding:18px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}.menu-card h3{font-family:Cinzel,serif;margin:0;color:var(--gold);letter-spacing:2px}#pause{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#04060c9e;z-index:28}.menu-sub{margin:0;color:var(--muted)}.menu-sub b{color:var(--text)}.menu-actions{display:flex;flex-direction:column;gap:8px;width:260px;margin-top:6px}.menu-actions .primary{margin:0}.menu-actions .primary,#pause .primary{padding:12px 36px}.menu-hint{margin:6px 0 0;font-size:11px;color:var(--muted)}button.ghost.danger{color:#ff8a70;border-color:#ff785a66}button.ghost.danger:hover{background:#ff5a3c26;border-color:#ff7a5a}.coin{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1a8,#e0a92c 60%,#9a6a12);box-shadow:0 0 6px #ffc85080;vertical-align:-1px;margin-right:5px}.coin.small{width:9px;height:9px;margin:0 0 0 4px}.gold-line{margin-top:5px;font-size:12px;font-weight:700;color:#ffd25a;text-shadow:0 1px 2px #000}.shop-gold{margin-left:auto;margin-right:12px;font-weight:700;color:#ffd25a;font-size:13px}.prompt{position:absolute;left:50%;bottom:128px;transform:translate(-50%);padding:8px 14px;background:#0c0e14d9;border:1px solid var(--gold3);border-radius:8px;font-size:13px;color:var(--text);pointer-events:none}.npc-label{position:absolute;left:0;top:0;font-family:Cinzel,serif;font-size:12px;font-weight:800;letter-spacing:1px;color:#ffd98a;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.8);white-space:nowrap}.floating-text.gold{color:#ffd25a;font-size:16px}#shop{left:50%;top:50%;transform:translate(-50%,-50%);width:760px}.shop-body{display:grid;grid-template-columns:1fr 1fr;gap:18px}.trade-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;padding-right:4px}.trade-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid rgba(255,220,150,.12);border-radius:8px;background:linear-gradient(180deg,#ffffff08,#00000040)}.trade-row:hover{border-color:var(--rar)}.trade-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.trade-info b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trade-info span{font-size:11px;color:var(--muted)}.slot.small{width:42px;height:42px;cursor:default}.slot.small svg{width:30px;height:30px}.slot.small:hover{transform:none}.portal-label{color:#9dffcf;text-shadow:0 1px 2px #000,0 0 10px rgba(80,255,170,.6)}.prompt.portal{border-color:#3f8a63}.prompt.portal b{color:#9dffcf}#travelFade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;pointer-events:none;z-index:26}button.primary{padding:13px 30px;font-family:Cinzel,serif;font-weight:800;font-size:15px;letter-spacing:2px;color:#2a1b05;background:linear-gradient(180deg,#ffe39a,#d9a333 60%,#b57d1f);border:1px solid #fff2c7;border-radius:10px;cursor:pointer;box-shadow:0 8px 24px #e6a53147,inset 0 1px #fff8;text-transform:uppercase;transition:transform .12s,box-shadow .12s,filter .12s}button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 30px #e6a53173,inset 0 1px #fff8}button.primary:disabled{filter:grayscale(.7) brightness(.7);cursor:default;box-shadow:none}.icon-button{flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;background:#ffffff0a;border:1px solid rgba(255,220,150,.16);border-radius:9px;color:var(--gold);cursor:pointer;transition:background .12s,border-color .12s}.icon-button svg{width:18px;height:18px}.icon-button:hover:not(:disabled){background:#e2c0721f;border-color:var(--gold2)}.icon-button.danger{color:#ff8a70}.icon-button.danger:hover:not(:disabled){background:#ff5a3c24;border-color:#ff7a5a}.icon-button:disabled{opacity:.3;cursor:default}.portrait-badge{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4566,#121828 72%);border:1px solid var(--gold2);box-shadow:inset 0 0 10px #0009;color:var(--gold)}.portrait-badge svg{width:26px;height:26px}.class-mage .portrait-badge,.portrait-badge.class-mage{background:radial-gradient(circle at 35% 30%,#4a3a78,#161028 72%)}#title{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;background:linear-gradient(90deg,#05060ae6,#05060ab8 30%,#05060a00 58%),linear-gradient(0deg,rgba(5,6,10,.55),transparent 30%);animation:titleIn .7s ease-out}@keyframes titleIn{0%{opacity:0}}.title-panel{width:clamp(380px,36vw,500px);height:100%;display:flex;flex-direction:column;padding:40px 36px 22px 48px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold3) transparent}.title-brand h1{margin:0;font-family:Cinzel,serif;font-weight:800;font-size:clamp(42px,4.6vw,64px);letter-spacing:6px;line-height:1;background:linear-gradient(180deg,#fff1c2,#f0b53a 55%,#b0641a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(255,140,40,.35))}.title-tagline{margin-top:8px;color:var(--muted);font-size:11px;letter-spacing:5px;text-transform:uppercase}.title-tagline:before{content:"";display:inline-block;width:26px;height:1px;margin-right:10px;vertical-align:middle;background:var(--gold2)}.title-panel.view-home .title-brand{margin-top:auto}.title-panel:not(.view-home) .title-brand h1{font-size:30px;letter-spacing:4px}.title-panel:not(.view-home) .title-tagline{margin-top:5px;font-size:9px}.title-panel:not(.view-home) .title-view-head{margin-top:20px}.title-panel.view-create .title-footer{display:none}.title-view-head{display:flex;align-items:center;gap:12px;margin:30px 0 16px}.title-view-head h2{margin:0;font-family:Cinzel,serif;font-size:20px;letter-spacing:2px;color:#fff4d6}.title-body{display:flex;flex-direction:column}.title-panel.view-home .title-body{margin:34px 0 auto}.title-footer{margin-top:24px;padding-top:14px;border-top:1px solid rgba(255,220,150,.08);font-size:11px;color:var(--muted);opacity:.75}.main-menu{display:flex;flex-direction:column;gap:10px}.continue-button{display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;color:#2a1b05;background:linear-gradient(180deg,#ffe39a,#d9a333 60%,#b57d1f);border:1px solid #fff2c7;border-radius:14px;cursor:pointer;box-shadow:0 10px 30px #e6a5314d,inset 0 1px #fff8;transition:transform .12s,box-shadow .12s}.continue-button:hover{transform:translateY(-2px);box-shadow:0 14px 36px #e6a53173,inset 0 1px #fff8}.continue-button .portrait-badge{border-color:#7a5410}.continue-text{flex:1;display:flex;flex-direction:column;gap:3px}.continue-text b{font-family:Cinzel,serif;font-size:20px;letter-spacing:2px;text-transform:uppercase}.continue-text span{font-size:12px;font-weight:600;opacity:.8}.continue-arrow,.menu-item-arrow{width:18px;height:18px;flex:none}.continue-arrow svg,.menu-item-arrow svg{width:100%;height:100%}.menu-item{display:flex;align-items:center;gap:12px;padding:13px 16px;text-align:left;color:var(--text);background:#10121bb8;border:1px solid rgba(255,220,150,.1);border-radius:12px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .12s,border-color .12s,transform .12s}.menu-item:hover{background:#28241ed9;border-color:var(--gold2);transform:translate(3px)}.menu-item-text{flex:1;display:flex;flex-direction:column;gap:2px}.menu-item-text b{font-family:Cinzel,serif;font-size:15px;letter-spacing:1.5px;color:#fff4d6}.menu-item-text span{font-size:11px;color:var(--muted)}.menu-item-arrow{color:var(--gold2)}.roster{width:100%;display:flex;flex-direction:column;gap:14px}.roster-list{display:flex;flex-direction:column;gap:8px}.roster-empty{margin:0;color:var(--muted)}.roster-card{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;background:#10121bb8;border:1px solid rgba(255,220,150,.1);border-radius:12px;cursor:pointer;text-align:left;transition:background .12s,border-color .12s,box-shadow .12s}.roster-card:hover{border-color:#ffdc964d}.roster-card.selected{background:#3a2e18c7;border-color:var(--gold);box-shadow:0 0 0 1px #e2c07240,0 6px 20px #00000059}.roster-card.confirming{cursor:default;border-color:#ff785a99;background:#3c1410b3}.roster-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.roster-info b{font-family:Cinzel,serif;letter-spacing:1px;font-size:15px;color:#fff4d6}.roster-info span{font-size:12px;color:var(--muted)}.roster-info .roster-age{font-size:11px;opacity:.75}.roster-tag{margin-left:8px;padding:1px 6px;font:700 9px Inter,sans-serif;letter-spacing:.8px;text-transform:uppercase;color:#1a1206;background:var(--gold);border-radius:4px;vertical-align:2px}.roster-confirm-text{flex:1;font-size:13px}.roster-new{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--gold);background:transparent;border:1px dashed rgba(255,220,150,.3);border-radius:12px;cursor:pointer;font:700 13px Inter,sans-serif;letter-spacing:.5px;transition:background .12s,border-color .12s}.roster-new:hover{background:#e2c07214;border-color:var(--gold2)}.roster-new-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px dashed rgba(255,220,150,.3)}.roster-new-icon svg{width:20px;height:20px}.roster-play{position:sticky;bottom:0;align-self:stretch}.creation{width:100%;display:flex;flex-direction:column;gap:18px}.creation-step h4{display:flex;align-items:center;gap:8px;margin:0 0 9px;font:700 11px Inter,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}.step-number{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--gold3);color:#fff1c2;font-size:10px;letter-spacing:0}.class-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.class-card,.race-card{display:flex;flex-direction:column;gap:4px;padding:14px 14px 13px;text-align:left;color:var(--text);background:#10121bb8;border:1px solid rgba(255,220,150,.1);border-radius:12px;cursor:pointer;font-family:Inter,sans-serif;transition:background .12s,border-color .12s,box-shadow .12s,transform .12s}.class-card:hover:not(:disabled),.race-card:hover{border-color:#ffdc9652;transform:translateY(-1px)}.class-card.selected,.race-card.selected{background:#3a2e18c7;border-color:var(--gold);box-shadow:0 0 0 1px #e2c07240,0 8px 24px #00000059}.class-card:disabled{opacity:.45;cursor:default}.class-card-icon{width:34px;height:34px;color:var(--gold);margin-bottom:4px}.class-card-icon svg{width:100%;height:100%}.class-card b,.race-card b{font-family:Cinzel,serif;font-size:17px;letter-spacing:1.5px;color:#fff4d6}.class-card em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}.class-description{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}.race-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.race-card{padding:11px 11px 10px}.race-card b{font-size:14px}.race-flavour{font-size:11px;color:var(--muted);line-height:1.35}.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.chip{padding:2px 6px;font-size:10px;font-weight:700;border-radius:5px;color:#9be59b;background:#6ec86e1f;white-space:nowrap}.chip.bad{color:#ff9a85;background:#ff6e5a1f}.name-row{display:flex;gap:8px}.name-row input{flex:1;min-width:0;background:#080a10d9;border:1px solid rgba(255,220,150,.18);border-radius:10px;color:#fff4d6;font:600 16px Inter,sans-serif;padding:9px 14px;outline:none;transition:border-color .12s,box-shadow .12s}.name-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #e2c07226}.name-row .icon-button{width:42px;height:42px}.name-row .icon-button svg{width:22px;height:22px}.creation-summary{display:flex;flex-direction:column;gap:14px;padding:14px;background:#080a1099;border:1px solid rgba(255,220,150,.08);border-radius:12px}.stat-bars{display:flex;flex-direction:column;gap:7px}.stat-bar{display:grid;grid-template-columns:62px 1fr 58px;align-items:center;gap:10px;font-size:11px}.stat-label{color:var(--muted);letter-spacing:.5px}.stat-track{position:relative;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.stat-track:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#ffffff40}.stat-fill{display:block;height:100%;background:linear-gradient(90deg,#a9843c,#ffd27a);border-radius:3px;transition:width .3s ease}.stat-value{text-align:right;font-weight:700;color:#fff4d6}.ability-row{display:flex;gap:8px}.ability{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 6px;background:linear-gradient(160deg,#262c3d,#10131c);border:1px solid rgba(255,220,150,.16);border-radius:10px;color:var(--gold);cursor:help}.ability-icon{width:28px;height:28px;color:var(--gold);flex:none}.ability-icon svg{width:100%;height:100%}.ability kbd{font-size:9px;padding:0 5px}.creation-actions{position:sticky;bottom:-22px;display:flex;gap:10px;align-items:center;margin:0 -12px -22px;padding:12px 12px 22px;background:linear-gradient(0deg,#05060afa 65%,#05060a00)}.creation-actions .primary{flex:1}.creation-actions .ghost{padding:12px 18px;font-size:12px}.controls-view{display:flex;flex-direction:column;gap:16px}.key-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.key-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}.key-row kbd{min-width:34px;text-align:center}.class-tabs{display:flex;gap:6px;padding:4px;background:#080a1099;border:1px solid rgba(255,220,150,.08);border-radius:11px}.class-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;color:var(--muted);background:transparent;border:0;border-radius:8px;cursor:pointer;font:700 13px Cinzel,serif;letter-spacing:1px}.class-tab.selected{color:#2a1b05;background:linear-gradient(180deg,#ffe39a,#d9a333)}.class-tab-icon{width:18px;height:18px}.class-tab-icon svg{width:100%;height:100%}.skill-list{display:flex;flex-direction:column;gap:6px}.skill-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#10121bb8;border:1px solid rgba(255,220,150,.08);border-radius:10px}.skill-row-text{flex:1;display:flex;flex-direction:column;gap:2px}.skill-row-text b{font-size:13px;color:#fff4d6}.skill-row-text span{font-size:11px;color:var(--muted)}#pause .menu-card:has(.creation){width:600px;max-height:calc(100vh - 32px);overflow-y:auto;align-items:stretch}#pause .creation-actions{bottom:-16px;margin-bottom:-16px;padding-bottom:16px;background:linear-gradient(0deg,#0d0f16fa 65%,#0d0f1600)}#pause .menu-card:has(.roster){width:460px;align-items:stretch}#pause .menu-card h3{text-align:center}@media(max-width:820px){#title{background:#05060ac7}.title-panel{width:100%;padding:28px 16px 16px}.race-cards,.key-list{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){#title{animation:none}.menu-item:hover,.continue-button:hover,.class-card:hover:not(:disabled),.race-card:hover,button.primary:hover:not(:disabled){transform:none}}