/* ============================================================================
   HKM Quiz — Kiosk theme  ·  "Sacred Wisdom"
   Light ivory canvas, elegant serif display, faint gold line-art.
   One fluid :root font-size drives global scale → grows with a 55" wall.
   ========================================================================== */

:root {
    /* palette */
    --bg-1: #FCF7ED;
    --bg-2: #F3E9D6;
    --ink: #2A2520;
    /* near-black headings        */
    --gold: #9A6A1E;
    /* serif accent / brand       */
    --gold-2: #7E531A;
    --gold-soft: #CBA45C;
    --orange: #F49B2B;
    --orange-2: #EC8917;
    --teal: #1FA38A;
    --teal-2: #178B73;
    --red: #C53A2B;
    --red-soft: #FBE7E2;
    --cert-gold: #E7B53F;
    --body: #6E6356;
    /* body text                  */
    --muted: #A99A80;
    /* eyebrows / meta            */
    --card: #FFFEFB;
    --line: #EADFC9;
    --line-2: #E0D2B5;

    --radius: 1.4rem;
    --radius-sm: .85rem;
    --shadow: 0 2rem 4rem -1.2rem rgba(120, 86, 24, .20), 0 .4rem 1rem -.6rem rgba(120, 86, 24, .10);
    --shadow-sm: 0 .8rem 2rem -.6rem rgba(120, 86, 24, .18);

    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Fluid global scale: ~16px on a phone … up to 46px on a 4K 55" wall.
       Everything is sized in rem, so this one knob drives the whole UI.

       --scale is the ideal size for the screen's width; --fit is the runtime
       correction. fit.js turns --fit down when a screen is too SHORT for its
       content, so the kiosk shrinks to fit rather than scrolling. Height is
       deliberately not in the clamp: it varies per screen, so only a live
       measurement gets it right. See public/kiosk/js/fit.js. */
    --fit: 1;
    --scale: clamp(16px, 1.05vw, 46px);
    font-size: calc(var(--scale) * var(--fit));
}

* {
    box-sizing: border-box
}

/* The kiosk is a fixed viewport: nothing above .kiosk-main may ever scroll. */
html {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none
}

body {
    height: 100%
}

img {
    max-width: 100%;
    height: auto
}

body.kiosk {
    margin: 0;
    height: 100vh;
    height: 100dvh;      /* the app shell is a fixed viewport — it never document-scrolls */
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    /* Nothing scrolls, so panning is moot; what this buys is dropping the
       double-tap-zoom delay, which makes every tap on the wall feel immediate. */
    touch-action: manipulation;
    font-family: var(--font-body);
    color: var(--body);
    background:
        radial-gradient(40rem 26rem at 50% -8%, rgba(244, 155, 43, .12), transparent 70%),
        linear-gradient(170deg, var(--bg-1) 0%, #FAF3E6 45%, var(--bg-2) 100%);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* faint concentric gold ring "ripples" in the corners — pure CSS line-art */
body.kiosk::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-radial-gradient(circle at 50% 0%, transparent 0 6.4rem, rgba(203, 164, 92, .10) 6.4rem 6.45rem),
        repeating-radial-gradient(circle at 4% 104%, transparent 0 5.2rem, rgba(203, 164, 92, .09) 5.2rem 5.25rem),
        repeating-radial-gradient(circle at 98% 102%, transparent 0 5.2rem, rgba(203, 164, 92, .09) 5.2rem 5.25rem);
    -webkit-mask-image: linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000);
    opacity: .9;
}

.kiosk-shell {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;   /* allow .kiosk-main to shrink and scroll inside the fixed shell */
    /* animates the keyboard-open reserve (padding-bottom) in sync with the slide */
    transition: padding-bottom .22s ease
}

/* ----------------------------------------------------------------- topbar */
.kiosk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.8rem;
    background: rgba(255, 253, 247, .78);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;   /* header keeps its height; only .kiosk-main gives way */
}

.kiosk-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none
}

/* The markup carries width/height attributes to reserve space before the image
   loads; rem here overrides them so the logo scales with the rest of the UI. */
.kiosk-brand img {
    height: 3.2rem;
    width: auto
}

.brand-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 2px dotted var(--gold-soft);
    display: grid;
    place-items: center;
    flex: 0 0 auto
}

.brand-mark::after {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffd589, var(--orange) 72%);
    box-shadow: 0 .15rem .4rem rgba(236, 137, 23, .5)
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05
}

.brand-text b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--gold);
    letter-spacing: .2px
}

.brand-text small {
    font-size: .5rem;
    letter-spacing: .26em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 600
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: .6rem
}

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--card);
    border: 1.5px solid var(--gold-soft);
    color: var(--gold);
    border-radius: 99px;
    padding: .55rem 1.2rem;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: .15s
}

.home-btn:hover {
    background: #fff;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px)
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    background: var(--card);
    color: var(--gold);
    border: 1.5px solid var(--line-2);
    padding: .45rem .9rem;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    font-size: .82rem;
    transition: .15s
}

.lang-pill.active {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    border-color: transparent
}

