/* ==========================================================================
   EL WORDLE BY CASA 24 THEME: change colors, fonts and images here, in one place.
   Rebrand 2026-11-04: colors measured from the designer's guide (Explained.pdf)
   and the brand assets (design/rebrand-v1.1/). Dark only: there is no light
   mode any more (theme.js always sets data-theme="dark" on <html>, so the
   older [data-theme="dark"] rules below keep applying).
   ========================================================================== */
:root {
    color-scheme: dark;
    /* brand */
    --c24-orange: #ff7944;        /* Kolo's fur: "You" badge and counters only */
    --c24-green: #2f7a48;         /* tile green (guide's color bar) */
    --c24-amber: #ffb800;         /* tile amber (guide's color bar) */
    --c24-lime: #efff5e;          /* language button "EN ▾" */
    --c24-win: #32dd65;           /* stats score when the game is won */
    --c24-accent: var(--c24-amber); /* close ✕, active tab */
    --c24-forest: #163119;        /* dark forest green */
    --c24-cream: #f4efe6;         /* light text */
    --c24-sand: #cfc5b6;
    --c24-ink: #0a0b09;           /* dark text on light/amber/lime */
    --c24-muted: #b9b0a3;         /* secondary text */

    /* game tiles (text color chosen for contrast on each) */
    --c24-correct-bg: var(--c24-green);
    --c24-correct-fg: #ffffff;
    --c24-present-bg: var(--c24-amber);
    --c24-present-fg: var(--c24-ink);
    --c24-absent-bg: #2c302d;
    --c24-absent-fg: #ffffff;

    /* surfaces */
    --c24-bg: #0f1a12;            /* page */
    --c24-surface: #17241a;       /* windows, cards */
    --c24-text: var(--c24-cream);
    --c24-subtle: var(--c24-muted);
    --c24-line: #34453a;
    --c24-line-strong: #6f8174;
    --c24-hover: #223326;
    --c24-key-bg: #5d6d61;
    --c24-key-fg: var(--c24-cream);
    --c24-input-bg: #17241a;
    --c24-live: #4cc477;          /* "live" dot in the live view */

    /* fonts: Gilroy if the files are present (license needed for the web),
       otherwise the system font. VT323 (free, OFL) is the pixel font. */
    --c24-font-body: "Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --c24-font-display: "VT323", ui-monospace, monospace;
}

/* VT323's @font-face is in the <head> of index.html and game.html, so its URL
   carries ?v=<hash> (asset() in app.py) and matches the <link rel="preload">. */
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Medium.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-ExtraBold.ttf") format("truetype"); font-weight: 800 900; font-display: swap; }

/* ---------- base ---------- */
/* 1vh where the browser lacks dvh; 1dvh (the height that is really visible,
   without the mobile address bar) where it has it. Used for the page height,
   key heights and modal heights. */
:root { --vh: 1vh; }
@supports (height: 100dvh) { :root { --vh: 1dvh; } }
/* Safe areas (notch, home bar). Inside the Discord Activity, Discord's mobile app
   sets --discord-safe-area-inset-*; everywhere else they are unset and the
   browser's env() is used, so the web is unchanged. Defined on body too, in case
   Discord sets its variables there. Use var(--c24-safe-*) instead of env(). */
:root, body {
    --c24-safe-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top));
    --c24-safe-right: var(--discord-safe-area-inset-right, env(safe-area-inset-right));
    --c24-safe-bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom));
    --c24-safe-left: var(--discord-safe-area-inset-left, env(safe-area-inset-left));
}
html { -webkit-text-size-adjust: 100%; }
html, body { overscroll-behavior: none; }   /* no pull-to-refresh / rubber band */
body {
    background-color: var(--c24-bg);
    color: var(--c24-text);
    font-family: var(--c24-font-body);
}

/* modals, cards and text from the original Tailwind markup */
.bg-white { background-color: var(--c24-surface) !important; }
.border-neutral-300, .border-gray-300, .border-gray-400, .border-slate-200 { border-color: var(--c24-line) !important; }
.border-neutral-500 { border-color: var(--c24-line-strong) !important; }
.text-neutral-500, .text-neutral-400 { color: var(--c24-subtle) !important; }
.text-gray-900, .text-gray-700, .text-gray-600 { color: var(--c24-text) !important; }
input[type="text"] { background-color: var(--c24-input-bg); color: var(--c24-text) !important; }
select { background-color: var(--c24-input-bg); color: var(--c24-text); }

/* menu theme button */

/* ---------- Casa 24 pieces ---------- */
.c24-title {
    font-family: var(--c24-font-display);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
}
.c24-logo {               /* LOGO SLOT: Kolo's face; swap the <img> src to change it */
    height: 36px;
    width: 36px;
    border-radius: 9999px;
    background: var(--c24-orange);
    object-fit: cover;
}
.c24-badge {              /* the language button: lime "EN ▾" (rebrand 2026-11-04) */
    background: var(--c24-lime);
    color: var(--c24-ink);
    border-radius: 5px;
    padding: 0.04em 0.4em;
    letter-spacing: 0.08em;
}
.c24-kolo { margin: 0 auto; max-height: 160px; max-height: min(160px, calc(var(--vh) * 22)); width: auto; }
.c24-result {
    font-family: var(--c24-font-display);
    font-size: 2rem;
    line-height: 1;
    text-align: center;
    margin-bottom: 0.5rem;
}
/* end window: the result as flat squares in the board's colors (no emoji) */
.c24-result-grid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0.25rem auto 0; }
.c24-result-row { display: grid; grid-template-columns: repeat(5, 20px); grid-auto-rows: 20px; gap: 4px; }
.c24-result-row > span { border-radius: 3px; }
.c24-result-row > .is-correct { background: var(--c24-correct-bg); }
.c24-result-row > .is-semicorrect { background: var(--c24-present-bg); }
.c24-result-row > .is-incorrect { background: var(--c24-absent-bg); }
:root[data-theme="dark"] .c24-result-row > .is-incorrect { box-shadow: inset 0 0 0 1px var(--c24-line-strong); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .c24-result-row > .is-incorrect { box-shadow: inset 0 0 0 1px var(--c24-line-strong); }
}

