:root {
    --theme-color: #b94047;
    --bg-color: #050505;
    --text-color: #f3f3f3;
    --sub-text: rgba(255,255,255,0.32);
    --sub-text-strong: rgba(255,255,255,0.52);
    --border-color: rgba(255,255,255,0.10);
    --panel-bg: rgba(255,255,255,0.03);
    --shadow-color: rgba(0,0,0,0.28);
}

body.light-mode {
    --bg-color: #ebebeb;
    --text-color: #141414;
    --sub-text: rgba(0,0,0,0.30);
    --sub-text-strong: rgba(0,0,0,0.52);
    --border-color: rgba(0,0,0,0.11);
    --panel-bg: rgba(0,0,0,0.025);
    --shadow-color: rgba(0,0,0,0.10);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'M PLUS 1p', 'Barlow Condensed', sans-serif;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.8s ease, color 0.8s ease;
}

body { position: relative; }

button {
    border: none;
    background: none;
    color: var(--sub-text);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
button:hover { color: var(--text-color); }
button:active { transform: scale(0.88) !important; transition-duration: 0.08s !important; }

/* Springy press — larger buttons get subtler depth, small ones snappier */
.start-btn:active    { transform: scale(0.95) !important; }
.icon-btn:active     { transform: scale(0.90) !important; }
.step-btn:active     { transform: scale(0.82) !important; }
.tap-btn:active      { transform: scale(0.92) !important; }
.pill-btn:active     { transform: scale(0.86) !important; }
.color-dot:active    { transform: scale(0.82) !important; }
.nav-btn:active, .mode-toggle:active, .small-btn:active { transform: scale(0.88) !important; }
button:disabled { opacity: 0.3; pointer-events: none; }

#particleCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.ambient-glow {
    position: fixed;
    inset: -20%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 1.2s ease;
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--theme-color) 6%, transparent) 0%, transparent 18%),
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--theme-color) 3%, transparent) 20%, transparent 36%);
    filter: blur(26px);
    transition: background 1.2s ease, filter 0.8s ease;
}
body.running .ambient-glow,
body.paused .ambient-glow,
body.transitioning-in .ambient-glow { opacity: 1; }

/* ── TOP STATUS ── */
.top-left-status {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    left: 28px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}
.wake-indicator,
.top-status {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.80rem;
    letter-spacing: 0.18em;
    color: var(--sub-text);
}
.wake-indicator { opacity: 0; transition: opacity 0.35s ease; }
.wake-indicator.show { opacity: 1; }
.status-text.on, .top-status.on { color: var(--sub-text-strong); }

/* ── TOP RIGHT ── */
.top-right-controls {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 24px);
    right: 28px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    max-width: calc(100vw - 56px);
    flex-wrap: wrap;
}

/* Mode toggle — pill border */
.mode-toggle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    color: var(--sub-text);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 5px 13px;
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mode-toggle:hover { color: var(--text-color); border-color: var(--sub-text-strong); }

/* ── COLOR SELECTOR — collapsed, expands left on tap ── */
.color-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    position: relative;
}
/* Non-active dots: hidden by default, slide in when .expanded */
.color-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px) scale(0.7);
    transition: transform 0.28s cubic-bezier(0.34, 1.46, 0.64, 1),
                opacity 0.22s ease,
                box-shadow 0.18s ease;
    position: absolute;
    right: 0;
}
/* Active dot always visible, not absolute */
.color-dot.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1.22);
    position: relative;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.55);
}
.light-mode .color-dot.active { box-shadow: 0 0 0 2px rgba(0,0,0,0.32); }

/* Expanded state */
.color-selector.expanded .color-dot {
    opacity: 0.88;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    position: relative;
}
.color-selector.expanded .color-dot.active {
    transform: scale(1.22);
}
.color-dot:hover { opacity: 1 !important; transform: scale(1.18) !important; }
.color-dot.active:hover { transform: scale(1.28) !important; }

/* ── MAIN CONTAINER ── */
.container {
    position: relative;
    z-index: 10;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 96px) 24px calc(env(safe-area-inset-bottom, 0px) + 80px);
}