/* ------------------------------------------------- language picker screen
   Shown after the details form. A temple runs a handful of languages, not
   dozens, so these wrap freely instead of paging like the category grid. */
.lang-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: .3rem
}

.lang-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    /* Fixed basis, allowed to shrink — same rule as .cat-card, so two or five
       languages both land on a tidy row rather than stretching edge to edge. */
    flex: 0 1 13rem;
    min-width: 9rem;
    min-height: 7.5rem;
    padding: 1.4rem 1rem;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: .16s
}

.lang-card:hover {
    border-color: var(--gold-soft);
    transform: translateY(-.25rem);
    box-shadow: var(--shadow-sm)
}

.lang-card.active {
    border-color: var(--orange);
    box-shadow: 0 0 0 .18rem rgba(244, 155, 43, .25), var(--shadow-sm)
}

.lang-card-dot {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    font-size: .7rem;
    display: none;
    place-items: center;
    box-shadow: 0 0 0 .16rem #fff, 0 .3rem .8rem -.15rem rgba(236, 137, 23, .55)
}

.lang-card.active .lang-card-dot {
    display: grid
}

/* The native name leads: a visitor scanning for their language reads this one,
   not the English label under it. */
.lang-native {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--ink);
    text-align: center
}

.lang-name {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted)
}

/* ------------------------------------------------------------------ main */
.kiosk-main {
    flex: 1;
    min-width: 0;
    min-height: 0;              /* required so the flex child can shrink, not stretch the shell */
    display: flex;
    align-items: safe center;   /* centre when it fits; fall back to top so fit.js can see the overflow */
    justify-content: center;
    /* No scroll region anywhere: when a screen doesn't fit, fit.js shrinks the
       one rem knob until it does, rather than handing the visitor a scrollbar.
       Padding is in rem so it shrinks along with everything else. */
    overflow: hidden;
    padding: 1.4rem 2.2rem
}

.stage {
    width: 100%;
    min-width: 0;
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
    /* Column layout so screens can hand a region the leftover height with
       flex:1 (see .stage.fill / .stage-body) instead of guessing at max-heights.

       "safe" is essential, not decoration: a plain `center` pushes overflow out
       BOTH ends, so half of it sits above the box where it is unreachable and —
       because scrollHeight only measures the end edge — invisible to fit.js.
       Overflow has to go one way, downward, for the shrink to be triggered. */
    display: flex;
    flex-direction: column;
    justify-content: safe center
}

.stage.narrow {
    max-width: 42rem
}

.stage.wide {
    max-width: 78rem
}

/* Screens that page their own content (the leaderboard) claim the full height
   and clip, so the flexible region knows exactly how much room it has. Every
   other screen stays natural-height and lets fit.js do the shrinking. */
.stage.fill {
    height: 100%;
    align-self: stretch;
    min-height: 0
}

.stage-head,
.stage-foot {
    flex: 0 0 auto
}

/* The floor is deliberate and load-bearing. This box clips, so fit.js can't see
   anything that overflows inside it — but it CAN see the box itself being
   squeezed past this point by the head and foot (the flex items then overflow
   .stage, which .kiosk-main measures), and it shrinks the UI in response.

   So --body-min must be at least one row of whatever the screen is paging, or
   that row gets silently clipped instead of triggering the shrink. The default
   clears one .lb-row; the picker raises it to clear a whole .cat-card. */
.stage-body {
    flex: 1 1 auto;
    min-height: var(--body-min, 7rem);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

/* A .cat-card measures ~14.5rem tall (16/10 art + two name lines + tag + padding);
   .3rem of grid padding sits above and below it. */
.stage-body.cat-body {
    --body-min: 15.4rem
}

/* card surface */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 2.6vw, 2.8rem)
}

/* ----------------------------------------------------------- typography  */
.eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--muted)
}

.display {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.08;
    font-size: clamp(2.2rem, 4.4vw, 3.5rem);
    margin: .3rem 0 .4rem;
    letter-spacing: .5px;
    overflow-wrap: break-word;
    max-width: 100%
}

.display .gold {
    color: var(--gold)
}

.lead {
    color: var(--body);
    font-size: 1.06rem;
    line-height: 1.55;
    max-width: 34rem;
    margin: .2rem auto 0;
    opacity: .92
}

.section-label {
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .74rem;
    color: var(--gold);
    margin: 1.4rem 0 .8rem
}

/* diamond divider ◇ */
.diamond {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    /* width is load-bearing: as a direct child of the flex-column .stage, the
       auto side margins suppress the default stretch, and the flanking rules are
       zero-width flex lines — so without this the divider shrink-wraps to a bare
       lozenge with no lines at all. */
    width: 100%;
    margin: .2rem auto 1.1rem;
    max-width: 16rem;
    color: var(--gold-soft)
}

.diamond::before,
.diamond::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold-soft))
}

.diamond::after {
    background: linear-gradient(90deg, var(--gold-soft), transparent)
}

.diamond i {
    width: .55rem;
    height: .55rem;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    display: block
}

