/*
 * Play-mode choice (src/ui/PlayModeView.js): two mode posters. Each stage is baked game art (the refine altar for
 * vanilla, the Red arena with three bosses for bossrush); the mode name sits on a tinted ribbon across the stage edge.
 */
.play-mode-dialog {
    width: min(1040px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    box-sizing: border-box;
    padding: 26px 28px 20px;
    border: 1px solid #6d5a3c;
    border-radius: 10px;
    color: #ece6da;
    background: #12161c;
    box-shadow: 0 30px 90px #000c, inset 0 1px 0 #ffffff0d;
}
.play-mode-dialog::backdrop { background: #03070be0; }
.play-mode-dialog.is-busy { cursor: progress; }
.play-mode-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.play-mode-head h2 { margin: 0; font-size: 24px; letter-spacing: 0.01em; }
.play-mode-head p { margin: 6px 0 0; color: #aeb7c2; font-size: 14px; word-break: keep-all; }
.play-mode-dialog .dialog-close { position: static; flex: none; }
.play-mode-dialog :focus-visible { outline: 2px solid #f0d39e; outline-offset: 3px; }

.play-mode-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.play-mode-card {
    --tone: 227 189 122;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(var(--tone) / 0.3);
    border-radius: 10px;
    background: #181d24;
    box-shadow: 0 10px 30px #0007;
    transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.play-mode-card[data-play-mode='bossrush'] { --tone: 232 92 70; }
.play-mode-card:hover { transform: translateY(-3px); border-color: rgb(var(--tone) / 0.75);
    box-shadow: 0 18px 44px #0009, 0 0 36px rgb(var(--tone) / 0.16); }
.play-mode-card.is-current { border-color: rgb(var(--tone) / 0.9); }

/* Stage: the mode's world, fading into the card below. */
.play-mode-stage { position: relative; height: 196px; overflow: hidden; background: center / cover no-repeat; }
[data-play-mode='vanilla'] .play-mode-stage { background-image: url('../assets/ui/refine/refine-backdrop.webp'); }
[data-play-mode='bossrush'] .play-mode-stage { background-image: url('../assets/ui/play-mode/bossrush-stage.webp'); background-position: center 35%; }
.play-mode-stage::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, transparent 40%, #181d24 98%); }
.play-mode-stage img { position: absolute; pointer-events: none; user-select: none; }
.play-mode-glow { left: 50%; top: 50%; width: 330px; translate: -50% -58%; mix-blend-mode: screen; }
.play-mode-hero { left: 50%; top: 50%; width: 150px; translate: -50% -60%; rotate: -8deg; filter: drop-shadow(0 12px 16px #000b); }
.play-mode-float { width: 64px; filter: drop-shadow(0 8px 10px #000a); }
.play-mode-float.is-left { left: 15%; top: 40%; rotate: -12deg; }
.play-mode-float.is-right { right: 15%; top: 22%; width: 58px; rotate: 14deg; }
[data-play-mode='bossrush'] .play-mode-stage::before { content: ''; position: absolute; left: 50%; bottom: -40px; z-index: 1;
    width: 440px; height: 220px; translate: -50% 0; background: radial-gradient(closest-side, rgb(232 92 70 / 0.45), transparent); }
.play-mode-boss { bottom: -22px; z-index: 2; width: 196px; aspect-ratio: 1;
    -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 68%); mask-image: radial-gradient(circle, #000 40%, transparent 68%); }
.play-mode-boss.is-left { left: 6%; opacity: 0.85; }
.play-mode-boss.is-right { right: 6%; opacity: 0.85; }
.play-mode-boss.is-center { left: 50%; bottom: -34px; width: 262px; translate: -50% 0; z-index: 2; }

/* The current mode's stamp on the stage corner. */
.play-mode-current { position: absolute; top: 12px; left: 12px; z-index: 4; padding: 4px 12px; border-radius: 3px;
    color: #1d1508; background: linear-gradient(#f4d697, #c9984d); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 2px 8px #0009; }
.play-mode-current:empty { display: none; }

/* Mode name ribbon across the stage edge (tinted band, hairlines that fade at the ends). */
.play-mode-ribbon { position: relative; z-index: 4; margin: -24px 16px 0; padding: 9px 18px; text-align: center;
    color: #fff7e8; font-size: 22px; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 2px 6px #000;
    background: linear-gradient(90deg, transparent, rgb(var(--tone) / 0.34) 15%, rgb(var(--tone) / 0.34) 85%, transparent); }
.play-mode-ribbon::before, .play-mode-ribbon::after { content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--tone)), transparent); }
.play-mode-ribbon::before { top: 0; }
.play-mode-ribbon::after { bottom: 0; }
.play-mode-pitch { margin: 14px 22px 2px; text-align: center; color: #f4ecdd; font-size: 16px; font-weight: 600; line-height: 1.55; word-break: keep-all; }

.play-mode-features { display: grid; gap: 10px; margin: 16px 22px 0; padding: 0; list-style: none; }
.play-mode-features li { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; }
.play-mode-features img { grid-row: span 2; width: 42px; height: 42px; object-fit: contain; border-radius: 8px;
    background: #0e1217; box-shadow: inset 0 0 0 1px rgb(var(--tone) / 0.28); }
.play-mode-features img[src*='boss-previews'] { object-view-box: inset(24% 18% 26% 18%); }
.play-mode-features b { color: rgb(var(--tone)); font-size: 14px; line-height: 1.3; }
.play-mode-features span { color: #b4bcc6; font-size: 13px; line-height: 1.45; word-break: keep-all; }

.play-mode-loadout { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 22px 0; }
.play-mode-loadout span { padding: 3px 10px; border: 1px solid rgb(var(--tone) / 0.45); border-radius: 999px;
    background: rgb(var(--tone) / 0.1); color: #f3d2c8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.play-mode-loadout small { flex-basis: 100%; color: var(--color-text-3); font-size: var(--text-xs); line-height: 1.5; word-break: keep-all; }

.play-mode-cta { margin: auto 22px 22px; min-height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px;
    font-size: 16px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; transition: filter 150ms ease-out; }
/* The button sits at the card bottom; the block above it keeps a gap when the card is full. */
.play-mode-card > :nth-last-child(2) { margin-bottom: 20px; }
[data-play-mode='vanilla'] .play-mode-cta { color: #241805; background: linear-gradient(#f2d18c, #c2913f); box-shadow: 0 4px 14px #c2913f40; }
[data-play-mode='bossrush'] .play-mode-cta { color: #fff3ef; background: linear-gradient(#e2624c, #a8301f); box-shadow: 0 4px 14px #a8301f50; }
.play-mode-cta:hover:not(:disabled) { filter: brightness(1.08); }
.play-mode-card .play-mode-cta:disabled { color: rgb(var(--tone)); background: rgb(var(--tone) / 0.08); border-color: rgb(var(--tone) / 0.5);
    box-shadow: none; cursor: default; }
.play-mode-dialog.is-busy .play-mode-cta:disabled { cursor: progress; }

.play-mode-preserved { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: #aeb7c2; font-size: 13px; line-height: 1.5; }
.play-mode-preserved img { width: 34px; flex: none; }
.play-mode-error { min-height: 20px; margin: 6px 0 0; color: #ffb2a3; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .play-mode-card, .play-mode-card:hover { transition: none; transform: none; } }
@media (max-width: 700px) {
    .play-mode-dialog { padding: 18px 16px 14px; }
    .play-mode-choices { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
    .play-mode-stage { height: 128px; }
    .play-mode-glow { width: 230px; }
    .play-mode-hero { width: 100px; }
    .play-mode-float { width: 46px; }
    .play-mode-boss { width: 120px; }
    .play-mode-boss.is-center { width: 160px; }
    .play-mode-ribbon { font-size: 19px; margin-inline: 10px; }
    .play-mode-pitch, .play-mode-features, .play-mode-loadout { margin-inline: 16px; }
    .play-mode-cta { margin: auto 16px 16px; }
}