/* ---------- play cards (Developer view login) ---------- */
.c24-play {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    border: 2px solid var(--c24-green);
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.c24-play:active { transform: scale(0.98); }
.c24-play-main { background: var(--c24-correct-bg); border-color: var(--c24-correct-bg); color: #fff; }
.c24-play-alt { background: transparent; color: var(--c24-text); }
.c24-play-name { font-family: var(--c24-font-display); font-size: 2rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.c24-play-status { font-size: 0.8rem; font-weight: 600; opacity: 0.9; }
.c24-play-status { white-space: nowrap; flex-shrink: 0; }
.c24-play { gap: 0.75rem; }
.c24-play-name { min-width: 0; overflow-wrap: anywhere; }

/* ---------- board and keyboard ---------- */
.key {
    background-color: var(--c24-key-bg);
    color: var(--c24-key-fg);
}
.correct {
    background-color: var(--c24-correct-bg) !important;
    border-color: var(--c24-correct-bg) !important;
    color: var(--c24-correct-fg) !important;
}
.semicorrect {
    background-color: var(--c24-present-bg) !important;
    border-color: var(--c24-present-bg) !important;
    color: var(--c24-present-fg) !important;
}
.incorrect {
    background-color: var(--c24-absent-bg) !important;
    border-color: var(--c24-absent-bg) !important;
    color: var(--c24-absent-fg) !important;
}
/* tile animations: pop when typing, flip one by one on Enter, bounce on a win */
@keyframes c24-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes c24-flip {
    0% { transform: rotateX(0); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
}
@keyframes c24-bounce {
    0%, 20% { transform: translateY(0); }
    40% { transform: translateY(-30%); }
    50% { transform: translateY(5%); }
    60% { transform: translateY(-15%); }
    80%, 100% { transform: translateY(0); }
}
.pop { animation: c24-pop 100ms ease-in-out; }
.flip { animation: c24-flip 500ms ease-in-out; }
.bounce { animation: c24-bounce 1000ms ease; }
.bounce-d1 { animation-delay: 100ms; }
.bounce-d2 { animation-delay: 200ms; }
.bounce-d3 { animation-delay: 300ms; }
.bounce-d4 { animation-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
    .pop, .flip, .bounce { animation: none; }
}

/* pixel font on the tiles */
#app .grid-cols-5 > div { font-family: var(--c24-font-display); }

/* share button and other green buttons from the original */
.bg-green-500, .bg-green-600 { background-color: var(--c24-green) !important; }

/* Kolo orange to green gradient (used as text fill with bg-clip-text) */
.c24-gradient {
    background-image: linear-gradient(to right, var(--c24-orange), var(--c24-green));
}

/* hides vue elements initially */
[v-cloak] {
    display: none;
}

/* ==========================================================================
   LAYOUT: phones, landscape, tablets, desktops (see the casa24-responsive skill)
   ========================================================================== */

/* ---------- header: 3 columns, so the title never covers the icons ---------- */
.c24-header {
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 2px;
    height: calc(52px + var(--c24-safe-top));
    padding: var(--c24-safe-top) 4px 0;
}
.c24-header-menu { max-width: 640px; margin: 0 auto; }
.c24-header-side { display: flex; align-items: center; }
.c24-header-end { justify-content: flex-end; }
.c24-header-title {
    font-size: clamp(1.25rem, 0.25rem + 5.7vw, 2.25rem);
    min-width: 0;
    white-space: nowrap;
    text-align: center;
}
.c24-header-title a { max-width: 100%; }
.c24-header-title .c24-badge { font-size: 0.8em; }
.c24-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 9999px;
    color: var(--c24-subtle);
    -webkit-tap-highlight-color: transparent;
}
.c24-icon-btn svg { width: 24px; height: 24px; }
@media (max-width: 360px) {
    .c24-header .c24-logo { width: 28px; height: 28px; }
    .c24-header-title a { gap: 0.35rem; }
}
/* The game header (game.html, web and Discord): an NYT-style bar. Brand on the left
   (Kolo + "Casa 24" + language badge; in Discord the "Casa 24 ES ▾" language button),
   actions on the right (people, help, trophy, stats, settings, Discord avatar).
   52px tall (48px on phones) + the top safe area; 44px tap targets. Where the actions
   need the room, only the "Casa 24" text steps aside (Kolo + badge stay; the logo's
   alt / the button's aria-label keep the name). */
.c24-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: var(--c24-safe-top) 2px 0 6px;
}
.c24-header-bar .c24-header-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1.75rem;
    text-align: start;
}
.c24-header-bar .c24-header-title > a,
.c24-header-bar .c24-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 4px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.c24-header-bar .c24-header-title > a:focus-visible,
.c24-header-bar .c24-lang-btn:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: -2px; }
.c24-header-bar .c24-badge { font-size: 0.8em; }
.c24-header-bar .c24-header-end { flex: none; }
.c24-header-bar .c24-dc-menu { flex: none; }
/* website (2026-11-04): Discord sits at the top left, before the brand ("Sign in with
   Discord" on the guest game, the avatar menu on the leaderboard game): its menu opens
   to the right */
.c24-header-start { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: 2px; }
.c24-header-start .c24-dc-menu { flex: none; }
.c24-header-bar .c24-dc-pop { inset-inline-start: 0; inset-inline-end: auto; }
@media (max-width: 480px) {
    .c24-header-bar { height: calc(48px + var(--c24-safe-top)); }
    .c24-header-bar .c24-header-title { font-size: 1.5rem; }
    .c24-header-bar .c24-logo { width: 32px; height: 32px; }
    .c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.4rem; }
.c24-badge-arrow { margin-inline-start: 0.35em; font-size: 0.8em; }
/* narrow phones: the 6 actions need the room (people, help, trophy, stats, door, avatar) */
@media (max-width: 400px) {
    .c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.25rem; padding: 0 2px; }
    .c24-header-bar .c24-badge { font-size: 0.7em; letter-spacing: 0.02em; padding: 0.04em 0.25em; }
    .c24-badge-arrow { margin-inline-start: 0.15em; }
}
@media (max-width: 359px) {
    .c24-header-bar .c24-badge { padding: 0.04em 0.15em; letter-spacing: 0; }
    .c24-badge-arrow { margin-inline-start: 0.1em; }
}
}
@media (min-width: 768px) {
    .c24-game .c24-header-bar {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        height: calc(60px + var(--c24-safe-top));
        padding: var(--c24-safe-top) max(12px, var(--c24-safe-right)) 0 max(16px, var(--c24-safe-left));
        box-sizing: border-box;
    }
    .c24-header-bar .c24-header-title { font-size: 2rem; }
    .c24-header-bar .c24-logo { width: 40px; height: 40px; }
    .c24-header-bar .c24-header-end { gap: 4px; }
}
/* very narrow phones: 40px-wide icon buttons (still 44px tall) so 6 actions fit at 320 */
@media (max-width: 359px) {
    .c24-header-bar .c24-icon-btn { width: 40px; }
    .c24-header-bar .c24-logo { width: 28px; height: 28px; }
    .c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.3rem; padding: 0 2px; }
}
/* when the title steps aside (by the number of actions on the right):
   leaderboard game on the web 6, inside Discord 5, guest game 4 (3 without the leaderboard) */
/* (the "El Wordle" title image is narrower than the old "Casa 24" text: it stays longer) */
@media (max-width: 419px) { .c24-header-lb:not(.c24-header-act) .c24-title-text { display: none; } }
@media (max-width: 379px) { .c24-header-act .c24-title-text { display: none; } }
@media (max-width: 359px) { .c24-header-bar:not(.c24-header-lb):not(.c24-header-guest) .c24-title-text { display: none; } }
@media (max-width: 339px) { .c24-header-guest .c24-title-text { display: none; } }
/* phones under 400px: the facepile shows 2 faces, so the actions keep their 44px */
@media (max-width: 399px) {
    .c24-header-bar .c24-face:nth-child(n+3) { display: none; }
}
/* Discord desktop from 860px: the rail replaces the people button, one action less */
@media (min-width: 860px) {
    :root.c24-embed:not(.c24-plat-mobile) .c24-header-act .c24-title-text { display: inline; }
}

/* ---------- El Wordle brand pieces (templates/_brand.html, rebrand 2026-11-04) ----------
   Kolo in the hoodie (not a round avatar any more) + the "El Wordle" title image, sized
   from the header height; the Casa 24 door is a mask so it takes the icon color. */
.c24-logo.c24-logo-kolo { width: auto; height: 40px; border-radius: 0; background: none; object-fit: contain; }
.c24-titler { display: block; width: auto; height: 28px; }
.c24-header-bar .c24-logo.c24-logo-kolo { height: 40px; }
.c24-header-bar .c24-titler { height: 26px; }
@media (max-width: 480px) {
    .c24-header-bar .c24-logo.c24-logo-kolo { height: 36px; }
    .c24-header-bar .c24-titler { height: 22px; }
}
@media (min-width: 768px) {
    .c24-header-bar .c24-logo.c24-logo-kolo { height: 50px; }
    .c24-header-bar .c24-titler { height: 32px; }
}
@media (max-width: 359px) {
    .c24-header-bar .c24-logo.c24-logo-kolo { height: 29px; }
    .c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.15rem; padding: 0 1px; }
}
.c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.4rem; }
.c24-badge-arrow { margin-inline-start: 0.35em; font-size: 0.8em; }
/* narrow phones: the 6 actions need the room (people, help, trophy, stats, door, avatar) */
@media (max-width: 400px) {
    .c24-header-bar .c24-header-title > a, .c24-header-bar .c24-lang-btn { gap: 0.25rem; padding: 0 2px; }
    .c24-header-bar .c24-badge { font-size: 0.7em; letter-spacing: 0.02em; padding: 0.04em 0.25em; }
    .c24-badge-arrow { margin-inline-start: 0.15em; }
}
@media (max-width: 359px) {
    .c24-header-bar .c24-badge { padding: 0.04em 0.15em; letter-spacing: 0; }
    .c24-badge-arrow { margin-inline-start: 0.1em; }
}
.c24-door-link { display: inline-flex; align-items: center; justify-content: center; color: var(--c24-subtle); }
.c24-door {
    display: block;
    width: 18px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("images/brand/casa24-door.webp") center / contain no-repeat;
    mask: url("images/brand/casa24-door.webp") center / contain no-repeat;
}
.c24-door-link:hover, .c24-door-link:focus-visible { color: var(--c24-text); }
.c24-door-link:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- game page: header, board, keyboard in one column ---------- */
.c24-game {
    --kgap: 6px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: calc(var(--vh) * 100);
    max-width: 500px;
    margin: 0 auto;
    padding-left: var(--c24-safe-left);
    padding-right: var(--c24-safe-right);
}
/* The board area takes the height that is left; the board is sized from it
   (container query units), so tiles stay square on every screen. */
