/**
 * Filename: class-picker.css
 * Version:  2.0.0-dev (becomes 2.0.0 when Step 1 passes its gate)
 * Location: /seriously-scientific-theme/css/class-picker.css
 * Styles for the Class Picker. Loaded on /class-picker/ only, by
 * page-class-picker.php.
 *
 * CHANGELOG
 * 2.0.0-dev  1 October 2026, the private pages (/snapology/ and
 *            /ismart/): their password box, styled like the picker.
 * 2.0.0-dev  1 October 2026, Deyne's second look: Space's Andromeda
 *            picture recut with its core centred and no stepped
 *            edges, so the black fade and the credit line are gone
 *            (credits move to a credits page); the LED board's A and
 *            B look pressable, with a hover glow and a press.
 * 2.0.0-dev  1 October 2026, from Deyne's review: the classroom corner
 *            above the stage (z-index), so Leave classroom mode gets
 *            its click; fitted pictures in classroom mode; a slight
 *            blur behind the panel on every screen, except on smart TV
 *            browsers (cp-tv); classroom looks and inner boxes a little
 *            see-through; theme cards one height; spacing for the
 *            Sound and Music buttons. Space: the Andromeda Galaxy
 *            behind the comet, with its credit. Robot: the control
 *            room screens and their animations.
 * 2.0.0-dev  30 September 2026, the Lottery draw theme: its canvas
 *            sizing and its look (lacquer red, a brass frame, gold
 *            leaf lettering for the title).
 * 2.0.0-dev  30 September 2026, Space redone: the canvas sizing, and
 *            icy crystal lettering for the Space look's title. The old
 *            comet, warp and ring rules are gone.
 * 2.0.0-dev  30 September 2026, fixes from Deyne's review: buttons in
 *            one row on the same centre line, Back on the right;
 *            Classroom mode in the panel's top right corner; intro
 *            line on the start screen only; LED board and Robot
 *            frames a little see-through on the normal page with
 *            solid insides, every look solid in classroom mode; the
 *            robot sized in em from the screen height and the board
 *            narrower on the normal page, so play screens fit.
 * 2.0.0-dev  30 September 2026, Step 4: the Space theme and its look.
 * 2.0.0-dev  30 September 2026, Step 2: the "How to add your class"
 *            help block.
 * 2.0.0-dev  30 September 2026, Step 2: classroom mode centres the end
 *            screens and makes them big, for the TV.
 * 2.0.0-dev  30 September 2026, Step 2: the theme on every screen: a
 *            circuit board frame for the LED board, a riveted steel
 *            plate for the Robot, titles drawn as dots, themed cards;
 *            previews in the theme gallery. Pressed toggles are
 *            orange and yellow, not blue.
 * 2.0.0-dev  30 September 2026, Step 2c: the Robot theme.
 * 2.0.0-dev  30 September 2026, Step 2b: themes with artwork, and the
 *            LED board theme.
 * 2.0.0-dev  30 September 2026, Step 2a: the Theme choice on the
 *            setup screen.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 17: the class files
 *            block and the row of saved classes.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 15: the make teams
 *            form, rule lists and the team board.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 13: the copy fallback
 *            box and the register history list.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 12: the register's
 *            progress line, Absent button, carry-on button and end
 *            screen summary.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 11: classroom mode,
 *            the full-screen layout that works without fullscreen.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 10: the Sound button,
 *            the status message and the in-page confirm.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 9: play screens, the
 *            pick-style toggle, big buttons and the picked-so-far
 *            strip.
 * 2.0.0-dev  30 September 2026, Step 1 lesson 8: the reveal box, its
 *            idle, revealing and landed states, team badges and the
 *            Plain theme.
 * 2.0.0-dev  29 September 2026, Step 1 lesson 6: the notice that
 *            says lists won't be saved when storage is blocked.
 * 2.0.0-dev  29 September 2026, Step 1 lesson 5: the start and class
 *            setup screens, their buttons and a strong focus ring.
 * 2.0.0-dev  29 September 2026, Step 1 lesson 4: the frame-rate line
 *            in the diagnostics panel.
 * 2.0.0-dev  29 September 2026, Step 1 lesson 3: the diagnostics
 *            panel.
 * 2.0.0-dev  29 September 2026, Step 1 lesson 2: the see-through
 *            panel, its heading and the intro line. Side gutters
 *            at laptop widths, where max-width alone left none.
 */

/* The panel: a see-through card over the Cosmos nebula, with a
   slight blur behind it on every screen (Deyne, 1 October). The
   nebula moves, so the blur is redrawn all the time, and cheap smart
   TV browsers struggle with that: class-picker.js marks a TV browser
   with cp-tv, and there the panel is see-through with no blur. */
.cp-panel {
    width: calc(100% - 3rem);
    max-width: var(--site-w, 1400px);
    min-height: 60vh;
    margin: 2rem auto;
    padding: 2rem;
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(var(--lunar-rock-rgb), 0.75), rgba(var(--deep-space-rgb), 0.35));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

html.cp-tv .cp-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cp-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    color: var(--starlight);
    margin: 0 0 0.5rem;
}

.cp-intro {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(247, 250, 252, 0.75);
    margin: 0;
}

/* Phones: keep a gutter each side so the card's edges show. */
@media (max-width: 640px) {
    .cp-panel {
        width: calc(100% - 2rem);
        margin: 1rem auto;
        padding: 1.25rem;
    }
}

/* ------------------------------------------------------------
   Diagnostics panel (Step 1 lessons 3 and 4)
   A measuring tool for the TV, not part of the picker itself.
   ------------------------------------------------------------ */
.cp-diag {
    max-width: 36rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--deep-space-rgb), 0.6);
    border: 1px solid rgba(var(--highlight-yellow-rgb), 0.5);
    border-radius: 8px;
}

.cp-diag-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--highlight-yellow);
    margin: 0 0 0.25rem;
}

.cp-diag-help {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: rgba(247, 250, 252, 0.7);
    margin: 0 0 0.75rem;
}

.cp-diag[hidden] {
    display: none;
}

.cp-diag-fps {
    margin: 0 0 0.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: rgba(247, 250, 252, 0.7);
}

.cp-diag-fps-num {
    margin-right: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--starlight);
}

.cp-diag-keys {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: var(--starlight);
}

.cp-diag-keys li {
    padding: 0.2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* The newest key, highlighted so it stands out on a TV. */
.cp-diag-keys li:first-child {
    border-top: none;
    color: var(--highlight-yellow);
}

/* ------------------------------------------------------------
   Screens (Step 1 lesson 5)
   Buttons are at least 64px tall, as the brief asks for a TV.
   Spacing uses margins, not flex gap, for older TV browsers.
   ------------------------------------------------------------ */
.cp-stage {
    margin-top: 1.5rem;
}

.cp-screen-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--starlight);
    margin: 0 0 0.5rem;
}

.cp-class-bar {
    margin-bottom: 1.5rem;
}

.cp-class-now {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.25rem 0.75rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: rgba(247, 250, 252, 0.85);
}

.cp-class-now strong {
    color: var(--starlight);
}

.cp-class-bar .cp-btn {
    vertical-align: middle;
    margin-bottom: 0.75rem;
}

.cp-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cp-mode {
    display: block;
    width: 100%;
    min-height: 6rem;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: var(--starlight);
    background: rgba(var(--deep-space-rgb), 0.55);
    border: 2px solid rgba(var(--supernova-orange-rgb), 0.6);
    border-radius: 12px;
    cursor: pointer;
}

