/* ============================================================
   UGXO — Unicus Global Xtempore Olympiad
   "Sunny Game-Show Stage" theme.
   Shared across instructions, runner, feedback, thankyou.

   House rules (ugxo.md §7.1):
   - Brand sun yellow #FFD223 leads everything (header.css brand).
   - Body text = Roboto (the platform's exam-page font), sized UP
     from the MCQ pages (kids + readability).
   - 'Baloo 2' is used ONLY for big display headings (game-show
     energy) — all reading text stays in the house font.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Roboto:wght@400;500;700;900&display=swap');

:root {
    --paper:      #FFF8E7;
    --paper-2:    #FFEDC2;
    --ink:        #2B2014;
    --ink-soft:   #6E5A45;
    --line:       #E8D9B8;

    --sun:        #FFD223;   /* Unicus brand yellow (header.css) */
    --sun-deep:   #F5A800;
    --sun-soft:   #FFF3C4;

    --coral:      #FF6B5B;   /* Round 1 · Warm-Up  */
    --teal:       #16B8A6;   /* Round 2 · Creative */
    --grape:      #8C6BE2;   /* Round 3 · X-Factor */
    --mint:       #2FCF86;   /* success / saved    */
    --white:      #fff;

    --radius:     20px;
    --shadow:     0 6px 0 rgba(43, 32, 20, .9);
    --shadow-sm:  0 4px 0 rgba(43, 32, 20, .9);
    --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
    --font-body: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Page atmosphere -------------------------------- */
/* Anchor the gradient + dot field to the viewport so it always fills the
   screen and never breaks at the bottom when the content is short (the runner
   now fits one screen, so the body box can be shorter than the viewport). */
html { background: var(--paper); }
body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% -10%, rgba(255, 210, 35, .35), transparent 42%),
        radial-gradient(circle at 88% 0%, rgba(255, 158, 0, .22), transparent 38%),
        radial-gradient(rgba(245, 168, 0, .10) 1.6px, transparent 1.6px) 0 0 / 30px 30px,
        var(--paper);
    background-attachment: fixed, fixed, fixed, fixed;
}

/* ---------- Layout ------------------------------------------ */
.ugxo-wrap {
    max-width: 1180px;
    margin: 26px auto 60px;
    padding: 0 22px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
}

.ugxo-card {
    position: relative;
    background: var(--white);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 36px;
    margin-bottom: 26px;
}
.ugxo-card::before {                       /* marquee tab */
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 9px;
    background: var(--sun);
    border: 3px solid var(--ink);
    border-radius: 0 0 9px 9px;
}
.ugxo-center { text-align: center; }

/* ---------- Type -------------------------------------------- */
.ugxo-title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    margin: 8px 0 6px;
    color: var(--ink);
}
.ugxo-sub {
    font-size: 22px;
    font-weight: 700;
    color: var(--sun-deep);
    margin: 0 0 18px;
}
.ugxo-h3 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    margin: 30px 0 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ugxo-help { font-size: 16px; color: var(--ink-soft); margin: 6px 0; }
.ugxo-points-text { font-size: 18px; color: var(--ink-soft); max-width: 760px; margin: 10px auto 18px; }

