/* Live Ranking · School Locker phone skin ("Hall Pass", owner decision
   2026-10-07), from the Holiday Themes canvas boards SC-Ranking-Phone and
   -Anim. Every rule is scoped to #ranking-content.ranking-design.rkd-schoolLocker,
   so no other screen or feature is touched; the classic screens never match.

   The screens: a teal locker door (its vents and number plate) behind the
   prompt on a whiteboard, the instruction in white, each option an index
   card (the phone's own order on a steel locker plate, the option's
   highlighter tab by its place in the document, the name in navy, a drawn
   grip; the row being dragged lifts, tilts and is swiped yellow), Submit on
   a yellow highlighter button, and the end screens: "Ranking submitted!"
   reads "Turned in!" in marker under a gold-star sticker with a navy tick
   and hole-punch confetti; "Ranking closed" sits under a combination
   padlock whose shackle snaps shut and whose dial spins. No paused face (a
   stop shows "Ranking closed", held back by index.html until the display's
   TOP PICK! is written on, stopDelayMs). No Borda points or figures anywhere.

   /ranking-designs/school-locker.js decorates the screens (rkl-* classes):
   which entrances play (only when a screen or a ranking arrives, never on a
   snapshot that only re-renders the same list), which end screen shows, and
   the star and padlock drawings.

   The theme's web fonts (the Mac's bundled faces, ShowThemeFonts) are
   declared below; the colours are ShowThemePalettes.swift's
   SchoolLockerPalette (the eight highlighters by position, one navy ink).
   The panel colour lives on this in-flow panel, never on html/body or a
   fixed element (the iOS 26 rule). The drag code moves rows with
   `transform` (and measures them 8 px apart), so the entrances animate
   `translate` / `rotate` / `scale` instead and the list's gap stays 8 px. */

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