.metronome-wrap {
    width: min(860px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── BRAND ── */
.brand {
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.40em;
    font-size: 0.76rem;
    color: var(--sub-text);
    margin-bottom: 18px;
    transition: opacity 0.5s ease;
}
body.running .brand,
body.paused .brand,
body.transitioning-in .brand { opacity: 0.5; }

/* ── BPM DISPLAY ── */
.bpm-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Borderless step buttons */
.step-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    background: none;
    border: none;
    color: var(--sub-text);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-btn:hover { color: var(--text-color); transform: scale(1.12); }

.bpm-display {
    min-width: 200px;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(5.5rem, 16vw, 9.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    transition: color 0.35s ease, text-shadow 0.45s ease;
}
body.running .bpm-display,
body.paused .bpm-display,
body.transitioning-in .bpm-display {
    color: var(--theme-color);
    text-shadow: 0 0 40px color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.bpm-label {
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.28em;
    color: var(--sub-text);
    font-size: 0.80rem;
    margin-top: -2px;
    text-align: center;
}
.bar-info {
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.18em;
    color: var(--sub-text);
    font-size: 0.80rem;
    margin-top: 4px;
    min-height: 1.1rem;
    text-align: center;
}

/* ── ACTION STACK — BEGIN and run-controls share the same space ── */
.action-stack {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    margin-top: 18px;
    position: relative;
}
/* start-btn and run-controls overlap in the same grid row */
.action-stack .start-btn,
.action-stack .run-controls {
    grid-row: 1;
    grid-column: 1;
    margin-top: 0;
}
/* count-in sits below, in row 2 */
.action-stack .countin-inline {
    grid-row: 2;
    grid-column: 1;
    margin-top: 16px;
}

/* ── START BUTTON — inline, directly below BPM ── */
.start-btn {
    min-width: 190px;
    padding: 10px 40px;
    border-radius: 999px;
    background: var(--theme-color);
    border: none;
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 0.40em;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-color) 24%, transparent);
    z-index: 2;
}
.start-btn:hover { color: #fff; opacity: 0.90; transform: translateY(-2px); }

/* ── BEAT INDICATOR ── */
.beat-indicator {
    display: flex;
    gap: 11px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 20px;
    margin-top: 16px;
}
.beat-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    transition: transform 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}
.light-mode .beat-dot { background: rgba(0,0,0,0.10); }
.beat-dot.accent { width: 15px; height: 15px; }
.beat-dot.active {
    transform: scale(1.35);
    background: var(--theme-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--theme-color) 45%, transparent);
}

/* ── TAP LINE ── */
.tap-line {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Plain text tap / offset buttons */
.tap-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.22em;
    color: var(--sub-text-strong);
    background: none;
    border: none;
    padding: 6px 0;
}
.tap-btn:hover { color: var(--text-color); }

.small-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--sub-text);
    background: none;
    border: none;
    padding: 6px 4px;
}
.small-btn:hover { color: var(--text-color); }

/* ── BPM SLIDER ── */
.slider-wrap {
    width: min(560px, 100%);
    margin-top: 12px;
}
.bpm-slider {
    width: 100%;
    accent-color: var(--theme-color);
    cursor: pointer;
    outline: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--sub-text);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

/* ── CONTROLS GRID — borderless cards, just grid lines ── */
.controls-grid {
    width: min(560px, 100%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 8px;
}

.control-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 22px;
    background: none;
    border: none;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Right column: no right border */
.control-block:nth-child(even) {
    border-right: none;
}
/* Last row (2 items): no bottom border */
.control-block:nth-last-child(-n+2) {
    border-bottom: none;
}

/* ── COUNT-IN INLINE (below BEGIN) ── */
.countin-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    justify-content: center;
}
.countin-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.70rem;
    letter-spacing: 0.28em;
    color: var(--sub-text);
    margin-right: 6px;
}

.control-label {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--sub-text);
    letter-spacing: 0.30em;
    font-size: 0.70rem;
}

.pill-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.guide-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--sub-text);
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.14em;
    font-size: 0.76rem;
    opacity: 0.7;
}

/* ── GUIDE FOOTER ── */
.guide-footer {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--theme-color) 55%, var(--sub-text-strong));
    
    white-space: nowrap;
    pointer-events: none;
}
.guide-sep {
    
}

/* Pill buttons: no border — underline active state */
.pill-btn {
    border-radius: 4px;
    padding: 6px 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.84rem;
    letter-spacing: 0.14em;
    background: none;
    border: none;
    color: var(--sub-text);
}
.pill-btn:hover { color: var(--text-color); }
.pill-btn.active {
    color: var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
}

/* ── RUN CONTROLS — inline, not fixed ── */
.run-controls {
    display: flex;
    gap: 16px;
    margin-top: 0;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.97);
    transition: opacity 0.4s ease 0.06s, transform 0.4s cubic-bezier(.22,.61,.36,1) 0.06s;
    /* Remove old absolute positioning */
    position: static;
    left: auto;
    bottom: auto;
}
body.running .run-controls,
body.paused .run-controls,
body.transitioning-in .run-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.icon-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.icon-btn:hover {
    border-color: var(--sub-text-strong);
    transform: scale(1.07);
    background: rgba(255,255,255,0.06);
}
.icon-btn .material-icons-round { font-size: 1.5rem; }

/* ── HIDE ON RUN TRANSITIONS ── */
/* ── HIDE / SHOW TRANSITIONS — staggered re-entry ── */

