/* Live Trivia · School Locker phone skin ("Hall Pass", owner decision
   2026-10-07): the SC-LT-Phone board. Every rule is scoped to
   #trivia-content.pop-quiz.ltd-schoolLocker and layered on the shared Pop
   Quiz structure, so it only restyles it; the classic screens never match.

   The phone is a teal locker door (its number plate and vents), the
   question a whiteboard, every answer a ruled index card swiped with the
   display's highlighter (SchoolLockerPalette: yellow, pink, green, blue,
   orange; the one navy ink), letters on steel locker plates, the clock a
   combination dial with a draining yellow strip, and red-pen marks and a
   gold star for the results. Graduate for plates and labels, Permanent
   Marker for the hand-written lines, Barlow 600–800 for the text.

   Motion: cards deal on and settle, the highlighter swipes across them, the
   dial clicks each second, the A+ slams and its ring is drawn in red pen,
   the gold star spins on, a wrong answer is crossed out stroke by stroke.
   Transforms, clips and stroke offsets only. The question screen keeps the
   timer, the question, every answer and the score bar on one screen (the
   score bar in flow under the answers, the shared rule). */

@font-face { font-family: 'Graduate'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/graduate-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-permanent-marker-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-semi-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-barlow-extra-bold-v1.woff2') format('woff2'); }

#trivia-content.pop-quiz.ltd-schoolLocker {
    --sl-ink: #14202B; --sl-paper: #FFFDF5; --sl-red: #E0313B; --sl-gold: #FFC531; --sl-yellow: #FFE94A;
    --sl-white: #F6F8F9; --sl-grey: #B9C2C7; --sl-shadow: rgba(4, 16, 19, 0.55);
    --sl-steel: linear-gradient(180deg, #F4F6F8 0%, #C2C9CF 56%, #E3E7EA 100%);
    --sl-rules: linear-gradient(180deg, transparent 0 12px, rgba(229, 72, 77, 0.55) 12px 14px, transparent 14px),
        repeating-linear-gradient(180deg, transparent 0 24px, rgba(74, 134, 200, 0.26) 24px 25.5px);
    --pq-ink: #14202B; --pq-cream: #FFFDF5; --pq-yellow: #FFE94A; --pq-green: #6FEA84; --pq-red: #E0313B;
    position: relative; isolation: isolate;
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    color: var(--sl-white);
    padding-top: 58px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.25)),
        linear-gradient(180deg, #1F636B 0%, #18535A 55%, #134449 100%);
}
/* The door's number plate. */
#trivia-content.pop-quiz.ltd-schoolLocker::before {
    content: '214'; position: absolute; right: 22px; top: 18px; width: 46px; height: 20px; pointer-events: none;
    border-radius: 3px; background: #AEB7BE; border: 2px solid #0B2B30; box-sizing: border-box;
    font-family: 'Graduate', serif; font-size: 12px; line-height: 17px; text-align: center; color: #22303A;
}
/* The door's vents, under everything at the foot of the panel. */
#trivia-content.pop-quiz.ltd-schoolLocker::after {
    content: ''; position: absolute; left: 50%; bottom: 12px; width: 142px; height: 32px; margin-left: -71px;
    pointer-events: none;
    background: linear-gradient(180deg, #0A2427 0 6px, transparent 6px 13px, #0A2427 13px 19px, transparent 19px 26px,
        #0A2427 26px 32px);
    border-radius: 3px; z-index: -1;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-title,
#trivia-content.pop-quiz.ltd-schoolLocker .pq-display { font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-sticker {
    background: var(--sl-paper); color: var(--sl-ink); border: none; border-radius: 6px;
    box-shadow: 0 7px 0 var(--sl-shadow);
}