/* Mascot + speech bubble */
.ugxo-mascot {
    width: 84px; height: 84px;
    margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
    background: radial-gradient(circle at 30% 25%, #FFE680, var(--sun));
    border: 3px solid var(--ink);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}
.ugxo-mascot.ugxo-big { width: 116px; height: 116px; font-size: 62px; }
.ugxo-bubble {
    display: inline-block;
    position: relative;
    background: var(--sun-soft);
    border: 3px solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px 26px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin: 10px 0 4px;
}

/* ---------- Buttons ------------------------------------------ */
.ugxo-btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    background: var(--white);
    border: 3px solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px 28px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
    user-select: none;
}
.ugxo-btn:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); }
.ugxo-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43,32,20,.9); }
.ugxo-btn-yellow { background: var(--sun); }
.ugxo-btn-yellow:hover { background: #FFDD55; }
.ugxo-btn-go {
    background: var(--sun);
    font-size: 25px;
    padding: 16px 44px;
}
.ugxo-btn-go:hover { background: #FFDD55; }
.ugxo-btn-link {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 17px;
    text-decoration: underline;
    color: var(--ink-soft);
    padding: 8px 12px;
}
.ugxo-btn-link:hover { transform: none; color: var(--ink); }
.ugxo-btn.disabled, .ugxo-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: auto;
    transform: none;
}
.ugxo-btn-ghost {
    background: var(--paper);
    font-size: 18px;
}

/* ---------- Instructions: round cards ------------------------ */
.ugxo-rounds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 16px 0 26px;
}
.ugxo-round-pill {
    border: 3px solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    background: var(--white);
    padding: 18px 20px 20px;
    position: relative;
    overflow: hidden;
}
.ugxo-round-pill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
}
.ugxo-round-pill:nth-child(1)::before { background: var(--coral); }
.ugxo-round-pill:nth-child(2)::before { background: var(--teal); }
.ugxo-round-pill:nth-child(3)::before { background: var(--grape); }
.ugxo-round-no {
    display: block;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sun-deep);
    margin: 8px 0 2px;
}
.ugxo-round-pill strong {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 700;
    display: block;
}
.ugxo-round-glyph { font-size: 34px; float: right; margin-top: 6px; }
.ugxo-round-meta {
    display: block;
    font-size: 16px;
    color: var(--ink-soft);
    margin-top: 6px;
}

.ugxo-points { list-style: none; padding: 0; margin: 0 0 8px; }
.ugxo-points li {
    font-size: 18px;
    padding: 7px 0 7px 36px;
    position: relative;
}
.ugxo-points li::before {
    content: '★';
    position: absolute;
    left: 6px;
    color: var(--sun-deep);
}

.ugxo-step {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--sun);
    border: 3px solid var(--ink);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    flex: 0 0 auto;
}

/* Setup row: mic check (+ camera check for WC users) + consent */
.ugxo-setup {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 22px;
    align-items: stretch;
    margin-top: 6px;
}
.ugxo-setup-3 { grid-template-columns: 1.15fr 1fr 1fr; }

/* Camera self-test preview (instructions) */
.ugxo-cam-preview {
    margin: 12px 0 6px;
}
.ugxo-cam-preview video {
    width: 230px;
    max-width: 100%;
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    display: block;
}

/* Live proctor camera — fixed top-right through the whole exam (D9) */
.ugxo-webcam {
    position: fixed;
    top: 86px;
    right: 18px;
    z-index: 50;
    width: 164px;
    min-height: 30px;
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    background: var(--ink);
    overflow: hidden;
}
.ugxo-webcam video {
    width: 100%;
    display: block;
}
.ugxo-webcam-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--white);
    background: var(--coral);
    border-radius: 6px;
    padding: 2px 8px;
}
.ugxo-setup-box {
    border: 3px dashed var(--ink-soft);
    border-radius: 18px;
    padding: 20px 24px;
    background: var(--paper);
}

.ugxo-selftest { margin: 6px 0; }
.ugxo-selftest .ugxo-btn { margin: 4px 10px 10px 0; }
.ugxo-audio { width: 100%; margin: 10px 0; }
.ugxo-status { font-size: 16px; font-weight: 700; color: var(--sun-deep); min-height: 24px; }

.ugxo-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.55;
    cursor: pointer;
    margin: 10px 0;
}
.ugxo-check input { width: 22px; height: 22px; margin-top: 4px; flex: 0 0 auto; accent-color: var(--sun-deep); }
/* Label is muted (grey) until ticked, then darkens to ink — normal weight, not
   bold. (Overrides Materialize's default grey label colour from the dashboard
   template.) */
.ugxo-check { color: var(--ink-soft); }
.ugxo-check:has(input:checked) { color: var(--ink); font-weight: 400; }

