/* The Table showdown in the Classlings look (js/tableShowdown/scene.js): the teacher's picks of 4 October 2026,
   the "Laser ships" mock-up. The strip along the top (the same as the Showdown's), the tables' cards down both
   sides, the field in the middle (deep space, drawn on the canvas), and Pause, Music, Skip and End along the
   bottom, then the gold button that gives the winners their levels, and Done. Sizes come from
   js/arena/arena-layout.js through the --sd-* sizes the scene sets on the arena; --u is one pixel of the design,
   scaled for this screen. Everything moving is drawn on one canvas over it all (.ts-stage). */

#tableShowdownArena.ts-arena {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--cla-ink, #1e1b3a);
    --ts-ink: var(--cla-ink, #1e1b3a);
    --ts-display: var(--cla-display, Fredoka, 'Nunito', system-ui, sans-serif);
    --ts-spring: cubic-bezier(0.28, 1.9, 0.5, 1);
}
#tableShowdownArena.ts-arena[hidden] { display: none; }
#tableShowdownArena.ts-arena [hidden] { display: none !important; }

/* On a small screen the title keeps the left (the strip itself is the Showdown's, .classlings-strip). */
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .classlings-strip .cl-title {
    left: var(--sd-gutter, 12px);
    top: 8px;
    transform: none;
}