/* --------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    border-radius: 99px;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    transition: .16s;
    box-shadow: 0 .7rem 1.6rem -.3rem rgba(236, 137, 23, .45);
    text-decoration: none;
    line-height: 1;
    position: relative;
    overflow: hidden
}

.btn:hover {
    transform: translateY(-.15rem);
    filter: brightness(1.03)
}

.btn:disabled,
.btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .6s ease
}

.btn:hover::after {
    transform: translateX(130%)
}

.btn.lg {
    font-size: 1.2rem;
    padding: 1.15rem 2.8rem
}

.btn.teal {
    background: linear-gradient(135deg, var(--teal), var(--teal-2));
    box-shadow: 0 .7rem 1.6rem -.3rem rgba(23, 139, 115, .45)
}

.btn.gold {
    background: linear-gradient(135deg, #efc25a, var(--cert-gold));
    color: var(--gold-2);
    box-shadow: 0 .7rem 1.6rem -.3rem rgba(231, 181, 63, .5)
}

.btn.outline {
    background: #fff;
    color: var(--gold);
    border: 1.5px solid var(--gold-soft);
    box-shadow: none
}

.btn.outline::after {
    display: none
}

.btn:active {
    transform: translateY(0) scale(.97)
}

/* ------------------------------------------------------------- welcome   */
.welcome-logo {
    display: block;
    height: clamp(5rem, 10vw, 8.5rem);
    width: auto;
    margin: 0 auto 1.1rem;
    filter: drop-shadow(0 .8rem 1.6rem rgba(120, 86, 24, .22));
}

.niche {
    position: relative;
    width: clamp(13rem, 22vw, 18rem);
    margin: 1rem auto 1.4rem;
    filter: drop-shadow(0 1.6rem 2.4rem rgba(120, 86, 24, .18))
}

.niche-sun {
    position: absolute;
    top: -1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffd589, var(--orange) 70%)
}

.niche-sun::after {
    content: "";
    position: absolute;
    inset: -.5rem;
    border-radius: 50%;
    border: 2px dashed rgba(203, 164, 92, .7)
}

.niche-frame {
    position: relative;
    border: 2px solid var(--gold-soft);
    background: #fff;
    padding: .55rem;
    border-radius: 46% 46% .8rem .8rem / 60% 60% .8rem .8rem
}

.niche-art {
    aspect-ratio: 3/4;
    border-radius: 44% 44% .5rem .5rem / 58% 58% .5rem .5rem;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #eae1cf 0 .85rem, #f3ecdb .85rem 1.7rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1.4rem
}

.niche-art img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.art-tag {
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: #fff;
    color: var(--muted);
    padding: .32rem .8rem;
    border-radius: 99px;
    border: 1px solid var(--line)
}

/* big dashed halo behind the niche */
.niche::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 118%;
    border: 1px dashed rgba(203, 164, 92, .45);
    border-radius: 50%;
    z-index: -1
}

/* ------------------------------------------------------------- register  */
.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 2.6vw, 2.4rem);
    text-align: left;
    max-width: 34rem;
    margin: 0 auto
}

.field {
    margin-bottom: 1.3rem
}

.field:last-child {
    margin-bottom: 0
}

.field label {
    display: block;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--gold);
    margin-bottom: .4rem
}

.line-input {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid var(--line-2);
    background: transparent;
    font-family: inherit;
    font-size: 1.2rem;
    color: var(--ink);
    padding: .4rem 0;
    transition: .15s
}

.line-input::placeholder {
    color: #c3b59a
}

.line-input:focus {
    outline: none;
    border-bottom-color: var(--orange)
}

.field-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.4rem
}

.field-error {
    color: var(--red);
    font-size: .82rem;
    margin-top: .4rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem
}

.fine-print {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
    margin-top: 1.1rem
}

.fine-print svg {
    width: .85rem;
    height: .85rem;
    flex: 0 0 auto
}

.fine-print i {
    color: var(--gold-soft);
    font-size: .85rem
}

/* reward reassurance chips */
.reg-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 1.2rem auto 0;
    max-width: 32rem
}

.reg-perks .perk {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--gold-2);
    background: #fbf4e6;
    border: 1px solid var(--gold-soft);
    border-radius: 99px;
    padding: .42rem .95rem
}

.reg-perks .perk i {
    color: var(--orange);
    font-size: .9rem
}

.input-line {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fcf7ee;
    border: 1.5px solid var(--line);
    border-radius: .9rem;
    padding: .55rem .95rem;
    transition: .16s
}

.input-line:hover {
    border-color: var(--gold-soft)
}

.input-line:focus-within {
    border-color: var(--orange);
    background: var(--card);
    box-shadow: 0 0 0 .2rem rgba(244, 155, 43, .16)
}

.input-line.is-invalid {
    border-color: var(--red);
    background: var(--red-soft)
}

.input-line.is-invalid .fi {
    color: var(--red)
}

.input-line .fi {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    text-align: center;
    font-size: 1.15rem;
    color: var(--gold-soft);
    transition: .16s
}

.input-line:focus-within .fi {
    color: var(--orange)
}