.c24-board-area {
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
}
.c24-board {
    --g: 5px;
    --w: min(var(--cap), 100cqw - 20px, (100cqh - var(--bpad, 20px) - 5 * var(--g)) / 1.2 + 4 * var(--g));
    width: var(--w);
    height: calc((var(--w) - 4 * var(--g)) * 1.2 + 5 * var(--g));
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: var(--g);
}
.c24-board > .grid-cols-5 { gap: var(--g); }
/* board width cap (NYT-like): 350px, 330px on phones */
.c24-game { --cap: 350px; }
@media (max-width: 480px) { .c24-game { --cap: 330px; } }
/* ---------- NYT proportions: one tile unit --t (tablets, desktops, Discord desktop) ----------
   Wider than a phone, board and keyboard are one group under the header, sized from
   one unit t = the tile (NYT ratios, owner 2026-10-29): key 0.66t wide x 0.87t tall,
   Enter/⌫ 1.5 keys, board->keyboard gap 0.38t, top padding 0.25t, so the keyboard is
   ~1.4x the board's width. t = min(62px cap, height-fit, width-fit):
     height-fit: 0.25t + (6t + 5 gaps) + 0.38t + 3 key rows + 2 row gaps fit under the
       header (minus the bottom padding/safe area). Two forms because keys never go
       under 24px tall: h1 when keys are 0.87t, h2 when the 24px floor applies;
       the right one is always the smaller.
     width-fit: a 10-key row (10 x 0.66t + 9 gaps) fits the column minus 16px.
   --hdr mirrors the header heights above (48 phones, 52, 60 from 768px, 40 in short
   landscape). Phones (< 481px portrait) and landscape phones keep their own layouts. */
.c24-game {
    --hdr: calc(52px + var(--c24-safe-top));
    --krow: 8px;
    --padb: max(8px, var(--c24-safe-bottom));
    --t-avail: calc(var(--vh) * 100 - var(--hdr) - var(--padb) - 25px - 2 * var(--krow));
    --t-h1: calc(var(--t-avail) / 9.24);
    --t-h2: calc((var(--t-avail) - 72px) / 6.63);
    --t-w: calc((min(100vw, 500px) - var(--c24-safe-left) - var(--c24-safe-right) - 16px - 9 * var(--kgap)) / 6.6);
    --t: min(62px, var(--t-h1), var(--t-h2), var(--t-w));
    --kw: max(26px, var(--t) * 0.66);
}
@media (max-width: 480px) { .c24-game { --hdr: calc(48px + var(--c24-safe-top)); } }
@media (min-width: 768px) { .c24-game { --hdr: calc(60px + var(--c24-safe-top)); } }
@media (orientation: landscape) and (max-height: 500px) {
    .c24-game { --hdr: calc(40px + var(--c24-safe-top)); --krow: 6px; }
}
@media (min-width: 481px) and (min-height: 501px), (min-width: 481px) and (orientation: portrait) {
    .c24-game .c24-board-area {
        flex: none;
        height: calc(6 * var(--t) + 25px);
        margin-top: calc(var(--t) * 0.25);
    }
    .c24-game .c24-board { --w: calc(5 * var(--t) + 20px); }
    .c24-game .c24-keyboard {
        --kh: max(24px, var(--t) * 0.87);
        width: max-content;
        max-width: calc(100% - 16px);
        margin: calc(var(--t) * 0.38) auto 0;
        padding: 0;
        gap: var(--krow);
    }
    .c24-game .c24-key-row { justify-content: center; }
    .c24-game .c24-keyboard .key { flex: 0 1 auto; width: var(--kw); font-size: max(12px, var(--t) * 0.3); }
    .c24-game .c24-keyboard .key[data-char="⇨"],
    .c24-game .c24-keyboard .key[data-char="⌫"] { width: calc(var(--kw) * 1.5); font-size: max(16px, var(--t) * 0.36); }
}
/* board tiles: font follows the tile size (beats the text-2xl class set in game.js) */
main .grid-cols-5 > div {
    width: 100%;
    height: 100%;
    font-size: max(14px, (var(--w) - 4 * var(--g)) / 5 * 0.62);
    line-height: 1;
}
/* example tiles in "How to play" */
.c24-example { max-width: 16rem; }
.c24-example > div { aspect-ratio: 1; font-size: 1.75rem; line-height: 1; }

/* ---------- keyboard ---------- */
/* Keys are clamp(44px, 7dvh, 58px) tall (NYT), but never more than the keyboard's share
   of a short screen (--kfit: all rows in a third of the height; --rows comes from
   game.html), and never under 26px. Enter and ⌫ are 1.5x wide. */
.c24-keyboard {
    --rows: 3;
    --kfit: calc((var(--vh) * var(--kshare, 33) - (var(--rows) - 1) * var(--kgap)) / var(--rows));
    --kh-stack: max(26px, min(clamp(44px, var(--vh) * 7, 58px), var(--kfit)));
    --kh: var(--kh-stack);
    flex: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--kgap);
    padding: 0 8px max(8px, var(--c24-safe-bottom));
}
.c24-key-row { display: flex; gap: var(--kgap); }
.c24-keyboard .key {
    flex: 1 1 0;
    min-width: 0;
    height: var(--kh);
    padding: 0 1px;
    font-size: clamp(0.8rem, 0.6rem + 1vw, 1.05rem);
    line-height: 1;
    overflow: hidden;
    touch-action: manipulation;          /* no double-tap zoom on fast typing */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.c24-keyboard .key[data-char="⇨"],
.c24-keyboard .key[data-char="⌫"] { flex-grow: 1.5; font-size: 1.35rem; }
.c24-keyboard .key:active { filter: brightness(0.85); }
/* focus ring: Casa 24 orange, with a thin text-colored ring inside it so it also
   stands out on the cream background (orange alone is 2.3:1 there) */
.key:focus-visible,
.c24-icon-btn:focus-visible,
.c24-close:focus-visible {
    outline: 3px solid var(--c24-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--c24-text);
}
.c24-keyboard .key:focus-visible { position: relative; z-index: 1; }
@media (max-width: 359px) {
    .c24-game { --kgap: 4px; }
    .c24-keyboard { padding-left: 4px; padding-right: 4px; }
}

/* ---------- landscape phones: board and keyboard side by side ---------- */
@media (orientation: landscape) and (max-height: 500px) {
    .c24-game {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        max-width: 900px;
        column-gap: 8px;
    }
    .c24-game .c24-header {
        grid-column: 1 / -1;
        width: auto;
        margin-inline: 0;
        height: calc(40px + var(--c24-safe-top));
    }
    .c24-game .c24-header-title { font-size: 1.5rem; }
    .c24-game .c24-logo { width: 26px; height: 26px; }
    .c24-game .c24-header-bar .c24-logo.c24-logo-kolo { width: auto; height: 34px; }
    .c24-game .c24-header-bar .c24-titler { height: 20px; }
    .c24-game .c24-icon-btn { height: 40px; }
    .c24-game .c24-board-area { grid-column: 1; grid-row: 2; height: auto; margin: 0; }
    .c24-game .c24-keyboard { margin: 0; }
    .c24-keyboard {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        --kh: clamp(24px, (var(--vh) * 100 - 40px - 16px - (var(--rows) - 1) * var(--kgap)) / var(--rows), 52px);
        padding: 8px 8px max(8px, var(--c24-safe-bottom));
    }
}

/* ---------- modals: always fit the screen, scroll inside when too tall ---------- */
.c24-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #000;
    opacity: 0.35;
}
.c24-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--c24-safe-top) var(--c24-safe-right) var(--c24-safe-bottom) var(--c24-safe-left);
}
.c24-modal {
    position: relative;
    width: min(500px, 100% - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(var(--vh) * 100 - 32px - var(--c24-safe-top) - var(--c24-safe-bottom));
    overflow: auto;
    overscroll-behavior: contain;
}
.c24-modal-sm { width: min(420px, 100% - 32px); }
.c24-modal-head { padding: 0 48px; }
.c24-close {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--c24-subtle);
}
.c24-text-btn { min-height: 44px; padding-top: 0.5rem; }
/* the guide's amber ✕ on every window (rebrand 2026-11-04) */
.c24-close { color: var(--c24-accent); font-size: 1.35rem; font-weight: 900; }

/* How to play (Explained.pdf): the El Wordle title, three examples, the door, small legal */
.c24-help-title { margin: 0.25rem 0 0; }
.c24-help-title img { display: block; width: auto; height: 84px; margin: 0 auto; }
.c24-close + div > .c24-help-title:first-child { padding-inline: 40px; }
.c24-help-examples { margin: 0.5rem 0 0.25rem; font-weight: 700; font-size: 1.05rem; }
.c24-help-line { margin: 0 0 0.6rem; font-size: 0.875rem; text-align: center; }
.c24-help-letter { font-family: var(--c24-font-display); font-size: 1.15em; }
.c24-help-letter.is-correct { color: var(--c24-win); }
.c24-help-letter.is-semicorrect { color: var(--c24-amber); }
.c24-help-letter.is-incorrect { color: var(--c24-subtle); }
.c24-help-door { width: 44px; height: 44px; margin-top: 0.25rem; color: var(--c24-text); }
.c24-help-door .c24-door { width: 22px; height: 29px; }
.c24-help-legal { margin: 0; font-size: 0.75rem; color: var(--c24-subtle); text-align: center; }
.c24-help .c24-activity-delete { justify-content: center; }

