/* The Showdown in the Classlings look: the design of 3 October (design-directions/directions/mix/
   showdown.html). The count in a strip along the top, the class down both sides (those still in, and
   those who are out small and grey at the foot), the field in the middle with nothing over it, and
   Pause, Music and End along the bottom; for the final two their cards grow into plates; for the winner
   the field is theirs, with a gold Results button; and the results are the podium and places 4 to 10.
   It only applies to classes with Classlings on (#battleArena.classlings and
   #winnerCelebration.classlings); every other class keeps today's arena. Where things go is decided in
   js/arena/arena-layout.js, which sets the --sd-* sizes on the Showdown's screen; --u is one pixel of
   the design, scaled for this screen. The page stands on white, or on the sky and grass (the body's own
   world), so nothing here paints a background of its own. */

body.classlings-app #app.battle-fullscreen #battleScreen { background: transparent; }

#battleArena.classlings { --u: calc(var(--sd-k, 1) * 1px); }
#winnerCelebration.classlings { --u: calc(var(--sd-rk, var(--sd-k, 1)) * 1px); }
#battleArena.classlings,
#winnerCelebration.classlings {
    --sd-paper: #fbf9f4;
    --sd-heart: #ef4444;
    --sd-silver: #b8c2cc;
    --sd-silver-deep: #8a96a1;
    --sd-silver-light: #eef2f5;
    --sd-bronze: #cd7f32;
    --sd-bronze-deep: #9c5a20;
    --sd-bronze-light: #f0b27a;
    --sd-spring: cubic-bezier(0.28, 1.9, 0.5, 1);
    color: var(--cla-ink, #1e1b3a);
}

#battleArena.classlings {
    margin: 0;
    background: transparent;
}

/* ------------------------------------------------------------------ the strip: the count, and the logo */

.classlings-strip {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sd-strip, 80px);
    pointer-events: none;
}

/* The words in Classlings' own lettering at a whole number of screen pixels to each art pixel. The art
   is 20 pixels tall; its last 4 rows are room for tails, handed back so the capitals line up. */
.classlings-strip .cl-title {
    --title-scale: var(--sd-title, 3);
    position: absolute;
    left: 50%;
    top: calc(14 * var(--u));
    transform: translateX(-50%);
    margin: 0 0 calc(var(--title-scale) * -4px);
    line-height: 0;
    white-space: nowrap;
}
.classlings-strip .cl-title svg {
    display: block;
    width: calc(var(--title-scale) * var(--w) * 1px);
    height: calc(var(--title-scale) * var(--h) * 1px);
    /* Accents above capitals make the art 24 rows, not 20: lift just those rows into the space above, so
       an accented name (Émile, Ștefan) sits on the same line as a plain one. */
    margin-top: calc((20 - var(--h)) * var(--title-scale) * 1px);
}
.classlings-strip .cl-title.is-text {
    top: calc(12 * var(--u));
    margin: 0;
    font: 600 calc(40 * var(--u)) / 1.2 var(--cla-display, Fredoka, system-ui, sans-serif);
    color: var(--cla-ink, #1e1b3a);
}

/* The brand kit's logo at scale 2 (154 x 60), at the right, its letters lined up with the gutter; scale 1
   on a small screen. */
.classlings-strip .cl-logo {
    position: absolute;
    top: 8px;
    right: calc(var(--sd-gutter, 32px) - 2px);
    width: var(--sd-logo-w, 154px);
    height: var(--sd-logo-h, 60px);
    image-rendering: pixelated;
}
/* On a small screen the title keeps the left, in plain words if its lettering won't fit. */
#battleArena.classlings:is([data-roster="below"], [data-roster="none"]) .classlings-strip .cl-title {
    left: var(--sd-gutter, 12px);
    top: 8px;
    transform: none;
}
#battleArena.classlings:is([data-roster="below"], [data-roster="none"]) .classlings-strip .cl-title.is-text {
    top: 4px;
    font-size: 28px;
}