.input-line .prefix {
    flex: 0 0 auto;
    color: var(--gold);
    font-weight: 700;
    font-size: 1.1rem
}

.input-line .line-input {
    border-bottom: none;
    flex: 1;
    min-width: 0;
    padding: .25rem 0;
    outline: none !important;
}

.btn.block {
    width: 100%
}

/* --------------------------------------------------- choose your topic   */
.diff-pills {
    display: inline-flex;
    gap: .7rem;
    flex-wrap: wrap;
    justify-content: center
}

.diff-pill {
    border: 1.5px solid var(--line-2);
    background: var(--card);
    color: var(--body);
    border-radius: 99px;
    padding: .7rem 1.8rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: .15s;
    font-family: inherit
}

.diff-pill:hover {
    border-color: var(--gold-soft)
}

.diff-pill.active {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 .6rem 1.4rem -.4rem rgba(236, 137, 23, .5)
}

/* Wrapping flex rather than a grid, for two reasons: a fixed basis keeps two
   categories from blowing their 16/10 art up into screen-filling slabs (which
   would force fit.js to shrink the type for everyone), and an orphan card on
   the last row centres under the others instead of stranding itself on the
   left the way a grid track would. */
.cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: safe center;   /* see .stage — centred overflow would hide a row */
    gap: 1.1rem;
    /* .3rem breathing room so card hover rings aren't clipped */
    padding: .3rem;
    /* Takes the leftover height inside .stage-body and clips. pathPicker()
       measures this exact box to decide how many cards make a page, so a
       temple with 25 categories pages instead of shrinking them to crumbs. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden
}

.cat-card {
    position: relative;
    text-align: left;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem;
    cursor: pointer;
    transition: .16s;
    font-family: inherit;
    /* Fixed basis, allowed to shrink: cards stay a consistent size no matter how
       many categories there are, and narrow down before they wrap. */
    flex: 0 1 14rem;
    min-width: 9rem
}

.cat-card:hover {
    border-color: var(--gold-soft);
    transform: translateY(-.25rem);
    box-shadow: var(--shadow-sm)
}

.cat-card.active {
    border-color: var(--orange);
    box-shadow: 0 0 0 .18rem rgba(244, 155, 43, .25), var(--shadow-sm)
}

.cat-card.disabled {
    opacity: .5;
    pointer-events: none
}

.cat-art {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: .6rem;
    overflow: hidden;
    margin-bottom: .7rem;
    background:
        radial-gradient(120% 95% at 50% -12%, rgba(244, 155, 43, .16), transparent 62%),
        linear-gradient(160deg, #FBF4E4, #F3E7CD);
    display: flex;
    align-items: center;
    justify-content: center
}

.cat-art img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* Placeholder art for categories without an uploaded image: faint gold
   ripples rising from the base with an icon medallion in the centre. */
.art-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-radial-gradient(circle at 50% 130%, transparent 0 1.5rem, rgba(203, 164, 92, .13) 1.5rem 1.57rem)
}

.art-ph-ring {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: 1px solid var(--gold-soft);
    background: rgba(255, 253, 247, .8);
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 1.35rem;
    box-shadow: 0 .4rem 1rem -.35rem rgba(203, 164, 92, .6)
}

/* Every card is the same height whether its name runs to one line or two:
   two lines are always reserved and longer names clamp. That keeps the grid
   tidy, and it makes the page-size measurement exact — pathPicker() can trust
   one card's height to stand for all of them. */
.cat-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.15;
    /* Two lines of text (2 × 1.15) PLUS the vertical padding (.12 + .18), because
       box-sizing is border-box — so min-height must cover both or a two-line name
       outgrows it while a one-line name doesn't, and the cards stop being uniform.
       The padding itself is clearance: Cormorant Garamond's descenders overshoot a
       1.15 line box, and overflow:hidden clips at the padding edge. */
    min-height: 2.6em;
    padding: .12em .4rem .18em;
    color: var(--ink)
}

.cat-tag {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    padding: .15rem .4rem .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* "Selected" badge: orange check pinned inside the art's top-right corner,
   ringed in white so it reads against both photos and placeholder art. */
.cat-dot {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 2;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    font-size: .8rem;
    display: none;
    place-items: center;
    box-shadow: 0 0 0 .18rem #fff, 0 .3rem .8rem -.15rem rgba(236, 137, 23, .55)
}

.cat-card.active .cat-dot {
    display: grid
}

.path-cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem
}

/* ------------------------------------------------------------ prize card */
.prize-card {
    margin: 1.4rem auto 0;
    max-width: 34rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(160deg, #FFF9EC, #FDF1D9);
    border: 1.5px solid var(--gold-soft);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.2rem;
    box-shadow: 0 .6rem 1.6rem -.8rem rgba(203, 164, 92, .5)
}

.prize-card .prize-ico {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.15rem
}

.prize-card h4 {
    margin: .1rem 0 .25rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink)
}

.prize-card p {
    margin: 0 0 .5rem;
    color: var(--body);
    font-size: .95rem
}

