/* ===== Arena previews: setup card + picker (ui/arenaPicker.js, ui/arenaThumbs.js). Own file, shared CSS untouched. ===== */

/* ---- preview image (one real arena still, or the 2x2 "random" collage with a dice badge) ---- */
.ap-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .7em; overflow: hidden; background: linear-gradient(160deg, #2a1a52, #150c2a); isolation: isolate; }
.ap-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .09) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: apShimmer 1.3s linear infinite; }
.ap-img.ready::before { display: none; }
@keyframes apShimmer { to { background-position: 200% 0; } }
.ap-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s ease-out; pointer-events: none; }
.ap-img img.ready { opacity: 1; }
.ap-img.one::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .14), inset 0 -2.2em 1.6em -1.2em rgba(10, 4, 24, .55); pointer-events: none; }
.ap-img.rot { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .14em; background: var(--ink); }
.ap-img.rot img { position: static; }
.ap-dice { position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em; padding: .42em; border-radius: 50%; color: #fff;
    background: linear-gradient(180deg, #a874ff, var(--purple-d)); border: .15em solid var(--ink); box-shadow: 0 .15em 0 var(--ink), 0 0 1em rgba(155, 92, 255, .7); display: grid; place-items: center; z-index: 2; }
.ap-dice svg { width: 100%; height: 100%; display: block; }

/* ---- hazard chip ---- */
.ap-tag { display: inline-block; max-width: 100%; padding: .12em .75em .14em; border-radius: 2em; font-size: .68em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
    color: var(--yellow); background: rgba(255, 210, 63, .13); border: .12em solid rgba(255, 210, 63, .38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-mode="junkyard"] .ap-tag { color: var(--text-dim); background: rgba(185, 172, 214, .12); border-color: rgba(185, 172, 214, .3); }
[data-mode="rotate"] .ap-tag, .su-arena[data-mode="rotate"] .ap-tag { color: #cdb2ff; background: rgba(155, 92, 255, .2); border-color: rgba(155, 92, 255, .5); }

/* ---- picker ---- */
.arena-modal { width: min(94%, 40em); max-height: 94%; }
.arena-modal .ap-body { flex: 1 1 auto; }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; padding-top: .5em; }
@container stage (min-width: 600px) { .portrait .arena-modal { width: min(94%, 46em); } .portrait .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.landscape .arena-modal { width: min(95%, 56em); }
.landscape .ap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; padding-top: .55em; }
.ap-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 0; padding: .35em .35em .5em; margin: 0; font: inherit; color: var(--text); text-align: center; cursor: pointer;
    background: rgba(21, 12, 42, .82); border: .16em solid var(--ink); border-radius: 1em; box-shadow: 0 .22em 0 var(--ink), inset 0 .1em 0 rgba(255, 255, 255, .08);
    transition: transform .14s var(--ease-spring), box-shadow .14s, border-color .14s; animation: apCardIn .42s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 38ms + 90ms); }
.ap-card:hover { transform: translateY(-.12em) scale(1.025); }
.ap-card:active { transform: translateY(.1em) scale(.98); box-shadow: 0 .08em 0 var(--ink); }
.ap-card:focus-visible { outline: .18em solid var(--cyan); outline-offset: .15em; }
@keyframes apCardIn { from { opacity: 0; transform: translateY(.9em) scale(.86); } to { opacity: 1; transform: none; } }
.ap-frame { position: relative; display: block; width: 100%; border-radius: .75em; border: .12em solid var(--ink); box-shadow: 0 .1em 0 rgba(0, 0, 0, .4); }
.ap-frame .ap-img { border-radius: .6em; }
.ap-name { font-family: var(--font-display); font-size: .86em; line-height: 1.1; letter-spacing: .02em; text-shadow: 0 .1em 0 var(--ink); max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.ap-check { position: absolute; top: -.5em; right: -.5em; z-index: 3; width: 1.8em; height: 1.8em; padding: .3em; border-radius: 50%; display: none; place-items: center; color: var(--ink);
    background: linear-gradient(180deg, #ffe680, var(--yellow-d)); border: .14em solid var(--ink); box-shadow: 0 .12em 0 var(--ink); }
.ap-check svg { width: 100%; height: 100%; display: block; }
.ap-card.on { border-color: var(--yellow); background: linear-gradient(180deg, rgba(88, 54, 20, .9), rgba(33, 18, 52, .92));
    box-shadow: 0 .22em 0 var(--ink), 0 0 1.1em rgba(255, 210, 63, .55), inset 0 0 0 .12em rgba(255, 210, 63, .35); }
.ap-card.on .ap-check { display: grid; animation: popIn .35s var(--ease-spring) both; }
.ap-card.on .ap-name { color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .ap-card, .ap-card.on .ap-check, .ap-img::before { animation: none; } }
.short .ap-card { gap: .2em; padding-bottom: .4em; }

/* ---- setup card: the whole card is the button ---- */
.su-arena-btn { font: inherit; color: var(--text); text-align: center; cursor: pointer; transition: transform .14s var(--ease-spring), box-shadow .14s, border-color .14s; position: relative; }
.su-arena-btn:hover { transform: translateY(-.1em); border-color: var(--purple); box-shadow: 0 .2em 0 var(--ink), 0 0 1em rgba(155, 92, 255, .4); }
.su-arena-btn:active { transform: translateY(.1em); box-shadow: 0 .08em 0 var(--ink); }
.su-arena-btn:focus-visible, .su-arena-btn.nav-focus { outline: .18em solid var(--cyan); outline-offset: .15em; }
.su-arena-row { display: flex; align-items: center; gap: .9em; min-width: 0; }
.su-arena-thumb { flex: 0 0 46%; min-width: 0; display: block; border-radius: .8em; border: .14em solid var(--ink); box-shadow: 0 .14em 0 var(--ink); }
.su-arena-thumb .ap-img { border-radius: .65em; }
.su-arena-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4em; text-align: left; }
.su-arena-name { font-family: var(--font-display); font-size: 1.05em; line-height: 1.1; text-shadow: 0 .1em 0 var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.su-arena-tag { font-size: .72em; }
.su-arena-chg { margin-top: .1em; padding: .22em .9em; border-radius: 2em; font-family: var(--font-display); font-size: .78em; letter-spacing: .06em; color: var(--ink); background: linear-gradient(180deg, #ffe680, var(--yellow-d)); border: .13em solid var(--ink); box-shadow: 0 .14em 0 var(--ink); }
.landscape .su-grid > .su-arena { grid-column: 1 / -1; }
.landscape .su-arena { padding: .6em .9em .6em; }
.landscape .su-arena > .su-h { display: none; }
.landscape .su-arena-row { gap: 1.1em; }
.landscape .su-arena-thumb { flex: 0 0 11em; }
.landscape .su-arena-txt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3em .9em; }
.landscape .su-arena-name { flex: 1 1 100%; font-size: 1.25em; }
.landscape .su-arena-chg { margin: 0 0 0 auto; align-self: center; font-size: .9em; padding: .35em 1.3em; }
.landscape .su-arena-txt { position: static; }
.portrait .su-arena-thumb { flex-basis: 44%; }
.short .su-arena-thumb { flex-basis: 8em; }
.short .su-arena { padding: .4em .7em; }
.su-arena-rule { display: none; font-size: .82em; line-height: 1.25; color: var(--text-dim); font-weight: 600; flex: 1 1 100%; }
.landscape .su-arena-rule { display: block; }
.short .su-arena-rule { display: none !important; }

/* wide portrait (tablet): "random" becomes a banner of four previews, the nine arenas fill 3x3 */
@container stage (min-width: 600px) {
    .portrait .ap-card.rnd { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .9em; padding: .4em .9em .4em .4em; text-align: left; }
    .portrait .ap-card.rnd .ap-frame { flex: 1 1 auto; }
    .portrait .ap-card.rnd .ap-img.rot { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; aspect-ratio: 64 / 9; }
    .portrait .ap-card.rnd .ap-name, .portrait .ap-card.rnd .ap-tag { flex: none; }
    .portrait .ap-card.rnd .ap-name { font-size: 1.2em; }
}

/* landscape setup: arena row sits under the settings, the (rarer) looks row last */
.landscape .su-grid > .su-arena { order: 1; }
.landscape .su-grid > .su-look { order: 2; }
@container stage (min-width: 600px) { .portrait .su-arena-thumb { flex-basis: 34%; } }