/* The character menu is one game panel. Inventory and stats share its header. */
#equipment-modal .upgrade-panel{box-sizing:border-box;width:min(800px,calc(100vw - 16px));height:min(820px,calc(100dvh - 20px));max-height:none;overflow:hidden;padding:10px 14px;display:flex;flex-direction:column;gap:6px;text-align:left}
#equipment-modal .upgrade-panel::before{display:none}
.equipment-header{display:flex;gap:8px;flex-shrink:0}.equipment-header [role=tablist]{display:flex;flex:1;gap:7px}
.equipment-header button{min-height:44px;border:1px solid #a68c64;border-radius:2px;background:linear-gradient(#344454,#172435);box-shadow:inset 0 0 0 2px #0b1928;color:#d7d4cb;font:800 12px var(--heading);padding:7px 15px;touch-action:manipulation}
.equipment-header [role=tab]{flex:1}.equipment-header [aria-selected=true]{color:#ffe0a0;border-color:#edc77c;background:linear-gradient(#4b4a42,#26343d);box-shadow:inset 0 -3px 0 #d2a86b,inset 0 0 0 2px #132136}
#equipment-modal #equipment-close{width:auto;min-width:74px;position:static;margin:0;font-size:12px;flex-shrink:0;max-width:none}
#equipment-modal #equipment-close span{margin-left:7px;font-size:17px}
#equipment-modal #equipment-stats{margin:0;text-align:center;font:600 10px/1.3 var(--body);color:#c0cfdd;flex-shrink:0}
#equipment-modal .inventory-columns{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(200px,.98fr) minmax(210px,1fr);gap:8px;align-items:stretch;flex:1;min-height:0;padding:0}
#equipment-modal [hidden]{display:none!important}
#equipment-modal #equipment-slots.gear-paperdoll{display:grid!important;grid-template-columns:minmax(70px,1fr) minmax(110px,1.5fr) minmax(70px,1fr);grid-template-rows:repeat(4,minmax(35px,1fr));gap:4px 18px;margin:0;padding:8px 18px;border:1px solid #6a716d;border-radius:3px;background:radial-gradient(ellipse at 50% 70%,#335271 0%,#12253c 43%,#091726 75%);min-height:0;overflow:hidden}
#equipment-modal .gear-paperdoll .gear-person{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;justify-content:center;min-height:0;position:relative;align-items:center;align-self:stretch;padding:0;gap:0}
#equipment-modal .gear-paperdoll .gear-person canvas{width:100%;height:calc(100% - 22px);object-fit:contain;max-width:180px;min-height:0}
#equipment-modal .gear-paperdoll .gear-person strong{font-size:11px;text-align:center;max-width:none;margin-top:3px}
#equipment-modal .gear-paperdoll .gear-person small{display:none}
.paperdoll-slot{display:flex;align-items:center;gap:8px;min-width:0;min-height:0;border:1px solid #8f8a76;border-radius:2px;color:#d4e4f7;background:linear-gradient(140deg,#172c44,#0a1527);padding:3px 7px;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 0 0 2px #0a1424}
.paperdoll-slot canvas{height:100%;width:42px;max-height:53px;object-fit:contain;flex-shrink:0}.paperdoll-slot span{font:800 10px/1.15 var(--body);text-align:left}
.paperdoll-slot[data-equipment-slot=lentes]{grid-column:1;grid-row:1}.paperdoll-slot[data-equipment-slot=amuleto]{grid-column:3;grid-row:1}.paperdoll-slot[data-equipment-slot=muneca]{grid-column:1;grid-row:2}.paperdoll-slot[data-equipment-slot=anillo]{grid-column:3;grid-row:2}.paperdoll-slot[data-equipment-slot=bolsillo]{grid-column:1;grid-row:3}.paperdoll-slot[data-equipment-slot=bolsillo2]{grid-column:3;grid-row:3}.paperdoll-slot[data-equipment-slot=pies]{grid-column:2;grid-row:4;justify-self:center;width:100%;max-width:145px}
.paperdoll-slot.is-compatible{border-color:#7de1b5;box-shadow:inset 0 0 0 2px #7de1b566}.paperdoll-slot.is-drop-target{background:#385947;outline:2px solid #8ef6c9}.is-dragging{opacity:.4;outline:2px dashed #ffbd75}
#equipment-modal #backpack-slots.backpack-layout{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);margin:0;gap:4px 12px;min-height:0;padding:0}
#equipment-modal .backpack-layout>h3{font-size:13px;grid-column:1/-1;line-height:1.2;margin:0}
#equipment-modal .backpack-help{font-size:10px;line-height:1.3;grid-column:1/-1;margin:0}
#equipment-modal .backpack-grid{grid-column:1;grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));gap:4px;min-height:0;align-content:stretch;overflow:auto;overscroll-behavior:contain}
#equipment-modal .bag-cell{aspect-ratio:auto;max-height:none;min-height:44px;padding:0;min-width:0;overflow:hidden;border-radius:1px;background:linear-gradient(135deg,#182737,#070e18);border:1px solid #8f8a76;box-shadow:inset 0 0 0 2px #0006}
#equipment-modal .bag-cell canvas{object-fit:contain;width:100%;height:100%}#equipment-modal .bag-cell.is-selected{outline-offset:-3px}
#equipment-modal .backpack-detail{grid-column:2;grid-row:3;overflow:auto;overscroll-behavior:contain;padding:10px;min-height:0;touch-action:pan-y;border-radius:2px}
#equipment-modal .backpack-detail>canvas{width:48px;height:48px;float:left;margin:0 7px 4px 0}#equipment-modal .backpack-detail>h3{font-size:13px;line-height:1.25;margin:0 0 4px}#equipment-modal .backpack-detail>strong{font-size:10px;color:#ffcc83}
#equipment-modal .backpack-detail>p,#equipment-modal .backpack-detail>small{font-size:11px;line-height:1.4;margin:7px 0}#equipment-modal .backpack-detail .soft-button,#equipment-modal .backpack-detail .text-button{min-height:44px;width:100%;padding:7px;font-size:11px;margin-top:5px;border:1px solid #b59a70;border-radius:2px;background:linear-gradient(#31465a,#17283b);color:#f9e1ba;box-shadow:inset 0 0 0 2px #102033}.backpack-detail .detail-close{display:none}
#equipment-modal .backpack-detail .gear-differences span{font-size:10px}.inventory-feedback{position:absolute;bottom:0;left:0;right:0;font-size:11px;background:#071525;color:#ffe1a8;border-radius:2px;z-index:5}.inventory-feedback:empty{display:none}
.inventory-button{display:flex;gap:5px;align-items:center}.inventory-button svg{width:21px;height:23px}
.character-sheet{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px;color:#d8e5ef}
.sheet-identity{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:8px 15px;background:radial-gradient(ellipse at left,#284563,#0c1c2d);border:1px solid #6d766f;border-radius:2px}
.sheet-identity .gear-person{display:block;min-height:0;padding:0}.sheet-identity .gear-person canvas{width:74px;height:95px;display:block}.sheet-identity .gear-person strong,.sheet-identity .gear-person small{display:none}.sheet-identity h3{font:800 18px var(--heading);margin:0 0 5px;color:#ffe2b2}.sheet-identity p{font-size:11px;margin:0 0 7px}.sheet-identity strong,.sheet-identity small{display:block;font-size:11px;line-height:1.5}
.sheet-group{padding:9px;border:1px solid #63716f;background:#0c1a2a;border-radius:2px}.character-sheet h3{margin:0 0 7px;font:800 13px var(--heading);color:#f9d39d}.sheet-group dl{margin:0}.sheet-group dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #344357;font-size:11px;line-height:1.35}.sheet-group dl>div:last-child{border:0}.sheet-group dt{color:#bccddd}.sheet-group dd{margin:0;font-weight:800;color:#fff3da;text-align:right;white-space:nowrap}
.sheet-attacks{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}.sheet-attacks>h3{grid-column:1/-1;margin:0}.sheet-attack{border:1px solid #62716e;padding:8px;position:relative;background:#101f30}.sheet-attack>canvas{float:left;width:33px;height:33px;margin-right:8px}.sheet-attack h4{font-size:11px;margin:0 30px 5px 0;line-height:1.3;color:#e7d7ba}.sheet-attack b{position:absolute;right:6px;top:7px;font-size:10px;color:#ffe1a8}.sheet-attack p,.sheet-attack small{font-size:10px;margin:5px 0;color:#cadbe5;line-height:1.4}.sheet-special{grid-column:1/-1;padding:10px;border:1px solid #7e765f;background:#182b3b}.sheet-special p{font-size:11px;line-height:1.5;margin:6px 0}.sheet-special strong{font-size:12px;color:#e2d3b3}
@media(max-width:700px),(max-height:500px) and (max-width:1100px){
  #equipment-modal{position:fixed;inset:0 0 var(--game-dock-height,106px);width:100%;height:auto;max-width:none;max-height:none;margin:0;padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) 5px max(5px,env(safe-area-inset-left));background:none;align-items:stretch;justify-content:stretch;box-sizing:border-box}
  #equipment-modal::backdrop{background:#06111b33;backdrop-filter:none}
  #equipment-modal .upgrade-panel{width:100%;height:100%;max-width:none;max-height:none;padding:6px;gap:5px;border:2px solid #b99c6d;border-radius:3px;background:linear-gradient(125deg,#263542,#0b1b2b 55%,#203240);box-shadow:inset 0 0 0 2px #071320,0 0 0 2px #111e2a}
  .equipment-header{gap:5px}.equipment-header [role=tablist]{gap:5px}.equipment-header button{font-size:11px;padding:5px}.equipment-header #equipment-close{min-width:68px;font-size:11px}#equipment-modal #equipment-close span{margin-left:2px}
  #equipment-modal #equipment-stats{font-size:9px;line-height:1.3}
  #equipment-modal .inventory-columns{grid-template-rows:minmax(185px,.95fr) minmax(0,1fr);gap:6px}
  #equipment-modal #equipment-slots.gear-paperdoll{padding:5px;gap:4px 7px;grid-template-columns:minmax(65px,1fr) minmax(90px,1.2fr) minmax(65px,1fr);grid-template-rows:repeat(4,minmax(40px,1fr))}
  .paperdoll-slot{padding:2px 3px;flex-direction:row;gap:2px;justify-content:center}.paperdoll-slot canvas{width:33px;height:36px;min-height:0;max-height:100%}.paperdoll-slot span{font-size:8px;text-align:center;max-width:55px}.paperdoll-slot[data-equipment-slot=pies]{max-width:110px}.paperdoll-slot[data-equipment-slot=pies] canvas{width:32px}
  #equipment-modal .gear-paperdoll .gear-person strong{font-size:8px}
  #equipment-modal #backpack-slots.backpack-layout{grid-template-columns:1fr;grid-template-rows:16px minmax(0,1fr) 22px;gap:3px}
  #equipment-modal .backpack-layout>h3{grid-row:1;font-size:10px}#equipment-modal .backpack-help{grid-row:3;font-size:9px;line-height:1.3;text-align:center;align-self:center}
  #equipment-modal .backpack-grid{grid-column:1;grid-row:2;gap:3px;grid-template-rows:repeat(4,minmax(40px,1fr))}#equipment-modal .bag-cell{min-height:40px}.bag-cell canvas{max-height:65px}.bag-cell.is-empty>span{font-size:9px}
  #equipment-modal .backpack-detail{display:none;position:absolute;inset:auto 0 0;max-height:calc(100% + 45px);z-index:6;grid-column:auto;grid-row:auto;background:#0b192bf7;border:2px solid #d4b27b;box-shadow:0 -6px 15px #0006;padding:8px}
  #equipment-modal [data-selected=true] .backpack-detail{display:block}.backpack-detail .detail-close{display:block;float:right;min-height:44px;font-size:10px;background:#233b52;color:#f0dbb3;border:1px solid #bda478;padding:5px 8px;margin:0 0 5px 6px;touch-action:manipulation}
  #equipment-modal .backpack-detail>canvas{width:38px;height:38px}#equipment-modal .backpack-detail>h3{font-size:12px}#equipment-modal .backpack-detail>p,#equipment-modal .backpack-detail>small{font-size:10px}
  .character-sheet{gap:6px}.sheet-identity{gap:12px;padding:5px 10px}.sheet-identity .gear-person canvas{width:60px;height:76px}.sheet-identity h3{font-size:14px}.sheet-group{padding:7px}.character-sheet h3{font-size:11px}.sheet-group dl>div{font-size:10px;padding:6px 0;gap:4px}.sheet-group dd{font-size:10px}.sheet-attack{padding:6px}.sheet-attack>canvas{width:28px;height:28px;margin-right:5px}.sheet-attack h4{font-size:10px}.sheet-attack p,.sheet-attack small{font-size:9px}
}
@media(max-height:500px) and (min-width:701px) and (max-width:1100px){
  #equipment-modal .inventory-columns{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)}
  #equipment-modal .backpack-help{font-size:8px}.sheet-identity{grid-column:1}.sheet-attacks{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:350px){.paperdoll-slot{flex-direction:column}.paperdoll-slot canvas{height:26px;width:30px}.paperdoll-slot span{font-size:7px;max-width:none}.equipment-header button{font-size:10px}}

#equipment-modal .backpack-detail .primary{background:linear-gradient(#e9ca8f,#af854f);color:#112238;border-color:#ffe4af}
.equipment-header button:focus-visible{outline:2px solid #ffe0a0;outline-offset:1px}