.prize-card .code {
    display: inline-block;
    font-weight: 800;
    letter-spacing: .12em;
    background: #fff;
    border: 1.5px dashed var(--gold-soft);
    border-radius: .5rem;
    padding: .35rem .8rem;
    color: var(--ink)
}

.prize-card .ref {
    display: inline-block;
    margin-left: .6rem;
    color: var(--muted);
    font-size: .85rem
}

.prize-card .hint {
    margin: .55rem 0 0;
    font-size: .82rem;
    color: var(--muted)
}

/* WhatsApp QR modal: shown when direct API sending isn't configured. */
.qr-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem 1.5rem 1.2rem;
    max-width: 24rem;
    width: 100%;
    text-align: center
}

.qr-card h4 {
    margin: 0 0 .4rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink)
}

.qr-card p {
    margin: 0 0 1rem;
    color: var(--body);
    font-size: .92rem
}

.qr-card .qr-box {
    display: flex;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .7rem;
    padding: .9rem;
    margin: 0 auto 1.1rem;
    width: fit-content
}

/* ------------------------------------------------------------------ quiz */
.quiz-top {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem
}

.quiz-count {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--ink);
    white-space: nowrap
}

.quiz-count b {
    color: var(--muted);
    font-weight: 600
}

.quiz-bar {
    flex: 1;
    height: .65rem;
    background: #eadfca;
    border-radius: 99px;
    overflow: hidden
}

.quiz-bar>span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    transition: width .4s ease
}

.quiz-pill {
    flex: 0 0 auto;
    border: 1.5px solid var(--gold-soft);
    background: var(--card);
    color: var(--gold);
    border-radius: 99px;
    padding: .45rem 1rem;
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap
}

/* per-question countdown ring */
.quiz-timer {
    flex: 0 0 auto;
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--ring, var(--orange)) calc(var(--pct, 100)*1%), #eadfca 0);
    transition: background .3s linear
}

.quiz-timer::before {
    content: "";
    position: absolute;
    inset: .3rem;
    border-radius: 50%;
    background: var(--card)
}

.quiz-timer>span {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ink);
    line-height: 1
}

.quiz-timer.is-low {
    --ring: var(--red);
    animation: pulse 1s ease-in-out infinite
}

.quiz-timer.is-low>span {
    color: var(--red)
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.08)
    }
}

.quiz-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.4rem, 2.4vw, 2.2rem);
    text-align: left
}

.q-text {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.22;
    color: var(--ink);
    margin: .3rem 0 1.3rem
}

.q-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    align-items: start
}

.q-stage.no-media {
    grid-template-columns: 1fr;
    max-width: 56rem
}

/* Capped in rem so the illustration shrinks with the rest of the UI instead of
   being the one element that pushes the options off the bottom. */
.q-illus {
    aspect-ratio: 1/1;
    max-height: 22rem;
    margin-inline: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: repeating-linear-gradient(45deg, #e8e0cd 0 1rem, #f2ebd9 1rem 2rem);
    display: flex;
    align-items: center;
    justify-content: center
}

.q-illus img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.q-illus-tag {
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: #fff;
    color: var(--muted);
    padding: .35rem .8rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    text-align: center
}

.opt-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem
}

.opt {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    font-family: inherit;
    border: 1.5px solid var(--line-2);
    background: var(--card);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
    transition: .14s;
    position: relative
}

.opt:hover {
    border-color: var(--gold-soft)
}

.opt .badge {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    width: 2.1rem;
    border-radius: .55rem;
    background: #f6efdf;
    color: var(--gold);
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: 1rem;
    transition: .14s
}

/* badge + text + result mark row (below the image on picture options) */
.opt .opt-foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0
}

.opt .opt-txt {
    flex: 1;
    font-weight: 600;
    text-align: left
}

.opt .mark {
    margin-left: auto;
    font-weight: 900;
    font-size: 1.2rem
}

/* Picture answer options ("which image is it?") render as image cards. */
.opt.has-img {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    padding: .6rem .6rem .7rem
}

.opt .opt-img {
    display: block;
    border-radius: .55rem;
    overflow: hidden;
    background: #f3ecdb
}

.opt .opt-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover
}

/* selected (pre-reveal) */
.opt.selected {
    border-color: var(--orange);
    background: #fff7ec;
    box-shadow: 0 0 0 .16rem rgba(244, 155, 43, .22)
}

.opt.selected .badge {
    background: var(--orange);
    color: #fff
}

/* revealed states */
.opt.correct {
    border-color: var(--teal);
    background: #e9f7f3
}

.opt.correct .badge {
    background: var(--teal);
    color: #fff
}

.opt.correct .mark {
    color: var(--teal)
}

.opt.wrong {
    border-color: var(--red);
    background: var(--red-soft)
}

.opt.wrong .badge {
    background: var(--red);
    color: #fff
}

.opt.wrong .mark {
    color: var(--red)
}

.opt.dim {
    opacity: .45
}

.opt.locked {
    pointer-events: none
}

.quiz-foot {
    display: flex;
    gap: 1rem;
    margin-top: 1.6rem
}