#ranking-content.ranking-design.rkd-schoolLocker {
    --rkl-ink: #14202B; --rkl-paper: #FFFDF5; --rkl-red: #E0313B; --rkl-yellow: #FFE94A; --rkl-white: #FFFFFF;
    --rkl-shadow: rgba(4, 16, 19, 0.55);
    --rkl-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --rkl-row: 64px;
    --rkl-c: #FFE94A;
    position: relative;
    margin: -8px -4px 0;
    padding: 22px 14px 74px;
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
    box-sizing: border-box;
    border-radius: 26px;
    overflow: hidden;
    text-align: center;
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif;
    font-weight: 800;
    color: var(--rkl-white);
    /* The locker door: its edge shading, the paint, the vents at its foot. */
    background:
        linear-gradient(#0A2427, #0A2427) 50% calc(100% - 46px) / 142px 6px no-repeat,
        linear-gradient(#0A2427, #0A2427) 50% calc(100% - 33px) / 142px 6px no-repeat,
        linear-gradient(#0A2427, #0A2427) 50% calc(100% - 20px) / 142px 6px no-repeat,
        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. */
#ranking-content.ranking-design.rkd-schoolLocker::before {
    content: '214'; position: absolute; right: 22px; top: 8px; width: 46px; height: 20px; box-sizing: border-box;
    border-radius: 3px; background: #AEB7BE; border: 2px solid #0B2B30;
    font-family: 'Graduate', Georgia, serif; font-weight: 400; font-size: 12px; line-height: 17px; color: #22303A;
    pointer-events: none;
}

/* ── The prompt: a whiteboard in its steel frame ── */
#ranking-content.ranking-design.rkd-schoolLocker #ranking-question {
    position: relative; z-index: 1;
    margin: 10px 6px 14px; padding: 18px 16px; box-sizing: border-box;
    min-height: 118px; display: flex; align-items: center; justify-content: center;
    border: 10px solid transparent; border-radius: 14px;
    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,
        radial-gradient(ellipse 26% 18% at 16% 80%, rgba(110, 130, 150, 0.10), transparent 70%) padding-box,
        linear-gradient(#F3F6F8, #F3F6F8) padding-box,
        linear-gradient(180deg, #F4F6F8 0%, #B5BDC4 48%, #E2E6E9 100%) border-box;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 2px #75808A, 0 16px 26px rgba(0, 0, 0, 0.5);
    color: var(--rkl-ink);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 800;
    font-size: 24px; line-height: 1.12; overflow-wrap: anywhere;
}
/* A long prompt (school-locker.js marks one over 48 characters) steps down. */
#ranking-content.ranking-design.rkd-schoolLocker.rkl-long #ranking-question { font-size: 20px; }

/* ── The instruction ── */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-instruction {
    margin: 0 auto 14px; color: var(--rkl-white);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 700;
    font-size: 18px; line-height: 1.25;
}

/* ── The list: index cards, 8 px apart (initRankingDrag's measure) ── */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-list { gap: 8px; margin: 0 6px 22px; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item {
    height: var(--rkl-row); min-height: 0; box-sizing: border-box;
    gap: 10px; padding: 0 14px 0 10px; border-radius: 6px;
    color: var(--rkl-ink);
    background:
        linear-gradient(180deg, transparent 0 16px, rgba(229, 72, 77, 0.55) 16px 19px, transparent 19px),
        repeating-linear-gradient(180deg, transparent 0 34px, rgba(74, 134, 200, 0.26) 34px 36px),
        var(--rkl-paper);
    box-shadow: 0 6px 0 rgba(4, 16, 19, 0.45);
    transition: box-shadow 0.12s ease;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="0"] { --rkl-c: #FFE94A; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="1"] { --rkl-c: #FF77B7; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="2"] { --rkl-c: #6FEA84; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="3"] { --rkl-c: #62C9FF; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="4"] { --rkl-c: #FFA54C; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="5"] { --rkl-c: #C29BFF; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="6"] { --rkl-c: #4FE6D2; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item[data-index="7"] { --rkl-c: #FF8473; }
/* The phone's own order, on a steel locker plate. */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-number {
    flex: 0 0 auto; width: 40px; height: 40px; min-width: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; padding-top: 2px;
    border: 3px solid #2E3840; border-radius: 6px;
    background: linear-gradient(180deg, #F4F6F8 0%, #C2C9CF 56%, #E3E7EA 100%);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    color: var(--rkl-ink); font-family: 'Graduate', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-number.rkl-bump { animation: rklBump 0.24s var(--rkl-back); }
/* The option's highlighter, by its place in the document. */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-color {
    width: 10px; height: 40px; border-radius: 3px; background: var(--rkl-c); box-shadow: 0 0 0 2px var(--rkl-ink);
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-name {
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 800;
    font-size: 22px; line-height: 1.08; color: var(--rkl-ink);
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
}
/* A long name (school-locker.js) on two smaller lines. */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rkl-n2 { font-size: 18px; }
/* The grip: three drawn bars instead of the ☰ glyph. */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item .drag-handle {
    flex: 0 0 auto; width: 24px; height: 22px; font-size: 0; color: transparent;
    background:
        linear-gradient(var(--rkl-ink), var(--rkl-ink)) 0 0 / 100% 4px no-repeat,
        linear-gradient(var(--rkl-ink), var(--rkl-ink)) 0 50% / 100% 4px no-repeat,
        linear-gradient(var(--rkl-ink), var(--rkl-ink)) 0 100% / 100% 4px no-repeat;
}
/* The row being dragged lifts, tilts and is swiped with the yellow
   highlighter (the drag owns `transform`). */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-item.dragging {
    opacity: 1;
    background:
        linear-gradient(180deg, transparent 0 16px, rgba(229, 72, 77, 0.55) 16px 19px, transparent 19px),
        repeating-linear-gradient(180deg, transparent 0 34px, rgba(74, 134, 200, 0.26) 34px 36px),
        linear-gradient(var(--rkl-yellow), var(--rkl-yellow)) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat,
        var(--rkl-paper);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.55);
    rotate: -2.5deg;
}

/* ── Submit: the yellow highlighter ── */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submit-btn {
    width: calc(100% - 12px); margin: 0 6px; height: 66px; padding: 0 12px;
    background: var(--rkl-yellow); color: var(--rkl-ink);
    border: 3px solid var(--rkl-ink); border-radius: 12px; box-shadow: 0 6px 0 #061316;
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1;
    transition: transform 0.1s, box-shadow 0.1s;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submit-btn:active:not(:disabled) {
    transform: translateY(5px); box-shadow: 0 1px 0 #061316;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submit-btn:disabled {
    opacity: 1; background: #B9C2C7; color: #6E7C86;
}

/* ── The end screens: "Turned in!" under a gold star, "Ranking closed"
   under a combination padlock ── */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted { position: relative; padding: 8px 0 20px; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted > div:first-child {
    position: relative; width: 200px; height: 200px; margin: 0 auto 26px !important;
    font-size: 0 !important; color: transparent;
}
/* What school-locker.js adds stays hidden outside this design. */
.rkl-only { display: none; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-only.rkl-icon { display: block; position: absolute; inset: 0; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-icon .rkl-lock { display: none; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-closed .rkl-icon .rkl-star { display: none; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-closed .rkl-icon .rkl-lock { display: block; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-closed > div:first-child { width: 140px; height: 175px; margin-bottom: 30px !important; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-star { rotate: 8deg; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-star .rkl-tick { stroke-dasharray: 100 200; stroke-dashoffset: 0; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-lock .rkl-shackle { transform-box: view-box; transform-origin: 60px 64px; }
#ranking-content.ranking-design.rkd-schoolLocker .rkl-lock .rkl-dial { transform-box: view-box; transform-origin: 60px 104px; }
/* Hole-punch confetti around the star (submitted only). */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-submitted::before {
    content: ''; position: absolute; left: -8px; right: -8px; top: -14px; height: 230px; pointer-events: none;
    background:
        radial-gradient(circle, transparent 0 7px, #F4F7F8 7.5px 13px, transparent 13.5px) 6% 8% / 34px 34px no-repeat,
        radial-gradient(circle, #FFFDF5 0 8px, transparent 8.5px) 4% 64% / 20px 20px no-repeat,
        radial-gradient(circle, #FF77B7 0 9px, transparent 9.5px) 12% 82% / 22px 22px no-repeat,
        radial-gradient(circle, transparent 0 6px, #F4F7F8 6.5px 11px, transparent 11.5px) 93% 14% / 30px 30px no-repeat,
        radial-gradient(circle, #FFFDF5 0 7px, transparent 7.5px) 88% 36% / 18px 18px no-repeat,
        radial-gradient(circle, #FFA54C 0 9px, transparent 9.5px) 97% 50% / 22px 22px no-repeat,
        radial-gradient(circle, transparent 0 9px, #F4F7F8 9.5px 16px, transparent 16.5px) 96% 66% / 40px 40px no-repeat,
        radial-gradient(circle, #FFE94A 0 7px, transparent 7.5px) 94% 80% / 18px 18px no-repeat,
        radial-gradient(circle, #62C9FF 0 7px, transparent 7.5px) 20% 30% / 18px 18px no-repeat;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted h2 {
    position: relative; margin: 0 -14px 14px; color: var(--rkl-white);
    font-family: 'Sidekick Trivia Permanent Marker', 'Permanent Marker', cursive; font-weight: 400;
    font-size: 48px; line-height: 1.05; rotate: -3deg; white-space: nowrap;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-closed h2 { font-size: clamp(34px, calc(11.5vw - 2px), 42px); }
/* "Ranking submitted!" reads "Turned in!" in marker (the Phone board). */
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-submitted h2 { font-size: 0; }
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-submitted h2::after {
    content: 'Turned in!'; font-size: 52px;
}
#ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted p {
    position: relative; margin: 0; color: var(--rkl-white);
    font-family: 'Sidekick Trivia Barlow', 'Barlow', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.3;
}

/* ── Entrances: only when a screen or a ranking arrives (.rkl-enter) ── */
/* The whiteboard drops in with a list; an end screen keeps it where it is. */
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter:not(.rkl-done) #ranking-question { animation: rklDrop 0.7s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-instruction { animation: rklRise 0.6s 0.5s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item { animation: rklDeal 0.7s 0.2s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(2) { animation-delay: 0.28s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(3) { animation-delay: 0.36s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(4) { animation-delay: 0.44s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(5) { animation-delay: 0.52s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(6) { animation-delay: 0.6s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(7) { animation-delay: 0.68s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-item:nth-child(8) { animation-delay: 0.76s; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submit-btn { animation: rklRise 0.7s 0.9s var(--rkl-back) backwards; }
/* "Turned in!": the star sticker spins on, its tick draws on, the words pop. */
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-submitted .rkl-star { animation: rklSticker 0.45s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-submitted .rkl-tick { animation: rklDraw 0.35s 0.4s ease-in-out backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-submitted h2,
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-submitted p { animation: rklPop 0.7s 0.1s var(--rkl-back) backwards; }
/* "Ranking closed" lands 0.7 s after it shows: the padlock, its words and
   the note pop on together (RankingSchoolLockerDesign.phoneClosedLanding;
   the tests read this timing). The Mac's stopDelayMs is TOP PICK!'s landing
   less 0.7 s, so it lands with the projector's TOP PICK!. Then the shackle
   snaps shut and the dial spins. */
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-closed { animation: rklPop 0.7s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-closed .rkl-shackle { animation: rklShut 0.35s 0.5s var(--rkl-back) backwards; }
#ranking-content.ranking-design.rkd-schoolLocker.rkl-enter .ranking-submitted.rkl-closed .rkl-dial { animation: rklSpin 0.8s 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

@keyframes rklDrop { from { translate: 0 -700px; } }
@keyframes rklDeal { from { translate: 0 900px; rotate: 8deg; } }
@keyframes rklRise { from { translate: 0 400px; } }
@keyframes rklPop { from { scale: 0.001; } }
@keyframes rklSticker { from { scale: 0.001; rotate: -192deg; } }
@keyframes rklDraw { from { stroke-dashoffset: 100; } }
@keyframes rklShut { from { translate: 0 -22px; } }
@keyframes rklSpin { from { rotate: 200deg; } }
@keyframes rklBump { 50% { scale: 1.2; } }

/* ── 6+ options (index.html's .compact): shorter cards ── */
#ranking-content.ranking-design.rkd-schoolLocker.compact { --rkl-row: 48px; padding-bottom: 52px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-submit-btn { height: 58px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact #ranking-question { margin-bottom: 12px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-instruction { margin-bottom: 12px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-list { margin-bottom: 16px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item { padding: 0 12px 0 8px; gap: 9px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-number { width: 34px; height: 34px; font-size: 18px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-color { height: 30px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-name { font-size: 19px; -webkit-line-clamp: 1; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rkl-n2 { font-size: 16px; }
#ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .drag-handle { height: 18px; background-size: 100% 3px; }

/* ── Shorter phones: everything still fits one screen ── */
@media (max-height: 740px) {
    #ranking-content.ranking-design.rkd-schoolLocker { --rkl-row: 56px; padding: 14px 12px 56px; }
    #ranking-content.ranking-design.rkd-schoolLocker #ranking-question { min-height: 92px; padding: 12px 12px; margin-bottom: 10px; font-size: 21px; }
    #ranking-content.ranking-design.rkd-schoolLocker.rkl-long #ranking-question { font-size: 17px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-instruction { font-size: 15px; margin-bottom: 10px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-list { margin-bottom: 14px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-number { width: 36px; height: 36px; font-size: 19px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-color { height: 34px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-item .rank-name { font-size: 20px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-submit-btn { height: 54px; font-size: 23px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact { --rkl-row: 44px; padding: 10px 12px 34px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact #ranking-question { min-height: 0; margin: 6px 6px 8px; padding: 8px 10px; border-width: 7px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact.rkl-long #ranking-question { font-size: 15px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-instruction { font-size: 14px; margin-bottom: 8px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-list { margin-bottom: 12px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-submit-btn { height: 48px; font-size: 21px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-number { width: 30px; height: 30px; font-size: 16px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-color { height: 26px; }
    #ranking-content.ranking-design.rkd-schoolLocker.compact .ranking-item .rank-name { font-size: 17px; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted > div:first-child { width: 170px; height: 170px; margin-bottom: 18px !important; }
    #ranking-content.ranking-design.rkd-schoolLocker .ranking-submitted.rkl-closed > div:first-child { width: 120px; height: 150px; margin-bottom: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #ranking-content.ranking-design.rkd-schoolLocker *, #ranking-content.ranking-design.rkd-schoolLocker *::before,
    #ranking-content.ranking-design.rkd-schoolLocker *::after, #ranking-content.ranking-design.rkd-schoolLocker {
        animation: none !important; transition: none !important;
    }
}