/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: #fff;
}

/* Game container */
.game-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

/* Screens */
.screen {
    position: relative;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Introductory Page */
#intro-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
}

#intro-screen h1 {
    font-size: 2rem;
    margin-bottom: 5px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}

.intro-tagline {
    font-size: 1.8rem;
    opacity: 0.85;
    margin-bottom: 30px;
    font-style: italic;
}

.intro-role-panel {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.intro-role-btn {
    padding: 18px 50px;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.intro-role-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.intro-panel {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 300px;
    max-width: 900px;
    /* Anchor for the absolutely-positioned .intro-input-toggle that
       sits at the panel's top-left corner. */
    position: relative;
}

.intro-panel h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* Title row on the intro screen: app title left, TOUCH/MOUSE toggle
   right (same horizontal line). Replaces the prior toggle position
   in the intro-panel's top-left corner. */
.intro-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    /* Shifted 15pt down on GP 0 (the Welcome page) so the title and
       TOUCH/MOUSE toggle clear the top-right Saved / Sync indicator
       that sits at the very top of the viewport. */
    margin-top: 15pt;
}
.intro-title-row h1 {
    margin: 0;
}

/* Player-side Prob Option selector (setup screen, below levels).
   Only shown when the game has 2+ Probs. Mirrors the Studio chip
   strip visually but uses the player palette. */
.player-prob-select {
    /* Clears the timer pill with breathing room (26px, raised 6pt). */
    margin-top: calc(26px - 6pt);
    text-align: center;
}
.player-prob-heading {
    /* Match the setup-panel h3s ("Timer", "Levels"): pure-white #fff,
       1.3rem, bold. (Was a dimmer 0.85-alpha white at 20px.) */
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 6px;
    font-weight: bold;
    /* Nudge only the heading up 2pt — relative offset keeps the chips
       below in their original position (they don't reflow). */
    position: relative;
    top: -2pt;
}
.player-prob-row {
    display: flex;
    flex-direction: column;   /* Prob2 under Prob1 */
    /* Left-align the chips with the timer pill above (the column is
       flex-start; the toggle button's 4px padding offsets the pill, so
       match it with padding-left:4px). */
    align-items: flex-start;
    padding-left: 4px;
    /* Drop the chips (4pt + 3pt + 2pt) without moving the "Frequency" heading. */
    margin-top: 9pt;
    gap: 6px;
}
.player-prob-chip {
    /* Narrower (width 65% of the row) and ~10% shorter (vertical
       padding 6px → 4px) than the original full-width stretch pills. */
    width: 65%;
    padding: 4px 14px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.player-prob-chip:hover {
    background: rgba(255, 255, 255, 0.2);
}
.player-prob-chip.selected {
    background: #FFD54F;
    color: #2a2a4a;
    border-color: #fff;
}
.player-prob-chip:active {
    transform: scale(0.96);
}

/* iOS-style sliding toggle. Picks TOUCH vs MOUSE for the whole
   session (replaces the prior per-game popup). data-mode="touch" →
   thumb on left, green track; data-mode="mouse" → thumb on right,
   blue track. */
.intro-input-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.intro-input-toggle:focus { outline: 2px solid rgba(255,255,255,0.6); border-radius: 6px; }
.intro-input-toggle:focus:not(:focus-visible) { outline: none; }
.intro-input-toggle-icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.intro-input-toggle[data-mode="touch"] .intro-input-toggle-icon-left,
.intro-input-toggle[data-mode="mouse"] .intro-input-toggle-icon-right {
    opacity: 1;
}
.intro-input-toggle-track {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.18);
    border-radius: 12px;
    transition: background 0.25s;
    flex-shrink: 0;
}
.intro-input-toggle[data-mode="touch"] .intro-input-toggle-track {
    background: rgba(46, 125, 50, 0.65);   /* green-ish */
}
.intro-input-toggle[data-mode="mouse"] .intro-input-toggle-track {
    background: rgba(33, 150, 243, 0.65);  /* blue-ish */
}
.intro-input-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: left 0.25s ease;
}
.intro-input-toggle[data-mode="mouse"] .intro-input-toggle-thumb {
    left: 22px;
}

/* Players toggle (1 / 2) — reuses the input-toggle structure/look, driven by
   [data-players] instead of [data-mode]. UI only; not yet wired to behavior. */
.intro-player-toggle { margin-left: 6px; }
/* The stick-figure SVG fills its box, while the ✋/🖱 emoji sit low in their
   line box — so the figures look higher. Nudge them down to visually match. */
.intro-player-toggle-icon-left,
.intro-player-toggle-icon-right {
    position: relative;
    top: 3px;
}
/* The right icon is the dynamic count (1/2/3 figures) — keep both flank icons
   fully visible; the thumb position + track tint indicate the value. */
.intro-player-toggle .intro-player-toggle-icon-left,
.intro-player-toggle .intro-player-toggle-icon-right {
    opacity: 1;
}
/* Flank figures (2 on the left, 3 on the right) — the glyphs carry no
   width/height attr, so size them here (else they collapse to 0). */
.intro-player-toggle .intro-player-toggle-icon-left svg,
.intro-player-toggle .intro-player-toggle-icon-right svg {
    height: 18px;
    width: auto;
}
/* 3-position slider: widen the track so the thumb has distinct left/mid/right. */
.intro-player-toggle .intro-input-toggle-track {
    width: 56px;
}
/* The thumb (white circle) holds 1 figure (dark, centered) = 1 player. */
.intro-player-toggle .intro-input-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The stick-figure stays CENTERED on the track at all times (it no longer
   rides inside the thumb). For 1 player it sits inside the centered white
   circle (dark figure); for 2/3 the empty circle slides off to the side and
   the figure turns white so it reads on the colored track. */
.intro-player-toggle .player-thumb-fig {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 15px;   /* +15% (was 13px) — bigger middle stick-figure */
    width: auto;
    display: block;
    z-index: 2;     /* above the sliding circle */
    stroke: #555;   /* dark — reads on the white circle (1 player) */
}
.intro-player-toggle .player-thumb-fig circle { fill: #555; }
.intro-player-toggle[data-players="2"] .player-thumb-fig,
.intro-player-toggle[data-players="3"] .player-thumb-fig { stroke: #fff; }
.intro-player-toggle[data-players="2"] .player-thumb-fig circle,
.intro-player-toggle[data-players="3"] .player-thumb-fig circle { fill: #fff; }
.intro-player-toggle[data-players="1"] .intro-input-toggle-track {
    background: rgba(255, 167, 38, 0.6);   /* amber — 1 player */
}
.intro-player-toggle[data-players="2"] .intro-input-toggle-track {
    background: rgba(171, 71, 188, 0.6);   /* purple — 2 players */
}
.intro-player-toggle[data-players="3"] .intro-input-toggle-track {
    background: rgba(38, 166, 154, 0.65);  /* teal — 3 players */
}
/* Thumb position encodes the count: MIDDLE = 1, LEFT = 2, RIGHT = 3. */
.intro-player-toggle[data-players="1"] .intro-input-toggle-thumb { left: 18px; }
.intro-player-toggle[data-players="2"] .intro-input-toggle-thumb { left: 2px; }
.intro-player-toggle[data-players="3"] .intro-input-toggle-thumb { left: 34px; }

/* Tile dimming for games that don't support the currently-selected
   input mode. Applied to .intro-game-row (covers both the main button
   and the eye-action button beside it). The pointer-events:none on
   the inner clickable elements neutralises clicks without breaking
   the row layout. */
.intro-game-row.mode-unavailable .intro-game-btn,
.intro-game-row.mode-unavailable .intro-game-eye {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(40%);
    cursor: not-allowed;
}

/* Intro-panel header row: "Choose the game:" heading on the left,
   typeahead game-type search input on the right. Same row, same
   baseline. The dropdown floats below the input. */
.intro-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    position: relative;
}
.intro-panel-header h3 {
    margin: 0;
}
.game-type-search {
    position: relative;
}
.game-type-search-input {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 0.95rem;
    min-width: 220px;
    box-sizing: border-box;
}
.game-type-search-input::placeholder { color: rgba(255,255,255,0.55); }
.game-type-search-input:focus {
    outline: none;
    border-color: rgba(255,215,0,0.7);
    background: rgba(255,255,255,0.18);
}

/* ===== Device-preview selector (on the "Choose the game:" line) ===== */
/* Picking a device makes any game tile launch inside a scaled iframe sized to
   that device. Sits right after the heading; the search box stays far right. */
.intro-preview-devices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;         /* push the device pills to the RIGHT; search sits on the left */
}
.ipd-btn {
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.82);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.ipd-btn:hover { background: rgba(255,255,255,0.18); }
.ipd-btn.active {
    background: #4DD0E1;
    color: #06343b;
    border-color: #4DD0E1;
    box-shadow: 0 0 0 2px rgba(77,208,225,0.25);
}
/* Mouse mode: device preview is touch-only → greyed + inert. */
.ipd-btn.ipd-disabled,
.ipd-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.ipd-host-disabled { opacity: 0.85; }

/* ===== Scaled device-frame preview modal ===== */
.bg-device-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(0,0,0,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}
/* Cradle = the ~1-inch framed border around the device. The ✕ sits ON this
   border (top-right). Sizes to the scaled device (inline-block content). */
.bg-device-cradle {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1in;                 /* ~the requested 1-inch border */
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 26px;
    background: rgba(20,16,40,0.55);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}
/* Full-size (Setup/intro on a non-autostart preview): drop the frame so the
   app renders normally; only the gameplay board gets the framed device view. */
.bg-device-cradle.full {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    height: 100%;
}
.bg-device-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.bg-device-close:hover { background: #e53935; border-color: #e53935; }
.bg-device-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #fff;
}
.bg-device-cradle.full .bg-device-cap { margin-bottom: 6px; }
.bg-device-title { font-weight: 800; font-size: 15px; }
.bg-device-res { color: rgba(255,255,255,0.6); font-size: 13px; }
.bg-device-rotate {
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.bg-device-rotate:hover { background: rgba(255,255,255,0.22); }
/* Screen = device glass. Sized by JS to the SCALED device footprint; the iframe
   renders at TRUE device px and is transform:scale()'d (top-left) to fit. */
.bg-device-screen {
    position: relative;
    overflow: hidden;
    background: #000;
    border: 8px solid #1b1b1f;
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    flex: 0 0 auto;
    box-sizing: content-box;   /* JS sets the GLASS size; border sits outside it */
}
.bg-device-cradle.full .bg-device-screen {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.bg-device-frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: #1a1530;
}
.bg-device-cradle.full .bg-device-frame { position: static; }
.game-type-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: rgba(42, 42, 62, 0.97);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.game-type-search-dropdown.open { display: block; }
.game-type-search-item {
    padding: 8px 14px;
    cursor: pointer;
    color: white;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.game-type-search-item:last-child { border-bottom: none; }
.game-type-search-item:hover,
.game-type-search-item.is-active {
    background: rgba(255,215,0,0.18);
}
.game-type-search-empty {
    padding: 10px 14px;
    color: rgba(255,255,255,0.55);
    font-style: italic;
    font-size: 0.9rem;
}

/* Timer column on the Find setup page (first child of .setup-columns).
   Layout mirrors .setup-left / .setup-right: a centered header followed
   by the control. Hourglass glyph sits inline with the header text (next
   to the word "Timer") so the title row matches the look of the
   neighbouring "Levels" / "Game's Type" columns. Hidden on Catch via
   inline display:none toggled in _applyGameSetupToPlayerScreen. */
.setup-timer-col {
    display: flex;
    flex-direction: column;
    /* Left-align contents: header and pill both flush to the column's
       left edge so the pill aligns under the word "Timer" rather than
       floating center-aligned beneath it. */
    align-items: flex-start;
    /* Tight gap — pill sits ~10pt closer to the title than before
       (was 14px; now 4px → roughly the 10pt move requested). */
    gap: 4px;
    min-width: 80px;
}
.setup-timer-col h3 {
    /* Keep "Timer ⏳" on a single line — the column is narrow and the
       glyph was wrapping below the title in tighter viewports. */
    white-space: nowrap;
}
.setup-timer-col h3 .timer-hg {
    /* Same size as the surrounding header text; tiny left nudge for
       visual spacing without throwing the title row off-center. */
    margin-left: 6px;
    font-weight: normal;
}
.setup-timer-col h3 .timer-hg[data-state="off"] {
    opacity: 0.4;
}
.timer-toggle {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    /* Nudge the pill up, closer to the "Timer" header (−8px then 5pt more). */
    margin-top: calc(-8px - 5pt);
}
.timer-toggle:focus { outline: 2px solid rgba(255,255,255,0.6); border-radius: 8px; }
.timer-toggle:focus:not(:focus-visible) { outline: none; }
.timer-toggle-track {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    background: rgba(255,255,255,0.18);
    border-radius: 14px;
    transition: background 0.25s;
}
.timer-toggle[data-state="on"] .timer-toggle-track {
    background: rgba(46, 125, 50, 0.7);
}
.timer-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: left 0.25s ease;
}
.timer-toggle[data-state="on"] .timer-toggle-thumb {
    left: 27px;
}

.intro-games {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

/* GP 0: three-column game picker (Find / Catch / Spy) */
.intro-columns {
    display: grid;
    /* One 1fr column per visible game type (incl. 'misc' when picked) plus the
       Big Games column. --game-cols is set by _renderIntroColumns() (defaults
       to 3). Misc is no longer a fixed leading track — it's a normal column. */
    grid-template-columns: repeat(var(--game-cols, 3), 1fr);
    gap: 18px;
    margin-bottom: 10px;
}
/* Big Games column (3e): "Go to Big Game" author button + clickable Big Game
   tiles that launch a composed sequence in the Previewer. */
.intro-biggame-go {
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #7c4dff;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
}
.intro-biggame-go:hover { background: #8d63ff; }
/* Play / Scan toggle under the Composer button. */
.intro-biggame-mode {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.ibg-mode-btn {
    flex: 1 1 0;
    padding: 6px 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    font-size: 12.5px;
    font-family: inherit;
}
.ibg-mode-btn:hover { background: rgba(255, 255, 255, 0.16); }
.ibg-mode-btn.active {
    background: #FFD54F;
    color: #4a3a00;
    border-color: #FFD54F;
}
/* Orientation toggle labels are longer than Play/Scan — shrink + no-wrap so
   "Landscape"/"Portrait" fit the half-width buttons. */
.intro-biggame-orient .ibg-mode-btn {
    font-size: 11px;
    white-space: nowrap;
    padding: 6px 2px;
}
.intro-biggame-tile {
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    margin: 7px 0;
    border-radius: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.intro-biggame-tile:hover { background: rgba(255, 255, 255, 0.2); }
.intro-biggame-tile .ibg-name { font-weight: 700; font-size: 13.5px; }
.intro-biggame-tile .ibg-meta { font-size: 11px; color: rgba(255, 255, 255, 0.65); }

/* Miscellaneous column: a clickable utility box (e.g. "Icons and Players"). */
.intro-misc-item {
    padding: 12px 12px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.intro-misc-item:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.7);
}
.intro-misc-item:active { transform: scale(0.98); }
.intro-misc-item:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }
/* Xeno-box screen: centered like the other screens; shows the Xeno icon +
   "Xeno ⏳" pink box (same look as the Start page's xeno row). */
#xeno-box-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
}
.xeno-box-panel {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* The "Xeno ⏳" box — same look as the disabled .xeno-input on the Start page
   (the Start page sets these inline; the icon uses the shared .xeno-icon-container). */
/* Game-icon popup (right-click a game's eye on GP 0). */
.game-icon-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}
.game-icon-popup-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 26px 30px 22px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.4);
    text-align: center;
    max-width: 82vw;
}
.game-icon-popup-title {
    font-weight: bold;
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 14px;
}
.game-icon-popup-icon svg {
    width: 200px;
    max-width: 70vw;
    height: auto;
    display: block;
    margin: 0 auto;
}
.game-icon-popup-close {
    position: absolute;
    top: 6px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0;
}
.game-icon-popup-close:hover { color: #333; }
.xeno-box-input {
    height: 50px; /* match the icon-xeno box height */
    width: 150px;
    padding: 0 20px;
    font-size: 1rem;
    border: 2px solid #FF69B4;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    color: #FF69B4;
    font-weight: bold;
    cursor: not-allowed;
    box-sizing: border-box;
    text-align: left;
}

/* Icons & Players screen: center its content like the intro/start screens
   (display:flex is set inline when the screen is shown). */
#icons-players-screen {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
}
#icons-players-screen h1 { margin-bottom: 18px; position: relative; top: -10px; }
/* Panel heading: normal weight (not bold), shifted 3px UP relative to the
   boxes below (relative positioning, so the rows don't move with it), and its
   LEFT edge aligned with the 2nd icon in the row — i.e. indented by one icon
   (50px) + one gap (12px) from the row's left. Same for 1 and 2 players. */
#ip-heading {
    font-weight: normal;
    position: relative;
    top: -7px; /* lift the text off the icon row (boxes stay put) */
    text-align: left;
    padding-left: calc(50px + 12px); /* = 62px: 2nd icon's left edge */
}

/* Start button sits in a flex row mirroring the player rows: a hidden icon-
   section clone spaces it, and the button's name column lines up with the name
   boxes. Left-align the button within that column. */
.ip-start-row { margin-top: 6px; }
.ip-start-row .ip-icon-spacer { visibility: hidden; pointer-events: none; position: relative; }
/* Dimmed, non-working "Start the Game" button: overlays the hidden icon clone so
   it spans exactly icon 1 → icon 5 (the five player-icons' width). */
/* 2-class selector so it beats the mobile @media .btn { width:200px } rule. */
.ip-start-row .ip-startgame-dim {
    visibility: visible; /* parent spacer is visibility:hidden; re-show the button */
    position: absolute;
    top: 0;
    /* No bottom:0 — let the button keep its NATURAL btn height so it matches the
       Save button exactly (top-aligned). left/right:0 still set the width. */
    left: 0;
    right: 0;
    width: auto; /* let left:0/right:0 stretch it to the full icon-row width */
    min-width: 0;
    max-width: none;
    margin: 0;
    white-space: nowrap;
}
.ip-start-btn-section { align-items: stretch !important; }
.ip-start-btn-section #ip-start-btn { margin: 0; width: 100%; } /* match the name box width */
/* Icons & Players panel: dimmed, non-functional Start button (UI only for now). */
#ip-start-btn[disabled], .ip-start-dim {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.45);
    box-shadow: none;
}
#ip-start-btn[disabled]:hover, .ip-start-dim:hover {
    transform: none;
}
.intro-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.intro-col-header {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFD54F;
    text-align: center;
    border-bottom: 1px solid rgba(255, 213, 79, 0.35);
    padding-bottom: 6px;
    letter-spacing: 0.3px;
}
.intro-col-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}
.intro-col-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: 12px 4px;
}
@media (max-width: 700px) {
    .intro-columns {
        grid-template-columns: 1fr;
    }
}

.intro-game-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.intro-game-btn-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
}
.intro-game-btn-icon svg {
    width: 44px;
    height: 36px;
    display: block;
}
.intro-game-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    word-break: break-word;
}

.intro-game-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.02);
}

.intro-game-btn.selected {
    background: rgba(255,215,0,0.3);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255,215,0,0.3);
}

.intro-default-btn {
    border-color: rgba(255,215,0,0.5);
}

/* Cards-library: eye-icon button next to each game button on the intro
   screen, plus the overlay/modal it opens. The overlay shows every card
   the Player would render for the chosen game, grouped by M-group, with
   red/green borders for any frozen/floating assignments saved on the
   game so the user can verify Studio content survived into the Player. */
.intro-game-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.intro-game-row .intro-game-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 40px;   /* clear the inset eye/folder icons on the right */
}
/* Eye + mini-games(yellow) icons are INSET inside the game box (absolutely
   positioned over its right edge), stacked vertically — eye on top, folder
   under it — as plain icons with NO bordered box around them. */
.intro-game-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
.intro-game-actions .intro-game-eye,
.intro-game-actions .intro-game-mg {
    flex: 0 0 auto;
    width: auto;
    border: none;          /* no border outside the eye / folder */
    background: none;       /* no box fill — plain icon */
    border-radius: 0;
    padding: 1px;
}
/* Eye nudged up 1.5mm (folder stays put). */
.intro-game-actions .intro-game-eye { transform: translateY(-1.5mm); }
.intro-game-actions .intro-game-eye:hover,
.intro-game-actions .intro-game-mg:hover {
    background: none;
    border-color: transparent;
}
.intro-game-actions .intro-game-eye:hover { transform: translateY(-1.5mm) scale(1.05); }
.intro-game-eye {
    flex: 0 0 38px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    padding: 0;
}
.intro-game-eye:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.7);
}
.intro-game-eye svg {
    display: block;
    transform: scale(1.176);   /* eye icon +12% then +5% (1.12 × 1.05) */
}

/* Mini-games folder button (Phase 2c) — sits next to the eye on each game
   row; opens that game's mini-games panel. Gold-accented to distinguish it
   from the eye; carries a count badge. */
