/* 0.7.3 meta charges: camp shop (next to Skulls / Legacy) and the level-up charge bar (src/charges-ui.js). */
.charge-shop{margin-bottom:22px;text-align:left;border-color:#4d4366}
.charge-shop h2{margin:4px 0}
.charge-shop-text{margin:6px 0 14px;color:#b8a9c9;font-size:12px;line-height:1.6}
.charge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.charge-card{display:flex;flex-direction:column;gap:6px;padding:14px;background:#1d1828;border:1px solid #3d3350;min-width:0}
.charge-card h3{margin:0;font-size:15px}
.charge-card p{margin:0;color:#bfb2cc;font-size:12px;line-height:1.5;flex:1}
.charge-card small{color:#948575;font-size:11px}
.charge-card button{min-height:44px;margin-top:4px;color:#e6c57e;white-space:normal}
.charge-card button:disabled{opacity:.55;cursor:default}
.charge-head{display:flex;gap:10px;align-items:center}
.charge-glyph{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;font-size:22px;color:#d9c7ff;background:#2a2238;border:1px solid #544a6b}
.charge-rank{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:10px;color:#a596b5}
.charge-rank i{width:9px;height:9px;border:1px solid #6b5b85;background:#211b2c;transform:rotate(45deg)}
.charge-rank i.on{background:#d9ad54;border-color:#f0cf87}
.charge-rank b{margin-left:5px;font-weight:600}
/* Level-up screen: one compact row under the cards, never above them. */
.charge-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.charge-button{min-height:40px;padding:6px 8px;font-size:12px;font-weight:600;line-height:1.25;color:#e6dcf2;background:#241e31;border:1px solid #574a70;white-space:normal}
.charge-button span{color:#d9c7ff}
.charge-button kbd{padding:1px 5px;margin-left:3px;font-size:10px}
.charge-button:disabled{opacity:.45;cursor:default}
.charge-button.armed{background:#3a2131;border-color:#e0707a;color:#ffd7db;box-shadow:0 0 0 1px #e0707a55 inset}
.charge-hint{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:8px 0 0;color:#ffb8bf;font-size:12px}
.charge-cancel{min-height:32px;padding:4px 12px;font-size:11px}
.choices.banish-mode .choice{border-color:#e0707a;box-shadow:0 0 0 1px #e0707a44 inset}
.choices.banish-mode .choice .choose-label{color:#ff9ea7}
.choices.banish-mode .choice.reserve-card{opacity:.5;cursor:not-allowed;border-color:#574161;box-shadow:none}
@media(max-width:850px){.charge-grid{grid-template-columns:1fr}.charge-card{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}.charge-card .charge-head{grid-column:1}.charge-card p,.charge-card small{grid-column:1}.charge-card button{grid-column:2;grid-row:1/span 3;min-width:128px}}
@media(max-width:550px){.charge-card{grid-template-columns:1fr}.charge-card button{grid-column:1;grid-row:auto;min-width:0}.charge-button{font-size:11px;padding:5px 4px}.charge-button kbd{display:none}}
@media(max-height:520px) and (min-width:650px){.charge-bar{margin-top:5px;gap:6px}.charge-button{min-height:30px;padding:2px 6px;font-size:11px}.charge-hint{margin-top:4px;font-size:11px}}
@media(hover:none){.charge-button kbd{display:none}}
.charge-glyph-inline{display:inline-block;width:18px;height:18px;line-height:18px;vertical-align:-4px;text-align:center} /* 0.7.3 art: data-pa icon over the glyph */