/* Reuse the original layout, font, and images. Keep additions and targeted
   alignment corrections here instead of replacing the upstream styles. */
/* Keep the original timer on its own, without the surrounding site chrome. */
#logo, #navigationBar, #topMenu, #settingUi,
#titleBarUi .settingToggle { display: none !important; }
#main {
    width: 100%;
    left: 0;
    margin-left: 0;
    justify-content: center;
}

/* Each two-digit run is about 149px wide and 192px tall in MaybeCuteFont.
   Center both highlights on their original 170px text columns. An explicit
   line height keeps the glyph baseline identical across platforms. */
#timingUi .clock * { line-height: 240px; }
#timingUi .background .yellow,
#timingUi .background .gray {
    width: 160px;
    height: 200px;
    top: 60px;
}
#timingUi .background .yellow { left: 30px; }
#timingUi .background .gray { left: 204px; }

#timerApp #clockModes {
    position: absolute;
    left: 13px;
    top: 8px;
    width: 174px;
    height: 25px;
    z-index: 3;
}
#clockModes button {
    position: absolute;
    top: 0;
    height: 24px;
    line-height: 24px;
    color: #656565;
    cursor: pointer;
    opacity: .55;
}
/* The upstream font intentionally has empty letter glyphs. Reuse the exact
   handwritten "Time" and "r" from upstream label images using CSS clipping. */
#clockModes .timeLabel {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 24px;
    background-image: url('../english/asset/image/text/english/TimeIsUp.png');
    background-size: 92.25px 26.7px;
    background-position: 0 0;
    pointer-events: none;
}
#clockModes .letterR {
    position: absolute;
    left: 35px;
    top: 0;
    width: 6.5px;
    height: 24px;
    background-image: url('../english/asset/image/text/english/Start.png');
    background-size: 57.46px 26.52px;
    background-position: -35.36px -2.5px;
    pointer-events: none;
}
#clockModes .timerMode { left: 0; width: 46px; }
#clockModes .timeMode { left: 57px; width: 43px; }
#clockModes button[aria-selected="true"] { opacity: 1; }
#clockModes button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    background: #ffcd2f;
    border-radius: 50%;
    transform: rotate(-3deg);
}
#clockModes .danceButton {
    left: 114px;
    width: 27px;
    font-family: sans-serif;
    font-size: 18px;
    opacity: .65;
}
#clockModes button:hover { opacity: 1; }
#clockModes button:focus-visible, #countdownUi .cat:focus-visible {
    outline: 2px dashed #656565;
    outline-offset: 1px;
}
/* A second text node shares the ORIGINAL .timeText rule, including the font,
   exact 270px type size, line height, width, and position. */
#countdownUi .time .wallClockText { display: none; }
#timerApp[data-mode="time"] #timingUi { display: none !important; }
#timerApp[data-mode="time"] #countdownUi { display: block !important; }
#timerApp[data-mode="time"] #countdownUi .time > .timeText { display: none; }
#timerApp[data-mode="time"] #countdownUi .time > .wallClockText { display: block; }
#timerApp[data-mode="time"] #countdownUi .paused,
#timerApp[data-mode="time"] #countdownUi .timeIsUp,
#timerApp[data-mode="time"] #countdownUi .rope { display: none !important; }
#timerApp[data-mode="time"] #countdownUi .cat { cursor: pointer; }
#countdownUi .cat { transform-origin: 50% 90%; }
#countdownUi.catDance .yellowCat .cat { animation: yellowKittenDance .65s ease-in-out 6; }
#countdownUi.catDance .blackCat .cat { animation: blackKittenDance .65s ease-in-out 6; }
#countdownUi.catDance .cat .mouth { visibility: visible; }
#countdownUi .danceNote {
    position: absolute;
    color: #656565;
    font-family: sans-serif;
    font-size: 23px;
    top: 245px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
#countdownUi .danceNote.first { left: 29px; }
#countdownUi .danceNote.second { left: 345px; color: #e5b400; }
#countdownUi.catDance .danceNote { animation: kittenNote 1.3s ease-out 3; }
#countdownUi.catDance .danceNote.second { animation-delay: .2s; }
@keyframes yellowKittenDance {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    25% { transform: translate(-3px,-23px) rotate(-5deg); }
    50% { transform: translate(1px,-5px) rotate(3deg); }
    75% { transform: translate(4px,-20px) rotate(5deg); }
}
@keyframes blackKittenDance {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    25% { transform: translate(3px,-8px) rotate(5deg); }
    50% { transform: translate(-3px,-24px) rotate(-4deg); }
    75% { transform: translate(-4px,-4px) rotate(-3deg); }
}
@keyframes kittenNote {
    0% { transform: translateY(0) rotate(-12deg); opacity: 0; }
    25%,65% { opacity: .85; }
    100% { transform: translateY(-35px) rotate(12deg); opacity: 0; }
}
@media(prefers-reduced-motion: reduce) {
    #countdownUi.catDance .cat, #countdownUi.catDance .danceNote { animation: none; }
}