body[data-chronicle] #chronicle-body .bag-room{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);grid-template-rows:35px minmax(0,1fr) 44px;gap:10px;padding:12px;background:radial-gradient(ellipse at 30% 20%,#31514c,#162c2d);font-family:"Microsoft YaHei",sans-serif;color:#e5ddc6}
body[data-chronicle] #chronicle-body .bag-room section{margin:0}
body[data-chronicle] #chronicle-body .bag-summary{grid-column:1/-1;display:flex;align-items:center;gap:22px;border-bottom:1px solid #a9955a55;font-size:12px}
body[data-chronicle] #chronicle-body .bag-summary b{color:#e6cf92;font-weight:500;margin-left:5px;font-variant-numeric:tabular-nums}
body[data-chronicle] #chronicle-body .bag-catalog{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #87968055;border-radius:4px;background:#0f242855}
body[data-chronicle] #chronicle-body .bag-tabs{display:flex;flex:none;padding:4px;gap:3px;border-bottom:1px solid #82917655}
body[data-chronicle] #chronicle-body .bag-tabs button{flex:1;min-width:0;min-height:44px;padding:5px 3px;font-size:12px;border:0;border-radius:2px;box-shadow:none;background:transparent;color:#c2cfc5}
body[data-chronicle] #chronicle-body .bag-tabs small{font-size:10px;margin-left:4px;color:#9bafa6}
body[data-chronicle] #chronicle-body .bag-tabs [aria-pressed=true]{color:#f6dfa4;background:#a99a5f22;box-shadow:inset 0 -2px #d3b77b}
body[data-chronicle] #chronicle-body .bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start;gap:8px;padding:10px;overflow:auto;min-height:0;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ab9a69 #203936}
body[data-chronicle] #chronicle-body .bag-slot{position:relative;min-width:0;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 4px 20px;border:1px solid #79877588;border-radius:4px;background:linear-gradient(145deg,#375047,#203936);color:#e6dfc6;box-shadow:inset 0 1px #bbcc9e15}
body[data-chronicle] #chronicle-body .bag-slot .sp-icon,body[data-chronicle] #chronicle-body .bag-slot .bag-art{width:46px;height:46px;margin:0;object-fit:contain;flex:none}
body[data-chronicle] #chronicle-body .bag-slot b{font-size:11px;line-height:1.4;font-weight:400;overflow-wrap:anywhere}
body[data-chronicle] #chronicle-body .bag-slot small{position:absolute;right:5px;bottom:3px;font-size:10px;color:#c3d0c1}
body[data-chronicle] #chronicle-body .bag-slot em{position:absolute;top:3px;right:3px;font-style:normal;font-size:9px;padding:2px 3px;background:#bed5b8;color:#29483b}
body[data-chronicle] #chronicle-body .bag-slot[data-rarity="玄"],body[data-chronicle] #chronicle-body .bag-slot[data-rarity="地"]{border-color:#729cb0}
body[data-chronicle] #chronicle-body .bag-slot[data-rarity="天"]{border-color:#d0ae65}
body[data-chronicle] #chronicle-body .bag-slot[aria-pressed=true]{border-color:#f0d99c;box-shadow:inset 0 0 0 1px #dec78a;background:linear-gradient(145deg,#53684e,#2c4640)}
body[data-chronicle] #chronicle-body .bag-detail{min-width:0;min-height:0;overflow:auto;padding:16px;background:linear-gradient(145deg,#eee3c3,#c9c8ac);color:#263f39;border:1px solid #ceb980;border-radius:4px;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin}
body[data-chronicle] #chronicle-body .bag-detail header{display:flex;align-items:center;gap:12px}
body[data-chronicle] #chronicle-body .bag-detail .sp-icon,body[data-chronicle] #chronicle-body .bag-detail .bag-art{width:64px;height:64px;object-fit:contain;flex:none;margin:0}
body[data-chronicle] #chronicle-body .bag-detail header small,body[data-chronicle] #chronicle-body .bag-detail header span{font-size:11px;color:#4c6559}
body[data-chronicle] #chronicle-body .bag-detail h3{margin:3px 0!important;font-size:23px;font-family:"KaiTi",serif;color:#293f36;line-height:1.3}
body[data-chronicle] #chronicle-body .bag-detail p{font-size:12px;line-height:1.7;color:#425f52;margin:12px 0}
body[data-chronicle] #chronicle-body .bag-use{border-top:1px solid #657f6255;margin-top:12px;padding-top:5px}
body[data-chronicle] #chronicle-body .bag-use button{min-height:44px;max-width:100%;padding:8px 14px;font-size:12px;border:1px solid #637e67;border-radius:3px;background:#486753;color:#f1e6c7;box-shadow:none}
body[data-chronicle] #chronicle-body .bag-use button:disabled{background:#b2b69c;color:#5e6a55;border-color:#7e8b7155;opacity:1}
body[data-chronicle] #chronicle-body .bag-compare{margin-top:12px;border-top:1px solid #7d876055;padding-top:6px}
body[data-chronicle] #chronicle-body .bag-compare>span{display:grid;grid-template-columns:1fr auto 60px;gap:6px;font-size:11px;margin:5px 0;color:#405e50}
body[data-chronicle] #chronicle-body .bag-compare b{font-weight:400}.bag-compare em{font-style:normal;text-align:right;color:#5e6f61}.bag-compare .gain{color:#276f49}.bag-compare .loss{color:#9c5141}
body[data-chronicle] #chronicle-body .bag-empty{grid-column:1/-1;padding:20px 8px;font-size:13px;text-align:center;line-height:1.8}
body[data-chronicle] #chronicle-body .bag-empty small{display:block;font-size:11px}
body[data-chronicle] #chronicle-body .bag-footer{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
body[data-chronicle] #chronicle-body .bag-footer button{min-height:44px;font-size:12px;padding:6px 14px;border-radius:3px;background:#213e39}
body[data-chronicle] #chronicle-body .bag-footer button:last-child{background:#d6c48e;color:#243e36}
@media(orientation:landscape) and (max-height:520px){body[data-chronicle] #chronicle-body .bag-room{grid-template-rows:25px minmax(0,1fr) 44px;gap:5px;padding:6px}body[data-chronicle] #chronicle-body .bag-grid{gap:5px;padding:5px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}body[data-chronicle] #chronicle-body .bag-slot{min-height:82px;padding-top:5px}body[data-chronicle] #chronicle-body .bag-slot .sp-icon,body[data-chronicle] #chronicle-body .bag-slot .bag-art{width:32px;height:32px}body[data-chronicle] #chronicle-body .bag-detail{padding:10px}body[data-chronicle] #chronicle-body .bag-detail header .sp-icon,body[data-chronicle] #chronicle-body .bag-detail .bag-art{width:42px;height:42px}body[data-chronicle] #chronicle-body .bag-detail h3{font-size:20px}}
@media(max-width:640px) and (orientation:landscape){body[data-chronicle] #chronicle-body .bag-room{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}body[data-chronicle] #chronicle-body .bag-tabs button{font-size:11px}.bag-tabs small{display:none}}
@media(orientation:portrait) and (max-width:650px){body[data-chronicle] #chronicle-body .bag-room{grid-template-columns:minmax(0,1fr);grid-template-rows:30px minmax(145px,1fr) minmax(180px,1fr) 44px;padding:8px;gap:7px}body[data-chronicle] #chronicle-body .bag-summary{gap:10px;font-size:11px}body[data-chronicle] #chronicle-body .bag-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:6px}body[data-chronicle] #chronicle-body .bag-slot{min-height:88px}body[data-chronicle] #chronicle-body .bag-slot .sp-icon,body[data-chronicle] #chronicle-body .bag-slot .bag-art{width:38px;height:38px}body[data-chronicle] #chronicle-body .bag-detail{padding:12px}body[data-chronicle] #chronicle-body .bag-detail h3{font-size:22px}body[data-chronicle] #chronicle-body .bag-footer button{flex:1;padding:6px;font-size:11px}}

/* Keep the next action on screen while long descriptions and comparisons scroll. */
body[data-chronicle] #chronicle-body .bag-detail{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;gap:6px}
body[data-chronicle] #chronicle-body .bag-description{overflow:auto;min-height:0;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin}
body[data-chronicle] #chronicle-body .bag-description p{margin:5px 0 10px}
body[data-chronicle] #chronicle-body .bag-use{margin:0;padding-top:6px}
body[data-chronicle] #chronicle-body .bag-use:empty{display:none}
body[data-chronicle] #chronicle-body .bag-detail>.bag-empty{grid-row:1/-1;align-self:center}
body[data-chronicle] #chronicle-panel[data-panel=inventory] #chronicle-title{font-size:22px;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(orientation:landscape) and (max-height:360px){body[data-chronicle] #chronicle-body .bag-detail{padding:6px;gap:3px}body[data-chronicle] #chronicle-body .bag-detail header{gap:7px}body[data-chronicle] #chronicle-body .bag-detail header small{font-size:10px}body[data-chronicle] #chronicle-body .bag-detail h3{font-size:18px;margin:1px 0!important}body[data-chronicle] #chronicle-body .bag-tabs small{display:none}body[data-chronicle] #chronicle-body .bag-use{padding-top:3px}}
@media(orientation:portrait) and (max-width:650px){body[data-chronicle] #chronicle-panel[data-panel=inventory] #chronicle-title{font-size:18px;letter-spacing:0}}

/* Short landscape panels cannot fit a header, readable details and actions
   into fixed rows. Scroll the whole detail column instead of collapsing its
   description (and the shop's inventory link) to zero height. */
@media(orientation:landscape) and (max-height:360px){
  body[data-chronicle] #chronicle-body .bag-detail{display:block;overflow-y:auto;scroll-padding-block:6px}
  body[data-chronicle] #chronicle-body .bag-description{overflow:visible}
}