.intro-game-mg {
    flex: 0 0 38px;
    position: relative;
    border-radius: 12px;
    border: 2px solid rgba(255,215,0,0.45);
    background: rgba(255,215,0,0.10);
    color: #FFD700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    padding: 0;
}
.intro-game-mg:hover {
    background: rgba(255,215,0,0.22);
    transform: scale(1.05);
    border-color: rgba(255,215,0,0.85);
}
.intro-game-mg svg { display: block; transform: scale(1.513, 1.5735); }   /* width 1.513; height 4% taller (1.513 × 1.04); number is a separate span, unaffected */
/* Count drawn over the folder, fixed size (NOT scaled with the folder icon). */
.intro-game-mg-num {
    position: absolute;
    top: 56%; left: 50%;
    transform: translate(calc(-50% - 0.4mm), calc(-50% + 0.2mm));   /* number nudged 0.4mm left + 0.2mm down */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* Mini-games panel (anchored popover) */
.mg-panel {
    position: fixed;
    z-index: 16000;
    width: 320px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    background: #1e1e2e;
    color: #eee;
    border: 1.5px solid rgba(255,215,0,0.5);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.55);
    font-family: 'Segoe UI', sans-serif;
}
.mg-panel-title { font-size: 14px; font-weight: 700; color: #FFD700; margin-bottom: 8px; }
.mg-panel-empty { color: #999; font-size: 12.5px; padding: 6px 0; }
.mg-panel-item {
    padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
    border: 1px solid transparent; margin: 3px 0; background: rgba(255,255,255,0.05);
}
.mg-panel-item:hover { background: rgba(255,255,255,0.1); }
.mg-panel-item.selected { border-color: #FFD700; background: rgba(255,215,0,0.12); }
.mg-panel-legend {
    margin-top: 8px; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,0.12);
    color: #cfe6ff; font-size: 12.5px; line-height: 1.5; white-space: normal;
}
.mg-item-act {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: #bbb; cursor: pointer; background: rgba(255,255,255,0.06);
}
.mg-item-act:hover { background: rgba(255,255,255,0.18); color: #fff; }
/* Play ▶ — green so it reads as "preview this mini-game". */
.mg-item-play {
    color: #2e7d32;
    background: rgba(76,175,80,0.18);
    font-size: 11px;
}
.mg-item-play:hover { background: #4caf50; color: #06340a; }
.mg-panel-add {
    margin-top: 10px; width: 100%; padding: 8px 10px; border: 1px dashed rgba(255,215,0,0.5);
    border-radius: 8px; background: rgba(255,215,0,0.08); color: #FFD700;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.mg-panel-add:hover { background: rgba(255,215,0,0.18); }

/* Banner atop the Setup card while creating/editing a mini-game. */
#mg-edit-banner {
    margin: 0 0 12px; padding: 9px 16px; border-radius: 10px;
    background: rgba(124,77,255,0.22); border: 1px solid rgba(124,77,255,0.6);
    color: #fff; font-weight: 700; font-size: 15px; text-align: center;
}

.cards-library-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cards-library-modal {
    background: #2a3856;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    max-width: 92vw;
    max-height: 90vh;
    width: 820px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.cards-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cards-library-title {
    color: #FFD54F;
    font-size: 1.05rem;
    font-weight: 600;
}
.cards-library-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cards-library-close:hover {
    background: rgba(255,255,255,0.1);
}
.cards-library-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 8px 20px;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
}
.cards-library-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cards-library-legend-note {
    font-style: italic;
    color: rgba(255,255,255,0.55);
}
.cards-library-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 16px 14px;
}
.cards-library-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    align-items: center;
}
.cards-library-row:last-child { border-bottom: none; }
.cards-library-row-tag {
    flex: 0 0 auto;
    background: rgba(255,213,79,0.18);
    color: #FFD54F;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-right: 4px;
}
.cards-library-card {
    flex: 0 0 auto;
    width: 64px;
    background: white;
    border-radius: 8px;
    border: 3px solid rgba(255,255,255,0.25);
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
}
.cards-library-card-freeze-strip {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 1px;
    width: 0;
    border-left: 4px dotted currentColor;
    pointer-events: none;
}
.cards-library-card-img {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cards-library-card-img svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cards-library-card-img-fallback {
    color: #2a3856;
    font-weight: 700;
    font-size: 0.85rem;
}
.cards-library-card-label {
    font-size: 0.7rem;
    color: #2a3856;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1;
}
.cards-library-empty {
    color: rgba(255,255,255,0.6);
    font-style: italic;
    text-align: center;
    padding: 30px;
}

.intro-play-btn {
    font-size: 1.2rem;
    padding: 14px 40px;
    min-width: 200px;
}

#intro-custom-games {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Start Screen */
#start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* "safe center": stays centered when the setup fits, but falls back to
       flex-start when the content is taller than the viewport so the top never
       gets pushed out of reach. With max-height + overflow-y the Run / Save
       buttons at the bottom are always scrollable-to — previously they overflowed
       below the fixed-100vh .game-container and the page couldn't scroll to them. */
    justify-content: safe center;
    min-height: 80vh;
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 16px;
    text-align: center;
}

#start-screen h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}

.subtitle {
    font-size: 1.5rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Unified Board identity bar (Tier A): one centered pill at the very top of
   every board — Find, Catch, and future game types — holding the editable
   page name + the game name + the ✋/🖱 input-mode glyph. Normal flow at the
   top so it never overlaps the header/HUD below; shrink-to-fit and centered.
   Readable on both the purple Find board and the dark Catch board. */
.board-id-bar {
    /* Full-width row hosting TWO separate boxes: the editable page-name pill
       pinned LEFT (next to the back/home icons) and the game-name title pill
       CENTERED in the middle. (Was a single centered pill containing both, which
       left a big gap between the home icon and the centered text.) */
    width: 100%;
    margin: 10px 0 12px;
    padding: 0;
    background: none;
    text-align: center;          /* centers the title pill */
    white-space: nowrap;
    z-index: 95;
    position: relative; /* anchor for the absolutely-pinned page-name pill */
}
/* Big Game play: the #bg-play-banner is a full-width row at the very top.
   Shift the Catch board down so it clears the banner, and move the board's
   page-name pill to the LEFT next to the back/home icons (the "Game one —
   Stage …" banner stays centered above). */
/* Keep the overlay covering full-screen (so nothing shows behind the banner);
   just push its CONTENT down below the banner and move the page-name pill left
   next to the back/home icons. */
body.bg-playing .catch-game-overlay .board-id-bar {
    margin: 50px 0 12px;   /* down below banner; page-name pill is pinned left by default */
    /* In a Big Game the title (#board-id-game) is EMPTY (the banner names the
       game), so this bar would collapse to height 0 — the absolutely-pinned
       page-name pill then floats up and the HUD rides into the back/home icons
       (overlap). Reserve a real row height so the pill sits in its own row and
       the HUD drops below the icons. Sized to clear the enlarged big-screen
       pill (mirrors the Find board's min-height fix). */
    min-height: 48px;
}
/* The back/home icons are position:fixed (viewport-relative) — push them down
   below the banner explicitly so they sit on the page-name pill's row. */
body.bg-playing .catch-overlay-back,
body.bg-playing .catch-overlay-home { top: 50px; }
/* FIND board (#game-screen): padding-top pushes the whole board below the
   banner (no margin-collapse), the page-name pill goes LEFT next to the icons,
   and the absolute back/home icons drop to the same row. */
body.bg-playing #game-screen { padding-top: 40px; }
/* In a Big Game the title (#board-id-game) is empty — the banner names the game
   instead — so #board-id-bar collapses to height 0 and the status box rides up
   into the back/home icons (overlap). Reserve the icon-row height so the status
   always sits below the icons. (Mini-games fill the bar with a title, so they
   never hit this.) */
body.bg-playing #game-screen #board-id-bar { margin: 0 0 12px; min-height: 44px; }
body.bg-playing #game-screen #back-arrow-btn,
body.bg-playing #game-screen #home-btn-game { top: 40px; }
/* The page-name label lives inside the bar now: drop its absolute corner
   positioning and render it inline next to the game name. Editing and
   persistence are unchanged (same id / gpKey / delegated handlers). */
.board-id-bar .page-name-label {
    /* Its OWN box (pill), pinned left next to the back/home icons (which span
       left 10–92px), vertically centered on the title row. */
    position: absolute;
    left: 96px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 18px;
    border-radius: 999px;
    z-index: auto;
    font-size: 24px;
}
/* Game name + glyph. The "·" separator is a ::before so it only appears when
   a game name is present — an empty span collapses, leaving just the page
   name (e.g. before a game starts). */
.board-id-game {
    /* Its OWN centered box (pill) in the middle of the row. */
    display: inline-block;
    vertical-align: middle;
    max-width: 86vw;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 22px;
    border-radius: 999px;
    font-size: 1.3rem;
    color: #fff;
    opacity: 0.95;
}
.board-id-game:empty {
    display: none;
}
/* Separate boxes now — drop the "·" that used to join page name + title. */
.board-id-game::before {
    content: none;
}
/* The concrete name ("Match 0-4") is split into its own span (no colon in the
   text). Inline (desktop) re-add the ": " separator; phone hides it (2nd line). */
.board-id-name::before { content: ":\00a0"; }

/* Input-mode glyph (✋ touch / 🖱 mouse) shown after the game name in the
   Game Preview subtitle, so the player can see which mode the toggle is in. */
.subtitle-mode-glyph {
    margin-left: 10px;
    font-size: 1.35rem;
    vertical-align: baseline;
    opacity: 0.95;
}
/* Player-mode glyph (1 / 2 stick figures) shown right after the mouse/hand
   icon on Setup and Board pages, reflecting the GP 0 player toggle. */
.subtitle-player-glyph {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: 0.95;
    position: relative;
    top: -2px; /* nudge up to visually align with the mouse/hand glyph */
}
.subtitle-player-glyph svg {
    height: 1.05em;
    width: auto;
}

.setup-panel {
    position: relative;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    min-width: 400px;
}

.setup-panel h3 {
    margin-bottom: 20px;
    font-size: 1.3rem;
}

/* Two-box layout for the main GP F Setup page.
   Box 1 = developer-configured (type/level/domino style).
   Box 2 = player-interactive (icon, player picker, name inputs, Start).
   The visual split makes it easy to tell at a glance which controls
   the player should be touching. */
.setup-box {
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
}
.setup-box:last-child { margin-bottom: 0; }
.setup-box-2 {
    background: rgba(126, 255, 126, 0.07);
    border-color: rgba(126, 255, 126, 0.28);
}

/* Legend + Start flex row at the bottom of Box 1. _renderStartSummary always
   wraps the Legend here; in single-player setups it also moves #player-names
   in (class .has-start) so the Start button sits to the RIGHT of the Legend,
   bottom-aligned (align-items:flex-end). The button hugs the right edge via
   margin-left:auto. 2P/Catch setups keep the button in Box 2 beside the name
   inputs, so .has-start is absent and the Legend renders alone (as before). */
.legend-start-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.legend-start-row.has-start #selected-options-row {
    flex: 0 0 auto;
    width: auto;
    /* Zero the top+bottom margins so the button centers on the Legend's
       VISIBLE box (align-items:center centers margin boxes). */
    margin-top: 0;
    margin-bottom: 0;
}
.legend-start-row.has-start #player-names {
    display: block;
    /* Sit right after the Legend (not pushed to the far right under the Type
       column) so Play + Save group together beside the Legend. */
    margin: 0;
}
.legend-start-row.has-start #player-names > #name-inputs { margin: 0; }
.legend-start-row.has-start #player-names > #start-game-btn { margin: 0; width: 150px; }

/* The setup Start button sits on the purple setup panel, so the sparkly-purple
   fill blended into the background. A crisp light border + drop shadow defines
   its edge so it stands out without losing the praised sparkly look. Scoped to
   the setup button (id) so the end-game / New Game buttons are unaffected. */
#start-game-btn.play-ico-new {
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 0 16px rgba(196, 150, 255, 0.45);
}
.setup-game-icon {
    display: flex;
    /* Left-aligned so the 3-domino icon sits above the first player
       row's leftmost icon (was previously flex-centered). For Find
       Setup specifically, renderInlinePlayerNames also appends a
       .xeno-combo-box here with inline margin-left: auto so it floats
       to the right end of this row. Catch Setup never adds the combo
       box here — it keeps the older below-the-rows layout. align-items
       keeps both children vertically aligned when both are present. */
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 14px;
}
.setup-game-icon-svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
/* Companion hourglass beside the dominos game-icon. Appended only when
   window._currentTimerOn is true (see _updateTimerToggleVisual). Sits
   vertically centered with the dominos SVG, with a 12px gap. */
.setup-game-icon-hourglass {
    font-size: 36px;
    line-height: 1;
    margin-left: 12px;
    align-self: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.setup-columns {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
}

.setup-types-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.setup-types-row h3 {
    margin: 0;
    font-size: 1.05rem;
}
.setup-types-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.setup-type-btn {
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #ddd;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.setup-type-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.setup-type-btn.selected {
    background: rgba(255,215,0,0.25);
    border-color: rgba(255,215,0,0.6);
    color: #FFD700;
    font-weight: 600;
}

/* Catch setup: vertical list of type lines (replaces the domino-style picker). */
.setup-right-types {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.setup-type-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #ddd;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.setup-type-line:hover { background: rgba(255,255,255,0.13); color: #fff; }
.setup-type-line.selected {
    background: rgba(255,215,0,0.22);
    border-color: rgba(255,215,0,0.6);
    color: #FFD700;
    font-weight: 600;
}
.setup-type-line input[type="radio"] {
    accent-color: #FFD700;
    cursor: pointer;
}
/* When admin enables exactly one Type option, render its label as static
   text — no radio, no clickable chrome, no hover highlight. The runtime
   type/behavior is set via _stashTypeChoice so no click is needed. */
.setup-type-line-static {
    cursor: default;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    padding: 8px 4px;
}
.setup-type-line-static:hover { background: transparent; color: rgba(255,255,255,0.85); }

.setup-left {
    flex: 1;
    text-align: center;
}

.setup-right {
    flex: 1;
    text-align: center;
}

.domino-style-select {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.domino-preview {
    border-radius: 6px;
}

.create-edit-btn {
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.5);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    line-height: 1.3;
    text-align: center;
}

.create-edit-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.05);
}

/* Create and Edit Screen */
.create-edit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.create-edit-content h1 {
    margin-bottom: 40px;
}

.create-edit-buttons {
    display: flex;
    gap: 30px;
}

.create-edit-menu-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 30px 50px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.create-edit-menu-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

/* Domino Library Preview Screen */
.domino-library-content {
    padding: 10px 20px 30px 50px;
    max-width: 900px;
    margin: 0 auto;
    overflow-y: auto;
    max-height: 90vh;
}

/* A-CM Card Maker: title stays fixed, only cards scroll */
#domino-library-screen .domino-library-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#domino-library-screen .domino-library-content .library-title {
    flex-shrink: 0;
}
#domino-library-screen .domino-library-content .card-set-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* AGC Found/Catch: titles stay fixed, only cards scroll */
#game-view-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#game-view-cards {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.library-zoom-fixed {
    position: absolute;
    top: 60px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

/* Zoom panel */
.zoom-panel {
    position: absolute;
    top: 55px;
    left: 55px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 110;
    background: rgba(0, 0, 0, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 6px 10px;
}
.zoom-panel-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
}
.zoom-panel-btn {
    min-width: 36px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 8px;
    transition: background 0.15s;
}
.zoom-panel-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.zoom-panel-btn.active {
    background: rgba(255, 215, 0, 0.25);
    border-color: #FFD700;
    color: #FFD700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

/* Loupe mode cursor */
.loupe-cursor,
.loupe-cursor .library-card,
.loupe-cursor .domino-half-preview {
    cursor: zoom-in !important;
}

/* Loupe overlay */
#loupe-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#loupe-overlay .page-name-label {
    position: fixed;
    z-index: 2001;
}
.loupe-close-btn {
    position: fixed;
    top: 16px;
    right: 50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loupe-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
#loupe-card-container {
    position: relative;
    background: #f5e6c8;
    border: 3px solid #c4a45a;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#loupe-card-container svg {
    width: 100%;
    height: 100%;
}
.loupe-grid {
    pointer-events: none;
}
.loupe-grid line {
    stroke: rgba(0, 0, 0, 0.12);
    stroke-width: 0.108;
}
.loupe-grid line.loupe-grid-mid {
    stroke-width: 0.21;
}
.loupe-grid line.loupe-grid-major {
    stroke-width: 0.3;
}
/* Reference cards (Info / Examples — they carry data-info) read as white
   graph-paper so they stand apart from the cream parametric/normal cards.
   openLoupe toggles .loupe-ref-card on the container when one is opened. */
#loupe-card-container.loupe-ref-card {
    background: #ffffff;
    border-color: #9fb4cf;
}
#loupe-card-container.loupe-ref-card .loupe-grid line {
    stroke: rgba(80, 110, 150, 0.22);
}

/* Raise toolbar above loupe overlay when loupe is open */
.library-zoom-fixed.loupe-toolbar-raised {
    position: fixed;
    z-index: 2100;
}
.zoom-panel.loupe-toolbar-raised {
    position: fixed;
    z-index: 2100;
}
#lib-ruler-rect.loupe-toolbar-raised {
    z-index: 2100;
}

/* Disabled buttons during loupe view */
.zoom-btn.loupe-disabled {
    opacity: 0.25 !important;
    pointer-events: none;
}

/* Border overlay on loupe card container */
#loupe-card-container.show-border {
    position: relative;
}
#loupe-card-container.show-border::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-style: solid;
    border-color: rgba(255, 105, 180, 0.35);
    border-width: var(--lby, 20px) var(--lbx, 20px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

/* L4: Loupe resize handles (desktop only — pointer: fine) */
.loupe-resize-handle {
    position: absolute;
    z-index: 2002;
    background: rgba(196, 164, 90, 0.18);
    pointer-events: auto;
    touch-action: none;
}
.loupe-resize-handle.loupe-resize-e { cursor: ew-resize; }
.loupe-resize-handle.loupe-resize-s { cursor: ns-resize; }
.loupe-resize-handle.loupe-resize-se { cursor: nwse-resize; }
.loupe-resize-handle:hover,
.loupe-resize-handle.loupe-resizing {
    background: rgba(196, 164, 90, 0.55);
}
.loupe-resize-handle.loupe-resize-se::after {
    content: '';
    position: absolute;
    right: 3px; bottom: 3px;
    width: 10px; height: 10px;
    border-right: 3px solid rgba(255, 215, 120, 0.95);
    border-bottom: 3px solid rgba(255, 215, 120, 0.95);
    border-bottom-right-radius: 2px;
    pointer-events: none;
}
body.loupe-resizing * { user-select: none !important; }
@media (hover: none) and (pointer: coarse) {
    .loupe-resize-handle { display: none; }
}

/* L4: W/H ratio indicator (shown while dragging the right edge) */
.loupe-ratio-indicator {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2010;
    padding: 6px 16px;
    background: rgba(0, 0, 0, 0.78);
    color: #FFD700;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    border-radius: 6px;
    letter-spacing: 0.5px;
    pointer-events: none;
    display: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.loupe-ratio-indicator.visible { display: block; }

/* Draw tools panel */
#draw-tools-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.85);
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    z-index: 2200;
}

/* L3: Draggable panel drag handle (grip) */
.panel-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 0 7px;
    margin: -4px 0 4px;
    color: rgba(255, 215, 0, 0.7);
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255, 215, 0, 0.18);
    /* Clear grab-bar affordance so users see the panel is movable. */
    background: rgba(255, 215, 0, 0.08);
    border-radius: 7px 7px 0 0;
    transition: background 0.12s, color 0.12s;
    touch-action: none;
}
.panel-drag-handle:hover { color: #FFD700; background: rgba(255, 215, 0, 0.18); }
.panel-drag-handle:active,
.panel-drag-handle.dragging { cursor: grabbing; color: #FFD700; background: rgba(255, 215, 0, 0.24); }

/* Light variant for cream-colored panels (variation toolbar) */
.panel-drag-handle.panel-drag-handle-light {
    color: rgba(120, 90, 20, 0.55);
    border-bottom-color: rgba(120, 90, 20, 0.2);
}
.panel-drag-handle.panel-drag-handle-light:hover { color: rgba(120, 90, 20, 0.95); }
.panel-drag-handle.panel-drag-handle-light:active,
.panel-drag-handle.panel-drag-handle-light.dragging { color: rgba(80, 55, 0, 1); }

body.panel-dragging * { user-select: none !important; }
.draw-tool-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 215, 0, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.draw-tool-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.draw-tool-btn.active {
    background: rgba(255, 215, 0, 0.35);
    border-color: #FFD700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}
.draw-tool-btn.draw-save-btn {
    color: #7eff7e;
    border-color: rgba(126, 255, 126, 0.4);
}
/* Card Shape Picker */
.draw-shape-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 2px 0;
}
.draw-shape-btns {
    display: flex;
    gap: 3px;
}
.draw-shape-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: #ccc;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.draw-shape-btn:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}
.draw-shape-btn.active {
    background: rgba(255,215,0,0.3);
    border-color: #FFD700;
    color: #FFD700;
}
.draw-shape-slider-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ccc;
    font-size: 11px;
}
.draw-shape-slider-row input[type="range"] {
    width: 70px;
    accent-color: #FFD700;
}

.draw-size-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ccc;
    font-size: 12px;
    transition: opacity 0.2s;
}
/* Dim + disable when nothing is selected on the card (Size / fine / Scale) */
.draw-size-row.deactivated {
    opacity: 0.28;
    pointer-events: none;
}
.draw-size-row.deactivated label,
.draw-size-row.deactivated .draw-val {
    color: rgba(255, 255, 255, 0.5);
}
/* Card shape boundary overlay in loupe editor */
.card-shape-boundary {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.draw-size-row input[type="range"] {
    width: 50px;
    accent-color: #FFD700;
}
#draw-overscale-slider {
    width: 72px;
}
.draw-val {
    color: #FFD700;
    font-size: 11px;
    min-width: 18px;
    text-align: right;
    font-family: monospace;
}
.draw-font-row select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 5px;
    background: #444;
    color: #FFD700;
    font-size: 12px;
    cursor: pointer;
}
.font-picker {
    position: relative;
}
.font-category-btn {
    padding: 4px 10px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 5px;
    background: #444;
    color: #FFD700;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    min-width: 36px;
}
.font-category-btn:hover {
    background: #555;
}
.font-categories-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(30, 30, 40, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 200;
    min-width: 120px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.font-recent-section {
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    margin-bottom: 2px;
}
.font-recent-item {
    padding: 6px 14px;
    color: #FFD700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.font-recent-item:hover {
    background: rgba(255, 215, 0, 0.2);
}
.font-cat {
    padding: 7px 14px;
    color: #eee;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.font-cat:hover {
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
}
.font-cat.active {
    background: rgba(255, 215, 0, 0.3);
    color: #FFD700;
    font-weight: bold;
}
.font-list-panel {
    position: absolute;
    top: 100%;
    right: 125px;
    background: rgba(30, 30, 40, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 201;
    min-width: 140px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.font-list-item {
    padding: 6px 14px;
    color: #ddd;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* Digit-width marker. Numbers only stack into columns when every digit has
   the same advance, and 9 of the picker's faces are proportional — so the
   choice of font decides whether column arithmetic can line up at all. */
.fli-dig {
    font-family: 'Segoe UI', sans-serif;
    font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.3px;
    padding: 2px 4px; border-radius: 3px; flex: none;
}
.fli-dig.tab  { background: rgba(126,255,126,0.16); color: #7dff7d; border: 1px solid rgba(126,255,126,0.35); }
.fli-dig.prop { background: rgba(255,196,84,0.16); color: #ffc454; border: 1px solid rgba(255,196,84,0.35); }
.font-list-item:hover {
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
}
.font-list-item.selected {
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    font-weight: bold;
}

/* Draw select mode */
svg .draw-sel-ring {
    pointer-events: none;
}
.draw-tool-btn.draw-delete-btn {
    color: #ff5555;
    border-color: rgba(255, 85, 85, 0.4);
}
.draw-tool-btn.draw-delete-btn:hover {
    background: rgba(255, 85, 85, 0.3);
}

/* Tool separator */
.draw-tool-sep {
    color: rgba(255,255,255,0.25);
    font-size: 18px;
    line-height: 38px;
    margin: 0 2px;
}
/* Tool group with submenu */
.draw-tool-group {
    position: relative;
}
.draw-submenu {
    position: absolute;
    right: 44px;
    top: 0;
    background: rgba(0, 0, 0, 0.92);
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    padding: 8px;
    z-index: 2300;
    min-width: 140px;
    max-height: 70vh;
    overflow-y: auto;
}
.draw-submenu-section {
    margin-bottom: 6px;
}
.draw-submenu-section:last-child {
    margin-bottom: 0;
}
.draw-submenu-label {
    color: rgba(255, 215, 0, 0.7);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    padding-left: 2px;
}
.draw-submenu-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.draw-submenu-item {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.draw-submenu-item:hover {
    background: rgba(255, 255, 255, 0.25);
}
.draw-submenu-item.active {
    background: rgba(255, 215, 0, 0.35);
    border-color: #FFD700;
}
.draw-stamps-grid .draw-submenu-item {
    width: 36px;
    height: 36px;
}
.draw-stamps-grid .draw-submenu-item svg {
    width: 24px;
    height: 24px;
}
/* Selected char indicator on T/Stamps buttons */
.draw-tool-btn .tool-char-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #FFD700;
    color: #000;
    font-size: 9px;
    font-weight: bold;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.draw-tool-btn { position: relative; }

/* Color palette inside Loupe draw tools */
.draw-color-section {
    width: 100%;
    padding: 2px 0;
}
.draw-color-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    justify-items: center;
}
.draw-color-swatches .color-swatch {
    width: 20px;
    height: 20px;
}
.custom-color-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    justify-items: center;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid rgba(255, 215, 0, 0.25);
}
.custom-color-row .color-swatch {
    width: 20px;
    height: 20px;
}
.color-add-btn {
    width: 100%;
    margin-top: 3px;
    padding: 1px 0;
    border: 1px dashed rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    background: transparent;
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.color-add-btn:hover {
    background: rgba(255, 215, 0, 0.15);
}
.color-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(30, 30, 40, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 8px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.color-picker-panel input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    background: none;
}
.color-picker-panel input[type="text"] {
    width: 70px;
    padding: 4px 6px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    background: #333;
    color: #FFD700;
    font-size: 12px;
    font-family: monospace;
}
.color-add-confirm {
    padding: 4px 10px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.2);
    color: #FFD700;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
}
.color-add-confirm:hover {
    background: rgba(255, 215, 0, 0.35);
}

/* Reflect + Rotate: side-by-side row with hover submenus */
.draw-transform-row {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
}
.draw-hover-group {
    position: relative;
}
.draw-hover-submenu {
    display: none;
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.92);
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    padding: 6px;
    z-index: 2300;
    flex-direction: row;
    gap: 4px;
    white-space: nowrap;
}
.draw-hover-group.pinned > .draw-hover-submenu {
    display: flex;
}
.draw-hover-group.pinned > .draw-tool-btn {
    background: rgba(255, 215, 0, 0.35);
    border-color: #FFD700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

/* Variation creation toolbar */
.variation-toolbar {
    position: absolute;
    top: 55px;
    left: 55px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    z-index: 100;
    background: rgba(240, 235, 220, 0.95);
    border: 2px solid rgba(180, 140, 40, 0.8);
    border-radius: 10px;
    padding: 6px 8px;
}
.var-tool-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.var-tool-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid rgba(120, 90, 20, 0.6);
    background: rgba(255, 255, 255, 0.5);
    color: #2255aa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.var-tool-btn:hover {
    background: rgba(180, 140, 40, 0.25);
    border-color: #8a6a18;
    color: #1a4488;
}
.var-tool-btn.active {
    background: rgba(180, 140, 40, 0.35);
    border-color: #8a6a18;
    color: #1a4488;
    box-shadow: 0 0 0 2px rgba(180, 140, 40, 0.4);
}
.var-tool-btn.var-tool-disabled {
    color: rgba(34, 85, 170, 0.35);
    border-color: rgba(120, 90, 20, 0.25);
    background: rgba(255, 255, 255, 0.2);
    cursor: default;
}
.var-tool-sep {
    width: 1px;
    height: 24px;
    background: rgba(255, 215, 0, 0.3);
    margin: 0 2px;
}

/* Duplicate variation highlight */
.duplicate-highlight {
    outline: 5px solid #FF4444 !important;
    outline-offset: 3px;
    border-radius: 10px;
    box-shadow: 0 0 20px 6px rgba(255, 68, 68, 0.7) !important;
    position: relative;
    z-index: 50;
}
.duplicate-highlight .domino-half-preview {
    border-color: #FF4444 !important;
}

/* Duplicate variation confirmation dialog */
#duplicate-var-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.duplicate-var-dialog {
    background: #2a2a2a;
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 24px 32px;
    text-align: center;
    color: #FFD700;
    font-size: 18px;
    max-width: 350px;
}
.duplicate-var-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}
.duplicate-var-btns button {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}
#dup-var-confirm-btn {
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid #FFD700;
    color: #FFD700;
}
#dup-var-confirm-btn:hover {
    background: rgba(255, 215, 0, 0.4);
}
#dup-var-cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ccc;
}
#dup-var-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
#lib-ruler-rect {
    position: fixed;
    top: 120px;
    left: 80px;
    width: 70px;
    height: 70px;
    border: 1.5px solid #FF69B4;
    background: transparent;
    z-index: 99;
    cursor: move;
    box-sizing: border-box;
}
.ruler-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FF69B4;
    border-radius: 50%;
}
.ruler-tl { top: -5px; left: -5px; cursor: nw-resize; }
.ruler-tr { top: -5px; right: -5px; cursor: ne-resize; }
.ruler-bl { bottom: -5px; left: -5px; cursor: sw-resize; }
.ruler-br { bottom: -5px; right: -5px; cursor: se-resize; }
.ruler-t { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.ruler-r { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }
.ruler-b { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.ruler-l { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
.domino-half-preview.show-border {
    position: relative;
}
.domino-half-preview.show-border::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-style: solid;
    border-color: rgba(255, 105, 180, 0.35);
    border-width: var(--by, 3px) var(--bx, 3px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}
.zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
}
.zoom-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.08);
}
.zoom-btn:active {
    transform: scale(0.95);
}
.library-title {
    text-align: left;
    color: #FFD700;
    font-size: 1.5rem;
    margin: 10px 0 5px 40px;
}
/* Game-type indicator inline with "Game Creator" — set by openGameView
   / openCatchGameView to "FIND THE DOUBLES" or "CATCH THE MATCHING
   BUBBLE". White, all caps so it reads as a distinct subtitle next to
   the gold "Game Creator" h1 text. */