.cp-mode:hover {
    border-color: var(--supernova-orange);
    background: rgba(var(--supernova-orange-rgb), 0.18);
}

.cp-mode-name,
.cp-mode-desc {
    display: block;
}

.cp-mode-name {
    font-size: 1.35rem;
    font-weight: 700;
}

.cp-mode-desc {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: rgba(247, 250, 252, 0.7);
}

.cp-btn {
    min-height: 4rem;
    padding: 0.75rem 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--starlight);
    background: transparent;
    border: 2px solid rgba(247, 250, 252, 0.35);
    border-radius: 8px;
    cursor: pointer;
}

.cp-btn:hover {
    border-color: var(--starlight);
}

.cp-btn-main {
    background: var(--supernova-orange);
    border-color: var(--supernova-orange);
}

.cp-btn-main:hover {
    background: var(--supernova-orange-light);
    border-color: var(--supernova-orange-light);
}

.cp-label {
    display: block;
    margin: 1rem 0 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(247, 250, 252, 0.85);
}

.cp-input,
.cp-textarea {
    display: block;
    width: 100%;
    max-width: 36rem;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--starlight);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.cp-textarea {
    min-height: 14rem;
    resize: vertical;
}

/* The password box on a private page (class-picker-private.php):
   WordPress's own form, dressed like the picker's fields and its main
   button. */
.cp-password p {
    margin: 0 0 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--starlight);
}

.cp-password label {
    display: block;
    font-weight: 700;
}

.cp-password input[type="password"] {
    display: block;
    width: 100%;
    max-width: 24rem;
    box-sizing: border-box;
    margin: 0.4rem 0 1rem;
    padding: 0.7rem 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--starlight);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.cp-password input[type="submit"] {
    min-height: 3rem;
    padding: 0.6rem 1.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--starlight);
    background: var(--supernova-orange);
    border: 2px solid var(--supernova-orange);
    border-radius: 8px;
    cursor: pointer;
}

.cp-password input[type="submit"]:hover {
    background: var(--supernova-orange-light);
    border-color: var(--supernova-orange-light);
}

.cp-count,
.cp-note,
.cp-error {
    margin: 0.6rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
}

/* Not blue: on this site blue means a link that takes you somewhere
   else. The picker's own highlights are yellow or orange. */
.cp-count {
    color: var(--highlight-yellow);
}

.cp-note {
    color: rgba(247, 250, 252, 0.65);
}

.cp-error {
    font-weight: 700;
    color: #fc8181;
}

.cp-error[hidden] {
    display: none;
}

.cp-actions {
    margin-top: 1.5rem;
}

.cp-actions .cp-btn {
    margin: 0 0.75rem 0.75rem 0;
}

/* One row, every button on the same centre line whatever its size,
   and a play screen's Back button pushed over to the right. */
.cp-actions {
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
}

.cp-actions .cp-btn-back {
    margin-left: auto;
    margin-right: 0;
}

/* A strong ring on whatever has focus, because a TV remote works by
   moving focus. Browsers that can tell a mouse click from a key
   press hide it after clicks. Older TV browsers don't understand
   :focus-visible, so they skip that rule and keep the ring. */
.cp-panel button:focus,
.cp-panel input:focus,
.cp-panel textarea:focus {
    outline: 4px solid var(--highlight-yellow);
    outline-offset: 3px;
}

.cp-panel button:focus:not(:focus-visible) {
    outline: none;
}

@media (max-width: 640px) {
    .cp-modes {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   Storage notice (Step 1 lesson 6)
   Only shows when the browser blocks storage.
   ------------------------------------------------------------ */
.cp-store-note {
    max-width: 36rem;
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--starlight);
    background: rgba(var(--highlight-yellow-rgb), 0.12);
    border-left: 4px solid var(--highlight-yellow);
    border-radius: 4px;
}

.cp-store-note[hidden] {
    display: none;
}

/* ------------------------------------------------------------
   The reveal box (Step 1 lesson 8)
   The engine's part of the theme contract: the layout every theme
   shares. The name is at least 8% of the screen height, as the
   brief asks. Each size has a plain fallback first, for older TV
   browsers that don't understand clamp().
   ------------------------------------------------------------ */
.cp-reveal {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 16rem;
    min-height: 34vh;
    margin: 0 0 1.25rem;
    padding: 1.5rem;
    box-sizing: border-box;
    text-align: center;
    background: rgba(var(--deep-space-rgb), 0.55);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.cp-reveal-prompt {
    display: none;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: rgba(247, 250, 252, 0.7);
}

.cp-reveal-name {
    margin: 0;
    padding: 0.1em 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 4.5rem;
    font-size: clamp(3rem, 13vh, 9rem);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--starlight);
}

.cp-reveal-team {
    margin: 0.75rem 0 0;
}

.cp-reveal-team[hidden] {
    display: none;
}

/* Idle: only the prompt shows. */
.cp-idle .cp-reveal-prompt {
    display: block;
}

.cp-idle .cp-reveal-name,
.cp-idle .cp-reveal-team {
    display: none;
}

/* A team badge: shape, colour and name together, never colour
   alone. The border colour is set inline from the theme. */
.cp-team-badge {
    display: inline-block;
    padding: 0.3em 0.9em;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    font-size: clamp(1.5rem, 6vh, 3.5rem);
    line-height: 1.2;
    color: var(--starlight);
    background: rgba(0, 0, 0, 0.35);
    border: 4px solid;
    border-radius: 999px;
}

.cp-icon {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: -0.12em;
}

/* Reduced motion: no transitions or animations in any theme. The
   engine already skips the show; this catches anything left. */
@media (prefers-reduced-motion: reduce) {
    .cp-reveal,
    .cp-reveal * {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------
   Plain theme (Step 1 lesson 8)
   Big text, no show: the name is hidden while revealing and
   simply appears when it lands. Opacity only, so it costs a slow
   TV almost nothing.
   ------------------------------------------------------------ */
.cp-theme-plain.cp-idle {
    border-style: dashed;
}

.cp-theme-plain.cp-revealing .cp-reveal-name,
.cp-theme-plain.cp-revealing .cp-reveal-team {
    opacity: 0;
}

.cp-theme-plain.cp-landed .cp-reveal-name,
.cp-theme-plain.cp-landed .cp-reveal-team {
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

/* ------------------------------------------------------------
   Play screens (Step 1 lesson 9)
   The bar above the reveal box, the big buttons under it and the
   picked-so-far strip.
   ------------------------------------------------------------ */
.cp-play-bar {
    margin-bottom: 1rem;
}

.cp-play-class {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.25rem 0.75rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--starlight);
}

.cp-toggle {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.75rem;
}

.cp-toggle-btn {
    min-height: 3rem;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.5rem 1.1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(247, 250, 252, 0.8);
    background: transparent;
    border: 2px solid rgba(247, 250, 252, 0.25);
    border-radius: 999px;
    cursor: pointer;
}

/* Chosen: an orange tint and a yellow border. Not blue: on this site
   blue means a link to somewhere else. */
.cp-toggle-btn[aria-pressed="true"] {
    color: var(--starlight);
    background: rgba(var(--supernova-orange-rgb), 0.35);
    border-color: var(--highlight-yellow);
}

.cp-btn-big {
    min-height: 5rem;
    min-width: 11rem;
    font-size: 1.3rem;
}

.cp-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* A themed word with the plain word under it. */
.cp-word-themed,
.cp-word-plain {
    display: block;
}

.cp-word-plain {
    font-size: 0.75em;
    font-weight: 500;
    opacity: 0.85;
}

/* Numbers such as "5 of 22" use Space Grotesk, like the site's
   other stat numbers. */
.cp-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}

.cp-strip {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cp-strip-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(247, 250, 252, 0.8);
}

.cp-chips {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-chip {
    display: inline-block;
    margin: 0 0.4rem 0.4rem 0;
    padding: 0.3rem 0.8rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--starlight);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

/* ------------------------------------------------------------
   Register (Step 1 lesson 12)
   The progress line, the carry-on button on the start screen and
   the end screen's summary.
   ------------------------------------------------------------ */
.cp-progress {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: rgba(247, 250, 252, 0.8);
}

.cp-progress .cp-num {
    color: var(--starlight);
}

.cp-progress-gap {
    display: inline-block;
    width: 1.5rem;
}

/* Absent: a warm outline, as well as its word. */
.cp-btn-absent {
    border-color: rgba(239, 91, 91, 0.7);
}

.cp-btn-absent:hover {
    border-color: #EF5B5B;
}

.cp-resume {
    margin-bottom: 1.25rem;
}

.cp-date {
    margin: 0 0 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: rgba(247, 250, 252, 0.75);
}

.cp-summary {
    max-width: 44rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--starlight);
    background: rgba(var(--deep-space-rgb), 0.55);
    border-left: 4px solid var(--highlight-yellow);
    border-radius: 8px;
}

html.cp-classroom .cp-summary {
    font-size: 2.4rem;
}

/* ------------------------------------------------------------
   Copying and history (Step 1 lesson 13)
   ------------------------------------------------------------ */

/* The box the older copy command selects from: on the page, but
   never seen. */
.cp-copy-hidden {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

/* Shown only when the browser blocks copying: the line, selected. */
.cp-copy-fallback {
    margin: 0.5rem 0 1rem;
}

.cp-copy-box {
    min-height: 0;
    margin-top: 0.5rem;
}

.cp-tools .cp-btn {
    margin: 0 0.5rem 0.5rem 0;
}

.cp-history-counts {
    margin: 1rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--highlight-yellow);
}

.cp-history {
    max-width: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-history-item {
    margin: 0 0 0.75rem;
    padding: 0.9rem 1.1rem;
    background: rgba(var(--deep-space-rgb), 0.55);
    border-left: 4px solid rgba(var(--highlight-yellow-rgb), 0.6);
    border-radius: 8px;
}

.cp-history-date {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: rgba(247, 250, 252, 0.7);
}

.cp-history-summary {
    margin: 0.25rem 0 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--starlight);
}

/* ------------------------------------------------------------
   Make teams (Step 1 lesson 15)
   The setup form, the rule lists and the team board.
   ------------------------------------------------------------ */
.cp-field {
    margin: 1rem 0 0;
}

.cp-field .cp-label {
    margin-top: 0;
}

.cp-stepper .cp-btn {
    min-width: 7rem;
    vertical-align: middle;
}

.cp-stepper-value {
    display: inline-block;
    min-width: 9rem;
    margin: 0 1rem;
    vertical-align: middle;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--starlight);
}

.cp-stepper-value .cp-num {
    font-size: 2.4rem;
    margin-right: 0.3rem;
}

/* At the ends of the range the buttons stay focusable for the
   remote, but look switched off. */
.cp-panel [aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.cp-subtitle {
    margin: 1.5rem 0 0.5rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--starlight);
}

.cp-optional {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: rgba(247, 250, 252, 0.6);
}

.cp-select {
    min-height: 3rem;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.4rem 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--starlight);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}

