/* Storage has its own workspace; the rest of the game's panels retain their layout. */
#panel:has(.pcStorage){padding:22px 16px;background:#07191eef;backdrop-filter:blur(4px)}
#panel:has(.pcStorage) .panelCard{max-width:1180px;padding:20px;background:#122b2e;border-color:#6a8b7c;box-shadow:0 20px 90px #0008}
#panel:has(.pcStorage) #closePanel{position:relative;z-index:2;font-size:12px;padding:8px 11px}
.pcStorage{color:#edf1de}
.pcStorage button{font-size:12px;border-radius:6px}
.pcStorage button:focus-visible{outline:3px solid #ffe0a0;outline-offset:2px;z-index:1}
.pcHeader{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-right:100px;padding-bottom:16px;margin-bottom:0;border-bottom:1px solid #41635b}
.pcHeader small{font-size:9px;letter-spacing:2px;color:#b3cfbb}
.pcHeader h2{font-size:24px!important;letter-spacing:-.6px;margin:5px 0 0!important}
.pcHeader p{font-size:12px;color:#a9c0b1;white-space:nowrap;margin:0}
.pcHeader strong{color:#f0e4b3}
.pcWorkspace{display:grid;grid-template-columns:minmax(215px,250px) minmax(330px,1fr) 148px;gap:18px;padding-top:18px;align-items:start}
.pcDetails{padding:18px 16px;border:1px solid #4c6d62;border-radius:9px;background:linear-gradient(160deg,#29463f,#172f32 48%);max-height:calc(100vh - 160px);overflow:auto;scrollbar-width:thin;scrollbar-color:#688779 #1a3335}
.pcDetails>small{font-size:9px;letter-spacing:1.2px;color:#abc9b5}
.pcHero{position:relative;display:flex;align-items:center;justify-content:center;min-height:130px;margin:5px 0 10px;background:radial-gradient(ellipse at center,#adc49925,transparent 68%)}
.pcHero :is(img,canvas){width:112px;height:112px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 8px 3px #071b2466)}
.pcDetails h3{font-size:22px;margin:2px 0 4px;letter-spacing:-.4px;overflow-wrap:anywhere}
.pcSpecies{font-size:11px;color:#acc7b9;margin:0 0 10px;line-height:1.5}
.pcTypes{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.pcTypes span{font-size:9px;font-weight:700;letter-spacing:.7px;padding:4px 7px;border:1px solid #678c78;border-radius:4px;background:#305344;color:#e5edce}
.pcHealth{font-size:11px;color:#d3ddc1;margin:0 0 5px}
.pcHpTrack{height:5px;border-radius:4px;overflow:hidden;background:#081f24;margin-bottom:13px}
.pcHpTrack i{height:100%;display:block;background:#bbcf85}
.pcActions{display:grid;gap:6px;margin:0 0 17px}
.pcActions>button{font-weight:700;background:#45654b;border-color:#8ca47e;color:#f2efd0}
.pcActions>button:hover:enabled{background:#547958}
.pcOrder{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pcOrder button{padding:7px 4px;font-size:10px;background:#23413d}
.pcMuted{font-size:10px;line-height:1.5;color:#b5c7b8;margin:2px 0}
.pcNature{font-size:11px;margin:14px 0 10px;line-height:1.5;color:#e3ddbd}
.pcNature span{display:block;font-size:10px;color:#a8c2b4}
.pcStats{border-collapse:collapse;width:100%;font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.pcStats caption{text-align:left;font-size:10px;font-weight:700;color:#c5d7c1;letter-spacing:.5px;margin-bottom:7px}
.pcStats th,.pcStats td{padding:5px 3px;border-bottom:1px solid #3e5e54}
.pcStats thead{font-size:9px;color:#97b8a6}
.pcStats th:first-child{text-align:left;font-weight:500}
.pcStats .pcStatUp{color:#ffc4a8}.pcStats .pcStatDown{color:#a7d4f4}
.pcStatNote{font-size:9px;line-height:1.6;color:#9ebaa9;margin:7px 0 13px}
.pcMoves{display:flex;gap:5px;flex-wrap:wrap;border-top:1px solid #3e5e54;padding-top:9px}
.pcMoves h4{width:100%;font-size:10px;color:#c6d7c1;margin:0 0 2px;font-weight:600}
.pcMoves span{font-size:9px;border:1px solid #4a6e5d;background:#1b3b37;padding:4px 5px;border-radius:4px}
.pcNoSelection{text-align:center;padding:35px 5px;color:#adc5b4}
.pcNoSelection>span{font-size:58px;font-weight:200;line-height:1.5;color:#7a9d88}
.pcNoSelection h3{font-size:19px;color:#e2e8cf}.pcNoSelection p{font-size:12px;line-height:1.8}
.pcBoxes{min-width:0}
.pcTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-bottom:12px;max-height:110px;overflow:auto;padding:2px}
.pcTabs button{position:relative;font-size:11px;padding:6px 5px;background:#1a393a;border-color:#41665e;color:#adccba;text-align:left;min-height:31px;font-weight:700}
.pcTabs button span{float:right;font-size:9px;font-weight:400;color:#80a08e;padding-top:2px}
.pcTabs button.selected{color:#fff1c6;border-color:#d7c18b;background:#47604a;box-shadow:inset 0 -2px #cfb982}
.pcTabs button.selected span{color:#e5dabb}
.pcBoxHeading{display:flex;align-items:center;justify-content:space-between;padding:0 1px 10px}
.pcBoxHeading h3{font-size:14px;letter-spacing:2px;margin:0;color:#e1e7cc}
.pcBoxHeading h3 span{font-size:10px;letter-spacing:0;color:#a2beab;margin-left:7px;font-weight:400}
.pcBoxHeading button{font-size:24px;line-height:18px;padding:4px 12px;background:#284941;border-color:#4b7160}
.pcSlotGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:10px;border:1px solid #78967a;border-radius:8px;background:linear-gradient(140deg,#6f8e66,#4e735c);box-shadow:inset 0 2px 8px #122b3e44}
.pcSlot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:82px;padding:4px 2px 17px!important;border:1px solid #c6d7b25c!important;border-radius:5px!important;background:#234f424d!important;box-shadow:inset 0 1px 4px #1d443a44;color:#f1eed3}
.pcSlot.occupied:hover{background:#a2b88855!important;border-color:#e7e3b0!important}
.pcSlot.empty{background:#46694c3b!important;box-shadow:inset 0 1px 3px #193b3933}
.pcSlot.selected{background:#d1c48260!important;border:2px solid #ffdf99!important;box-shadow:0 0 0 1px #243b2f,inset 0 0 15px #e5ce8933}
.pcSlot.moveTarget{border-color:#f2df9d!important;background:#a6b77c44!important;box-shadow:inset 0 0 0 1px #d7d89944}
.pcSlot.moveTarget:hover{background:#c7cf9455!important}.pcSlot.moveTarget .pcEmptyMark{color:#f2e4ac99;font-size:30px}
.pcSlot :is(img,canvas){display:block;width:43px;height:43px;object-fit:contain;image-rendering:pixelated}
.pcSlotName{display:block;max-width:100%;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e1ebce;line-height:13px}
.pcSlotLevel{position:absolute;bottom:4px;right:5px;font-size:9px;line-height:11px;color:#f1edc6;font-variant-numeric:tabular-nums}
.pcEmptyMark{font-size:24px;color:#d3dfba35;line-height:1}
.pcShiny{color:#ffe083;text-shadow:0 1px 3px #102a27;font-size:12px;font-weight:700}
.pcSlot>.pcShiny{position:absolute;left:4px;top:3px}.pcHeroShiny{position:absolute;left:3px;top:8px;font-size:25px}
.pcSlot.fainted :is(img,canvas),.pcPartySlot.fainted :is(img,canvas){filter:grayscale(.8);opacity:.6}
.pcSlot.fainted:after{content:'×';position:absolute;right:5px;top:2px;font-size:13px;color:#eec8b8}
.pcGridHint{font-size:10px;color:#acc6b5;margin:10px 2px;line-height:1.5}
.pcNotice{font-size:11px;line-height:1.6;min-height:56px;color:#b6cdbb;background:#1d3a36;padding:10px 12px;border:1px solid #3f6253;border-radius:6px}
.pcNotice.exchanging{color:#f4e1af;background:#4a4e36;border-color:#baa872}
.pcNotice button{display:block;margin-top:7px;font-size:10px;padding:5px 9px}
.pcParty{display:grid;gap:7px}
.pcParty h3{font-size:11px;letter-spacing:1.2px;margin:0 0 5px;display:flex;justify-content:space-between;color:#dfdfbd}
.pcParty h3 span{font-size:10px;letter-spacing:0;color:#9fbeaa}
.pcPartySlot{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;min-height:70px;padding:6px 5px 6px 13px!important;gap:2px 5px;text-align:left;background:#1c3c3a;border:1px solid #4a7160!important}
.pcPartySlot :is(img,canvas){width:40px;height:40px;object-fit:contain;image-rendering:pixelated;grid-row:1/3}
.pcPartySlot strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dfe8cd;align-self:end;min-width:0}
.pcPartySlot small{font-size:9px;letter-spacing:0;color:#abc7b1;align-self:start;white-space:nowrap}
.pcPartySlot .pcShiny{font-size:10px}
.pcPartyNumber{position:absolute;left:4px;top:4px;font-size:8px;color:#89aa96}
.pcPartySlot.selected{border-color:#f3d68d!important;background:#455d43;box-shadow:inset 0 0 0 1px #c2ad72}
.pcPartySlot.empty{display:flex;align-items:center;justify-content:center;border-style:dashed!important;opacity:.55;background:#17302f;color:#819c8f;font-size:10px}
.pcLead{position:absolute;right:4px;top:3px;font-size:6px;letter-spacing:.7px;color:#e2d6aa}
.pcParty>p{font-size:10px;color:#9ebaa8;line-height:1.6;margin:3px 0}
@media(min-width:1100px){.pcTabs{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}.pcTabs button{text-align:center;font-size:10px;padding:6px 1px}.pcTabs button span{display:none}.pcSlot{min-height:90px}}
@media(max-width:950px){.pcWorkspace{grid-template-columns:minmax(200px,230px) minmax(300px,1fr);gap:15px}.pcDetails{grid-row:1/3}.pcParty{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pcParty h3,.pcParty>p{grid-column:1/-1}.pcPartySlot{grid-template-columns:32px minmax(0,1fr);min-height:63px;padding-left:10px!important;gap:2px}.pcPartySlot :is(img,canvas){width:30px;height:30px}.pcPartySlot strong{font-size:9px}.pcPartySlot small{font-size:8px}.pcSlotGrid{gap:4px;padding:7px}.pcSlot{min-height:76px}.pcSlot :is(img,canvas){width:36px;height:36px}.pcHeader p{display:none}}
@media(max-width:700px){#panel:has(.pcStorage){padding:10px 6px}#panel:has(.pcStorage) .panelCard{padding:12px 9px}.pcHeader{padding-right:87px;padding-bottom:13px}.pcHeader h2{font-size:19px!important}.pcHeader small{font-size:7px;letter-spacing:1.5px}.pcWorkspace{display:flex;flex-direction:column;gap:15px;padding-top:13px}.pcBoxes{order:1;width:100%}.pcParty{order:2;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.pcDetails{order:3;width:100%;max-height:none;overflow:visible;padding:16px}.pcHero{min-height:105px}.pcHero :is(img,canvas){width:90px;height:90px}.pcSlotGrid{padding:7px;gap:4px}.pcSlot{min-height:74px}.pcSlot :is(img,canvas){width:34px;height:34px}.pcSlotName{font-size:7px}.pcSlotLevel{font-size:8px;bottom:4px;right:3px}.pcSlot>.pcShiny{font-size:10px;left:3px}.pcGridHint{font-size:9px}.pcNotice{font-size:10px}.pcStats{font-size:12px}.pcStatNote{font-size:10px}}
@media(prefers-reduced-motion:reduce){.pcStorage *{scroll-behavior:auto}}
@media(min-width:701px) and (max-height:820px){
  #panel:has(.pcStorage){padding:10px 12px}
  #panel:has(.pcStorage) .panelCard{padding:14px}
  .pcHeader{padding-bottom:10px;gap:10px}.pcHeader h2{font-size:20px!important;margin-top:3px!important}.pcHeader small{font-size:8px}.pcHeader p{font-size:11px}
  .pcWorkspace{padding-top:12px;gap:14px}
  .pcDetails{padding:12px;max-height:calc(100vh - 112px)}
  .pcDetails>small{font-size:8px}.pcHero{min-height:80px;margin:3px 0 5px}.pcHero :is(img,canvas){width:76px;height:76px}.pcHeroShiny{font-size:20px;top:6px}
  .pcDetails h3{font-size:19px;margin:0 0 3px}.pcSpecies{font-size:10px;line-height:1.3;margin-bottom:6px}
  .pcTypes{margin-bottom:6px}.pcTypes span{font-size:8px;padding:3px 6px}.pcHealth{font-size:10px;margin-bottom:3px}.pcHpTrack{height:4px;margin-bottom:9px}
  .pcActions{grid-template-columns:1fr 1fr;gap:4px;margin-bottom:9px}.pcActions>button{font-size:10px;padding:6px 4px}.pcActions>button:first-child,.pcActions>.pcOrder,.pcActions>.pcMuted{grid-column:1/-1}.pcOrder button{font-size:9px;padding:5px 3px}.pcMuted{font-size:9px}
  .pcNature{font-size:10px;margin:8px 0 6px;line-height:1.3}.pcNature span{font-size:9px}
  .pcStats{font-size:10px}.pcStats th,.pcStats td{padding:3px}.pcStats caption{font-size:9px;margin-bottom:5px}.pcStats thead{font-size:8px}.pcStatNote{font-size:8px;line-height:1.4;margin:5px 0 8px}
  .pcMoves{padding-top:6px;gap:4px}.pcMoves h4,.pcMoves span{font-size:8px}.pcMoves span{padding:3px 4px}
  .pcTabs{gap:4px;margin-bottom:7px}.pcTabs button{min-height:27px;padding:5px 4px;font-size:10px}.pcTabs button span{font-size:8px}
  .pcBoxHeading{padding-bottom:7px}.pcBoxHeading h3{font-size:12px}.pcBoxHeading button{font-size:20px;padding:3px 10px}
  .pcSlotGrid{padding:7px;gap:5px}.pcSlot{min-height:68px}.pcSlot :is(img,canvas){width:37px;height:37px}.pcSlotName{font-size:8px;line-height:11px}.pcSlotLevel{font-size:8px;bottom:3px}
  .pcGridHint{margin:7px 2px;font-size:9px}.pcNotice{min-height:41px;padding:8px 10px;font-size:10px;line-height:1.4}
  .pcParty{gap:6px}.pcPartySlot{min-height:60px}.pcPartySlot :is(img,canvas){width:36px;height:36px}.pcParty>p{font-size:9px;line-height:1.4}
}
@media(min-width:1100px){.pcTabs{grid-template-columns:repeat(13,minmax(0,1fr))}}

.pcStorage canvas{object-fit:contain;image-rendering:pixelated;max-width:100%}