/* A practice Showdown says so, at the left of the strip. */
.classlings-practice {
    position: absolute;
    z-index: 5;
    top: calc(16 * var(--u));
    left: var(--sd-gutter, 32px);
    padding: 6px 12px;
    border: 2px solid var(--cla-ink, #1e1b3a);
    border-radius: 999px;
    background: var(--cla-gold, #f7c230);
    color: var(--cla-ink, #1e1b3a);
    font: 700 calc(14 * var(--u)) / 1 var(--cla-ui, 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif);
    pointer-events: none;
}

/* Said out loud for those who can't see the strip: only the moments that matter. */
.classlings-live,
#battleArena.classlings .battle-info,
#battleArena.classlings.with-rails #eliminationFeed {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#battleArena.classlings:not(.with-rails) #eliminationFeed { top: calc(var(--sd-strip, 60px) + 4px); left: 12px; }
#battleArena.classlings:not(.with-rails) #eliminationFeed div {
    font: 700 12px / 1 var(--cla-ui, 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif);
    color: #fff;
    background: rgba(30, 27, 58, 0.82);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    padding: 6px 9px;
}

/* ------------------------------------------------------------------ the field: a calm court, with nothing over it */

#battleArena.classlings #battleCanvas {
    position: absolute;
    left: var(--sd-field-x, 0);
    top: var(--sd-field-y, 0);
    width: var(--sd-field-w, 100%);
    height: var(--sd-field-h, 100%);
    box-sizing: border-box;
    display: block;
    border: var(--sd-edge, 3px) solid var(--cla-ink, #1e1b3a);
    border-radius: calc(28 * var(--u));
    background: var(--sd-paper);
}

/* The countdown: big white numbers with an ink edge, over the field. */
#battleArena.classlings .battle-overlay {
    inset: auto;
    left: var(--sd-field-x, 0);
    top: var(--sd-field-y, 0);
    width: var(--sd-field-w, 100%);
    height: var(--sd-field-h, 100%);
    background: transparent;
    pointer-events: none;
}
#battleArena.classlings .countdown,
#battleArena.classlings.station-countdown .countdown {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    animation: none;
    font: 700 min(12vw, calc(120 * var(--u))) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    color: #fff;
    -webkit-text-stroke: 6px var(--cla-ink, #1e1b3a);
    paint-order: stroke fill;
    text-shadow: none;
}
#battleArena.classlings.station-countdown .countdown::before,
#battleArena.classlings.station-countdown .countdown::after { content: none; }
#battleArena.classlings .countdown.is-status {
    font: 600 clamp(1.4rem, 4vw, 2.6rem) / 1.1 var(--cla-display, Fredoka, system-ui, sans-serif);
    -webkit-text-stroke: 0;
    color: var(--cla-ink, #1e1b3a);
    background: #fff;
    border: var(--sd-edge, 3px) solid var(--cla-ink, #1e1b3a);
    border-radius: calc(20 * var(--u));
    padding: calc(16 * var(--u)) calc(22 * var(--u));
}

/* ------------------------------------------------------------------ the class down both sides */

.classlings-side {
    position: absolute;
    z-index: 4;
    display: none;
    flex-direction: column;
    gap: calc(8 * var(--u));
    box-sizing: border-box;
    min-height: 0;
}
#battleArena.classlings.with-rails .classlings-side { display: flex; }

.classlings-rail {
    display: grid;
    grid-auto-rows: var(--row, 64px);
    align-content: start;
    gap: var(--gap, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 0;
}
.classlings-rail li { min-height: 0; }

/* A card: their Classling, their name and their points. */
.classlings-card {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--face, 56px) minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(8 * var(--u));
    box-sizing: border-box;
    padding: 0 calc(16 * var(--u)) 0 4px;
    color: var(--cla-ink, #1e1b3a);
    background: #fff;
    border: var(--card-edge, var(--sd-edge, 3px)) solid var(--cla-ink, #1e1b3a);
    border-radius: min(calc(20 * var(--u)), calc(var(--row, 64px) * 0.32));
    font: 600 var(--fs, 20px) / 1.1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s, background-color 0.12s;
}
.classlings-card canvas {
    width: var(--face, 56px);
    height: var(--face, 56px);
    image-rendering: pixelated;
}
.classlings-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classlings-card .hp {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--fs, 20px) * 0.3);
    font: 700 calc(var(--fs, 20px) * 1.2) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* The cards' 7 x 6 pixel heart, sized with the words beside it (21 x 18 at the design's 20 px). */
.rail-heart {
    flex: none;
    width: calc(var(--fs, 20px) * 1.05);
    height: calc(var(--fs, 20px) * 0.9);
    color: var(--sd-heart);
}
/* Narrow columns put the points under the name; very short cards drop the picture. */
.classlings-side.compact .classlings-card:not(.is-big) {
    grid-template-columns: var(--face, 28px) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    row-gap: 0;
}
.classlings-side.compact .classlings-card:not(.is-big) canvas { grid-row: 1 / span 2; }
.classlings-side.compact .classlings-card:not(.is-big) .nm { align-self: end; }
.classlings-side.compact .classlings-card:not(.is-big) .hp { align-self: start; font-size: calc(var(--fs, 20px) * 1.05); }
.classlings-side.tiny .classlings-card:not(.is-big) { grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(10 * var(--u)); }
.classlings-side.tiny .classlings-card:not(.is-big) canvas { display: none; }
.classlings-card.hit { background: var(--cla-minus, #ffe2dc); transform: translateX(3px); }
.classlings-card.focus,
.classlings-card:focus-visible { outline: 4px solid var(--ctl-ink); outline-offset: 0; }
.classlings-card.is-gold { background: var(--cla-gold-tint, #fff3c4); border-color: var(--cla-gold-deep, #c98a12); }

/* The final two's cards grow into plates, one on each side, and the winner's stands alone. */
#battleArena.classlings.is-plates .classlings-rail { grid-auto-rows: auto; }
/* A plate's picture is --plate across (132 at the design's size, less in a short column), the name and the
   points under it, all in proportion. */
.classlings-card.is-big {
    height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: calc(var(--plate, 132px) * 0.03);
    padding: calc(var(--plate, 132px) * 0.09) calc(var(--plate, 132px) * 0.09) calc(var(--plate, 132px) * 0.12);
    border-radius: min(calc(20 * var(--u)), calc(var(--plate, 132px) * 0.2));
    font-size: calc(var(--plate, 132px) * 0.2727);
    cursor: default;
}
/* The picture has room above it for its hop that the plate doesn't give up. */
.classlings-card.is-big canvas { width: var(--plate, 132px); height: calc(var(--plate, 132px) * 1.2); margin-top: calc(var(--plate, 132px) * -0.2); pointer-events: none; }
.classlings-card.is-big .nm { font: 700 calc(var(--plate, 132px) * 0.2727) / 1.05 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif); }
.classlings-card.is-big .hp { --fs: calc(var(--plate, 132px) * 0.227); gap: calc(var(--plate, 132px) * 0.076); font-size: calc(var(--plate, 132px) * 0.2727); }
.classlings-card.is-big .rail-heart { width: calc(var(--plate, 132px) * 0.212); height: calc(var(--plate, 132px) * 0.182); }
.classlings-card.is-big.grows { animation: sd-grow 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; transform-origin: 50% 0; }
@keyframes sd-grow { from { transform: scale(0.72); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

/* Those who are out, small and grey, at the foot of their own side. */
.classlings-out {
    flex: none;
    margin-top: auto;
    box-sizing: border-box;
    padding: var(--sd-out-top, 8px) var(--sd-out-x, 12px) var(--sd-out-bottom, 12px);
    border-radius: calc(20 * var(--u));
    background: var(--cla-wash, #f3f2f9);
}
.classlings-out[hidden] { display: none; }
.classlings-out .out-label {
    margin: 0;
    height: var(--sd-out-label, 24px);
    font: 600 calc(16 * var(--u)) / 1.2 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    color: var(--cla-ink-2, #4a4766);
}
.out-faces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sd-out-gap, 6px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.out-face {
    width: var(--sd-out-face, 36px);
    height: var(--sd-out-face, 36px);
    filter: grayscale(1);
    opacity: 0.45;
}
.out-face canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
body.classlings-app.cla-sky .classlings-out {
    background: #fff;
    box-shadow: inset 0 0 0 3px rgba(30, 27, 58, 0.3);
}

/* ------------------------------------------------------------------ the buttons along the bottom */

#battleArena.classlings .battle-controls {
    position: absolute;
    z-index: 15;
    top: auto;
    left: var(--sd-gutter, 32px);
    right: var(--sd-gutter, 32px);
    bottom: var(--sd-soil, 16px);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--sd-dock-gap, 16px);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
#battleArena.classlings .battle-controls > * { pointer-events: auto; flex: none; }

/* Toy buttons, the standard bar squares (shared/css/classlings-controls.css): a flat face on a 3 px ink edge and a
   solid 6 px base that it sinks onto when pressed. 78 px with corners 28 (64 px, corners 20, on a phone: arena-layout.js
   sets --sd-square and --sd-square-r), on every screen: a short screen leaves less room round them, never smaller
   buttons (the identity check of 9 October, findings 7 and 19). */
#battleArena.classlings .battle-control-btn,
#battleArena.classlings .battle-control-btn:hover:not(:disabled) {
    --ring-lift: var(--ctl-lift); /* the focus ring goes round its lift too (classlings-controls.css) */
    display: inline-grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    width: var(--sd-square, var(--ctl-square));
    height: var(--sd-square, var(--ctl-square));
    margin: 0 0 var(--ctl-lift);
    padding: 0;
    color: var(--ctl-ink);
    font: var(--ctl-square-font);
    background: var(--ctl-page);
    border: var(--ctl-edge) solid var(--ctl-ink);
    border-radius: var(--sd-square-r, var(--ctl-square-r));
    box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink);
    transform: none;
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
#battleArena.classlings .battle-control-btn:active:not(:disabled) {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--ctl-ink);
    transition-duration: var(--ctl-press);
    transition-timing-function: ease-out;
}
#battleArena.classlings .battle-control-btn:disabled { opacity: 0.5; cursor: wait; }
#battleArena.classlings .battle-control-btn:focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
#battleArena.classlings .battle-control-btn.danger,
#battleArena.classlings .battle-control-btn.danger:hover:not(:disabled) { color: var(--ctl-ink); background: var(--ctl-page); }
#battleArena.classlings .classlings-music-btn[aria-pressed="true"],
#battleArena.classlings .classlings-music-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--cla-gold-tint, #fff3c4); }

/* Pause, then Music, at the left; End at the right. */
#battleArena.classlings #pauseResumeBtn { order: 0; }
#battleArena.classlings .classlings-music-btn { order: 1; }
#battleArena.classlings #endBattleBtn { order: 3; margin-left: auto; }

/* The pictures are the kit's pixel icons: 12 art pixels wide at a whole number of screen pixels each (the
   close is 8 wide, one step bigger), with the word under. Pause shows Play while it's paused (battle.js
   sets data-paused). Today's own words and line icons stay out of this look. */
#battleArena.classlings #pauseResumeBtn > svg:not(.cla-only) { display: none !important; }
#battleArena.classlings .cla-else { display: none !important; }
#battleArena.classlings .battle-control-btn > svg {
    display: block;
    width: calc(12px * var(--sd-icon, 3));
    height: calc(12px * var(--sd-icon, 3));
}
#battleArena.classlings .battle-control-btn > svg.cla-end {
    width: calc(8px * (var(--sd-icon, 3) + 1));
    height: calc(7px * (var(--sd-icon, 3) + 1));
    /* It makes up the other pictures' height, so End's word sits level with Pause's and Music's. */
    margin-block: calc((5px * var(--sd-icon, 3) - 7px) / 2);
}
#battleArena.classlings .battle-control-btn > .cla-label { display: block; white-space: nowrap; font-size: 18px; }
/* On a small screen the buttons are the pictures alone; their words are still there for screen readers. */
#battleArena.classlings.icons-only .battle-control-btn > .cla-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
#battleArena.classlings #pauseResumeBtn > .cla-play,
#battleArena.classlings #pauseResumeBtn > .cla-label-play { display: none; }
#battleArena.classlings #pauseResumeBtn[data-paused="true"] > .cla-pause,
#battleArena.classlings #pauseResumeBtn[data-paused="true"] > .cla-label-pause { display: none; }
#battleArena.classlings #pauseResumeBtn[data-paused="true"] > .cla-play { display: block; }
#battleArena.classlings #pauseResumeBtn[data-paused="true"] > .cla-label-play { display: block; }

/* With the winner found, only Music stays, and a gold Results button takes End's place. */
#battleArena.classlings.is-won #pauseResumeBtn,
#battleArena.classlings.is-won #endBattleBtn { display: none; }
/* The big gold button: 72 px, corners 28, a 7 px dark-gold base, 28 px words, whatever the screen (the standard
   .cla-btn.is-gold.is-big). */
#battleArena.classlings .battle-control-btn.cl-results-btn,
#battleArena.classlings .battle-control-btn.cl-results-btn:hover:not(:disabled) {
    order: 4;
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    width: auto;
    height: var(--ctl-big-h);
    min-height: var(--ctl-big-h);
    margin-bottom: var(--ctl-big-lift);
    padding: 0 32px;
    font: var(--ctl-big-font);
    letter-spacing: 0.01em;
    background: var(--ctl-gold);
    border-color: var(--ctl-gold-deep);
    border-radius: var(--ctl-big-r);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-gold-deep);
}
#battleArena.classlings .cl-results-btn > svg.cl-ic { width: 24px; height: 24px; margin-right: -2px; }
#battleArena.classlings .cl-results-btn:active:not(:disabled) { transform: translateY(var(--ctl-big-lift)); box-shadow: 0 0 0 var(--ctl-gold-deep); }
#battleArena.classlings .cl-results-btn:focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }

/* ------------------------------------------------------------------ the winner: alone on the field */

.classlings-winner-tag {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--u));
    padding: 4px calc(14 * var(--u)) 5px;
    transform: translateX(-50%);
    font: 600 calc(28 * var(--u)) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    white-space: nowrap;
    background: var(--cla-gold-tint, #fff3c4);
    border: var(--sd-edge, 3px) solid var(--cla-gold-deep, #c98a12);
    border-radius: calc(14 * var(--u));
    pointer-events: none;
}
.classlings-winner-tag .tag-hp {
    --fs: calc(24 * var(--u));
    display: inline-flex;
    align-items: center;
    gap: calc(7 * var(--u));
    font-weight: 700;
}

/* The results are up: the field and the class make way, and the strip stays with its new words. */
#battleArena.classlings.is-results #eliminationFeed,
#battleArena.classlings.is-results .classlings-side,
#battleArena.classlings.is-results #battleCanvas,
#battleArena.classlings.is-results .battle-controls,
#battleArena.classlings.is-results .battle-overlay,
#battleArena.classlings.is-results .classlings-practice,
#battleArena.classlings.is-results .classlings-winner-tag { display: none; }

/* ------------------------------------------------------------------ the results: the podium, then places 4 to 10 */

#winnerCelebration.classlings {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: block;
    padding: 0;
    overflow: hidden;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#winnerCelebration.classlings .winner-content {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: left;
}
#winnerCelebration.classlings :is(.winner-ball-canvas, #winnerTitle, #winnerName, .confetti-container, #unlocksContainer, .finale-eyebrow) { display: none; }
#winnerCelebration.classlings #finaleResults { position: absolute; inset: 0; padding: 0; margin: 0; }

.cl-results {
    position: absolute;
    left: var(--sd-gutter, 32px);
    right: var(--sd-gutter, 32px);
    top: var(--sd-r-top, calc(92 * var(--u)));
    bottom: var(--sd-r-bottom, calc(120 * var(--u)));
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(420 * var(--u));
    gap: calc(32 * var(--u));
}
.cl-results.is-podium-only { grid-template-columns: minmax(0, 1fr); }

/* The podium: gold, silver and bronze blocks, the winner's in the middle and the tallest. */
.cl-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    padding: 0 calc(32 * var(--u));
    list-style: none;
    animation: sd-rise 0.5s both;
}
.cl-podium li { flex: 1; min-width: 0; max-width: calc(262 * var(--u)); display: grid; justify-items: center; }
.cl-podium .pl-1 { order: 2; --block: calc(168 * var(--u)); --face-c: var(--cla-gold, #f7c230); --hi: var(--cla-gold-light, #ffe08a); --side: var(--cla-gold-deep, #c98a12); }
.cl-podium .pl-2 { order: 1; --block: calc(116 * var(--u)); --face-c: var(--sd-silver); --hi: var(--sd-silver-light); --side: var(--sd-silver-deep); }
.cl-podium .pl-3 { order: 3; --block: calc(80 * var(--u)); --face-c: var(--sd-bronze); --hi: var(--sd-bronze-light); --side: var(--sd-bronze-deep); }
.cl-podium .who {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: calc(132 * var(--u));
    max-width: 100%;
    margin: 0;
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: var(--sd-edge, 3px) solid var(--cla-ink, #1e1b3a);
    border-radius: calc(20 * var(--u));
}
.cl-podium .who b {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 700 max(15px, calc(36 * var(--u))) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    white-space: nowrap;
}
.cl-results .up {
    display: inline-block;
    padding: 3px 10px 4px;
    font: 700 max(11px, calc(18 * var(--u))) / 1.1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    color: var(--cla-ink, #1e1b3a);
    background: #e5f8da;
    border: 2px solid var(--cla-lime-deep, #3e9a2a);
    border-radius: calc(14 * var(--u));
    white-space: nowrap;
}
.cl-results .up[hidden] { display: none; }
.cl-podium .pod-face { width: calc(150 * var(--u)); height: calc(150 * var(--u)); margin-top: calc(8 * var(--u)); image-rendering: pixelated; }
/* The winner's picture is 176 square, in a bigger box for its move, which the name above stays in front of. */
.cl-podium .pl-1 .pod-face {
    width: calc(264 * var(--u));
    height: calc(264 * var(--u));
    margin: calc(-80 * var(--u)) calc(-44 * var(--u)) 0;
    pointer-events: none;
}
.cl-podium .who { position: relative; z-index: 2; }
.cl-podium .block {
    width: 100%;
    height: var(--block);
    display: grid;
    place-items: start center;
    padding-top: calc(12 * var(--u));
    box-sizing: border-box;
    background: var(--face-c);
    box-shadow: inset 0 var(--cla-px, 4px) 0 var(--hi), inset 0 calc(var(--cla-px, 4px) * -3) 0 var(--side), var(--cla-ring);
}
.cl-podium .block b { font: 700 max(22px, calc(56 * var(--u))) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif); }

/* Places 4 to 10, in a white panel with a quiet edge. */
.cl-next {
    align-self: end;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
    background: #fff;
    border: var(--sd-edge, 3px) solid var(--cla-wash-2, #e4e1f1);
    border-radius: calc(28 * var(--u));
    animation: sd-rise 0.5s 0.15s both;
}
.cl-next h2 { margin: 0 0 calc(12 * var(--u)); font: 700 max(16px, calc(28 * var(--u))) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif); }
.cl-next ol { display: grid; gap: calc(var(--r) * 0.07); margin: 0; padding: 0; list-style: none; }
/* A row is as tall as the design draws it (56 at the design's size), or less where the screen is short, so
   all the places fit between the strip and the buttons (--n of them). */
.cl-next {
    --r: min(
        calc(56 * var(--u)),
        max(22px, calc((100vh - var(--sd-r-top, 92px) - var(--sd-r-bottom, 120px) - 120 * var(--u) - 20px) / var(--n, 7)))
    );
}
/* The big buttons take more of a tall narrow screen's foot than the old small ones, so the places' rows are a little
   shorter there (the list scrolls only on a very small phone). */
#battleScreen[data-results="stacked"] .cl-next { --r: max(27px, calc(46 * var(--u))); }
.cl-next li {
    display: grid;
    grid-template-columns: calc(var(--r) * 0.72) calc(var(--r) * 0.93) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--r) * 0.21);
    height: var(--r);
    padding: 0 calc(var(--r) * 0.14);
    border-radius: calc(var(--r) * 0.25);
}
.cl-next li:nth-child(odd) { background: var(--cla-wash, #f3f2f9); }
.cl-next .rank { font: 700 max(14px, calc(28 * var(--u))) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif); text-align: center; }
.cl-next .row-face { width: calc(var(--r) * 0.93); height: calc(var(--r) * 0.93); image-rendering: pixelated; }
.cl-next .name {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 600 max(13px, calc(24 * var(--u))) / 1.1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    white-space: nowrap;
}
@keyframes sd-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The buttons along the foot: Leaderboard at the left, Done at the right, and between them how it saved and Undo.
   Leaderboard (white) and Done (gold) are the big buttons: 72 px, corners 28, a 7 px base, 28 px words, never
   smaller (identity check 5 and 19). On a phone they share the row if they fit and otherwise stand one above the
   other, each across the screen, Done last. */
#winnerCelebration.classlings .winner-actions {
    position: absolute !important;
    z-index: 5;
    left: var(--sd-gutter, 32px);
    right: var(--sd-gutter, 32px);
    bottom: var(--sd-soil, 16px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 !important;
    padding: 0;
    background: none;
    border-radius: 0;
    pointer-events: none;
}
#winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn) {
    --ring-lift: var(--ctl-big-lift); /* the focus ring goes round its lift too (classlings-controls.css) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    height: var(--ctl-big-h);
    min-height: var(--ctl-big-h);
    margin: 0 0 var(--ctl-big-lift);
    padding: 0 32px;
    color: var(--ctl-ink);
    font: var(--ctl-big-font);
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: var(--ctl-page);
    border: var(--ctl-edge) solid var(--ctl-ink);
    border-radius: var(--ctl-big-r);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-ink);
    transform: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
#winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn):hover:not(:disabled) { transform: none; box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-ink); }
#winnerCelebration.classlings .winner-actions #closeCelebrationBtn {
    order: 2;
    background: var(--ctl-gold);
    border-color: var(--ctl-gold-deep);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-gold-deep);
}
#winnerCelebration.classlings .winner-actions #closeCelebrationBtn:hover:not(:disabled) { box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-gold-deep); }
#winnerCelebration.classlings .winner-actions #viewLeaderboardBtn { order: 1; }
#winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn):active:not(:disabled) {
    transform: translateY(var(--ctl-big-lift));
    box-shadow: 0 0 0 var(--ctl-ink);
    transition-duration: var(--ctl-press);
    transition-timing-function: ease-out;
}
#winnerCelebration.classlings .winner-actions #closeCelebrationBtn:active:not(:disabled) { box-shadow: 0 0 0 var(--ctl-gold-deep); }
#winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn):disabled { opacity: 0.5; cursor: wait; }
#winnerCelebration.classlings :is(.btn, #undoMatchBtn):focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
/* The kit's tick and leaderboard: 12 art pixels at 2 screen pixels each. */
#winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn) > .cla-only { display: block; flex: none; width: 24px; height: 24px; }
#winnerCelebration.classlings .cla-else { display: none; }

/* How the result saved, and Undo, in the middle of the foot, one on each side of the middle: the note, then Undo,
   an ordinary button (56 px, corners 20, a 6 px base, the kit's undo arrow), white with an ink edge like the
   others: taking back is not a danger of its own, it asks first (identity check 10). Their base lines up with
   the big buttons'. */
#winnerCelebration.classlings .results-saved-note {
    position: absolute;
    z-index: 4;
    right: calc(50% + 10px);
    bottom: calc(var(--sd-soil, 16px) + var(--ctl-big-lift) + (var(--ctl-big-h) - var(--ctl-h)) / 2);
    display: flex;
    align-items: center;
    height: var(--ctl-h);
    margin: 0 !important;
    color: var(--cla-ink-2, #4a4766) !important;
    font: 600 max(14px, calc(16 * var(--u))) / 1.3 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif) !important;
    text-align: right;
    white-space: nowrap;
}
#winnerCelebration.classlings #undoMatchBtn {
    --ring-lift: var(--ctl-lift); /* the focus ring goes round its lift too (classlings-controls.css) */
    position: absolute;
    z-index: 4;
    left: calc(50% + 10px);
    bottom: calc(var(--sd-soil, 16px) + var(--ctl-big-lift) + (var(--ctl-big-h) - var(--ctl-h)) / 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--ctl-h);
    min-height: var(--ctl-h);
    margin: 0;
    padding: var(--ctl-pad);
    color: var(--ctl-ink);
    background: var(--ctl-page);
    border: var(--ctl-edge) solid var(--ctl-ink);
    border-radius: var(--ctl-r);
    box-shadow: 0 var(--ctl-lift) 0 var(--ctl-ink);
    font: var(--ctl-font);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
#winnerCelebration.classlings #undoMatchBtn .cla-only { display: inline; }
#winnerCelebration.classlings #undoMatchBtn > svg.cla-undo-ic { display: block; flex: none; width: 24px; height: 24px; }
#winnerCelebration.classlings #undoMatchBtn:active:not(:disabled) {
    transform: translateY(var(--ctl-lift));
    box-shadow: 0 0 0 var(--ctl-ink);
    transition-duration: var(--ctl-press);
    transition-timing-function: ease-out;
}
#winnerCelebration.classlings #undoMatchBtn:disabled { opacity: 0.5; cursor: default; }

/* On the sky's grass the note sits on a white pill, so it reads. */
body.classlings-app.cla-sky #winnerCelebration.classlings .results-saved-note {
    align-self: auto;
    height: auto;
    padding: 2px 12px 3px;
    background: #fff;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(30, 27, 58, 0.3);
}