.ugxo-actions { text-align: center; margin-top: 30px; }

/* ---------- Runner: journey map ------------------------------ */
.ugxo-progress {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 6px 0 24px;
    flex-wrap: wrap;
}
.ugxo-station {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 8px 20px 8px 10px;
    font-size: 17px;
    font-weight: 700;
}
.ugxo-station em { font-style: normal; }
.ugxo-station-dot {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    font-family: var(--font-display);
    font-weight: 800;
    background: var(--paper);
}
.ugxo-station.done    { background: var(--sun-soft); }
.ugxo-station.done    .ugxo-station-dot { background: var(--mint); color: var(--white); }
.ugxo-station.current { background: var(--sun); animation: ugxo-pulse 1.6s ease-in-out infinite; }
.ugxo-station.current .ugxo-station-dot { background: var(--white); }
.ugxo-station.todo    { opacity: .55; }
@keyframes ugxo-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* ---------- Runner: screens ---------------------------------- */
.ugxo-screen {
    background: var(--white);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    padding: 40px 36px 46px;
    min-height: 520px;
}
.ugxo-screen-title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    margin: 6px 0 12px;
}
/* ---------- Reveal stage -------------------------------------- */
.ugxo-reveal-stage { margin: 18px auto 8px; min-height: 310px; }
.ugxo-reveal-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    outline-offset: 6px;
}
.ugxo-reveal-trigger:disabled { cursor: default; }
.rv { display: none; }
.rv.rv-on { display: block; }

/* --- The Prize Wheel (Round 1) --- */
.rv-wheel { position: relative; width: 290px; height: 300px; margin: 0 auto; padding-top: 10px; }
.wheel-pointer {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 30px solid var(--coral);
    filter: drop-shadow(0 3px 0 rgba(43,32,20,.9));
    z-index: 3;
}
.wheel-disc {
    width: 290px; height: 290px;
    border-radius: 50%;
    border: 5px solid var(--ink);
    box-shadow: var(--shadow), inset 0 0 0 8px var(--white);
    /* 8 segments alternating the two Unicus brand (logo) colours — yellow and
       teal — for a clean, on-brand spinner with strong warm/cool contrast. */
    background: conic-gradient(
        var(--sun)      0    45deg,
        var(--teal)   45deg  90deg,
        var(--sun)    90deg 135deg,
        var(--teal)  135deg 180deg,
        var(--sun)   180deg 225deg,
        var(--teal)  225deg 270deg,
        var(--sun)   270deg 315deg,
        var(--teal)  315deg 360deg
    );
    position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: transform 3.4s cubic-bezier(.1, .65, .06, 1);
}
.wheel-disc.spin { transform: rotate(var(--spin-end, 1980deg)); }
/* Segment numbers 1-8 — placed at each wedge centre (--a), pushed out toward
   the rim, then counter-rotated so the digit stays upright. Makes every
   segment distinct on the two-colour wheel. */
.wheel-num {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-110px) rotate(calc(-1 * var(--a)));
}
.wheel-hub {
    position: relative; z-index: 2;   /* above the segment numbers */
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--white);
    border: 4px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}

