.school-clock.clock-v22.clock-mascot{display:grid;grid-template-columns:minmax(0,1fr) clamp(88px,25vw,128px);align-items:center;gap:8px;position:relative;overflow:hidden;padding:18px;min-height:166px}
.clock-mascot .clock-copy{min-width:0;position:relative;z-index:1}
.clock-mascot .clock-label{display:block;font-size:13px;color:var(--ink2);font-weight:500;line-height:1.4}
.school-clock.clock-v22.clock-mascot .clock-duration{display:block;font-size:clamp(21px,5.8vw,28px);line-height:1.15;margin:9px 0;overflow-wrap:normal}
.clock-mascot .clock-mascot-art{display:block;width:100%;height:auto;max-height:168px;object-fit:contain;filter:none;pointer-events:none;user-select:none}
.clock-mascot .clock-timezone{margin-top:10px;font-size:10px;line-height:1.35}
.clock-mascot .clock-caption{font-size:12px;line-height:1.45}
.mascot-event-change .clock-mascot-art{animation:mascot-arrive .35s ease-out both}
@keyframes mascot-arrive{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:900px){.school-clock.clock-v22.clock-mascot{grid-template-columns:minmax(0,1fr) minmax(92px,30%);gap:12px;padding:20px}.school-clock.clock-v22.clock-mascot .clock-duration{font-size:25px}.clock-mascot .clock-mascot-art{max-height:180px}}
@media(max-width:359px){.school-clock.clock-v22.clock-mascot{padding:14px;grid-template-columns:minmax(0,1fr) 78px;gap:6px}.school-clock.clock-v22.clock-mascot .clock-duration{font-size:21px}}
@media(prefers-reduced-motion:reduce){.mascot-event-change .clock-mascot-art{animation:none}}