.classlings-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    image-rendering: pixelated;
}

/* ------------------------------------------------------------------ narrow screens */

/* A tall narrow screen: the podium over the list, which scrolls if it must, and how it saved and Undo
   above the buttons. */
#battleScreen[data-results="stacked"] .cl-results {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(14 * var(--u));
    align-content: start;
    overflow-y: auto;
}
#battleScreen[data-results="stacked"] .cl-podium { padding: 0; }
#battleScreen[data-results="stacked"] .cl-next { align-self: start; }
/* How it saved and Undo stand above the buttons when they can't stand between them (a phone, or a window under about
   880 px): Undo at the right, the note at the left of its row, or on the line over it when the row is under 400 px. The buttons never shrink; if Leaderboard and Done can't
   share a row they stand one above the other, each across the screen (arena-layout.js reserves the room). */
#battleScreen[data-foot="above"] #winnerCelebration.classlings #undoMatchBtn {
    left: auto;
    right: var(--sd-gutter, 32px);
    bottom: calc(var(--sd-foot-buttons, 90px) + 8px + var(--ctl-lift));
}
#battleScreen[data-foot="above"] #winnerCelebration.classlings .results-saved-note {
    left: var(--sd-gutter, 32px);
    right: auto;
    bottom: calc(var(--sd-foot-buttons, 90px) + 8px + var(--ctl-lift));
    text-align: left;
}
#battleScreen[data-foot="above"][data-foot-note="above"] #winnerCelebration.classlings .results-saved-note {
    left: auto;
    right: var(--sd-gutter, 32px);
    bottom: calc(var(--sd-foot-buttons, 90px) + 8px + var(--ctl-h) + var(--ctl-lift) + 2px);
    height: auto;
    text-align: right;
}
#battleScreen[data-foot-rows="2"] #winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn) { flex: 1 1 100%; }

