/* 練習タイマー：動画と同じ見た目（青緑の画面に円） */
.stage{margin-top:8px!important;--t-bg:#4f7c82;--t-ring:#a9c6c9;--t-ball:#dbe7e8;--t-ink:#2f5357;
  position:relative;background:var(--t-bg);border-radius:18px;padding:56px 16px 28px;margin:20px 0;
  display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff;overflow:hidden}
.stage .brand{position:absolute;left:18px;top:14px;font-size:.85rem;color:var(--t-ball);letter-spacing:.02em}
.stage .time{position:absolute;right:18px;top:14px;font-size:.95rem;color:var(--t-ball);font-variant-numeric:tabular-nums}
.ring{position:relative;width:min(78vw,360px);aspect-ratio:1;display:grid;place-items:center}
.ring .base{position:absolute;inset:0;border-radius:50%;border:2px solid var(--t-ring)}
.ring .ball{position:absolute;left:6%;top:6%;width:88%;height:88%;transform-origin:50% 50%;border-radius:50%;background:var(--t-ball);transform:scale(.47);will-change:transform}
.ring .sign{position:relative;display:flex;align-items:center;justify-content:center;line-height:0;color:var(--t-ink)}
.ring .sign svg{width:54px;height:54px}
.ring .count{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;min-height:1em}
.cue{min-height:3.4em;text-align:center;color:#fff;max-width:30em;font-size:1.02rem}

/* 時間の選択：大きな数字＋スライダー＋押せる目盛り */
.picker{max-width:440px;margin:6px auto 0;text-align:center}
.picker .val{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:700}
.picker .val svg{width:30px;height:30px}
.picker .val b{font-size:2.4rem;font-variant-numeric:tabular-nums;line-height:1}
.picker .val small{font-size:1rem;font-weight:500;color:var(--sub)}
.picker input[type=range]{width:100%;margin:14px 0 4px;accent-color:var(--accent);height:28px;cursor:pointer}
.picker .ticks{display:flex;justify-content:space-between}
.picker .ticks button{background:transparent;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:4px 0;width:52px;font-size:.9rem}
.picker .ticks button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.picker input:disabled,.picker .ticks button:disabled{opacity:.45;cursor:not-allowed}

.controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.controls button{background:#fff;color:#2f5357;border-color:#fff}
.controls button.ghost{background:transparent;color:#fff;border-color:#dbe7e8}
.stage .sound{font-size:.85rem;color:var(--t-ball)}

/* 全画面（録画用） */
body.rec header,body.rec footer,body.rec .hide-rec{display:none}
body.rec main{max-width:none;padding:0}
body.rec .stage{min-height:100vh;margin:0;border-radius:0;justify-content:center}
body.rec .ring{width:min(66vh,70vw)}
body.rec .ring .sign svg{width:84px;height:84px}
body.rec .ring .count{font-size:2.6rem}
body.rec .cue{font-size:1.4rem}
select.lang{margin-left:14px;font:inherit;font-size:.9rem;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:2px 6px}

/* 音の選択 */
.stage .sound{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.stage .sound button{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--t-ball);border:1px solid rgba(219,231,232,.5);padding:5px 14px;font-size:.88rem}
.stage .sound button svg{width:18px;height:18px}
.stage .sound button[aria-pressed=true]{background:var(--t-ball);color:var(--t-ink);border-color:var(--t-ball)}

/* ダークモード：タイマー画面も暗い青緑に */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage{--t-bg:#1e3134;--t-ring:#4d7176;--t-ball:#9cc2c6;--t-ink:#132225}}
:root[data-theme="dark"] .stage{--t-bg:#1e3134;--t-ring:#4d7176;--t-ball:#9cc2c6;--t-ink:#132225}

/* 吸う・吐くの配分 */
.picker .ratio{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.picker .ratio .rl{font-size:.9rem;color:var(--sub)}
.picker .ratio button{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:4px 14px;font-variant-numeric:tabular-nums}
.picker .ratio button[aria-pressed=true]{background:var(--accent);color:#fff}
.picker .ratio button:disabled{opacity:.45;cursor:not-allowed}
.picker .ratio-hint{margin:6px 0 0}

/* テンポ */
.picker .tempo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:16px;text-align:left}
.picker .tempo label{font-size:.9rem;color:var(--sub)}
.picker .tempo input{width:100%;accent-color:var(--accent)}
.picker .tempo .tv{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9rem;white-space:nowrap}
.picker .tempo .tv b{font-size:1.2rem}
.picker .tempo .note{grid-column:1/-1;text-align:center;margin:0}
.picker .tempo input:disabled{opacity:.45}

/* 練習中：呼吸の画面だけを1画面に収める */
body.running main>h1,body.running main>p,body.running .picker,body.running .card,body.running footer{display:none}
body.running .stage{margin-top:8px;min-height:calc(100svh - 80px);justify-content:center;padding-top:44px}
.ring{width:min(78vw,360px,48svh)}
body.running .ring{width:min(84vw,420px,58svh)}

/* 円の中の文字（タイポグラフィ） */
.ring .sign #icon{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(1.4rem,6vw,2rem);letter-spacing:.06em;text-transform:lowercase;line-height:1;white-space:nowrap;color:var(--t-ink)}
body.rec .ring .sign #icon,body.running .ring .sign #icon{font-size:clamp(1.6rem,7vw,2.6rem)}

/* 円の中には何も表示しない（読み上げ用のラベルだけ残す） */
.ring .sign #icon{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 呼吸のペース（言葉で選ぶ） */
.picker .tempo{display:block;text-align:center;margin-top:22px}
.picker .tempo .tl{display:block;font-size:.85rem;color:var(--sub)}
.picker .tempo .pval{font-size:1.5rem;font-weight:700;color:var(--accent);margin:2px 0 4px}
.picker .ticks.pace button{width:auto;padding:4px 10px;font-size:.82rem}

/* 時間・テンポの選択を緑の画面の中に */
.stage .picker{width:100%;max-width:420px;margin:0 auto;color:var(--t-ball)}
.stage .picker .val,.stage .picker .tempo .pval{color:#fff}
.stage .picker .val small,.stage .picker .tempo .tl{color:var(--t-ball)}
.stage .picker input[type=range]{accent-color:var(--t-ball)}
.stage .picker .ticks button{color:var(--t-ball);border-color:rgba(219,231,232,.45)}
.stage .picker .ticks button[aria-pressed=true]{background:var(--t-ball);color:var(--t-ink);border-color:var(--t-ball)}
.stage .picker .tempo{margin-top:18px}

/* スタート・ストップを大きく */
.controls{width:100%;max-width:420px}
.controls #start,.controls #stop{flex:1 1 0;min-height:60px;font-size:1.25rem;font-weight:700;padding:12px 20px}
.controls #rec{flex-basis:100%;font-size:.9rem;padding:6px 16px}
body.running .controls{display:flex!important}
body.running .controls #start,body.running .controls #rec{display:none}

/* はじめる／やめる を1つの大きなボタンに */
.controls #start{flex:1 1 100%;min-height:64px;font-size:1.3rem}
.controls #start.on{background:transparent;color:#fff;border:2px solid var(--t-ball)}
body.running .controls #start{display:inline-flex!important;align-items:center;justify-content:center}
.ring{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* 小さい画面でも始める前の全体が1画面に収まるように（iPhone SE 375x667 を基準） */
.stage .picker .val,.stage #minRange,.stage .picker .tempo .pval,.stage #tempo{display:none}
.stage .picker .tempo{margin-top:12px}
.stage .picker .tempo .tl{margin-bottom:6px}
.stage .picker .ticks{gap:6px}
.stage .picker .ticks button{padding:6px 0;min-height:36px}
.stage{padding:40px 14px 18px;gap:12px}
.ring{width:clamp(170px,calc(100svh - 500px),360px)}
.cue{min-height:2.6em;font-size:.95rem}
.controls #start{min-height:56px}
header{flex-wrap:nowrap;padding-top:10px;padding-bottom:4px}
header .logo{font-size:.95rem;white-space:nowrap}
header nav{display:flex;align-items:center;gap:10px;white-space:nowrap}
header nav a{margin-left:0;font-size:.85rem}
select.lang{margin-left:0;font-size:.8rem;max-width:92px}
.theme{margin-left:0}

/* 並び：円 → 案内 → スタート → 設定（時間・テンポ・音）を下に */
.stage .ring{order:1}
.stage .cue{order:2}
.stage .controls{order:3}
.stage .picker{order:4;border-top:1px solid rgba(219,231,232,.18);padding-top:12px}
.stage .sound{order:5}
.stage .picker .ticks.pace button{width:auto;flex:1 1 0;padding:6px 4px;font-size:.8rem;white-space:nowrap}
.stage .picker .ticks.pace{gap:6px}
.stage .picker .tl.dur{display:block;font-size:.85rem;color:var(--t-ball);margin-bottom:6px}

/* 練習中に少しずつ暗くする幕（操作はそのまま下に届く） */
.dim{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:50;transition:opacity .4s linear}
body.running header{display:none}
body.running .stage{min-height:100svh;margin:0!important;border-radius:0}
body.running main{padding:0;max-width:none}

/* 終わったら円の中に End */
.ring.ended .sign #icon{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(1.8rem,8vw,2.6rem);letter-spacing:.12em!important;padding-left:.12em!important;color:var(--t-ink)}