/* --- Pick-a-Card (Round 2) --- */
.rv-cards { position: relative; width: 470px; max-width: 100%; height: 310px; margin: 0 auto; perspective: 1100px; }
.gcard {
    position: absolute;
    top: 36px; left: 50%;
    width: 158px; height: 224px;
    margin-left: -79px;
    transition: transform .55s cubic-bezier(.34, 1.45, .5, 1);
}
.gcard.c1 { transform: translateX(-130px) rotate(-12deg); }
.gcard.c2 { transform: translateY(-14px); }
.gcard.c3 { transform: translateX(130px) rotate(12deg); }
.rv-cards.shuffling .gcard { animation: ugxo-shuffle .42s ease-in-out 2; }
@keyframes ugxo-shuffle {
    0%, 100% { margin-top: 0; }
    35%      { margin-top: -26px; }
    70%      { margin-top: 10px; }
}
.gcard-inner {
    display: block;          /* span -> block: position:relative alone leaves it
                                inline, collapsing width/height to 0 and hiding the
                                card faces (only their content overflowed into view) */
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.3, 1.2, .4, 1);
}
.gcard.flip .gcard-inner { transform: rotateY(180deg); }
.gcard.flip { transform: translateY(-34px) scale(1.12); z-index: 4; }
.gcard.dimmed { opacity: .35; }
.gcard-back, .gcard-front {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    backface-visibility: hidden;
    border: 4px solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
}
.gcard-back {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 14%, transparent 15%),
        repeating-linear-gradient(45deg, var(--sun) 0 14px, var(--sun-deep) 14px 28px);
}
.gcard-back::after {
    content: '★';
    position: absolute;
    font-size: 44px;
    color: var(--white);
    text-shadow: 0 2px 0 rgba(43,32,20,.55);
}
.gcard-front { background: var(--white); transform: rotateY(180deg); }

/* --- Mystery Dice (Round 3) --- */
.rv-dice { width: 290px; height: 310px; margin: 0 auto; perspective: 900px; padding-top: 80px; }
.dice {
    display: block;          /* same span->block fix as .gcard-inner: keep the
                                cube wrapper from collapsing to zero size */
    position: relative;
    width: 130px; height: 130px;
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(32deg);
}
.dice.tumble { animation: ugxo-tumble 2.6s cubic-bezier(.2, .7, .25, 1) forwards; }
@keyframes ugxo-tumble {
    0%   { transform: rotateX(-22deg)  rotateY(32deg)   translateY(0); }
    18%  { transform: rotateX(220deg)  rotateY(160deg)  translateY(-90px); }
    42%  { transform: rotateX(500deg)  rotateY(420deg)  translateY(0); }
    62%  { transform: rotateX(740deg)  rotateY(660deg)  translateY(-44px); }
    82%  { transform: rotateX(1058deg) rotateY(1056deg) translateY(0); }
    92%  { transform: rotateX(1066deg) rotateY(1090deg) translateY(-8px); }
    100% { transform: rotateX(1058deg) rotateY(1112deg) translateY(0); }
}
.dice .face {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white);
    border: 4px solid var(--ink);
    border-radius: 18px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    padding: 16px;
}
.dice .pip {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ink);
    align-self: center;
    justify-self: center;
}
.dice .pip.sun { background: var(--sun-deep); }
.dice .f1 { transform: translateZ(65px); }
.dice .f2 { transform: rotateY(180deg) translateZ(65px); }
.dice .f3 { transform: rotateY(90deg)  translateZ(65px); }
.dice .f4 { transform: rotateY(-90deg) translateZ(65px); }
.dice .f5 { transform: rotateX(90deg)  translateZ(65px); }
.dice .f6 { transform: rotateX(-90deg) translateZ(65px); }
/* pip placement helpers */
.pos-tl { grid-row: 1; grid-column: 1; } .pos-tr { grid-row: 1; grid-column: 3; }
.pos-ml { grid-row: 2; grid-column: 1; } .pos-c  { grid-row: 2; grid-column: 2; } .pos-mr { grid-row: 2; grid-column: 3; }
.pos-bl { grid-row: 3; grid-column: 1; } .pos-br { grid-row: 3; grid-column: 3; }

/* ---------- Exam-integrity warning overlay (§11) -------------- */
.ugxo-integrity-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;                 /* JS toggles to flex on a violation */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(43, 32, 20, .72);
}
.ugxo-integrity-card {
    background: var(--white);
    border: 4px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 520px;
    width: 100%;
    text-align: center;
    padding: 30px 28px 34px;
}
.ugxo-integrity-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--coral);
    margin: 8px 0 10px;
}
.ugxo-integrity-text {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* idle nudge so the trigger looks tappable */
.ugxo-reveal-trigger:not(:disabled) .rv.rv-on { animation: ugxo-bob 2.2s ease-in-out infinite; }
@keyframes ugxo-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-9px) rotate(1.2deg); }
}