/* Stats (Explained.pdf): date, n/6 (green when won), next word, timer, Share */
.c24-stats { width: min(420px, 100% - 32px); text-align: center; }
.c24-stats-head { padding: 1.25rem 48px 0; }
.c24-stats-date { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.c24-stats-date sup { font-size: 0.6em; }
.c24-stats-score { margin: 0.35rem 0 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.c24-stats-score.is-won { color: var(--c24-win); }
.c24-stats-end { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem 0; }
.c24-stats-next { display: flex; flex-direction: column; align-items: center; padding: 0.75rem 1.5rem 1.25rem; }
.c24-stats-next-label { margin: 0.5rem 0 0; font-weight: 700; text-transform: uppercase; }
.c24-stats-timer { margin: 0.25rem 0 0.75rem; font-size: 1.9rem; }
.c24-share-btn {
    width: min(240px, 100%);
    min-height: 52px;
    border-radius: 8px;
    background: #1f5a33;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
@media (hover: hover) and (pointer: fine) { .c24-share-btn:hover { filter: brightness(1.1); } }
.c24-share-btn:focus-visible { outline: 3px solid var(--c24-accent); outline-offset: 2px; }

/* notification: slides down from the top (game.js changes "top") */
.c24-toast {
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    padding-top: var(--c24-safe-top);
    pointer-events: none;
}
.c24-toast-box { position: relative; max-width: 20rem; text-align: center; }

/* ---------- hover only with a real mouse (no "stuck" hover after a tap) ---------- */
@media (hover: hover) and (pointer: fine) {
    .c24-play:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
    .c24-icon-btn:hover, .c24-close:hover { background: var(--c24-hover); }
    .hover\:bg-neutral-200:hover { background-color: var(--c24-hover) !important; }
    .c24-keyboard .key:hover { filter: brightness(0.93); }
}

/* keep modal titles clear of the × button */
.c24-close + div > :first-child { padding-inline-end: 40px; }
.c24-close + div > .mx-auto:first-child { padding-inline: 40px; }

/* ---------- demo mode (team only, /demo) ---------- */.c24-demo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px dashed var(--c24-line-strong);
    font-size: 0.8rem;
}
.c24-demo-lang {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    color: var(--c24-subtle);
}
.c24-demo-lang.is-active { color: var(--c24-text); background: var(--c24-hover); }
.c24-demo-btn {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    border-radius: 8px;
    border: 2px solid var(--c24-line-strong);
    font-weight: 700;
    touch-action: manipulation;
    color: var(--c24-text);
}
.c24-demo-btn-big { min-height: 44px; padding: 0.5rem 1.2rem; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
    .c24-demo-btn:hover, .c24-demo-lang:hover { background: var(--c24-hover); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .c24-game.c24-demo { grid-template-rows: auto auto minmax(0, 1fr); }
    .c24-demo .c24-demo-bar { grid-column: 1 / -1; grid-row: 2; padding: 0.15rem 0.5rem; }
    .c24-demo .c24-board-area, .c24-demo .c24-keyboard { grid-row: 3; }
}
.c24-demo-login-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
.c24-demo-login {
    width: min(380px, 100% - 32px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem 0;
}
.c24-demo-login-logo { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.6rem; color: inherit; text-decoration: none; }
.c24-demo-login-title { font-size: 1.6rem; }
.c24-demo-login-intro { font-size: 0.85rem; color: var(--c24-subtle); }
.c24-demo-login-form { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.c24-demo-login-form input {
    font-size: 16px;  /* 16px+ so iOS doesn't zoom in */
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 2px solid var(--c24-line-strong);
    background: var(--c24-surface);
    color: var(--c24-text);
}
.c24-demo-login-form .c24-play { justify-content: center; font-weight: 700; cursor: pointer; }
.c24-demo-login-error { color: #d9534f; font-weight: 700; font-size: 0.9rem; }

/* ---------- leaderboard (every language; Discord login) ---------- */
/* menu: Discord area, notices, links */
.c24-lb-tab:focus-visible, .c24-lb-btn:focus-visible, .c24-notice-close:focus-visible {
    outline: 2px solid var(--c24-accent);
    outline-offset: 2px;
}
.c24-notice-close {
    position: absolute;
    top: 50%;
    inset-inline-end: 2px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c24-subtle);
}
.c24-lb-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem;
    font-weight: 700;
    color: var(--c24-text);
    text-decoration: underline;
    text-decoration-color: var(--c24-orange);
    text-underline-offset: 3px;
}

/* game page */
.c24-lb-end { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; }
.c24-lb-hint {
    position: relative;
    padding: 0.5rem 3rem 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: center;
}
.c24-lb-hint a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--c24-orange);
    text-underline-offset: 3px;
}

/* /leaderboard page */
.c24-lb-page { min-height: 100vh; min-height: calc(var(--vh) * 100); }
.c24-lb-header { border-bottom: 1px solid var(--c24-line); }
.c24-lb-home { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.c24-lb {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.25rem max(16px, var(--c24-safe-right)) calc(2rem + var(--c24-safe-bottom)) max(16px, var(--c24-safe-left));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.c24-lb-title { font-size: 2.25rem; text-align: center; }
/* 3 tabs (Combinado, Español, English): one row of equal buttons, no scrolling */
.c24-lb-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--c24-line);
    background: var(--c24-surface);
}
.c24-lb-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c24-subtle);
    text-decoration: none;
}
.c24-lb-tab:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: -2px; }
.c24-lb-tab.is-active { background: var(--c24-correct-bg); color: #fff; }
.c24-lb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.c24-lb-table th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c24-subtle);
    text-align: start;
    padding: 0.4rem 0.35rem;
    border-bottom: 2px solid var(--c24-line);
}
.c24-lb-table td { padding: 0.55rem 0.35rem; border-bottom: 1px solid var(--c24-line); }
.c24-lb-table .c24-lb-num { text-align: end; white-space: nowrap; }
.c24-lb-n { width: 2.25rem; font-weight: 700; color: var(--c24-subtle); }
.c24-lb-name { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c24-lb-pts { font-weight: 800; }
.c24-lb-table tr.is-me td { background: var(--c24-hover); }
.c24-lb-table tr.is-me .c24-lb-n { box-shadow: inset 4px 0 0 var(--c24-orange); color: var(--c24-text); }
.c24-lb-you {
    display: inline-block;
    margin-inline-start: 0.25rem;
    padding: 0 0.35em;
    border-radius: 4px;
    background: var(--c24-orange);
    color: var(--c24-ink);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: 1px;
}
.c24-lb-admin { width: 1%; text-align: end; }
.c24-lb-hide {
    min-height: 32px;
    padding: 0 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--c24-line-strong);
    font-size: 0.75rem;
    color: var(--c24-subtle);
}
/* narrow phones: only #, player, points (+ wins from 400px, streaks from 520px) */
.c24-lb-opt1, .c24-lb-opt2 { display: none; }
@media (min-width: 400px) { .c24-lb-opt1 { display: table-cell; } }
@media (min-width: 520px) { .c24-lb-opt2 { display: table-cell; } }
.c24-lb-empty { text-align: center; padding: 2rem 0; color: var(--c24-subtle); }
.c24-lb-me {
    text-align: center;
    padding: 0.6rem;
    border-radius: 12px;
    border: 2px solid var(--c24-accent);
    background: var(--c24-surface);
}
.c24-lb .c24-lb-account { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.c24-lb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.c24-lb-btn {
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 10px;
    border: 2px solid var(--c24-line-strong);
    font-weight: 700;
    color: var(--c24-text);
    background: transparent;
    touch-action: manipulation;
}
.c24-lb-danger { border-color: #d9534f; color: #d9534f; }
.c24-lb-login { width: 100%; max-width: 20rem; align-self: center; }
.c24-lb-privacy { font-size: 0.75rem; line-height: 1.4; color: var(--c24-subtle); }
.c24-lb-back { text-align: center; }
.c24-lb-back a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.75rem; font-weight: 700; color: var(--c24-subtle); }
.c24-lb .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (hover: hover) and (pointer: fine) {
    .c24-lb-tab:not(.is-active):hover,
    .c24-lb-btn:hover, .c24-lb-hide:hover, .c24-notice-close:hover, .c24-lb-back a:hover { background: var(--c24-hover); }
    .c24-lb-danger:hover { background: rgba(217, 83, 79, 0.12); }
}
/* the leaderboard page has no Tailwind: a small reset of its own */
.c24-lb-page { margin: 0; }
.c24-lb-page h1, .c24-lb-page h2, .c24-lb-page p, .c24-lb-page form { margin: 0; }
.c24-lb-page a { color: inherit; }
.c24-lb-page button { font: inherit; background: transparent; border-width: 0; cursor: pointer; }
.c24-lb-page .c24-lb-btn, .c24-lb-page .c24-lb-hide { border-style: solid; }
.c24-lb-page .c24-lb-btn { border-width: 2px; }
.c24-lb-page .c24-lb-hide { border-width: 1px; }
.c24-lb-page .c24-play { text-decoration: none; }
.c24-lb-page .uppercase { text-transform: uppercase; }

/* /terms and /privacy (templates/legal.html): one readable column, same header as /leaderboard */
.c24-legal {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem max(16px, var(--c24-safe-right)) calc(2rem + var(--c24-safe-bottom)) max(16px, var(--c24-safe-left));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.c24-legal-lang { display: flex; justify-content: flex-end; gap: 0.25rem; }
.c24-legal-lang a {
    min-width: 44px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--c24-line); font-size: 0.85rem; font-weight: 700;
    color: var(--c24-subtle); text-decoration: none;
}
.c24-legal-lang a.is-active { border-color: var(--c24-orange); color: var(--c24-text); }
.c24-legal-text { line-height: 1.6; overflow-wrap: anywhere; }
.c24-legal-text .c24-legal-title { font-size: 1.6rem; line-height: 1.2; font-weight: 800; }
.c24-legal-text .c24-legal-date { margin: 0.25rem 0 1.25rem; font-size: 0.85rem; color: var(--c24-subtle); }
.c24-legal-text h3 { margin: 1.5rem 0 0.4rem; font-size: 1.1rem; font-weight: 800; }
.c24-legal-text p { margin: 0 0 0.75rem; }
.c24-legal-text ul { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; }
.c24-legal-text li { margin-bottom: 0.3rem; }
.c24-legal-text a { text-decoration: underline; text-decoration-color: var(--c24-orange); text-underline-offset: 3px; }
.c24-legal-text code { font-size: 0.9em; padding: 0 0.25em; border-radius: 4px; background: var(--c24-hover); }
.c24-legal-links, .c24-legal-foot { text-align: center; font-size: 0.75rem; color: var(--c24-subtle); }
.c24-legal-links a, .c24-legal-foot a { display: inline-block; padding: 0.35rem 0.25rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.c24-legal-links a[aria-current] { font-weight: 700; text-decoration: none; }
.c24-legal-foot { margin-top: 0.25rem; }
/* inside the game's Settings window */
.c24-legal-foot-settings { margin-top: 0.5rem; }

/* ---------- Discord: sign-in button, avatar, header account menu ---------- */
/* (the /leaderboard page has no Tailwind reset, so size these the same way everywhere) */
.c24-dc-btn, .c24-dc-pop, .c24-dc-pop *, .c24-dc-toast, .c24-privacy, .c24-privacy *, .c24-dc-privacy-link { box-sizing: border-box; }
/*
   Discord "Blurple" #5865F2 (hover #4752C4, pressed #3C45A5) with the white
   official logo is a FIXED brand color, the one allowed exception to the
   token-only rule: Discord's brand guidelines ask for the logo in white,
   black or Blurple, never recolored, with clear space around it. It reads
   the same in light and dark mode, so it has no dark override. */
.c24-dc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 20px;
    border-radius: 8px;
    background: #5865F2;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, transform 0.08s ease;
}
.c24-dc-btn .c24-dc-logo { width: 24px; height: 24px; flex: none; color: #fff; }
.c24-dc-btn-text { display: flex; flex-direction: column; min-width: 0; }
.c24-dc-btn-sub { font-size: 0.75rem; font-weight: 600; opacity: 0.92; }
.c24-dc-btn:active { background: #3C45A5; transform: scale(0.98); }
.c24-dc-btn:focus-visible { outline: 3px solid var(--c24-accent); outline-offset: 3px; }
.c24-dc-area { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
.c24-dc-area > .c24-dc-btn { width: 100%; }
.c24-dc-area .c24-dc-privacy-link, .c24-dc-area > span { align-self: center; }
/* the menu writes Discord texts in both languages; only the player's shows */
html[lang="en"] [data-l="es"], html:not([lang="en"]) [data-l="en"] { display: none !important; }
/* "(i) Privacy" link and its dialog */
.c24-dc-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c24-subtle);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.c24-dc-privacy-link svg { width: 16px; height: 16px; flex: none; }
.c24-dc-privacy-link:focus-visible, .c24-privacy-close:focus-visible, .c24-switch:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: 2px; }
.c24-privacy {
    width: min(26rem, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--c24-line);
    border-radius: 14px;
    background: var(--c24-surface);
    color: var(--c24-text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    overscroll-behavior: contain;
}
.c24-privacy::backdrop { background: rgba(0, 0, 0, 0.45); }
.c24-privacy-box { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.1rem 0.75rem; margin: 0; }
.c24-privacy-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.05rem; font-weight: 800; }
.c24-privacy-body { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--c24-subtle); }
.c24-privacy-body p { margin: 0; }
.c24-privacy-body > div { display: flex; flex-direction: column; gap: 0.5rem; }
.c24-privacy-close {
    align-self: flex-end;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c24-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
/* signed in: "play as guest" switch */.c24-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 40px;
    height: 24px;
    margin: 0;
    border-radius: 9999px;
    background: var(--c24-line-strong);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.c24-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}
.c24-switch:checked { background: var(--c24-correct-bg); }
.c24-switch:checked::after { transform: translateX(16px); }
/* login failed / cancelled, data deleted: short toast at the bottom, closes itself */
.c24-dc-toast {
    position: fixed;
    left: 50%;
    bottom: max(16px, var(--c24-safe-bottom));
    z-index: 70;
    width: min(26rem, calc(100% - 32px));
    transform: translateX(-50%);
    padding: 0.55rem 2.9rem 0.55rem 0.9rem;
    border-radius: 12px;
    border: 2px solid var(--c24-correct-bg);
    background: var(--c24-surface);
    color: var(--c24-text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    transition: opacity 0.3s ease;
}
.c24-dc-toast p { margin: 0; }
.c24-dc-toast-warn { border-color: var(--c24-orange); }
.c24-dc-toast.is-leaving { opacity: 0; }
.c24-dc-toast .c24-notice-close { background: transparent; border: 0; cursor: pointer; }
/* leaderboard game end: rank and points as big numbers */
.c24-lb-stats { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 0.25rem; }
.c24-lb-stat { display: flex; flex-direction: column; align-items: center; }
.c24-lb-stats .c24-lb-big { font-family: var(--c24-font-display); font-size: 2.5rem; line-height: 1; color: var(--c24-text); font-weight: 400; }
.c24-lb-small { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c24-subtle); }
.c24-dc-pop-danger, .c24-dc-pop-danger svg { color: #d9534f; }
.c24-dc-mark { width: 18px; height: 18px; flex: none; color: #5865F2; }
.c24-dc-avatar {
    flex: none;
    border-radius: 9999px;
    background: var(--c24-line);
    object-fit: cover;
}
.c24-dc-signed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--c24-subtle);
    min-width: 0;
}
.c24-dc-signed > span { min-width: 0; overflow-wrap: anywhere; }
.c24-dc-signed b { color: var(--c24-text); }
.c24-dc-avatar-row { display: inline-block; vertical-align: middle; margin-inline-end: 0.35rem; }
/* header: avatar button (logged in) or small Discord icon (logged out) */
.c24-dc-menu { position: relative; display: flex; }
.c24-dc-me { padding: 0; }
.c24-dc-me .c24-dc-avatar-head { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--c24-surface), 0 0 0 3px #5865F2; }
.c24-dc-icon .c24-dc-mark { width: 24px; height: 24px; }
.c24-dc-me:focus-visible, .c24-dc-icon:focus-visible, .c24-dc-pop-item:focus-visible, .c24-header .c24-icon-btn:focus-visible {
    outline: 3px solid var(--c24-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--c24-text);
}
.c24-dc-pop {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    z-index: 60;
    width: max-content;
    min-width: 13rem;
    max-width: calc(100vw - 16px);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--c24-line);
    background: var(--c24-surface);
    color: var(--c24-text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    text-align: start;
    font-family: var(--c24-font-body);
    letter-spacing: normal;
    text-transform: none;
}
.c24-dc-pop[hidden] { display: none; }
.c24-dc-pop-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 8px 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--c24-line);
    font-weight: 700;
    font-size: 0.9rem;
}
.c24-dc-pop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.c24-dc-pop form { margin: 0; }
.c24-dc-pop-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--c24-text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.c24-dc-pop-item svg { width: 20px; height: 20px; flex: none; color: var(--c24-subtle); }
/* line trophy icon (same stroke style as the header icons) */
.c24-trophy-inline { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.c24-trophy-badge { display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.05em; color: var(--c24-orange); }
.c24-trophy-title { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.1em; color: var(--c24-orange); }
.c24-lb-hint-text { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.c24-lb-hint .c24-dc-btn { text-decoration: none; }
/* ---------- live view (leaderboard game): who else plays today, colors only ----------
   One <aside class="c24-live">: a bottom sheet on phones, tablets and landscape phones
   (opened by the people button .c24-live-btn), a fixed left rail of 147px cards from
   860px wide (web: and 501px tall). The game column stays centered; the rail lives in
   the left gutter (at 860px it ends at 163px, the column starts at 180px). */
.c24-live-btn { position: relative; }
.c24-live-badge {
    position: absolute;
    top: 3px;
    inset-inline-end: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--c24-orange);
    color: var(--c24-ink);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
/* facepile: up to 3 overlapping avatars inside the people button (phones/tablets) */
.c24-live-btn.has-faces { width: auto; min-width: 44px; padding: 0 8px 0 4px; }
.c24-facepile { display: inline-flex; align-items: center; }
.c24-face {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    object-fit: cover;
    background: var(--c24-line);
    box-shadow: 0 0 0 2px var(--c24-bg);
}
.c24-face + .c24-face { margin-inline-start: -8px; }
.c24-live-btn.has-faces .c24-live-badge { top: 2px; inset-inline-end: -2px; }
/* very narrow phones: 2 faces, so Kolo + language badge + trophy keep their room */
@media (max-width: 359px) {
    .c24-face:nth-child(n+3) { display: none; }
    .c24-header-bar .c24-live-btn.has-faces { width: auto; padding: 0 4px 0 2px; }
}
.c24-live-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: #000;
    opacity: 0.35;
}
.c24-live { display: none; box-sizing: border-box; }
.c24-live *, .c24-live *::before { box-sizing: border-box; }
.c24-live.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: min(500px, 100%);
    max-height: min(70vh, 100vh - 48px);
    max-height: min(calc(var(--vh) * 70), calc(var(--vh) * 100 - 48px - var(--c24-safe-top)));
    background: var(--c24-surface);
    color: var(--c24-text);
    border: 1px solid var(--c24-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    padding: 0 max(4px, var(--c24-safe-right)) var(--c24-safe-bottom) max(4px, var(--c24-safe-left));
}
.c24-live-head {
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 52px 0 12px;
}
.c24-live-close { top: 4px; }
.c24-live-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c24-subtle);
}
.c24-live-count {
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: var(--c24-hover);
    color: var(--c24-text);
    text-align: center;
    letter-spacing: 0;
}
.c24-live-empty { margin: 0; padding: 0.75rem 12px 1.25rem; font-size: 0.85rem; color: var(--c24-subtle); }
/* NYT-style cards (rail and sheet alike), 147 x 80: a 64px round avatar and the 6 x 5
   mini board, nothing else visible. The sheet lays them out in a wrapping grid. */