/* ---------------------------------------------------------------- result */
.result-ring {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: .5rem dashed var(--gold-soft);
    background: radial-gradient(circle, #f4ecdc 60%, #efe5d0);
    position: relative
}

.result-ring.pass {
    border-color: var(--teal);
    background: radial-gradient(circle, #e9f7f3 60%, #d8efe8)
}

.result-ring .big {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1
}

.result-ring .sub {
    font-size: .85rem;
    color: var(--muted);
    font-weight: 600
}

.result-mid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 .4rem
}

.result-msg {
    text-align: left;
    max-width: 22rem
}

.result-msg h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--ink);
    margin: 0 0 .4rem
}

.result-msg p {
    margin: 0 0 1rem;
    color: var(--body);
    font-size: .98rem;
    line-height: 1.5
}

.result-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.4rem
}

/* certificate modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    /* safe center + hidden: an oversized dialog overflows downward only, which
       is what fit.js measures — it then shrinks the UI until the dialog fits. */
    align-items: safe center;
    justify-content: center;
    overflow: hidden;
    padding: 1.4rem;
    background: rgba(60, 46, 20, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.cert {
    width: 100%;
    max-width: 40rem;
    background: var(--card);
    border-radius: 1.1rem;
    box-shadow: var(--shadow);
    padding: 1rem;
    animation: pop .35s cubic-bezier(.22, 1.2, .4, 1) both
}

.cert-inner {
    border: 2px solid var(--cert-gold);
    border-radius: .7rem;
    padding: 2rem 1.6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fffdf7, #fdf7ea)
}

.cert-inner::before {
    content: "";
    position: absolute;
    inset: .45rem;
    border: 1px solid var(--gold-soft);
    border-radius: .5rem;
    pointer-events: none
}

/* faint temple-logo watermark behind the certificate text */
.cert-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    max-width: 18rem;
    transform: translate(-50%, -50%);
    opacity: .06;
    pointer-events: none;
    z-index: 0
}

.cert-content {
    position: relative;
    z-index: 1
}

/* temple-logo medallion at the top */
.cert-medallion {
    width: 4.8rem;
    height: 4.8rem;
    margin: 0 auto .9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--card);
    border: 2px solid var(--cert-gold);
    box-shadow: 0 0 0 .28rem #fff, 0 .35rem .9rem rgba(120, 86, 24, .18)
}

.cert-medallion img {
    width: 76%;
    height: 76%;
    object-fit: contain
}

/* diamond divider under the name */
.cert-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 11rem;
    margin: 0 auto .8rem;
    color: var(--gold-soft)
}

.cert-rule span {
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold-soft))
}

.cert-rule span:last-child {
    background: linear-gradient(90deg, var(--gold-soft), transparent)
}

.cert-rule i {
    width: .42rem;
    height: .42rem;
    border: 1px solid var(--gold-soft);
    transform: rotate(45deg);
    flex: 0 0 auto
}

.cert h4 {
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .8rem;
    color: var(--gold);
    margin: .2rem 0 1rem
}

.cert .to {
    color: var(--body);
    font-size: .95rem
}

.cert .name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--gold);
    margin: .2rem 0 .6rem
}

.cert .body {
    color: var(--body);
    font-size: .95rem;
    line-height: 1.5;
    max-width: 24rem;
    margin: 0 auto
}

.cert-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 1.8rem
}

.cert-foot .col {
    flex: 1;
    text-align: left
}

.cert-foot .col.right {
    text-align: right
}

.cert-foot .sig {
    border-top: 1px solid var(--ink);
    padding-top: .3rem;
    font-weight: 600;
    color: var(--ink);
    font-size: .92rem
}

.cert-foot .cap {
    font-size: .66rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em
}

.cert-seal {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1.5px dashed var(--gold-soft);
    display: grid;
    place-items: center;
    padding: .34rem;
    flex: 0 0 auto
}

.cert-seal img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

/* toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    z-index: 70;
    background: #2c241a;
    color: #fff;
    border-radius: 99px;
    padding: .8rem 1.5rem;
    font-weight: 600;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-shadow: var(--shadow);
    animation: rise .4s ease both
}

.toast .dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--teal)
}

/* --------------------------------------------------------- leaderboard   */
/* The hall can hold 100 entries, which no screen fits at a legible size — so
   it pages instead of scrolling. hallPager() in leaderboard.blade.php measures
   one row against this box and shows exactly as many as fit. */
/* Column-major grid: hallPager() sets --lb-rows and shows exactly rows × columns
   entries, so rank runs 1..N down the first column before continuing in the
   next — the way a ranked list is read. One column collapses to a plain list. */
.lb-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--lb-rows, 1), min-content);
    grid-auto-columns: minmax(0, 1fr);
    align-content: start;
    gap: .7rem 1rem;
    padding: .15rem
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    text-align: left;
    flex: 0 0 auto
}