.game-creator-type {
    color: #fff;
    text-transform: uppercase;
    margin-left: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.library-subtitle {
    text-align: left;
    color: #ddd;
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0 0 10px 40px;
}

/* Card Library Screen */
.card-library-content {
    padding: 30px 40px;
    max-width: 900px;
    margin: 0 auto;
}

.library-two-columns {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.library-col {
    flex: 1;
}

.library-col-heading {
    color: #FFD700;
    font-size: 1rem;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.library-set-row,
.library-set-item-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.library-set-row .library-set-btn,
.library-set-item-custom .library-set-btn {
    flex: 1;
}

.library-set-delete-btn {
    background: #e74c3c;
    border: none;
    color: #222;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
}

.delete-mode .library-set-delete-btn {
    display: flex;
}

.library-set-delete-btn:hover {
    background: #c0392b;
}

.library-set-copy-btn {
    background: rgba(255, 215, 0, 0.25);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #FFD700;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.library-set-copy-btn:hover {
    background: rgba(255, 215, 0, 0.4);
}

.library-create-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background 0.2s;
}

.library-create-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.library-set-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.library-set-actions .library-create-btn,
.library-set-actions .library-delete-mode-btn {
    margin-bottom: 0;
}

.library-delete-mode-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}

.library-delete-mode-btn::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.6pt);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 33%;
    height: 2.4pt;
    background: #fff;
    border-radius: 1px;
}

.library-delete-mode-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.library-delete-mode-btn.active {
    background: rgba(231, 76, 60, 0.5);
    border-color: #e74c3c;
}

.new-set-input {
    background: rgba(255,255,255,0.1);
    border: 1px dashed rgba(255,255,255,0.4);
    color: white;
    font-size: 0.95rem;
    padding: 10px 15px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.new-set-input:focus {
    border-color: #7eff7e;
    background: rgba(255,255,255,0.15);
}

.new-set-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.library-set-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.library-set-btn:hover {
    background: rgba(255,255,255,0.25);
}

.library-set-btn.selected {
    background: rgba(255,215,0,0.18);
    border-color: #FFD700;
    color: #FFD700;
}

.library-set-games {
    margin: 0;
}

/* Card set preview in Library */
.card-set-preview {
    margin-top: 12px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    padding: 8px;
}

.card-preview-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.card-preview-thumb {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.card-preview-thumb svg {
    width: 100%;
    height: 100%;
    display: block;
}

.library-edit-btn {
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    align-self: stretch;
    margin-bottom: 8px;
}

.library-edit-btn:hover {
    background: rgba(255,215,0,0.3);
}

/* Library folders */
.library-folder-section {
    margin-bottom: 8px;
}
.library-folder-heading {
    color: rgba(255, 215, 0, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 8px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.library-folder-heading .folder-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.library-folder-heading .folder-arrow.collapsed {
    transform: rotate(-90deg);
}
.library-folder-contents {
    padding-left: 14px;
    border-left: 1px solid rgba(255, 215, 0, 0.15);
    margin-left: 6px;
}
.library-folder-contents.collapsed {
    display: none;
}
.library-folder-section .library-set-item-custom {
    margin-bottom: 4px;
}
.library-set-move-btn {
    background: none;
    border: 1px solid rgba(255,215,0,0.3);
    color: rgba(255,215,0,0.6);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.library-set-move-btn:hover {
    background: rgba(255,215,0,0.15);
    color: #FFD700;
}
.move-menu {
    position: absolute;
    background: rgba(30, 30, 40, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    padding: 4px;
    z-index: 300;
    min-width: 120px;
}
.move-menu button {
    display: block;
    width: 100%;
    padding: 6px 10px;
    background: none;
    border: none;
    color: white;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
}
.move-menu button:hover {
    background: rgba(255,215,0,0.2);
}

/* Compact view: hide descriptions, tighten spacing */
.compact-view .library-desc {
    display: none;
}

.compact-view .library-label {
    display: none;
}

.compact-view .library-card {
    margin-bottom: 0;
}

.compact-view .library-row {
    gap: 8px;
    margin-bottom: 5px;
    align-items: center;
}

.library-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFD700;
    font-size: 1.4rem;
    font-weight: bold;
    flex-shrink: 0;
}

.library-section {
    margin-top: 12px;
    border-bottom: 2px solid #FF69B4;
    padding-bottom: 0;
    height: 0;
}

/* ==========================================================
   Icons row (IC — Icons' Creator) — Phase 1
   Sits at the top of each card set's container, above row A.
   Contains two subsections: Find and Catch. Icon cards are
   rendered at 50% scale; templates are visually flagged.
   ========================================================== */
.library-icons-section {
    background: rgba(255, 213, 79, 0.07);
    border: 1.5px dashed rgba(255, 213, 79, 0.45);
    border-radius: 10px;
    padding: 6px 10px 8px;
    margin: 6px 0 14px;
}
.library-icons-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.library-icons-title {
    font-weight: bold;
    font-size: 13px;
    color: #FFD54F;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.library-icons-toggle {
    color: #FFD54F;
    font-size: 12px;
}
.library-icons-section.collapsed .library-icons-body { display: none; }
.library-icons-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.icons-subsection {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
}
.icons-subsection-header {
    font-size: 11px;
    font-weight: bold;
    color: #4DD0E1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-left: 2px;
}
.icons-subsection-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* bottom-align so small templates sit on the same baseline as big ones */
    gap: 16px;             /* spacing scaled down for the smaller cards */
    padding: 4px 4px 2px;
}
/* Icon cards: 70% of a regular Card-Maker card. Size differences between
   templates come from the preview element's width/height (set by
   _applyShapeToPreview), not a transform. */
.icon-card {
    text-align: center;
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Fixed footprint so the small templates don't collapse the row layout. */
    min-width: 52px;
}
/* Non-clipping wrapper around the preview so the copy/delete buttons can
   hang off the bubble's corners without being clipped by overflow:hidden. */
.icon-preview-wrap {
    position: relative;
    display: inline-block;
    line-height: 0; /* avoid spurious vertical space below the preview */
}
.icon-card .domino-half-preview {
    /* Default size; _applyShapeToPreview overrides per template. */
    width: 49px;
    height: 49px;
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;   /* so the inner size-class label can absolute-position over the SVG */
}
.icon-card .domino-half-preview svg {
    width: 60px;
    height: 60px;
    overflow: hidden;
}
/* Size-class label rendered INSIDE the card preview, centred. Sized to
   stay readable even on S3 (~20×20). The label is purely informational
   so we disable pointer events so future drag handling lands on the
   card, not the label. */
.icon-inner-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 11px;
    color: #2a2a3e;
    background: rgba(255, 215, 0, 0.85);
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1;
    letter-spacing: 0.3px;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
}
.icon-card .library-desc {
    font-size: 12px;
    color: #FFD54F;
    margin-top: 4px;
    max-width: 80px;
    font-style: italic;
    letter-spacing: 0.3px;
}
.icon-card[data-icon-template="true"] .domino-half-preview {
    border-style: dashed;
    opacity: 0.95;
}
/* Force-show desc on icon cards even when the Card Maker is in
   .compact-view (which hides .library-desc globally). The size-class
   label is rendered inside the preview, so .library-label isn't used. */
.compact-view .icon-card .library-desc {
    display: block;
}

/* User icons (non-template): solid border, full opacity, and the desc
   reads 'icon' instead of 'template'. The dashed/dim template look is
   driven by [data-icon-template="true"] already; user icons get the
   default look. We add a subtle blue tinge to make user icons
   distinguishable from templates at a glance. */
.icon-card:not([data-icon-template="true"]) .domino-half-preview {
    border-color: #4DD0E1;
}
.icon-card:not([data-icon-template="true"]) .library-desc {
    color: #4DD0E1;
    font-style: normal;
}

/* ----- Icon copy / delete buttons (Phase 2.1) -----
   Buttons anchor to the icon-card itself (which wraps the variable-size
   preview). Top/left offsets are negative so they hang off the corners
   regardless of how small the inner bubble is. */
.icon-copy-btn {
    position: absolute;
    top: -6px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #27ae60;
    color: white;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    /* Always-visible (was hover-only). Icon affordances were hard
       to discover when they only appeared on hover. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.icon-copy-btn:hover { background: #1e8449; }

.icon-delete-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #e74c3c;
    color: #222;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;  /* always visible (was hover-only) */
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.icon-delete-btn:hover { background: #c0392b; color: #fff; }

/* Safe Haven: restore (↷) button — bottom-left of preview wrap. */
.icon-restore-btn {
    position: absolute;
    bottom: -6px;
    left: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #2e7d32;
    color: white;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.icon-card[data-icon-trashed="true"] .icon-restore-btn { display: flex; }
.icon-restore-btn:hover { background: #1b5e20; }

/* Safe Haven: permanent delete (✕) button — top-right of preview wrap. */
.icon-purge-btn {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.icon-card[data-icon-trashed="true"] .icon-purge-btn { display: flex; }
.icon-purge-btn:hover { background: #c0392b; }

/* Visual cue that the icon is in the trash. */
.icon-card[data-icon-trashed="true"] .domino-half-preview {
    opacity: 0.85;
    border-color: #e74c3c;
    border-style: dashed;
}

/* Empty-state messages. .icons-trash-empty was the prior flat-list
   placeholder (kept for any callers). .icons-subsection-empty is the
   new per-gametype placeholder used inside Safe Haven's Find/Catch
   subsections when no trashed icons of that type exist. */
.icons-trash-empty,
.icons-subsection-empty {
    padding: 12px 8px;
    color: #aaa;
    font-size: 12px;
    font-style: italic;
    text-align: center;
}

/* 'Add to game' button on user icons (bottom-right of the preview
   wrap). Always visible (was hover-only — too discoverable as a
   tiny popup-on-hover). */
.icon-send-btn {
    position: absolute;
    bottom: -6px;
    right: -10px;
    height: 16px;
    min-width: 22px;
    padding: 0 4px;
    border-radius: 8px;
    border: none;
    background: #3498db;
    color: white;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;  /* always visible (was hover-only) */
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    z-index: 5;
}
.icon-send-btn:hover { background: #2473a8; }
.icon-send-confirmed .domino-half-preview {
    box-shadow: 0 0 0 3px #27ae60;
}

/* Game picker popup (anchored to the send button). */
.icon-game-picker {
    position: absolute;
    background: #2a2a3e;
    border: 1px solid rgba(255, 213, 79, 0.5);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    padding: 6px 0;
    z-index: 10001;
    min-width: 160px;
    max-width: 260px;
    max-height: 260px;
    overflow-y: auto;
}
.icon-game-picker-header {
    padding: 4px 12px 6px;
    font-size: 11px;
    font-weight: bold;
    color: #FFD54F;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 213, 79, 0.2);
    margin-bottom: 4px;
}
.icon-game-picker-empty {
    padding: 8px 12px;
    color: #888;
    font-size: 12px;
    font-style: italic;
}
.icon-game-picker-row {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
}
.icon-game-picker-row:hover:not(:disabled) {
    background: rgba(255, 213, 79, 0.18);
    color: #FFD54F;
}
.icon-game-picker-row:disabled {
    color: #666;
    cursor: not-allowed;
    font-style: italic;
}
.icon-game-picker-hint {
    margin-top: 6px;
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 213, 79, 0.2);
    color: #9aa;
    font-size: 11px;
    line-height: 1.45;
    font-style: italic;
}

/* When editing an icon, disable shape-related controls in the loupe
   toolbar. The icon's shape is dictated by its sizeClass and must not
   change during editing — otherwise the icon stops fitting its IC slot.
   Drawing tools, colors, text, stamps, size, fine and Scale all stay
   active because they don't alter the card's outer shape. */
/* During icon edit, hide the shape row entirely (its options would
   break the icon's size-class fit). The toolbar reclaims that
   vertical space, so the top buttons (select / T / stamps / SVG)
   end up sitting closer to the rest of the controls. */
body.editing-icon #draw-shape-row {
    display: none;
}

/* While EDITING a card or icon (loupe open), the left toolbar shows ONLY two
   direct icons: the pink-border toggle (#border-btn, relocated here from the
   zoom panel by openLoupe) and the spoken-title mic (#stp-toggle-btn, "sound").
   No loupe/zoom button, no ruler/V/V+/+/copy-from-set/IC/GM/Word. user, June 13. */
body.loupe-active #domino-library-screen .library-zoom-fixed > .zoom-btn {
    display: none !important;
}
body.loupe-active #domino-library-screen .library-zoom-fixed > #border-btn.in-loupe-toolbar,
body.loupe-active #domino-library-screen .library-zoom-fixed > #stp-toggle-btn {
    display: flex !important;
}
/* Editing an ICON: keep only the pink-border icon — hide the sound mic
   (spoken titles are a card concept) (user, June 13). Placed after the show
   rule so it wins at equal specificity. */
body.editing-icon #domino-library-screen .library-zoom-fixed > #stp-toggle-btn {
    display: none !important;
}
/* Border button adopts the round toolbar-button look while it lives here. */
#border-btn.in-loupe-toolbar { font-size: 18px; }

/* Real-size preview shown during icon edit.
   Default placement (fallback): pinned to the top-right of the loupe
   overlay so it never blocks the editor canvas.
   Preferred placement: inside #draw-tools-panel (gets .in-panel class),
   docked at the top so it travels with the toolbar when dragged. */
.icon-real-size-preview {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(42, 42, 62, 0.92);
    border: 1px solid rgba(255, 213, 79, 0.55);
    border-radius: 10px;
    padding: 6px 8px 8px;
    z-index: 10002;          /* above the loupe overlay's own contents */
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;    /* purely informational — never blocks clicks */
    user-select: none;
}
/* When docked in the toolbar: no absolute positioning (in-flow at the
   panel's top), tighter padding, blend with the panel's chrome. */
.icon-real-size-preview.in-panel {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    box-shadow: none;
    background: rgba(255, 213, 79, 0.08);
    border: 1px dashed rgba(255, 213, 79, 0.45);
    margin: 0 auto 6px;
    padding: 4px 6px 6px;
    width: 100%;
    box-sizing: border-box;
}
.icon-real-size-label {
    font-size: 10px;
    font-weight: bold;
    color: #FFD54F;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}
.icon-real-size-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
}
.icon-real-size-card {
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.icon-real-size-card svg {
    display: block;
}

/* × remove button on IC panel thumbnails (top-right). */
.mpp-icon-thumb-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: bold;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    display: none;
    pointer-events: auto;
    z-index: 6;
}
.mpp-icon-thumb:hover .mpp-icon-thumb-remove { display: block; }
.mpp-icon-thumb-remove:hover { background: #c0392b; }

.library-row {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin: 10px 0;
}
.library-row[data-row-letter]::before {
    /* Legacy rule kept in case a row renders before _addRowLetterSpan runs.
       When the real .library-row-letter span is present, it visually replaces
       this pseudo-element because the span sits at the same layout position
       and has the same styling. */
    content: '';
    display: none;
}
/* Row letter — real DOM element so it can receive clicks (for row-select
   in Game Maker and Group Edit modes). */
.library-row-letter {
    font-size: 14px;
    font-weight: bold;
    color: #FFD700;
    opacity: 0.5;
    align-self: center;
    margin-right: 4px;
    flex-shrink: 0;
    min-width: 14px;
    text-align: center;
    user-select: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s, opacity 0.15s;
}
.library-row.empty-row .library-row-letter {
    font-size: 22px;
    opacity: 0.6;
    letter-spacing: 1px;
}
/* Clickable when in Game Maker or Group Edit mode */
body.game-maker-active .library-row-letter,
body.group-edit-active .library-row-letter {
    cursor: pointer;
}
body.game-maker-active .library-row-letter:hover,
body.group-edit-active .library-row-letter:hover {
    background: rgba(255, 215, 0, 0.22);
    opacity: 1;
    color: #FFF176;
}
.library-row.empty-row {
    min-height: 38px;
    align-items: center;
    padding-left: 6px;
    opacity: 0.5;
}
.library-row.empty-row::before {
    content: '';
    display: none;
}

/* ── Card Maker column-number titles (placeholder) ──────────────────
   A small "column" toggle sits above row A (below the top pink line).
   Pressing it drops a strip of column numbers over the cards; each
   number is styled like the row-letter titles. While on, every line
   is kept to a single row (nowrap) so number N stays above the Nth
   card, and the card area's own overflow-x supplies the slider. */
.cm-colnum-bar {
    display: flex;
    align-items: flex-end;
    width: max-content;          /* grow with the numbers so it scrolls with the rows */
    margin: 4px 0 0;
    position: relative;
}
/* Off: the toggle must NOT push row A down. The bar collapses to zero
   height and the button hangs down into the top-left of row A (over the
   empty space above the centred "A"), so nothing is added above the row. */
.cm-colnum-bar:not(.is-on) {
    height: 0;
    margin: 0;
    z-index: 5;
}
.cm-colnum-bar:not(.is-on) .cm-colnum-btn-slot {
    position: absolute;
    top: 1px;
    left: 0;
}
.cm-colnum-bar.is-on {
    margin: 8px 0 6px;           /* the extra vertical space that the numbers occupy */
    align-items: center;         /* icon sits vertically centred on the column numbers */
}
.cm-colnum-btn-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-colnum-btn {
    background: transparent;
    border: none;
    color: #FFD700;
    opacity: 0.7;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    transition: opacity 0.15s, transform 0.15s;
}
.cm-colnum-btn:hover { opacity: 1; transform: translateY(1px); }
.cm-colnum-strip {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}
.cm-colnum {
    flex: 0 0 auto;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #FFD700;
    opacity: 0.5;
    user-select: none;
    line-height: 1.1;
}
/* Keep each line on one row while numbering is on, so the columns line
   up under their numbers; the container's overflow-x gives the slider. */
.card-set-content.cm-colnums-on > .library-row { flex-wrap: nowrap; }

/* New card mode: letter labels on rows */
.row-letter-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(126, 255, 126, 0.25);
    border: 2px solid #7eff7e;
    color: #7eff7e;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    align-self: center;
    flex-shrink: 0;
}
.row-letter-label:hover {
    background: rgba(126, 255, 126, 0.5);
    transform: scale(1.15);
}
.new-group-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 8px 0;
}
.new-group-letter {
    border-style: dashed;
}
.new-group-hint {
    color: rgba(126, 255, 126, 0.6);
    font-size: 13px;
    font-style: italic;
}

.library-card {
    text-align: center;
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.library-label {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 3px;
    color: #FFD700;
}

.domino-half-preview {
    width: 70px;
    height: 70px;
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Info / Examples reference cards (data-info) — white tile with a faint
   bluish-grey grid so they read as "graph paper" reference cards, distinct
   from the cream parametric/normal card tiles. */
.library-card[data-info="true"] .domino-half-preview {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(80, 110, 150, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 110, 150, 0.18) 1px, transparent 1px);
    background-size: 6px 6px;
    border-color: #9fb4cf;
}

.domino-half-preview svg {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

.library-desc {
    font-size: 11px;
    color: #ccc;
    margin-top: 3px;
    max-width: 80px;
}

/* Variation box (appears under row when card is clicked) */
.variation-box {
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 105, 180, 0.5);
    border-radius: 10px;
    padding: 12px 15px;
    margin: 5px 0 10px 0;
}

.variation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.variation-close-btn {
    background: none;
    border: none;
    color: #FFD700;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
}
.variation-close-btn:hover {
    color: #fff;
}

.variation-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.variation-item {
    text-align: center;
}

.variation-item-label {
    font-size: 12px;
    color: #ccc;
    margin-bottom: 4px;
    font-weight: bold;
}

.variation-preview {
    width: 70px;
    height: 70px;
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.variation-preview svg {
    width: 60px;
    height: 60px;
}

.variation-add-btn {
    margin-top: 4px;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.5);
    color: #FFD700;
    border-radius: 4px;
    padding: 2px 12px;
    font-size: 12px;
    cursor: pointer;
}
.variation-add-btn:hover {
    background: rgba(255, 215, 0, 0.4);
}

/* Color palette in variation box */
.color-palette-section {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}
.color-palette-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.color-palette-mode-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ccc;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
}
.color-palette-mode-btn.active {
    background: rgba(255, 215, 0, 0.3);
    border-color: #FFD700;
    color: #FFD700;
    font-weight: bold;
}
.color-palette-mode-btn:hover {
    background: rgba(255, 215, 0, 0.2);
}
.color-palette-swatches {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.1s;
}
.color-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

/* Added variation card in row */
.library-card.variation {
    position: relative;
}

.variation-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #e74c3c;
    color: white;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.variation-delete-btn:hover {
    background: #c0392b;
}

/* Delete button for all cards (hidden until hover) */
.card-delete-btn {
    position: absolute;
    top: -7px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #e74c3c;
    color: #222;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.library-card:hover .card-delete-btn,
.library-card.card-clicked .card-delete-btn {
    display: flex;
}
.card-delete-btn:hover {
    background: #c0392b;
    color: white;
}

/* Variation "v" button — upper-left corner of card */
.card-var-btn {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #3498db;
    color: white;
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.library-card:hover .card-var-btn,
.library-card.card-clicked .card-var-btn {
    display: flex;
}
.card-var-btn:hover {
    background: #2980b9;
}

/* Copy button — bottom-left corner of card */
.card-copy-btn {
    position: absolute;
    bottom: 16px;
    left: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #27ae60;
    color: white;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 5;
}
.library-card:hover .card-copy-btn,
.library-card.card-clicked .card-copy-btn {
    display: flex;
}
.card-copy-btn:hover {
    background: #1e8449;
}

/* Drag-to-move feedback */
.library-card.dragging {
    opacity: 0.35;
}
.library-row.drag-over {
    outline: 2px dashed #FFD700;
    outline-offset: 4px;
    border-radius: 8px;
}
/* Drop indicator line for card reordering */
.card-drop-indicator {
    position: fixed;
    width: 3px;
    background: #FFD700;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 0 6px rgba(255,215,0,0.6);
}

/* Game Maker trigger button */
.game-maker-trigger {
    font-size: 13px !important;
    letter-spacing: 1px;
}

/* Game list panel on left side of Card Maker */
.card-maker-games {
    position: absolute;
    top: 520px;
    left: 5px;
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100;
}

.card-maker-game-btn {
    width: 92px;
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.12);
    color: #FFD700;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 4px;
    line-height: 1.2;
    word-break: break-word;
    text-align: center;
    transition: background 0.2s;
}
.card-maker-game-btn:hover {
    background: rgba(255,215,0,0.3);
}

.card-maker-game-row {
    display: flex;
    gap: 2px;
    align-items: stretch;
}

.card-maker-game-row .card-maker-game-btn {
    flex: 1;
    min-width: 0;
}

.card-maker-copy-btn {
    width: 18px;
    min-height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(255,215,0,0.4);
    background: rgba(255,215,0,0.08);
    color: #FFD700;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
}
.card-maker-copy-btn:hover {
    background: rgba(255,215,0,0.3);
}

/* Game Maker overlay */
#game-maker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.game-maker-dialog {
    background: #2a1a3a;
    border: 2px solid #FFD700;
    border-radius: 12px;
    padding: 25px;
    max-width: 400px;
    width: 90%;
    color: white;
}

.game-maker-dialog h2 {
    color: #FFD700;
    margin: 0 0 15px 0;
    font-size: 1.3rem;
}

.game-maker-dialog label {
    display: block;
    margin: 10px 0 5px;
    color: #ccc;
    font-size: 14px;
}

.game-maker-dialog input,
.game-maker-dialog textarea,
.game-maker-dialog select {
    width: 100%;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #1a0a2a;
    color: white;
    font-size: 14px;
    box-sizing: border-box;
}

.game-maker-dialog select option {
    background: #1a0a2a;
    color: white;
}

.game-maker-dialog-btns {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.game-maker-dialog-btns button {
    padding: 8px 20px;
    border: 1px solid #FFD700;
    border-radius: 6px;
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    cursor: pointer;
    font-size: 14px;
}
.game-maker-dialog-btns button:hover {
    background: rgba(255,215,0,0.3);
}

/* Game Maker selection bar */
#game-maker-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(255,105,180,0.9);
    color: white;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 150;
    font-weight: bold;
}

#game-maker-bar button {
    padding: 6px 16px;
    border: 2px solid white;
    border-radius: 6px;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
}
#game-maker-bar button:hover {
    background: rgba(255,255,255,0.2);
}

#game-maker-bar-text {
    flex: 1;
}

/* Shape Mode popup */
#shape-mode-popup {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 110;
    background: rgba(0, 0, 0, 0.88);
    border: 1.5px solid rgba(0, 150, 255, 0.6);
    border-radius: 10px;
    padding: 8px 10px;
    width: 115px;
}
.shape-mode-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
#shape-mode-popup button {
    padding: 4px 10px;
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 5px;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 12px;
}
#shape-mode-popup button:hover {
    background: rgba(255,255,255,0.15);
}
.shape-mode-shapes {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.shape-mode-shape-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 4px !important;
}
.shape-mode-width-row input[type="range"] {
    width: 70px;
}
.shape-mode-select-all {
    width: 100%;
}
.shape-mode-cancel {
    width: 100%;
    color: #ff6b6b !important;
    border-color: rgba(255,107,107,0.4) !important;
}