/* Base hidden state (while running/paused) */
.tap-line,
.slider-wrap,
.controls-grid,
.hide-on-run,
.start-btn {
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,.61,.36,1),
                filter 0.4s ease, visibility 0s linear 0.5s;
}

body.running .hide-on-run,
body.paused .hide-on-run,
body.transitioning-in .hide-on-run,
body.running #startBtn,
body.paused #startBtn,
body.transitioning-in #startBtn {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
    filter: blur(3px);
    visibility: hidden;
}
body.paused #startBtn,
body.paused .hide-on-run { visibility: hidden; }
body.transitioning-in #startBtn { transition-duration: 0.28s; }

/* Staggered re-entry: each element delays slightly more than the last */
/* 'ready' class is added on stop — elements fade back in sequentially */
body.ready #startBtn {
    transition-delay: 0s, 0s, 0s, 0s;
}
body.ready .tap-line {
    transition-delay: 0.06s, 0.06s, 0.06s, 0s;
}
body.ready .slider-wrap {
    transition-delay: 0.12s, 0.12s, 0.12s, 0s;
}
body.ready .controls-grid {
    transition-delay: 0.18s, 0.18s, 0.18s, 0s;
}

/* ── BOTTOM NAV ── */
.bottom-left-nav {
    position: fixed;
    left: 28px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    z-index: 100;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    max-width: calc(100vw - 56px);
}
.permanent-controls {
    position: fixed;
    right: 28px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    z-index: 100;
}
.nav-btn,
.permanent-controls button,
.status-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
}
.nav-btn.on { color: var(--sub-text-strong); }
.status-text { color: var(--sub-text); }

/* ── BEAT PULSE LINE ── */
@keyframes beatPulse {
    0%   { opacity: 1;    box-shadow: 0 0 18px color-mix(in srgb, var(--theme-color) 80%, transparent),
                                      0 0 40px color-mix(in srgb, var(--theme-color) 30%, transparent); }
    18%  { opacity: 0.75; box-shadow: 0 0 10px color-mix(in srgb, var(--theme-color) 45%, transparent); }
    100% { opacity: 0.14; box-shadow: 0 0 3px  color-mix(in srgb, var(--theme-color) 10%, transparent); }
}

.progress-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
}
.progress-track {
    position: absolute;
    inset: 0;
    background: var(--border-color);
}
.progress-bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--theme-color);
    opacity: 0.14;
    box-shadow: 0 0 3px color-mix(in srgb, var(--theme-color) 10%, transparent);
}
.progress-bar.beat-flash {
    animation: beatPulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .controls-grid { grid-template-columns: 1fr; }
    .control-block { border-right: none !important; }
    .control-block:nth-last-child(-n+2) { border-bottom: 1px solid var(--border-color) !important; }
    .control-block:last-child { border-bottom: none !important; }
}

@media (max-width: 600px) {
    .container {
        padding: calc(env(safe-area-inset-top, 0px) + 88px) 18px calc(env(safe-area-inset-bottom, 0px) + 80px);
        align-items: center;
        justify-content: flex-start;
    }
    .top-right-controls {
        top: calc(env(safe-area-inset-top, 0px) + 14px);
        right: 14px;
        left: 14px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-end;
    }
    .top-left-status {
        top: calc(env(safe-area-inset-top, 0px) + 14px);
        left: 14px;
    }
    .bpm-line { gap: 10px; }
    .step-btn { width: 36px; height: 36px; font-size: 1.3rem; }
    .bpm-display { min-width: 150px; font-size: clamp(4.5rem, 22vw, 7rem); }
    .controls-grid { margin-top: 6px; }
    .control-block { padding: 14px 16px; }
    .action-stack { margin-top: 14px; }
    .start-btn { min-width: 170px; padding: 9px 30px; }
    .run-controls { gap: 14px; }
    .icon-btn { width: 52px; height: 52px; }
    .icon-btn .material-icons-round { font-size: 1.35rem; }
    .bottom-left-nav {
        left: auto;
        right: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
    .permanent-controls { display: none; }
    .guide-footer { display: none; }
}

/* ── SLIDER TRACK: no browser border ── */
.bpm-slider::-webkit-slider-runnable-track {
    background: var(--border-color);
    height: 2px;
    border: none;
    border-radius: 999px;
}
.bpm-slider::-moz-range-track {
    background: var(--border-color);
    height: 2px;
    border: none;
    border-radius: 999px;
}
.bpm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-color);
    margin-top: -6px;
    border: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color) 40%, transparent);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bpm-slider::-webkit-slider-thumb:active {
    transform: scale(1.3);
}
.bpm-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-color);
    border: none;
    box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color) 40%, transparent);
}