:root {
    --main-width: min(90vw, 1600px);

    --progress-bottom: clamp(16px, 8vh, 96px);
    --progress-gap: clamp(3px, 0.6vw, 10px);
    --progress-cell-width: calc((var(--main-width) - var(--progress-gap) * 19) / 20);
    --progress-cell-height: clamp(
        calc(var(--progress-cell-width) * 0.5),
        12vh,
        calc(var(--progress-cell-width) * 2)
    );

    --reserved-bottom: calc(var(--progress-bottom) + var(--progress-cell-height) + 48px);

    --time-font-size: clamp(48px, min(16vw, 34vh), 280px);
    --colon-font-size: clamp(40px, min(12vw, 26vh), 220px);
    --time-min-width: clamp(40px, 13vw, 210px);

    --arrow-width: clamp(48px, min(20vw, 24vh), 320px);
    --arrow-height: clamp(18px, 5vh, 64px);
    --arrow-font-size: clamp(14px, 4vh, 40px);

    --round-button-size: clamp(40px, min(8vw, 18vh), 120px);
    --round-button-font-size: clamp(20px, min(4vw, 9vh), 56px);

    --title-top: clamp(8px, 3vh, 32px);
    --title-font-size: clamp(16px, 4vw, 56px);
    --title-height: clamp(
        calc(var(--title-font-size) * 1.35),
        9vh,
        calc(var(--title-font-size) * 1.9)
    );
    --title-bottom: calc(var(--title-top) + var(--title-height));
}

body {
    margin: 0;
    background: #f6f6f6;
    font-family:
        "BIZ UDPGothic",
        "Noto Sans JP",
        sans-serif;
    overflow-y: auto;
}

body.paused {
    background: #f5f0d6;
}

body.finished {
    background: #f3d6d6;
}

.timer-title-area {
    width: var(--main-width);
    position: absolute;
    left: 50%;
    top: var(--title-top);
    transform: translateX(-50%);
    z-index: 20;
}

.timer-title-input {
    width: 100%;
    height: var(--title-height);
    box-sizing: border-box;

    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.72);

    padding: 0 clamp(12px, 2vw, 24px);

    font-size: var(--title-font-size);
    font-weight: 500;
    line-height: 1;
    text-align: left;

    outline: none;
}

.timer-title-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

body.running .timer-title-input,
body.finished .timer-title-input {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: black;
}

.timer-screen {
    min-height: 280px;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
}

.time-adjust {
    width: var(--main-width);
    position: absolute;
    left: 50%;
    top: calc(
        var(--title-bottom) +
        (100vh - var(--reserved-bottom) - var(--title-bottom)) / 2
    );
    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;
    align-items: end;
}

.time-core {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--time-font-size);
}

.time-value {
    min-width: 1.25em;
    text-align: center;
    font-size: var(--time-font-size);
    font-family:
        "Inter",
        sans-serif;
    font-weight: 300;
    letter-spacing: -0.06em;
    line-height: 0.82;
}

.time-value,
.colon {
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.colon {
    align-self: center;
    margin-left: 0.07em;
    margin-right: 0.01em;
    padding-bottom: 0;
    font-size: var(--colon-font-size);
    font-weight: 300;
    line-height: 1;
    transform: translateY(-10%);
}

.arrow-btn {
    width: var(--arrow-width);
    height: var(--arrow-height);

    border: 2px solid #cfcfcf;
    border-radius: 999px;

    background: transparent;
    color: #333;
    
    font-size: var(--arrow-font-size);
    font-weight: 700;

    cursor: pointer;
    position: relative;
    z-index: 10;
    transform: translateX(4%);
}

.arrow-btn:active {
    transform: scale(0.96);
}

.arrow-btn[data-action="up"] {
    margin-bottom: 0.8em;
}

.arrow-btn[data-action="down"] {
    margin-top: 1.0em;
}

#reset-btn,
#start-btn {
    position: absolute;
    bottom: 0;

    transition: opacity 0.25s;
}

#reset-btn {
    left: 0;
}

#start-btn {
    right: 0;
}

#reset-btn::part(base),
#start-btn::part(base) {
    width: var(--round-button-size);
    height: var(--round-button-size);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid;
    font-size: var(--round-button-font-size);
}

#reset-btn::part(base) {
    background: transparent;
    border-color: #333;
    color: #333;
}

#start-btn::part(base) {
    background: #111;
    border-color: #111;
    color: white;
}

#start-btn.running::part(base),
#start-btn.finished::part(base) {
    background: #d9534f;
    border-color: #d9534f;
    color: white;
}

.timer-screen.controls-hidden #reset-btn,
.timer-screen.controls-hidden #start-btn {
    opacity: 0;
    pointer-events: none;
}

#reset-btn sl-icon,
#start-btn sl-icon {
    display: block;
    line-height: 1;
}

#reset-btn sl-icon {
    font-size: calc(var(--round-button-size) * 0.58);
    transform: translateY(1%);
}

#start-btn sl-icon {
    font-size: calc(var(--round-button-size) * 0.82);
}

#start-btn .start-icon-play-fill {
    transform: translate(6%, 1%);
}

#start-btn .start-icon-pause-fill {
    transform: translateY(1%);
}

#start-btn .start-icon-square-fill {
    font-size: calc(var(--round-button-size) * 0.45);
    transform: translateY(1%);
}

.progress-area {
    width: var(--main-width);
    position: absolute;
    left: 50%;
    bottom: var(--progress-bottom);
    transform: translateX(-50%);
}

.progress-text {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: var(--progress-gap);
}

.progress-cell {
    height: var(--progress-cell-height);
    border: 2px solid #c8c8c8;
    box-sizing: border-box;
}

.progress-cell.filled.setting {
    background: #d6d6d6;
    border-color: #d6d6d6;
}

.progress-cell.filled.green {
    background: #6aa84f;
    border-color: #6aa84f;
}

.progress-cell.filled.yellow {
    background: #e6c23a;
    border-color: #e6c23a;
}

.progress-cell.filled.red {
    background: #e06666;
    border-color: #e06666;
}

.hidden {
    display: none;
}

.arrow-hidden {
    visibility: hidden;
}

.time-adjust.compact {
    gap: 0;
}

.time-adjust.compact .time-value {
    min-width: 1.25em;
    letter-spacing: -0.06em;
}

.time-adjust.compact .colon {
    padding: 0;
    margin-left: 0.07em;
    margin-right: 0.01em;
}

.time-core.finished {
    animation: blink 1s steps(1) infinite;
}

.settings-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 80px 0 120px;
}

.settings-card {
    width: 80%;
    max-width: 900px;
}

.settings-title {
    margin-bottom: 24px;
    font-size: 28px;
    font-weight: bold;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

    100% {
        opacity: 1;
    }
}

@media (max-height: 520px) {
    .time-adjust {
        top: 42%;
    }

    .progress-area {
        bottom: clamp(32px, 7vh, 64px);
    }
}