/* ------------------------------------------------------------------ pager */
/* Shared by every screen whose content can outgrow the wall — the hall and the
   category picker. Paging is what those screens do INSTEAD of letting fit.js
   shrink to the floor: cards and rows keep a size you can read and hit from
   standing distance, and the primary action never leaves the screen. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .9rem
}

.pager .pg {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1.5px solid var(--gold-soft);
    background: var(--card);
    color: var(--gold);
    font-size: 1rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .15s
}

.pager .pg:hover:not(:disabled) {
    background: #fff;
    box-shadow: var(--shadow-sm)
}

.pager .pg:disabled {
    opacity: .35;
    cursor: not-allowed
}

.pager .pg-label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--gold-2);
    letter-spacing: .08em;
    min-width: 7rem
}

/* Names the current choice when paging has put it on another page. */
.pager-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: .7rem 0 0;
    font-size: .85rem;
    color: var(--body)
}

.pager-note i {
    color: var(--orange)
}

.pager-note b {
    color: var(--gold-2)
}

/* the viewer's own entries */
.lb-row.is-me {
    border-color: var(--orange);
    background: #fff7ec;
    box-shadow: 0 0 0 .16rem rgba(244, 155, 43, .22)
}

.lb-you {
    display: inline-block;
    margin-left: .5rem;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    border-radius: 99px;
    padding: .12rem .55rem;
    vertical-align: middle
}

.lb-rank {
    flex: 0 0 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: #f6efdf;
    color: var(--gold)
}

.lb-row:nth-child(1) .lb-rank {
    background: linear-gradient(135deg, #efc25a, var(--cert-gold));
    color: #fff
}

/* hallPager() measures one row while the list is still a single full-width
   column, then splits it into up to three. A row's height must therefore not
   depend on its width — otherwise names wrap once narrowed, every grid track
   grows, and the page over-commits rows that then get clipped AND skipped by
   the page boundary, leaving those ranks on no page at all. So: one line each,
   ellipsis past that. Same contract .cat-name has with pathPicker(). */
.lb-name {
    flex: 1;
    min-width: 0;   /* let the flex item shrink so the clip actually engages */
    font-weight: 700;
    color: var(--ink)
}

.lb-who,
.lb-city {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.lb-city {
    font-weight: 500;
    color: var(--muted);
    font-size: .82rem
}

.lb-score {
    flex: 0 0 auto;
    white-space: nowrap;   /* must not wrap once the row narrows into a column */
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--gold)
}

.alert {
    background: var(--red-soft);
    color: var(--red);
    padding: .9rem 1.2rem;
    border-radius: var(--radius-sm);
    margin: 0 auto 1.2rem;
    max-width: 34rem;
    font-weight: 600
}

/* --------------------------------------------------------------- motion  */
@keyframes rise {
    from {
        opacity: 0;
        transform: translate(-50%, 1rem)
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0)
    }
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(1.2rem)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.panel,
.form-card,
.quiz-card,
.niche,
.result-ring {
    animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) both
}

.cat-card,
.opt,
.diff-pill {
    animation: riseIn .4s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--i, 0)*.05s + .06s)
}

/* Paging re-displays a card, and re-displaying restarts its CSS animation — so
   card 20 would sit invisible at translateY for its full 1s stagger before
   fading in, and the offset transform would inflate what fit.js measures.
   pathPicker sets this the first time the visitor pages: the entry animation is
   a first-impression flourish, and after that a page turn should be instant. */
.cat-grid.no-anim .cat-card {
    animation: none
}

.cat-card:active {
    transform: scale(.98)
}

