/* Would You Rather · School Locker phone skin ("Hall Pass", owner decision
   2026-10-07): the Holiday Themes canvas's SC-WYR-Phone and Anim boards.
   Every rule is scoped to #wyr-content.wyr-design.wyrd-schoolLocker, so no
   other screen or feature is touched; the classic screens (no .wyr-design)
   never match.

   The display's locker room on the phone: a teal locker door (vents at the
   foot, number plate 214), the heading a steel label strip ("Pick one",
   "Got it!", "Locked in!", from /wyr-designs/school-locker.js), the voting
   clock a combination-lock dial, each option a lined index card swiped with
   its side's highlighter (A blue, B pink) and a red-pen "or" disc between
   them; a pick keeps its card and gets a red check, the other greys. The
   result: the two names on small cards (the loser greyed), the ruler, the
   shares on locker plates, the A+ stamp and a gold star with hole-punch
   confetti down the sides, and the outcome in yellow marker ("Tied!"
   between two stars). The colours are ShowThemePalettes.swift's
   SchoolLockerPalette; the faces are the Mac's (ShowThemeFonts).

   Motion (the Anim board's phone): the cards deal up and settle, the
   highlighters swipe, "or" pops, a pick draws its check; the result pops,
   the A+ stamp slams down 0.6 s in over 0.28 s — its landing, 0.88 s, is
   WouldYouRatherSchoolLockerDesign.phoneResultLanding, so the Mac's
   resultsDelayMs (each beat less 0.88 s) lands it on the projector's
   stamp — the star slaps on, the outcome is written on left to right and
   confetti falls; "Tied!" is written by 0.9 s, as the projector's is.
   Transforms and clips only: tints are mixed colours, never a lowered
   opacity. The script keeps a re-render of the same screen still
   (.slwyr-still) and feeds the dial its seconds. */

@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'); }

#wyr-content.wyr-design.wyrd-schoolLocker {
    --sl-a: #62C9FF; --sl-b: #FF77B7; --sl-ink: #14202B;
    --sl-paper: #FFFDF5; --sl-grey: #B9C2C7; --sl-grey-ink: #6E7C86; --sl-red: #E0313B;
    --sl-yellow: #FFE94A; --sl-gold: #FFC531; --sl-white: #F6F8F9;
    --sl-shadow: #0B2328;
    /* The highlighters laid on the paper (multiply at 0.92, mixed). */
    --sl-hl-a: #6ECBF7; --sl-hl-b: #F57CB4;
    --sl-rag: polygon(0.6% 6%, 2% 0%, 30% 1.5%, 60% 0.5%, 97.6% 2%, 100% 9%, 98.7% 21%, 100% 34%, 98.9% 49%, 100% 63%, 98.6% 77%, 100% 89%, 97.4% 100%, 60% 98.5%, 25% 100%, 1.4% 97.5%, 0% 86%, 0.8% 50%);
    --sl-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sl-in: cubic-bezier(0.55, 0, 1, 0.45);
    --sl-swipe: cubic-bezier(0.65, 0, 0.35, 1);
    position: relative;
    min-height: calc(100dvh - 40px);
    padding: 100px 10px 64px;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    color: var(--sl-white);
    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. */