/* GM popup game list */
.gm-popup {
    position: absolute;
    top: 60px;
    left: 55px;
    min-width: 160px;
    max-height: 70vh;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.85);
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    padding: 6px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gm-popup-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.gm-popup-btn:hover {
    background: rgba(255, 215, 0, 0.25);
}
.gm-popup-btn.gm-new-game {
    color: #7eff7e;
    border-color: rgba(126, 255, 126, 0.3);
    background: rgba(126, 255, 126, 0.08);
}
.gm-popup-btn.gm-new-game:hover {
    background: rgba(126, 255, 126, 0.2);
}

.gm-popup-row {
    display: flex;
    gap: 3px;
    align-items: stretch;
}
.gm-popup-row .gm-popup-btn {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.gm-popup-edit-btn {
    padding: 6px 10px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 215, 0, 0.08);
    color: #FFD700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.gm-popup-edit-btn:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* Selected card highlight */
.library-card.card-selected .domino-half-preview {
    box-shadow: 0 0 0 3px #FFD700, 0 0 12px rgba(255,215,0,0.5);
    border-color: #FFD700;
}

/* Red box around unselected cards in Game Maker editing mode */
.game-maker-editing .library-card:not(.card-selected) .domino-half-preview {
    border-color: #CC3333;
    box-shadow: 0 0 0 2px rgba(204, 51, 51, 0.4);
}

/* Group Edit mode */
.library-card.ge-selected .domino-half-preview {
    box-shadow: 0 0 0 3px #42A5F5, 0 0 10px rgba(66,165,245,0.4);
    border-color: #42A5F5;
}
.library-card.ge-reference .domino-half-preview {
    box-shadow: 0 0 0 3px #FFD700, 0 0 14px rgba(255,215,0,0.6);
    border-color: #FFD700;
}
.library-card.ge-reference::after {
    content: '\2605';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 14px;
    color: #FFD700;
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
    z-index: 10;
    pointer-events: none;
}
.ge-action-btn {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.ge-action-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.ge-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
#group-edit-btn.active {
    background: rgba(206,147,216,0.35);
    box-shadow: 0 0 8px rgba(206,147,216,0.5);
    color: #fff;
}
.ge-action-btn.ge-erase-btn {
    border-color: rgba(239,83,80,0.6);
    background: rgba(239,83,80,0.12);
    color: #EF5350;
}
.ge-action-btn.ge-erase-btn:hover:not(:disabled) {
    background: rgba(239,83,80,0.3);
    color: #fff;
}

/* Narrow Group Edit toolbar. Default position is computed dynamically —
   placed directly under the Gr button in the left tool strip whenever GE
   is entered and no custom position has been saved. Draggable via the
   shared .panel-drag-handle / _wirePanelDrag helper. */
.ge-toolbar {
    position: fixed;
    top: 80px;
    left: 10px;
    z-index: 9000;
    width: 144px;
    background: #1e1e2e;
    border: 2px solid #CE93D8;
    border-radius: 14px;
    padding: 4px 10px 10px;
    color: #ddd;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    box-sizing: border-box;
}
.ge-toolbar .panel-drag-handle {
    color: rgba(206,147,216,0.55);
    border-bottom-color: rgba(206,147,216,0.25);
}
.ge-toolbar .panel-drag-handle:hover { color: rgba(206,147,216,0.95); }
.ge-toolbar .ge-status {
    font-size: 11px;
    margin: 4px 0 8px;
    color: #CE93D8;
    text-align: center;
    line-height: 1.3;
}
.ge-toolbar .ge-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.ge-toolbar .ge-action-grid .ge-action-btn {
    padding: 6px 0;
    font-size: 13px;
    font-weight: bold;
    min-height: 28px;
}
.ge-toolbar .ge-erase-row {
    margin-top: 6px;
}
.ge-toolbar .ge-erase-row .ge-action-btn {
    width: 100%;
    padding: 5px 6px;
    font-size: 11px;
}
.ge-toolbar .ge-nav-row {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(206,147,216,0.2);
}
.ge-toolbar .ge-nav-btn {
    flex: 1;
    font-size: 10px;
    padding: 4px 2px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
.ge-toolbar .ge-nav-btn:hover {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
.ge-toolbar .ge-nav-btn.ge-exit-btn {
    border-color: rgba(255,255,255,0.55);
}

/* Custom SVG faces inside domino halves */
.domino-half svg.custom-face {
    width: 85%;
    height: 85%;
}

/* Highlight active custom game button on start screen */
.custom-game-btn.active {
    background: rgba(255,215,0,0.35);
    box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* Game list on Library page */
.library-game-link {
    display: block;
    text-align: left;
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 1.1rem;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s;
}
.library-game-link:hover {
    color: #FFD700;
}

/* Game Settings cogwheel (Phase A) */
.game-settings-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    flex: 0 0 auto;
}
.game-settings-btn:hover {
    background: rgba(255,215,0,0.25);
    color: #FFD700;
    transform: rotate(30deg);
}

/* Game Settings modal */
.gs-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 20000;
    display: flex; align-items: center; justify-content: center;
}
.gs-dialog {
    background: #1e1e2e;
    color: #ddd;
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 14px;
    width: 90%;
    max-width: 640px;
    max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    font-family: Segoe UI, sans-serif;
}
.gs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.gs-header h2 { margin: 0; font-size: 18px; color: #FFD700; font-weight: 600; }
.gs-close {
    background: transparent; border: none; color: #aaa;
    font-size: 22px; cursor: pointer; padding: 0 8px; line-height: 1;
}
.gs-close:hover { color: #fff; }

.gs-tabs {
    display: flex; gap: 6px; align-items: center;
    padding: 10px 18px 0;
    flex-wrap: wrap;
}
.gs-tab {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    color: #ccc; font-size: 13px; font-weight: 600;
    cursor: pointer; border-radius: 6px 6px 0 0;
}
.gs-tab.active {
    background: rgba(255,215,0,0.2);
    border-color: rgba(255,215,0,0.6);
    color: #FFD700;
}
.gs-tab:hover:not(.active) { background: rgba(255,255,255,0.12); color: #fff; }
.gs-copy-tm, .gs-copy-from {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid rgba(0,188,212,0.5);
    background: rgba(0,188,212,0.1);
    color: #4dd0e1;
    font-size: 11px; cursor: pointer; border-radius: 6px;
}
.gs-copy-tm:hover, .gs-copy-from:hover { background: rgba(0,188,212,0.3); color: #fff; }
.gs-copy-from { margin-left: 4px; }

.gs-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
}
.gs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gs-timer-row { padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 8px; }
.gs-timer-row label {
    color: #FFD54F;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    min-width: 130px;
}
.gs-timer-row input {
    width: 70px; padding: 5px 8px;
    background: #2a2a3a; color: #fff;
    border: 1px solid rgba(255,255,255,0.3); border-radius: 5px;
    font-size: 14px;
}
.gs-timer-row small { color: #888; font-size: 11px; }

.gs-section {
    margin-top: 14px; padding: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}
.gs-section.hidden { display: none; }
.gs-section-title {
    margin: 0;
    color: #FFD54F;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex: 0 0 auto;        /* sit on the same flex row as the axis input */
    white-space: nowrap;
}
.gs-axis-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* Show-only-checked filter: when this class is on .gs-options, every
   option row tagged .is-unchecked collapses out of layout. The data
   stays in DOM so _gsCaptureForm's positional read still aligns with
   axisData.options[idx]. */
.gs-options.gs-options-only-checked .gs-option-row.is-unchecked { display: none; }
.gs-axis-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}
.gs-axis-controls button {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gs-axis-controls button:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.45);
}
.gs-axis-controls button:disabled {
    opacity: 0.4;
    cursor: default;
}
.gs-uc-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255,140,0,0.18);
    color: #ffb14a;
    border: 1px solid rgba(255,140,0,0.45);
    border-radius: 10px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: help;
}
.gs-option-prefix {
    flex: 0 0 83px;        /* fixed-width column — keeps the editable
                              text boxes column-aligned across rows
                              regardless of prefix length (longest is
                              the Players-axis "3 players + t"). */
    box-sizing: border-box;
    padding: 0 4px;
    color: #FFD54F;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}
.gs-add-option-btn {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    background: rgba(0,188,212,0.12);
    color: #4DD0E1;
    border: 1px dashed rgba(0,188,212,0.5);
    border-radius: 5px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
}
.gs-add-option-btn:hover { background: rgba(0,188,212,0.25); color: #fff; }
/* When the Add-option button moves into the per-axis controls row
   (shared line with Rearrange + Show-all), reset the standalone
   layout overrides so it sits on the same baseline as its neighbors. */
.gs-axis-controls .gs-add-option-btn {
    align-self: center;
    margin-top: 0;
}
.gs-remove-option-btn {
    width: 22px; height: 22px;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    font-size: 12px; line-height: 1;
    cursor: pointer;
}
.gs-remove-option-btn:hover:not(:disabled) {
    background: rgba(255,80,80,0.2);
    color: #ff8080;
    border-color: rgba(255,80,80,0.5);
}
.gs-remove-option-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.gs-axis-label {
    width: 100%; max-width: 280px;
    padding: 5px 8px;
    background: #2a2a3a; color: #FFD54F;
    border: 1px solid rgba(255,213,79,0.5); border-radius: 5px;
    font-size: 13px; font-weight: 600;
}
.gs-options { display: flex; flex-direction: column; gap: 6px; }
.gs-option-row {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px;
    background: rgba(255,255,255,0.03); border-radius: 5px;
}
.gs-option-row input[type="checkbox"] {
    width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto;
}
.gs-option-row input[type="text"] {
    flex: 1; padding: 5px 8px;
    background: #2a2a3a; color: #fff;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
    font-size: 13px;
}
.gs-option-row select.gs-option-behavior {
    flex: 0 0 auto;
    padding: 4px 6px;
    background: #2a2a3a; color: #fff;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.gs-option-row .gs-option-voice {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.gs-option-row .gs-option-voice input { cursor: pointer; }
.gs-option-row select.gs-option-voice-lang {
    flex: 0 0 auto;
    padding: 4px 6px;
    background: #2a2a3a; color: #fff;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.gs-option-row select.gs-option-voice-lang:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.gs-option-row .gs-voice-edit-btn {
    flex: 0 0 auto;
    padding: 3px 8px;
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    border: 1px solid rgba(255,215,0,0.4);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.gs-option-row .gs-voice-edit-btn:hover:not(:disabled) {
    background: rgba(255,215,0,0.3);
}
.gs-option-row .gs-voice-edit-btn:disabled {
    opacity: 0.35; cursor: not-allowed;
}

.gs-voice-editor {
    margin: 4px 6px 8px 28px; /* indent under the option-row checkbox column */
    padding: 10px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid rgba(255,215,0,0.5);
    border-radius: 6px;
}
.gs-voice-cols {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.gs-voice-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gs-voice-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #FFD700;
    margin-bottom: 2px;
}
.gs-voice-reset-lang-btn {
    padding: 2px 6px;
    background: transparent;
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
}
.gs-voice-reset-lang-btn:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.gs-voice-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gs-voice-row label {
    flex: 0 0 28px;
    font-size: 11px;
    color: #aaa;
    text-align: right;
}
.gs-voice-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    background: #1d1d2c;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    font-size: 12px;
    font-family: monospace;
}
.gs-voice-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #888;
    line-height: 1.4;
}
.gs-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.gs-btn { padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.gs-btn-primary { background: #FFD700; color: #1a1a1a; border: none; }
.gs-btn-primary:hover { background: #FFE082; }
.gs-btn-secondary { background: transparent; color: #ccc; border: 1px solid rgba(255,255,255,0.3); }
.gs-btn-secondary:hover { background: rgba(255,255,255,0.08); color: #fff; }
.gs-btn-apply-to {
    background: rgba(0,188,212,0.18);
    color: #4DD0E1;
    border: 1px solid rgba(0,188,212,0.5);
}
.gs-btn-apply-to:hover { background: rgba(0,188,212,0.35); color: #fff; }

/* Apply-to picker overlay (sits above the main Game Settings modal). */
.gs-apply-overlay { z-index: 20100; }
.gs-apply-dialog { max-width: 520px; }
.gs-apply-section {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.gs-apply-h {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #FFD54F;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gs-apply-check, .gs-apply-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: #ddd;
    font-size: 13px;
    cursor: pointer;
}
.gs-apply-check input, .gs-apply-radio input {
    cursor: pointer;
}
.gs-apply-game-list {
    margin-top: 6px;
    margin-left: 22px;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
}
.gs-apply-game-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
}
.gs-apply-game-row:hover { color: #fff; }
.gs-apply-game-row-current {
    background: rgba(255,215,0,0.10);
    border: 1px solid rgba(255,215,0,0.35);
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
    color: #FFE082;
}
.gs-apply-game-row-current:hover { color: #FFF8DC; }

/* Game View title row — flex so the Catch 2-player warning pill sits to
   the right of the title rather than below it. */
.game-view-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.game-view-title-row .library-title {
    margin: 0;
    flex: 0 1 auto;
}
/* Catch 2-player advisory — fixed-width 4-line box to the right of the
   game name. The four lines are enforced by explicit <br> tags in the
   HTML, so the text always reads exactly as authored regardless of
   container width. */
.catch-2p-warning {
    display: inline-block;
    flex: 0 0 auto;
    width: 260px;
    padding: 6px 10px;
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 8px;
    color: #FFE082;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    box-sizing: border-box;
}
/* "Line X needs more cards" advisory — applies to both AGC-Catch and
   AGC-Doubles when any row contains only 1 card. Slightly redder tone
   than the 2-card pill since it flags an actionable data-quality issue. */
.lines-need-cards-warning {
    display: inline-block;
    flex: 0 0 auto;
    width: 260px;
    padding: 6px 10px;
    background: rgba(239, 83, 80, 0.18);
    border: 1px solid rgba(239, 83, 80, 0.6);
    border-radius: 8px;
    color: #FFAB91;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    box-sizing: border-box;
}

/* Game view description */
.game-view-desc {
    color: #ccc;
    font-size: 1rem;
    margin: 0 0 15px 40px;
}

.game-view-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    display: inline-block;
}
.game-view-editable:hover {
    border-bottom-color: #FFD700;
}

.game-view-toolbar {
    position: absolute;
    top: 60px;
    left: 10px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Prob Options chip strip — row of preset buttons above the cards.
   [BasicS] [P1*] [P2] ... [+Prob]. Only renders when a Find game is
   open. Active chip is highlighted; others are dimmer. */
.prob-chip-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 6px 0 10px 0;
    padding: 4px 0;
}
.prob-chip,
.prob-chip-basics,
.prob-chip-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.prob-chip:hover,
.prob-chip-basics:hover,
.prob-chip-add:hover {
    background: rgba(255, 255, 255, 0.2);
}
.prob-chip.active {
    background: #7c4dff;
    color: #fff;
    border-color: #b39ddb;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.prob-chip-basics {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.65);
}
.prob-chip-basics.active {
    background: #455a64;
    color: #fff;
    border-color: #90a4ae;
}
.prob-chip-add {
    background: rgba(126, 255, 126, 0.12);
    border-color: rgba(126, 255, 126, 0.4);
    color: #7eff7e;
}
.prob-chip-add:hover {
    background: rgba(126, 255, 126, 0.22);
}
.prob-chip-name {
    opacity: 0.85;
    font-weight: 400;
    margin-left: 2px;
    font-size: 11px;
}
/* Visible delete affordance on each Prob chip. Hidden (and non-clickable)
   by default; revealed on hover, and always shown on the active chip so
   the action is discoverable without a mystery long-press. */
.prob-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 3px;
    margin-right: -4px;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.prob-chip:hover .prob-chip-x,
.prob-chip.active .prob-chip-x {
    opacity: 1;
    pointer-events: auto;
}
.prob-chip-x:hover {
    background: rgba(239, 83, 80, 0.92);
    color: #fff;
}
/* ⚙ Manage chip — opens the bulk Prob manager dialog. */
.prob-chip-manage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}
.prob-chip-manage:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* === Delete-Game Prob picker (redesigned) =========================== */
.dgx-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 8, 16, 0.62);
    z-index: 25000;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', sans-serif;
}
.dgx-dialog {
    width: 330px; max-width: 92vw;
    background: #25253a;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    color: #fff;
}
.dgx-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.dgx-head-ic {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: rgba(239, 83, 80, 0.16); color: #ff6b6b;
    display: flex; align-items: center; justify-content: center;
}
.dgx-title { font-size: 15px; font-weight: 600; color: #f1f1f6; letter-spacing: 0.2px; }
.dgx-list { display: flex; flex-direction: column; gap: 2px; }
.dgx-row {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 10px; cursor: pointer;
    transition: background 0.12s; user-select: none;
}
.dgx-row:hover { background: rgba(255, 255, 255, 0.05); }
.dgx-row.checked { background: rgba(239, 83, 80, 0.13); }
.dgx-box {
    width: 19px; height: 19px; border-radius: 6px; flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.28);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.dgx-box svg { opacity: 0; transition: opacity 0.1s; }
.dgx-row.checked .dgx-box { background: #ef5350; border-color: #ef5350; }
.dgx-row.checked .dgx-box svg { opacity: 1; }
.dgx-label { font-size: 13.5px; color: #fff; }
.dgx-label b { font-weight: 700; }
.dgx-label .dgx-name { color: #9a9ab2; font-weight: 400; }
.dgx-active {
    margin-left: auto; font-size: 10px; color: #c3b0ef;
    border: 1px solid rgba(124, 77, 255, 0.55); border-radius: 8px;
    padding: 1px 8px; letter-spacing: 0.3px;
}
.dgx-row-all .dgx-label b { color: #ffb59e; }
.dgx-div { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 7px 6px; }
.dgx-foot { display: flex; gap: 9px; margin-top: 14px; }
.dgx-btn {
    flex: 1; padding: 9px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: none; transition: background 0.12s, opacity 0.12s;
}
.dgx-btn-cancel { background: transparent; color: #d2d2e0; border: 1px solid rgba(255, 255, 255, 0.2); }
.dgx-btn-cancel:hover { background: rgba(255, 255, 255, 0.06); }
.dgx-btn-del { background: #ef4444; color: #fff; }
.dgx-btn-del:hover { background: #f25a4d; }
.dgx-btn-del:disabled { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.4); cursor: default; }

/* Stage 4: cards whose probability is 0 in the currently active Prob
   render dimmed in the editor. The card is still interactive (you can
   click the % badge to bump it back up). */
.library-card.prob-zero-card {
    opacity: 0.35;
}
.library-card.prob-zero-card:hover {
    opacity: 0.6;
}

.delete-game-btn {
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 6px 16px;
    border: 2px solid #ff4444;
    border-radius: 8px;
    background: rgba(255,68,68,0.15);
    color: #ff4444;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
}
.delete-game-btn:hover {
    background: rgba(255,68,68,0.3);
}


.show-dominos-btn {
    display: block;
    margin: 20px 0 10px 40px;
    padding: 8px 20px;
    border: 2px solid #FFD700;
    border-radius: 8px;
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.show-dominos-btn:hover {
    background: rgba(255,215,0,0.3);
}

.game-view-group-title {
    color: #FFD700;
    font-size: 1.1rem;
    margin: 20px 0 10px 40px;
    font-weight: bold;
}

.game-view-dominos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px 40px;
    align-items: flex-start;
}

.game-view-domino {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s;
}

.game-view-domino-half {
    width: 70px;
    height: 70px;
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.game-view-domino-half svg {
    width: 60px;
    height: 60px;
}

.game-view-domino.double-domino .game-view-domino-half {
    box-shadow: 0 0 0 2px #FFD700;
}

.game-view-domino:not(.double-domino) .game-view-domino-half {
    box-shadow: 0 0 0 2px #CD7F32;
}

.game-view-domino-half.empty-card-half {
    border: 2px dashed #aaa;
}

.game-view-domino:hover {
    opacity: 0.7;
}

.domino-box {
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0 10px 40px;
    position: relative;
}

.domino-box-active {
    border-color: rgba(76,175,80,0.5);
    background: rgba(76,175,80,0.05);
}

.domino-box-unused {
    border-color: rgba(255,100,100,0.4);
    background: rgba(255,100,100,0.05);
}

.domino-box-label {
    position: absolute;
    top: -10px;
    left: 15px;
    background: #1a0a2a;
    padding: 0 8px;
    font-size: 13px;
    font-weight: bold;
}

.domino-box-active .domino-box-label {
    color: #4CAF50;
}

.domino-box-unused .domino-box-label {
    color: #ff6464;
}

.domino-box .game-view-dominos {
    margin: 5px 0 0 0;
}

.domino-box .game-view-group-title {
    margin: 10px 0 6px 0;
}

.copy-game-btn {
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 6px 16px;
    border: 2px solid #FFD700;
    border-radius: 8px;
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    vertical-align: middle;
}
.copy-game-btn:hover {
    background: rgba(255,215,0,0.3);
}

.game-view-var-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(145deg, #fffef5, #f5f0e0);
    border-radius: 8px;
    border: 2px solid #d4c4a0;
    padding: 6px;
    position: relative;
    min-width: 62px;
}

.game-view-var-card svg {
    width: 50px;
    height: 50px;
}

.game-view-var-desc {
    font-size: 9px;
    color: #666;
    text-align: center;
    margin-top: 3px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-view-var-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ff4444;
    background: #cc0000;
    color: white;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-view-var-delete:hover {
    background: #ff0000;
}

/* Custom game buttons on start screen */
.custom-game-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 8px 0;
}

.custom-game-btn {
    padding: 6px 14px;
    border: 2px solid #FFD700;
    border-radius: 8px;
    background: rgba(255,215,0,0.1);
    color: #FFD700;
    font-size: 0.9rem;
    cursor: pointer;
}
.custom-game-btn:hover {
    background: rgba(255,215,0,0.25);
}

.player-select {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;     /* prevent stretch — every .player-btn
                                uses its natural height regardless of
                                sibling content / state. */
    margin-bottom: 30px;
}

.player-btn {
    flex: 0 0 auto;          /* don't grow, don't shrink — natural size */
    padding: 15px 30px;
    font-size: 1.1rem;
    border: 3px solid white;
    background: transparent;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.player-btn:hover, .player-btn.selected {
    background: white;
    color: #764ba2;
}
/* When admin enables exactly one Player option, restyle the visible
   button as plain text — no border, no fill, no hover effects — but
   keep it clickable so selectPlayerCount still fires and reveals the
   player-names form. If admin entered no label, the JS hides this
   element entirely. */
.player-btn.is-static-text {
    border: none;
    background: transparent;
    padding: 6px 0;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
    border-radius: 0;
}
.player-btn.is-static-text:hover {
    background: transparent;
    color: #FFD54F;
}

/* Game Level Selector — vertical column of full-row boxes that mirror
   the Game Type list (.setup-right-types / .setup-type-line) on the
   opposite side of GP Setup. Each .level-btn-wrapper becomes one box
   with icon-on-left, label-on-right, so the row reads the same way
   as a "Slow Pace / Non-stop / Voiced Answer" row in Game Type.
   flex-direction: column-reverse keeps the DOM ordering (2 dominos,
   3, 4) while rendering highest-on-top. h3 stays as a sibling above
   the box stack (in .setup-left) so it's centered above the entire
   column the same way Game Type's h3 is. */
.game-level-select {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 6px;
    width: max-content;
    min-width: 220px;
    margin: 0 auto 25px;
}

/* Default flex column — applies to clones of .level-btn-wrapper
   rendered in .selected-options-row (the chip shown after the legacy
   click-to-reveal player-pick path). The .game-level-select-scoped
   rule below overrides this for direct children of the level picker. */
.level-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Each level row is its own bordered box, copying .setup-type-line
   exactly so visually the Levels column matches the Game Type column
   on the right. The wrapper carries the border now; the inner
   .level-btn loses its own outline. */
.game-level-select > .level-btn-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* Vertical padding tightened from 10px -> 6px (~12% shorter overall
       box height) while leaving the 40px icon and horizontal padding /
       gap between boxes unchanged. */
    padding: 6px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: #ddd;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.game-level-select > .level-btn-wrapper:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}

/* Selected state lives on the inner .level-btn (the click handler
   toggles it there). :has() promotes that state up to the wrapper so
   the whole box highlights — same gold-on-amber treatment as
   .setup-type-line.selected. */
.game-level-select > .level-btn-wrapper:has(> .level-btn.selected) {
    background: rgba(255,215,0,0.25);
    border-color: rgba(255,215,0,0.6);
    color: #FFD700;
    font-weight: 600;
}

/* Inner button is now visually transparent — the wrapper carries
   the box. Keep it as a clickable hit target (cursor + pointer
   events). The selection .selected class still gets toggled by JS
   but is now consumed by the :has() rule above on the wrapper. */
.level-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.level-btn > svg {
    width: auto;
    height: 40px;
    display: block;
}

.game-level-select > .level-btn-wrapper > .level-label {
    text-align: left;
}

/* When admin enables exactly one Level option, hide the SVG button and
   leave only the .level-label text visible. selectedLevel is set
   programmatically in _applyGameSetupToPlayerScreen, so gameplay still
   launches at the right level without any clickable element. */
.level-btn-wrapper.is-static-text .level-btn { display: none; }
.level-btn-wrapper.is-static-text .level-label {
    color: rgba(255,255,255,0.92);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 6px 0;
}

/* Screen 2: Selected options inline display */
.selected-options-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    margin-top: 5pt;
}

.selected-options-row .level-btn-wrapper {
    margin: 0;
    margin-top: -20pt;
}

.selected-options-row .player-btn {
    margin: 0;
}

/* Sun level tiles container - horizontal layout with player info, Press, dominoes */
.sun-level-tiles-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

/* Player info inline (icon + name) */
.player-info-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 10px;
}

.player-info-topleft {
    margin-bottom: 8px;
}

.player-info-inline .player-icon-display {
    width: 40px;
    height: 40px;
}

.player-info-inline .player-icon-display svg {
    width: 100%;
    height: 100%;
}

.player-name-inline {
    font-weight: bold;
    color: white;
    font-size: 1.2rem;
}

/* Winner section for Sun Level */
.sun-level-winner-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Coins, domino, and winner box side by side in winner view */
.winner-domino-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Wrapper for winning domino beside the winner box */
.winner-domino-wrapper {
    display: flex;
    justify-content: center;
}

/* Winner box for Sun Level */
.sun-level-winner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 25px;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    border-radius: 15px;
    border: 3px solid #81C784;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
    white-space: nowrap;
}
.sun-level-winner-box.winner-box-single {
    margin-left: 2pt;
}

.sun-level-winner-box .player-icon-display {
    width: 50px;
    height: 50px;
}

.sun-level-winner-box .player-icon-display svg {
    width: 100%;
    height: 100%;
}

.sun-level-winner-box .player-name-inline {
    font-size: 1.3rem;
}

.winner-text {
    font-weight: bold;
    color: #FFEB3B;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Press label */
.hint-press-left {
    font-weight: bold;
    color: white;
    font-size: 1.3rem;
    padding-right: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Container for dominoes with their keys */
.dominoes-with-keys {
    display: flex;
    gap: 20px;
}

/* Each domino with its key below */
.domino-key-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: visible;
}

.domino-key-wrapper .domino {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.domino-key-wrapper .domino:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,215,0,0.5);
}

.domino-key-wrapper .key {
    display: inline-block;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.4rem;
    min-width: 20px;
    text-align: center;
}

/* Clickable key label - cursor pointer and hover effect */
.clickable-key {
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.clickable-key:hover {
    background: rgba(255,215,0,0.5);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* Finger push animation for key presses (single player) */
.finger-push {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    pointer-events: none;
    z-index: 100;
    animation: fingerPush 0.5s ease-in-out forwards;
}
@keyframes fingerPush {
    0% {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    25% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, -30px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -35px);
    }
}

/* Tutorial finger: bobbing below the double card on first game - only fingertip overlaps */
.tutorial-finger {
    position: absolute;
    bottom: -17px;
    left: calc(50% + 10px);
    transform: translateX(-50%) rotate(-40deg);
    transform-origin: top center;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: 100;
    animation: tutorialBob 0.8s ease-in-out infinite;
}
@keyframes tutorialBob {
    0%, 100% { transform: translateX(-50%) rotate(-40deg) translateY(0); }
    50% { transform: translateX(-50%) rotate(-40deg) translateY(-16px); }
}

/* Tutorial "double" label above the double domino on first game */
.tutorial-double-label {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}

/* Blinking "double" label above double dominos in 1-player mode */
.domino-double-label {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    animation: domino-double-blink 1s ease-in-out infinite;
}

@keyframes domino-double-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Tutorial floating number keys above each domino on first game */
.tutorial-key-hint {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 6px;
    font-weight: bold;
    font-family: monospace;
    font-size: 0.95rem;
    color: #fff;
    pointer-events: none;
    z-index: 100;
}
.tutorial-key-highlight {
    background: #ffd700;
    border-color: #ff8c00;
    color: #333;
    box-shadow: 0 0 8px rgba(255,215,0,0.6);
}

/* Finger push animation on the keyboard popup key */
.keyboard-finger-push {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    pointer-events: none;
    z-index: 2001;
    animation: kbFingerPush 0.5s ease-in-out forwards;
}
@keyframes kbFingerPush {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
    25% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Keyboard popup overlay */
.keyboard-popup {
    position: fixed;
    z-index: 2000;
    animation: popIn 0.2s ease-out;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.keyboard-popup-fade {
    opacity: 0;
}
.play-again-keyboard {
    animation: popIn 0.2s ease-out, kbPulse 2s ease-in-out infinite;
}
@keyframes kbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* "to select" label on the right */
.hint-select-right {
    font-weight: bold;
    color: white;
    font-size: 1.3rem;
    padding-left: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Legacy player key hint styles (kept for compatibility) */
.player-key-hint {
    text-align: center;
    margin-top: 10px;
    padding: 8px 15px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

.player-key-hint .key {
    display: inline-block;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.4rem;
    min-width: 20px;
    text-align: center;
}

.level-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

/* Selected game level display on player setup screen */
.selected-level-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255,215,0,0.2);
    border-radius: 10px;
    border: 2px solid rgba(255,215,0,0.5);
}

.selected-level-display svg {
    width: 40px;
    height: 40px;
}

.selected-level-display .level-text {
    font-size: 1rem;
    color: #ffd700;
    font-weight: bold;
}

.player-names {
    margin-top: 20px;
    /* Grid layout so the Start Game button sits in a 2nd column to the
       right of the name-inputs stack, vertically aligned with its
       bottom edge (the xeno row when present). The h3 heading spans
       both columns above. On narrow screens the grid degrades to a
       single column via the @media block further down in this file. */
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 20px;
    align-items: end;
}
.player-names > h3 {
    grid-column: 1 / -1;
}
.player-names > #start-game-btn {
    grid-column: 2;
    align-self: end;
    margin: 0;
    white-space: nowrap;
}

#name-inputs {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

/* Per-game player-name boxes AND the "Icons and Players" panel (#ip-rows)
   share one design — same box + text + gold focus glow. */
#name-inputs input,
#ip-rows input {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
    padding: 0 20px;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    color: #333;
    margin-top: 12px;
    box-sizing: border-box;
    width: 100%;
}

#name-inputs input:focus,
#ip-rows input:focus {
    outline: 3px solid #ffd700;
}

/* Player input row with icon selector */
.player-input-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 8px;
}

.player-input-row input {
    flex: 1;
}

/* Input sections with labels */
.input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.input-section.name-section {
    flex: 1;
}

.player-input-row .input-section.name-section input {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
    margin-top: 0px !important;
    width: 100% !important;
}

.input-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    text-align: center;
}

/* Icon selector */
.icon-selector {
    display: flex;
    gap: 12px;
}

.icon-btn {
    width: 50px;
    height: 50px;
    padding: 5px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: rgba(255,255,255,0.5);
    transform: scale(1.1);
}

.icon-btn.selected {
    border-color: #ffd700;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}

.icon-btn svg {
    width: 100%;
    height: 100%;
}

/* Icon taken by another player - crossed out */
.icon-btn.icon-taken {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.icon-btn.icon-taken::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    height: 3px;
    background: #ff0000;
    transform: rotate(-45deg);
    border-radius: 2px;
}

.icon-btn.icon-taken:hover {
    transform: none;
    background: rgba(255,255,255,0.3);
}

/* Xeno icon container with light gray background and gold border */
.xeno-icon-container {
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8);
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xeno-icon-container svg {
    width: 100%;
    height: 100%;
}

.xeno-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Xeno input: 30% shorter than full width, left-aligned */
.player-input-row.xeno-row .input-section.name-section input {
    width: 70% !important;
}

.player-input-row.xeno-row .input-section.name-section {
    align-items: flex-start;
}

/* Consolidated Xeno box — one gold-bordered rectangle holding the
   xeno-icon, hourglass timer glyph, and "Xeno" label side-by-side.
   Replaces the prior multi-element xeno row (separate icon container
   + disabled "Xeno ⏳" input). Sits at the row's natural left edge,
   under the first player icon; Start Game button is a sibling to its
   right within .xeno-row. */
.xeno-combo-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8);
    border: 2px solid #ffd700;
    box-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.xeno-combo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xeno-combo-icon svg {
    width: 100%;
    height: 100%;
}
.xeno-combo-timer {
    font-size: 1.4rem;
    line-height: 1;
}
.xeno-combo-name {
    color: #FF69B4;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Buttons */
.btn {
    padding: 12px 30px;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
}

.btn-primary {
    background: linear-gradient(145deg, #ffd700, #ffaa00);
    color: #333;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.btn-secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.5);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.3);
}

.btn-secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Back arrow button */
/* Page name label — shown below back button or at same position if no back button */
.page-name-label {
    position: absolute;
    top: 56px;
    left: 12px;
    font-size: 28px;
    color: rgba(255, 255, 255, 0.35);
    z-index: 100;
    cursor: text;
    letter-spacing: 0.5px;
}
#a-card-maker-label {
    left: 52px;
    top: 16px;
}
#setup-page-label,
#setup2-page-label {
    /* Moved below the back-arrow + home buttons (both 38px tall at
       top:15px, so they bottom out at 53px). Sitting at top:58px
       gives the label a clean horizontal line under them rather
       than overlapping the home button's right edge. */
    top: 58px;
    left: 10px;
}
#a-game-view-label {
    left: 62px;
    /* `top` is set at runtime by _alignAGCLabelToGameNameBottom so the
       label's BOTTOM lines up with the game-name H1's bottom. The
       value here is just an initial placeholder before that pass runs. */
    top: 6px;
    /* 10% smaller than the base .page-name-label (28px × 0.9 = 25.2px). */
    font-size: 25.2px;
    line-height: 1;
}
#a-card-editor-label {
    left: 72px;
    top: 16px;
}
/* When there's no back button, move label to the back button's position */
.screen > .page-name-label:first-child {
    top: 18px;
}

.back-arrow-btn {
    position: absolute;
    top: 15px;
    left: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background 0.2s, transform 0.15s;
    padding: 0;
}

.back-arrow-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.08);
}

.back-arrow-btn:active {
    transform: scale(0.95);
}

.home-btn {
    left: 54px;
}

#back-to-setup-btn {
    top: calc(5px + 3pt);
}

/* End game buttons centered below playing area */
.end-game-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 30px;
    margin-top: 10px;
}

.end-game-btn {
    padding: 12px 40px;
    font-size: 1.2rem;
    min-width: 180px;
}

/* Icon-only end-game buttons (play-triangle trial). */
.end-game-btn.end-game-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 120px;
    padding: 10px 28px;
}
.end-game-btn-icon .egb-ico { display: block; }
/* New Game = sparkly play button: triangle + sparkles on a sparkly bg, so it
   reads as "new" vs the plain replay triangle. */
.end-game-btn.end-game-btn-new {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #7c4dff 0%, #b06bff 60%, #d59bff 100%);
    border: none;
}
.end-game-btn.end-game-btn-new::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,0.95) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 82% 38%, rgba(255,255,255,0.85) 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 64% 78%, rgba(255,255,255,0.8) 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 34% 72%, rgba(255,255,255,0.7) 0 1px, transparent 1.8px);
}

/* Non-stop countdown — Play Again button doubles as the countdown
   display and a tap-to-skip control. Pulse to make the ticking obvious. */
.end-game-btn.nonstop-countdown {
    font-variant-numeric: tabular-nums;
    animation: nonstop-tick 1s ease-out infinite;
}

/* === Generic play-triangle icon buttons (rolled out everywhere from the
   end-game trial) ===
   Any button can carry .play-ico-btn to render an SVG ▶ triangle centered,
   and .play-ico-new to get the sparkly "fresh game" look (purple bg + sparkles)
   that distinguishes Start/New from a plain replay. Mirrors the .end-game-btn
   icon styling but is not tied to the end-game container, so the setup Start
   Game, the .controls New Game, the winner-modal Play Again, and the Catch
   board's Play Again all share one look. */
.play-ico-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.play-ico-btn .egb-ico { display: block; }
.play-ico-btn.play-ico-new {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #7c4dff 0%, #b06bff 60%, #d59bff 100%);
    border: none;
}
.play-ico-btn.play-ico-new::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,0.95) 0 1.6px, transparent 2.4px),
        radial-gradient(circle at 82% 38%, rgba(255,255,255,0.85) 0 1.3px, transparent 2.2px),
        radial-gradient(circle at 64% 78%, rgba(255,255,255,0.8) 0 1.4px, transparent 2.2px),
        radial-gradient(circle at 34% 72%, rgba(255,255,255,0.7) 0 1px, transparent 1.8px);
}

