/* The Classlings arena: the class roster down both sides, the battle's pills
   and buttons, the countdown, the final-two banner and the results. It only
   applies to classes with Classlings on (#battleArena.classlings and
   #winnerCelebration.classlings); every other class keeps today's arena. */

#battleArena.classlings {
    --cl-ink: #2d3436;
    --cl-card: #fffefb;
    --cl-coral: #e17055;
    --cl-coral-strong: #c9573d;
    --cl-shadow: #cbd0cd;
    background: #3b82c4;
}

/* The countdown: big white numbers with an ink edge, over the field. */
#battleArena.classlings .battle-overlay { background: transparent; }
#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, 120px)/1 Fredoka, 'Nunito', system-ui, sans-serif;
    color: #fff;
    -webkit-text-stroke: 6px var(--cl-ink);
    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 Fredoka, system-ui, sans-serif;
    -webkit-text-stroke: 0;
    color: var(--cl-ink);
    background: var(--cl-card);
    border: 2px solid var(--cl-ink);
    border-radius: 16px;
    padding: 16px 22px;
}

/* How many are left, and the pause and end buttons, inside the field. */
#battleArena.classlings .battle-info {
    left: calc(var(--rail-w, 0px) + 12px);
    top: 12px;
    transform: none;
    padding: 7px 12px;
    background: rgba(45, 52, 54, 0.82);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
}
#battleArena.classlings .remaining-count {
    font: 700 14px/1 Inter, system-ui, sans-serif;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
#battleArena.classlings .remaining-count::before { content: none; }
#battleArena.classlings .battle-controls {
    top: 12px;
    right: calc(var(--rail-w, 0px) + 12px);
    bottom: auto;
    left: auto;
    transform: none;
    padding: 0;
    gap: 8px;
    background: none;
    border: 0;
    box-shadow: none;
}
#battleArena.classlings .battle-control-btn,
#battleArena.classlings .battle-control-btn:hover:not(:disabled) {
    color: var(--cl-ink);
    background: var(--cl-card);
    border: 2px solid var(--cl-ink);
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--cl-ink);
    transform: none;
}
#battleArena.classlings .battle-control-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cl-ink); }
#battleArena.classlings .battle-control-btn.danger,
#battleArena.classlings .battle-control-btn.danger:hover:not(:disabled) { color: #fff; background: var(--cl-coral); }
#battleArena.classlings .battle-control-btn:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }
#battleArena.classlings .classlings-music-btn[aria-pressed="true"],
#battleArena.classlings .classlings-music-btn[aria-pressed="true"]:hover:not(:disabled) { background: #ffd24a; }

/* A practice battle (?classlingsPreview=1) says so, under the count. */
.classlings-practice {
    position: absolute;
    z-index: 5;
    top: 52px;
    left: calc(var(--rail-w, 0px) + 12px);
    padding: 6px 11px;
    border: 2px solid #2d3436;
    border-radius: 999px;
    background: #ffd24a;
    color: #2d3436;
    font: 700 13px/1 Inter, system-ui, sans-serif;
    pointer-events: none;
}

/* The roster shows who is out, so the feed is kept for screen readers only. */
#battleArena.classlings.with-rails #eliminationFeed {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#battleArena.classlings:not(.with-rails) #eliminationFeed { top: 56px; left: 12px; }
#battleArena.classlings:not(.with-rails) #eliminationFeed div {
    font: 700 12px/1 Inter, system-ui, sans-serif;
    color: #fff;
    background: rgba(45, 52, 54, 0.82);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    padding: 6px 9px;
}