/* ---------- Topic card ---------------------------------------- */
.ugxo-topic-card {
    margin: 22px auto 0;
    max-width: 820px;
    background: var(--sun-soft);
    border: 4px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 34px 28px;
}
/* Pinned at the top of the runner — one fixed, prominent home for the topic
   across the reveal payoff, prep and record screens. */
.ugxo-topic-banner { margin: 0 auto 22px; }
.ugxo-topic-card.pop { animation: ugxo-pop .55s cubic-bezier(.3, 1.6, .45, 1); }
@keyframes ugxo-pop {
    0%   { transform: scale(.55); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.ugxo-topic-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sun-deep);
}
.ugxo-topic-text {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin: 8px 0 0;
}

/* ---------- Timers --------------------------------------------- */
.ugxo-timer-ring {
    --p: 100;
    --ring: var(--teal);
    width: 168px; height: 168px;
    margin: 18px auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 58px;
    font-weight: 800;
    border: 4px solid var(--ink);
    box-shadow: var(--shadow-sm);
    background:
        radial-gradient(var(--white) 58%, transparent 59%),
        conic-gradient(var(--ring) calc(var(--p) * 1%), var(--line) 0);
}
.ugxo-timer-record { --ring: var(--coral); }
.ugxo-timer-ring.urgent { --ring: var(--coral); animation: ugxo-pulse .9s ease-in-out infinite; }

/* ---------- Record screen --------------------------------------- */
.ugxo-waveform {
    width: 100%;
    max-width: 760px;
    height: 130px;
    background: var(--ink);
    border: 4px solid var(--ink);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    margin: 8px auto;
    display: block;
}
.ugxo-listening {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    background: var(--mint);
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 6px 22px;
    margin-top: 12px;
    animation: ugxo-pulse 1.4s ease-in-out infinite;
}

/* ---------- Uploading -------------------------------------------- */
.ugxo-spinner {
    width: 76px; height: 76px;
    margin: 60px auto 22px;
    border-radius: 50%;
    border: 8px solid var(--sun-soft);
    border-top-color: var(--sun-deep);
    animation: ugxo-spin 1s linear infinite;
}
@keyframes ugxo-spin { to { transform: rotate(360deg); } }

/* ---------- Rest screen ------------------------------------------- */
.ugxo-rest .ugxo-breathe { animation: ugxo-breathe-anim 4s ease-in-out infinite; }
.ugxo-breathe-orb {
    width: 130px; height: 130px;
    margin: 16px auto;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #B9F2E8, var(--teal));
    border: 4px solid var(--ink);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .02em;
    animation: ugxo-breathe-anim 4s ease-in-out infinite;
}
@keyframes ugxo-breathe-anim {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.22); }
}
.ugxo-saved {
    display: inline-block;
    background: var(--mint);
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    border: 3px solid var(--ink);
    border-radius: 999px;
    padding: 7px 24px;
}
.ugxo-whatsnext { font-size: 21px; font-weight: 700; margin: 16px 0 4px; }
.ugxo-tip { font-size: 18px; color: var(--ink-soft); }
.ugxo-hydrate { font-size: 17px; color: var(--ink-soft); }
.ugxo-rest-timer {
    font-size: 17px;
    color: var(--ink-soft);
    margin: 14px 0 18px;
}

/* ---------- Feedback / results bits -------------------------------- */
.ugxo-score-hero { margin: 14px 0 4px; }
.ugxo-score-big {
    font-family: var(--font-display);
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
}
.ugxo-score-max { font-size: 34px; color: var(--ink-soft); font-weight: 700; }
.ugxo-band {
    display: inline-block;
    background: var(--sun);
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    padding: 8px 30px;
    margin: 12px 0 6px;
}
.ugxo-round-feedback { text-align: left; }
.ugxo-round-feedback.acc-1 { border-top: 10px solid var(--coral); }
.ugxo-round-feedback.acc-2 { border-top: 10px solid var(--teal); }
.ugxo-round-feedback.acc-3 { border-top: 10px solid var(--grape); }
.ugxo-round-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.ugxo-round-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.ugxo-round-score { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--sun-deep); }
.ugxo-bar {
    height: 18px;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden;
    margin: 10px 0;
}
.ugxo-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sun), var(--sun-deep));
}
.ugxo-commentary { font-size: 18px; margin: 10px 0 0; }

