/* 34 · ammo you can see (option D build spec). Builds on 29_ir.css. */
body { padding-bottom: 40px; }
.guns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gun { padding: 12px 12px 14px; }
.gun-top { display: flex; align-items: baseline; gap: 12px; margin: 2px 4px 10px; flex-wrap: wrap; }
.gun-top h3 { margin: 0; font: 400 26px/1 var(--f-display); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: .02em; }
.gun-top .dur { font: 800 12px/1 var(--f-body); letter-spacing: .08em; color: var(--ink); background: var(--cyan); border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 9px; }
.gun-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { .gun-body { grid-template-columns: minmax(0, 1fr); } }
.gun .close { aspect-ratio: 400 / 380; }
.gun .arena { aspect-ratio: 1200 / 520; }
.gun .arena svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gun .side .beats { margin-top: 10px; }
.gets { margin: 12px 4px 0; padding-left: 20px; color: var(--cream-2); }
.gets li { margin: 0 0 6px; }
.gets li::marker { color: var(--yellow); }

.staterow { margin: 0 0 18px; }
.statetitle { font: 400 18px/1 var(--f-display); letter-spacing: .03em; margin: 0 4px 10px; color: var(--yellow); }
.stategrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .stategrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.statecard { text-align: center; }
.statecard .stage { aspect-ratio: 1 / 1; }
.statecard .stage svg { display: block; width: 100%; height: 100%; }
.statecard b { display: block; margin-top: 8px; font: 400 18px/1 var(--f-display); letter-spacing: .03em; }
.statecard small { display: block; margin-top: 4px; color: var(--cream-3); font: 700 12px/1 var(--f-body); }

.sizegrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .sizegrid { grid-template-columns: minmax(0, 1fr); } }
#scaleFig { aspect-ratio: 360 / 230; }
#scaleFig svg { display: block; width: 100%; height: 100%; }
.sz { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sz th { text-align: left; font: 400 13px/1 var(--f-display); letter-spacing: .05em; color: var(--cream-3); padding: 6px 8px; border-bottom: 2px solid rgba(255, 246, 224, .14); }
.sz td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 246, 224, .08); color: var(--cream-2); vertical-align: top; }
.sz td:first-child { color: var(--cream); font-weight: 700; white-space: nowrap; }
.sz td b { color: var(--yellow); white-space: nowrap; }

.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; }
@media (max-width: 760px) { .thumbs { grid-template-columns: minmax(0, 1fr); } }
.thumb .stage { aspect-ratio: 300 / 230; opacity: .85; }
.thumb .stage svg { display: block; width: 100%; height: 100%; }
.thumb b { display: block; margin-top: 8px; font: 400 16px/1 var(--f-display); color: var(--cream-2); }
.thumb small { display: block; margin-top: 3px; color: var(--cream-3); font: 600 12px/1.3 var(--f-body); }