.ts-practice {
    position: absolute;
    z-index: 7;
    top: calc(16 * var(--u));
    left: var(--sd-gutter, 32px);
    margin: 0;
    padding: 6px 12px;
    border: 2px solid var(--ts-ink);
    border-radius: 999px;
    background: var(--cla-gold, #f7c230);
    font: 700 calc(14 * var(--u)) / 1 var(--cla-ui, 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif);
    pointer-events: none;
}

.ts-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ the tables down both sides */

.ts-rail {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
}
.ts-list {
    display: grid;
    gap: calc(8 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}
/* A table's card: its colour, its emblem, its name and hearts, and the Classlings who sit there (they're drawn on
   the canvas over each .ts-face, so they can hop out of it). */
.ts-card {
    display: grid;
    gap: calc(4 * var(--u));
    padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
    background: var(--tab-tint);
    border: var(--sd-edge, 3px) solid var(--tab-deep);
    border-radius: calc(16 * var(--u));
    transition: box-shadow 160ms ease-out, filter 400ms, opacity 400ms;
}
.ts-card-top {
    display: grid;
    grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(8 * var(--u));
}
.ts-badge {
    display: grid;
    place-items: center;
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
    box-sizing: border-box;
    background: #fff;
    border: 2px solid var(--tab-deep);
    border-radius: calc(10 * var(--u));
    font: 700 calc(20 * var(--u)) / 1 var(--ts-display);
}
.ts-badge.is-plain {
    color: var(--tab-ink, #1e1b3a);
    background: var(--tab);
}
.ts-badge img {
    display: block;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    image-rendering: pixelated;
}
/* A table's name is never cut short with "…" (the teacher, 7 Oct) and a word is never split: it wraps at a space,
   and a name whose longest word doesn't fit beside the picture and the hearts goes under them on the card's own
   line (.is-long, set by scene.js), and only then steps down in size. */
.ts-name {
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
    font: 700 calc(22 * var(--u)) / 1.05 var(--ts-display);
}
.ts-card.is-long .ts-card-top {
    grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr);
    grid-template-areas: "badge hp" "name name";
}
.ts-card.is-long .ts-badge { grid-area: badge; }
.ts-card.is-long .ts-name { grid-area: name; }
.ts-card.is-long .ts-hp { grid-area: hp; justify-self: end; }
.ts-hp {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--u));
    font: 700 calc(22 * var(--u)) / 1 var(--ts-display);
    font-variant-numeric: tabular-nums;
}
.ts-heart {
    width: calc(21 * var(--u));
    height: calc(18 * var(--u));
    color: #ef4444;
}
.ts-kids {
    display: flex;
    flex-wrap: wrap;
    min-height: calc(33 * var(--u));
}
.ts-face {
    display: block;
    flex: none;
    width: calc(31 * var(--u));
    height: calc(33 * var(--u));
}
.ts-card.is-compact { padding-top: calc(6 * var(--u)); padding-bottom: calc(6 * var(--u)); }
.ts-card.is-compact .ts-kids { display: none; }
/* A table that's out: its card goes grey. The winners' glows gold. */
.ts-card.is-out { filter: grayscale(1); opacity: 0.55; }
.ts-card.is-win { box-shadow: 0 0 0 calc(4 * var(--u)) var(--cla-gold, #f7c230), 0 0 0 calc(7 * var(--u)) var(--cla-gold-deep, #c98a12); }

/* ------------------------------------------------------------------ the field, and the canvas over everything */

.ts-field {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    border: var(--sd-edge, 3px) solid var(--ts-ink);
    border-radius: calc(28 * var(--u));
    background: #1b1740;
}
.ts-stage {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    pointer-events: none;
    image-rendering: pixelated;
}
/* "3, 2, 1, GO!": big white numbers with an ink edge, over the middle of the field. */
.ts-count {
    position: absolute;
    z-index: 6;
    display: grid;
    place-items: center;
    pointer-events: none;
    font: 700 calc(120 * var(--u)) / 1 var(--ts-display);
    color: #fff;
    -webkit-text-stroke: calc(6 * var(--u)) var(--ts-ink);
    paint-order: stroke fill;
}
.ts-count span { display: block; transform: scale(var(--pop, 1)); }

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

.ts-dock {
    position: absolute;
    z-index: 15;
    left: var(--sd-gutter, 32px);
    right: var(--sd-gutter, 32px);
    bottom: var(--sd-soil, 16px);
    display: flex;
    align-items: flex-end;
    gap: var(--sd-dock-gap, 16px);
    pointer-events: none;
}
.ts-dock > * { pointer-events: auto; flex: none; }

/* Toy buttons, the Showdown's (and 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. 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, short or tall (the identity check of 9 October, findings 7 and 19). */
.ts-dock .battle-control-btn {
    --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);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
.ts-dock .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;
}
#tableShowdownArena .ts-dock .battle-control-btn:focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
.ts-dock .classlings-music-btn[aria-pressed="true"] { background: var(--cla-gold-tint, #fff3c4); }
.ts-dock .battle-control-btn > svg {
    display: block;
    width: calc(12px * var(--sd-icon, 3));
    height: calc(12px * var(--sd-icon, 3));
}
.ts-dock .battle-control-btn > svg.ts-ic-end {
    width: calc(8px * (var(--sd-icon, 3) + 1));
    height: calc(7px * (var(--sd-icon, 3) + 1));
    margin-block: calc((5px * var(--sd-icon, 3) - 7px) / 2);
}
.ts-dock .battle-control-btn > .cla-label { display: block; white-space: nowrap; font-size: 18px; }
#tableShowdownArena.icons-only .ts-dock .battle-control-btn > .cla-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
/* Pause shows Play while it's paused. */
.ts-dock .ts-pause > .ts-ic-play,
.ts-dock .ts-pause > .ts-label-play { display: none; }
.ts-dock .ts-pause[data-paused="true"] > .ts-ic-pause,
.ts-dock .ts-pause[data-paused="true"] > .ts-label-pause { display: none; }
.ts-dock .ts-pause[data-paused="true"] > .ts-ic-play,
.ts-dock .ts-pause[data-paused="true"] > .ts-label-play { display: block; }

/* Pause, Music and Skip at the left; End at the right, and the winners' buttons in its place. */
.ts-pause { order: 0; }
.ts-dock .classlings-music-btn { order: 1; }
.ts-skip { order: 2; }
.ts-end { order: 3; margin-left: auto; }
.ts-res {
    order: 4;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* The gold button that gives the winners their levels (as today's "Award +1 Level"), and Done: the big buttons of
   shared/css/classlings-controls.css, 72 px, corners 28, a 7 px base, 28 px words, white until the levels are given
   and gold for the main action; on every screen (identity check 5 and 19). */
.ts-give,
.ts-done {
    --ring-lift: var(--ctl-big-lift); /* the focus ring goes round its lift too (classlings-controls.css) */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: var(--ctl-big-h);
    min-height: var(--ctl-big-h);
    margin-bottom: var(--ctl-big-lift);
    padding: 0 32px;
    color: var(--ctl-ink);
    font: var(--ctl-big-font);
    letter-spacing: 0.01em;
    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);
    cursor: pointer;
    transition: transform var(--ctl-settle) var(--ctl-spring), box-shadow var(--ctl-settle) var(--ctl-spring);
}
.ts-give,
.ts-done.is-go {
    background: var(--ctl-gold);
    border-color: var(--ctl-gold-deep);
    box-shadow: 0 var(--ctl-big-lift) 0 var(--ctl-gold-deep);
}
.ts-give:active:not(:disabled),
.ts-done:active {
    transform: translateY(var(--ctl-big-lift));
    box-shadow: 0 0 0 var(--ctl-ink);
    transition-duration: var(--ctl-press);
    transition-timing-function: ease-out;
}
.ts-give:active:not(:disabled),
.ts-done.is-go:active { box-shadow: 0 0 0 var(--ctl-gold-deep); }
.ts-give:disabled { opacity: 0.7; cursor: wait; }
#tableShowdownArena .ts-give:focus-visible,
#tableShowdownArena .ts-done:focus-visible { outline: var(--ctl-focus); outline-offset: var(--ctl-focus-gap); }
.ts-up {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 36px;
    margin-left: -10px;
    padding: 0 6px;
    font: 700 24px / 1 var(--ts-display);
    background: var(--cla-lime, #7ed957);
    border: 2px solid var(--cla-lime-deep, #3e9a2a);
    border-radius: 10px;
}
.ts-given {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 8px 14px;
    color: var(--cla-lime-deep, #3e9a2a);
    font: 600 max(14px, calc(20 * var(--u))) / 1.1 var(--ts-display);
    background: var(--cla-lime-tint, #e5f8da);
    border: 2px solid var(--cla-lime-deep, #3e9a2a);
    border-radius: 14px;
}
.ts-given svg { flex: none; width: 24px; height: 24px; }

/* A phone, or a window too narrow for the class down the sides: the winners' buttons share what the Music button
   leaves of the width instead of running off the right. The words of the gold button wrap (the table's name stays
   whole), Done stays beside it, and the line that says the levels were given wraps too. */
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-dock {
    flex-wrap: wrap;
}
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-res {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
}
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-give {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
}
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-give-words {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-given {
    flex: 1 1 auto;
    min-width: 0;
}
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-done {
    flex: none;
}

/* The big buttons keep their 28 px words and 72 px on a phone, so the gold one's words go on two lines, with a little
   less room at its sides; and where the screen is tall and narrow (the class under the field) the winners' buttons
   stand in two rows: the gold one across the screen, then Music, how it went and Done. arena-layout.js makes room
   for both rows (winnersRows). */
#tableShowdownArena.ts-arena:is([data-roster="below"], [data-roster="none"]) .ts-give {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.1;
}
#tableShowdownArena.ts-arena[data-roster="below"] .ts-res { display: contents; }
#tableShowdownArena.ts-arena[data-roster="below"] .ts-give { order: -1; flex: 1 1 100%; }
#tableShowdownArena.ts-arena[data-roster="below"] .ts-given { order: 2; }
#tableShowdownArena.ts-arena[data-roster="below"] .ts-done { order: 3; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .ts-dock .battle-control-btn,
    .ts-give,
    .ts-done { transition: none; }
}

/* The old arena is hidden while the Classlings Table showdown runs (tableBattle.js sets [hidden]); its
   display: flex mustn't undo that, or its old Pause and End show behind the logo. */
#tableBattleScreen #tableBattleArena[hidden] {
    display: none;
}