/* Replace the previous view within the canvas bounds, with internal scrolling. */
#arena.game-panel-active > :not(dialog[open]){visibility:hidden}
#arena > dialog{position:absolute;inset:auto;left:var(--scene-left);top:var(--scene-top);width:var(--scene-width);height:var(--scene-height);max-width:none;max-height:none;margin:0;padding:clamp(10px,2.3cqw,28px);border:0;border-radius:0;box-shadow:none;background:#12242d;color:#f7f0dc;overflow:auto;overscroll-behavior:contain;font-size:clamp(10px,1.3cqw,16px);text-align:left}
#arena > dialog .game-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:calc(-1 * clamp(10px,2.3cqw,28px));z-index:1;background:#12242d;margin:0 0 12px;padding:6px 0}
#arena > dialog h2{font-size:clamp(16px,2.4cqw,30px);margin:0;color:#eed77e}
#arena > dialog h3{font-size:clamp(12px,1.6cqw,20px);margin:8px 0}
#arena > dialog button{font-size:inherit;padding:clamp(5px,.8cqw,10px) clamp(8px,1.2cqw,16px);min-width:0}
#arena > dialog p{font-size:inherit}
#arena #badge-collection{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
#arena #badge-collection article{padding:10px}
#arena #badge-collection img{max-width:150px}
#arena #badge-collection h4{font-size:clamp(12px,1.4cqw,18px)}
#arena #badge-collection p{font-size:inherit;line-height:1.4}
#arena #badge-save-note{margin:6px 0 12px}
#arena .difficulty-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8% 0 0}
#arena .difficulty-choices button{padding:clamp(10px,2cqw,25px)}
#arena .difficulty-choices strong{font-size:clamp(14px,2.2cqw,28px)}
#arena .difficulty-choices span{font-size:inherit}
#arena #settings .bindings{grid-template-columns:1fr 1fr}
#arena #settings .bindings button{font-size:inherit;min-width:90px}
#arena #item-preview-art{width:38%;max-width:330px;height:auto;margin:0 auto}
#arena #item-preview-description{max-width:650px;margin:10px auto;text-align:center}
#arena #menu-message-copy{text-align:center;margin:12% auto;max-width:650px}
#gallery-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#gallery-tabs .selected{background:#d4ed76;border-color:#d4ed76;color:#111c23}
#arena #gallery-content[hidden],#arena #gallery-badges[hidden]{display:none}
.gallery-enemies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gallery-enemy,.gallery-art-card,.gallery-track{border:1px solid #536567;background:#0d2026;padding:12px}
.gallery-enemy h3{text-align:center}
#arena .gallery-flip{width:100%;border:0;padding:0;color:#d4ed76}
.gallery-flip canvas,.gallery-art-card canvas{width:100%;height:auto;max-height:270px;object-fit:contain;background:transparent}
.gallery-flip span{display:block;margin-top:8px}
.gallery-characters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px;margin:auto}
.gallery-art-card{text-align:center}
.gallery-track{margin-bottom:14px}
.gallery-track button{border-color:#d4ed76}
@container(max-width:700px){
 #arena #badge-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #arena #badge-collection img{max-width:90px}
 #arena #settings .bindings{grid-template-columns:1fr}
 #arena .difficulty-choices{margin:8px 0 0;gap:6px}
 #arena .difficulty-choices strong{margin-bottom:5px}
 #arena #item-preview-art{width:25%;max-width:120px}
 .gallery-enemies{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .gallery-enemy,.gallery-art-card,.gallery-track{padding:8px}
 .gallery-flip canvas,.gallery-art-card canvas{max-height:155px}
}