@media (prefers-reduced-motion: reduce) {
    .classlings-card,
    #battleArena.classlings .battle-control-btn,
    #winnerCelebration.classlings .winner-actions :is(#closeCelebrationBtn, #viewLeaderboardBtn),
    #winnerCelebration.classlings #undoMatchBtn { transition: none; }
    .classlings-card.is-big.grows,
    .cl-podium,
    .cl-next { animation: none; }
}

/* Skip, beside Pause and Music while the mystery boxes rain down (battle.js runBoxRain); gone after. */
#battleArena.classlings #skipIntroBtn { order: 2; }
#battleArena.classlings #skipIntroBtn[hidden] { display: none; }
/* Its arrow is 8 art pixels wide: a step bigger, and as tall as the others' pictures take. */
#battleArena.classlings #skipIntroBtn > svg {
    width: calc(8px * (var(--sd-icon, 3) + 1));
    height: calc(8px * (var(--sd-icon, 3) + 1));
    margin-block: calc((4px * var(--sd-icon, 3) - 8px) / 2);
}

/* The gold "+1 level for Kaia" button (classlings-stage.js showGiveButton), as the Table showdown's: the
   teacher gives the winner their level in front of the class, then Results takes its place. */
#battleArena.classlings .cl-give-btn { white-space: nowrap; }
#battleArena.classlings .cl-give-chip {
    display: inline-grid;
    place-items: center;
    padding: 4px 10px;
    font-weight: 700;
    color: var(--cla-ink, #1e1b3a);
    background: var(--cla-lime, #7ed957);
    border: 2px solid var(--cla-lime-deep, #3e9a2a);
    border-radius: 12px;
}
#battleArena.classlings .cl-give-btn:disabled { opacity: 0.7; }
/* After a save that did not work it says just "Try again" (the +1 is still in the toast's words and the button's
   place), so it and Results fit side by side on a phone. */
#battleArena.classlings .cl-give-btn.is-failed .cl-give-chip { display: none; }

/* "+1 level" rising over the winner on the stage once it's given. */
.cl-level-pop {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    gap: calc(8 * var(--u));
    padding: calc(6 * var(--u)) calc(16 * var(--u));
    font: 600 calc(30 * var(--u)) / 1 var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    color: var(--cla-ink, #1e1b3a);
    white-space: nowrap;
    background: var(--cla-lime, #7ed957);
    border: var(--sd-edge, 3px) solid var(--cla-lime-deep, #3e9a2a);
    border-radius: calc(16 * var(--u));
    transform: translate(-50%, -100%);
    animation: cl-level-pop 0.9s cubic-bezier(0.28, 1.6, 0.5, 1) both;
    pointer-events: none;
}
.cl-level-pop b { font-weight: 700; }
@keyframes cl-level-pop {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
    100% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
#battleArena.classlings.is-results .cl-level-pop { display: none; }
@media (prefers-reduced-motion: reduce) {
    .cl-level-pop { animation: none; }
}

/* A phone, or a window too narrow for the class down the sides: the gold button shares the row with Music and takes
   what it leaves. It stays 72 px tall with its 28 px words, which wrap (a name stays whole) onto a second line. */
#battleArena.classlings:is([data-roster="below"], [data-roster="none"]) .battle-controls .cl-results-btn {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    margin-left: 0;
    padding: 0 20px;
    line-height: 1.1;
    white-space: normal;
    text-align: left;
}
#battleArena.classlings:is([data-roster="below"], [data-roster="none"]) .cl-give-btn > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ the Showdown's questions: End, and Undo */

/* "End the Showdown now?" and "Undo this Showdown?" ask in the Start question's own box (js/showdownConfirm.js,
   whose look is the Cup's: classlings-app.css). They throw something away, so the answer is the standard danger
   red: pale red with a deep red edge and base. */
body.classlings-app #confirmShowdownModal .action-btn.is-danger,
body.classlings-app #confirmShowdownModal .action-btn.is-danger:hover {
    color: var(--ctl-ink);
    background: var(--ctl-danger);
    border-color: var(--ctl-danger-deep);
    box-shadow: 0 var(--ctl-lift) 0 var(--ctl-danger-deep);
}
body.classlings-app #confirmShowdownModal .action-btn.is-danger:active {
    box-shadow: 0 0 0 var(--ctl-danger-deep);
}
/* Kit and Cub on the sign's gold are the Classlings look's: a class without it has no picture here. */
body:not(.classlings-app) #confirmShowdownModal .cla-showdown-pair { display: none; }