/* ---------- Confetti ------------------------------------------------ */
.ugxo-confetti {
    position: fixed;
    top: -16px;
    width: 12px; height: 16px;
    z-index: 9999;
    pointer-events: none;
}
@keyframes ugxo-fall {
    0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
    100% { transform: translateY(105vh) rotate(560deg); opacity: .85; }
}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 900px) {
    .ugxo-rounds { grid-template-columns: 1fr; }
    .ugxo-setup, .ugxo-setup-3 { grid-template-columns: 1fr; }
    .ugxo-title { font-size: 34px; }
    .ugxo-card { padding: 22px 20px; }
    .ugxo-screen { padding: 26px 16px 36px; }
    .rv-cards { width: 100%; }
    .gcard.c1 { transform: translateX(-104px) rotate(-12deg); }
    .gcard.c3 { transform: translateX(104px) rotate(12deg); }
}

/* ---------- Runner: fit one viewport (tablets / small laptops) -------
   The instructions page may scroll, but the in-exam screens (each round,
   prep, record, break) should fit a single screen with no scrolling. Every
   rule below is scoped to .ugxo-runner so the instructions & feedback pages
   are untouched, and the big elements scale with viewport HEIGHT via
   --rv-scale so they shrink on short laptop/tablet screens. */
.ugxo-runner { --rv-scale: 1; }

.ugxo-wrap.ugxo-runner { margin: 8px auto 8px; }

.ugxo-runner .ugxo-progress { margin: 0 0 10px; gap: 10px; }
.ugxo-runner .ugxo-station { padding: 5px 16px 5px 6px; font-size: 15px; gap: 8px; }
.ugxo-runner .ugxo-station-dot { width: 28px; height: 28px; }

.ugxo-runner .ugxo-screen { min-height: 0; padding: 12px 26px 10px; }
.ugxo-runner .ugxo-screen-title { font-size: 24px; margin: 2px 0 6px; }

.ugxo-runner .ugxo-mascot { width: 56px; height: 56px; font-size: 30px; margin: 0 auto 4px; }
.ugxo-runner .ugxo-bubble { font-size: 19px; padding: 7px 18px; margin: 2px 0; }

/* Reveal stage: reserve only the SCALED machine height; scale the trigger
   (not the inner .rv, whose idle-bob animation owns its transform). */
.ugxo-runner .ugxo-reveal-stage {
    min-height: 0;
    height: calc(316px * var(--rv-scale));
    margin: 4px auto 2px;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
}
.ugxo-runner .ugxo-reveal-trigger { transform: scale(var(--rv-scale)); transform-origin: center; }

/* Persistent topic banner: compact on the prep/record screens. */
.ugxo-runner .ugxo-topic-banner { margin: 0 auto 8px; padding: 8px 22px 10px; }
.ugxo-runner .ugxo-topic-label { font-size: 12px; }
.ugxo-runner .ugxo-topic-text { font-size: clamp(19px, 2.8vh, 28px); }

