/* The downloads page's screens (site.css holds the PET's pieces). */

/* every way to play, with the ROM it needs: a platform at a time, its
 * best build first (lit as the PET's cursor lights a row), what to do next
 * in the navigator's box under them */
.platforms { display: flex; flex-wrap: wrap; gap: 6px 2px; margin: 0 2px 10px; }
.platforms[hidden] { display: none; }
.platforms .plate { min-height: 40px; padding: 0 2px; font-size: 0.9rem; }
.platforms .plate[aria-selected="true"] { border-image-source: url(../assets/ui/plate-on.png); color: #fffbd6; }
.platforms .plate[aria-selected="true"]::before { content: ""; width: 9px; height: 12px; margin-right: -4px; background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.picked { margin: 0 4px 10px; font: 700 0.8rem/1.3 var(--caps); color: #d6f4ff; }
.picked[hidden] { display: none; }
.row[hidden] { display: none; }
.shop .row.pick, .shop .row.pick:hover { order: -1; border-image-source: url(../assets/ui/slot-on.png); }
.shop .tag { display: inline-block; margin-left: 10px; padding: 3px 7px 2px; background: var(--gold); color: #292929; font: 700 0.7rem/1 var(--caps); text-shadow: none; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; }
.shop .what small code { color: var(--gold); }
.shop .then { display: none; margin: 12px 0 0; font-size: 1.02rem; }
.shop .then.on { display: block; }
.shop .then code { font-size: 0.95em; }
.shop .release a { color: var(--gold); }
/* the 3DS: its build's link as a QR code for FBI, beside where it goes */
.shop .then.n3ds.on { display: flex; gap: 16px; align-items: flex-start; }
.shop .qr { flex: none; width: 196px; margin: 0; }
.shop .qr .code { display: grid; place-items: center; box-sizing: border-box; width: 196px; height: 196px; padding: 16px; background: #fff; font: 700 0.8rem/1.4 var(--caps); text-align: center; color: #214a52; }
.shop .qr .code:has(svg) { padding: 0; }
.shop .qr svg { display: block; width: 100%; height: 100%; }
.shop .qr figcaption { margin-top: 6px; font: 700 0.72rem/1.3 var(--caps); text-align: center; }
.shop .n3ds .steps { min-width: 0; }
.shop .tip { margin: 8px 4px 2px; font: 400 0.95rem/1.4 var(--pixel); color: #d6f4ff; }
.shop .tip a { color: var(--gold); }

/* every way to play, with the ROM it needs */
.shop .rom { margin: 2px 4px 14px; font-size: 1.05rem; }
.shop .rom code { color: var(--gold); }
.shop .row { grid-template-columns: 36px 1fr auto; cursor: default; }
.shop .row:hover { border-image-source: url(../assets/ui/slot.png); }
.shop .what b { display: block; font: 700 1.15rem/1.3 var(--pixel); }
.shop .what small { display: block; font: 400 1rem/1.4 var(--pixel); color: #d6f4ff; }
.shop .version { display: block; font: 700 0.75rem/1.4 var(--caps); color: var(--gold); }
.shop .release { margin: 12px 4px 2px; font: 700 0.85rem/1.3 var(--caps); color: #d6f4ff; }
.shop .release:empty { display: none; }
.exit.small { font-size: 1rem; padding: 0 8px; }
@media (max-width: 640px) {
	.shop .then.n3ds.on { flex-direction: column; align-items: center; }
	.platforms .plate { min-height: 36px; font-size: 0.78rem; }
	.shop .row { grid-template-columns: 36px 1fr; }
	.shop .exit { grid-column: 2; justify-self: start; }
}