/* ── Join: the title in white marker, the name on an index card, a yellow
   highlighter Join button ── */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-title {
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400;
    font-size: 2.3rem; line-height: 1.08; color: var(--sl-white);
    background: none; border: none; box-shadow: none; text-shadow: 0 4px 0 rgba(4, 16, 19, 0.45);
    padding: 10px 8px 6px; margin: 10px 4px 26px; transform: rotate(-3deg);
    animation: ltdslDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-name-input {
    height: 64px; margin-bottom: 22px; padding-top: 10px;
    background: var(--sl-rules), var(--sl-paper); color: var(--sl-ink);
    border: none; border-radius: 6px; box-shadow: 0 6px 0 var(--sl-shadow);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 1.45rem;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-name-input::placeholder { color: rgba(20, 32, 43, 0.42); }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-join-btn {
    height: 68px; background: var(--sl-yellow); color: var(--sl-ink);
    border: 3px solid var(--sl-ink); border-radius: 12px; box-shadow: 0 6px 0 #061316;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-join-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #061316; }
#trivia-content.pop-quiz.ltd-schoolLocker #trivia-random-name p { color: var(--sl-white) !important; font-weight: 700; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-random-name-display {
    display: inline-block; padding: 14px 28px 10px; color: var(--sl-ink);
    background: var(--sl-rules), var(--sl-paper); border: none; border-radius: 6px;
    box-shadow: 0 6px 0 var(--sl-shadow); transform: rotate(-2deg);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-reroll-btn {
    color: var(--sl-white); background: transparent; border: 3px solid var(--sl-white); border-radius: 999px;
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800;
}

/* You're in: a gold star sticker spins on, "You're in!" in white marker,
   the name on a highlighted index card. */
#trivia-content.pop-quiz.ltd-schoolLocker #trivia-lobby:has(#trivia-joined-msg[style*="block"]) .trivia-title { display: none; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-joined .pq-burst {
    position: relative; width: 260px; height: auto; padding-top: 168px; clip-path: none;
    background: none; color: var(--sl-white); font-size: 2.6rem; line-height: 1;
    text-shadow: 0 4px 0 rgba(4, 16, 19, 0.45);
    animation: none;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-joined .pq-burst::before {
    content: ''; position: absolute; left: 50%; top: 0; width: 150px; height: 150px; margin-left: -75px;
    background: radial-gradient(circle at 42% 38%, #FFE27A 0 18%, var(--sl-gold) 40%, #E9A100 100%);
    clip-path: polygon(50% 6%, 61.9% 37.7%, 95.6% 39.2%, 69.2% 60.3%, 78.2% 92.8%, 50% 74.2%, 21.8% 92.8%, 30.8% 60.3%, 4.4% 39.2%, 38.1% 37.7%);
    filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.35));
    animation: ltdslSticker 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-joined .pq-burst span {
    display: inline-block; transform: rotate(-3deg);
    animation: ltdslStamp 0.4s 0.4s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-name-chip {
    position: relative; display: inline-block; margin: 22px 0 18px; padding: 16px 30px 10px;
    color: var(--sl-ink); font-size: 1.7rem; line-height: 1; font-weight: 800;
    background: linear-gradient(90deg, var(--sl-yellow), var(--sl-yellow)) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat,
        var(--sl-rules), var(--sl-paper);
    border: none; border-radius: 6px; box-shadow: 0 6px 0 var(--sl-shadow); transform: rotate(-2deg);
    animation: ltdslDeal 0.55s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-waiting-joined p,
#trivia-content.pop-quiz.ltd-schoolLocker .pq-wait-line {
    color: var(--sl-white); font-size: 1.2rem; font-weight: 700; text-shadow: 0 2px 0 rgba(4, 16, 19, 0.45);
}

/* ── Question: the dial and its draining strip, the whiteboard, the index
   cards ── */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-bar {
    height: 16px; overflow: hidden;
    background: #0D1012; border: 3px solid #061316; border-radius: 999px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
    animation: ltdslDropSmall 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-fill { background-color: var(--sl-yellow) !important; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-fill[data-level="warn"] { background-color: #FFA54C !important; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-fill[data-level="urgent"] { background-color: var(--sl-red) !important; }
/* The combination-lock dial: a steel bezel, the ring of ticks, the seconds
   in Graduate on the dark face, the red pointer at the top. */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text {
    position: relative; width: 68px; height: 68px; border: none;
    background:
        radial-gradient(circle, #22282D 0 33%, #0A0C0E 33% 36%, transparent 36%),
        repeating-conic-gradient(from -1.5deg, #E9EDF0 0 3deg, transparent 3deg 9deg) content-box,
        radial-gradient(circle, #16191D 0 70%, #0D1012 70% 80%, transparent 80%),
        linear-gradient(160deg, #F7F9FA, #99A2AA 50%, #DDE2E6);
    padding: 7px; box-sizing: border-box;
    -webkit-mask: none;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1.5px #2F3940;
    color: var(--sl-white) !important;
    font-family: 'Graduate', serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 1px;
    font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000;
    animation: ltdslDial 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text::before {
    content: ''; position: absolute; left: 50%; top: -7px; width: 14px; height: 12px; margin-left: -7px;
    background: var(--sl-red); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text[data-level="warn"],
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text[data-level="urgent"] {
    background:
        radial-gradient(circle, #22282D 0 33%, #0A0C0E 33% 36%, transparent 36%),
        repeating-conic-gradient(from -1.5deg, #E9EDF0 0 3deg, transparent 3deg 9deg) content-box,
        radial-gradient(circle, #16191D 0 70%, #0D1012 70% 80%, transparent 80%),
        linear-gradient(160deg, #F7F9FA, #99A2AA 50%, #DDE2E6);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text[data-level="urgent"] { color: #FF8473 !important; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text.pq-tick { animation: ltdslClick 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* The whiteboard. */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-question-text {
    margin: 16px 0 16px; padding: 18px 16px 18px;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.85) 40%, rgba(255, 255, 255, 0) 52%) padding-box,
        #F3F6F8 padding-box,
        linear-gradient(180deg, #F4F6F8 0%, #B5BDC4 48%, #E2E6E9 100%) border-box;
    border: 8px solid transparent; border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), 0 0 0 1px #75808A, 0 12px 20px rgba(0, 0, 0, 0.45);
    color: var(--sl-ink); font-weight: 800; font-size: 1.22rem; line-height: 1.16; text-align: center;
    animation: ltdslDrop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid { gap: 14px; margin: 0; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] { gap: 11px; }
/* An index card: the answer's colour is the highlighter; a paper cover over
   it slides away to the right (the swipe), the rules and the red margin line
   sit on top of both, the text over everything. */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn {
    --sl-tilt: -0.8deg;
    position: relative; isolation: isolate; overflow: hidden;
    gap: 12px; min-height: 66px; padding: 4px 14px 4px 10px;
    color: var(--sl-ink); text-shadow: none;
    border: none; border-radius: 6px;
    box-shadow: inset 0 0 0 6px var(--sl-paper), 0 7px 0 var(--sl-shadow);
    font-family: 'Sidekick Trivia Barlow', system-ui, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.06;
    transform: rotate(var(--sl-tilt));
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    animation: ltdslDeal 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn::before {
    content: ''; position: absolute; inset: 6px; z-index: -1; background: var(--sl-paper);
    transform-origin: 100% 50%; transform: scaleX(0);
    animation: ltdslSwipe 0.45s cubic-bezier(0.65, 0, 0.35, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sl-rules);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(1) { animation-delay: 0.45s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(2) { animation-delay: 0.55s; --sl-tilt: 0.6deg; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(3) { animation-delay: 0.65s; --sl-tilt: -0.5deg; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(4) { animation-delay: 0.75s; --sl-tilt: 0.7deg; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(5) { animation-delay: 0.85s; --sl-tilt: -0.4deg; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(1)::before { animation-delay: 0.95s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(2)::before { animation-delay: 1.05s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(3)::before { animation-delay: 1.15s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(4)::before { animation-delay: 1.25s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:nth-child(5)::before { animation-delay: 1.35s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn:active {
    transform: rotate(var(--sl-tilt)) translateY(5px); box-shadow: inset 0 0 0 6px var(--sl-paper), 0 2px 0 var(--sl-shadow);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn.selected {
    transform: rotate(var(--sl-tilt)) translateY(4px) scale(0.97); box-shadow: inset 0 0 0 6px var(--sl-paper), 0 3px 0 var(--sl-shadow);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: 58px; font-size: 1.15rem; }
/* The letter on a steel locker plate. */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-letter {
    width: 44px; height: 40px; border-radius: 7px; box-sizing: border-box;
    background: var(--sl-steel); border: 2.5px solid #2E3840; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    color: var(--sl-ink); text-shadow: none;
    font-family: 'Graduate', serif; font-weight: 400; font-size: 1.35rem; padding-top: 2px;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] .trivia-option-letter { width: 40px; height: 36px; font-size: 1.2rem; }
/* Short screens: the cards give back height so the whole question still fits
   with the score bar under it (the rest of the screen is about 386 px with
   four answers, 393 px with five). */
@supports (height: 100dvh) {
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn { min-height: clamp(48px, calc((100dvh - 386px) / 4), 66px); }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] .trivia-option-btn { min-height: clamp(44px, calc((100dvh - 393px) / 5), 58px); }
}
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-schoolLocker { padding-top: 40px; }
    #trivia-content.pop-quiz.ltd-schoolLocker::before { top: 12px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-timer-text { width: 54px; height: 54px; padding: 5px; font-size: 0.95rem; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-question-text { font-size: 1.05rem; padding: 10px 12px; margin: 10px 0 10px; border-width: 6px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-score-bar { margin-top: 12px; padding-top: 7px; padding-bottom: 7px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid { gap: 11px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] { gap: 8px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn { font-size: 1.12rem; line-height: 1.02; padding-top: 3px; padding-bottom: 3px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] .trivia-option-btn { font-size: 1.05rem; }
}
@media (max-height: 600px) {
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-question-text { font-size: 0.95rem; line-height: 1.12; padding: 9px 10px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid { gap: 9px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-options-grid[data-count="5"] { gap: 7px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-btn { font-size: 1.02rem; min-height: 44px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-option-letter { width: 36px; height: 32px; font-size: 1.05rem; }
}

/* ── Locked in: "Locked in!" in white marker, the pick on its card ── */
#trivia-content.pop-quiz.ltd-schoolLocker .pq-locked.show { padding-top: 40px; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-lock-card {
    margin: 0 8px; padding: 0; gap: 8px; background: none; box-shadow: none; transform: rotate(-3deg);
    animation: ltdslStamp 0.42s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-lock-card svg { display: none; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-lock-card .pq-display {
    color: var(--sl-white); font-size: 2.6rem; line-height: 1.05; text-shadow: 0 4px 0 rgba(4, 16, 19, 0.45);
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-pick {
    position: relative; isolation: isolate;
    margin: 34px 0 26px; padding: 10px 22px 10px 10px; gap: 12px;
    color: var(--sl-ink); text-shadow: none; font-weight: 800; font-size: 1.3rem; line-height: 1.08;
    border: none; border-radius: 6px; box-shadow: inset 0 0 0 6px var(--sl-paper), 0 8px 0 var(--sl-shadow);
    transform: rotate(-2deg);
    animation: ltdslDeal 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-pick::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--sl-rules);
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-pick .trivia-option-letter { width: 44px; height: 40px; font-size: 1.3rem; }

/* ── Result: an A+ slammed in a red-pen ring with a gold star (correct),
   a red X drawn stroke by stroke (wrong) ── */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-result { padding: 22px 0 0; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-icon { position: relative; width: 220px; height: 210px; margin: 0 auto 10px; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-result { position: relative; width: 220px; height: 210px; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-stamp {
    position: absolute; left: 22px; top: 18px; width: 176px; height: 176px;
    animation: ltdslSlam 0.32s 0.15s cubic-bezier(0.2, 1, 0.4, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-pen {
    fill: none; stroke: var(--sl-red); stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100 200; stroke-dashoffset: 100;
    animation: ltdslDraw 0.5s 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-aplus {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 6px;
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-size: 82px; line-height: 1; color: var(--sl-red);
    transform: rotate(-12deg);
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-star {
    position: absolute; right: 0; top: 0; width: 84px; height: 84px;
    background: radial-gradient(circle at 42% 38%, #FFE27A 0 18%, var(--sl-gold) 40%, #E9A100 100%);
    clip-path: polygon(50% 6%, 61.9% 37.7%, 95.6% 39.2%, 69.2% 60.3%, 78.2% 92.8%, 50% 74.2%, 21.8% 92.8%, 30.8% 60.3%, 4.4% 39.2%, 38.1% 37.7%);
    animation: ltdslSticker 0.5s 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-x { position: absolute; left: 40px; top: 30px; width: 140px; height: 140px; overflow: visible; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-x .ltdsl-pen { stroke-width: 14; animation-delay: 0.3s; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-x .ltdsl-pen + .ltdsl-pen { animation-delay: 0.62s; }
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-text {
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 3.4rem; line-height: 1;
    color: var(--sl-white) !important; text-shadow: 0 5px 0 rgba(4, 16, 19, 0.5); margin-bottom: 20px;
    transform: rotate(-3deg);
    /* Hidden until the stamp starts: filled backwards, its first frame sat
       on screen through the delay. */
    animation: ltdslStamp 0.4s 0.75s cubic-bezier(0.2, 1.4, 0.5, 1) both, ltdslAppear 0.01s 0.75s steps(1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-points {
    display: inline-block; padding: 12px 24px 10px; color: var(--sl-ink);
    background: var(--sl-rules), var(--sl-paper); border: none; border-radius: 6px; box-shadow: 0 6px 0 var(--sl-shadow);
    font-family: 'Graduate', serif; font-weight: 400; font-size: 1.7rem; transform: rotate(2deg);
    animation: ltdslDeal 0.5s 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-points.pq-earned {
    background: linear-gradient(90deg, var(--sl-yellow), var(--sl-yellow)) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat,
        var(--sl-rules), var(--sl-paper);
    transform: rotate(-2deg);
}

/* ── Get ready: an index card with the line in marker, three punch holes
   hopping ── */
#trivia-content.pop-quiz.ltd-schoolLocker .pq-ready {
    margin: 60px 10px 0; padding: 34px 22px 30px; gap: 22px;
    background: var(--sl-rules), var(--sl-paper); border-radius: 6px; box-shadow: 0 9px 0 var(--sl-shadow);
    --sl-rules: linear-gradient(180deg, transparent 0 18px, rgba(229, 72, 77, 0.55) 18px 20px, transparent 20px),
        repeating-linear-gradient(180deg, transparent 0 34px, rgba(74, 134, 200, 0.26) 34px 36px);
    transform: rotate(-1.5deg);
    animation: ltdslDeal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .pq-ready .pq-display { color: var(--sl-ink); font-size: 2rem; line-height: 1.12; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-dots { gap: 18px; height: 44px; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-dots span { width: 24px; height: 24px; border: 3px solid var(--sl-ink); }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-dots span:nth-child(1) { background: #FFE94A; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-dots span:nth-child(2) { background: #FF77B7; }
#trivia-content.pop-quiz.ltd-schoolLocker .pq-dots span:nth-child(3) { background: #62C9FF; }

/* ── Game over: "Game over!" in white marker, the final score on steel
   plates, a gold star ── */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-final-rank {
    margin: 20px 6px 24px; padding: 0;
    background: none; border: none; box-shadow: none; color: var(--sl-white);
    font-family: 'Sidekick Trivia Permanent Marker', cursive; font-weight: 400; font-size: 3.4rem; line-height: 1.05;
    text-shadow: 0 5px 0 rgba(4, 16, 19, 0.5); transform: rotate(-3deg);
    animation: ltdslDrop 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-final-score { color: var(--sl-white); }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-final { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 100px; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-final-label {
    font-family: 'Graduate', serif; font-size: 1.05rem; letter-spacing: 2px; color: #D8E3E6;
    animation: ltdslDeal 0.5s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-plates { display: flex; align-items: center; gap: 6px; animation: ltdslDeal 0.55s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-plate {
    width: 50px; height: 64px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    background: var(--sl-steel); border: 3px solid #2E3840; border-radius: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    font-family: 'Graduate', serif; font-size: 2.1rem; line-height: 1; color: var(--sl-ink); padding-top: 3px;
}
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-sep { font-family: 'Graduate', serif; font-size: 1.8rem; color: var(--sl-white); padding: 0 1px; }
#trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-final .ltdsl-star { position: absolute; left: 50%; right: auto; top: auto; bottom: 0; margin-left: -42px; animation-delay: 1.0s; }

/* ── Score bar: in flow under the answers (the shared rule), a dark steel
   label holder; the score in Graduate on a steel plate ── */
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-score-bar {
    position: relative; z-index: 1;
    margin-top: 18px; padding: 10px 12px 10px 16px;
    background: linear-gradient(180deg, #16363B, #0C2226); border: 3px solid #061316; border-radius: 14px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.10), 0 8px 16px rgba(0, 0, 0, 0.35);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-score-label {
    font-family: 'Graduate', serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 1px; text-transform: uppercase; color: var(--sl-white);
}
#trivia-content.pop-quiz.ltd-schoolLocker .trivia-score-value {
    padding: 6px 12px 3px; border-radius: 8px; box-sizing: border-box;
    background: var(--sl-steel); border: 3px solid #2E3840; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    font-family: 'Graduate', serif; font-weight: 400; font-size: 1.35rem; letter-spacing: 2px; color: var(--sl-ink);
    font-variant-numeric: tabular-nums;
}

/* Short screens (an SE in Safari): the result art and the plates come down a
   size so those screens fit too. */
@media (max-height: 720px) {
    #trivia-content.pop-quiz.ltd-schoolLocker .pq-joined .pq-burst { padding-top: 132px; font-size: 2.2rem; }
    #trivia-content.pop-quiz.ltd-schoolLocker .pq-joined .pq-burst::before { width: 118px; height: 118px; margin-left: -59px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-icon,
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-result { width: 180px; height: 172px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-stamp { left: 18px; top: 14px; width: 144px; height: 144px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-aplus { font-size: 66px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-star { width: 68px; height: 68px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-x { left: 30px; top: 22px; width: 120px; height: 120px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-result-text { font-size: 2.9rem; margin-bottom: 14px; }
    #trivia-content.pop-quiz.ltd-schoolLocker .trivia-final-rank { margin: 8px 6px 16px; font-size: 2.9rem; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-plate { width: 44px; height: 56px; font-size: 1.8rem; }
    #trivia-content.pop-quiz.ltd-schoolLocker .ltdsl-final { padding-bottom: 84px; }
}

/* Motion: transforms, clips and stroke offsets only. */
@keyframes ltdslDrop { from { transform: translateY(-120px) rotate(-6deg); } }
@keyframes ltdslDropSmall { from { transform: translateY(-80px); } }
@keyframes ltdslDeal { from { transform: translateY(160px) rotate(10deg); } }
@keyframes ltdslSwipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ltdslDial { from { transform: translateY(-90px) rotate(-90deg); } }
@keyframes ltdslClick { 40% { transform: rotate(12deg); } 70% { transform: rotate(-3deg); } }
@keyframes ltdslSticker { from { transform: rotate(-200deg) scale(0); } }
@keyframes ltdslStamp { from { transform: scale(1.6) rotate(-10deg); } }
@keyframes ltdslSlam { from { transform: scale(2.6) rotate(-18deg); } }
@keyframes ltdslDraw { to { stroke-dashoffset: 0; } }
@keyframes ltdslAppear { from { visibility: hidden; } to { visibility: visible; } }