/* Prep / record / break big elements scale with viewport height. */
.ugxo-runner .ugxo-timer-ring {
    width: calc(122px * var(--rv-scale)); height: calc(122px * var(--rv-scale));
    margin: 4px auto; font-size: calc(44px * var(--rv-scale));
}
.ugxo-runner .ugxo-waveform { height: calc(74px * var(--rv-scale)); margin: 2px auto; }
.ugxo-runner .ugxo-listening { margin-top: 2px; }
.ugxo-runner .ugxo-help { margin: 4px 0; }
.ugxo-runner .ugxo-breathe-orb { width: calc(120px * var(--rv-scale)); height: calc(120px * var(--rv-scale)); margin: 8px auto; font-size: calc(15px * var(--rv-scale)); }
.ugxo-runner .ugxo-whatsnext { margin: 8px 0 2px; }
.ugxo-runner .ugxo-tip, .ugxo-runner .ugxo-hydrate { margin: 2px 0; }
.ugxo-runner .ugxo-rest-timer { margin: 8px 0 6px; }
.ugxo-runner .ugxo-spinner { margin: 26px auto 16px; }

/* Height tiers. Each tier must fit its SHORTEST viewport (content height is
   constant within a tier while the viewport varies), so the fixed-chrome trims
   come in at the FIRST tier (<=820) and apply across the whole laptop/tablet
   band; the shorter tiers then only tighten --rv-scale (and the mascot/title
   on the smallest screens). No overflow seam between tiers. */
@media (max-height: 820px) {
    .ugxo-runner { --rv-scale: .84; }
    .ugxo-runner .ugxo-screen { padding: 10px 24px 8px; }
    .ugxo-runner .ugxo-screen-title { font-size: 22px; margin: 0 0 4px; }
    .ugxo-runner .ugxo-progress { margin-bottom: 6px; }
    .ugxo-runner .ugxo-station { padding: 4px 13px 4px 5px; font-size: 14px; }
    .ugxo-runner .ugxo-station-dot { width: 26px; height: 26px; }
    .ugxo-runner .ugxo-topic-banner { padding: 6px 18px 8px; margin-bottom: 6px; }
    .ugxo-runner .ugxo-bubble { font-size: 18px; padding: 6px 16px; }
    .ugxo-runner .ugxo-btn { font-size: 18px; }
    .ugxo-runner .ugxo-listening { font-size: 15px; padding: 4px 16px; }
    /* Break screen (most stacked: orb + 3 text lines + button + timer). */
    .ugxo-runner .ugxo-breathe-orb { width: calc(92px * var(--rv-scale)); height: calc(92px * var(--rv-scale)); margin: 4px auto; }
    .ugxo-runner .ugxo-saved { font-size: 15px; padding: 5px 18px; }
    .ugxo-runner .ugxo-whatsnext { font-size: 18px; margin: 4px 0 2px; }
    .ugxo-runner .ugxo-tip { font-size: 15px; }
    .ugxo-runner .ugxo-hydrate { font-size: 15px; }
    .ugxo-runner .ugxo-rest-timer { font-size: 14px; margin: 4px 0 2px; }
}
@media (max-height: 740px) { .ugxo-runner { --rv-scale: .70; } }
@media (max-height: 640px) {
    .ugxo-runner { --rv-scale: .60; }
    .ugxo-runner .ugxo-screen-title { font-size: 20px; }
    .ugxo-runner .ugxo-mascot { width: 50px; height: 50px; font-size: 26px; }
}
@media (max-height: 560px) {
    .ugxo-runner { --rv-scale: .52; }
    .ugxo-runner .ugxo-mascot { width: 44px; height: 44px; font-size: 22px; }
    .ugxo-runner .ugxo-screen-title { font-size: 18px; }
}