/* === Pause button + frozen-game overlay ===
   Pause button is hidden by default; visible only while a sun-level round
   is actively running. game.js toggles `body.game-round-running` on round-
   start (startSunLevelTimer) and removes it on round-end / pause / quit.
   The overlay is shown via inline display when paused; while paused, the
   overlay sits above the game, captures taps, and CSS pauses animations
   on the round area via `body.game-paused` class. */
.game-pause-btn {
    position: fixed;
    /* Bottom-right corner — in the empty area below the timer panel.
       Clear of the title, status bar, player rows, and the timer; clear
       of the listening indicator (top-right). Easy thumb reach for a
       kid playing on a tablet. Slightly larger so it's easy to hit. */
    bottom: 24px;
    right: 24px;
    z-index: 11500;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.game-pause-btn:hover {
    background: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.7);
}
.game-pause-btn:active {
    transform: scale(0.92);
}
body.game-round-running .game-pause-btn {
    display: inline-flex;
}
body.game-paused .game-pause-btn { display: none; } /* hidden while overlay is up */
/* Hide the Find pause button while a Catch overlay is open. The Find
   pause button is z-index:11500 (above the Catch overlay's 10000), so
   without this rule both pause buttons end up on screen whenever the
   user starts a Catch game with body.game-round-running still set from
   a prior Find round. */
