/* ========== レイアウト・基本スタイル ========== */
/* 全体レイアウト、グリッド、基本要素 */

html {
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    /* スクロール時の背景色露出を防ぐ */
    overscroll-behavior: none;
}

body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Segoe UI', 'Hiragino Sans', 'Meiryo', sans-serif;
    /* iOS Safari のバウンススクロール対策 */
    overscroll-behavior: none;
    position: relative;
}

.wrap {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    place-items: center;
    gap: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}

/* 背景層（紙吹雪用） */
#confetti {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

h1 {
    color: var(--ring-fg);
    margin: 16px 0;
    font-size: clamp(1.3rem, 4vw, 2rem);
    z-index: 1;
}

.timer-shell {
    position: relative;
    z-index: 1;
    width: min(84vw, 400px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}