.c24-live { --c24-card-w: 147px; --c24-card-h: 80px; --c24-card-gap: 9px; }
.c24-live-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--c24-card-w));
    grid-auto-rows: var(--c24-card-h);
    justify-content: center;
    gap: var(--c24-card-gap);
    margin: 0;
    padding: 0 8px 12px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.c24-live-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--c24-card-w);
    height: var(--c24-card-h);
    padding: 0 9px 0 7px;
    border: 1px solid var(--c24-line);
    border-radius: 8px;
    background: transparent;
}
.c24-live-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    object-fit: cover;
    background: var(--c24-hover);
}
/* name + status: read by screen readers (the card's accessible name), never shown */
.c24-live-info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* the 6 x 5 mini board: colored squares, nothing written in them */
.c24-live-grid {
    --s: 9px;
    flex: none;
    display: grid;
    grid-template-columns: repeat(5, var(--s));
    grid-auto-rows: var(--s);
    gap: 2px 1.75px;
}
.c24-live-grid > span { border-radius: 1px; border: 1px solid var(--c24-line-strong); opacity: 0.7; }
.c24-live-grid > .is-correct { background: var(--c24-correct-bg); border-color: var(--c24-correct-bg); opacity: 1; }
.c24-live-grid > .is-semicorrect { background: var(--c24-present-bg); border-color: var(--c24-present-bg); opacity: 1; }
.c24-live-grid > .is-incorrect { background: var(--c24-absent-bg); border-color: var(--c24-absent-bg); opacity: 1; }
:root[data-theme="dark"] .c24-live-grid > .is-incorrect { border-color: var(--c24-line-strong); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .c24-live-grid > .is-incorrect { border-color: var(--c24-line-strong); }
}
.c24-live-close:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: 2px; }
/* "Live" motion: a friend who joins pops in, one who leaves fades out, the others slide
   to their new place (Vue <transition-group name="c24-pop">). A cell is keyed by its
   color, so it flips only when that color changes (a friend's new guess landing).
   Only after the first cards are on screen (.is-live), so the page doesn't pop as a whole.
   A card from Discord's participant list with no board yet ("is-pending") breathes. */
