:root{color-scheme:dark}*{box-sizing:border-box;margin:0}html,body,#app{height:100%}body{background:#0c0c10;color:#c8c4bb;font-family:Georgia,Times New Roman,serif;overflow:hidden}.letterbox{height:100%;display:flex;align-items:center;justify-content:center;background-color:#0c0c10;background-size:96px;image-rendering:pixelated}.stage{position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16 / 9;container-type:size;background:#15151a;box-shadow:0 0 4cqw #000}.shell{display:grid;height:100%;gap:.5cqw;padding:.5cqw;grid-template-columns:24fr 52fr 24fr;grid-template-rows:787fr 213fr;grid-template-areas:"left viewport party" "left log      controls";font-size:max(11px,1.15cqw)}.left-column{grid-area:left;display:flex;flex-direction:column;gap:.5cqw;min-height:0}.panel{background:#1e1e26;border:1px solid #34343f;border-radius:.4cqw;padding:.7cqw;min-height:0;min-width:0}.panel h2{font-size:max(9px,.85cqw);text-transform:uppercase;letter-spacing:.12em;color:#6f6f7e;margin-bottom:.4cqw}.inventory{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.party{grid-area:party}.log{grid-area:log}.controls{grid-area:controls}.viewport{grid-area:viewport;position:relative;background:#000;border:1px solid #34343f;border-radius:.4cqw;overflow:hidden}.viewport canvas{width:100%;height:100%;display:block;outline:none}.log{display:flex;flex-direction:column}.log-lines{overflow-y:auto;flex:1;font-size:max(10px,1.05cqw);line-height:1.45}.log-info{color:#9a968c}.log-warn{color:#c75c5c}.log-loot{color:#d8b34a}.log-event{color:#8fb4d8}.log-narrative{color:#d8c184;font-style:italic}.automap{display:flex;flex-direction:column;aspect-ratio:1;flex:none}.automap-canvas{flex:1;width:100%;min-height:0}.party-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5cqw}.party-cell{cursor:pointer;border:1px solid #34343f;border-radius:.3cqw;padding:.4cqw;background:#181820}.party-cell:hover{border-color:#6f6f7e}.party-cell .portrait{width:100%;aspect-ratio:.92;object-fit:cover;border-radius:.2cqw;background:#2a2a33}.char-name{font-size:max(9px,.95cqw);text-align:center;color:#b8b2a6;margin:.2cqw 0}.bar{height:.45cqw;border-radius:.2cqw;background:#2a2a33;margin-top:.25cqw;overflow:hidden}.bar>div{height:100%}.bar.hp>div{background:#c0392b}.bar.mp>div{background:#2980b9}.bar.reserved{border:1px dashed #3c3c48;background:none}.quick-slots{display:flex;gap:.25cqw;margin-top:.35cqw;opacity:.3}.quick-slots span{width:1.3cqw;height:1.3cqw;border:1px solid #34343f;border-radius:.2cqw}.inv-filters{display:flex;gap:.25cqw;flex-wrap:wrap;margin-bottom:.5cqw}.inv-filter{font:inherit;font-size:max(8px,.8cqw);color:#9a968c;background:#181820;border:1px solid #34343f;border-radius:.25cqw;padding:.1cqw .45cqw;cursor:pointer}.inv-filter.on{color:#d8b34a;border-color:#d8b34a}.inv-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3cqw;align-content:start}.inv-slot{position:relative;aspect-ratio:1;border:1px solid #34343f;border-radius:.25cqw;background:#181820;cursor:pointer}.inv-slot:hover{border-color:#d8b34a}.inv-slot img{width:100%;height:100%;object-fit:cover;border-radius:.2cqw}.inv-slot .count{position:absolute;bottom:.1cqw;right:.2cqw;font-size:max(8px,.8cqw);color:#d8b34a;text-shadow:0 0 .3cqw #000}.inventory{position:relative}.inv-menu{position:absolute;left:.7cqw;right:.7cqw;z-index:30;display:flex;flex-direction:column;background:#1e1e26;border:1px solid #6f6f7e;border-radius:.3cqw;box-shadow:0 .3cqw 1cqw #000}.inv-menu button{font:inherit;font-size:max(9px,.95cqw);color:#c8c4bb;background:none;border:none;padding:.4cqw .6cqw;text-align:left;cursor:pointer}.inv-menu button:hover{background:#2a2a33}.hidden{display:none!important}.item-card{position:absolute;z-index:40;pointer-events:none;background:#1a1a22f2;border:1px solid #6f6f7e;border-radius:.4cqw;padding:.8cqw;box-shadow:0 .5cqw 1.5cqw #000}.item-card header{display:flex;gap:.6cqw;align-items:center;border-bottom:1px dotted #4a4a58;padding-bottom:.4cqw;margin-bottom:.4cqw}.item-card header img{width:2.6cqw;height:2.6cqw;border-radius:.2cqw}.item-card h3{font-size:max(13px,1.25cqw);color:#e8e2d4}.item-card header span{font-size:max(9px,.85cqw);color:#6f6f7e;text-transform:uppercase;letter-spacing:.08em}.card-stat{font-size:max(11px,1.05cqw);color:#c8c4bb}.card-keyword{font-size:max(10px,1cqw);color:#7ec3e8;margin-top:.3cqw}.card-lore{font-size:max(10px,.95cqw);color:#b39ddb;font-style:italic;margin-top:.3cqw}.card-value{font-size:max(9px,.9cqw);color:#d8b34a;text-align:right;margin-top:.4cqw}.char-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;gap:1cqw;padding:1.2cqw;background:#15151af5}.char-close{position:absolute;top:.6cqw;right:.8cqw;font:inherit;font-size:max(13px,1.2cqw);color:#9a968c;background:none;border:none;cursor:pointer}.char-close:hover{color:#e8e2d4}.char-stats{flex:1}.char-equip{flex:1;border-left:1px solid #34343f;padding-left:1cqw}.char-stats h3,.char-equip h3{font-size:max(15px,1.4cqw);color:#e8e2d4;margin-bottom:.4cqw}.char-stats p{font-size:max(11px,1.1cqw);margin:.35cqw 0}.char-stats i{color:#6f6f7e;font-size:max(10px,.95cqw)}.char-class{text-transform:capitalize}.char-formation{color:#6f6f7e;text-transform:uppercase;font-size:max(9px,.85cqw)!important;letter-spacing:.08em}.equip-row{display:flex;align-items:center;gap:.6cqw;padding:.5cqw;margin-top:.5cqw;border:1px solid #34343f;border-radius:.3cqw;cursor:pointer;font-size:max(11px,1.05cqw)}.equip-row:hover{border-color:#d8b34a}.equip-label{color:#6f6f7e;text-transform:uppercase;font-size:max(9px,.85cqw);letter-spacing:.08em;min-width:4.5cqw}.equip-item{display:flex;align-items:center;gap:.4cqw}.equip-item img,.equip-pick img{width:1.6cqw;height:1.6cqw;border-radius:.2cqw}.equip-pick{display:flex;flex-direction:column;margin-top:.3cqw}.equip-pick button{font:inherit;font-size:max(10px,1cqw);color:#c8c4bb;background:#181820;border:1px solid #34343f;border-radius:.25cqw;padding:.35cqw .5cqw;margin-top:.25cqw;display:flex;align-items:center;gap:.4cqw;cursor:pointer;text-align:left}.equip-pick button:hover{border-color:#d8b34a}.equip-pick i{color:#6f6f7e;font-size:max(9px,.9cqw)}