:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#101b23;color:#eaf0de}*{box-sizing:border-box}body{margin:0}header{height:82px;border-bottom:1px solid #2b3940;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{font-family:Georgia,serif;letter-spacing:3px;color:#efdb9b;text-decoration:none;font-size:21px}.brand small{display:block;font:9px Segoe UI;letter-spacing:3px;margin-top:6px;color:#8fa39e}header>div{display:flex;align-items:center;gap:12px}button{border:1px solid #52665d;border-radius:6px;background:#23372f;color:#eaf0de;padding:10px 17px;cursor:pointer;font:inherit}button:hover{background:#385344}button:focus-visible{outline:2px solid #f3ce76}.status{font-size:10px;letter-spacing:1.3px;color:#9abd9d;margin-right:14px}main{max-width:1440px;margin:auto;padding:32px 5vw 20px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:23px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.6px;color:#c3ae77}h1{font:30px Georgia,serif;margin:11px 0 0}.heading p{font:italic 15px Georgia;color:#9dafaa}.game-shell{position:relative;border:1px solid #58675a;border-radius:12px;overflow:hidden;box-shadow:0 22px 80px #0006;background:#16343c}canvas{display:block;width:100%;outline:none;aspect-ratio:1200/650}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#081c29ee,#081c2955 66%,transparent);display:flex;align-items:center;padding:6%}.welcome{max-width:430px}h2{font:52px/1.08 Georgia;margin:20px 0}.welcome p{color:#b9c9c0;line-height:1.8;max-width:330px}.welcome button{display:block;margin-top:15px}.primary{background:#e4bd6a;color:#172c29;font-weight:700;padding:16px 24px;border:0;min-width:245px}.primary:hover{background:#ffda8c}.primary span{float:right}.fine{font-size:11px}.lower{display:flex;justify-content:space-between;gap:30px;padding:26px 0;border-bottom:1px solid #304039}.quest{min-width:300px}h3{font:20px Georgia;margin:9px 0}.quest p{font-size:13px;color:#9eb0a5;margin:0;line-height:1.6}.keys{display:flex;flex-wrap:wrap;align-content:center;gap:16px;font-size:11px;color:#a9b9b1;max-width:530px}kbd{display:inline-block;background:#21332f;border:1px solid #46594d;border-bottom:3px solid #46594d;border-radius:4px;padding:5px 7px;margin-right:4px;color:#dce7d8}footer{display:flex;justify-content:space-between;color:#71897e;font-size:9px;letter-spacing:1.5px;padding-top:22px}footer span{letter-spacing:0}.dialog{position:absolute;left:17%;right:17%;bottom:8%;padding:22px 28px;background:#132c2bf2;border:1px solid #c8ac65;border-radius:10px;box-shadow:0 10px 60px #0008;font-size:15px;line-height:1.7}.dialog strong{color:#f2cf7e}.dialog button{float:right;margin:10px 0 0}.touch{display:none;margin-top:14px;gap:6px}[hidden]{display:none!important}@media(max-width:800px){header{padding:15px;height:auto}.brand{font-size:15px}.status,.heading p{display:none}header button{padding:7px;font-size:12px}main{padding:22px 12px}h1{font-size:24px}h2{font-size:28px}.welcome p{font-size:12px;margin:8px 0;line-height:1.4}.welcome .fine{display:none}.welcome button{padding:10px;min-width:180px;font-size:12px}.lower{display:block}.keys{margin-top:20px}.touch{display:flex;flex-wrap:wrap}.dialog{inset:8%;font-size:12px;padding:12px}footer{font-size:8px;gap:20px}}
.class-picker{display:flex;gap:10px;margin:16px 0}.welcome .class-choice{min-width:0;margin:0;padding:12px;text-align:left;flex:1;background:#122e37cc;border-color:#60756a}.class-choice b,.class-choice small{display:block}.class-choice b{font-size:13px}.class-choice small{font-size:10px;margin-top:7px;color:#b4c6c0}.welcome .class-choice.selected{border-color:#e8c57f;box-shadow:inset 0 0 0 1px #e8c57f;background:#405443}.welcome h2{font-size:44px;margin:14px 0}.welcome p{margin:10px 0}.welcome{max-width:470px}.inventory-panel{inset:3%;bottom:auto;max-height:94%;overflow:auto;padding:20px 24px;background:#11252bf7}.inventory-header{display:flex;justify-content:space-between;align-items:center}.inventory-header h2{font-size:26px;margin:7px 0 12px}.inventory-header h2 small{font:12px Segoe UI;color:#96b4b1;margin-left:12px}.inventory-header>b{color:#f1d28d;font-size:14px}.inventory-tabs{display:flex;gap:6px;border-bottom:1px solid #416057;margin-bottom:18px;padding-bottom:10px}.inventory-tabs button{text-transform:capitalize;float:none;margin:0;background:transparent;border-color:transparent;padding:8px 18px}.inventory-tabs button.active{border-color:#c3b078;color:#ffdd95;background:#35483d}.inventory-layout{display:grid;grid-template-columns:210px 1fr;gap:22px}.equip-slot{margin-top:10px;padding:10px;background:#20373b;border:1px solid #43615d;border-radius:6px}.equip-slot small,.equip-slot b{display:block}.equip-slot small{font-size:9px;letter-spacing:2px;color:#9ab7ad}.equip-slot b{font-size:13px}.equip-slot button{float:none;font-size:10px;padding:3px 8px;margin-top:6px}.loadout p{font-size:12px;color:#adc4bd}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}.item-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left!important;float:none!important;margin:0!important;border:1px solid #4c635a;border-radius:8px;padding:12px!important;background:linear-gradient(140deg,#304649,#1d3237);min-height:140px;color:#dfe7db}.item-card b{font-size:13px}.item-card small,.item-card em,.item-card>span:not(.item-icon){font-size:10px;font-style:normal;color:#a7beb4}.item-card small{text-transform:uppercase;letter-spacing:.6px}.item-card em{margin-top:7px;color:#e1cc94}.item-icon{font-size:28px;line-height:1.3;margin-bottom:6px;color:#d4dcca}.item-card.rare{border-color:#7f9fc2}.item-card.epic{border-color:#b09ad4}.item-card.uncommon{border-color:#79a58a}.item-card.equipped{box-shadow:inset 0 0 0 1px #e3cf8c}.inventory-hint{font-size:11px;color:#99b6b0}.inventory-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:14px;border-top:1px solid #36504d;padding-top:10px}.inventory-bottom small{font-size:11px;color:#a8bdb2}.inventory-bottom button{font-size:11px;float:none;margin:0;padding:5px 10px}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.skill-grid article{background:#22393d;border:1px solid #48625e;padding:16px;border-radius:8px}.skill-grid p{font-size:12px;color:#b7cbc2;line-height:1.7}.skill-grid b{font-size:11px;color:#e9ce91}.skill-grid h3{font-size:19px}.inventory-panel #closeDialog{font-size:12px;padding:7px 20px}.dialog{z-index:3}@media(max-width:800px){.class-picker{margin:8px 0;gap:6px}.welcome h2{font-size:25px}.class-choice small{display:none}.welcome .class-choice{padding:7px}.class-choice b{font-size:10px}.inventory-panel{inset:2%;max-height:96%;padding:12px}.inventory-layout{grid-template-columns:130px 1fr;gap:10px}.item-grid{grid-template-columns:repeat(2,1fr)}.item-card{min-height:110px;padding:7px!important}.inventory-header h2{font-size:20px}.skill-grid{grid-template-columns:1fr}.inventory-header>b{font-size:11px}}

#switchClass{float:none;margin:0 0 12px}.inventory-panel #closeDialog{float:none;display:block;margin:0 0 0 auto}
.volume-control{display:flex;align-items:center;gap:7px;color:#b8b7d1;font-size:10px}.volume-control input{width:66px;accent-color:#d9b6df}header>div{gap:8px}header button{font-size:12px;padding:9px 11px}.status{display:none}:root{background:#211f35;color:#f6eff4}header{border-color:#454057}.brand{color:#f5d8ba}.game-shell{border:2px solid #c8b4c7;box-shadow:0 20px 80px #120f2744}.heading p{color:#c1b2c8}.eyebrow{color:#d9b7cc}.primary{background:#f3c9ba;color:#483f5e}.primary:hover{background:#ffe0c8}.overlay{background:linear-gradient(90deg,#38304bed,#38304b66 66%,transparent)}button{border-color:#82778e;background:#4c435f;border-radius:9px}button:hover{background:#665a79}.lower{border-color:#4e455e}.quest p,.keys{color:#c2b9cf}kbd{background:#3a344c;border-color:#685c79;color:#f8e3e9}footer{color:#a293af}.volume-control input:focus-visible{outline:2px solid #f3c9ba}@media(max-width:950px){.volume-control{display:none}header button{padding:7px;font-size:10px}header{gap:10px}.brand{font-size:15px}header>div{flex-wrap:wrap;justify-content:flex-end}}
.lab-open{color:#efd3b3;background:#594365;border:1px solid #997ba7;border-radius:7px;padding:9px 10px;font-size:11px;text-decoration:none;white-space:nowrap}.lab-sandbox header,.lab-sandbox .heading,.lab-sandbox .lower,.lab-sandbox .touch,.lab-sandbox footer{display:none}.lab-sandbox main{padding:0;margin:0;max-width:none}.lab-sandbox .game-shell{border:0;border-radius:0;box-shadow:none;margin:0}.lab-sandbox canvas#game{display:block;width:100%;height:auto}.lab-sandbox body{overflow:hidden}
/* Compact RPG inventory: picture grid and a separate comparison card. */
.inventory-panel{left:auto;right:20px;top:20px;bottom:auto;width:350px;max-width:calc(100% - 40px);padding:14px 16px;border:2px solid #a79bb6;border-radius:10px;background:#28263cf7;box-shadow:0 12px 35px #21192e88;font-size:12px}.inventory-panel.compact-equipment{overflow:visible;max-height:none}.inventory-panel.compact-other{max-height:90%;overflow:auto;width:410px}.inventory-header{gap:10px}.inventory-header .eyebrow{font-size:8px;letter-spacing:1.3px}.inventory-header h2{font-size:20px;margin:4px 0 10px}.inventory-header h2 small{font-size:10px;margin-left:6px}.inventory-header>b{font-size:11px;white-space:nowrap}.inventory-tabs{gap:4px;margin-bottom:10px;padding-bottom:8px}.inventory-tabs button{font-size:11px;padding:5px 10px;border-radius:5px}.small-loadout{display:flex;align-items:center;gap:12px;background:#38354c;border:1px solid #605773;border-radius:6px;padding:9px}.small-loadout>div{text-align:center}.small-loadout small{display:block;font-size:8px;text-transform:uppercase;color:#c1b3cc}.worn-icon{height:39px;width:39px;background:#27263a;border:1px solid #857497;border-radius:4px;margin:3px auto}.worn-icon svg{height:35px;width:35px}.small-loadout button{float:none;margin:0;padding:1px 4px;border:0;background:transparent;font-size:8px;color:#d2c2d4}.loadout-stats{margin-left:auto;font-size:10px;text-align:left!important;line-height:2;color:#cdbdd3}.loadout-stats b{color:#f6dfae}.bag-label{display:flex;justify-content:space-between;margin:12px 0 7px;color:#c5b6ce;font-size:9px;letter-spacing:1px}.icon-bag{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.gear-cell{display:contents}.gear-icon,.empty-cell{height:50px;min-height:0;border-radius:5px;border:1px solid #625a75;background:linear-gradient(135deg,#4b425d,#353047);padding:3px!important;margin:0!important;float:none!important;position:relative;display:flex;align-items:center;justify-content:center}.gear-icon svg{width:44px;height:44px;filter:drop-shadow(0 2px 2px #1b152c55)}.gear-icon:hover,.gear-icon:focus-visible{background:#65546f;outline:2px solid #f1d6a3;outline-offset:0}.gear-icon.rare{border-color:#88afd5}.gear-icon.epic{border-color:#bb9bdc}.gear-icon.legendary{border-color:#f0d29c}.gear-icon.uncommon{border-color:#99c7ae}.gear-icon.equipped{box-shadow:inset 0 0 0 1px #f0d69b}.worn-badge{position:absolute;right:2px;bottom:0;color:#ffdf9c;font:bold 9px Segoe UI}.empty-cell{background:#25243877;border-color:#4b465e}.gear-tip{display:none;position:absolute;right:calc(100% + 12px);top:100px;width:264px;padding:14px;z-index:10;background:#242238fa;border:2px solid #c0a3ce;border-radius:9px;box-shadow:0 9px 35px #1d152c99;text-align:left;pointer-events:none;font-size:11px;line-height:1.6}.gear-cell:hover .gear-tip,.gear-cell:focus-within .gear-tip{display:block}.tip-heading{display:flex;gap:10px;align-items:center;border-bottom:1px solid #62516f;padding-bottom:10px}.tip-heading svg{width:52px;height:52px;flex:none;background:#423950;border-radius:6px}.tip-heading small{font-size:9px;color:#c9abd5;text-transform:uppercase}.tip-heading b{display:block;font-size:15px;color:#f1d9fa}.gear-tip p{margin:10px 0;color:#c7bbd1;font-size:11px}.stat-row{display:grid;grid-template-columns:1fr 32px 92px;gap:4px;padding:4px 0}.stat-row b{color:#f2e1be}.stat-up{color:#9ce9b7}.stat-down{color:#ffabbc}.stat-neutral{color:#b7aec7}.gear-tip .compare-label{font-size:10px;border-top:1px solid #62516f;padding-top:9px}.compare-label strong{color:#e3d2eb}.tip-verdict{background:#3e374f;padding:6px 8px;border-radius:4px;color:#f1d6a4;margin:7px 0}.gear-tip>small{font-size:9px;color:#afa2bb}.inventory-panel .inventory-hint{font-size:9px;margin:8px 0}.inventory-bottom{margin-top:8px;padding-top:8px;gap:5px}.inventory-bottom small{font-size:8px}.inventory-bottom button{font-size:9px;padding:3px 5px}.inventory-panel #closeDialog{font-size:10px;padding:5px 14px;margin-top:8px}.compact-other .skill-grid{grid-template-columns:1fr}.compact-other .skill-grid article{padding:9px}.compact-other .skill-grid h3{font-size:16px}.compact-other .skill-grid p{font-size:11px;margin:5px 0}@media(max-width:850px){.inventory-panel{right:10px;top:10px;width:300px;padding:10px}.gear-icon,.empty-cell{height:40px}.gear-icon svg{width:36px;height:36px}.gear-tip{width:220px;padding:10px;right:calc(100% + 6px);top:60px}.stat-row{grid-template-columns:1fr 25px 80px;font-size:10px}}@media(max-width:580px){.inventory-panel.compact-equipment{width:260px;max-width:calc(100% - 20px)}.gear-tip{right:0;top:45px;z-index:20;width:230px;background:#242238ff}.gear-icon,.empty-cell{height:34px}.gear-icon svg{width:30px;height:30px}.small-loadout{padding:4px}.inventory-header h2{font-size:16px}}
.inventory-panel{width:326px}.inventory-panel>br{display:none}.inventory-header .eyebrow{display:none}.inventory-header{min-height:31px;padding-right:20px}.inventory-header h2{font-size:18px}.small-loadout{height:78px;padding:6px}.icon-bag{grid-auto-rows:42px;gap:5px}.gear-icon,.empty-cell{height:42px}.gear-icon svg{height:38px;width:38px}.inventory-panel #closeDialog{position:absolute;right:6px;top:6px;width:23px;height:23px;padding:0;margin:0;font-size:15px;border-radius:5px}.inventory-bottom{margin-top:5px;padding-top:5px}.inventory-tabs{margin-bottom:8px}.inventory-panel .inventory-hint{margin:6px 0}.gear-tip{top:65px}.inventory-panel.compact-other #closeDialog{position:sticky;float:right}
.gear-tip:not([hidden]){display:block}
.skill-tree{inset:14px!important;transform:none!important;width:auto!important;max-width:none!important;max-height:calc(100% - 28px)!important;padding:24px!important;background:linear-gradient(135deg,#fff9ee,#f1e5f6)!important;color:#584663!important;overflow:auto!important;border:2px solid #d8bfdc!important;border-radius:18px!important;box-shadow:0 16px 80px #30243b77!important}
.tree-heading h2{margin:4px 0;font-size:27px;color:#594166}.tree-heading p{margin:4px 0 16px;font-size:12px}.tree-heading .eyebrow{color:#99749e}.tree-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}.tree-nodes{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;background:linear-gradient(90deg,transparent 24%,#d9c5de 24.3%,transparent 24.7%,transparent 74%,#d9c5de 74.3%,transparent 74.7%)}
.skill-tree .skill-node{display:flex;align-items:center;text-align:left;margin:0;padding:9px;border:1px solid #d6c2df;border-radius:12px;background:#fffaf4;color:#66516f;min-height:65px;box-shadow:0 3px 0 #e0d1e6}.skill-node svg{width:40px;height:40px;flex:none;margin-right:8px}.skill-node b{font-size:12px;display:block}.skill-node small{font-size:9px;display:block;line-height:1.5;color:#8d7c97}.skill-tree .skill-node.learned{border-color:#8dbfb1;background:#edf9ee}.skill-tree .skill-node.selected{outline:2px solid #ad83ba;outline-offset:2px}.skill-details{background:#fffaf6;border:1px solid #decee4;border-radius:14px;padding:18px}.skill-details>svg{width:55px;height:55px;float:right}.skill-details h3{margin:0 0 12px;color:#684d79}.skill-details p{font-size:12px;line-height:1.6}.rank-comparison{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:11px;background:#eee7f3;padding:12px;border-radius:8px;margin:12px 0}.skill-tree button{background:#8b6b9d;color:#fff6e9;border:0;border-radius:8px;padding:9px 12px;cursor:pointer}.skill-tree button:disabled{opacity:.5;cursor:default}.skill-details canvas{width:100%;height:auto;margin-top:12px;border-radius:10px}.skill-details>small{font-size:10px;line-height:1.5;display:block}.tree-footer{display:flex;gap:12px;align-items:center;margin-top:16px;font-size:10px}.skill-tree #closeDialog{position:absolute;right:18px;top:10px;font-size:0;padding:8px}.skill-tree #closeDialog:after{content:'×';font-size:22px}.skill-settings{background:#fff8ef!important;color:#624d70!important;padding:28px!important;border-radius:18px!important}.skill-settings label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.skill-settings select{padding:7px;border-radius:6px}.skill-settings button{margin-top:15px}.skill-node:hover{filter:brightness(1.04)}
@media(max-width:800px){.skill-tree{padding:14px!important}.tree-layout{grid-template-columns:1fr}.tree-nodes{grid-template-columns:1fr 1fr}.tree-footer{flex-wrap:wrap}.tree-heading h2{font-size:20px}}

.skill-tree{position:fixed!important;inset:20px!important;max-height:calc(100vh - 40px)!important;z-index:1000!important}.tree-nodes{position:relative;background:none}.tree-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#b999c9;stroke-width:2;fill:none}.skill-node{position:relative;z-index:1}.skill-node.locked{filter:saturate(.4);opacity:.75}.skill-node:focus-visible{outline:3px solid #9873bc}.skill-node:hover:after,.skill-node:focus-visible:after{content:attr(data-tip);position:absolute;bottom:100%;left:0;min-width:220px;max-width:300px;padding:10px;border-radius:8px;background:#44344f;color:#fff8e9;box-shadow:0 8px 20px #30233e55;font-size:11px;line-height:1.5;z-index:20;pointer-events:none}.skill-details button{position:static!important;float:none!important;margin:4px!important}.tree-heading{padding-right:45px}.skill-tree .tree-nodes .skill-node:hover{z-index:30}

@keyframes skill-unlock{0%{box-shadow:0 0 0 0 #e8bbff}40%{box-shadow:0 0 25px 6px #e8bbff}100%{box-shadow:0 3px 0 #d9c5df}}.skill-node.just-learned{animation:skill-unlock .7s ease-out}

.tree-nodes{align-self:start}.skill-details canvas{height:150px;object-fit:contain;background:#302746}.tree-footer{flex-wrap:wrap}.tree-heading p{margin-bottom:10px}

.sound-audition{border:1px solid #d9c6df;border-radius:10px;padding:12px;margin:14px 0}.sound-audition legend{font-weight:600}.sound-audition small{display:block;max-width:380px;font-size:11px;line-height:1.5;margin-top:8px}.sound-audition select{max-width:235px}.sound-audition button{margin:3px!important}.skill-settings{max-height:90vh!important;overflow-y:auto!important}
.skill-settings{position:fixed!important;z-index:1200!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(620px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px)!important;overflow-y:auto!important;padding:22px!important}.skill-settings h2{font-size:28px;margin:0 0 10px}.skill-settings label{margin:12px 0;font-size:13px}.skill-settings button{float:none!important;font-size:12px}.skill-settings select{background:#eee4f3;color:#594166;border:1px solid #ccb8d6;max-width:65%}.sound-audition>div{display:flex;flex-wrap:wrap;gap:4px}.sound-audition small{clear:both}.skill-settings #closeDialog{float:right!important}
.return-scroll-card{display:flex;align-items:center;gap:12px;border:1px solid #9b88b8;background:#39334d;border-radius:8px;padding:10px}.return-scroll-card svg{width:56px;height:56px;flex:none}.return-scroll-card p{font-size:11px;line-height:1.4;margin:5px 0;color:#d7cbe2}.return-scroll-card button{float:none;font-size:11px;margin:3px 0 0;padding:5px 12px}.inventory-bottom small{max-width:180px;line-height:1.4}

html:has(body.lab-sandbox),body.lab-sandbox{overflow:hidden;height:100%;min-height:0}body.lab-sandbox .game-shell{aspect-ratio:auto}body.lab-sandbox canvas#game{width:100vw;height:100vh;object-fit:contain}

/* Painted asset integration */
.class-choice img{width:82px;height:82px;object-fit:contain;display:block;margin:0 auto 6px}.painted-icon{width:100%;height:100%;object-fit:contain;display:block}.skill-node .painted-icon{width:52px;height:52px;flex:none}.skill-details>.painted-icon{width:90px;height:90px;margin:auto}.item-picture .painted-icon{max-width:100%;max-height:100%}#travelLabel{font-size:12px;color:#d3d8cd}#travelLabel select{max-width:165px;padding:7px;background:#203e43;color:#eee9d6;border:1px solid #567472;border-radius:6px}#travelLabel[hidden]{display:none}#artTour{margin-top:8px}.welcome .class-picker{margin:15px 0}.welcome{max-height:98%;overflow:auto}.heading p{color:#57685d}

.heading p{color:#c1b2c8}.item-card>.painted-icon{width:44px;height:44px}.equip-slot .painted-icon{width:40px;height:40px}.item-tooltip .painted-icon{width:70px;height:70px}header{flex-wrap:wrap}header>div{flex-wrap:wrap}.welcome .class-choice img{width:68px;height:68px}.game-shell:focus-within{outline:none}

.return-scroll-card>.painted-icon{width:56px;height:56px;flex:none}

.loot-guide{font-size:13px;line-height:1.6}.loot-guide table{width:100%;border-collapse:collapse}.loot-guide th,.loot-guide td{text-align:left;padding:5px 9px;border-bottom:1px solid #ffffff22}.loot-guide p{margin:10px 0}.gear-icon.common{border-color:#e1e9ed}.gear-icon.uncommon{border-color:#8ee5a5}.gear-icon.rare{border-color:#78bdff}.gear-icon.epic{border-color:#d4a0ff}.gear-icon.legendary{border-color:#ffd170}

.sell-list{max-height:300px;overflow:auto}.sell-row{display:flex;align-items:center;gap:12px;padding:8px;border-bottom:1px solid #ffffff22}.sell-row>.painted-icon{width:42px;height:42px;flex:none}.sell-row>div{flex:1}.sell-row small{display:block;margin-top:4px}.sell-row button:disabled{opacity:.4;cursor:default}

/* Keep the compact bag reachable on a short game canvas; tooltips use fixed positioning. */
.dialog.inventory-panel.compact-equipment{max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain}

.interaction-details{background:#eee4f3;border:1px solid #c5acd0;border-radius:10px;padding:12px;margin:12px 0;font:12px/1.5 Segoe UI;color:#4b3d59}.interaction-details h4{margin:0 0 8px}.interaction-details p{font-size:12px!important}.interaction-details label{display:block}.interaction-details select{display:block;width:100%;padding:8px;color:#30243b;background:#fff7ef;border:1px solid #b4a0bf;border-radius:6px}.interaction-details small{font-size:10px;display:block}

/* Dialog actions share one aligned footer instead of independent floats. */
.dialog-content{min-width:0}.dialog-actions{display:flex;justify-content:flex-end;align-items:stretch;gap:10px;flex-wrap:wrap;clear:both;margin-top:16px;padding-top:12px;border-top:1px solid #ffffff22}
.dialog .dialog-actions>button{float:none;display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:9px 16px;line-height:1.25}
.dialog .shop-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px;margin:14px 0}
.dialog .shop-actions>button{float:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0;padding:10px;line-height:1.35}
.dialog .shop-actions>button:last-child{grid-column:1/-1}
.dialog .sell-list{max-height:250px;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none}
.dialog .sell-row>button{float:none;flex:none;margin:0;min-height:36px;padding:7px 14px;align-self:center}
.inventory-panel .dialog-actions{margin:0;padding:0;border:0;height:0;min-height:0}
.dialog.inventory-panel .dialog-actions>button{min-height:0}
.dialog:has(.sell-list){height:min(500px,calc(100% - 28px));bottom:14px;display:flex;flex-direction:column;overflow:hidden}
.dialog:has(.sell-list) .dialog-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.dialog:has(.sell-list) .dialog-content>h3,.dialog:has(.sell-list) .dialog-content>p{flex:none;margin:4px 0 10px}
.dialog:has(.sell-list) .sell-list{flex:1;min-height:0;max-height:none}
.dialog:has(.sell-list) .dialog-actions{flex:none;margin-top:10px}
.dialog:not(.inventory-panel):not(.skill-tree):not(.skill-settings){display:flex;flex-direction:column;overflow:hidden}
.dialog:not(.inventory-panel):not(.skill-tree):not(.skill-settings)>.dialog-content{flex:1;min-height:0;overflow-y:auto}
.dialog:not(.inventory-panel):not(.skill-tree):not(.skill-settings)>.dialog-actions{flex:none}
.dialog:has(.shop-actions){height:min(430px,calc(100% - 28px));bottom:14px}
@media(max-width:800px){.dialog:not(.inventory-panel):not(.skill-tree):not(.skill-settings){max-height:84%;overflow-y:auto}.dialog .dialog-actions{gap:8px}.dialog .dialog-actions>button{flex:1;min-width:0;padding:8px 10px}}

/* Compact welcome panel: fit the game viewport without an internal scrollbar. */
.game-shell{container-type:inline-size}
.overlay{padding:clamp(10px,3.5cqw,42px);align-items:center}
.welcome{display:grid;gap:clamp(6px,.8cqw,10px);width:min(440px,46%);max-width:none;max-height:none;overflow:visible}
.welcome>.eyebrow{font-size:clamp(9px,1cqw,11px);line-height:1.2}
.welcome h2{font-size:clamp(23px,3.7cqw,43px);line-height:1.05;margin:0}
.welcome>p{font-size:clamp(11px,1.2cqw,14px);line-height:1.4;margin:0;max-width:none}
.welcome .class-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}
.welcome .class-choice{padding:10px;min-width:0;margin:0}
.welcome .class-choice img{width:clamp(48px,6.4cqw,72px);height:clamp(48px,6.4cqw,72px);margin:0 auto 4px}
.welcome .class-choice b{font-size:clamp(10px,1.25cqw,13px);line-height:1.25}
.welcome .class-choice small{font-size:11px;line-height:1.25;margin-top:4px}
.welcome>button{margin:0;min-width:0;padding:10px 16px;min-height:37px;font-size:13px;width:100%}
.welcome>button[hidden]{display:none}.welcome .fine{display:none}
@container(max-width:700px){
 .welcome{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:7px 16px}
 .welcome>.eyebrow,.welcome>h2,.welcome>p{grid-column:1}
 .welcome .class-picker{grid-column:2;grid-row:1 / span 3;align-self:stretch;align-items:center}
 .welcome .class-choice{padding:7px}.welcome .class-choice img{width:48px;height:48px}
 .welcome .class-choice small{display:none}.welcome h2{font-size:clamp(20px,4cqw,28px)}
 .welcome>p{font-size:11px}.welcome>button{grid-column:1 / -1;padding:7px 12px;min-height:31px;font-size:12px}
}
@container(max-width:500px){.overlay{padding:10px}.welcome{gap:5px 10px}.welcome>p:not(.fine){display:none}.welcome .class-picker{grid-row:1 / span 2}.welcome .class-choice img{width:38px;height:38px}.welcome .class-choice b{font-size:10px}.welcome>button{min-height:28px;padding:5px 9px}}

#tourNotice:not([hidden]){display:block;font-size:11px;line-height:1.35;color:#ffe0b9}