/* spinner */
.spinner {
    width: 1.05rem;
    height: 1.05rem;
    border: .16rem solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
    vertical-align: -.12rem
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* focus a11y */
.btn:focus-visible,
.cat-card:focus-visible,
.opt:focus-visible,
.diff-pill:focus-visible,
.home-btn:focus-visible,
.lang-pill:focus-visible,
.lang-card:focus-visible,
.line-input:focus-visible {
    outline: .18rem solid var(--gold);
    outline-offset: .2rem
}

/* ============================================================================
   Responsive — phones (portrait + landscape) → tablets → laptops → 4K 55" wall
   ========================================================================== */

/* Ultra-large screens / kiosk walls: let content use more of the canvas
   instead of floating in a narrow column. */
@media (min-width:2200px) {
    .stage {
        max-width: 74rem
    }

    .stage.wide {
        max-width: 94rem
    }

    .stage.narrow {
        max-width: 46rem
    }
}

/* Tablets & small laptops: stack the quiz image above the options. */
@media (max-width:900px) {
    .q-stage {
        grid-template-columns: 1fr;
        max-width: 42rem;
        margin-inline: auto
    }

    .q-illus {
        aspect-ratio: 16/9;
        max-height: 18rem
    }

    .q-illus.is-placeholder {
        display: none
    }

    /* decorative-only panel hides on small screens */
    .result-mid {
        gap: 1.4rem
    }

    .result-msg {
        text-align: center
    }
}

/* Phones (portrait). */
@media (max-width:600px) {
    .opt-list {
        grid-template-columns: 1fr
    }

    .kiosk-main {
        padding: 1rem .85rem
    }

    .panel,
    .quiz-card,
    .form-card {
        padding: 1.3rem 1.05rem
    }

    .modal {
        padding: .8rem
    }

    .kiosk-topbar {
        padding: .6rem .8rem
    }

    .kiosk-brand {
        min-width: 0
    }

    .brand-text b {
        font-size: 1.2rem;
        white-space: nowrap
    }

    .brand-text small {
        display: none
    }

    .home-btn {
        padding: .45rem .9rem;
        font-size: .8rem
    }

    .lang-pill {
        padding: .4rem .7rem;
        font-size: .72rem
    }

    .display {
        font-size: clamp(1.75rem, 7.5vw, 2.4rem)
    }

    .lead {
        font-size: 1rem
    }

    .niche {
        width: 11rem
    }

    .field-row {
        grid-template-columns: 1fr;
        gap: 0
    }

    .field-row .field {
        margin-bottom: 1.2rem
    }

    .diff-pill {
        padding: .62rem 1.3rem;
        font-size: .92rem
    }

    .cat-grid {
        gap: .8rem
    }

    .cat-card {
        flex: 0 1 10rem;
        min-width: 7.5rem
    }

    .q-text {
        font-size: clamp(1.4rem, 6vw, 1.8rem)
    }

    .opt {
        font-size: 1rem;
        padding: .85rem .9rem
    }

    .opt .badge {
        flex-basis: 1.9rem;
        height: 1.9rem;
        width: 1.9rem
    }

    .quiz-top {
        flex-wrap: wrap;
        gap: .6rem
    }

    .quiz-count {
        font-size: 1.15rem
    }

    .quiz-bar {
        order: 3;
        flex-basis: 100%
    }

    .quiz-pill {
        order: 2
    }

    .quiz-foot {
        flex-direction: column
    }

    .quiz-foot .btn {
        width: 100%
    }

    .result-actions {
        gap: .7rem
    }

    .result-actions .btn {
        flex: 1 1 100%
    }

    .cert-inner {
        padding: 1.4rem 1rem
    }

    .cert .name {
        font-size: 1.9rem
    }

    .cert-foot {
        flex-wrap: wrap;
        gap: .9rem;
        justify-content: center;
        text-align: center
    }

    .cert-foot .col,
    .cert-foot .col.right {
        text-align: center;
        flex-basis: 100%
    }

    .toast {
        left: .8rem;
        right: .8rem;
        transform: none;
        text-align: center;
        justify-content: center
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(1rem)
        }

        to {
            opacity: 1;
            transform: none
        }
    }
}

/* Very small phones. */
@media (max-width:380px) {
    .display {
        font-size: 1.7rem
    }

    .niche {
        width: 9.5rem
    }

    .cat-card {
        flex: 0 1 calc(50% - .4rem);
        min-width: 0
    }

    .btn {
        padding: .9rem 1.4rem;
        font-size: 1rem
    }
}

/* Short / landscape phones: compress the vertical rhythm so heroes fit. */
@media (max-height:560px) and (orientation:landscape) {
    .kiosk-main {
        padding: .8rem
    }

    .niche {
        width: 8rem;
        margin: .2rem auto .7rem
    }

    .display {
        font-size: clamp(1.5rem, 6vh, 2.1rem)
    }

    .lead {
        font-size: .95rem
    }

    .result-ring {
        width: 8.5rem;
        height: 8.5rem
    }

    .result-ring .big {
        font-size: 2.4rem
    }

    .result-mid {
        margin: 1rem 0 .2rem
    }
}

/* Landscape screens that are short for their width — laptops, 16:10 panels, and
   the wall whenever the on-screen keyboard has taken a bite out of it. Trimming
   the vertical rhythm here is free; it means fit.js has less to shrink, so the
   type stays as large as a 55" viewing distance needs. */
@media (orientation:landscape) and (max-height:820px) {
    .kiosk-main {
        padding: .9rem 1.8rem
    }

    .welcome-logo {
        height: clamp(3.4rem, 8vh, 6rem);
        margin-bottom: .6rem
    }

    .diamond {
        margin: .1rem auto .6rem
    }

    .display {
        margin: .2rem 0 .3rem
    }

    .reg-perks {
        margin-top: .8rem
    }

    .quiz-top {
        margin-bottom: .8rem
    }

    .q-text {
        margin: .2rem 0 .9rem
    }

    .q-illus {
        max-height: 15rem
    }

    .quiz-foot {
        margin-top: 1rem
    }

    .path-cta {
        margin-top: 1.2rem
    }

    .result-mid {
        margin: .9rem 0 .2rem
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .01ms !important
    }

    .btn::after {
        display: none
    }
}

[x-cloak] {
    display: none !important
}

/* While fit.js is measuring, layout changes must land instantly. Changing the
   root rem resizes padding, borders and type on every box that carries a
   `transition`, and those would animate for ~160ms — so each measurement would
   read a half-finished layout, and the pass would never settle. Suppressing
   transitions for the duration also means nothing animates when the pass ends:
   the final values are already applied, so there is no change left to tween. */
html.is-fitting *,
html.is-fitting *::before,
html.is-fitting *::after {
    transition: none !important
}