/* ---------- Public "Try it" demo: results screen ------------------- */
.ugxo-results-caveat {
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 640px;
    margin: 2px auto 14px;
    line-height: 1.5;
}
.ugxo-results-rounds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 960px;
    margin: 0 auto 18px;
    text-align: left;
}
.ugxo-result-round {
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    background: var(--white);
    padding: 12px 14px 14px;
    border-top-width: 8px;
}
.ugxo-result-round.acc-1 { border-top-color: var(--coral); }
.ugxo-result-round.acc-2 { border-top-color: var(--teal); }
.ugxo-result-round.acc-3 { border-top-color: var(--grape); }
.ugxo-result-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; margin-bottom: 8px;
}
.ugxo-result-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.ugxo-result-score { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--sun-deep); }
.ugxo-result-score small { font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.ugxo-crit {
    display: grid;
    grid-template-columns: 1fr 70px 44px;
    align-items: center; gap: 8px;
    font-size: 12.5px; margin: 4px 0;
}
.ugxo-crit-name { color: var(--ink); }
.ugxo-crit-bar { height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ugxo-crit-bar span { display: block; height: 100%; background: var(--mint); border-radius: 999px; }
.ugxo-crit-num { text-align: right; color: var(--ink-soft); font-weight: 700; }
.ugxo-result-comment {
    font-size: 13px; color: var(--ink-soft);
    margin: 8px 0 0; border-top: 1px dashed var(--line); padding-top: 8px;
}
.ugxo-results-cta { margin-top: 6px; }
.ugxo-results-cta .ugxo-btn-link { font-size: 15px; margin-top: 10px; display: inline-block; }

/* ---------- Mobile (phones) — the demo runs here; exams don't ------ */
@media (max-width: 640px) {
    .ugxo-wrap.ugxo-runner { padding: 0 12px; margin: 8px auto; }
    .ugxo-runner { --rv-scale: .66; }
    .ugxo-runner .ugxo-screen { padding: 12px 14px 14px; }
    .ugxo-runner .ugxo-progress { gap: 6px; }
    .ugxo-runner .ugxo-station { padding: 4px 10px 4px 4px; font-size: 12px; gap: 6px; }
    .ugxo-runner .ugxo-station-dot { width: 22px; height: 22px; }
    .ugxo-runner .ugxo-bubble { font-size: 16px; padding: 6px 14px; }
    .ugxo-runner .ugxo-screen-title { font-size: 19px; }
    .ugxo-results-rounds { grid-template-columns: 1fr; }
}

/* ---------- Public demo inside the full site template ------------- */
/* The demo renders within templates/template, which loads Materialize and a
   fixed site header. Two fixes scoped to the demo so the immersive UGXO views
   survive that environment: */

/* 1) Materialize hides native checkboxes (opacity:0; absolute). The UGXO
   consent + mic-check boxes use plain inputs — force them visible. */
.ugxo-check input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: checkbox !important;
    appearance: auto !important;
    width: 22px; height: 22px;
    margin-top: 4px;
    accent-color: var(--sun-deep);
}

/* 2) Clear the fixed header (contact bar 41px + nav ~115px) so the content
   doesn't slide under it. .all-content only pads the 41px contact bar. */
.ugxo-demo { margin-top: 0; padding-top: 124px; }
@media (max-width: 600px) { .ugxo-demo { padding-top: 92px; } }

/* 3) Demo → sign-up nudges (demo only). Entry banner on the instructions page
   + the nudge line above the results-screen CTA. The real exam never renders
   these (guarded by $demo in the views). */
.ugxo-demo-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255, 196, 0, .16), rgba(25, 191, 176, .12));
    border: 1px solid var(--sun-deep);
}
.ugxo-demo-nudge p { margin: 0; flex: 1 1 320px; color: var(--ink); font-weight: 600; }
.ugxo-demo-nudge .ugxo-btn { flex: 0 0 auto; white-space: nowrap; }
.ugxo-results-nudge {
    margin: 4px auto 14px;
    max-width: 520px;
    color: var(--ink);
    font-weight: 600;
}

/* Mic-blocked recovery steps (instructions self-test). Shown only when the
   browser denies microphone access. */
.ugxo-permission-help {
    margin-top: 12px;
    text-align: left;
    background: var(--sun-soft);
    border: 1px solid var(--sun-deep);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}
.ugxo-permission-help strong { display: block; margin-bottom: 6px; }
.ugxo-permission-help .ugxo-uph-lead { margin: 6px 0 8px; }
.ugxo-permission-help ul { margin: 6px 0 0; padding-left: 18px; }
.ugxo-permission-help li { margin: 5px 0; }
@media (max-width: 600px) {
    .ugxo-demo-nudge { justify-content: center; text-align: center; }
}