body.catch-active .game-pause-btn { display: none !important; }

.game-pause-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 13500;
    background: rgba(10, 10, 25, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    animation: gpFade 0.15s ease-out;
}
@keyframes gpFade { from { opacity: 0; } to { opacity: 1; } }

.game-pause-card {
    text-align: center;
    color: white;
    padding: 36px 56px;
    border-radius: 16px;
    background: rgba(40, 40, 65, 0.55);
    border: 1.5px solid rgba(255,255,255,0.18);
}
.game-pause-icon {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}
.game-pause-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.game-pause-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
}

/* Pause every CSS animation/transition under the game screen while paused.
   Doesn't apply to the overlay itself. */
body.game-paused #game-screen,
body.game-paused #game-screen * {
    animation-play-state: paused !important;
}

/* === Sand-timer (hourglass) ===
   Visible only while body.sand-timer-active is set. game.js sets it on
   round-start when the active type is non-stop AND Xeno timer is off
   AND admin set sandTimer > 0. The two sand triangles are scaled via
   CSS variable --sand-progress (0 = full top / empty bottom; 1 = empty
   top / full bottom). game.js writes the variable each tick. */
.game-sand-timer {
    position: fixed;
    top: 70px;
    right: 24px;
    z-index: 11400;
    display: none;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
body.sand-timer-active .game-sand-timer { display: block; }
body.game-paused .game-sand-timer { opacity: 0.5; }

.sand-hourglass {
    --sand-progress: 0;
    overflow: visible;
}
.sand-hourglass .sand-top {
    transform-origin: 12px 17px;
    transform: scaleY(calc(1 - var(--sand-progress)));
    transition: transform 0.25s linear;
}
.sand-hourglass .sand-bottom {
    transform-origin: 12px 19px;
    transform: scaleY(var(--sand-progress));
    transition: transform 0.25s linear;
}

/* Voice input — corner mic indicator + last-heard text + unsupported notice.
   Hidden by default; only visible while body.voice-round-active is set.
   game.js toggles that class on _ensureMicIndicator (round-start) and off
   on _cleanupVoiceUI / _stopVoice. CSS-level gating means even if some
   path leaves the indicator div in the DOM, it stays invisible. */
.voice-mic-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 12000;
    display: none;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    padding: 6px 10px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
    color: #ddd;
    font-size: 12px;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
    max-width: 360px;
}
/* Visible only while a voice round is actually running. */
body.voice-round-active .voice-mic-indicator {
    display: grid;
}
/* Inside a Big Game, the fixed stage banner (top:0, ~35px) sits above this box
   and hides it. Drop it 12mm so it clears the banner and reads cleanly. */
body.bg-playing .voice-mic-indicator {
    top: calc(12px + 12mm);
}
.voice-mic-indicator:hover {
    background: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.3);
}
.voice-mic-indicator .voice-mic-icon {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 18px;
    line-height: 1;
}
.voice-mic-indicator .voice-mic-status {
    grid-column: 2; grid-row: 1;
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-mic-indicator .voice-mic-heard {
    grid-column: 2; grid-row: 2;
    min-width: 0;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voice-mic-indicator.idle {
    opacity: 0.45;
}
.voice-mic-indicator.listening {
    background: rgba(220, 38, 38, 0.8);
    border-color: rgba(255, 100, 100, 0.6);
    color: #fff;
    animation: voice-mic-pulse 1.4s ease-in-out infinite;
}
.voice-mic-indicator.error {
    background: rgba(120, 40, 40, 0.8);
    border-color: rgba(200, 100, 100, 0.5);
    color: #fbb;
}
@keyframes voice-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 80, 80, 0); }
}

.voice-notice {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12000;
    padding: 10px 18px;
    background: rgba(40, 40, 60, 0.95);
    color: #fff;
    border: 1px solid rgba(255,215,0,0.6);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    max-width: 90vw;
    text-align: center;
}

/* Setup screen: Test-mic button below the type radio list. */
.setup-mic-check-btn {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.15);
    color: #FFD700;
    font-size: 0.95rem;
    cursor: pointer;
}
.setup-mic-check-btn:hover {
    background: rgba(255,215,0,0.3);
}

/* Mic-check diagnostic panel — opened from setup or by tapping the
   corner mic indicator. Self-contained: device list + live audio
   level meter + permission feedback. */
.voice-mic-check {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 13000;
    width: 460px;
    max-width: 92vw;
    background: rgba(28, 28, 44, 0.97);
    border: 1px solid rgba(255,215,0,0.6);
    border-radius: 12px;
    color: #ddd;
    font-size: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.voice-mic-check .vmc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-weight: 600;
    color: #FFD700;
}
.voice-mic-check .vmc-close {
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 22px;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}
.voice-mic-check .vmc-close:hover { color: #fff; }
.voice-mic-check .vmc-body {
    padding: 14px;
    max-height: 70vh;
    overflow-y: auto;
}
.voice-mic-check .vmc-row {
    margin-bottom: 8px;
    color: #ddd;
}
.voice-mic-check .vmc-row strong { color: #fff; }
.voice-mic-check .vmc-active-name { color: #FFD700; }
.voice-mic-check .vmc-status {
    margin: 12px 0;
    color: #fff;
}
.voice-mic-check .vmc-meter {
    height: 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    overflow: hidden;
}
.voice-mic-check .vmc-meter-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4caf50 0%, #ffeb3b 70%, #f44336 100%);
    transition: width 0.05s linear;
}
.voice-mic-check .vmc-meter-hint {
    margin-top: 4px;
    font-size: 12px;
    color: #aaa;
}
.voice-mic-check .vmc-synonyms {
    margin-top: 14px;
    padding: 10px;
    background: rgba(255,215,0,0.06);
    border-left: 3px solid rgba(255,215,0,0.4);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}
.voice-mic-check .vmc-devices {
    margin-top: 14px;
    padding: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}
.voice-mic-check .vmc-devices ul {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 0 0;
}
.voice-mic-check .vmc-devices li {
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
}
.voice-mic-check .vmc-devices li:hover {
    background: rgba(255,255,255,0.08);
}
.voice-mic-check .vmc-devices li.vmc-dev-default {
    color: #FFD700;
    font-weight: 600;
}
.voice-mic-check .vmc-dev-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #aaa;
}
.voice-mic-check .vmc-meter-which {
    color: #FFD700;
    font-style: italic;
}
.voice-mic-check .vmc-help {
    margin-top: 14px;
    padding: 10px;
    background: rgba(255,215,0,0.08);
    border-left: 3px solid rgba(255,215,0,0.5);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #ccc;
}
@keyframes nonstop-tick {
    0%   { transform: scale(1.0); }
    20%  { transform: scale(1.06); }
    100% { transform: scale(1.0); }
}

.btn-draw {
    background: linear-gradient(145deg, #4CAF50, #45a049);
    color: white;
    padding: 15px 40px;
    font-size: 1.1rem;
}

.btn-draw:hover:not(:disabled) {
    transform: translateY(-2px);
}

.btn-draw:disabled {
    background: #666;
    cursor: not-allowed;
}

/* Game Screen Header */
/* Game-board header: the "MathGrain Domino" brand title was removed, so the
   header is now just a transparent row that carries the combined-game stage
   stones and (multiplayer/combined) turn indicator. No background bar/padding,
   and it collapses to nothing when those are empty/hidden — e.g. single-player
   Find — so there's no empty bar under the identity pill. */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    min-height: 0;
    margin: 0 0 6px;
}

header h1 {
    font-size: 1.8rem;
}

.game-name-display {
    font-size: 20px;
    color: #FFD700;
    font-weight: normal;
    margin-left: 10px;
    opacity: 1;
    transition: opacity 3s ease;
}

.game-name-display.fade-out {
    opacity: 0;
}

/* Stage stones inline in header next to game name */
.header-stage-stones {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    vertical-align: middle;
    margin-left: 10px;
}
.stage-stone-inline {
    display: block;
    width: 22px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    transition: all 0.4s;
}
.stage-stone-inline.active {
    background: linear-gradient(145deg, #d4a96a, #B8860B 40%, #8B6914 80%);
    border-color: #DAA520;
    box-shadow: 0 1px 4px rgba(218,165,32,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
}

.turn-indicator {
    font-size: 1.3rem;
    background: rgba(255,215,0,0.3);
    padding: 10px 25px;
    border-radius: 25px;
    border: 2px solid #ffd700;
}

#current-player-name {
    font-weight: bold;
    color: #ffd700;
}

/* Main game area */
main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Game Board */
.board-container {
    background: linear-gradient(145deg, #2d5a27, #1e3d1a);
    border-radius: 20px;
    padding: 20px;
    min-height: 80px;
    border: 4px solid #4a7c43;
    box-shadow: inset 0 5px 20px rgba(0,0,0,0.3);
    overflow-x: auto;
    margin-top: 10px;
}

.board {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    gap: 0;
}

.board-placeholder {
    color: rgba(255,255,255,0.4);
    font-size: 1.5rem;
}

/* Winning domino animation - rotates 360 degrees clockwise while moving up */
.winning-domino {
    animation: winningRotate 0.8s ease-out forwards;
}

@keyframes winningRotate {
    0% {
        transform: translateY(100px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotate(360deg) scale(1);
        opacity: 1;
    }
}

/* Wrong card animation - jump up, rotate, return */
.wrong-card-shake {
    animation: wrongCardShake 0.6s ease-in-out;
}

@keyframes wrongCardShake {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-30px) rotate(-15deg);
    }
    50% {
        transform: translateY(-20px) rotate(15deg);
    }
    75% {
        transform: translateY(-10px) rotate(-10deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Sun Level - Board with timer layout */
.board-container.sun-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.board-container.sun-level .board {
    flex: 1;
}

/* Game Timer */
.game-timer {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.timer-svg {
    width: 100%;
    height: 100%;
}

.timer-progress {
    transition: stroke-dashoffset 0.1s linear;
}

/* Pulsing red ring when timer expires */
.timer-progress.timer-expired {
    stroke: #F44336;
    stroke-dashoffset: 0 !important;
    stroke-opacity: 1;
    animation: timerExpiredPulse 1s ease-in-out infinite;
}
@keyframes timerExpiredPulse {
    0%, 100% { stroke-opacity: 1; stroke-width: 8; }
    50% { stroke-opacity: 0.3; stroke-width: 12; }
}

/* Radiating ripple rings around the timer on expiry */
.timer-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid #F44336;
    pointer-events: none;
    animation: timerRipple 2.5s ease-out infinite;
}
@keyframes timerRipple {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.9;
        border-width: 4px;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
        border-width: 1px;
    }
}

.timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

.timer-tick {
    fill: #fff;
}

.timer-tick-label {
    fill: #fff;
    font-size: 8px;
    text-anchor: middle;
}

/* Celebration Area */
.celebration-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100px;
    flex-shrink: 0;
    padding-top: 25px;
}

.celebration-emoji {
    font-size: 3rem;
    animation: celebrate 0.5s ease-in-out infinite;
}

@keyframes celebrate {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
}

/* Xeno Timer Box */
.xeno-timer-box {
    background: rgba(255,105,180,0.15);
    border: 3px solid #FF69B4;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
    overflow: visible;
}

.xeno-timer-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.xeno-timer-icon {
    width: 50px;
    height: 50px;
}

.xeno-timer-icon svg {
    width: 100%;
    height: 100%;
}

.xeno-timer-name {
    font-size: 1rem;
    font-weight: bold;
    color: #FF69B4;
    white-space: nowrap;
}

.xeno-timer-content {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    overflow: visible;
}

.xeno-timer-content .timer-svg {
    width: 100%;
    height: 100%;
}

.xeno-timer-content .timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
}

/* Sun Level Result Messages */
.sun-result {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    margin: 10px 0;
    font-size: 1.3rem;
    font-weight: bold;
}

.sun-result.win {
    background: rgba(76, 175, 80, 0.3);
    border: 3px solid #4CAF50;
    color: #90EE90;
}

.sun-result.wrong {
    background: rgba(255, 152, 0, 0.3);
    border: 3px solid #FF9800;
    color: #FFD54F;
}

.sun-result.gameover {
    background: rgba(244, 67, 54, 0.3);
    border: 3px solid #F44336;
    color: #FF8A80;
}

/* Domino Card Styles */
.domino {
    display: flex;
    background: linear-gradient(145deg, #fffef5, #f5f0e0);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    border: 2px solid #d4c4a0;
    flex-shrink: 0;
}

/* Horizontal domino (regular) */
.domino.horizontal {
    flex-direction: row;
    width: 100px;
    height: 50px;
}

/* Vertical domino (doubles on board) */
.domino.vertical {
    flex-direction: column;
    width: 75px;
    height: 150px;
}

.domino:hover:not(.on-board):not(.disabled) {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.4);
}

.domino.selected {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(255,215,0,0.5), 0 0 0 4px #ffd700;
}

.domino.playable {
    animation: glow 1.5s infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(76,175,80,0.5); }
    50% { box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 0 6px rgba(76,175,80,0.3); }
}

.domino.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.domino.on-board {
    cursor: default;
}

.domino.on-board:hover {
    transform: none;
}

/* End cards on board - highlight for players to see where to play */
.domino.end-card {
    box-shadow: 0 0 0 3px #ffd700, 0 4px 8px rgba(0,0,0,0.3);
}

/* Matching highlight effect when domino is placed */
.domino-half.matching {
    position: relative;
    z-index: 10;
    background: rgba(255, 215, 0, 0.3) !important;
}

.domino-half.matching::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 4px solid #ffd700;
    border-radius: 6px;
    animation: match-pulse 0.5s ease-in-out 2;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
    pointer-events: none;
    z-index: 15;
}

@keyframes match-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

/* Arrow indicators as child elements */
.end-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffd700;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.end-arrow.left-arrow {
    right: 100%;
    margin-right: 5px;
}

.end-arrow.right-arrow {
    left: 100%;
    margin-left: 5px;
}

/* Double indicator */
/* Domino halves */
.domino-half {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    position: relative;
}

.domino.horizontal .domino-half:first-child {
    border-right: 2px solid #c4b48a;
}

.domino.vertical .domino-half:first-child {
    border-bottom: 2px solid #c4b48a;
}

/* Value display on domino */
.value-display {
    font-size: 1.4rem;
    font-weight: bold;
    color: #444;
}

