:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0b1016;color:#e7edf1}*{box-sizing:border-box}body{margin:0;overflow:hidden;width:100vw;height:100dvh}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}button,input,select{font:inherit;color:inherit;border:1px solid #526171;border-radius:8px;background:#263541;padding:12px}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c5a0ff;outline-offset:3px}
#hud{position:fixed;top:max(20px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;width:min(440px,calc(100% - 32px));filter:drop-shadow(0 3px 10px #0008);pointer-events:none}
#level{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;padding:0;border:1px solid #baa3d077;border-radius:50%;background:#151d29ed;font-size:21px;font-weight:700}.meters{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.health-track{height:23px;position:relative;overflow:hidden;border-radius:6px;background:#1b151aed;border:1px solid #ffb1a744}#health-fill{height:100%;width:0;background:linear-gradient(90deg,#ae3548,#ee716b);transition:width .15s ease}#health-label{position:absolute;inset:0;text-align:center;line-height:21px;font-size:12px;font-weight:650;color:#fff;text-shadow:0 1px 3px #000}
progress{appearance:none;-webkit-appearance:none;border:0;display:block;width:100%;height:8px;border-radius:4px;overflow:hidden;background:#241c34}progress::-webkit-progress-bar{background:#241c34;border-radius:4px}progress::-webkit-progress-value{background:linear-gradient(90deg,#773dc7,#c388f7);border-radius:4px}progress::-moz-progress-bar{background:#a15be0;border-radius:4px}
.panel{border:1px solid #64718455;border-radius:18px;background:#121c28f5;box-shadow:0 24px 90px #0009;padding:28px;color:#e7edf1;width:min(420px,calc(100% - 32px))}
 dialog{max-height:calc(100dvh - 48px);overflow:auto}dialog::backdrop{background:#05091099;backdrop-filter:blur(5px)}.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.menu-heading h2{margin:0}.menu-heading button{padding:2px 12px;font-size:26px;background:transparent}#inventory button{display:block;margin:8px 0;width:100%;text-align:left}#join{width:100%;margin-top:18px}#status,#network{color:#94a5b7;font-size:12px;line-height:1.6}
#error{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);margin:0;max-width:calc(100% - 32px);background:#482329ed;color:#ffd9dc;border:1px solid #a95c68;padding:12px 20px;border-radius:10px;pointer-events:none}#error:empty{display:none}[hidden]{display:none!important}

#xp,#xp::-webkit-progress-bar{background:#4a2868}#world:focus{outline:none}

#room-select{display:block;width:100%;margin-top:8px}


#menu-buttons{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:stretch;gap:8px;filter:drop-shadow(0 3px 10px #0008)}
#menu-buttons button{width:84px;min-height:84px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#151d29ed;border-color:#baa3d077;font-size:12px}
#menu-buttons svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#menu-buttons small{font-size:9px;color:#94a5b7}#backpack-button:hover{background:#30243e;border-color:#c5a0ff}
@media(max-width:520px){#menu-buttons{gap:6px}#menu-buttons button{width:72px;min-height:76px}}

/* Inventory fits the viewport; storage is paged rather than scrolled. */
#menu{width:min(960px,calc(100vw - 32px));height:min(600px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:20px;overflow:hidden}
#menu[open]{display:flex;flex-direction:column;gap:14px}#menu p,#menu h3{margin:0}#menu .menu-heading{flex-shrink:0}#menu #profile{font-size:12px;color:#94a5b7;margin-top:5px}
.inventory-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;flex:1;min-height:0}.equipment-pane,.backpack-pane{min-height:0;min-width:0;display:flex;flex-direction:column;gap:10px}.equipment-pane{padding:14px;border:1px solid #64718455;border-radius:12px;background:radial-gradient(ellipse at 50% 65%,#344357,#101923 75%)}
.character-stage{position:relative;flex:1;min-height:0}#inventory-character{position:absolute;width:100%;height:100%;object-fit:contain}.paperdoll{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}.paperdoll button{width:42%;min-height:72px;padding:10px 6px;border-color:#ac8ac5;background:#30243eed;font-size:12px;overflow-wrap:anywhere;pointer-events:auto}.equipment-hint{font-size:11px;color:#94a5b7;text-align:center}
.bag-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.bag-tabs{display:flex;gap:6px}.bag-tabs button{padding:7px 10px;font-size:12px}.bag-tabs [aria-pressed="true"]{background:#48305c;border-color:#c5a0ff}#gold{font-size:13px;font-weight:700;color:#f1cb77;white-space:nowrap}#capacity,#overflow-title{font-size:14px}#merchant,#loot-notice,#overflow-note{font-size:11px;line-height:1.3;color:#d8c19a}#loot-notice:empty{display:none}
.backpack{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;flex:1;min-height:0}.inventory-slot{min-height:0;min-width:0;padding:8px 4px;border:1px solid #526171;border-radius:8px;background:#1b2835;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center}.inventory-slot strong{font-size:12px;overflow-wrap:anywhere}#inventory button{font-size:10px;padding:6px 2px;margin:0;text-align:center;width:100%}.inventory-slot.empty{color:#7f8d9b;border-style:dashed;font-size:11px}
#inventory-feedback{font-size:11px;color:#ffe2a3;min-height:14px;line-height:1.3}#storage-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}#overflow{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;flex:1;min-height:0}.storage-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding:6px;border:1px solid #526171;border-radius:8px;align-content:center}.storage-row strong{grid-column:1/-1;font-size:12px;overflow-wrap:anywhere}.storage-row button{font-size:10px;padding:6px}.storage-pages{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px}.storage-pages button{padding:3px 12px}
.inventory-footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#94a5b7;flex-shrink:0}.inventory-footer input{margin:0;vertical-align:middle}
@media(max-width:600px){#menu{padding:12px;gap:10px}.inventory-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px}.equipment-pane{padding:8px}.backpack{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:4px}.inventory-slot{padding:3px;gap:2px}.inventory-slot strong{font-size:10px}#inventory button{padding:3px 1px;font-size:9px}.paperdoll{flex-direction:column;justify-content:flex-end;align-items:stretch}.paperdoll button{width:100%;min-height:48px;font-size:10px}.bag-heading{flex-wrap:wrap;gap:4px}.bag-tabs button{padding:5px;font-size:10px}.inventory-footer span{display:none}}
@media(max-height:500px){#menu{padding:10px;gap:8px}.equipment-pane{padding:8px}.equipment-hint,#loot-notice{display:none}.inventory-layout{gap:12px}.inventory-slot{gap:2px;padding:3px}#inventory button{padding:3px}#menu #profile{font-size:10px}.inventory-footer{font-size:9px}}

#delete-profile{padding:5px 8px;font-size:10px;color:#ffb1a7;border-color:#a95c68;background:#482329}.inventory-footer{align-items:center}

/* Character window: talent trees beside a bonus summary. */
#character-button small{color:#f1cb77;font-weight:700}#character-button:hover{background:#30243e;border-color:#c5a0ff}
#level{position:relative}#level.has-points::after{content:'';position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#f1cb77;box-shadow:0 0 0 2px #151d29}
#talents{width:min(1080px,calc(100vw - 32px));height:min(700px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:20px;overflow:hidden}
#talents[open]{display:flex;flex-direction:column;gap:12px}#talents p,#talents h3{margin:0}#talents .menu-heading{flex-shrink:0}#talent-summary{font-size:12px;color:#94a5b7;margin-top:5px}
.talent-main{position:relative;display:flex;flex:1;min-height:0;min-width:0;overflow:hidden}#talent-tree{flex:1}#talent-tree{position:relative;flex:1;min-height:0;border:1px solid #64718455;border-radius:12px;background:radial-gradient(circle at center,#1b2233,#0d131b 70%);overflow:hidden}
.talent-web{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none}.talent-web:active{cursor:grabbing}
/* Each tree has its color (--tree), a dark version for what isn't in reach (--tree-dim) and a light one for what you own
   (--tree-light): owned notables are filled with the tree's color inside a light ring. The path you're about to buy is gold. */
.talent-web{--tree:#8d7aa8;--tree-dim:#4a5566;--tree-light:#d8ccf0}.talent-web .tree-strength{--tree:#e66;--tree-dim:#8a4545;--tree-light:#ffc4c4}.talent-web .tree-agility{--tree:#6c6;--tree-dim:#3f7a44;--tree-light:#c4f2c4}.talent-web .tree-endurance{--tree:#69f;--tree-dim:#4762a0;--tree-light:#c8daff}
.web-link{stroke:var(--tree-dim);stroke-width:.05}.web-link.open{stroke:var(--tree);stroke-width:.06}.web-link.owned{stroke:var(--tree-light);stroke-width:.09}
.web-center{fill:#e2c26f;stroke:#211d24;stroke-width:.05}
.web-label{fill:#7f8ea3;font-weight:700;pointer-events:none}.web-label.direction{font-size:1.2px;fill:var(--tree);fill-opacity:.22;letter-spacing:.1px;text-transform:uppercase}.web-label.domain{font-size:.75px;fill:var(--tree);fill-opacity:.3;text-transform:uppercase}.web-label.cluster{font-size:.26px}
.web-node{cursor:pointer;outline:none}.web-dot{fill:#1d2733;stroke:var(--tree-dim);stroke-width:.05}.web-core{fill:none;stroke:var(--tree-dim);stroke-width:.04}
.web-name{font-size:.2px;fill:#c6d0dc;pointer-events:none;paint-order:stroke;stroke:#0d131b;stroke-width:.06}.talent-web[data-zoom="far"] .web-name.small{display:none}
.web-node.ready .web-dot{stroke:var(--tree);fill:var(--tree-dim)}.web-node.ready:hover .web-dot,.web-node:focus .web-dot{stroke:#fff}
.web-node.next .web-dot{stroke:var(--tree)}.web-node.locked>*{fill-opacity:.55;stroke-opacity:.55}
.web-node.owned .web-dot{fill:var(--tree);stroke:var(--tree-light);stroke-width:.08}.web-node.owned .web-core{stroke:var(--tree-light)}.web-node.owned .web-name{fill:var(--tree-light)}
.web-node.future .web-dot{stroke-dasharray:.08 .06}.web-node.future:not(.owned) .web-dot{fill:#151b24}
.web-node.keystone .web-dot{stroke-width:.08}.web-node.replaces .web-dot{stroke-width:.09}
.web-node.selected .web-dot{stroke:#fff;stroke-width:.1}
.web-hit{fill:transparent}.web-node.minor .web-dot{fill:var(--tree-dim);stroke:none}.web-node.minor.ready .web-dot{fill:var(--tree)}.web-node.minor.owned .web-dot{fill:var(--tree-light)}.web-node.minor.future:not(.owned) .web-dot{fill:color-mix(in srgb,var(--tree-dim) 60%,#151b24)}
.web-node.minor:hover .web-dot,.web-node.minor:focus .web-dot,.web-node.minor.selected .web-dot{stroke:#fff;stroke-width:.04}
.web-node.path .web-dot{stroke:#e2c26f;stroke-dasharray:none}.web-node.minor.path .web-dot{fill:#e2c26f}.web-link.path{stroke:#e2c26f;stroke-width:.07;stroke-dasharray:.14 .08}
/* Fades use fill- and stroke-opacity on the shapes, never opacity: an opacity on hundreds of node groups or lines made
   the browser blend each one separately, and panning the web dropped to about 17 fps. */
.web-node.far:not(.path):not(.selected)>*{fill-opacity:.2;stroke-opacity:.2}.web-node.far:not(.path):not(.selected) .web-name{display:none}.web-link.far{stroke-opacity:.35}.web-label.cluster.far{fill-opacity:.3}
.web-controls{position:absolute;right:8px;bottom:8px;display:flex;gap:4px}.web-controls button{width:30px;height:30px;padding:0;font-size:16px}
/* The selected node's details, under it like a caption on a dark backdrop whose edges feather into the web, so nodes
   underneath don't show through the text. */
#talent-detail{position:absolute;transform:translateX(-50%);width:max-content;max-width:min(300px,80%);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;border-radius:14px;background:#0d131bec;box-shadow:0 0 12px 8px #0d131bec;text-align:center;font-size:12.5px;line-height:1.4;color:#d6dee8;text-shadow:0 1px 2px #0d131b;pointer-events:none}
#talent-detail[hidden]{display:none}.talent-detail-name{font-size:16px;font-weight:650;color:#f2f5f9}
.talent-detail-where{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8c9bae}.talent-detail-note{font-size:11px;color:#8c9bae}.talent-detail-total{font-size:11px;color:#8c9bae}
.talent-learn{pointer-events:auto;margin-top:5px;padding:4px 14px;font-size:12px;border-radius:999px;border-color:#ffffff40;background:#0d131bcc}.talent-learn:disabled{border-color:#ffffff1f;color:#8c9bae}
.web-node.selected .web-name{display:none}
/* The bar under the web: loadout, bonuses and respec, kept quiet. */
.talent-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex-shrink:0;font-size:12px;color:#8c9bae}
#talent-loadout{display:flex;align-items:center;gap:10px}.loadout-row{display:flex;align-items:center;gap:6px}.loadout-row select{padding:3px 6px;font-size:12px}.talent-empty{font-size:11px;color:#6f7d8f}
.talent-bonuses{position:relative}.talent-bonuses summary{cursor:pointer;list-style:none;color:#c6d0dc}.talent-bonuses summary::-webkit-details-marker{display:none}
#talent-stats{display:flex;flex-direction:column;gap:3px;font-size:12px;color:#d6dee8}.talent-bonuses[open] #talent-stats{position:absolute;bottom:calc(100% + 8px);left:0;z-index:2;min-width:220px;max-height:min(50vh,360px);overflow:auto;padding:10px 12px;border:1px solid #64718455;border-radius:10px;background:#101923f2}
.talent-stat-group{margin-top:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8c9bae}.talent-stat-group:first-child{margin-top:0}
#reset-talents{margin-left:auto;padding:3px 10px;font-size:11px;color:#d9a29b;border-color:#a95c6866;background:transparent}#talent-feedback{font-size:11px;color:#ffe2a3;min-height:14px;line-height:1.3}
@media(max-width:700px){#talents{padding:12px}.talent-bar{gap:10px}}

/* Character creation: a menu screen with the preview stage beside category tabs and option rows. */
.creator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:14px;width:min(940px,calc(100vw - 32px));height:min(700px,calc(100dvh - 32px));padding:20px}
.creator p{margin:0}.creator .menu-heading{flex-shrink:0}.creator .menu-heading h2{font-size:24px}.creator-kicker{font-size:11px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:#c5a0ff;margin-bottom:4px!important}
.creator svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#creator-random{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;background:#151d29ed;border-color:#baa3d077}#creator-back{padding:8px 14px;font-size:13px;background:#151d29ed;border-color:#baa3d077}.menu-actions{display:flex;gap:8px}#creator-random:hover,#creator-turn:hover,#creator-back:hover{background:#30243e;border-color:#c5a0ff}
.creator-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;flex:1;min-height:0}
.creator-stage{position:relative;min-height:0;border:1px solid #64718455;border-radius:12px;background:radial-gradient(ellipse at 50% 65%,#344357,#101923 75%);overflow:hidden}
#creator-preview,#characters-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#creator-turn{position:absolute;top:10px;right:10px;display:grid;place-items:center;padding:8px;background:#151d29ed;border-color:#baa3d077}
#creator-nameplate,#characters-nameplate{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:90%;padding:4px 12px;border-radius:6px;background:#0b1016cc;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#creator-nameplate:empty,#characters-nameplate:empty{display:none}
.creator-options{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.creator-tabs{display:flex;gap:6px;flex-shrink:0}.creator-tabs button{padding:7px 14px;font-size:12px}.creator-tabs [aria-selected="true"]{background:#48305c;border-color:#c5a0ff}
.creator-rows{flex:1;min-height:0;overflow:auto;overflow-anchor:none;display:flex;flex-direction:column;gap:6px;padding:2px}
.creator-row{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;min-height:48px;padding:6px 10px;border:1px solid #526171;border-radius:8px;background:#1b2835;outline:none;flex-shrink:0}
.creator-row.active,.character-row[aria-pressed="true"]{border-color:#c5a0ff;background:#30243e}
.character-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;color:inherit}.character-row strong{font-size:15px}.character-row small{font-size:12px;color:#94a5b7}
#new-character{flex-shrink:0;padding:10px;background:#151d29;border-style:dashed}#switch-character{margin-top:12px;width:100%}
.creator-label{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#94a5b7}.creator-label small{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:#e7edf1}
.creator-stepper{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:6px}.creator-stepper button{padding:5px 0;font-size:18px;line-height:1;background:#151d29}.creator-stepper output{display:flex;flex-direction:column;align-items:center;font-size:14px;font-weight:700}.creator-stepper output small{font-size:10px;font-weight:400;color:#94a5b7}
.creator-swatches{display:flex;flex-wrap:wrap;gap:7px}.creator-swatches button{width:26px;height:26px;padding:0;border:2px solid #0b1016;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #64718488}.creator-swatches [aria-checked="true"]{box-shadow:0 0 0 2px #c5a0ff}.creator-swatches button:hover{box-shadow:0 0 0 2px #baa3d0}
.creator-name{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;padding:0 11px;flex-shrink:0}.creator-name label{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#94a5b7}.creator-name input{padding:10px 12px;background:#101923}
#creator-feedback{font-size:11px;color:#ffe2a3;min-height:14px;line-height:1.3;flex-shrink:0}
#connect,#play{flex-shrink:0;padding:14px;font-size:15px;font-weight:700;background:#48305c;border-color:#c5a0ff}#connect:hover:not(:disabled),#play:hover:not(:disabled){background:#5a3b73}
@media(max-width:700px){.creator{height:calc(100dvh - 32px);padding:12px;gap:10px}.creator-layout{grid-template-columns:1fr;grid-template-rows:minmax(150px,.9fr) minmax(0,1.3fr);gap:10px}.creator-row,.creator-name{grid-template-columns:80px minmax(0,1fr)}.creator .inventory-footer span:first-child{display:none}}
@media(max-height:560px){.creator{padding:12px;gap:8px}.creator .menu-heading h2{font-size:19px}.creator-row{min-height:40px;padding:4px 8px}#connect,#play{padding:10px}}
#elevator p{margin:6px 0 0;font-size:13px;color:#94a5b7}
#settings label,#testing label{display:flex;align-items:center;gap:10px;margin-top:20px}#settings p,#testing p{margin:6px 0 0;font-size:13px;color:#94a5b7}.testing-row{display:flex;gap:8px;margin-top:20px}.testing-row select{flex:1}#spawn-boss,#change-look{width:100%;margin-top:8px}#testing-feedback{color:#ffe2a3;min-height:1.3em}#elevator-floors{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:18px}#elevator-floors button{padding:10px 6px}


/* Reference layout: selected item above a compact bag, paperdoll on the right. */
#menu{width:min(1040px,calc(100vw - 32px));height:min(660px,calc(100dvh - 32px))}
.inventory-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}
.backpack-pane{gap:10px}.equipment-pane{padding:14px;background:radial-gradient(ellipse at 50% 55%,#344357,#101923 75%)}
.item-detail{display:grid;grid-template-columns:92px minmax(0,1fr);gap:6px 12px;padding:12px;min-height:190px;border:1px solid #64718455;border-radius:10px;background:#18232e;flex-shrink:0}
.item-icon{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.item-icon svg,.item-icon img{width:100%;height:100%;object-fit:contain}
.item-detail>.item-icon{grid-column:1;grid-row:1/6;height:100px;padding:8px;background:#263541;border-radius:6px}
.item-category,.item-detail h3,.item-heading,.item-detail>.item-description,.item-stats,.item-actions{grid-column:2}.item-category{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#c5a0ff}.item-detail h3{font-size:19px}.item-description{font-size:11px;line-height:1.4;color:#aab6c8}.item-detail>.item-description:last-child{display:none}
.item-stats{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:3px 0;font-size:11px}.item-stats dt{color:#94a5b7}.item-stats dt.tuning{grid-column:1/-1;color:#9fd6ff}.item-stats dt.quirk{grid-column:1/-1;color:#ffd38a;line-height:1.35}.item-stats dt.quirk.exotic{color:#f0a24a;font-weight:650}.item-stats dt.quirk.sealed{color:#8e98a8;font-style:italic}.item-stats dd{margin:0;text-align:right;font-weight:650}
.item-actions{display:flex;gap:6px}.item-actions button{flex:1;padding:5px 8px;min-height:28px;font-size:11px;line-height:1.2}.item-actions button:first-child{background:#48305c;border-color:#ac8ac5}
.bag-heading{flex-shrink:0}.bag-tabs button{padding:5px 10px;font-size:11px}#gold{font-size:14px;color:#ffe2a3}#capacity{font-size:12px}
.backpack{flex:none;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:7px;align-content:start}
.inventory-slot{aspect-ratio:1;min-height:0;padding:6px;display:flex;position:relative;overflow:hidden;border-radius:5px;background:#202d39}.inventory-slot.empty{border-style:solid;background:#141e28;opacity:.65}
:is(#inventory,#chest .backpack,#shop .backpack) .item-select{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent}.item-select strong{display:none}.item-select .item-icon{height:100%;width:100%;padding:3px}.inventory-slot.selected{border-color:#f1cb77;box-shadow:inset 0 0 0 1px #f1cb77}
#merchant{font-size:11px}.character-stage{min-height:240px}.paperdoll{inset:0;display:block}.paperdoll .equipment-slot{position:absolute;width:64px;height:64px;min-height:0;padding:7px;background:#202d39;border-color:#647184;border-radius:6px;font-size:11px}.equipment-slot.armor{left:0;top:27%}.equipment-slot.weapon{left:0;top:64%}.equipment-slot.offhand{right:0;top:45%}
@media(max-width:600px){#menu{height:calc(100dvh - 24px);padding:10px}.inventory-layout{gap:10px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.equipment-pane{padding:6px}.item-detail{grid-template-columns:1fr;padding:8px;min-height:0}.item-detail>.item-icon{display:none}.item-category,.item-detail h3,.item-heading,.item-detail>.item-description,.item-stats,.item-actions{grid-column:1}.item-detail h3{font-size:16px}.backpack{gap:4px;grid-template-columns:repeat(4,minmax(0,1fr))}.inventory-slot{padding:3px}.paperdoll .equipment-slot{width:44px;height:44px;padding:4px;font-size:9px}.character-stage{min-height:180px}.item-stats{font-size:10px}.item-actions{flex-wrap:wrap}.equipment-hint{font-size:10px}}
@media(max-height:550px){.item-detail{padding:8px;gap:3px;min-height:0}.item-detail>.item-icon{height:70px}.item-detail>.item-description{display:none}.item-stats{grid-template-columns:1fr auto 1fr auto;font-size:10px;gap:2px 6px}.inventory-layout{gap:12px}.backpack{max-width:330px}.character-stage{min-height:160px}}

/* Labels live above the icon boxes; three slots flank each side of the character. */
.paperdoll .equipment-position{position:absolute;width:64px;display:flex;flex-direction:column;gap:5px;align-items:center;pointer-events:none}
.paperdoll .equipment-label{font-size:11px;font-weight:650;color:#b6c5d3;white-space:nowrap;line-height:16px;text-align:center}
.paperdoll .equipment-slot{position:static;flex:none;width:64px;height:64px;min-height:0;pointer-events:auto}
.equipment-position.helmet{left:0;top:6%}.equipment-position.armor{left:0;top:37%}.equipment-position.weapon{left:0;top:68%}
.equipment-position.amulet{right:0;top:6%}.equipment-position.ring{right:0;top:37%}.equipment-position.offhand{right:0;top:68%}
.paperdoll .equipment-slot.two-handed .item-icon{opacity:.35;filter:grayscale(.6)}
.paperdoll .equipment-slot:disabled{opacity:.65}
.paperdoll .helmet-toggle{position:absolute;left:calc(100% + 6px);bottom:0;width:52px;height:64px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#7d8c9c;font-size:10px;font-weight:650;line-height:12px;text-align:center;pointer-events:auto}
.helmet-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.helmet-toggle[aria-pressed=true]{color:#b6c5d3}.helmet-toggle:hover{color:#e3ecf4}
@media(max-width:600px){.paperdoll .equipment-position{width:44px;gap:3px}.paperdoll .equipment-slot{width:44px;height:44px}.paperdoll .helmet-toggle{height:44px;width:40px;font-size:9px;line-height:10px}.paperdoll .equipment-label{font-size:10px}}
@media(max-height:550px){.paperdoll .equipment-position{width:48px;gap:2px}.paperdoll .equipment-slot{width:48px;height:48px}.paperdoll .helmet-toggle{height:48px}.paperdoll .equipment-label{font-size:10px;line-height:13px}}

.player-stats{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 16px;margin:0;padding:12px 4px 4px;flex-shrink:0;font-size:13px;line-height:1.3}
.player-stats dt{color:#aab6c8}.player-stats dd{margin:0;color:#e7edf1;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:600px){.player-stats{font-size:11px;gap:5px 8px;padding-top:8px}}
@media(max-height:550px){.player-stats{font-size:11px;gap:3px 8px;padding-top:5px}.character-stage{min-height:140px}}

/* Reserve the same detail footprint for every selected item. */
:is(#item-detail,#chest-detail,#shop-detail){height:292px;min-height:292px;max-height:292px;flex:0 0 292px;grid-template-rows:14px 48px 32px minmax(0,1fr) 28px;align-content:stretch;overflow:hidden}
:is(#item-detail,#chest-detail,#shop-detail)>.item-category{grid-row:1}:is(#item-detail,#chest-detail,#shop-detail)>.item-heading{grid-row:2}:is(#item-detail,#chest-detail,#shop-detail)>.item-description:not(:last-child){grid-row:3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
:is(#item-detail,#chest-detail,#shop-detail)>.item-stats{grid-row:4;align-content:start;min-height:0;overflow:auto}:is(#item-detail,#chest-detail,#shop-detail)>.item-actions{grid-row:5;align-self:end}
:is(#item-detail,#chest-detail,#shop-detail)>.item-icon{grid-row:1/6;align-self:start}#merchant,#loot-notice{display:none!important}
@media(max-width:600px){:is(#item-detail,#chest-detail,#shop-detail){height:292px;min-height:292px;max-height:292px;flex-basis:292px;grid-template-rows:14px 44px 32px minmax(0,1fr) 28px;gap:4px 8px}}
@media(max-height:550px){:is(#item-detail,#chest-detail,#shop-detail){height:202px;min-height:202px;max-height:202px;flex-basis:202px;grid-template-rows:14px 44px 0 minmax(0,1fr) 28px}:is(#item-detail,#chest-detail,#shop-detail)>.item-description:not(:last-child){display:none}}
/* Item details fold to their headline stat, tuning and quirks (one line each) until tapped; .expanded is the full panel
   above. Two tuning lines and two quirks fit; an exotic's third quirk scrolls. */
:is(#item-detail,#chest-detail,#shop-detail){position:relative;cursor:pointer}:is(#item-detail,#chest-detail,#shop-detail):hover{border-color:#8b97a8}:is(#item-detail,#chest-detail,#shop-detail)>.item-category{padding-right:24px}
:is(#item-detail,#chest-detail,#shop-detail):not(.expanded){height:208px;min-height:208px;max-height:208px;flex-basis:208px;grid-template-rows:14px 44px 0 minmax(0,1fr) 28px}
:is(#item-detail,#chest-detail,#shop-detail):not(.expanded)>.item-description:not(:last-child),:is(#item-detail,#chest-detail,#shop-detail):not(.expanded) .item-stats>:not(.tuning,.quirk){display:none}
:is(#item-detail,#chest-detail,#shop-detail):not(.expanded) .item-stats{overflow-y:auto;grid-auto-rows:max-content}:is(#item-detail,#chest-detail,#shop-detail):not(.expanded) .item-stats>.quirk{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-heading{display:flex;flex-direction:column;justify-content:center;min-width:0}.item-heading h3{margin:0}.item-headline{margin:0;font-size:11px;color:#94a5b7}.item-headline strong{font-size:18px;font-weight:750;color:#e7edf1}
@media(max-height:550px){:is(#item-detail,#chest-detail,#shop-detail):not(.expanded){height:180px;min-height:180px;max-height:180px;flex-basis:180px}}
.detail-toggle{position:absolute;top:6px;right:6px;width:24px;height:24px;min-height:0;padding:0;display:grid;place-items:center;background:transparent;border:0;color:#94a5b7}.detail-toggle:hover{color:#e7edf1}
.detail-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:rotate .15s}.expanded>.detail-toggle svg{rotate:180deg}
#chest,#shop{width:min(900px,calc(100vw - 32px));padding:20px}#chest[open],#shop[open]{display:flex;flex-direction:column;gap:14px}#chest p,#chest h3,#shop p,#shop h3{margin:0}#chest h3,#shop h3{font-size:12px}
#chest .menu-heading p,#shop .menu-heading p{font-size:12px;color:#94a5b7;margin-top:5px}#chest .backpack,#shop .backpack{flex:none}#chest-gold,#shop-gold{font-size:14px;font-weight:700;color:#ffe2a3;white-space:nowrap}#chest-feedback,#shop-feedback{font-size:11px;color:#ffe2a3;min-height:14px}
/* Dragging gear: a vertical swipe still scrolls the backpack. The ghost follows the pointer in the top layer; out past
   the window it shows the drop icon. */
#inventory .inventory-slot:not(.empty),#equipment .equipment-slot:not(:disabled){touch-action:pan-y;cursor:grab}
#drag-ghost{position:fixed;inset:auto;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;width:56px;height:56px;translate:-50% -50%}
#drag-ghost>span{display:block;width:100%;height:100%;opacity:.85}#drag-ghost .item-icon{width:100%;height:100%}
#drag-ghost>b{display:none;position:absolute;left:50%;bottom:-4px;translate:-50% 0;box-shadow:0 2px 6px #0008;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:99px;background:#7c2f2f;color:#fff;font-size:11px;white-space:nowrap}
#drag-ghost>b svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#drag-ghost.dropping>span{opacity:.5}#drag-ghost.dropping>b{display:flex}
.drop-target:is(#inventory,.equipment-slot){outline:2px dashed #f1cb77;outline-offset:3px}.drop-hover:is(#inventory,.equipment-slot){outline-style:solid;background:#3a3222}
.item-hint{margin:0;font-size:11px;color:#94a5b7;align-self:center}
/* Upgraded backpacks (up to 50 slots) scroll inside their pane. */
.backpack:is(#inventory,#chest-backpack,#shop-backpack){flex:0 1 auto;min-height:0;overflow-y:auto;padding:2px;grid-auto-rows:max-content}
#take-all{padding:4px 12px;font-size:11px;background:#48305c;border-color:#ac8ac5}#chest .inventory-slot[draggable="true"]{cursor:grab}#chest .backpack.drop-target{outline:2px dashed #f1cb77;outline-offset:4px;border-radius:6px}
#boss-bar{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 32px));text-align:center;filter:drop-shadow(0 3px 10px #0008);pointer-events:none}#boss-name{margin:0 0 6px;font-size:15px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:#f4dccb;text-shadow:0 1px 3px #000}.boss-track{height:16px;overflow:hidden;border-radius:4px;background:#1b151aed;border:1px solid #ffb1a755}#boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#8e1f2e,#e0403f);transition:width .2s ease}#break-track{height:6px;margin:4px auto 0;width:60%;overflow:hidden;border-radius:3px;background:#10162aed;border:1px solid #7fb2ff66}#break-fill{height:100%;width:0;background:linear-gradient(90deg,#2f6fe0,#8cc8ff)}
/* Clear of the menu buttons in the bottom-right corner. */
@media(max-width:960px){#boss-bar{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 100px)}}
/* Rarity frames: slots holding items rarer than common take their rarity's color as border and glow (set by rarityFrame). */
:is(.inventory-slot,.paperdoll .equipment-slot,.item-detail>.item-icon)[data-rarity]{border:2px solid var(--rarity);box-shadow:0 0 10px -2px var(--rarity),inset 0 0 14px -4px var(--rarity)}
.inventory-slot.selected[data-rarity]{box-shadow:0 0 0 2px #f1cb77,inset 0 0 14px -4px var(--rarity)}


#level-up-banner{position:fixed;top:24px;left:0;width:100%;text-align:center;pointer-events:none;z-index:15;color:#ffe6a0;font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:.04em;text-shadow:0 3px 3px #0b1016,0 0 22px #e9ae4670}
@media(max-width:600px){#level-up-banner{top:100px}}