* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #000000, #1a1a1a, #333333);
    color: white;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* 装飾用時計セクション */
.decorative-time-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #444;
    margin-bottom: 40px;
    gap: 20px;
}

.decorative-time-label {
    font-size: clamp(1rem, 4vw, 4rem);
    color: #888;
    font-weight: 500;
}

.decorative-time {
    font-size: clamp(1rem, 10vw, 8rem);
    font-weight: bold;
    text-align: center;
    color: #00aaff;
    text-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

/* タイマーセクション */
.timer-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.timer-label {
    font-size: clamp(1rem, 4vw, 4rem);
    color: #888;
    font-weight: 500;
}

.timer-display {
    font-size: clamp(1rem, 8vw, 7rem);
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    padding: 40px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: transparent;
    /* 背景なし */
    color: white;
}

.timer-display.countdown {
    color: #ffaa44;
}

.timer-display.timer-running {
    color: #44ff44;
}

.timer-display.timer-finished {
    color: #888888;
}

/* 緊急時の赤点滅 */
.timer-display.urgent-blink {
    color: #ff0000 !important;
    animation: urgent-blink 0.5s infinite;
}

@keyframes urgent-blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .decorative-time-label,
    .timer-label {
        font-size: clamp(0.8rem, 2.5vw, 1.5rem);
    }

    .decorative-time {
        font-size: clamp(1.5rem, 6vw, 4rem);
    }

    .timer-display {
        font-size: clamp(1rem, 4vw, 2.5rem);
        padding: 20px;
        min-height: 150px;
    }
}

@media (max-width: 480px) {
    .container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        justify-content: center;
    }

    .decorative-time-section,
    .timer-section {
        flex: none;
        margin: 20px 0;
    }

    .decorative-time-section {
        border-bottom: none;
        margin-bottom: 10px;
        gap: 10px;
    }

    .timer-section {
        gap: 10px;
    }
}