/* Color coding for values */
.value-A { color: #e74c3c; }
.value-B { color: #3498db; }
.value-C { color: #27ae60; }
.value-D { color: #9b59b6; }
.value-E { color: #f39c12; }

/* Players Area */
.players-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.players-area.single-player-layout {
    grid-template-columns: 1fr;
}

.player-hand {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    padding: 15px;
    transition: all 0.3s;
}

.player-hand.active {
    background: rgba(255,215,0,0.2);
    border: 3px solid #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}

.player-hand.inactive {
    opacity: 0.7;
}

.player-hand h3 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-hand h3 .card-count {
    background: rgba(255,255,255,0.2);
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
}

/* Xeno (computer player) styles */
.player-hand.xeno-player {
    background: rgba(255,105,180,0.15);
    border: 2px solid #FF69B4;
}

.player-hand.xeno-player.active {
    background: rgba(255,105,180,0.25);
    border: 3px solid #FF1493;
    box-shadow: 0 0 20px rgba(255,105,180,0.4);
}

.xeno-icon {
    width: 56px;
    height: 56px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Player icon display in game */
.player-icon-display {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-icon-display svg {
    width: 100%;
    height: 100%;
}

.player-icon-display.xeno-bg {
    background: rgba(255,255,255,0.8);
    padding: 4px;
}

.player-name-with-icon {
    display: flex;
    align-items: center;
}

.hand-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    min-height: 60px;
}

/* Bank Area */
.bank-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background: rgba(255,255,255,0.08);
    border-radius: 15px;
}

.bank {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* Bank stack */
.bank-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bank icon wrapper for overlays */
.bank-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* Bank building icon */
.bank-icon {
    font-size: 3.97rem;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3)) brightness(1.1);
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

/* Golden BANK text overlay */
.bank-text-overlay {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-weight: bold;
    font-size: 0.8rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z-index: 2;
}

/* Golden dollar sign overlay */
.bank-dollar-overlay {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-weight: bold;
    font-size: 1.2rem;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.7);
    z-index: 2;
}

.bank.closed .bank-icon {
    filter: grayscale(1) drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
    opacity: 0.5;
}

.bank-cards-wrapper {
    display: none;
}

.bank-cards {
    display: flex;
    position: relative;
    z-index: 1;
}

.bank-card {
    width: 31px;
    height: 46px;
    background: linear-gradient(145deg, #2c3e50, #1a252f);
    border-radius: 6px;
    border: 2px solid #4a6278;
    margin-left: -25px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.bank-card:first-child {
    margin-left: 0;
}

.bank-info {
    display: none;
    font-size: 1.35rem;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
    margin-top: 5px;
}

#bank-count {
    color: #ffd700;
}

/* Draw button - always green */
.btn-draw {
    background: linear-gradient(145deg, #4CAF50, #45a049) !important;
    color: white;
    padding: 15px 40px;
    font-size: 1.1rem;
}

.btn-draw:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #5CBF60, #4CAF50) !important;
}

.btn-draw:disabled {
    background: linear-gradient(145deg, #4CAF50, #45a049) !important;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Controls */
.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

/* Status Message */
.status {
    text-align: center;
    padding: 15px 30px;
    background: rgba(255,255,255,0.15);
    border-radius: 15px;
    font-size: 1.2rem;
    margin-top: 0px;
}

.status.highlight {
    background: rgba(255,215,0,0.3);
    border: 2px solid #ffd700;
}

.status.warning {
    background: rgba(231,76,60,0.3);
    border: 2px solid #e74c3c;
}

.status.success {
    background: rgba(39,174,96,0.3);
    border: 2px solid #27ae60;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: linear-gradient(145deg, #667eea, #764ba2);
    padding: 50px 80px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.modal-content p {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

/* Placement indicators on board */
.placement-zone {
    width: 128px;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 -14px;
    position: relative;
}

.placement-zone::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 50px;
    border: 3px dashed rgba(255,215,0,0.6);
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.3s;
}

.placement-zone:hover::after {
    background: rgba(255,215,0,0.2);
    border-color: #ffd700;
}

.placement-zone.left {
    order: -1;
}

.placement-zone.right {
    order: 999;
}

.placement-zone span {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

/* End values display */
.end-indicator {
    position: absolute;
    padding: 5px 10px;
    background: #ffd700;
    color: #333;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.8rem;
}

.end-indicator.left-end {
    left: -40px;
}

.end-indicator.right-end {
    right: -40px;
}

/* Winner celebration styles */
.winner-speech {
    font-size: 2rem;
    color: #ffd700;
    animation: pulse-text 1s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Winner sparkle celebration */
.winner-celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    border-radius: 50%;
    animation: sparkle-fly 2s ease-out forwards;
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ffaa00;
}

@keyframes sparkle-fly {
    0% {
        opacity: 1;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

/* Winner announcement banner */
.winner-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #667eea, #764ba2);
    padding: 30px 60px;
    border-radius: 20px;
    z-index: 1001;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 60px rgba(255,215,0,0.3);
    border: 3px solid #ffd700;
    animation: banner-pop 0.5s ease-out;
}

.winner-banner h2 {
    font-size: 2.5rem;
    color: #ffd700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.winner-banner .winner-name {
    font-size: 1.8rem;
    color: white;
    margin-top: 10px;
}

@keyframes banner-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.we-won-animation {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.we-won-text {
    font-size: 2.5rem;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    opacity: 0;
}

.we-won-text.animate {
    animation: weWonPop 1.2s ease-in-out;
}

@keyframes weWonPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    20% {
        opacity: 1;
        transform: scale(1.3);
    }
    40% {
        transform: scale(1);
    }
    80% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

#winners-names {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* Winner hand highlight */
.player-hand.winner {
    background: rgba(255, 215, 0, 0.3);
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.player-hand.winner h3 {
    color: #ffd700;
}

.player-hand.winner::before {
    content: '🏆';
    position: absolute;
    top: -15px;
    right: 10px;
    font-size: 2rem;
}

/* Responsive - Medium screens */
@media (max-width: 1024px) {
    header {
        padding: 12px 20px;
        margin-bottom: 15px;
    }

    .status {
        padding: 12px 20px;
    }

    .board-container {
        padding: 20px;
        margin-top: 8px;
    }

    .bank-area {
        padding: 15px;
        gap: 20px;
    }

    .player-hand {
        padding: 12px;
    }

    .players-area {
        gap: 15px;
    }
}

/* Responsive - Small screens */
@media (max-width: 768px) {
    header {
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .status {
        padding: 10px 15px;
        font-size: 1rem;
    }

    .board-container {
        padding: 15px;
        margin-top: 6px;
        min-height: 120px;
    }

    .bank-area {
        padding: 12px;
        gap: 15px;
    }

    .player-hand {
        padding: 10px;
    }

    .players-area {
        gap: 10px;
    }

    #start-screen h1 {
        font-size: 1.25rem;
    }

    .setup-panel {
        min-width: auto;
        width: 90%;
        padding: 25px;
    }

    .player-select {
        flex-direction: column;
    }

    .domino.horizontal {
        width: 80px;
        height: 40px;
    }

    .domino.vertical {
        width: 40px;
        height: 80px;
    }

    .value-display {
        font-size: 1.1rem;
    }

    .players-area {
        grid-template-columns: 1fr;
    }

    header {
        flex-direction: column;
        gap: 10px;
    }

    .controls {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 200px;
    }

    .bank-area {
        flex-direction: column;
    }
}

/* Tablet landscape mode */
@media (max-height: 600px) and (orientation: landscape) {
    .game-container {
        padding: 5px;
    }

    header {
        padding: 5px 12px;
        margin-bottom: 4px;
        flex-direction: row;
    }

    header h1 {
        font-size: 1.2rem;
    }

    .turn-indicator {
        padding: 4px 12px;
        font-size: 0.9rem;
    }

    .status {
        padding: 5px 12px;
        font-size: 0.9rem;
    }

    .board-container {
        padding: 8px;
        margin-top: 3px;
        min-height: 60px;
    }

    .board {
        min-height: 50px;
    }

    .domino.horizontal {
        width: 60px;
        height: 30px;
    }

    .domino.vertical {
        width: 30px;
        height: 60px;
    }

    .value-display {
        font-size: 0.9rem;
    }

    main {
        gap: 5px;
    }

    .players-area {
        gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .player-hand {
        padding: 5px;
    }

    .player-hand h3 {
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .hand-tiles {
        gap: 4px;
        min-height: 35px;
    }

    .bank-area {
        padding: 5px;
        gap: 8px;
        flex-direction: row;
    }

    .bank-icon {
        font-size: 2rem;
    }

    .bank-count {
        font-size: 1.2rem;
    }

    .player-icon-display, .xeno-icon {
        width: 32px;
        height: 32px;
    }

    .btn-draw {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

/* iPad landscape mode */
@media (min-width: 768px) and (max-height: 850px) and (orientation: landscape) {
    .game-container {
        padding: 5px 10px;
    }

    header {
        padding: 6px 20px 6px 55px;
        margin-bottom: 5px;
    }

    header h1 {
        font-size: 1.3rem;
    }

    .turn-indicator {
        padding: 4px 10px;
        font-size: 0.9rem;
    }

    .status {
        padding: 5px 10px;
        font-size: 0.9rem;
    }

    main {
        gap: 8px;
    }

    .board-container {
        padding: 8px;
        margin-top: 2px;
        min-height: 50px;
    }

    .players-area {
        gap: 10px;
        margin-top: 5px;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .player-hand {
        padding: 8px;
    }

    .domino.vertical {
        width: 55px;
        height: 110px;
    }

    .value-display {
        font-size: 1.1rem;
    }

    .dominoes-with-keys {
        gap: 12px;
    }

    .xeno-timer-box {
        margin-top: 5px;
        padding: 8px;
        gap: 10px;
    }

    .xeno-timer-content {
        width: 90px;
        height: 90px;
    }

    .xeno-timer-content .timer-display {
        font-size: 1.8rem;
    }

    .xeno-timer-name {
        font-size: 0.9rem;
    }

    .xeno-timer-icon svg {
        width: 40px;
        height: 40px;
    }

    .player-info-topleft {
        margin-bottom: 4px;
    }

    .end-game-buttons {
        padding: 8px;
        gap: 10px;
        margin-top: 5px;
    }

    .sun-level-winner-box {
        padding: 8px 15px;
    }
}

/* iPad portrait mode */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .game-container {
        padding: 10px;
    }

    header {
        padding: 10px 20px 10px 55px;
        margin-bottom: 10px;
    }

    header h1 {
        font-size: 1.5rem;
    }

    main {
        gap: 10px;
    }

    .players-area {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 15px;
    }

    .player-hand {
        padding: 12px;
    }

    /* Portrait iPad / iPad Pro / Chromebook: match the iPad-Pro LANDSCAPE look —
       big 105×210 dominoes, +50% title, +30% "double" (per user). */
    .domino.vertical {
        width: 105px;   /* = iPad Pro landscape 1P */
        height: 210px;
    }
    .board-id-game { font-size: 1.95rem; }       /* title +50%, like landscape */
    .domino-double-label { font-size: 1.105rem; } /* blinking "double" +30% */

    .dominoes-with-keys {
        gap: 15px;
    }

    .sun-level-tiles-container {
        justify-content: center;
    }

    .xeno-timer-box {
        margin-top: 0;
        padding: 12px;
    }

    .xeno-timer-content {
        width: 100px;
        height: 100px;
    }

    .xeno-timer-content .timer-display {
        font-size: 2rem;
    }

    .end-game-buttons {
        padding: 10px;
        gap: 10px;
        margin-top: 5px;
    }
}

/* iPad LANDSCAPE only (exclude Chromebook 1366 via max-width:1280): enlarge the
   Find-board dominoes. iPad single-player CAN be landscape (rotate) → +40%; iPad
   2-player IS landscape → a smaller +20% (more cards on screen). #players-area
   gets .single-player-layout for 1 player (set in renderSunLevel), so we use it
   to size per player count. Chromebook (1366) is excluded and stays at 55×110. */
@media (min-width: 768px) and (max-width: 1280px) and (max-height: 850px) and (orientation: landscape) {
    #players-area.single-player-layout .domino.vertical {
        width: 77px;   /* iPad landscape, 1 player: +40% (was 55) */
        height: 154px;
    }
    #players-area:not(.single-player-layout) .domino.vertical {
        width: 66px;   /* iPad landscape, 2 players: +20% (was 55) */
        height: 132px;
    }
}

/* iPad PRO LANDSCAPE only (1366×1024). Shares its width with the Chromebook
   (1366) but is TALLER (1024 vs 768), so min-height:900 targets iPad Pro and
   excludes Chromebook. Base here is 75×150 → 1P +40% (105×210), 2P +20% (90×180). */
@media (min-width: 1281px) and (min-height: 900px) and (orientation: landscape) {
    #players-area.single-player-layout .domino.vertical {
        width: 105px;  /* iPad Pro landscape, 1 player: +40% (was 75) */
        height: 210px;
    }
    #players-area:not(.single-player-layout) .domino.vertical {
        width: 90px;   /* iPad Pro landscape, 2 players: +20% (was 75) */
        height: 180px;
    }
}

/* Chromebook LANDSCAPE (1366×768) — was stuck at the base 55×110 (the iPad blocks
   above exclude it: max-width:1280 drops it, and min-height:900 is iPad-Pro only).
   Bump it to the iPad-Pro landscape size so the cards aren't tiny. min-width:1281
   + max-height:850 + landscape targets Chromebook (1366×768) and excludes iPad
   (≤1280 wide) and iPad Pro (≥900 tall). */
@media (min-width: 1281px) and (max-height: 850px) and (orientation: landscape) {
    #players-area.single-player-layout .domino.vertical { width: 105px; height: 210px; }
    #players-area:not(.single-player-layout) .domino.vertical { width: 90px; height: 180px; }
}

/* ===== iPad / iPad Pro / Chromebook LANDSCAPE — Find board polish =====
   One block for the three landscape device sizes (preview frames AND equivalent
   real screens): iPad (1024–1194 wide), Chromebook (1366×768), iPad Pro
   (1366×1024). min-width:1024 excludes phones; max-width:1366 excludes desktop
   monitors (which the iPad-Pro height rule above would otherwise also catch). */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    /* (1) Game title ("Find the doubles: …") +50% — 1.3rem → 1.95rem. */
    .board-id-game { font-size: 1.95rem; }

    /* (2) Push the status ("Game over! …") box DOWN 5mm; because it stays in
       normal flow, every box below it (board / players / timer / buttons)
       shifts down 5mm too, exactly as asked. */
    .status { margin-top: 5mm; }

    /* (3) Blinking "double" label +30% — 0.85rem → 1.105rem. */
    .domino-double-label { font-size: 1.105rem; }

    /* (4) "Press" + "to select" combined on ONE line to the LEFT of the dominoes
       (they used to flank the dominoes). Flex order places both hint words
       before the dominoes; the inner paddings are zeroed so they read as one
       phrase. Dominoes stay on the same row (no flex-wrap). */
    .sun-level-tiles-container { position: relative; }
    /* "Press to select" (mouse mode only) is pinned at the left, OUT of the flex
       flow, so it doesn't push the dominoes off-center. "Press" then "to select"
       sit a word-space apart, vertically centered. The coin/gem counter stays IN
       flow, so it sits right beside the dominoes (the two center together) rather
       than stranded at the far left where "Press to select" used to be. */
    .sun-level-tiles-container .hint-press-left {
        position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
        padding-right: 0;
    }
    .sun-level-tiles-container .hint-select-right {
        position: absolute; left: 102px; top: 50%; transform: translateY(-50%);
        padding-left: 0;
    }

    /* Vertically center the DOMINO faces in the box. In mouse mode a key label
       sits below each domino, so align-items:center (which centers the whole
       domino+key column) leaves the domino ~27px high. Reserve the same height
       ABOVE the domino (key 46px + 8px gap) so the face itself centers. Only
       when a key is present — touch has no key and is already centered. */
    .sun-level-tiles-container .domino-key-wrapper:has(.key) { padding-top: 54px; }
}

/* The Saved/sync badge only matters where synced data is EDITED (page names on
   GP 0 / Setup, and the Studio). Hide it on the PLAY boards — Find (#game-screen
   shown) and Catch (body.catch-active) — where there's no editing. All widths. */
body:has(#game-screen[style*="display: block"]) #sync-status,
body.catch-active #sync-status { display: none !important; }

/* ===== Device-PREVIEW Find board: page name → its own box at the bottom =====
   In any device-preview frame (iPhone / iPad / Chromebook), drop the editable
   page-name pill to ~2cm above the bottom as its own box, leaving the game name
   as the title at the top (the "·" separator is hidden since the page name is no
   longer beside it). iPhone-portrait additionally restyles the title via the
   max-width:430 block; this rule is what brings iPad/Chromebook in line. */
body.bg-preview-frame #board-page-label {
    position: fixed;
    top: auto;          /* reset the board-bar's top:50% — with bottom set too it
                           would stretch the pill into a tall box */
    bottom: 2cm;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 50;
    font-size: 1rem;
    background: rgba(255,255,255,0.12);
    padding: 4px 16px;
    border-radius: 999px;
}
body.bg-preview-frame .board-id-game::before { content: none; }

/* ===== Phone-portrait Find board (e.g. iPhone "GPt F1 Board") =====
   Targets phone PORTRAIT widths only (landscape phone width > 430px is
   excluded). Fixes the cramped 390px single-player Find layout surfaced by the
   device preview. Placed AFTER the 700/768px blocks so it wins at ≤430px. */
@media (max-width: 430px) {
    /* (1) "Press to select" on ONE line ABOVE the dominoes: row that wraps,
       with the cards forced onto the next line (flex-basis:100%) and centered.
       column-gap 6px ≈ one space at 1.3rem, and the per-label 10px paddings are
       zeroed so "Press→to" spacing equals "to→select". Block nudged 4mm up. */
    .sun-level-tiles-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 6px;
        row-gap: 6px;
        max-width: 100%;
        box-sizing: border-box;
        margin-top: -6mm;
    }
    .coin-gem-display.coin-gem-inline { order: 0; }
    /* "Press to select" shifted 3mm up + 3mm left (visual only — transform
       doesn't move the cards, which stay centered on line 2). */
    .hint-press-left   { order: 1; padding-right: 0; transform: translate(-3mm, -3mm); }
    .hint-select-right { order: 2; flex-basis: auto; text-align: left; padding-left: 0; transform: translate(-3mm, -3mm); }
    .dominoes-with-keys { order: 3; flex-basis: 100%; justify-content: center; }
    /* (2) Status line: a box the width of the yellow box (centered), with the
       informative text on ONE line (it now sits BELOW the top title, clear of the
       back/home buttons, so it no longer needs the left offset it had before). */
    .status {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding: 8px 14px;
        font-size: 1rem;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Coins/gem reward column sits ABOVE the dominoes after a win; give it clear
       space so it never overlaps the (now larger) dominoes. */
    .coin-gem-display.coin-gem-inline { margin-bottom: 12px; }
    /* (3) Title = the game name. Line 1 ("Find the doubles", NO colon) aligns with
       the home button; the concrete name ("Match 0-4") sits on its OWN 2nd line —
       nothing else (glyphs dropped in JS). The back/home buttons must NOT move, so
       we DON'T use margin-top on the title (that collapses through #game-screen and
       drags the absolute buttons down). Instead #game-screen padding-top pushes the
       title + everything below it down while the buttons stay put. */
    #game-screen { padding-top: 15px; }
    #board-id-bar { margin: 0 auto 12px 100px; max-width: calc(100% - 112px); line-height: 1.2; }
    .board-id-game::before { content: none; }
    .board-id-bar .board-id-game { font-size: 1.4rem; font-weight: 700; opacity: 1; }
    .board-id-bar .board-id-name { display: block; font-size: 1.15rem; font-weight: 600; }
    .board-id-name::before { content: none; }
    #board-page-label {
        position: fixed;
        top: auto;          /* reset the board-bar's top:50% so the pill isn't
                               stretched between top and bottom */
        bottom: 2cm;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        z-index: 50;
        font-size: 1rem;
        background: rgba(255,255,255,0.12);
        padding: 4px 16px;
        border-radius: 999px;
    }
    /* (4) Trim the pink "Xeno timer" box width by 4%. */
    .xeno-timer-box {
        transform: scaleX(0.96);
    }
    /* (4b) The blinking "double" label floats 40px ABOVE its card (base CSS),
       which lands it on top of the "select" word in the one-line hint. Lower it
       so it sits just UNDER "select" (over the top of the double card). */
    .domino-double-label {
        top: -21px;   /* under "select", 3mm + 1mm higher (was -6px → -17px) */
    }
    /* (5) WIN stage only: the winner box sits high (it lacks the "Va" player-name
       row the play state has) and its gold box overlapped the back/home buttons
       by ~13px. Push the players-area (winner box) + everything below it (play
       buttons, xeno box) down so it fully clears the buttons. 6mm wasn't enough
       (box top still under the buttons); ~11mm ≈ the missing row's height clears
       it. Scoped to the win state via :has(). */
    #players-area:has(.sun-level-winner-section) {
        margin-top: 11mm;
    }
    /* (6) Narrow the yellow box (.player-hand) to match the pink Xeno box width.
       Everything (main/players-area/hand) is 380px; the pink box only LOOKS 365
       because of its scaleX(0.96). So make the yellow box 96% (= 365), centered
       in its 380 grid cell — matches the pink with no card distortion. */
    .player-hand {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    /* (7) Dominoes +12% (38×75 → 43×84). Higher specificity (#game-screen) so it
       beats the later max-height:900 portrait rule that also matches here. */
    #game-screen .domino.vertical {
        width: 43px;
        height: 84px;
    }
}

/* Tablet portrait mode */
@media (max-height: 900px) and (orientation: portrait) {
    .game-container {
        padding: 5px;
    }

    header {
        padding: 6px 12px;
        margin-bottom: 5px;
    }

    header h1 {
        font-size: 1.3rem;
    }

    .turn-indicator {
        padding: 5px 12px;
        font-size: 0.95rem;
    }

    .status {
        padding: 6px 12px;
        font-size: 0.95rem;
    }

    .board-container {
        padding: 10px;
        margin-top: 4px;
        min-height: 70px;
    }

    .board {
        min-height: 55px;
    }

    main {
        gap: 5px;
    }

    .players-area {
        gap: 6px;
    }

    .player-hand {
        padding: 6px;
    }

    .player-hand h3 {
        margin-bottom: 6px;
        font-size: 0.95rem;
    }

    .hand-tiles {
        gap: 5px;
        min-height: 45px;
    }

    .bank-area {
        padding: 8px;
        gap: 12px;
    }

    .bank-icon {
        font-size: 2.5rem;
    }

    .player-icon-display, .xeno-icon {
        width: 40px;
        height: 40px;
    }

    .domino.horizontal {
        width: 75px;
        height: 38px;
    }

    .domino.vertical {
        width: 38px;
        height: 75px;
    }

    .btn-draw {
        padding: 10px 25px;
        font-size: 0.95rem;
    }
}

/* Very small height (phone landscape or small tablets) */
@media (max-height: 500px) {
    .game-container {
        padding: 3px;
    }

    header {
        padding: 4px 8px;
        margin-bottom: 3px;
    }

    header h1 {
        font-size: 1rem;
    }

    .turn-indicator {
        padding: 3px 10px;
        font-size: 0.85rem;
    }

    .status {
        padding: 4px 8px;
        font-size: 0.85rem;
    }

    .board-container {
        padding: 5px;
        margin-top: 2px;
        min-height: 45px;
    }

    .board {
        min-height: 40px;
    }

    main {
        gap: 3px;
    }

    .domino.horizontal {
        width: 50px;
        height: 25px;
    }

    .domino.vertical {
        width: 25px;
        height: 50px;
    }

    .value-display {
        font-size: 0.8rem;
    }

    .player-hand {
        padding: 4px;
    }

    .player-hand h3 {
        margin-bottom: 4px;
        font-size: 0.85rem;
    }

    .hand-tiles {
        gap: 3px;
        min-height: 30px;
    }

    .bank-area {
        padding: 4px;
        gap: 6px;
    }

    .bank-icon {
        font-size: 1.8rem;
    }

    .bank-count {
        font-size: 1rem;
    }

    .player-icon-display, .xeno-icon {
        width: 28px;
        height: 28px;
    }

    .btn-draw {
        padding: 6px 15px;
        font-size: 0.85rem;
    }
}

/* Hide legacy keyboard hints on touch devices (iPad, phones, tablets) - keep Press/to select and key labels visible */
@media (pointer: coarse) {
    .player-key-hint {
        display: none !important;
    }
}

/* ==================== COMBINED GAMES ==================== */

/* Library game list with checkboxes */
.library-col-games .library-col-heading {
    margin-left: 15px;
}
.library-game-subtitle {
    color: #e0c060;
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0 4px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}
.library-game-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    margin-left: 10px;
    transition: opacity 0.3s ease;
}
.library-game-row.game-dimmed {
    opacity: 0.2;
}
.clone-catch-btn {
    background: rgba(255,193,7,0.2);
    border: 1px solid rgba(255,193,7,0.5);
    border-radius: 4px;
    color: #ffd54f;
    font-size: 0.8rem;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.clone-catch-btn:hover {
    background: rgba(255,193,7,0.4);
    color: #ffe082;
}
.update-source-btn {
    background: rgba(33,150,243,0.2);
    border: 1px solid rgba(33,150,243,0.5);
    border-radius: 4px;
    color: #64b5f6;
    font-size: 0.85rem;
    padding: 2px 6px;
    cursor: pointer;
}
.update-source-btn:hover {
    background: rgba(33,150,243,0.4);
    color: #90caf9;
}
.delete-catch-btn {
    background: rgba(244,67,54,0.18);
    border: 1px solid rgba(244,67,54,0.4);
    border-radius: 4px;
    color: #e57373;
    font-size: 0.75rem;
    padding: 2px 6px;
    cursor: pointer;
}
.delete-catch-btn:hover {
    background: rgba(244,67,54,0.3);
    color: #ff8a80;
}
.publish-toggle-btn {
    background: rgba(76,175,80,0.25);
    border: 1px solid rgba(76,175,80,0.5);
    border-radius: 4px;
    color: #6fcf73;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1.3;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.publish-toggle-btn:hover {
    background: rgba(76,175,80,0.4);
    color: #a5e6a8;
}
.publish-toggle-btn.unpublished {
    color: #e57373;
    background: rgba(244,67,54,0.18);
    border-color: rgba(244,67,54,0.4);
}
.publish-toggle-btn.unpublished:hover {
    color: #ff8a80;
    background: rgba(244,67,54,0.3);
}
.library-game-link.game-unpublished {
    opacity: 0.45;
    font-style: italic;
}
.play-test-btn {
    background: rgba(33,150,243,0.22);
    border: 1px solid rgba(33,150,243,0.5);
    border-radius: 4px;
    color: #64b5f6;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 7px;
    line-height: 1.3;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.play-test-btn:hover {
    background: rgba(33,150,243,0.4);
    color: #90caf9;
}
.play-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.play-modal-close {
    position: absolute;
    top: 10px; right: 18px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    width: 36px; height: 36px;
    cursor: pointer;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.play-modal-close:hover {
    background: rgba(255,80,80,0.5);
}
.play-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}
.combine-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #FFD700;
    flex-shrink: 0;
}
.combine-games-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.combine-games-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 12px rgba(255,215,0,0.4);
}

/* Combined game configuration dialog */
#combine-games-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.combine-games-dialog {
    background: #2a1a4a;
    border-radius: 16px;
    padding: 24px 32px;
    max-width: 450px;
    width: 90%;
    color: white;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.combine-games-dialog h2 {
    text-align: center;
    margin: 0 0 20px;
    color: #FFD700;
}
.combine-game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.combine-game-label {
    font-weight: bold;
    font-size: 1rem;
}
.combine-gem-input {
    width: 50px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #666;
    background: #1a0a3a;
    color: white;
    font-size: 1rem;
    text-align: center;
}
.combine-games-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}
.combine-games-btns button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
}
.combine-games-btns button:first-child {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}
.combine-games-btns button:last-child {
    background: #666;
    color: white;
}

/* Combined game start screen button */
.combined-game-btn {
    background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
    color: #333 !important;
    font-weight: bold !important;
    border: 2px solid #FFA500 !important;
}

/* Delete combined game button */
.delete-combined-btn {
    background: none;
    border: none;
    color: #FF6B6B;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.6;
    margin-left: 4px;
}
.delete-combined-btn:hover {
    opacity: 1;
}

/* Coin and gem display */
.coin-gem-display {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    flex-wrap: wrap;
    min-height: 32px;
    justify-content: center;
}
.gem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 20px;
    flex-shrink: 0;
    animation: sparkle-gem 1.5s ease-in-out infinite;
}
/* Gems stacked vertically (column-reverse → newest at the bottom), wrapping to
   a new column past _CATCH_GEMS_PER_COL. Mirrors the coin-columns layout. */
.gem-columns {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.gem-column {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1px;
}
.gem-icon.gem-new {
    animation: gem-pop-in 0.6s ease-out, sparkle-gem 1.5s ease-in-out 0.6s infinite;
}
@keyframes gem-pop-in {
    0% { transform: scale(0) rotate(-90deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* Golden coins in vertical columns - easy to count */
.coin-columns {
    display: flex;
    gap: 4px;
    align-items: flex-end;
}
.coin-column {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5pt;
    min-width: 20px;
    min-height: calc(5 * 20px + 4 * 0.5pt);
}
.gold-disk {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #FFF5B0, #FFD700 30%, #DAA520 65%, #B8860B 90%);
    border: 1.5px solid #A0760B;
    box-shadow: 0 3px 1px -1px #8B6914, 0 4px 3px rgba(0,0,0,0.3),
                inset 0 -1px 2px rgba(0,0,0,0.15), inset 0 2px 2px rgba(255,255,200,0.4);
    flex-shrink: 0;
}
.gold-disk::after {
    content: '\2605';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(160, 118, 11, 0.4);
    font-size: 9px;
}
.gold-disk.coin-appear {
    animation: disk-pop-in 0.35s ease-out both;
}
.coins-falling .gold-disk {
    animation: coin-fall-down 0.6s ease-in forwards;
}
@keyframes sparkle-gem {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.3) drop-shadow(0 0 6px rgba(100,200,255,0.8)); }
}
@keyframes disk-pop-in {
    0% { transform: scale(0) translateY(-10px); opacity: 0; }
    60% { transform: scale(1.1) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes coin-fall-down {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
}

/* Inline coin/gem display (left of "Press" in tiles container) */
.coin-gem-inline {
    padding: 2px 6px;
    min-height: 28px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

/* Stage progress indicator - 3 stacked stones */
.stage-stones {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin: 4px auto 6px;
    width: fit-content;
}
.stage-stone {
    width: 28px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    transition: all 0.4s;
}
.stage-stone.active {
    background: linear-gradient(145deg, #d4a96a, #B8860B 40%, #8B6914 80%);
    border-color: #DAA520;
    box-shadow: 0 1px 4px rgba(218,165,32,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
}

/* Stage transition overlay */
.stage-transition-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.stage-transition-text {
    color: #FFD700;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    animation: pulse-text 1s ease-in-out infinite;
}
.stage-transition-sub {
    color: white;
    font-size: 1.3rem;
    margin-top: 10px;
    text-align: center;
}
@keyframes pulse-text {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Final celebration overlay */
#combined-celebration-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a0a3a 0%, #000 100%);
}
#celebration-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.celebration-content {
    position: relative;
    z-index: 1;
    text-align: center;
}
.celebration-title {
    /* Scales down on phones so "Congratulations!" fits (was a fixed 3.5rem that
       overflowed iPhone/iPhone Pro); stays 3.5rem on tablets/desktop (≥700px). */
    font-size: clamp(1.9rem, 8vw, 3.5rem);
    color: #FFD700;
    text-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500;
    animation: celebration-glow 1s ease-in-out infinite alternate;
    margin-bottom: 10px;
    max-width: 100%;
    overflow-wrap: break-word;
}
.celebration-subtitle {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 30px;
}
.celebration-content .btn {
    font-size: 1.2rem;
    padding: 12px 36px;
}
@keyframes celebration-glow {
    0% { transform: scale(1); text-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500; }
    100% { transform: scale(1.05); text-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500, 0 0 80px #FF4500; }
}
.coin-loss-flash {
    animation: coin-loss 0.4s ease;
}
@keyframes coin-loss {
    0% { color: inherit; }
    50% { color: #FF4444; transform: scale(0.8); }
    100% { color: inherit; }
}

/* Main Page Pictures Editor - floating draggable panel */
.mpp-panel {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #2a2a3a;
    border-radius: 12px;
    border: 2px solid #666;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    min-width: 180px;
}
.mpp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid #444;
    cursor: move;
    user-select: none;
    border-radius: 10px 10px 0 0;
    background: #333;
}
.mpp-header span {
    font-size: 13px;
    font-weight: bold;
    color: #FFD700;
}
.mpp-close-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 22px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.mpp-close-btn:hover { color: white; }
.mpp-body {
    padding: 10px 12px 6px;
}
.mpp-levels-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.mpp-level-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.mpp-level-label {
    font-size: 10px;
    color: #999;
}
.mpp-level-svg-wrap {
    position: relative;
    cursor: pointer;
}
.mpp-hint {
    font-size: 10px;
    color: #888;
    text-align: center;
    margin-top: 6px;
}
.mpp-hint.mpp-hint-active {
    color: #FFD700;
    font-weight: bold;
}

/* ===== Phase 4.1: Icons section inside the IC panel ===== */
.mpp-icons-section {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(255, 213, 79, 0.08);
    border: 1px dashed rgba(255, 213, 79, 0.4);
    border-radius: 8px;
}
.mpp-icons-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.mpp-icons-header > span:first-child {
    font-size: 11px;
    font-weight: bold;
    color: #FFD54F;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mpp-icons-hint {
    font-size: 9px;
    color: #999;
    font-style: italic;
}
.mpp-icons-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* bottom-align so big & small thumbs share a baseline */
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 2px;
}
.mpp-icon-thumb {
    position: relative;
    /* width/height set by JS based on the icon's sizeClass — L1 big, S3 small. */
    padding: 2px;
    background: #f5e6c8;
    border: 2px solid #c4a45a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, box-shadow 0.1s;
    flex-shrink: 0;
}
.mpp-icon-thumb:hover {
    transform: scale(1.08);
    box-shadow: 0 0 6px rgba(255, 213, 79, 0.6);
}
/* Phase 4.2: when a slot is selected, thumbs whose size class doesn't
   match are dimmed and refuse clicks. The corner chip stays bright so
   the user can still read which class doesn't fit. */
.mpp-icon-thumb-disabled {
    opacity: 0.32;
    filter: grayscale(70%);
    cursor: not-allowed;
}
.mpp-icon-thumb-disabled:hover {
    transform: none;
    box-shadow: none;
}
/* Quick red flash when the user clicks a disabled thumb — feedback so
   they understand why nothing happened. */
.mpp-icon-thumb-reject {
    animation: mpp-icon-reject 0.35s ease;
}
@keyframes mpp-icon-reject {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.0); }
    40%  { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.85); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.0); }
}
.mpp-icon-thumb svg {
    display: block;
    pointer-events: none;
}
.mpp-icon-chip {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: rgba(77, 208, 225, 0.95);
    color: #000;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
    pointer-events: none;
}
.mpp-footer {
    padding: 6px 12px;
    border-top: 1px solid #444;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.mpp-footer .btn {
    padding: 4px 14px;
    font-size: 12px;
}
.mpp-start-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 11px;
    background: rgba(255,215,0,0.2);
    border: 1px solid rgba(255,215,0,0.5);
    border-radius: 8px;
    color: #FFD700;
    cursor: pointer;
}
.mpp-start-btn:hover {
    background: rgba(255,215,0,0.35);
}
/* Clickable areas on domino halves in MPP SVGs */
.mpp-click-area {
    cursor: pointer;
    fill: transparent;
}
.mpp-click-area:hover {
    fill: rgba(255,215,0,0.18);
}
.mpp-highlight-rect {
    pointer-events: none;
    display: none;
}
.mpp-highlight-rect.active {
    display: block;
}
/* Card/domino glow when MPP is waiting for card pick */
#game-view-cards.mpp-pick-mode .library-card,
#game-view-cards.mpp-pick-mode .game-view-domino-half {
    cursor: pointer;
    transition: outline 0.15s;
}
#game-view-cards.mpp-pick-mode .library-card:hover,
#game-view-cards.mpp-pick-mode .game-view-domino-half:hover {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Visual cue that dominos are frozen while MPP is open */
#game-view-cards.mpp-active .game-view-domino {
    opacity: 0.7;
    cursor: default;
}

/* ======== Cloud Sync UI ======== */

.sync-status {
    position: fixed;
    top: 8px;
    right: 128px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 8px;
    z-index: 10000;
    pointer-events: none;
    transition: opacity 0.3s;
}
.sync-status:empty { opacity: 0; }
.sync-status.syncing { background: rgba(255,193,7,0.85); color: #333; opacity: 1; }
.sync-status.saved   { background: rgba(76,175,80,0.85); color: #fff; opacity: 1; }
.sync-status.error   { background: rgba(231,76,60,0.85); color: #fff; opacity: 1; }

.sync-user-btn {
    position: fixed;
    top: 6px;
    right: 8px;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    z-index: 10000;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sync-user-btn:hover { background: rgba(255,255,255,0.25); }

.sync-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.sync-login-dialog {
    background: #2a2a3e;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    color: white;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.sync-login-dialog h2 { margin: 0 0 8px; font-size: 1.3rem; }
.sync-login-dialog p { margin: 0 0 16px; font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.sync-user-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 1.05rem;
    text-align: center;
    outline: none;
    margin-bottom: 12px;
}
.sync-user-input:focus { border-color: #667eea; }
.sync-user-input::placeholder { color: rgba(255,255,255,0.35); }
.sync-existing-users { margin-bottom: 12px; }
.sync-user-pick-btn {
    display: inline-block;
    margin: 3px;
    padding: 5px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
}
.sync-user-pick-btn:hover { background: rgba(255,255,255,0.2); }
.sync-login-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.sync-login-btns .btn { padding: 10px 24px; font-size: 1rem; }
.sync-login-hint { margin-top: 10px; font-size: 0.8rem; color: #e74c3c; }

.sync-backup-section {
    background: rgba(255,215,0,0.08);
    border: 1px solid rgba(255,215,0,0.25);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}
.sync-backup-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.sync-backup-btn {
    background: #4CAF50 !important;
    color: white !important;
    font-weight: 600;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
}
.sync-backup-btn:hover { background: #45a049 !important; }
.sync-restore-btn {
    background: rgba(255,255,255,0.12) !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
}
.sync-restore-btn:hover { background: rgba(255,255,255,0.2) !important; }

/* ============================================
   Catch the Double - Falling Cards Game
   ============================================ */
.catch-game-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.catch-overlay-back {
    position: fixed;
    top: 15px;
    left: 10px;
    z-index: 10001;
}
.catch-overlay-home {
    position: fixed;
    top: 15px;
    left: 54px;
    z-index: 10001;
}
.catch-overlay-label {
    position: fixed;
    top: 56px;
    left: 12px;
    z-index: 10001;
}

/* Catch coin/gem display in HUD */
.catch-coin-gem-display {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

/* Top HUD bar */
.catch-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Left padding was 100px (to clear the back/home icons when the HUD sat at
       the very top). The board-id bar now sits above the HUD, so pull the row —
       starting with the player icon — close to the left edge. The pause button
       is lifted out of this row entirely (see .catch-hud .catch-pause-btn). */
    padding: 10px 16px 10px 12px;
    background: rgba(0,0,0,0.3);
    color: white;
    font-size: 1rem;
    z-index: 2;
    flex-shrink: 0;
}
.catch-hud-score {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ffd700;
}
.catch-hud-lives {
    font-size: 1.3rem;
    letter-spacing: 4px;
    white-space: nowrap;   /* hearts stay on one line, never wrap to 2 rows */
    flex-shrink: 0;
}
.catch-hud-round {
    color: #aaa;
    font-size: 0.9rem;
    white-space: nowrap;   /* "Run N" stays on one line, never wraps */
    flex-shrink: 0;
}
.catch-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    opacity: 0.8;
}
.catch-back-btn:hover {
    opacity: 1;
}
/* Catch in-game pause button: replaces the legacy × close button. Same
   visual chrome (round, white-on-translucent), pause-bars icon. The
   2-player variant lives inside the middle column of the 3-zone layout. */
.catch-pause-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: white;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.catch-pause-btn:hover { background: rgba(255,255,255,0.3); }
.catch-pause-btn svg { display: block; }
/* Lift the in-game pause out of the HUD row up to the back/home icon line,
   pinned to the very right of the screen (mirror of .catch-overlay-back/home,
   which are left:10px / left:54px at top:15px). Scoped to .catch-hud so the
   2-player pause — also in .catch-hud — moves with it; the per-zone 2P chrome
   is unaffected. In a Big Game the icons drop to top:50px (below the banner),
   so the pause follows. */
.catch-hud .catch-pause-btn {
    position: fixed;
    top: 15px;
    right: 10px;
    z-index: 10001;
}
body.bg-playing .catch-hud .catch-pause-btn { top: 50px; }

/* Catch pause overlay: covers the in-game catch overlay while paused.
   Tap anywhere on it to resume — the resume handler also clears the
   current round so play continues from a fresh task. */
.catch-pause-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 50, 0.78);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.catch-pause-card {
    color: white;
    text-align: center;
    padding: 24px 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    pointer-events: none;
}
.catch-pause-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFD54F;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.catch-pause-sub {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
}

/* Main game area */
.catch-game-area {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* ===== 2-player Catch layout ===== */
.catch-game-area.catch-2p {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    padding: 6px;
    box-sizing: border-box;
}
.catch-2p-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,188,212,0.4);
    border-radius: 12px;
    padding: 4px;
}
.catch-2p-label {
    text-align: center;
    font-weight: bold;
    font-size: 0.95rem;
    color: #00BCD4;
    padding: 2px 0 4px;
    letter-spacing: 0.5px;
}
/* STEP 4: the per-game player icon pickers + name boxes are REMOVED from the
   Find/Catch Start pages — players now come from the global Icons-Players config.
   Hide the per-player rows (the inputs stay in the DOM so the launch still knows
   the player COUNT). The Xeno timer row + the Start Game button stay; the
   Icons-Players panel (#ip-rows) is a different container and is unaffected. */
#name-inputs .player-input-row:not(.xeno-row) { display: none; }
/* On +timer Start pages, also remove the Xeno icon + "Xeno ⏳" box from the Xeno
   row (they're saved in Misc → Xeno-Icon for later use). Keep the Start Game
   button, which lives in the Xeno row's name section. */
.xeno-row .input-section:not(.name-section) { display: none; }
.xeno-row .xeno-input { display: none; }
/* The game icon now lives in the GP 0 eye popup → remove it from the Setup/Start
   lower box. Also hide ONLY the player-options section TITLE (#setup-h3-players);
   the player-option buttons (.player-select) stay (removed much later). */
#setup-game-icon { display: none !important; }
#setup-h3-players { display: none !important; }
/* GP 0: clicking a game that doesn't support the current mode shakes the tile +
   shows a brief red note beside it (no navigation). */
.intro-game-row { position: relative; }
@keyframes intro-game-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-7px); }
    30% { transform: translateX(6px); }
    45% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    75% { transform: translateX(-3px); }
}
.intro-game-btn.intro-game-shake {
    animation: intro-game-shake 0.5s ease;
    box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.85), 0 0 12px rgba(255, 80, 80, 0.5);
}
.intro-mode-note {
    position: absolute;
    bottom: calc(100% - 1px); /* 4px lower than the previous +3px */
    right: 0; /* JS sets the exact offset so the note's RIGHT edge lines up with
                 the game box (tile) right edge, not the eye/row right edge. */
    transform: translateY(4px);
    background: rgba(214, 48, 48, 0.96);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 60;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.intro-mode-note.show {
    opacity: 1;
    transform: translateY(0);
}
/* Global player icon + name on the Catch board (1P HUD + 2P zone labels). */
.catch-player-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.catch-player-icon {
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 auto;
    display: inline-flex;
}
.catch-player-icon svg { width: 100%; height: 100%; display: block; }
.catch-hud-player {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
}
/* Big-screen devices (iPad / iPad Pro / Chromebook): the HUD text + player
   icon are sized for phones by default — scale them up here. Added by JS as
   .catch-dev-big on the overlay (see openCatchPlayModal). The player icon is
   1.5em, so bumping .catch-hud-player enlarges icon + name together. */
.catch-dev-big .catch-hud-player { font-size: 1.6rem; }
.catch-dev-big .catch-hud-round  { font-size: 1.45rem; }
.catch-dev-big .catch-hud-lives  { font-size: 2rem; }
.catch-dev-big .board-id-bar .page-name-label { font-size: 30px; }
.catch-dev-big .board-id-game { font-size: 2.1rem; }
.catch-2p-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 4px;
    font-size: 0.95rem;
    color: #fff;
}
.catch-2p-lives { letter-spacing: 1px; color: #FF5252; white-space: nowrap; }
.catch-2p-coins { color: #FFD54F; font-weight: bold; }
.catch-2p-zone {
    position: relative;
    flex: 1;
    min-height: 200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0));
    border-radius: 8px;
    overflow: hidden;
}
.catch-2p-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: rgba(255,213,79,0.08);
    border: 2px solid rgba(255,213,79,0.45);
    border-radius: 12px;
    min-width: 180px;
}
.catch-2p-target-label {
    font-size: 0.85rem;
    color: #FFD54F;
    margin-bottom: 6px;
    font-weight: 600;
    text-align: center;
}
.catch-2p-target-card {
    width: 140px;
    height: 140px;
    background: #f5e6c8;
    border: 3px solid #c4a45a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.catch-2p-target-card svg {
    width: 100%;
    height: 100%;
    display: block;
}
.catch-2p-round {
    margin-top: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
/* Narrow screens: stack zones vertically with target between (or above). */
@media (max-width: 700px) {
    .catch-game-area.catch-2p {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
    }
    .catch-2p-middle { min-width: 0; }
    .catch-2p-target-card { width: 110px; height: 110px; }
}

/* Left panel - static card */
.catch-static-panel {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-right: 2px solid rgba(255,255,255,0.1);
    z-index: 2;
}
.catch-static-label {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.catch-static-card {
    width: 140px;
    height: 140px;
    background: white;
    border-radius: 10px;
    border: 3px solid #ffd700;
    box-shadow: 0 0 25px rgba(255,215,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.catch-static-card svg {
    width: 100%;
    height: 100%;
}
/* Phones (e.g. iPhone): the 140px target overflows the 30%-wide left panel.
   Shrink it to the floating-card size (90px) and tighten the panel/label so it
   fits. */
@media (max-width: 480px) {
    .catch-static-panel { padding: 10px 6px; }
    .catch-static-card { width: 90px; height: 90px; }
    .catch-static-label { font-size: 0.72rem; letter-spacing: 1px; margin-bottom: 8px; }
}

/* Right panel - falling area */
.catch-falling-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Individual falling card */
.catch-falling-card {
    position: absolute;
    width: 90px;
    height: 90px;
    background: white;
    border-radius: 8px;
    border: 2px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    /* Immediate tap response + no double-tap-zoom; helps simultaneous
       multitouch taps (2-player) register without gesture delay. */
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    z-index: 1;
}
.catch-falling-card svg {
    width: 100%;
    height: 100%;
}
.catch-falling-card:hover {
    border-color: #64b5f6;
    box-shadow: 0 4px 20px rgba(100,181,246,0.4);
}
.catch-falling-card.catch-correct {
    border-color: #4caf50;
    box-shadow: 0 0 30px rgba(76,175,80,0.6);
    animation: catchCorrectPop 0.4s ease-out forwards;
}
.catch-falling-card.catch-wrong {
    border-color: #f44336;
    box-shadow: 0 0 20px rgba(244,67,54,0.5);
    animation: catchWrongShake 0.5s ease-in-out;
}

@keyframes catchCorrectPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes catchWrongShake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-12px) rotate(-5deg); }
    40% { transform: translateX(12px) rotate(5deg); }
    60% { transform: translateX(-8px) rotate(-3deg); }
    80% { transform: translateX(8px) rotate(3deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

/* Game over overlay */
.catch-gameover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.catch-gameover h2 {
    color: #ff6b6b;
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.catch-gameover-score {
    color: #ffd700;
    font-size: 1.5rem;
    margin-bottom: 30px;
}
/* Flex row so Play (▶) and Exit line up centered, same baseline. */
.catch-gameover-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
}
.catch-gameover-btn {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0 28px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    /* Equal-size pills, content centered — so the ▶ Play button and the Exit
       text button are the same width & height and align cleanly. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    height: 52px;
    box-sizing: border-box;
}
.catch-gameover-btn:hover {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
}
.catch-gameover-btn.catch-exit-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
}
.catch-gameover-btn.catch-exit-btn:hover {
    background: rgba(255,255,255,0.25);
}
/* Non-stop countdown for the catch Play Again button — reuses the
   tick keyframes defined for .end-game-btn.nonstop-countdown. */
.catch-gameover-btn.nonstop-countdown {
    font-variant-numeric: tabular-nums;
    animation: nonstop-tick 1s ease-out infinite;
}

/* Phones: Game Over sits over the (narrow) falling area, so shrink the Play/Exit
   pills to fit side-by-side without clipping. Placed AFTER the base rules above
   so it wins on equal specificity. */
@media (max-width: 480px) {
    .catch-gameover h2 { font-size: 2rem; }
    .catch-gameover-actions { gap: 10px; }
    .catch-gameover-btn { min-width: 110px; height: 48px; padding: 0 10px; font-size: 0.95rem; }
}

/* Missed flash */
.catch-missed-flash {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff6b6b;
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    animation: flashUp 1s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}
@keyframes flashUp {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* Wrong flash text */
.catch-wrong-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff4444;
    font-size: 2rem;
    font-weight: bold;
    opacity: 0;
    animation: flashUp 0.8s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}

/* Round transition */
.catch-round-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4caf50;
    font-size: 1.8rem;
    font-weight: bold;
    opacity: 0;
    animation: flashUp 1s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}

/* ==================== L1: DESKTOP DENSER TOOLBARS ==================== */
/* Tighter spacing on desktop only (1025px+). Mobile/tablet untouched. */
@media (min-width: 1025px) {
    /* Main left-side toolbar column */
    .library-zoom-fixed { gap: 4px; }

    /* Zoom/settings panel */
    .zoom-panel { padding: 4px 6px; gap: 3px; }
    .zoom-panel-row { gap: 3px; }
    .zoom-panel-btn { height: 28px; min-width: 32px; font-size: 13px; padding: 0 6px; }

    /* Main circular buttons (left toolbar) */
    .zoom-btn { width: 32px; height: 32px; font-size: 16px; }

    /* Loupe right-side draw tools */
    #draw-tools-panel { padding: 5px; gap: 3px; }
    .draw-tool-btn { width: 32px; height: 32px; font-size: 16px; }
    .draw-transform-row { gap: 3px; }
    .draw-shape-row { gap: 2px; }
    .draw-shape-btn { width: 24px; height: 24px; }

    /* Variation toolbar (top-left of card area) */
    .variation-toolbar { padding: 3px 5px; gap: 2px; }
    .var-tool-row { gap: 2px; }
    .var-tool-btn { width: 28px; height: 28px; }

    /* Group Edit action buttons */
    .ge-action-btn { padding: 3px 7px; font-size: 10px; }

    /* Game view toolbar */
    .game-view-toolbar { gap: 4px; }

    /* Color swatches */
    .color-swatch { width: 18px; height: 18px; }
}