.cp-select option {
    color: #1A0C08;
}

.cp-rules {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-rule {
    margin: 0 0 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--starlight);
}

.cp-rule-names {
    display: inline-block;
    min-width: 14rem;
    margin-right: 0.75rem;
}

.cp-rule-none {
    color: rgba(247, 250, 252, 0.55);
}

.cp-panel select:focus {
    outline: 4px solid var(--highlight-yellow);
    outline-offset: 3px;
}

/* Read by screen readers, not shown. */
.cp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* The team board. Cards sit side by side on older TV browsers
   without grid; newer ones get an even grid sized to the number of
   teams. */
.cp-team-card {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin: 0 1% 1rem 0;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    background: rgba(var(--deep-space-rgb), 0.6);
    border-top: 8px solid;
    border-radius: 10px;
}

@supports (display: grid) {
    .cp-board {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .cp-board-3,
    .cp-board-5,
    .cp-board-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cp-board-4,
    .cp-board-7,
    .cp-board-8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cp-team-card {
        width: auto;
        margin: 0;
    }
}

.cp-team-name {
    margin: 0 0 0.6rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    font-size: clamp(1.2rem, 3.4vh, 2.4rem);
    color: var(--starlight);
}

.cp-team-size {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.7em;
    color: rgba(247, 250, 252, 0.6);
}

.cp-team-members {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    font-size: clamp(1rem, 2.8vh, 2rem);
    line-height: 1.45;
    color: var(--starlight);
}

html.cp-classroom .cp-team-members {
    font-size: 1.6rem;
    font-size: clamp(1.1rem, 3.4vh, 2.6rem);
}

.cp-screen-title:focus {
    outline: none;
}

@media (max-width: 900px) {
    @supports (display: grid) {
        .cp-board-4,
        .cp-board-7,
        .cp-board-8 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cp-board-3,
        .cp-board-5,
        .cp-board-6 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (max-width: 520px) {
    .cp-team-card {
        width: 100%;
    }

    @supports (display: grid) {
        .cp-board,
        .cp-board-3,
        .cp-board-4,
        .cp-board-5,
        .cp-board-6,
        .cp-board-7,
        .cp-board-8 {
            grid-template-columns: 1fr;
        }
    }
}

/* ------------------------------------------------------------
   Class files and switching (Step 1 lesson 17)
   ------------------------------------------------------------ */
.cp-class-list .cp-toggle-btn {
    margin-bottom: 0.5rem;
}

.cp-files {
    max-width: 44rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cp-files .cp-subtitle {
    margin-top: 0;
}

.cp-files .cp-btn {
    margin: 0.5rem 0.5rem 0 0;
}

/* ------------------------------------------------------------
   Themes with artwork (Step 2)
   cp-has-art means the theme draws the name itself. The text name
   stays in the page for screen readers but isn't shown, and the
   prompt and team badge sit under the artwork.
   ------------------------------------------------------------ */
.cp-has-art {
    padding: 1rem;
}

.cp-has-art .cp-reveal-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.cp-art {
    width: 100%;
    -webkit-box-ordinal-group: 2;
    order: 1;
}

.cp-has-art .cp-reveal-prompt {
    margin-top: 0.75rem;
    -webkit-box-ordinal-group: 3;
    order: 2;
}

.cp-has-art .cp-reveal-team {
    -webkit-box-ordinal-group: 4;
    order: 3;
}

.cp-dots canvas {
    display: block;
    width: 100%;
}

/* ------------------------------------------------------------
   LED board theme (Step 2b)
   v1's circuit board. Motion is opacity only: one pulse along the
   tracks per reveal. The dots are drawn by the engine on a canvas.
   ------------------------------------------------------------ */
.cp-led {
    max-width: 70vh;
    margin: 0 auto;
    padding: 3% 3% 0;
    box-sizing: border-box;
    background: #0f5a3c;
    border-radius: 26px;
    box-shadow: inset 0 0 0 6px #0a4029;
}

html.cp-classroom .cp-led {
    max-width: 110vh;
}

.cp-led-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.cp-led-screen {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    margin: 0 2.5%;
    padding: 1.2%;
    background: #1a0907;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #081f15;
}

.cp-led-btn {
    position: relative;
    -webkit-box-flex: 0;
    flex: none;
    width: 2.6em;
    height: 2.6em;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-size: clamp(0.8rem, 1.8vw, 1.8rem);
    font-weight: 700;
    line-height: 2.6em;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle at 40% 35%, #555 0, #555 30%, #222 60%);
    border-radius: 50%;
    box-shadow: 0 0 0 0.3em #caa251, 0 0 0 0.42em #0a4029;
}

.cp-led-btn b {
    font-weight: 700;
}

/* A and B work like the real micro:bit's: a click on A presses the
   screen's main button, B its Skip or Absent. The gold ring warms up
   under the pointer and the button sinks a little while held. */
.cp-led-btn {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cp-led-btn:hover {
    box-shadow: 0 0 0 0.3em #f0c96a, 0 0 0 0.42em #0a4029, 0 0 0.9em 0.3em rgba(240, 201, 106, 0.45);
}

.cp-led-btn:active {
    background: radial-gradient(circle at 50% 50%, #3a3a3a 0, #3a3a3a 30%, #151515 60%);
    -webkit-transform: scale(0.93);
    transform: scale(0.93);
}

.cp-led-tracks {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2%;
}

.cp-led-track {
    fill: none;
    stroke: #d8a24a;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.cp-led-pulse {
    fill: none;
    stroke: #fff4c9;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

/* One pulse along the tracks while the name arrives. */
.cp-theme-led.cp-revealing .cp-led-pulse {
    -webkit-animation: cpLedPulse 1s ease-out 1;
    animation: cpLedPulse 1s ease-out 1;
    -webkit-animation-duration: calc(var(--cp-ms) * 0.7ms);
    animation-duration: calc(var(--cp-ms) * 0.7ms);
}

@-webkit-keyframes cpLedPulse {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes cpLedPulse {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}

/* ------------------------------------------------------------
   Robot theme (Step 2c)
   v1's robot. Its sizes are in em, and .cp-robot sets the em from
   the screen height (a little smaller on the normal page, full size
   in classroom mode), so it fits a laptop and a TV. Motion is
   transform and opacity only; lit parts are overlays that fade in,
   never colour changes.
   ------------------------------------------------------------ */
.cp-theme-robot .cp-art {
    position: relative;
    overflow: hidden;
}

.cp-robot {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    max-width: 50vh;
    margin: 0 auto;
    padding-top: 1.5em;
    font-size: 0.68vh;
}

/* On the normal page the robot is smaller, so a whole play screen
   fits under the site header on a laptop; the TV gets the big one. */
html.cp-classroom .cp-robot {
    max-width: 85vh;
    font-size: 1vh;
}

/* The control room either side of the robot (Deyne, 1 October): two
   monitors in the robot's steel, behind it. Left, a system log that
   scrolls up; right, a radar sweep over a signal trace. All motion is
   transform, nothing flashes, and reduced motion stops it (the rule
   in the reveal box section). Phones have no room beside the robot,
   so the monitors only show from 900 px wide. */
.cp-robot-panel {
    position: absolute;
    top: 12%;
    bottom: 12%;
    z-index: 0;
    display: none;
    width: 18%;
    padding: 0.6rem 0.7rem;
    box-sizing: border-box;
    overflow: hidden;
    font-family: Consolas, 'Lucida Console', 'Courier New', monospace;
    font-size: 0.7rem;
    font-size: clamp(0.55rem, 1.3vh, 0.95rem);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    color: #6aeaff;
    background: #0b1418;
    border: 4px solid #4b5d6d;
    border-radius: 10px;
    box-shadow: inset 0 0 18px rgba(106, 234, 255, 0.12);
}

@media (min-width: 900px) {
    .cp-robot-panel {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        flex-direction: column;
    }
}

.cp-robot-log {
    left: 2.5%;
}

.cp-robot-scope {
    right: 2.5%;
}

.cp-robot-panel-title {
    margin: 0 0 0.4em;
    padding-bottom: 0.3em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #bff6ff;
    border-bottom: 1px solid rgba(106, 234, 255, 0.3);
}

.cp-robot-log-window {
    -webkit-box-flex: 1;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cp-robot-log-roll span {
    display: block;
    white-space: nowrap;
}

.cp-robot-log-roll {
    -webkit-animation: cpRobotRoll 16s linear infinite;
    animation: cpRobotRoll 16s linear infinite;
}

.cp-radar {
    display: block;
    -webkit-box-flex: 1;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.cp-radar-sweep {
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
    -webkit-animation: cpRobotSweep 4s linear infinite;
    animation: cpRobotSweep 4s linear infinite;
}

.cp-robot-trace {
    -webkit-box-flex: 0;
    flex: none;
    height: 22%;
    margin-top: 0.5em;
    overflow: hidden;
    border-top: 1px solid rgba(106, 234, 255, 0.3);
}

.cp-robot-trace svg {
    display: block;
    width: 200%;
    height: 100%;
    -webkit-animation: cpRobotTrace 3s linear infinite;
    animation: cpRobotTrace 3s linear infinite;
}

@-webkit-keyframes cpRobotRoll {
    from { -webkit-transform: translateY(0); transform: translateY(0); }
    to { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
}

@keyframes cpRobotRoll {
    from { -webkit-transform: translateY(0); transform: translateY(0); }
    to { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
}

@-webkit-keyframes cpRobotSweep {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes cpRobotSweep {
    from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cpRobotTrace {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes cpRobotTrace {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

.cp-robot-antenna {
    position: relative;
    width: 1em;
    height: 4em;
    background: #5f7385;
}

.cp-robot-bulb {
    position: absolute;
    top: -1.5em;
    left: 50%;
    width: 3em;
    height: 3em;
    margin-left: -1.5em;
    border-radius: 50%;
    background: #7a2a22;
}

/* The glowing bulb is an overlay, so blinking is opacity only. */
.cp-robot-bulb::after,
.cp-robot-eye::after,
.cp-robot-mouth::after,
.cp-robot-dials i::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    opacity: 0;
}

.cp-robot-bulb::after {
    background: #ff4a3a;
    box-shadow: 0 0 2em #ff4a3a;
}

.cp-robot-head {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 26em;
    max-width: 40%;
    height: 11em;
    background: #9fb2c4;
    border-radius: 3em 3em 2em 2em;
    box-shadow: inset 0 -1em 0 #5f7385;
}

.cp-robot-head::before,
.cp-robot-head::after {
    content: '';
    position: absolute;
    top: 30%;
    width: 7%;
    height: 40%;
    background: #5f7385;
    border-radius: 0.8em;
}

.cp-robot-head::before {
    left: -6%;
}

.cp-robot-head::after {
    right: -6%;
}

.cp-robot-eye {
    position: relative;
    width: 4.4em;
    height: 4.4em;
    margin: 0 2.2em 2em;
    border-radius: 50%;
    background: radial-gradient(circle, #2f8fa3 0, #2f8fa3 22%, #1d3440 24%);
    box-shadow: inset 0 0 0 0.5em #243c49;
    -webkit-animation: cpRobotBlink 5s infinite;
    animation: cpRobotBlink 5s infinite;
}

.cp-robot-eye::after {
    background: radial-gradient(circle, #fff 0, #fff 20%, #47e3ff 22%);
    box-shadow: 0 0 2.5em #47e3ff;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.cp-robot-mouth {
    position: absolute;
    bottom: 14%;
    left: 33%;
    width: 34%;
    height: 11%;
    border-radius: 0.6em;
    background: repeating-linear-gradient(90deg, #2b3c49 0, #2b3c49 10%, #7f93a5 10%, #7f93a5 14%);
}

.cp-robot-mouth::after {
    background: repeating-linear-gradient(90deg, #47e3ff 0, #47e3ff 10%, #bff6ff 10%, #bff6ff 14%);
    box-shadow: 0 0 1.4em #47e3ff;
}

/* The scanning light across the eyes, in the print show. */
.cp-robot-scan {
    position: absolute;
    top: 18%;
    left: 0;
    width: 10%;
    height: 45%;
    background: linear-gradient(90deg, rgba(191, 246, 255, 0), rgba(191, 246, 255, 0.9), rgba(191, 246, 255, 0));
    opacity: 0;
}

.cp-robot-neck {
    width: 3em;
    height: 2em;
    background: #5f7385;
}

.cp-robot-body {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    width: 100%;
}

.cp-robot-arm {
    -webkit-box-flex: 0;
    flex: none;
    width: 3.5em;
    height: 13em;
    margin-top: 3em;
    background: #9fb2c4;
    border-radius: 2em;
    box-shadow: inset 0 -0.8em 0 #5f7385;
}

.cp-robot-arm-l {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.cp-robot-arm-r {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.cp-robot-torso {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    padding: 3.5% 4% 3%;
    background-color: #9fb2c4;
    background-image: radial-gradient(circle, #5f7385 0, #5f7385 5px, transparent 6px),
        radial-gradient(circle, #5f7385 0, #5f7385 5px, transparent 6px),
        radial-gradient(circle, #5f7385 0, #5f7385 5px, transparent 6px),
        radial-gradient(circle, #5f7385 0, #5f7385 5px, transparent 6px);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: 12px 12px, calc(100% - 12px) 12px, 12px calc(100% - 26px), calc(100% - 12px) calc(100% - 26px);
    border-radius: 3em;
    box-shadow: inset 0 -1.4em 0 #5f7385;
}

.cp-robot-screen {
    padding: 1.4%;
    background: #0b1418;
    border-radius: 1.4em;
    box-shadow: 0 0 0 0.6em #4b5d6d;
}

.cp-robot-dials {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 3%;
}

.cp-robot-dials i {
    position: relative;
    width: 3em;
    height: 3em;
    margin: 0 1.5em;
    border-radius: 50%;
    background: #3c5061;
}

.cp-robot-dials i::after {
    -webkit-animation: cpRobotDial 3s infinite;
    animation: cpRobotDial 3s infinite;
}

.cp-robot-dials i:nth-child(1)::after {
    background: #ffd23f;
}

.cp-robot-dials i:nth-child(2)::after {
    background: #47e3ff;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.cp-robot-dials i:nth-child(3)::after {
    background: #7dff6b;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

/* The binary layer sits behind the robot. */
.cp-robot-binary {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.cp-bits {
    position: absolute;
    left: 0;
    white-space: nowrap;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    color: #6aeaff;
    opacity: 0.55;
    -webkit-transform: translateX(-30vw);
    transform: translateX(-30vw);
    -webkit-animation: cpRobotZip 1s linear both;
    animation: cpRobotZip 1s linear both;
}

/* Revealing and landed: eyes, mouth and dials light up. */
.cp-theme-robot.cp-revealing .cp-robot-eye::after,
.cp-theme-robot.cp-landed .cp-robot-eye::after,
.cp-theme-robot.cp-revealing .cp-robot-mouth::after,
.cp-theme-robot.cp-landed .cp-robot-mouth::after,
.cp-theme-robot.cp-landed .cp-robot-dials i::after {
    opacity: 1;
}

.cp-theme-robot.cp-revealing .cp-robot-eye,
.cp-theme-robot.cp-landed .cp-robot-eye,
.cp-theme-robot.cp-landed .cp-robot-dials i::after {
    -webkit-animation: none;
    animation: none;
}

/* The bulb blinks three times, 0.4 s each: 2.5 a second. */
.cp-theme-robot.cp-revealing .cp-robot-bulb::after {
    -webkit-animation: cpRobotBulb 0.4s linear 3;
    animation: cpRobotBulb 0.4s linear 3;
}

/* Print: the head swivels and the eyes scan through the first 45%. */
.cp-theme-robot.cp-revealing[data-variant="print"] .cp-robot-head {
    -webkit-animation: cpRobotSwivel 0.85s ease-in-out 1;
    animation: cpRobotSwivel 0.85s ease-in-out 1;
    -webkit-animation-duration: calc(var(--cp-ms) * 0.45ms);
    animation-duration: calc(var(--cp-ms) * 0.45ms);
}

.cp-theme-robot.cp-revealing[data-variant="print"] .cp-robot-scan {
    -webkit-animation: cpRobotScan 0.43s ease-in-out 2 alternate;
    animation: cpRobotScan 0.43s ease-in-out 2 alternate;
    -webkit-animation-duration: calc(var(--cp-ms) * 0.225ms);
    animation-duration: calc(var(--cp-ms) * 0.225ms);
}

/* Scroll: v1's waving arms and shaking torso. */
.cp-theme-robot.cp-revealing[data-variant="scroll"] .cp-robot-arm-l {
    -webkit-animation: cpRobotWaveL 0.5s ease-in-out 2;
    animation: cpRobotWaveL 0.5s ease-in-out 2;
}

.cp-theme-robot.cp-revealing[data-variant="scroll"] .cp-robot-arm-r {
    -webkit-animation: cpRobotWaveR 0.5s ease-in-out 2;
    animation: cpRobotWaveR 0.5s ease-in-out 2;
}

.cp-theme-robot.cp-revealing[data-variant="scroll"] .cp-robot-torso {
    -webkit-animation: cpRobotShake 0.09s linear 8;
    animation: cpRobotShake 0.09s linear 8;
}

@-webkit-keyframes cpRobotBlink {
    0%, 94%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
    97% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); }
}

@keyframes cpRobotBlink {
    0%, 94%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); }
    97% { -webkit-transform: scaleY(0.1); transform: scaleY(0.1); }
}

@-webkit-keyframes cpRobotDial {
    0%, 30%, 100% { opacity: 0; }
    15% { opacity: 0.45; }
}

@keyframes cpRobotDial {
    0%, 30%, 100% { opacity: 0; }
    15% { opacity: 0.45; }
}

@-webkit-keyframes cpRobotBulb {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes cpRobotBulb {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@-webkit-keyframes cpRobotSwivel {
    0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); }
    25% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
    75% { -webkit-transform: rotate(7deg); transform: rotate(7deg); }
}

@keyframes cpRobotSwivel {
    0%, 100% { -webkit-transform: rotate(0); transform: rotate(0); }
    25% { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
    75% { -webkit-transform: rotate(7deg); transform: rotate(7deg); }
}

@-webkit-keyframes cpRobotScan {
    0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
    100% { opacity: 1; -webkit-transform: translateX(900%); transform: translateX(900%); }
}

@keyframes cpRobotScan {
    0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
    100% { opacity: 1; -webkit-transform: translateX(900%); transform: translateX(900%); }
}

@-webkit-keyframes cpRobotWaveL {
    0%, 100% { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
    50% { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}

@keyframes cpRobotWaveL {
    0%, 100% { -webkit-transform: rotate(18deg); transform: rotate(18deg); }
    50% { -webkit-transform: rotate(40deg); transform: rotate(40deg); }
}

@-webkit-keyframes cpRobotWaveR {
    0%, 100% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
    50% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); }
}

@keyframes cpRobotWaveR {
    0%, 100% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); }
    50% { -webkit-transform: rotate(-40deg); transform: rotate(-40deg); }
}

@-webkit-keyframes cpRobotShake {
    25% { -webkit-transform: translateX(-0.3em); transform: translateX(-0.3em); }
    75% { -webkit-transform: translateX(0.3em); transform: translateX(0.3em); }
}

@keyframes cpRobotShake {
    25% { -webkit-transform: translateX(-0.3em); transform: translateX(-0.3em); }
    75% { -webkit-transform: translateX(0.3em); transform: translateX(0.3em); }
}

@-webkit-keyframes cpRobotZip {
    from { -webkit-transform: translateX(-30vw); transform: translateX(-30vw); }
    to { -webkit-transform: translateX(110vw); transform: translateX(110vw); }
}

@keyframes cpRobotZip {
    from { -webkit-transform: translateX(-30vw); transform: translateX(-30vw); }
    to { -webkit-transform: translateX(110vw); transform: translateX(110vw); }
}

/* ------------------------------------------------------------
   How to add your class (Step 2)
   ------------------------------------------------------------ */
.cp-help {
    max-width: 36rem;
    margin: 1rem 0 0;
    padding: 0.9rem 1.1rem;
    font-family: 'Inter', sans-serif;
    color: rgba(247, 250, 252, 0.88);
    background: rgba(0, 0, 0, 0.25);
    border-left: 4px solid var(--highlight-yellow);
    border-radius: 8px;
}

.cp-help-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--starlight);
}

.cp-help-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.cp-help-list li {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cp-help-list strong {
    color: var(--starlight);
}

/* ------------------------------------------------------------
   Classroom mode: the end screens (Step 2)
   show() names the screen on the stage, so on a TV the end screens
   can be centred and big instead of a narrow column in the top left
   corner. The register summary sits in the middle of the screen.
   ------------------------------------------------------------ */
html.cp-classroom .cp-screen-register-end,
html.cp-classroom .cp-screen-both-end,
html.cp-classroom .cp-screen-history,
html.cp-classroom .cp-screen-teams-board {
    text-align: center;
}

html.cp-classroom .cp-screen-register-end {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    min-height: 75vh;
}

html.cp-classroom .cp-screen-title {
    font-size: 2rem;
    font-size: clamp(1.6rem, 5vh, 4rem);
}

html.cp-classroom .cp-date {
    font-size: 1.4rem;
    font-size: clamp(1.1rem, 3vh, 2.4rem);
}

html.cp-classroom .cp-summary {
    display: inline-block;
    max-width: none;
    margin: 1vh 0 2vh;
    padding: 0.35em 0.9em;
    font-size: 3rem;
    font-size: clamp(2rem, 8vh, 7rem);
    line-height: 1.25;
    border-left: 0;
}

html.cp-classroom .cp-screen-register-end .cp-btn,
html.cp-classroom .cp-screen-both-end .cp-btn,
html.cp-classroom .cp-screen-history .cp-actions .cp-btn {
    min-height: 7vh;
    padding: 0 1.4em;
    font-size: 1.4rem;
    font-size: clamp(1rem, 2.8vh, 2.2rem);
}

html.cp-classroom .cp-history {
    max-width: 70vw;
    margin: 0 auto;
    text-align: left;
}

html.cp-classroom .cp-history-summary {
    font-size: 1.6rem;
    font-size: clamp(1.1rem, 3vh, 2.4rem);
}

html.cp-classroom .cp-history-counts {
    font-size: 1.4rem;
    font-size: clamp(1rem, 2.6vh, 2rem);
}

/* ------------------------------------------------------------
   The theme on every screen (Step 2)
   applyLook() puts cp-look-<id> on the panel. The LED board dresses
   it as a circuit board with copper tracks in two corners; the Robot
   as a steel plate with rivets. In both, the title is drawn as dots
   on a dark screen, like the reveal. Buttons keep the site's orange
   so they're always easy to read. Plain changes nothing.
   ------------------------------------------------------------ */
.cp-stage > .cp-theme-pick {
    margin: 0 0 1.25rem;
}

/* The cards sit in a wrapping row, so the cards in a row share one
   height however long their descriptions are. */
.cp-theme-pick {
    display: flex;
    flex-wrap: wrap;
}

.cp-theme-pick > .cp-label {
    flex: 0 0 100%;
}

.cp-theme-preview {
    display: block;
    margin-bottom: 0.6rem;
}

.cp-theme-preview svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The reveal box steps back when the theme brings its own artwork. */
.cp-has-art {
    background: transparent;
    border-color: transparent;
}

/* The title on a little dark screen, its letters made of dots where
   the browser can do it (background-clip: text); plain coloured
   text everywhere else. */
.cp-look-led .cp-title,
.cp-look-robot .cp-title {
    display: inline-block;
    padding: 0.15em 0.45em;
    border-radius: 10px;
}

.cp-look-led .cp-title {
    background: #1a0907;
    box-shadow: 0 0 0 4px #081f15;
}

.cp-look-robot .cp-title {
    background: #0b1418;
    box-shadow: 0 0 0 4px #4b5d6d;
}

.cp-look-led .cp-title-text {
    color: #ff4a38;
}

.cp-look-robot .cp-title-text {
    color: #6aeaff;
}

@supports (-webkit-background-clip: text) {
    .cp-look-led .cp-title-text,
    .cp-look-robot .cp-title-text {
        color: transparent;
        background-size: 5px 5px;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .cp-look-led .cp-title-text {
        background-image: radial-gradient(circle, #ff4a38 0, #ff4a38 58%, transparent 62%);
    }

    .cp-look-robot .cp-title-text {
        background-image: radial-gradient(circle, #6aeaff 0, #6aeaff 58%, transparent 62%);
    }
}

/* LED board: a circuit board, copper tracks in two corners. */
.cp-panel.cp-look-led {
    background-color: transparent;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Cg fill='none' stroke='%23d8a24a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='M0 16H90V8H200'/%3E%3Cpath d='M16 0V70H8V130'/%3E%3Cpath d='M40 0V8H70'/%3E%3C/g%3E%3Cg fill='%23caa251' opacity='0.85'%3E%3Ccircle cx='200' cy='8' r='5'/%3E%3Ccircle cx='8' cy='130' r='5'/%3E%3Ccircle cx='70' cy='8' r='4'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Cg transform='rotate(180 110 70)'%3E%3Cg fill='none' stroke='%23d8a24a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cpath d='M0 16H90V8H200'/%3E%3Cpath d='M16 0V70H8V130'/%3E%3Cpath d='M40 0V8H70'/%3E%3C/g%3E%3Cg fill='%23caa251' opacity='0.85'%3E%3Ccircle cx='200' cy='8' r='5'/%3E%3Ccircle cx='8' cy='130' r='5'/%3E%3Ccircle cx='70' cy='8' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(145deg, rgba(15, 90, 60, 0.84), rgba(8, 52, 34, 0.8));
    background-repeat: no-repeat;
    background-position: left top, right bottom, 0 0;
    border: 6px solid #0a4029;
    box-shadow: inset 0 0 0 2px rgba(216, 162, 74, 0.45);
}

.cp-look-led .cp-screen-title,
.cp-look-led .cp-subtitle {
    color: #ffd9a0;
}

/* Inside the frame, cards and the reveal box are nearly solid, with
   a little of the nebula showing through. */
.cp-look-led .cp-mode {
    background: rgba(11, 43, 29, 0.85);
    border-color: rgba(216, 162, 74, 0.7);
}

.cp-look-led .cp-mode:hover {
    background: #0e3624;
    border-color: #d8a24a;
}

.cp-look-led .cp-theme-choice,
.cp-look-led .cp-reveal,
.cp-look-led .cp-team-card,
.cp-look-led .cp-history-item,
.cp-look-led .cp-help {
    background-color: rgba(11, 43, 29, 0.85);
}

/* Robot: a steel plate with a rivet in each corner. */
.cp-panel.cp-look-robot {
    background-color: transparent;
    background-image:
        radial-gradient(circle, #9fb2c4 0, #9fb2c4 5px, #5f7385 6px, transparent 7px),
        radial-gradient(circle, #9fb2c4 0, #9fb2c4 5px, #5f7385 6px, transparent 7px),
        radial-gradient(circle, #9fb2c4 0, #9fb2c4 5px, #5f7385 6px, transparent 7px),
        radial-gradient(circle, #9fb2c4 0, #9fb2c4 5px, #5f7385 6px, transparent 7px),
        linear-gradient(145deg, rgba(64, 80, 94, 0.84), rgba(34, 44, 52, 0.8));
    background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%;
    background-position: 12px 12px, calc(100% - 12px) 12px, 12px calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), 0 0;
    background-repeat: no-repeat;
    border: 6px solid #5f7385;
    box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.25);
}

.cp-look-robot .cp-screen-title,
.cp-look-robot .cp-subtitle {
    color: #bff6ff;
}

.cp-look-robot .cp-mode {
    background: rgba(23, 34, 41, 0.85);
    border-color: rgba(159, 178, 196, 0.7);
}

.cp-look-robot .cp-mode:hover {
    background: #1d2b34;
    border-color: #9fb2c4;
}

.cp-look-robot .cp-theme-choice,
.cp-look-robot .cp-reveal,
.cp-look-robot .cp-team-card,
.cp-look-robot .cp-history-item,
.cp-look-robot .cp-help {
    background-color: rgba(23, 34, 41, 0.85);
}

/* Classroom mode: mostly solid for a clear picture on a TV, with a
   little of the blurred nebula still showing through (Deyne, 1
   October). Each look's own gradient sits on top of these colours.
   It takes the panel's border away; the LED board, Robot and Lottery
   put their frame back, thinner, so the TV still shows the theme. */
html.cp-classroom .cp-panel {
    background-color: rgba(28, 15, 10, 0.45);
}

html.cp-classroom .cp-panel.cp-look-space {
    background-color: rgba(7, 10, 24, 0.45);
}

html.cp-classroom .cp-panel.cp-look-led {
    background-color: rgba(13, 74, 50, 0.3);
    border: 1vh solid #0a4029;
}

html.cp-classroom .cp-panel.cp-look-robot {
    background-color: rgba(43, 55, 64, 0.3);
    border: 1vh solid #5f7385;
}

/* ------------------------------------------------------------
   Space theme (Step 4, redone)
   The icy comet and the crystal name are drawn on one canvas by
   class-picker.js, so the CSS only sizes it: a third of the screen
   height on the page, half of it in classroom mode.
   ------------------------------------------------------------ */
.cp-sky canvas {
    display: block;
    width: 100%;
    height: 34vh;
}

html.cp-classroom .cp-sky canvas {
    height: 50vh;
}

/* Behind the comet: the Andromeda Galaxy, from Hubble's 2025
   panorama, darkened most in the middle so the ice crystal name
   stays easy to read. The picture is cut from inside the mosaic, so
   it has no stepped black edges, with the galaxy's core in the
   middle from side to side; cover crops the sides on narrower
   screens and keeps the core centred. It loads only when a Space
   screen with a reveal opens. Its credit goes on the site's credits
   page, not here (Deyne, 1 October: it breaks the immersion). */
.cp-sky {
    position: relative;
    overflow: hidden;
    background-color: #000;
    background-image:
        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.36)),
        url("../images/class-picker-andromeda.webp");
    background-size: cover, cover;
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    border-radius: 8px;
}
/* The Space look for the whole panel: deep space, a scatter of stars,
   starlight titles with a warm glow, cards edged in starlight gold. */
.cp-panel.cp-look-space {
    background-color: rgba(6, 8, 22, 0.55);
    background-image:
        radial-gradient(1px 1px at 12% 18%, #fff, rgba(255, 255, 255, 0)),
        radial-gradient(1px 1px at 78% 12%, #fff, rgba(255, 255, 255, 0)),
        radial-gradient(1.5px 1.5px at 92% 64%, #fff, rgba(255, 255, 255, 0)),
        radial-gradient(1px 1px at 34% 88%, #fff, rgba(255, 255, 255, 0)),
        radial-gradient(1.5px 1.5px at 58% 40%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
        linear-gradient(160deg, rgba(10, 12, 30, 0.72), rgba(26, 12, 8, 0.42));
    border: 1px solid rgba(250, 219, 103, 0.25);
}

/* The title in icy lettering, like the comet's crystal name: white
   to ice blue, sprinkled with tiny sparkles, with a cold glow. The
   glow uses filter, because text-shadow would paint over lettering
   filled with background-clip. Older browsers get plain ice white. */
.cp-look-space .cp-title-text {
    color: #eaf8ff;
}

@supports (-webkit-background-clip: text) {
    .cp-look-space .cp-title-text {
        color: transparent;
        background-image:
            radial-gradient(circle, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.95) 1px, rgba(255, 255, 255, 0) 1.6px),
            linear-gradient(100deg, #ffffff 0%, #c8f1ff 45%, #8fdcff 72%, #ffffff 100%);
        background-size: 9px 9px, 100% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-filter: drop-shadow(0 0 10px rgba(143, 220, 255, 0.45));
        filter: drop-shadow(0 0 10px rgba(143, 220, 255, 0.45));
    }
}

.cp-look-space .cp-screen-title,
.cp-look-space .cp-subtitle {
    color: #fff1c4;
}

.cp-look-space .cp-mode {
    background: rgba(6, 8, 22, 0.55);
    border-color: rgba(250, 219, 103, 0.45);
}

.cp-look-space .cp-mode:hover {
    background: rgba(6, 8, 22, 0.8);
    border-color: var(--highlight-yellow);
}

.cp-look-space .cp-theme-choice,
.cp-look-space .cp-team-card,
.cp-look-space .cp-history-item {
    background-color: rgba(6, 8, 22, 0.55);
}

/* ------------------------------------------------------------
   Lottery draw theme (Deyne's)
   The drum, its balls and the letter balls are drawn on one canvas
   by class-picker.js, so the CSS only sizes it, the same as Space.
   The look for the whole panel: lacquer red in a brass frame, with
   gold leaf lettering, the colours of a Vietnamese draw.
   ------------------------------------------------------------ */
.cp-lotto canvas {
    display: block;
    width: 100%;
    height: 34vh;
}

html.cp-classroom .cp-lotto canvas {
    height: 50vh;
}

.cp-panel.cp-look-lottery {
    background-color: transparent;
    background-image:
        radial-gradient(circle at 50% 0, rgba(250, 219, 103, 0.16), rgba(250, 219, 103, 0) 55%),
        linear-gradient(160deg, rgba(122, 18, 20, 0.84), rgba(52, 8, 10, 0.8));
    border: 6px solid #b8862b;
    box-shadow: inset 0 0 0 2px rgba(255, 226, 154, 0.35);
}

/* The title in gold leaf: a bright band across deeper gold, pressed
   into the red with a dark edge and a warm glow. The glow uses
   filter, because text-shadow would paint over lettering filled with
   background-clip. Older browsers get plain gold. */
.cp-look-lottery .cp-title-text {
    color: #f5c95a;
}

@supports (-webkit-background-clip: text) {
    .cp-look-lottery .cp-title-text {
        color: transparent;
        background-image: linear-gradient(180deg, #fff3c4 0%, #f5c95a 45%, #c58f2e 56%, #ffe29a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-filter: drop-shadow(0 2px 0 #5e3f0e) drop-shadow(0 0 10px rgba(255, 196, 92, 0.35));
        filter: drop-shadow(0 2px 0 #5e3f0e) drop-shadow(0 0 10px rgba(255, 196, 92, 0.35));
    }
}

.cp-look-lottery .cp-screen-title,
.cp-look-lottery .cp-subtitle {
    color: #ffe3a3;
}

/* Inside the frame, nearly solid, like the LED board and Robot. */
.cp-look-lottery .cp-mode {
    background: rgba(58, 10, 12, 0.85);
    border-color: rgba(242, 181, 49, 0.6);
}

.cp-look-lottery .cp-mode:hover {
    background: #4a0e10;
    border-color: #f2b531;
}

.cp-look-lottery .cp-theme-choice,
.cp-look-lottery .cp-reveal,
.cp-look-lottery .cp-team-card,
.cp-look-lottery .cp-history-item,
.cp-look-lottery .cp-help {
    background-color: rgba(58, 10, 12, 0.85);
}

html.cp-classroom .cp-panel.cp-look-lottery {
    background-color: rgba(74, 11, 13, 0.3);
    border: 1vh solid #b8862b;
}

/* ------------------------------------------------------------
   Theme choice on the setup screen (Step 2)
   The chosen theme gets a yellow border and an orange tint. Not
   blue: on this site blue means a link to somewhere else.
   ------------------------------------------------------------ */
.cp-theme-choice {
    display: inline-block;
    vertical-align: top;
    width: 15rem;
    min-height: 5rem;
    margin: 0 0.75rem 0.75rem 0;
    padding: 0.8rem 1rem;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: var(--starlight);
    background: rgba(var(--deep-space-rgb), 0.55);
    border: 2px solid rgba(247, 250, 252, 0.25);
    border-radius: 10px;
    cursor: pointer;
}

.cp-theme-choice:hover {
    border-color: rgba(247, 250, 252, 0.6);
}

.cp-theme-choice[aria-pressed="true"] {
    background: rgba(var(--supernova-orange-rgb), 0.22);
    border-color: var(--highlight-yellow);
}

.cp-theme-choice-name,
.cp-theme-choice-desc {
    display: block;
}

.cp-theme-choice-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.cp-theme-choice-desc {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: rgba(247, 250, 252, 0.7);
}

/* ------------------------------------------------------------
   Remote and keyboard (Step 1 lesson 10)
   The Sound button, the status message and the in-page confirm.
   ------------------------------------------------------------ */
.cp-tools {
    margin-top: 1.5rem;
}

.cp-btn-small {
    min-height: 3rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
}

/* The status message, such as "Sound: off", near the bottom. */
.cp-toast {
    position: fixed;
    left: 50%;
    bottom: 6vh;
    z-index: 100002;
    margin: 0;
    padding: 0.7rem 1.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--starlight);
    background: rgba(var(--deep-space-rgb), 0.92);
    border: 2px solid var(--highlight-yellow);
    border-radius: 999px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.cp-toast[hidden] {
    display: none;
}

/* The confirm sits over the top of the stage. Everything else on
   the stage is hidden while it's open, and hidden things can't take
   focus, so the remote can't wander behind it. */
.cp-stage {
    position: relative;
}

.cp-asking > * {
    visibility: hidden;
}

.cp-asking > .cp-confirm {
    visibility: visible;
}

.cp-confirm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 2rem;
    background: rgba(var(--deep-space-rgb), 0.97);
    border: 2px solid var(--highlight-yellow);
    border-radius: 12px;
}

/* The corner buttons (Sound, Music, Classroom mode) step aside while
   a question is open. In classroom mode the question reaches the top
   of the screen and they sat on its edge (Deyne, 1 October), and a
   remote could still reach them behind it. */
.cp-confirming .cp-panel-tools {
    visibility: hidden;
}

.cp-confirm-text {
    margin: 0 0 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--starlight);
}

/* ------------------------------------------------------------
   Classroom mode (Step 1 lesson 11)
   The cp-classroom class on <html> does all of this, with or
   without real fullscreen. The panel is fixed over the whole
   window with a 5% margin inside, because some TVs crop the edges.
   It stays see-through, so the nebula still shows behind it.
   ------------------------------------------------------------ */
/* Classroom mode sits in the panel's top right corner, beside the
   title, so it doesn't take a row of its own. On phones it goes back
   under the title, where there's room. */
.cp-panel {
    position: relative;
}

/* z-index keeps the corner above the play screens: the stage is
   drawn after it, and without this its top bar sat over the button
   and took the click, so Leave classroom mode did nothing. */
.cp-panel-tools {
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 6;
    margin: 0;
}

/* Sound and Music join Classroom mode in the corner on mode screens. */
.cp-panel-tools .cp-btn + .cp-btn {
    margin-left: 0.5rem;
}

@media (max-width: 640px) {
    .cp-panel-tools {
        position: static;
        margin-top: 1rem;
    }
}

/* The intro line is for the start screen only. */
.cp-panel[data-screen]:not([data-screen="start"]) .cp-intro {
    display: none;
}

html.cp-classroom,
html.cp-classroom body {
    overflow: hidden;
}

html.cp-classroom .site-header-new,
html.cp-classroom .rf-footer {
    display: none;
}

html.cp-classroom .cp-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 5vh 5vw;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
}

html.cp-classroom .cp-title,
html.cp-classroom .cp-intro {
    display: none;
}

html.cp-classroom .cp-panel-tools {
    top: 5vh;
    right: 5vw;
    margin-top: 0;
    text-align: right;
}

html.cp-classroom .cp-stage {
    margin-top: 0.5rem;
}

html.cp-classroom .cp-reveal {
    min-height: 45vh;
}

html.cp-classroom .cp-reveal-name {
    font-size: 6rem;
    font-size: clamp(3rem, 17vh, 14rem);
}

/* Play screens fit the screen exactly, with no scroll bar: fitArt()
   in class-picker.js gives the theme's picture the height the rest of
   the screen leaves (cp-fitted). The canvases of Space and the
   Lottery fill that box; the LED board and the Robot are shrunk from
   their top centre to fit inside it. */
html.cp-classroom .cp-has-art {
    min-height: 0;
}

html.cp-classroom .cp-art.cp-fitted {
    position: relative;
    overflow: hidden;
}

html.cp-classroom .cp-sky.cp-fitted canvas,
html.cp-classroom .cp-lotto.cp-fitted canvas {
    height: 100%;
}

html.cp-classroom .cp-fitted .cp-led,
html.cp-classroom .cp-fitted .cp-robot {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

html.cp-classroom .cp-btn-big {
    min-height: 6rem;
    font-size: 1.6rem;
}

html.cp-classroom .cp-strip-title,
html.cp-classroom .cp-chip {
    font-size: 1.2rem;
}