:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e9e3d2;background:#101619;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 32%,#263334,#101619 70%)}button{font:inherit;cursor:pointer}button:disabled{cursor:default}#app{height:100vh;display:flex;align-items:center;justify-content:center}.shell{position:relative;--party-panel-width: 200px;width:calc(960px + var(--party-panel-width));height:640px;flex-shrink:0;transform-origin:center;box-shadow:0 30px 100px #0009,0 0 0 1px #65706444}.game-surface{position:absolute;inset:0 0 0 var(--party-panel-width);outline:none}.game-surface canvas{display:block;image-rendering:pixelated}.hud{position:absolute;inset:0 0 0 var(--party-panel-width);pointer-events:none}.topbar{height:80px;display:flex;align-items:center;gap:24px;padding:12px 20px;background:linear-gradient(#202b2e,#182125);border-bottom:1px solid #c8a56155;box-shadow:0 3px 10px #0008}.unit{display:flex;align-items:center;gap:10px;width:240px}.portrait{width:48px;height:48px;flex-shrink:0;border:1px solid #b99d5d88;background-color:#121b20;background-size:192px 48px;background-repeat:no-repeat;image-rendering:pixelated;box-shadow:inset 0 0 12px #0009}.foe{border-color:#ad7365}.unit-info{flex:1}.unit-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;gap:8px}.unit-title b{font-size:12px;font-weight:600}.unit-title span{font-size:8px;letter-spacing:1.3px;color:#94a399}.bar{height:15px;margin-top:3px;background:#0c1114;border:1px solid #05090c;position:relative;overflow:hidden}.bar i{display:block;height:100%;transition:width .1s linear;background:linear-gradient(90deg,#49785b,#78a86d)}.bar span{position:absolute;inset:0;text-align:center;font:10px/13px ui-monospace,monospace;color:#fff;text-shadow:1px 1px #000}.mana{height:11px}.mana i{background:linear-gradient(90deg,#305878,#5a91ab)}.mana span{font-size:8px;line-height:9px}.target-hp i{background:linear-gradient(90deg,#8c423c,#c87560)}.unit-info small{font-size:9px;color:#778a8d}.target-frame.empty{opacity:.4}.run-info{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:3px}.eyebrow{font-size:9px;color:#c4a56b;letter-spacing:3px;font-weight:700}.run-info b{font-size:14px;font-weight:500}.run-info>span:last-child{font:9px ui-monospace,monospace;color:#7e9395;letter-spacing:2px}.party-panel{position:absolute;right:100%;top:0;bottom:0;width:var(--party-panel-width);background:linear-gradient(#202b2e,#141d21);border-right:1px solid #c8a56155}.party-heading{height:80px;display:flex;align-items:center;padding:20px;border-bottom:1px solid #c8a56155}.party-area{padding:10px;max-height:calc(100% - 145px);overflow-y:auto}.party-area:empty:after{content:"No other party members";display:block;padding:10px;color:#94a399;font-size:11px;line-height:1.5}.bottom-bar{position:absolute;bottom:0;width:100%;height:80px;background:linear-gradient(#1b2629,#141d21);border-top:1px solid #c8a56155;display:flex;align-items:center;justify-content:space-between;padding:8px 24px}.combat-state{display:flex;gap:10px;align-items:center;width:220px}.combat-state b{display:block;font-size:12px;font-weight:500;color:#b3c5b0}.combat-state small,.connection small{display:block;color:#758a8d;font-size:10px;margin-top:5px}.state-dot{width:6px;height:6px;background:#89a477;box-shadow:0 0 8px #89a47788;border-radius:50%}.fighting .state-dot{background:#d8775d;box-shadow:0 0 8px #d8775d88}.fighting b{color:#d79881}.connection{width:220px;text-align:right;font-size:10px;color:#9da99e}.actionbar{display:flex;gap:8px;pointer-events:auto}.ability{position:relative;width:66px;height:62px;padding:0;background:linear-gradient(145deg,#344247,#1d292e);color:#d7bd83;border:1px solid #8a7854;box-shadow:inset 0 0 0 3px #141d2199,0 2px 4px #0008;overflow:hidden}.ability:hover{border-color:#e3c58a;background:linear-gradient(145deg,#435257,#263238)}.ability:active{transform:translateY(1px)}.key{position:absolute;top:3px;left:5px;font:11px ui-monospace,monospace;color:#ddd2b9;z-index:3}.ability-icon{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:28px}.ability-name{position:absolute;left:0;right:0;bottom:12px;font-size:9px;letter-spacing:.4px;text-transform:capitalize;z-index:3}.cost{position:absolute;bottom:2px;left:0;right:0;color:#8eafbc;font:8px ui-monospace,monospace;z-index:3}.cooldown{position:absolute;top:12px;left:0;right:0;font:700 16px ui-monospace,monospace;color:#fff;text-shadow:0 1px 3px #000;z-index:4}.sweep{position:absolute;inset:0;background:conic-gradient(#02090cbb var(--sweep, 0deg),transparent 0);z-index:2}.unavailable .ability-icon{opacity:.4}.guard-active{border-color:#8fd0dc;box-shadow:0 0 12px #5ba4bb66}.feedback{position:absolute;left:200px;right:200px;bottom:98px;text-align:center;color:#f2ba87;font-size:12px;text-shadow:0 2px 3px #000;opacity:0;transition:opacity .15s}.feedback.visible{opacity:1}.modal{position:absolute;z-index:4;inset:80px 0;background:#080f14b8;display:grid;place-items:center;pointer-events:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}[hidden]{display:none!important}.modal-card{max-height:calc(100% - 24px);overflow-y:auto;text-align:center;padding:32px 48px;width:450px;background:linear-gradient(145deg,#293436,#162126);border:1px solid #ad935b66;box-shadow:0 20px 50px #0008}.modal-symbol{font-size:42px;color:#c7a96d;margin:14px}.modal h1{font-family:Georgia,serif;font-weight:400;font-size:32px;margin:8px 0}.modal p{font-size:12px;line-height:1.7;color:#9caeb0;margin:12px 0 24px}.modal button{padding:10px 28px;border:1px solid #b99b61;background:#b99b6122;color:#ead7b2;font-size:12px}.modal button:hover{background:#b99b6144}.modal button:disabled{opacity:.4}button:focus-visible{outline:2px solid #f0ce87;outline-offset:3px}.player-frame{pointer-events:auto;border:0;background:transparent;color:inherit;padding:0;text-align:left}.friendly .target-hp i{background:linear-gradient(90deg,#49785b,#78a86d)}.party-frame{display:block;pointer-events:auto;width:100%;padding:7px;margin-bottom:5px;background:#132024dc;color:#d3ddcf;border:1px solid #65786466;text-align:left}.party-frame b{display:block;line-height:14px;font-size:10px}.party-frame small{display:block;font-size:9px;color:#c3bca4;min-height:10px}.party-frame.selected{border-color:#90d6a0}.castbar{position:absolute;left:310px;right:310px;bottom:140px;height:24px;background:#101820;border:1px solid #bca571}.castbar i{display:block;height:100%;background:#977640}.castbar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:22px;text-shadow:1px 1px #000}.door-status{position:absolute;right:32px;top:390px;font-size:10px;color:#c6d9a8;text-shadow:1px 1px #000}.feedback{z-index:5}.modal-card.wide{width:min(880px,calc(100vw - 28px));max-height:100%;overflow-y:auto;padding:16px 22px}.class-groups{display:grid;gap:10px;max-height:min(49vh,430px);overflow-y:auto;margin-top:12px;padding:2px 4px}.class-group h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:#e2c07b;font:14px Georgia,serif;text-align:left}.class-group h2:after{content:"";flex:1;height:1px;background:#b99b6144}.class-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}.modal .class-card{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:2px 8px;width:100%;min-width:0;text-align:left;padding:7px;border-color:#586c6670;background:#111d2166}.class-card.selected{border-color:#e2c07b;box-shadow:0 0 0 1px #e2c07b}.class-card .portrait{grid-column:1;grid-row:1;width:34px;height:34px;margin:0;background-size:136px 34px}.class-card-info{grid-column:2;min-width:0}.class-card strong,.class-card span,.class-card small{display:block}.class-card strong{font:16px Georgia,serif;margin-bottom:2px}.class-card span{font-size:9px;color:#b3c5af;min-height:20px}.class-card .class-count{min-height:0;margin:2px 0 0;font-size:9px;line-height:1.3}.class-card .class-abilities{grid-column:1 / -1;overflow:hidden;min-height:26px;color:#abbab9;font-size:8px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.modal .class-hint{margin:10px 0;font-size:11px}.join-controls{display:flex;justify-content:center;gap:10px}.join-controls input{width:160px;padding:10px;background:#111c21;border:1px solid #6d8175;color:#ead7b2;text-transform:uppercase;font:14px monospace}.lobby-code{font-size:10px;letter-spacing:2px;color:#a8b3a6}.lobby-code strong{display:inline-block;font:700 20px monospace;color:#e7c98b;padding:0 10px;-webkit-user-select:all;user-select:all}.lobby-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:10px 0;font-size:11px}.leave-run{pointer-events:auto;margin-top:4px;padding:0;border:0;background:transparent;color:#aa9980;font-size:9px}.lobby-invite{display:flex;align-items:center;justify-content:center;gap:18px}.invite-link{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;color:#a8b3a6}.invite-link input{width:310px;padding:6px 8px;background:#111c21;border:1px solid #6d8175;color:#ead7b2;font:11px monospace}.staging{position:absolute;top:145px;left:210px;right:30px;pointer-events:auto;background:#182326ee;border:1px solid #59614e;padding:8px 14px}.staging .lobby-invite{margin:0;gap:16px}.staging .lobby-code{font-size:9px}.staging .lobby-code strong{font-size:18px}.staging button{white-space:nowrap;cursor:pointer;color:#ebd4a0;background:#333a36;border:1px solid #59614e;padding:8px}.modal .join-controls{margin-top:22px}.staging .invite-link input{width:240px}.door-status.gathering{left:210px;right:210px;top:430px;text-align:center;font-size:12px}.encounter-info{position:absolute;left:25px;right:25px;top:88px;text-align:center;font-size:11px;color:#e8d9b6;text-shadow:1px 1px #000}.encounter-timers{color:#ffc76d;margin-top:5px;font-weight:600}.options-controls{position:absolute;right:100%;bottom:18px;width:var(--party-panel-width);padding:10px;pointer-events:auto;color:#bcc6bd;font-size:11px}.options-controls button,.options-menu button{color:inherit;background:#253537;border:1px solid #6e806b;padding:6px}.options-controls button:hover,.options-menu button:hover{background:#35494a}.options-menu{width:min(380px,calc(100vw - 32px));padding:28px;color:#e9e3d2;background:linear-gradient(145deg,#293436,#162126);border:1px solid #ad935b99;box-shadow:0 20px 50px #0008}.options-menu::backdrop{background:#080f14b8}.options-menu h1{margin:0 0 24px;font:28px Georgia,serif;color:#ead7b2}.volume-setting{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:24px;font-size:14px}.volume-setting output{color:#c7a96d}.volume-setting input{grid-column:1 / -1;width:100%;margin:0;accent-color:#c7a96d}.options-menu form{margin-top:24px;text-align:right}.options-menu button{padding:8px 16px}.wipe-counts{color:#ebd4a0;font-size:13px}.wipe-roster{list-style:none;padding:0;margin:20px 0;text-align:left}.wipe-roster li{display:flex;justify-content:space-between;gap:24px;padding:8px 0;border-bottom:1px solid #46534b}.wipe-roster b{color:#bcc6bd}.modal.wipe{inset:0;z-index:6}.party-heading [data-testid=party-size]{color:#c4a56b;font-size:11px;margin-left:8px}.modal.wipe .modal-card{max-height:calc(100% - 24px);overflow-y:auto}.unit-buffs{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}.unit-buffs:empty{display:none}.unit-buff{border:1px solid #847452;background:#3d3526;color:#ffe09c;border-radius:2px;padding:1px 3px;font:8px/11px monospace;white-space:nowrap}.unit-buff.haste{color:#e3c7ff;background:#3a2947;border-color:#8d6da4}.unit-buff.lifesteal{color:#a0e3af;border-color:#81b68b77}.unit-buff.shield{color:#b7e6ff;background:#223b49;border-color:#58849a}.unit-buff.expiring{border-color:#f4ba77}.party-composition{margin-top:14px;color:#e4c790;font-size:13px}.party-composition small{display:block;margin-top:5px;font-size:10px;color:#a9babb}.class-count{margin:6px 0;color:#e4c790;font-size:10px;min-height:24px}.unit-buff.burn{color:#ffb76d;border-color:#a55232;background:#54291c}.fight-picker{display:flex;align-items:center;gap:14px;margin-top:8px;padding-top:8px;border-top:1px solid #59614e}.fight-picker label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:11px;color:#a8b3a6}.fight-picker select{max-width:250px;padding:6px 8px;background:#111c21;border:1px solid #6d8175;color:#ead7b2;font:inherit}.fight-picker select:disabled{opacity:.8}.fight-picker small{font-size:10px;color:#a8b3a6}