#wyr-content.wyr-design.wyrd-schoolLocker::before {
    content: '214'; position: absolute; right: 22px; top: 62px; width: 46px; height: 20px;
    box-sizing: border-box; border-radius: 3px; background: #AEB7BE; border: 2px solid #0B2B30;
    font-family: 'Graduate', serif; font-size: 12px; line-height: 16px; color: #22303A; font-weight: 400;
}
/* The door's vents. */
#wyr-content.wyr-design.wyrd-schoolLocker::after {
    content: ''; position: absolute; left: 50%; bottom: 18px; width: 142px; height: 32px; margin-left: -71px;
    pointer-events: none;
    background:
        linear-gradient(#0A2427, #0A2427) 0 0 / 100% 6px no-repeat,
        linear-gradient(#0A2427, #0A2427) 0 13px / 100% 6px no-repeat,
        linear-gradient(#0A2427, #0A2427) 0 26px / 100% 6px no-repeat;
    border-radius: 3px;
}

/* ── The heading: a steel label strip (its text from the script) ── */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-question {
    position: absolute; left: 12px; top: 22px; margin: 0; font-size: 0; line-height: 0; z-index: 3;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-question::after {
    content: attr(data-sl-head);
    display: inline-flex; align-items: center; height: 58px; padding: 0 14px; box-sizing: border-box;
    border-radius: 16px; border: 3px solid #061316;
    background: linear-gradient(180deg, #16363B 0%, #0C2226 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.10), 0 8px 0 rgba(0, 0, 0, 0.3);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', sans-serif; font-weight: 800; font-size: 24px; line-height: 1;
    color: var(--sl-white); white-space: nowrap;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-question.slwyr-swap::after { animation: slwyrDrop 0.55s var(--sl-back) both; }

/* ── Paused: a sticky note over the heading (the phones only) ── */
#wyr-content.wyr-design.wyrd-schoolLocker .stopped-banner {
    position: absolute; left: 12px; right: 104px; top: 16px; z-index: 4; margin: 0;
    padding: 10px 12px 11px; border: none; border-radius: 3px;
    background: #FFF4A8; color: var(--sl-red);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3);
    font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 17px; line-height: 1.15; text-align: left; transform: rotate(-2deg);
}
#wyr-content.wyr-design.wyrd-schoolLocker .stopped-banner.show { animation: slwyrSlap 0.45s var(--sl-back) both; }
#wyr-content.wyr-design.wyrd-schoolLocker:has(.stopped-banner.show) #wyr-question { display: none; }

/* ── The clock: a combination-lock dial ── */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer {
    position: absolute; right: 12px; top: 8px; width: 84px; height: 84px; margin: 0; padding: 0; z-index: 3;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #16191D 0 34px, rgba(22, 25, 29, 0) 34.5px),
        conic-gradient(var(--sl-arc, #FFE94A) calc(var(--sl-left, 1) * 360deg), #0D1012 0),
        #0D1012;
    border: 4px solid #C5CCD2;
    box-shadow: inset 0 0 0 1px #2F3940, 0 0 0 1px #2F3940, 0 5px 0 rgba(0, 0, 0, 0.4);
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer:not(.show) { display: none; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer .vote-timer-bar,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer .vote-timer-text { display: none; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer[data-level="urgent"] { --sl-arc: #E0313B; }
/* The pointer at the top. */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-timer::after {
    content: ''; position: absolute; left: 50%; top: -9px; width: 12px; height: 11px; margin-left: -6px;
    background: var(--sl-red); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-ticks {
    position: absolute; inset: 4px; border-radius: 50%;
    background: repeating-conic-gradient(from -1deg, #E9EDF0 0 2deg, rgba(233, 237, 240, 0) 2deg 9deg);
    -webkit-mask: radial-gradient(circle, transparent 0 26px, #000 26.5px 30px, transparent 30.5px);
    mask: radial-gradient(circle, transparent 0 26px, #000 26.5px 30px, transparent 30.5px);
    transition: transform 0.25s var(--sl-back);
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-hub {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
    background: #22282D; box-shadow: 0 0 0 2px #0A0C0E; display: flex; align-items: center; justify-content: center; gap: 2px;
}

/* Locker-plate digits (the dial's dark ones, the result's steel ones). */
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-plate {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 18px; height: 26px; border-radius: 5px; border: 2px solid #050607;
    background: linear-gradient(180deg, #2E363D 0%, #171B1F 60%, #22282D 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    font-family: 'Graduate', serif; font-weight: 400; font-size: 16px; line-height: 1; color: var(--sl-white);
    padding-top: 1px;
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-steel {
    width: 28px; height: 40px; font-size: 24px; border-color: #2E3840; color: var(--sl-ink);
    background: linear-gradient(180deg, #F4F6F8 0%, #C2C9CF 56%, #E3E7EA 100%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-steel.slwyr-blank { background: linear-gradient(180deg, #8F99A1 0%, #6E7881 100%); }
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-sep {
    display: inline-block; font-family: 'Graduate', serif; font-weight: 400; font-size: 20px; color: var(--sl-white); padding: 0 2px;
}

/* ── The options: lined index cards with a highlighter swipe ── */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options { gap: 0; margin-bottom: 18px; }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: clamp(150px, 26dvh, 200px); padding: 26px 22px 20px; margin: 0;
    border: none; border-radius: 6px; overflow: visible;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0 16px, #F0A8A4 16px 19px, rgba(0, 0, 0, 0) 19px),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 34px, #D5E1EE 34px 36px),
        var(--sl-paper);
    box-shadow: 0 9px 0 var(--sl-shadow);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', sans-serif; font-weight: 800;
    font-size: clamp(22px, 7.2vw, 28px); line-height: 1.08; color: var(--sl-ink);
    transform: rotate(-0.8deg);
    transition: background-color 0.35s, color 0.35s;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.wyr-b { transform: rotate(0.8deg); }
/* The highlighter: under the text, over the paper's rules (multiply). */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn::before {
    content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: calc(100% - 16px); z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 10%, rgba(255, 255, 255, 0) 10% 86%, rgba(0, 0, 0, 0.05) 86%), var(--sl-a);
    mix-blend-mode: multiply;
    clip-path: var(--sl-rag);
    transform-origin: left center;
    transition: transform 0.35s var(--sl-swipe);
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.wyr-b::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 10%, rgba(255, 255, 255, 0) 10% 86%, rgba(0, 0, 0, 0.05) 86%), var(--sl-b);
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.slwyr-long { font-size: clamp(19px, 6vw, 23px); }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.slwyr-longer { font-size: clamp(17px, 5.1vw, 20px); }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn:active { transform: rotate(-0.8deg) scale(0.97); }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.wyr-b:active { transform: rotate(0.8deg) scale(0.97); }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn:disabled { opacity: 1; cursor: default; }
/* A pick: the other card greys and loses its highlighter. */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options:has(.selected) .wyr-option-btn:not(.selected) {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0 16px, #BDA9AC 16px 19px, rgba(0, 0, 0, 0) 19px),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 34px, #ACB7BF 34px 36px),
        var(--sl-grey);
    color: var(--sl-grey-ink);
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options:has(.selected) .wyr-option-btn:not(.selected)::before { animation: none; transform: scaleX(0); }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options:not(.slwyr-still):has(.selected) .wyr-option-btn:not(.selected)::before { animation: slwyrUnswipe 0.35s var(--sl-swipe) both; }
/* The red check on the pick. */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-option-btn.selected::after {
    content: ''; position: absolute; right: -6px; top: 6px; width: 80px; height: 80px; z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 116 116'%3E%3Cpath d='M10 52 C20 60 30 70 38 84 C52 54 70 30 94 8' fill='none' stroke='%23E0313B' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: slwyrCheck 0.35s var(--sl-swipe) both;
}
/* The "or" disc. */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-or {
    position: relative; z-index: 2; width: 88px; height: 88px; margin: -18px auto -26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 40% 35%, #FFFFFF, #E9EEF0);
    box-shadow: 0 6px 0 var(--sl-shadow);
    font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 28px; line-height: 1; color: var(--sl-red); padding-bottom: 3px; box-sizing: border-box;
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-or::before {
    content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 4px solid var(--sl-red);
    transform: rotate(-12deg) scale(1, 0.96);
}

/* Dealt in with a new question (never on a re-render of the same one). */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options .wyr-option-btn { animation: slwyrDealA 0.7s var(--sl-back) both; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options .wyr-option-btn.wyr-b { animation: slwyrDealB 0.7s var(--sl-back) 0.15s both; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options .wyr-option-btn::before { animation: slwyrSwipe 0.45s var(--sl-swipe) 0.5s both; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options .wyr-option-btn.wyr-b::before { animation-delay: 0.65s; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options .wyr-or { animation: slwyrPop 0.6s var(--sl-back) 0.35s both; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options.slwyr-still .wyr-option-btn,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options.slwyr-still .wyr-option-btn::before,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options.slwyr-still .wyr-or { animation: none; }

/* ── The status line ── */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-status {
    margin: 0 14px; font-family: 'Sidekick Trivia Barlow', 'Barlow', sans-serif; font-weight: 700;
    font-size: 19px; line-height: 1.25; color: #FFFFFF; min-height: 24px;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-status.slwyr-rise { animation: slwyrRise 0.5s var(--sl-back) both; }
/* Locked, before the result shows: "Locked in!" in marker. */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options[style*="none"] ~ #wyr-result[style*="none"] ~ #wyr-status {
    margin-top: 26dvh; font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 40px; line-height: 1.1; color: var(--sl-yellow); transform: rotate(-3deg);
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-options[style*="none"] ~ #wyr-result[style*="none"] ~ #wyr-status.slwyr-reveal {
    font-size: 30px;
}

/* ── The result ── */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result { position: relative; margin: -6px 2px 0; }
/* The names on small cards; the loser greyed (the art names the winner). */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-labels:not(.wyr-result-bar ~ *) {
    display: flex; gap: 14px; justify-content: space-between; animation: slwyrPop 0.7s var(--sl-back) both;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-labels:not(.wyr-result-bar ~ *) span {
    flex: 1 1 0; min-width: 0; min-height: 104px; display: flex; align-items: center; justify-content: center;
    padding: 18px 8px 10px; box-sizing: border-box; border-radius: 6px; overflow-wrap: anywhere;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0 12px, #F0A8A4 12px 14px, rgba(0, 0, 0, 0) 14px),
        var(--sl-hl-a);
    box-shadow: 0 6px 0 var(--sl-shadow);
    font-size: 18px; line-height: 1.1; color: var(--sl-ink); transform: rotate(-1.2deg);
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-labels:not(.wyr-result-bar ~ *) .wyr-b-label {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0 12px, #F0A8A4 12px 14px, rgba(0, 0, 0, 0) 14px),
        var(--sl-hl-b);
    transform: rotate(1.2deg);
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-art[data-w="A"]) > .wyr-result-labels:not(.wyr-result-bar ~ *) .wyr-b-label,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-art[data-w="B"]) > .wyr-result-labels:not(.wyr-result-bar ~ *) .wyr-a-label {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0 12px, #BDA9AC 12px 14px, rgba(0, 0, 0, 0) 14px),
        var(--sl-grey);
    color: var(--sl-grey-ink);
}
/* The ruler. */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar {
    position: relative; height: 46px; margin: 22px 0 14px; padding: 6px; border: none; border-radius: 6px; overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgba(20, 32, 43, 0.8) 0 2px, rgba(20, 32, 43, 0) 2px 16px) 0 0 / 100% 12px no-repeat,
        linear-gradient(180deg, #FFFFFF, #E4EBEE);
    box-shadow: 0 5px 0 var(--sl-shadow);
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar .wyr-a-fill,
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar .wyr-b-fill {
    height: 100%; background: var(--sl-a); mix-blend-mode: multiply; clip-path: var(--sl-rag);
    animation: slwyrGrowA 0.6s var(--sl-swipe) 0.15s both; transform-origin: left center;
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar .wyr-b-fill {
    background: var(--sl-b); animation-name: slwyrGrowB; transform-origin: right center;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-art[data-w="A"]) .wyr-b-fill,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-art[data-w="B"]) .wyr-a-fill { background: #AEB8BE; }
/* The split marker on the ruler. */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar .wyr-a-fill { box-shadow: none; }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-result-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--sl-split, 50%); width: 6px; margin-left: -3px;
    border-radius: 3px; background: var(--sl-ink); box-shadow: 0 0 0 2px var(--sl-paper);
}
/* The shares on plates (the script lays the cells). */
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-bar ~ .wyr-result-labels {
    display: flex; justify-content: space-between; align-items: center; min-height: 44px;
    animation: slwyrPop 0.6s var(--sl-back) 0.3s both;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-bar ~ .wyr-result-labels > span {
    display: inline-flex; align-items: center; gap: 3px; color: var(--sl-white); font-size: 0;
}
/* The art: the A+ stamp and a gold star, or two stars for a tie. */
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art {
    position: absolute; left: 0; right: 0; top: 238px; height: 150px; pointer-events: none;
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-stamp {
    position: absolute; left: 50%; top: 0; width: 150px; height: 150px; margin-left: -75px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M11.6 51.9 L15.5 42.0 L20.8 32.5 L27.6 23.9 L35.8 16.5 L45.3 10.7 L55.7 6.7 L66.7 4.8 L77.8 4.9 L88.6 7.0 L98.9 10.7 L108.4 15.7 L117.1 21.9 L125.0 29.1 L132.0 37.3 L137.8 46.4 L142.3 56.4 L145.2 67.2 L146.0 78.4 L144.8 89.6 L141.5 100.4 L136.2 110.3 L129.4 119.1 L121.3 126.5 L112.3 132.7 L102.7 137.6 L92.6 141.2 L82.1 143.5 L71.2 144.5 L60.3 143.9 L49.4 141.4 L39.0 137.1 L29.6 130.9 L21.5 123.0 L15.1 113.7 L10.4 103.4 L7.6 92.7 L6.3 81.7 L6.6 70.8 L8.2 60.0 L11.1 49.5 L15.3 39.3 L21.0 29.8 L28.2 21.1 L36.8 13.8 L46.6 8.1' fill='none' stroke='%23E0313B' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 69px; line-height: 1; color: var(--sl-red); padding-top: 6px; box-sizing: border-box;
    animation: slwyrStamp 0.28s 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-star {
    position: absolute; width: 70px; height: 70px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 106 108'%3E%3Cpolygon points='52,10 64.3,41 97.6,43.2 72,64.6 80.2,97 52,79.2 23.8,97 32,64.6 6.4,43.2 39.7,41' fill='rgba(0,0,0,0.35)'/%3E%3Cpolygon points='50,6 62.3,37 95.6,39.2 70,60.6 78.2,93 50,75.2 21.8,93 30,60.6 4.4,39.2 37.7,37' fill='%23FFC531' stroke='%23A86F00' stroke-width='3' stroke-linejoin='round'/%3E%3Cpolygon points='46,26 51.6,40.7 67,41.3 54.9,51.4 58.9,66.6 46,58.2 33.1,66.6 37.1,51.4 25,41.3 40.4,40.7' fill='%23FFE27A'/%3E%3C/svg%3E") center / contain no-repeat;
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art .slwyr-star { left: calc(50% + 50px); top: -10px; animation: slwyrSticker 0.45s var(--sl-back) 0.85s both; }
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art.slwyr-tie .slwyr-star { width: 90px; height: 90px; top: 20px; }
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art.slwyr-tie .slwyr-star:first-child { left: calc(50% - 110px); --sl-rot: -10deg; animation-delay: 0.6s; }
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art.slwyr-tie .slwyr-star:last-child { left: calc(50% + 20px); --sl-rot: 12deg; animation-delay: 0.8s; }
/* Hole-punch confetti down the two margins. */
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-punch {
    position: absolute; top: -120px; width: 18px; height: 18px; border-radius: 50%; background: var(--sl-paper);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); animation: slwyrFall 2.6s cubic-bezier(0.35, 0, 0.8, 0.6) 0.5s both;
}
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-punch.slwyr-ring { width: 30px; height: 30px; background: none; border: 7px solid #F4F7F8; box-sizing: border-box; }
#wyr-content.wyr-design.wyrd-schoolLocker .slwyr-punch.slwyr-dot { background: var(--sl-c); }
/* The outcome in yellow marker, written on left to right. */
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-winner {
    margin: 166px 6px 8px; font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 34px; line-height: 1.08; color: var(--sl-yellow); transform: rotate(-3deg);
    animation: slwyrWrite 0.7s var(--sl-swipe) 0.4s both;
}
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-winner.slwyr-long { font-size: 27px; }
#wyr-content.wyr-design.wyrd-schoolLocker .wyr-winner.slwyr-longer { font-size: 22px; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-tie) .wyr-winner {
    font-size: 64px; animation: slwyrWrite 0.6s 0.3s var(--sl-swipe) both;
}
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result:has(.slwyr-none) .wyr-winner { margin-top: 30px; font-size: 30px; }
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result.slwyr-still *,
#wyr-content.wyr-design.wyrd-schoolLocker #wyr-result.slwyr-still { animation: none; }

/* ── Small phones: everything a little tighter ── */
@media (max-height: 700px) {
    #wyr-content.wyr-design.wyrd-schoolLocker { padding-top: 92px; padding-bottom: 54px; }
    #wyr-content.wyr-design.wyrd-schoolLocker #wyr-result > .wyr-result-labels:not(.wyr-result-bar ~ *) span { min-height: 72px; padding-top: 14px; font-size: 16px; }
    #wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art { top: 202px; height: 112px; }
    #wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art .slwyr-star { width: 54px; height: 54px; left: calc(50% + 34px); top: -6px; }
    #wyr-content.wyr-design.wyrd-schoolLocker .slwyr-art.slwyr-tie .slwyr-star { width: 72px; height: 72px; top: 16px; }
    #wyr-content.wyr-design.wyrd-schoolLocker .slwyr-stamp { width: 112px; height: 112px; margin-left: -56px; font-size: 50px; }
    #wyr-content.wyr-design.wyrd-schoolLocker .wyr-winner { margin-top: 124px; font-size: 28px; }
}

@keyframes slwyrDrop { from { transform: translateY(-80px); } to { transform: none; } }
@keyframes slwyrSlap { from { transform: rotate(-14deg) scale(1.6); } to { transform: rotate(-2deg); } }
@keyframes slwyrDealA { from { transform: translateY(900px) rotate(-10deg); } to { transform: rotate(-0.8deg); } }
@keyframes slwyrDealB { from { transform: translateY(900px) rotate(10deg); } to { transform: rotate(0.8deg); } }
@keyframes slwyrSwipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slwyrUnswipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes slwyrPop { from { transform: scale(0); } to { transform: none; } }
@keyframes slwyrCheck { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slwyrRise { from { transform: translateY(300px); } to { transform: none; } }
@keyframes slwyrGrowA { from { transform: scaleX(0); } to { transform: none; } }
@keyframes slwyrGrowB { from { transform: scaleX(0); } to { transform: none; } }
@keyframes slwyrStamp { from { transform: rotate(-26deg) scale(2.6); } to { transform: rotate(-8deg) scale(1); } }
@keyframes slwyrSticker { from { transform: rotate(calc(var(--sl-rot, 12deg) - 200deg)) scale(0); } to { transform: rotate(var(--sl-rot, 12deg)) scale(1); } }
@keyframes slwyrWrite { from { clip-path: inset(-40px 100% -40px -40px); } to { clip-path: inset(-40px -40px -40px -40px); } }
@keyframes slwyrFall {
    from { transform: translate(0, 0) scale(1, 1); }
    25% { transform: translate(var(--sl-sw, 14px), 240px) scale(1, 0.6); }
    50% { transform: translate(0, 480px) scale(1, 1); }
    75% { transform: translate(calc(var(--sl-sw, 14px) * -1), 720px) scale(1, 0.6); }
    to { transform: translate(0, 980px) scale(1, 1); }
}

@media (prefers-reduced-motion: reduce) {
    #wyr-content.wyr-design.wyrd-schoolLocker *,
    #wyr-content.wyr-design.wyrd-schoolLocker *::before,
    #wyr-content.wyr-design.wyrd-schoolLocker *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    #wyr-content.wyr-design.wyrd-schoolLocker .slwyr-punch { display: none; }
}