/* The roster: every pupil's Classling, name and hearts, A to Z down both sides. */
.classlings-rail {
    position: absolute;
    z-index: 4;
    display: none;
    box-sizing: border-box;
    width: var(--rail-w, 150px);
    margin: 0;
    padding: 6px;
    list-style: none;
    align-content: center;
    gap: 3px;
    grid-auto-rows: var(--row, 36px);
    overflow: hidden;
}
#battleArena.classlings.with-rails .classlings-rail { display: grid; }
.classlings-rail.left { left: 0; }
.classlings-rail.right { right: 0; }
.classlings-rail li { min-height: 0; }
.classlings-card {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 0 7px 0 4px;
    background: #fffefb;
    border: 2px solid #2d3436;
    border-radius: 9px;
    box-shadow: inset 5px 0 0 var(--c, #2d3436);
    color: #2d3436;
    font: 600 var(--fs, 14px)/1 Fredoka, 'Nunito', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s, background-color 0.12s;
}
.classlings-card canvas {
    height: calc(var(--row, 36px) - 12px);
    aspect-ratio: 1;
    margin-left: 3px;
    image-rendering: pixelated;
}
.classlings-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classlings-card .hp {
    font: 800 calc(var(--fs, 14px) * 0.86)/1 Inter, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #b32139;
    white-space: nowrap;
}
/* Narrow rails: the hearts go under the name. Short rows: no faces. */
.classlings-rail.compact .classlings-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    row-gap: 0;
}
.classlings-rail.compact .classlings-card canvas { grid-row: 1 / span 2; }
.classlings-rail.compact .classlings-card .nm { align-self: end; }
.classlings-rail.compact .classlings-card .hp { align-self: start; font-size: calc(var(--fs, 14px) * 0.78); }
.classlings-rail.tiny .classlings-card { grid-template-columns: minmax(0, 1fr) auto; padding-left: 9px; }
.classlings-rail.tiny .classlings-card canvas { display: none; }
#battleArena.classlings[data-roster="below"] .classlings-rail { align-content: start; }
.classlings-card.hit { background: #ffe1db; transform: translateX(3px); }
.classlings-card.out { background: #d9d3c6; box-shadow: none; color: #6f6a61; }
.classlings-card.out .hp { color: #6f6a61; }
.classlings-card.win { background: #fff3c4; }
.classlings-card.focus,
.classlings-card:focus-visible { outline: 3px solid #ffd24a; outline-offset: 1px; }

/* The final two: a banner slides in with both of them facing off. */
.classlings-versus {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 18px 10px;
    background: #fffefb;
    border: 2px solid #2d3436;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #cbd0cd;
    pointer-events: none;
    animation: classlings-vs-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.classlings-versus.out { animation: classlings-vs-out 0.3s ease-in both; }
.classlings-versus[hidden] { display: none; }
.classlings-versus .vs-eyebrow {
    font: 700 11px/1 Inter, system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c9573d;
}
.classlings-versus .vs-row { display: flex; align-items: center; gap: 12px; }
.classlings-versus .vs-side { display: grid; justify-items: center; gap: 2px; }
.classlings-versus .vs-side canvas { width: 96px; height: 72px; image-rendering: pixelated; }
.classlings-versus .vs-side strong { font: 600 16px/1.1 Fredoka, system-ui, sans-serif; color: #2d3436; }
.classlings-versus .vs-word {
    font: 700 30px/1 Fredoka, system-ui, sans-serif;
    color: #fff;
    -webkit-text-stroke: 4px #2d3436;
    paint-order: stroke fill;
}
@keyframes classlings-vs-in { from { transform: translate(-50%, -140%); } to { transform: translate(-50%, 0); } }
@keyframes classlings-vs-out { to { transform: translate(-50%, -140%); opacity: 0; } }

/* The winner's moment, in the middle of the field. */
#battleArena.classlings #winnerHold {
    justify-content: center;
    padding: 0 16px;
    gap: 6px;
    background: none;
}
#battleArena.classlings #winnerHold strong {
    font: 700 clamp(34px, 6vw, 64px)/1 Fredoka, system-ui, sans-serif;
    color: #fff;
    -webkit-text-stroke: 5px #2d3436;
    paint-order: stroke fill;
    text-shadow: none;
}
#battleArena.classlings #winnerHold span {
    font: 700 15px/1.2 Inter, system-ui, sans-serif;
    color: #fff;
    background: rgba(45, 52, 54, 0.82);
    border-radius: 999px;
    padding: 6px 12px;
}

/* The results: the top three on grass under a blue sky, over the dimmed arena. */
#winnerCelebration.classlings { background: rgba(45, 52, 54, 0.84); }
#winnerCelebration.classlings .finale-eyebrow { background: #fffefb; color: #c9573d; }
#winnerCelebration.classlings #finaleResults h2,
#winnerCelebration.classlings .victory-caption { color: #fff; }
#winnerCelebration.classlings .results-saved-note { color: #e8e3d8 !important; }
.classlings-places {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 190px));
    justify-content: center;
    align-items: end;
    gap: 14px;
    margin: 6px 0 4px;
}
.classlings-place {
    display: grid;
    gap: 4px;
    padding: 8px;
    background: #fffefb;
    border: 2px solid #2d3436;
    border-radius: 14px;
    box-shadow: 4px 4px 0 #2d3436;
    text-align: center;
    animation: podium-in 0.65s both;
}
.classlings-place canvas {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    image-rendering: pixelated;
}
.classlings-place strong { font: 600 18px/1.2 Fredoka, system-ui, sans-serif; color: #2d3436; overflow-wrap: anywhere; }
.classlings-place span { font-size: 13px; color: #636e72; }
.classlings-place .rank {
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c9573d;
}
.classlings-place.first { order: 2; transform: translateY(-14px); animation-delay: 0s; }
.classlings-place.second { order: 1; animation-delay: 0.15s; }
.classlings-place.third { order: 3; animation-delay: 0.3s; }
.classlings-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    image-rendering: pixelated;
}

@media (max-width: 640px) {
    .classlings-places { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .classlings-place span:not(.rank) { display: none; }
    .classlings-place strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .classlings-versus,
    .classlings-versus.out,
    .classlings-place { animation: none; }
    .classlings-card { transition: none; }
}