/* Footer and dots reserve 104px; the remaining height is divided 25% / 75%.
   Keep the same geometry in pageCapacity in display.js. */
.display-body{--font:Saudi,Tahoma,Arial,sans-serif;--screen-bg:#103b32;--screen-card:#19483e;--screen-text:#faf9f0;--screen-muted:#b9d0c8;--screen-accent:#efd49b;--screen-line:#ffffff20;background:radial-gradient(ellipse at 50% 38%,#ffffff06,transparent 70%),var(--screen-bg);color:var(--screen-text);margin:0;overflow:hidden}
.display-body[data-theme=light]{--screen-bg:#f1f5ef;--screen-card:#fff;--screen-text:#173f32;--screen-muted:#577366;--screen-accent:#8c6827;--screen-line:#173f3226}
.display-body[data-theme=midnight]{--screen-bg:#142a38;--screen-card:#1c3a4a;--screen-text:#f4f8fc;--screen-muted:#b9cedb;--screen-accent:#a4ddd7}
#screen{position:relative;height:100dvh;min-height:520px;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,3fr) 48px 56px;gap:0;padding:10px clamp(20px,3.5vw,70px) 6px;max-width:2200px;margin:auto}
.screen-header{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,32px);min-height:0;padding:6px 0 10px;border-bottom:1px solid var(--screen-line)}
.screen-identity{--identity-height:clamp(86px,16vh,144px);display:flex;align-items:center;gap:16px;min-width:0}.screen-identity>div:last-child{min-width:0}
.screen-brand{flex-shrink:0;display:flex;align-items:center}.screen-brand img{width:var(--identity-height);height:var(--identity-height);object-fit:contain}.screen-brand .display-wordmark{width:calc(var(--identity-height)*1.3);height:var(--identity-height);padding:7px}
.display-body:not([data-theme=light]) .display-wordmark{filter:brightness(2.35) saturate(.68)}
.screen-school-name{font-size:clamp(20px,2vw,36px);font-weight:700;line-height:1.5;overflow-wrap:anywhere}.display-title{font-size:clamp(13px,1vw,18px);line-height:1.6;margin:3px 0 0;color:var(--screen-muted);overflow-wrap:anywhere}
.screen-heading{--heading-size:clamp(26px,2.6vw,50px);--heading-lines:3;text-align:center;min-width:0}.screen-period{justify-self:end;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:6px}.screen-cycle{text-align:center;color:var(--screen-muted);font-size:clamp(13px,1vw,18px);line-height:1.5}.screen-heading h1{font-size:var(--heading-size);line-height:1.5;height:calc(var(--heading-size)*var(--heading-lines));overflow-wrap:anywhere;display:flex;align-items:center;justify-content:center;margin:4px 0 0;color:var(--screen-accent)}
.screen-date{justify-self:end;max-width:100%;padding:11px 16px;border:1px solid var(--screen-line);border-radius:14px;background:#ffffff04;font-size:clamp(16px,1.15vw,22px);line-height:1.5;color:var(--screen-text)}.screen-date-row{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:12px;margin:4px 0}.screen-date-row>span{font-size:.75em;color:var(--screen-muted)}.screen-date-value{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.screen-date-calendar{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}.screen-date-parts{display:inline-flex;direction:rtl;align-items:baseline;gap:.3em}.screen-date-calendar bdi{font-family:Tahoma,Arial,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;font-weight:600}.screen-date-calendar small{font-size:.65em;color:var(--screen-muted)}.date-divider{color:var(--screen-muted);font-size:.8em}
.slide-content{min-height:0;display:flex;align-items:stretch;justify-content:center;padding:12px 0 8px;overflow:auto;scrollbar-width:thin}
.screen-grid{display:grid;grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:16px;width:100%;height:100%;max-width:1380px;margin:0 auto;align-items:stretch}
.screen-grid.count-1{max-width:660px}.screen-grid.count-2{max-width:1040px}
.screen-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;container-type:size;background:var(--screen-card);border:1px solid var(--screen-line);border-radius:22px;text-align:center;padding:clamp(12px,2vh,24px) 20px;box-shadow:0 14px 32px #00000010}
.screen-card h2{display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--name-lines,2)*1.4em);flex-shrink:0;font-size:var(--name-size,clamp(22px,12cqh,42px));line-height:1.4;overflow-wrap:anywhere;margin:8px 0 3px;color:var(--screen-text)}.ranking-grid .screen-card h2{padding-inline:25px}.screen-card p{display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--class-lines,1)*1.5em);flex-shrink:0;font-size:var(--class-size,clamp(15px,6cqh,24px));line-height:1.5;margin:0;color:var(--screen-muted)}
.rank{position:absolute;inset-inline-start:14px;top:14px;display:grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--screen-accent);border-radius:11px;color:var(--screen-bg);background:var(--screen-accent);font-size:24px;font-weight:700;box-shadow:0 3px 10px #00000018}
.screen-score{font-size:var(--score-size,clamp(38px,22cqh,94px));line-height:1.2;color:var(--screen-accent);margin-top:14px}.screen-score small{display:block;font-size:clamp(13px,1vw,18px);line-height:1.7;font-weight:400;color:var(--screen-muted);margin-top:3px}.screen-score bdi,.rank,.screen-stats strong{font-family:Tahoma,Arial,sans-serif;font-variant-numeric:tabular-nums}
.screen-card>small{font-size:clamp(12px,1vw,17px);line-height:1.7;color:var(--screen-muted)}
.screen-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--screen-accent);margin:0 0 6px}.screen-avatar.fallback{display:grid;place-items:center;font-size:30px;background:#ffffff0a;color:var(--screen-accent)}
.badge-grid .screen-card{min-height:0;padding:18px}.screen-badge{width:clamp(70px,28cqh,160px);height:clamp(70px,28cqh,160px);object-fit:contain;flex-shrink:0}.screen-badge.custom-badge{width:clamp(90px,34cqh,190px);height:clamp(90px,34cqh,190px)}.badge-caption{display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--badge-title-lines,1)*1.5em);flex-shrink:0;color:var(--screen-accent);font-size:var(--badge-title-size,clamp(18px,7cqh,30px));font-weight:700;line-height:1.5;margin:8px 0 2px}.badge-grid .screen-card h2{font-size:var(--name-size,clamp(20px,8cqh,36px));margin:4px 0}.badge-grid .screen-avatar{width:42px;height:42px;font-size:22px;margin:8px 0 0}.badge-period{margin-top:8px}
.screen-empty{width:min(100%,900px);padding:clamp(24px,3.5vh,42px) 30px;text-align:center;background:linear-gradient(135deg,#ffffff08,#ffffff02);border:1px solid var(--screen-line);border-radius:28px;margin:auto;box-shadow:0 18px 60px #00000008}
.empty-emblem{width:clamp(76px,10vh,118px);height:clamp(76px,10vh,118px);display:grid;place-items:center;margin:0 auto 14px;border:1px solid var(--screen-line);border-radius:50%;background:#ffffff06;color:var(--screen-accent)}.empty-emblem svg{width:72%;height:72%;fill:currentColor}.empty-emblem .laurel{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.empty-kicker{font-size:clamp(14px,1.2vw,20px);color:var(--screen-muted)}.screen-empty h2{font-size:clamp(28px,3vw,48px);line-height:1.5;color:var(--screen-text);margin:8px 0}.screen-empty p{font-size:clamp(16px,1.45vw,24px);line-height:1.7;max-width:690px;margin:0 auto;color:var(--screen-muted)}.empty-status{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:7px 15px;border-radius:30px;background:#ffffff06;border:1px solid var(--screen-line);font-size:clamp(12px,1vw,17px);color:var(--screen-muted)}.empty-status i{width:6px;height:6px;border-radius:50%;background:var(--screen-accent)}
.screen-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;border-top:1px solid var(--screen-line);height:56px;padding:0;color:var(--screen-muted);font-size:clamp(13px,1.1vw,19px)}.screen-motto{display:flex;align-items:center;height:40px;font-size:clamp(17px,1.35vw,25px);line-height:1.5}

.screen-pagination{display:flex;align-items:center;justify-content:center;min-width:0}.section-tabs{display:flex;align-items:stretch;justify-content:safe center;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none}.section-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;border-radius:14px;padding:2px 9px;background:#ffffff03}.section-tab.active{background:#ffffff0b}.section-title{border:0;border-radius:10px;background:transparent;color:var(--screen-muted);font-family:var(--font);font-size:clamp(11px,.9vw,16px);font-weight:400;min-height:22px;padding:0 4px;box-shadow:none;white-space:nowrap}.section-tab.active .section-title{color:var(--screen-accent);font-weight:700}.section-title:focus-visible,.page-dots button:focus-visible{outline:2px solid var(--screen-accent);outline-offset:-2px}
.page-dots{display:flex;justify-content:center;gap:2px;direction:rtl;align-items:center;height:16px;margin:0;flex-shrink:0}.page-dots button{display:grid;place-items:center;min-height:16px;width:14px;border:0;background:transparent;border-radius:8px;padding:0;box-shadow:none}.page-dots i{display:block;width:4px;height:4px;border-radius:10px;background:var(--screen-muted);opacity:.35}.page-dots button.active{width:24px}.page-dots button.active i{width:18px;background:var(--screen-accent);opacity:1}
.screen-playback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.screen-controls{display:flex;justify-content:center;align-items:center;gap:7px;flex-shrink:0}.screen-controls button,.screen-fullscreen{display:grid;place-items:center;width:40px;height:40px;min-height:40px;border:1px solid var(--screen-line);border-radius:9px;background:#ffffff06;color:var(--screen-muted);padding:7px;box-shadow:none}.screen-controls svg,.screen-fullscreen svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.screen-controls button:hover,.screen-controls button:focus-visible,.screen-fullscreen:hover,.screen-fullscreen:focus-visible{background:var(--screen-card);color:var(--screen-text)}.screen-controls button:disabled{opacity:.3;cursor:default}.screen-controls #pause{background:#ffffff0d;color:var(--screen-accent)}.screen-footer-meta{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:nowrap}.screen-updated{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:40px;font-size:clamp(11px,.85vw,15px);line-height:1.35;color:var(--screen-muted);white-space:nowrap}.screen-updated bdi{font-family:Tahoma,Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:1.1em;direction:ltr}.screen-footer .screen-fullscreen{position:static;flex-shrink:0;font-size:inherit;width:40px;height:40px;min-height:40px;padding:8px;background:transparent;box-shadow:none}.screen-footer .screen-fullscreen svg{width:22px;height:22px}
.message-slide{max-width:1100px;text-align:center;margin:auto}.message-slide h2{font-size:clamp(30px,4vw,64px);line-height:1.65;color:var(--screen-text);margin:0}
.screen-stats{height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1380px;width:100%;margin:0 auto}.screen-stats article{display:flex;flex-direction:column;justify-content:center;background:var(--screen-card);border:1px solid var(--screen-line);border-radius:22px;text-align:center;padding:45px 18px}.screen-stats strong{display:block;font-size:clamp(50px,6.5vw,110px);line-height:1.4;color:var(--screen-accent)}.screen-stats span{font-size:clamp(18px,1.8vw,30px);color:var(--screen-muted)}
.screen-error{grid-row:1/-1;margin:auto;text-align:center;padding:30px}.screen-error h1{color:var(--screen-accent)}.screen-error p{color:var(--screen-muted)}
.display-body[data-direction=previous]{--slide-entry:-16px}.display-body[data-direction=next]{--slide-entry:16px}[data-transition=fade] .slide-content{animation:softFade .65s ease-out}[data-transition=slide] .slide-content{animation:softSlide .65s ease-out}@keyframes softFade{from{opacity:0}to{opacity:1}}@keyframes softSlide{from{opacity:0;transform:translateX(var(--slide-entry,16px))}to{opacity:1;transform:translateX(0)}}
@media(max-width:1100px){.screen-header{gap:14px;grid-template-columns:1fr 1.2fr 1fr}.screen-identity{gap:10px}.screen-school-name{font-size:20px}.screen-heading{--heading-size:28px}.screen-date{font-size:16px;padding:10px 12px}.display-title{font-size:12px}}
@media(min-width:601px) and (max-width:900px){.screen-header{grid-template-columns:1.2fr 1.1fr 1fr;gap:12px}.screen-brand .display-wordmark{width:94px;height:90px}.screen-brand .school-display-logo{width:90px;height:90px}.screen-school-name{font-size:18px}.screen-date{font-size:14px;padding:10px}.screen-date-row{gap:6px;grid-template-columns:18px minmax(0,1fr)}.screen-heading{--heading-size:24px}}
@media(max-height:760px){.screen-header{padding:6px 0 10px}.screen-heading{--heading-size:clamp(22px,2.4vw,34px);--heading-lines:2.7}.screen-heading h1{line-height:1.35}.screen-identity{--identity-height:clamp(86px,16vh,120px)}.screen-date{font-size:clamp(16px,1.1vw,20px);line-height:1.5}.screen-empty{padding:20px}.screen-empty h2{font-size:30px}.empty-emblem{width:66px;height:66px}.screen-empty p{font-size:17px}.empty-status{margin-top:12px}}
@media(max-width:600px){#screen{padding:8px 14px;min-height:640px}.screen-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:6px 12px;padding:0 0 10px}.screen-identity{gap:7px;--identity-height:80px}.screen-brand .display-wordmark{width:92px}.screen-school-name{font-size:16px;line-height:1.4}.display-title{font-size:10px;line-height:1.4}.screen-heading{grid-column:1/-1;grid-row:2}.screen-heading{--heading-size:21px;--heading-lines:2.7}.screen-heading h1{margin:0;line-height:1.35}.screen-cycle{font-size:10px}.screen-period{gap:4px}.screen-updated{font-size:9px;line-height:1.3}.screen-date{font-size:13px;line-height:1.5;padding:8px 10px;border-radius:11px}.screen-date-row{grid-template-columns:16px minmax(0,1fr);gap:4px;margin:3px 0}.screen-date-value{gap:3px}.screen-date-calendar{gap:2px}.date-divider{display:none}.screen-grid{gap:12px}.screen-card{padding:16px}.screen-card h2{font-size:var(--name-size,clamp(23px,8cqh,32px))}.screen-score{font-size:var(--score-size,clamp(42px,18cqh,76px))}.screen-empty{padding:18px 14px;border-radius:20px}.screen-empty h2{font-size:25px}.screen-empty p{font-size:15px}.empty-emblem{width:60px;height:60px}.empty-kicker{font-size:12px}.empty-status{font-size:10px;padding:5px 8px}.screen-footer{gap:6px;font-size:10px}.section-tabs{justify-content:flex-start}.section-tab{padding:2px 6px}.section-title{font-size:10px}.screen-motto{max-width:120px;font-size:12px;line-height:1.5}.screen-controls{gap:3px}.screen-controls button{width:34px;height:40px;min-height:40px;padding:6px}.screen-footer-meta{gap:4px}.screen-stats{grid-template-columns:1fr;gap:10px}.screen-stats article{flex-direction:row;align-items:center;justify-content:space-around;padding:12px}.screen-stats strong{font-size:38px}.screen-stats span{font-size:18px}}
@media(max-height:639px) and (max-width:600px), (max-height:519px){.display-body{overflow:auto}#screen{height:640px;min-height:100dvh}}
@media(prefers-reduced-motion:reduce){[data-transition] .slide-content{animation:none!important}}

.card-type{position:absolute;inset-inline-end:16px;top:16px;font-size:14px;color:var(--screen-muted)}.class-grid .screen-card h2{padding-inline:24px}
.place-1 .rank{background:#efd08a;border-color:#efd08a;color:#173f32}.place-2 .rank{background:#d4e0e5;border-color:#d4e0e5;color:#243e49}.place-3 .rank{background:#dfb18b;border-color:#dfb18b;color:#51341e}



.screen-heading .intro-emblem{font-size:clamp(48px,6vw,84px);line-height:1;color:var(--screen-accent)}
.section-navigation{position:relative;display:flex;min-width:0;max-width:100%;padding-bottom:5px}
.rotation-progress{position:absolute;inset-inline:0;height:3px;overflow:hidden;pointer-events:none;border-radius:3px;z-index:1;bottom:0;background:var(--screen-line)}
.rotation-progress i{display:block;width:100%;height:100%;background:var(--screen-accent);opacity:.85;transform-origin:right;animation:rotationProgress linear both}
@keyframes rotationProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.rotation-progress{display:none}}