.is-live > .c24-pop-enter-active { transition: transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.2s ease-out; }
.is-live > .c24-pop-enter-from { opacity: 0; transform: scale(0.8); }
.is-live > .c24-pop-leave-active { transition: transform 0.2s ease-in, opacity 0.2s ease-in; }
.is-live > .c24-pop-leave-to { opacity: 0; transform: scale(0.9); }
.is-live > .c24-pop-move { transition: transform 0.3s ease; }
.is-live .c24-live-grid > .is-correct, .is-live .c24-live-grid > .is-semicorrect, .is-live .c24-live-grid > .is-incorrect { animation: c24-cell-flip 0.35s ease-out; }
@keyframes c24-cell-flip { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.c24-live-card.is-pending .c24-live-avatar { animation: c24-live-breathe 1.6s ease-in-out infinite; }
@keyframes c24-live-breathe { 50% { box-shadow: 0 0 0 3px var(--c24-live); } }
@media (prefers-reduced-motion: reduce) {
    .is-live > .c24-pop-enter-active, .is-live > .c24-pop-leave-active, .is-live > .c24-pop-move { transition: none; }
    .is-live .c24-live-grid > span, .c24-live-card.is-pending .c24-live-avatar { animation: none; }
}
/* "Invite friends" (Discord only): the first card, same size, a 64px green circle + a
   two-line uppercase label */
.c24-live-invite {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    width: var(--c24-card-w);
    height: var(--c24-card-h);
    margin: 0 auto var(--c24-card-gap);
    padding: 0 6px 0 7px;
    border: 1px solid var(--c24-line);
    border-radius: 8px;
    background: transparent;
    color: var(--c24-text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.c24-live-invite-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--c24-correct-bg);
    color: var(--c24-correct-fg);
}
.c24-live-invite-text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.c24-live-invite:focus-visible, .c24-live-card:focus-visible { outline: 3px solid var(--c24-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .c24-live-invite:hover { background: var(--c24-hover); }
}
/* the rail (≥860px: web when taller than 500px, Discord desktop at any height): fixed in the
   left gutter, 16px from the edge and 10px under the header, one column of cards that
   scrolls inside when long. It never moves or shrinks the centered board/keyboard. */
@media (min-width: 860px) and (min-height: 501px) {
    :root { --c24-rail-top: calc(60px + 10px); }
    .c24-live, .c24-live.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 30;
        top: calc(var(--c24-rail-top) + var(--c24-safe-top));
        bottom: calc(8px + var(--c24-safe-bottom));
        left: calc(16px + var(--c24-safe-left));
        right: auto;
        width: var(--c24-card-w);
        max-height: none;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .c24-live-head { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .c24-live-invite { margin: 0 0 var(--c24-card-gap); }
    .c24-live-empty { padding: 0 2px; font-size: 0.8rem; }
    .c24-live-list { flex: 0 1 auto; grid-template-columns: var(--c24-card-w); padding: 0; scrollbar-width: none; }
    .c24-live-list::-webkit-scrollbar { display: none; }
    .c24-live-btn, .c24-live-close, .c24-live-backdrop { display: none !important; }
}
/* narrow phones: the menu header holds avatar + trophy + info on the left;
   the info button steps aside so the title keeps its room */
/* phones with the leaderboard on: the Discord slot + trophy (+ info from 420px) leave room for "Casa 24" only */
@media (hover: hover) and (pointer: fine) {
    .c24-dc-btn:hover { background: #4752C4; }
    .c24-dc-btn:active { background: #3C45A5; }
    .c24-dc-pop-item:hover, .c24-dc-privacy-link:hover, .c24-privacy-close:hover { background: var(--c24-hover); }
}


/* ==========================================================================
   DISCORD ACTIVITY (the game inside Discord; see discord-activity.js)
   ========================================================================== */
/* "Connecting to Discord..." / refused / error, over the game until the login is done */
.c24-activity-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, var(--c24-safe-top)) max(16px, var(--c24-safe-right)) max(16px, var(--c24-safe-bottom)) max(16px, var(--c24-safe-left));
    background: var(--c24-bg);
    color: var(--c24-text);
}
.c24-activity-overlay[data-state="ready"] { display: none; }
.c24-activity-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    max-width: 22rem;
    text-align: center;
}
.c24-activity-kolo { width: auto; height: 88px; }
.c24-activity-overlay[data-state="loading"] .c24-activity-kolo { animation: c24-activity-pulse 1.2s ease-in-out infinite; }
@keyframes c24-activity-pulse { 50% { transform: scale(0.9); opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) {
    .c24-activity-overlay[data-state="loading"] .c24-activity-kolo { animation: none; }
}
.c24-activity-msg { display: none; margin: 0; font-weight: 600; line-height: 1.4; }
.c24-activity-msg span[lang="en"] { display: block; margin-top: 0.25rem; font-weight: 400; font-size: 0.9em; color: var(--c24-subtle); }
.c24-activity-overlay[data-state="loading"] [data-when="loading"],
.c24-activity-overlay[data-state="denied"] [data-when="denied"],
.c24-activity-overlay[data-state="error"] [data-when="error"],
.c24-activity-overlay[data-state="deleted"] [data-when="deleted"] { display: block; }
.c24-activity-retry {
    display: none;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 10px;
    background: var(--c24-correct-bg);
    color: var(--c24-correct-fg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.c24-activity-overlay[data-state="denied"] .c24-activity-retry,
.c24-activity-overlay[data-state="error"] .c24-activity-retry { display: inline-flex; align-items: center; }
.c24-activity-retry:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: 2px; }
/* "Delete my data" done: only "Play again" (signs in again, a new empty account) */
.c24-activity-overlay:not([data-state="deleted"]) .c24-activity-again { display: none; }
.c24-activity-overlay[data-state="deleted"] .c24-activity-again { display: inline-flex; align-items: center; }
/* game Settings inside Discord: "Delete my data", small and secondary */
.c24-activity-delete { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; margin: 0; }
.c24-activity-delete-btn {
    min-height: 40px; padding: 0 0.9rem; border-radius: 10px; border: 1px solid #d9534f;
    color: #d9534f; background: transparent; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.c24-activity-delete-status { font-size: 0.8rem; color: var(--c24-subtle); }
.c24-activity-delete-status:empty { display: none; }

/* the shell's two loading steps: "Conectando…" (Discord) then "Cargando juego…" (the iframe) */
.c24-activity-overlay[data-step="connect"] .c24-step-game,
.c24-activity-overlay[data-step="game"] .c24-step-connect { display: none !important; }

/* The Activity shell (templates/activity.html): the game fills it in a same-origin iframe.
   Discord's safe-area variables exist only on the shell, so the iframe sits inside
   them; around it, the game's own background. */
.c24-shell-html, body.c24-shell { height: 100%; margin: 0; overflow: hidden; }
body.c24-shell { background: var(--c24-bg); color: var(--c24-text); }
.c24-shell-frame {
    position: fixed;
    top: var(--c24-safe-top);
    right: var(--c24-safe-right);
    bottom: var(--c24-safe-bottom);
    left: var(--c24-safe-left);
    width: calc(100% - var(--c24-safe-left) - var(--c24-safe-right));
    height: calc(100% - var(--c24-safe-top) - var(--c24-safe-bottom));
    border: 0;
    display: block;
    background: var(--c24-bg);
}
.c24-shell-frame[hidden], .c24-picker[hidden] { display: none; }

/* first launch: the language picker (big buttons: Español, English) */
.c24-picker {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: max(16px, var(--c24-safe-top)) max(16px, var(--c24-safe-right)) max(16px, var(--c24-safe-bottom)) max(16px, var(--c24-safe-left));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.c24-picker-logo { width: auto; height: 72px; flex: none; margin-top: auto; }
.c24-picker-title { margin: 0; text-align: center; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.c24-picker-title span[lang="en"] { display: block; font-weight: 400; font-size: 0.9em; color: var(--c24-subtle); }
.c24-picker-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(26rem, 100%);
    margin-bottom: auto;
}
.c24-picker-btn, .c24-lang-choice {
    display: flex;            /* the website's choices are links: center their text too */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 48px;
    padding: 0 0.75rem;
    border: 2px solid var(--c24-line-strong, #999);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.c24-picker-btn:hover, .c24-lang-choice:hover { background: var(--c24-hover); }
.c24-picker-btn:focus-visible, .c24-lang-choice:focus-visible, .c24-lang-btn:focus-visible { outline: 2px solid var(--c24-accent); outline-offset: 2px; }
.c24-picker-btn.is-suggested { border-color: var(--c24-orange); }
.c24-lang-choice.is-active { background: var(--c24-correct-bg); color: var(--c24-correct-fg); border-color: transparent; }
@media (max-height: 420px) {
    /* landscape phones and the small picture-in-picture tile: no logo, tighter buttons */
    .c24-picker { gap: 0.4rem; }
    .c24-picker-logo { display: none; }
    .c24-picker-title { margin-top: auto; font-size: 1rem; }
    .c24-picker-list { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); width: 100%; gap: 0.4rem; }
    .c24-picker-btn { min-height: 40px; font-size: 0.95rem; }
}

/* the game page in the shell's iframe: the shell already keeps it inside the safe areas */
:root.c24-embed { --c24-safe-top: 0px; --c24-safe-right: 0px; --c24-safe-bottom: 0px; --c24-safe-left: 0px; }

/* ---------- the Activity on Discord desktop (owner, 2026-10-29) ----------
   The desktop panel can be wide but short (e.g. 875x400). There the game stays
   stacked (header, board ABOVE keyboard; never the landscape side-by-side layout),
   keys shrink with the height, and the live sidebar shows from 860px wide at any
   height. The shell passes the platform (c24-plat-desktop / c24-plat-mobile);
   until it arrives the page counts as desktop. Mobile keeps the web rules
   (portrait lock). The website (no c24-embed) is unchanged. */
:root.c24-embed:not(.c24-plat-mobile) .c24-game {
    --kgap: clamp(4px, var(--vh) * 1.5, 6px);
    display: flex;
    flex-direction: column;
    max-width: 500px;
}
/* board and keyboard: the NYT unit-t group of the web's tablets/desktops (see "NYT
   proportions" above), at every panel size, right under the header */
:root.c24-embed:not(.c24-plat-mobile) .c24-board-area {
    flex: none;
    height: calc(6 * var(--t) + 25px);
    margin: calc(var(--t) * 0.25) 0 0;
}
:root.c24-embed:not(.c24-plat-mobile) .c24-board { --w: calc(5 * var(--t) + 20px); }
:root.c24-embed:not(.c24-plat-mobile) .c24-keyboard {
    --kh: max(24px, var(--t) * 0.87);
    width: max-content;
    max-width: calc(100% - 16px);
    margin: calc(var(--t) * 0.38) auto 0;
    align-self: center;
    padding: 0;
    gap: var(--krow);
}
:root.c24-embed:not(.c24-plat-mobile) .c24-key-row { justify-content: center; }
:root.c24-embed:not(.c24-plat-mobile) .c24-keyboard .key { flex: 0 1 auto; width: var(--kw); font-size: max(12px, var(--t) * 0.3); }
:root.c24-embed:not(.c24-plat-mobile) .c24-keyboard .key[data-char="⇨"],
:root.c24-embed:not(.c24-plat-mobile) .c24-keyboard .key[data-char="⌫"] { width: calc(var(--kw) * 1.5); font-size: max(16px, var(--t) * 0.36); }
/* Discord desktop from 768px wide: the header spans the whole panel like NYT (the
   landscape-phone rule above would otherwise shrink it to the column on short panels) */
@media (min-width: 768px) {
    :root.c24-embed:not(.c24-plat-mobile) .c24-game .c24-header-bar {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        padding: 0 12px 0 16px;
        box-sizing: border-box;
    }
}
/* live rail in Discord desktop: from 860px wide at any height (the web needs >500px tall).
   Same rail as the web (live view section): 147px cards, 16px from the left, 10px under
   the header (40px compact header on short panels, 60px from 501px tall). */
@media (min-width: 860px) {
    :root.c24-embed:not(.c24-plat-mobile) { --c24-rail-top: calc(40px + 10px); }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live,
    :root.c24-embed:not(.c24-plat-mobile) .c24-live.is-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 30;
        top: calc(var(--c24-rail-top) + var(--c24-safe-top));
        bottom: calc(8px + var(--c24-safe-bottom));
        left: calc(16px + var(--c24-safe-left));
        right: auto;
        width: var(--c24-card-w);
        max-height: none;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-head { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-invite { margin: 0 0 var(--c24-card-gap); }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-empty { padding: 0 2px; font-size: 0.8rem; }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-list { flex: 0 1 auto; grid-template-columns: var(--c24-card-w); padding: 0; scrollbar-width: none; }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-list::-webkit-scrollbar { display: none; }
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-btn,
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-close,
    :root.c24-embed:not(.c24-plat-mobile) .c24-live-backdrop { display: none !important; }
}
/* the full-width 60px header shows when taller than 500px: the rail starts 10px under it */
@media (min-width: 860px) and (min-height: 501px) {
    :root.c24-embed:not(.c24-plat-mobile) { --c24-rail-top: calc(60px + 10px); }
}
/* very narrow panels: the web's 4px key gaps and side padding (10-key rows ≥ 26px) */
@media (max-width: 359px) {
    :root.c24-embed:not(.c24-plat-mobile) .c24-game { --kgap: 4px; }
    :root.c24-embed:not(.c24-plat-mobile) .c24-keyboard { padding-left: 4px; padding-right: 4px; }
}

/* the game's header title inside the Activity: opens the language window ("ES ▾") */
.c24-lang-btn {
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.c24-lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 360px) { .c24-header-title .c24-lang-btn { gap: 0.35rem; } }

/* Picture-in-picture / grid (layout mode 1 or 2): a small tile in Discord.
   Only the board, no header, keyboard, live view or windows. */
.c24-pip .c24-header,
.c24-pip .c24-keyboard,
.c24-pip .c24-demo-bar,
.c24-pip .c24-live,
.c24-pip .c24-live-backdrop,
.c24-pip .c24-backdrop,
.c24-pip .c24-modal-wrap,
.c24-pip .c24-toast { display: none !important; }
.c24-pip .c24-game { display: flex; max-width: none; }
.c24-pip .c24-board { --g: 3px; }
/* the board alone fills the tile (not the unit-t group of Discord desktop) */
:root.c24-embed.c24-pip .c24-board-area { flex: 1 1 auto; height: auto; margin: 0; }
:root.c24-embed.c24-pip .c24-board {
    --w: min(var(--cap), 100cqw - 20px, (100cqh - var(--bpad, 20px) - 5 * var(--g)) / 1.2 + 4 * var(--g));
}

/* leaderboard window (inside the game page) */
.c24-board-title { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.25rem 2.5rem 0.75rem; }
.c24-board-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem; }
[data-activity-board] .c24-lb-me { margin-top: 0.75rem; }
button.c24-lb-link { background: transparent; border: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* share text to copy by hand */
.c24-share-text {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--c24-line-strong);
    border-radius: 8px;
    background: var(--c24-input-bg);
    color: var(--c24-text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    resize: none;
}

/* in-page confirmation (delete my data), built by discord.js */
.c24-confirm-text { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.c24-confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.c24-confirm-danger { color: #b3261e; }
:root[data-theme="dark"] .c24-confirm-danger { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c24-confirm-danger { color: #ff8a80; } }

/* ---------- leaderboard: EN · ESP · MIX tabs and medals (rebrand 2026-11-04) ---------- */
/* Both the /leaderboard page (.c24-lb) and the Discord in-game window ([data-activity-board]).
   Header row: trophy, then EN · ESP · MIX as plain large text tabs; the active one is amber.
   Light mode uses a darker amber for text (#FFB800 on cream is unreadable), dark mode the real one. */
.c24-lb, [data-activity-board] { --c24-lb-on: #8a5a00; }
:root[data-theme="dark"] .c24-lb, :root[data-theme="dark"] [data-activity-board] { --c24-lb-on: var(--c24-accent, #FFB800); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .c24-lb,
    :root:not([data-theme="light"]) [data-activity-board] { --c24-lb-on: var(--c24-accent, #FFB800); }
}

/* header row */
.c24-lb-head, .c24-board-head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.c24-lb-head .c24-lb-title, .c24-board-head .c24-board-title {
    flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; font-size: 1rem; color: var(--c24-text);
}
.c24-lb-head .c24-trophy, .c24-board-head .c24-trophy { width: 1.75rem; height: 1.75rem; vertical-align: middle; color: var(--c24-text); }
[data-activity-board] .c24-board-head { margin: 0 0 0.75rem; padding-inline-end: 44px; }  /* room for the ✕ */
[data-activity-board] .c24-board-head > :first-child { padding-inline-end: 0; }

/* the tabs: plain text, no pills */
.c24-lb-head .c24-lb-tabs, .c24-board-head .c24-board-tabs {
    display: flex; align-items: center; justify-content: flex-start; gap: 0.25rem 1rem;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; overflow-x: auto;
}
.c24-lb-head .c24-lb-tab, .c24-board-head .c24-lb-tab {
    flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 0 0.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; background: transparent;
    font-family: inherit; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1;
    color: var(--c24-text); text-decoration: none; cursor: pointer;
}
.c24-lb-head .c24-lb-tab.is-active, .c24-board-head .c24-lb-tab.is-active { background: transparent; color: var(--c24-lb-on); }
/* MIX (all languages) is green in the guide; EN and ESP amber */
.c24-lb-head .c24-lb-tab[data-tab="all"], .c24-board-head .c24-lb-tab[data-board-tab="all"] { --c24-lb-on: var(--c24-win); }
.c24-lb-head .c24-lb-tab:focus-visible, .c24-board-head .c24-lb-tab:focus-visible { outline: 2px solid var(--c24-lb-on); outline-offset: 2px; }
@media (hover: hover) {
    .c24-lb-head .c24-lb-tab:not(.is-active):hover, .c24-board-head .c24-lb-tab:not(.is-active):hover { background: transparent; color: var(--c24-lb-on); }
}

/* close ✕ of the leaderboard window: amber and bold */
[data-activity-board] .c24-board-close { color: var(--c24-lb-on); font-weight: 800; font-size: 1.35rem; }

/* table: PLAYER · POINTS · WINS · STREAK, thin lines, own row highlighted */
.c24-lb .c24-lb-table th, [data-activity-board] .c24-lb-table th {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--c24-subtle); border-bottom: 1px solid var(--c24-line);
}
.c24-lb .c24-lb-table td, [data-activity-board] .c24-lb-table td { border-bottom: 1px solid var(--c24-line); vertical-align: middle; }
.c24-lb .c24-lb-table tr.is-me td, [data-activity-board] .c24-lb-table tr.is-me td { background: var(--c24-hover); }
.c24-lb-table .c24-lb-n { text-align: center; }
.c24-lb-table td.c24-lb-n:has(.c24-medal) { padding-block: 0.2rem; }

/* medals for rank 1, 2, 3 (dc.medal in _discord.html): rosette, number in the middle, ribbon tails */
.c24-medal { position: relative; display: inline-flex; vertical-align: middle; width: 26px; height: 32px; }
.c24-medal-svg { display: block; width: 26px; height: 32px; overflow: visible; }
.c24-medal-ring { fill: var(--c24-medal-ring); }
.c24-medal-face { fill: var(--c24-medal-face); }
.c24-medal-tail { fill: var(--c24-medal-ring); }
.c24-medal-pleat { stroke: rgba(255, 255, 255, 0.45); }
.c24-medal-num { fill: #1a1208; font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.c24-medal.is-1 { --c24-medal-face: #F5B323; --c24-medal-ring: #B57F0E; }
.c24-medal.is-2 { --c24-medal-face: #B9BEC2; --c24-medal-ring: #7D858B; }
.c24-medal.is-3 { --c24-medal-face: #D9622B; --c24-medal-ring: #9A3E14; }
.c24-medal .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}