:root{color-scheme:dark;--bg:#000;--surface:#15171a;--surface-raised:#22252a;--line:#363a41;--text:#fff;--muted:#a6abb4;--rest:#f2cf55;--urgent:#f56367;--radius:12px;font-family:"Helvetica Neue",Arial,"Noto Sans JP",Meiryo,sans-serif;font-synthesis:none}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:block;src:url(../fonts/oswald-600-digits.woff2) format("woff2");unicode-range:U+30-3A}
/* ===== タイマー画面：上の行／数字／進み具合のバー／操作部と広告枠 =====
   数字は timer-layout.js が SVG で描き、枠いっぱいに拡大する。行の高さは操作部の表示・非表示で変わらない。 */
.timer-screen{--side:28px;--gap:16px;--top-h:44px;--phase-size:clamp(22px,3.4vh,40px);--bar-h:clamp(10px,1.8vh,18px);--ad-width:320px;--ad-height:50px;position:relative;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;row-gap:var(--gap);padding:max(12px,env(safe-area-inset-top)) max(var(--side),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(var(--side),env(safe-area-inset-left));user-select:none;-webkit-user-select:none;overflow:hidden}
/* FIGHT は左右の要素の幅に関係なく、いつも画面の中央。ラウンド数は同じ大きさで右上（待機中・終了後は設定の要約） */
.timer-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--top-h)}
.brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.04em;white-space:nowrap;margin:0;min-width:0}
.phase{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;white-space:nowrap}
.phase .pause-badge{position:absolute;right:100%;margin-right:12px}
.phase-label{font-size:var(--phase-size);font-weight:700;letter-spacing:.16em;padding-left:.16em;line-height:1}
.timer-top-right{margin-left:auto;display:flex;align-items:center;min-width:0}
.round-label{font-size:var(--phase-size);line-height:1;font-weight:700;letter-spacing:.08em;color:#c9cdd4;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-cell{position:relative;min-width:0;min-height:0;cursor:default}
.clock{position:absolute;inset:0;width:100%;height:100%;fill:#fff;stroke:none;overflow:visible;pointer-events:none}
.clock text{font-kerning:none}
.progress-track{position:relative;z-index:1;height:var(--bar-h);background:#25272b;border-radius:3px;overflow:hidden;transition:height .2s,margin .2s}
/* 実行中（操作部が隠れている間）は、空いた操作部の段までバーを下に伸ばす。行の高さと横幅は変えない */
.chrome-hidden .progress-track{height:var(--bar-run-h,var(--bar-h));margin-bottom:calc(var(--bar-h) - var(--bar-run-h,var(--bar-h)))}
.progress-fill{height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;will-change:transform}
.timer-bottom{display:flex;flex-direction:column;align-items:center;gap:var(--gap);min-width:0}
.control-dock{display:flex;justify-content:center;min-width:0;width:100%}
/* 広告を操作部の横（右端）に置く配置。操作部は全幅のまま、広告の分だけ右を空けて並べる */
.timer-screen.ad-side .timer-bottom{position:relative;justify-content:center;min-height:var(--ad-height)}
.timer-screen.ad-side .sponsor-region{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.timer-screen[data-phase="rest"] .phase-label,.timer-screen[data-phase="rest"] .clock{color:var(--rest);fill:var(--rest)}
.timer-screen[data-phase="rest"] .progress-fill{background:var(--rest)}
.timer-screen[data-urgent="true"] .progress-fill{background:var(--urgent)}
.timer-screen[data-phase="preparing"] .phase-label,.timer-screen[data-phase="resuming"] .phase-label{color:var(--muted)}
.sponsor-region{flex:none;width:var(--ad-width);height:var(--ad-height);display:flex;align-items:center;justify-content:center}
.sponsor-region[hidden]{display:none}
.sponsor-frame{position:relative;flex:none;width:100%;height:100%;background:#191b1e}
.sponsor-frame ad-banner{position:absolute;inset:0;}
.sponsor-fallback{position:absolute;inset:0;margin:0;display:flex;justify-content:center;align-items:center;text-align:center;padding:6px;font-size:11px;color:#a6abb4;line-height:1.5;border:1px solid #33373d;}
.sponsor-fallback span{font-size:10px;}
.support-section{margin-top:24px;padding-top:4px;border-top:1px solid var(--line);}
.support-link{display:inline-flex;align-items:center;text-decoration:none;min-height:44px;}
.info-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);}
.info-links a{display:inline-flex;align-items:center;min-height:44px;color:#c6d0df;text-underline-offset:4px;font-size:12px;}
.dev-preview-note{padding:10px 12px;background:#25282e;border:1px solid #444b57;border-radius:7px;}
.ad-preview-links{display:flex;flex-wrap:wrap;gap:4px 16px;}.ad-preview-links a{display:inline-flex;align-items:center;min-height:44px;color:#c6d0df;text-underline-offset:4px;font-size:12px;}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);width:100%;height:100%;overflow:hidden}body{height:100dvh;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}button,input,select,summary{touch-action:manipulation}button{color:inherit;border:0;background:none}button:disabled{cursor:default;opacity:.38}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--rest);outline-offset:4px}button,select,input{min-height:44px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}[x-cloak]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.brand-mark{display:flex;align-items:end;gap:3px;height:19px}.brand-mark span{width:4px;height:16px;background:#fff}.brand-mark span:nth-child(2){height:11px}.brand-mark span:nth-child(3){height:19px}.session-summary{display:flex;align-items:center;gap:12px;min-height:36px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0;white-space:nowrap}.session-summary:disabled{opacity:1}.summary-edit{color:#e5e7eb;border-bottom:1px solid #6c717a;font-size:11px;padding-bottom:2px}.pause-badge{border:1px solid var(--line);padding:5px 10px;border-radius:5px;font-size:12px;color:#c9cdd4;letter-spacing:.05em}
/* 操作部：スタートは画面の中央、アイコンはその左（位置と幅は timer-layout.js の arrangeDock が決める） */
.controls{--dock-gap:24px;--icon-gap:14px;--start-min:226px;--start-max:728px;position:relative;width:100%;height:68px}.controls>button{position:absolute;left:0;top:50%;transform:translateY(-50%)}.tool-button{min-width:66px;min-height:64px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:12px;color:#bfc3cb}.tool-button span{font-size:10px;white-space:nowrap}.tool-button:hover:not(:disabled){background:var(--surface);color:#fff}.primary-button{min-width:0;min-height:68px;display:flex;justify-content:center;align-items:center;gap:12px;background:#fff;color:#000;border-radius:14px;font-size:20px;font-weight:700;padding:12px 16px;margin:0;white-space:nowrap}.primary-button svg{width:26px;height:26px}.primary-button:hover:not(:disabled){background:#e2e5e9}.is-running .primary-button{background:#24272b;color:#fff;box-shadow:inset 0 0 0 1px #42464e}.chrome{opacity:1;transition:opacity .2s}.chrome-hidden .chrome{opacity:0;pointer-events:none}
dialog{border:1px solid var(--line);padding:0;background:var(--surface);color:#fff;border-radius:20px;box-shadow:0 24px 100px #000a;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px)}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}.settings-dialog{width:600px;height:min(850px,calc(100dvh - 48px));overflow:hidden}.panel{display:flex;flex-direction:column;height:100%}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 28px 22px}.panel-kicker{font-size:11px;color:var(--muted);margin:0 0 8px}.panel-header h2{font-size:23px;letter-spacing:.02em;margin:0;font-weight:650}.icon-button{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:50%;background:var(--surface-raised)}.settings-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 28px;gap:24px;flex-shrink:0}.settings-tabs button{padding:0 2px 14px;min-height:42px;color:var(--muted);font-size:13px;border-bottom:2px solid transparent}.settings-tabs button.selected{color:#fff;border-bottom-color:#fff}#settings-form{display:flex;flex-direction:column;min-height:0;flex:1}.panel-content{padding:24px 28px;overflow-y:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin}.field-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 10px;font-size:14px;font-weight:600}.field-heading>span{font-size:11px;font-weight:400;color:var(--muted)}.duration-input{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#090a0b;border-radius:var(--radius);padding:4px 16px}.duration-input input{background:none;color:#fff;border:0;width:75%;font-size:40px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;padding:4px 0}.duration-input>span{color:var(--muted);font-size:12px}.quick-options{display:flex;gap:8px;margin:10px 0 24px}.quick-options button{min-height:36px;border:1px solid var(--line);border-radius:7px;padding:0 16px;font-size:12px;color:#c2c6ce}.quick-options button.selected{background:#fff;border-color:#fff;color:#000}.field-help{font-size:12px;color:var(--muted);line-height:1.8;margin:12px 0 24px}.inline-toggle{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:400;color:#d0d4dc}.inline-toggle input{width:16px;height:16px;min-height:16px;accent-color:#fff}.text-input{width:100%;border:1px solid var(--line);background:#090a0b;border-radius:8px;padding:11px 12px;color:#fff;min-width:0}.text-input:disabled{opacity:.4}.split-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 0}.small-field{font-size:12px;color:#c9cdd4;display:flex;flex-direction:column;gap:10px}.small-field>span{display:flex;align-items:center;gap:10px}.small-field input{background:#090a0b;color:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:100%;font-size:18px}.panel-footer{padding:18px 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;background:var(--surface)}.quiet-button{font-size:12px;color:var(--muted);padding:6px 0}.save-button{background:#fff;color:#000;border-radius:9px;padding:12px 24px;font-size:14px;font-weight:650;white-space:nowrap}.outline-button{border:1px solid #50555e;border-radius:7px;padding:8px 14px;white-space:nowrap;font-size:12px;background:transparent}.outline-button:hover{background:var(--surface-raised)}select{border:1px solid var(--line);background:#090a0b;color:#fff;border-radius:7px;padding:8px 28px 8px 10px;font-size:12px;min-width:0}.volume-heading{display:flex;align-items:center;justify-content:space-between;font-size:14px}.volume-heading label{display:flex;align-items:center;gap:10px}.volume-heading output{font-size:12px;color:var(--muted)}.volume-slider{width:100%;accent-color:#fff;margin:12px 0 20px;cursor:pointer}.sound-select-row{display:flex;align-items:center;gap:8px;margin:12px 0}.sound-select-row>label{flex:1;font-size:13px}.sound-select-row>select{width:138px}.notification-list{border-top:1px solid var(--line)}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px;font-size:13px}.notification-list>.switch-row,.notification-item{border-bottom:1px solid var(--line)}.switch{appearance:none;width:38px;min-width:38px;height:23px;min-height:23px;border-radius:20px;background:#4c515b;position:relative;margin:0;cursor:pointer}.switch::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;background:#fff;border-radius:50%;transition:transform .15s}.switch:checked{background:#dce2e9}.switch:checked::after{transform:translateX(15px);background:#17191c}.notification-detail{display:flex;align-items:center;gap:10px;padding:0 0 14px;font-size:11px;color:var(--muted);flex-wrap:wrap}.notification-detail select{min-height:36px;font-size:11px;padding:6px 24px 6px 8px}.seconds-field{display:flex;align-items:center;gap:7px}.seconds-field input{width:65px;background:#090a0b;border:1px solid var(--line);border-radius:7px;min-height:36px;padding:6px 8px;color:#fff}.more-settings{margin-top:20px;font-size:12px;color:var(--muted)}.more-settings summary{padding:10px 0;cursor:pointer}.more-settings label{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.form-error{font-size:12px;color:#ffadb0;line-height:1.8;padding:12px;background:#391d23;border-radius:8px}.panel-content h3{font-size:14px;font-weight:600;margin:0 0 10px}.save-preset-row{display:flex;gap:8px;margin-bottom:24px}.empty-state{font-size:13px;color:var(--muted);line-height:1.9;text-align:center;padding:32px 8px}.preset-item{position:relative;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:16px 0}.favorite-button{min-width:32px;min-height:44px;font-size:24px;color:var(--rest);padding:0}.preset-info{flex:1;min-width:0}.preset-info strong{display:block;font-size:13px;font-weight:600;overflow-wrap:anywhere}.preset-info span{display:block;font-size:11px;color:var(--muted);margin-top:7px}.preset-actions>summary{list-style:none;font-size:16px;cursor:pointer;min-width:28px;min-height:44px;display:grid;place-items:center}.preset-actions>summary::-webkit-details-marker{display:none}.preset-actions>div{position:absolute;z-index:1;right:0;top:60px;min-width:170px;padding:7px;background:#30343c;box-shadow:0 8px 20px #0009;border:1px solid #565c67;border-radius:9px}.preset-actions button{display:block;text-align:left;width:100%;font-size:12px;padding:10px}.danger-text{color:#ffadb0}.help-content h3{font-size:14px;margin:24px 0 12px}.help-content h3:first-child{margin-top:0}.help-content p{font-size:12px;line-height:1.9;color:var(--muted)}.shortcuts{margin:20px 0 30px}.shortcuts>div{display:flex;align-items:center;gap:20px;margin:10px 0;font-size:12px}.shortcuts dt{width:60px}.shortcuts dd{margin:0;color:#c6cbd3}kbd{font:inherit;border:1px solid #50555e;border-radius:5px;padding:4px 7px;font-size:11px}.offline-status{color:var(--rest)!important}.confirm-dialog{width:380px;padding:26px}.confirm-dialog h2{font-size:20px;margin:0 0 12px}.confirm-dialog p{font-size:13px;color:#c0c5cd;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.confirm-dialog .text-input{margin:8px 0 12px}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.toast{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 28px);z-index:20;display:flex;align-items:center;gap:16px;background:#ebedf0;color:#17191c;border:1px solid #fff;border-radius:10px;padding:12px 18px;font-size:12px;line-height:1.6;box-shadow:0 8px 28px #0008;width:max-content}.toast button{font-size:12px;font-weight:700;text-decoration:underline;min-height:28px;white-space:nowrap}.noscript-message{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:#000;padding:32px}
.panel-toast{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0;background:#2b3038;color:#f0f2f6;font-size:12px;line-height:1.7;padding:10px 28px;border-bottom:1px solid var(--line)}.panel-toast button{font-size:12px;font-weight:650;text-decoration:underline;min-height:32px;white-space:nowrap}
/* 2026-10-27 縦画面の横向き案内（.orientation-hint）は、2段表示に置き換えたため削除 */
@media (max-width:600px){.panel-header{padding:22px 20px 18px}.settings-tabs{padding:0 20px;gap:24px}.panel-content{padding:22px 20px}.panel-footer{padding:16px 20px}.settings-dialog{height:calc(100dvh - 24px)}.quick-options{gap:6px}.quick-options button{flex:1;padding:0 8px}.split-fields{gap:12px}.preset-item{gap:6px}.preset-item>.outline-button{padding:8px;font-size:11px}.preset-actions>summary{min-width:24px}}
@media (max-height:500px) and (orientation:landscape){.settings-dialog{height:calc(100dvh - 20px)}.panel-header{padding:12px 22px}.panel-kicker{display:none}.panel-header h2{font-size:18px}.settings-tabs{padding:0 22px}.settings-tabs button{min-height:34px;padding-bottom:8px}.panel-content{padding:18px 22px}.panel-footer{padding:10px 22px}.panel-footer button{min-height:38px;padding-top:8px;padding-bottom:8px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Large touch controls for settings. Keep native keyboard number input behavior. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quick-options,
.duration-adjustments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--settings-control-gap, 8px);
}
.quick-options { margin: 10px 0 8px; }
.duration-adjustments { margin: 0 0 26px; }
.quick-options button,
.duration-adjustments button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #50555e;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 8px 4px;
}
.duration-adjustments button { background: var(--surface-raised); }
.duration-adjustments button:first-child { color: #c2c6ce; background: transparent; }
.duration-adjustments button:hover:not(:disabled),
.number-stepper button:hover:not(:disabled) { background: #373c44; }
.duration-adjustments button:active:not(:disabled),
.number-stepper button:active:not(:disabled) { background: #505660; }
.number-stepper {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #090a0b;
  overflow: hidden;
  min-width: 0;
}
.number-stepper:focus-within { border-color: #9ba3b0; }
.number-stepper.disabled { opacity: .5; }
.number-stepper button {
  min-width: 48px;
  min-height: 48px;
  background: var(--surface-raised);
  font-size: 26px;
  font-weight: 500;
  padding: 0;
  line-height: 1;
}
.number-stepper button:focus-visible { outline-offset: -4px; border-radius: 7px; }
.number-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 4px;
  text-align: center;
  color: #fff;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.number-stepper input:focus-visible { outline-offset: -4px; }
.notification-help { margin: -3px 0 14px; font-size: 11px; line-height: 1.8; color: var(--muted); }
.end-signal-setting { padding:18px 0 4px; }
.end-signal-label { display:block; font-size:13px; margin-bottom:10px; }
.end-signal-select { display:block; width:100%; min-width:0; min-height:48px; margin-bottom:14px; font-size:13px; }
.notification-list .additional-notices-heading { margin:24px 0 10px; }
.notification-detail select { min-height: 44px; font-size: 12px; }
.notification-timing { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 4px; }
.notification-timing>label { font-size: 12px; color: #c9cdd4; }
.notification-timing .number-stepper { width: 188px; flex-shrink: 0; }
@media (max-width: 400px) {
  .panel { --settings-control-gap: 6px; }
  .notification-timing { align-items: flex-start; flex-direction: column; gap: 8px; }
  .notification-timing .number-stepper { width: 100%; }
}
@media (max-width: 360px) { .split-fields { grid-template-columns: 1fr; } }

/* Keep the sheet's columns and fixed chrome stable as content changes. */
.panel { position: relative; --panel-footer-height: 81px; }
.panel-header { flex-shrink: 0; }
.panel-content { scrollbar-gutter: stable; }
.panel>.panel-toast {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: calc(var(--panel-footer-height) + 8px);
  max-height: 128px;
  overflow-y: auto;
  border: 1px solid #50555e;
  border-radius: 10px;
  box-shadow: 0 8px 24px #0008;
  padding: 10px 12px;
}
.panel-toast .dismiss-toast { min-width: 32px; padding: 0; text-decoration: none; }
.panel-toast .dismiss-toast svg { width: 16px; height: 16px; }
.sound-select-row>label { min-width: 0; }
.sound-select-row>select { flex-shrink: 0; }
.pending-marker { width: 7px; height: 7px; border-radius: 50%; background: var(--rest); flex-shrink: 0; }
.runtime-settings-note { font-size: 12px; line-height: 1.8; color: var(--rest); padding: 12px; border: 1px solid #665c35; border-radius: 8px; margin: 0 0 20px; }
.runtime-settings-note span { display: block; }
.notification-method { display: flex; align-items: center; gap: 10px; }
.language-switcher { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:12px 0; }
.language-switcher a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:4px 10px; color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:7px; }
.language-switcher a[aria-current="page"] { color:#fff; border-color:#b5bac2; }
html[lang="en"] .settings-tabs button { white-space:normal; font-size:11px; line-height:1.3; padding-bottom:8px; }
html[lang="en"] .field-heading, html[lang="en"] .small-field { overflow-wrap:anywhere; }
.notification-audition, .extra-sound-row { display: grid; grid-template-columns: minmax(4em, 1fr) minmax(0, 138px) auto; align-items: center; gap: 8px; }
.notification-audition select, .extra-sound-row select { width: 100%; min-height: 44px; font-size: 12px; }
.notification-audition .outline-button, .extra-sound-row .outline-button { min-height: 44px; }
.extra-sound-row { margin: 12px 0; }
.more-settings .extra-sound-row>label { display: block; margin: 0; }
.settings-tabs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.settings-tabs button { min-width: 0; font-size: 12px; white-space: nowrap; padding-inline: 0; }
/* ===== 設定 → プレビュー：音が鳴るタイミング（左の時刻＝そのとき画面に出ている数字） ===== */
.cue-preview { --cue-notice: #78c6f5; --cue-warning: #ff9384; --cue-boundary: #e5e9f0; }
.cue-preview>.field-help { margin: 8px 0 16px; }
.phase-swatch { width:10px; height:10px; display:inline-block; border-radius:1px; background:#8792a3; }
.phase-swatch.fight { background:#e5e9f0; }
.phase-swatch.rest { background:#f2cf55; }
.cue-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: #b2bdcb; margin: 0 0 20px; }
.cue-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cue-legend .cue-mark { box-shadow: none; }
.cue-phase { margin: 0 0 22px; }
.cue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); min-height: 44px; }
.cue-head h4 { margin: 0; font-size: 14px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cue-head .phase-swatch { align-self: center; }
.cue-head .dur { font-size: 20px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-left: 4px; }
.cue-mini { margin-left: auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cue-head .outline-button { margin-left: auto; min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; }
.cue-mini + .outline-button { margin-left: 0; }
.cue-mini[style*="none"] + .outline-button { margin-left: auto; }
.cue-head .outline-button svg { width: 12px; height: 12px; }
.cue-list { list-style: none; margin: 0; padding: 4px 0 0; position: relative; }
/* 縦の線は行ごとに引く。いちばん最初の行（練習の開始）だけは、点より上に線を出さない */
.cue { position: relative; }
.cue::before { content: ""; position: absolute; left: 66px; top: 0; bottom: 0; width: 2px; background: #2c3138; }
/* 一覧の先頭には Alpine の template があるので、:first-child ではなく li の :first-of-type で指す */
.cue-phase:first-of-type .cue-list > li.cue:first-of-type::before { top: 50%; }
.cue, .cue-gap { display: grid; grid-template-columns: 50px 14px minmax(0, 1fr) 64px; column-gap: 10px; align-items: center; }
.cue { min-height: 48px; padding: 6px 0; border-radius: 8px; transition: background .15s; }
.cue.playing { background: #ffffff10; }
.cue-time { text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cue-mark { display: block; justify-self: center; position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--cue-notice); box-shadow: 0 0 0 3px var(--surface); }
.cue-legend .cue-mark { display: inline-block; }
.cue-mark.boundary { width: 14px; height: 14px; background: var(--surface); border: 3px solid var(--cue-boundary); }
.cue-mark.warning { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); background: var(--cue-warning); }
.cue-body { min-width: 0; font-size: 13px; line-height: 1.5; }
.cue-body b { font-weight: 650; }
.cue-body small { display: block; font-size: 11px; color: var(--muted); }
.cue-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { min-width: 26px; height: 26px; padding: 0 5px; border-radius: 5px; display: grid; place-items: center; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; background: #1c2a36; color: var(--cue-notice); transition: background .1s, color .1s; }
.chip.warning { background: #3a2327; color: var(--cue-warning); }
.chip.on { background: var(--cue-notice); color: #000; }
.chip.warning.on { background: var(--cue-warning); }
/* 試聴ボタン：音タブの試聴と同じ、枠つきの四角いボタン（▶と「試聴」） */
.cue-play { width: 64px; min-height: 40px; padding: 0 6px; border: 1px solid #50555e; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #e5e9f0; font-size: 12px; font-weight: 600; }
.cue-play:hover:not(:disabled) { background: var(--surface-raised); border-color: #8a9099; color: #fff; }
.cue-play svg { width: 12px; height: 12px; }
.cue-gap { min-height: 26px; font-size: 11px; color: #727a86; }
.cue-gap span { grid-column: 3; }
.cue-gap::before { content: ""; grid-column: 2; grid-row: 1; justify-self: center; width: 2px; height: 26px; background: repeating-linear-gradient(#15171a 0 3px, #4a505a 3px 6px); position: relative; z-index: 1; }
.cue-note { margin: 4px 0 0 74px; font-size: 11px; line-height: 1.7; color: var(--muted); }
/* 枠の外の準備も、枠の中と同じだけ右へずらし、縦の線を全体でまっすぐにそろえる */
.cue-preview .cue-phase { padding-left: 14px; }
.cue-loop .cue-phase { padding-left: 0; }
.cue-loop { position: relative; margin: 4px 0 18px; padding-left: 14px; }
.cue-loop::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 18px; width: 8px; border: 2px dashed #6c717a; border-right: 0; border-radius: 10px 0 0 10px; }
.cue-loop-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: #c9cdd4; }
.cue-loop-head b { margin-left: 4px; color: #fff; }
.cue-loop-head svg { width: 24px; height: 24px; }
.cue-end { font-size: 12px; color: #c3ccd8; line-height: 1.8; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.cue-preview .preview-muted { margin: 0 0 16px; }
@media (max-width: 400px) {
  .cue, .cue-gap { grid-template-columns: 42px 14px minmax(0, 1fr) 60px; column-gap: 8px; }
  .cue-play { width: 60px; }
  .cue::before { left: 55px; }
  .cue-note { margin-left: 64px; }
}
/* 設定 → 時間：縦画面での数字の並べ方 */
.digits-setting { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.digits-setting .field-help { margin: 8px 0 16px; }
.digits-setting .field-help strong { color: #fff; }
.digits-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.digits-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px 12px; border: 1px solid #50555e; border-radius: 10px; text-align: center; }
.digits-card:hover { background: var(--surface-raised); }
.digits-card[aria-checked="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; background: #ffffff0d; }
.digits-card svg { width: 64px; height: 116px; stroke: none; }
.digits-card svg>rect:first-child { fill: #000; stroke: #6c717a; stroke-width: 1.5; }
.digits-card .mock-phase { fill: #c9cdd4; font: 700 7px Arial, sans-serif; letter-spacing: 1px; text-anchor: middle; }
.digits-card .mock-num { fill: #fff; font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 600; text-anchor: middle; }
.digits-card .mock-bar { fill: #fff; }
.digits-card b { display: block; font-size: 14px; }
.digits-card small { display: block; font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 2px; }
.preview-muted { padding:10px 12px; border:1px solid #665c35; border-radius:7px; color:var(--rest); font-size:12px; line-height:1.8; }
/* 5つのタブは文字の長さに合わせた幅にし、余りを均等に間へ配る（等幅だと「プリセット」「プレビュー」がくっつく） */
.settings-tabs { grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 8px; }
@media (max-width: 360px) { .settings-tabs button { font-size: 11px; } }
/* タブは文字だけでなく列の幅いっぱいを押せるようにし、下線は文字の幅に引く（2026-10-28） */
/* 余りの幅を、両端のタブに半分・間のタブに1つ分ずつ配ると、文字どうしの間隔が等しくなる */
.settings-tabs { display: flex; gap: 0; }
.settings-tabs button { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; padding: 0; border-bottom: 0; }
.settings-tabs button:first-child { flex-grow: .5; justify-content: flex-start; }
.settings-tabs button:last-child { flex-grow: .5; justify-content: flex-end; }
.settings-tabs button span { padding: 0 2px 14px; border-bottom: 2px solid transparent; }
.settings-tabs button.selected span { border-bottom-color: #fff; }
html[lang="en"] .settings-tabs button span { padding-bottom: 8px; }
@media (max-height:500px) and (orientation:landscape) { .settings-tabs button span { padding-bottom: 8px; } }
/* お知らせの名前（「時間経過」など）を押しても、左のスイッチが切り替わる（2026-10-28） */
.notice-row > label.notice-name { align-self: stretch; display: flex; align-items: center; margin: 0; }
.warning-controls { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 10px; align-items: center; width: 100%; }
.warning-controls select { width: 100%; }
.warning-controls>button { grid-column: 2; justify-self: start; }
.warning-controls>p { grid-column: 1 / -1; font-size: 11px; line-height: 1.8; margin: 0; }
@media (max-width: 360px) {
  .panel-footer .save-button { padding-inline: 12px; font-size: 12px; }
  .warning-controls { grid-template-columns: 1fr; }
  .warning-controls>button { grid-column: 1; }
}
/* ===== タイマー画面：狭い画面・低い横画面 ===== */
@media (max-width: 600px) {
  .panel { --panel-footer-height: 77px; }
  .timer-screen { --side: 16px; --gap: 12px; --phase-size: 22px; --bar-h: 10px; --top-h: 40px; }
  .brand .brand-text { display: none; }
  .phase-label { letter-spacing: .1em; padding-left: .1em; }
  .round-label { letter-spacing: 0; }
  .session-summary { font-size: 11px; gap: 8px; }
  .controls { --dock-gap: 8px; --icon-gap: 4px; --start-min: 150px; height: 60px; }
  .controls .tool-button { min-width: 44px; width: 44px; min-height: 56px; padding: 7px 0; }
  .controls .tool-button svg { width: 20px; height: 20px; }
  .controls .primary-button { min-height: 60px; padding: 10px 4px; font-size: 17px; gap: 7px; }
  .controls .primary-button svg { width: 23px; height: 23px; }
}
@media (max-width: 360px) {
  /* 中央の FIGHT と、右上の要約・ROUND が重ならないよう少し小さくする（要約を押すと設定が開くので「変更」の文字は省く） */
  .timer-screen { --phase-size: 20px; }
  .session-summary { font-size: 10px; }
  .session-summary .summary-edit { display: none; }
  .controls .primary-button { font-size: 15px; gap: 6px; }
  .controls .primary-button svg { width: 18px; height: 18px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .panel { --panel-footer-height: 59px; }
  .panel>.panel-toast { max-height: 80px; }
  .timer-screen { --side: 20px; --gap: 6px; --top-h: 30px; --phase-size: 18px; --bar-h: 8px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .brand { font-size: 12px; }
  .session-summary { font-size: 11px; min-height: 30px; }
  .controls { --dock-gap: 10px; --icon-gap: 6px; --start-min: 150px; height: 48px; }
  .controls .tool-button { min-width: 48px; min-height: 48px; gap: 3px; padding: 4px 6px; }
  .controls .tool-button span { font-size: 9px; }
  .controls .tool-button svg { width: 19px; height: 19px; }
  .controls .primary-button { min-height: 48px; font-size: 16px; padding: 6px 12px; border-radius: 10px; }
}
@media (max-height: 400px) and (orientation: landscape) and (max-width: 700px) {
  .controls .tool-button span { display: none; }
  .controls .tool-button { min-width: 44px; }
  .controls { --start-min: 120px; }
}

/* ===== 2026-10-27 操作部の作り直し：左上に設定（と全画面）、下の段にスタートとリセット ===== */
.timer-screen .brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.corner-tools { display: flex; align-items: center; gap: 4px; }
.corner-tools .icon-tool { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; color: #d0d4da; }
.corner-tools .icon-tool:hover:not(:disabled) { background: var(--surface); color: #fff; }
.corner-tools .icon-tool svg { width: 24px; height: 24px; }
/* 一時停止の表示は中央の文字の下に小さく（左右の角と重ならないように） */
.phase .pause-badge { right: auto; left: 50%; top: 100%; transform: translateX(-50%); margin: 6px 0 0; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
/* リセットはスタートと同じ大きさの黄色いボタン */
.controls { --reset-w: 160px; }
.controls .reset-button, .is-running .controls .reset-button { background: var(--rest); color: #000; box-shadow: none; }
.controls .reset-button:hover:not(:disabled) { background: #e2bd3c; }
/* 広告の置き場所：ボタンの間（中央）／左端。右端は .ad-side */
.timer-screen.ad-middle .timer-bottom, .timer-screen.ad-left .timer-bottom { position: relative; justify-content: center; min-height: var(--ad-height); }
.timer-screen.ad-middle .sponsor-region { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.timer-screen.ad-left .sponsor-region { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .controls { --reset-w: 104px; } .controls .reset-button { font-size: 15px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .controls { --reset-w: 112px; } .controls .reset-button { font-size: 14px; }
  .corner-tools .icon-tool { min-width: 36px; min-height: 36px; }
  .corner-tools .icon-tool svg { width: 20px; height: 20px; }
  .phase .pause-badge { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 10px; }
}
/* 設定 → その他：スタートとリセットの並べ方 */
.button-layout-setting { margin: 0 0 28px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.layout-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.layout-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border: 1px solid #50555e; border-radius: 9px; font-size: 12px; text-align: left; }
.layout-card:hover { background: var(--surface-raised); }
.layout-card[aria-checked="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; background: #ffffff0d; }
.layout-mock { position: relative; display: block; height: 22px; border: 1px solid #6c717a; border-radius: 4px; background: #000; }
.layout-mock i { position: absolute; top: 5px; height: 10px; border-radius: 2px; }
.layout-mock .mock-start { background: #fff; }
.layout-mock .mock-reset { background: var(--rest); }

/* ===== 設定 → 時間：縦の帯（2026-10-27。試作 demo/時間設定の試作.html の B_02） =====
   READY・ROUND・REST の札を1本の縦の帯としてつなぎ、上から下へ時間が流れることを見せる。
   段を開くと、帯の色が編集欄の横まで伸び、編集欄も同じ色の背景・枠になる。 */
.flow-b2 { --bar-w: 104px; --c-ready: #8792a3; display: grid; margin: 4px 0 0; }
.b2-row { --c: var(--c-ready); display: grid; grid-template-columns: var(--bar-w) minmax(0, 1fr); }
.b2-row[data-key="fight"] { --c: #e5e9f0; }
.b2-row[data-key="rest"] { --c: var(--rest); }
.b2-seg { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 64px; padding: 12px 28px 12px 12px; background: var(--c); color: #000; text-align: left; border-radius: 0; }
.b2-seg .seg-name { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.b2-seg .seg-value { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
/* 開閉の矢印：札の右側に大きめに。開いているときは上向き */
.b2-seg::after { content: ""; position: absolute; right: 11px; top: 30px; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.b2-row.open .b2-seg::after { transform: translateY(-20%) rotate(-135deg); }
.b2-seg:hover { filter: brightness(1.12); }
.b2-seg.is-off { background: #2a2d32; color: var(--muted); }
.b2-row[data-key="ready"] .b2-seg { border-radius: 12px 12px 0 0; }
.b2-row[data-key="rest"] .b2-seg { border-radius: 0 0 12px 12px; }
.b2-seg { grid-column: 1; grid-row: 1 / span 2; }
.b2-body { grid-column: 2; grid-row: 1; min-width: 0; padding: 8px 0 8px 10px; border: 2px solid transparent; border-left: 0; border-bottom: 0; }
.b2-row > .inline-editor { grid-column: 2; grid-row: 2; min-width: 0; }
.b2-row.open .b2-body, .b2-row.open > .inline-editor { background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.b2-row.open .b2-body { border-color: var(--c); border-radius: 0 12px 0 0; padding: 6px 10px 4px; }
.b2-row.open > .inline-editor { border: 2px solid var(--c); border-top: 0; border-left: 0; border-radius: 0 0 12px 0; padding: 6px 10px 12px; }
.step-edit { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #090a0b; }
.step-edit button { min-height: 48px; background: var(--surface-raised); font-size: 12px; font-weight: 650; white-space: nowrap; padding: 0; }
.step-edit button:hover:not(:disabled) { background: #373c44; }
.step-edit .value { background: #090a0b; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.inline-editor .duration-input { background: #090a0b; }
.inline-editor .quick-options { margin: 10px 0 8px; }
.inline-editor .duration-adjustments { margin: 0; }
.inline-editor .duration-input input[type="number"] { width: 75%; }
/* READY → くり返し のつなぎ：帯を細くして矢印 */
.b2-link { display: grid; grid-template-columns: var(--bar-w) minmax(0, 1fr); align-items: center; min-height: 34px; }
.b2-link .rail { justify-self: center; position: relative; width: 6px; height: 100%; min-height: 34px; background: linear-gradient(var(--c-ready), #e5e9f0); }
.b2-link .rail::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #e5e9f0; border-bottom: 0; }
.b2-link span:last-child { padding-left: 10px; font-size: 11px; color: var(--muted); }
/* くり返す範囲：帯の左に点線の囲み */
.b2-loop { position: relative; display: grid; margin-top: 6px; }
.b2-loop::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 6px; border: 2px dashed #6c717a; border-right: 0; border-radius: 10px 0 0 10px; }
.b2-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 8px; }
.b2-head b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.loop-arrow { width: 28px; height: 28px; stroke-width: 2.2; }
/* くり返し回数：無制限｜回数を決める。回数のときだけ REST の下に増減と候補（上の段は動かない） */
.rounds-seg { display: inline-flex; border: 1px solid #50555e; border-radius: 9px; overflow: hidden; }
.rounds-seg button { min-height: 40px; padding: 0 12px; font-size: 12px; color: #c9cdd4; white-space: nowrap; }
.rounds-seg button[aria-checked="true"] { background: #fff; color: #000; font-weight: 700; }
.rounds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.rounds-row .number-stepper { width: 168px; flex-shrink: 0; }
.rounds-chips { display: flex; gap: 6px; flex: 1; min-width: 0; }
.rounds-chips button { flex: 1; min-height: 44px; min-width: 0; border: 1px solid #50555e; border-radius: 7px; font-size: 12px; color: #c9cdd4; }
.rounds-chips button.selected { background: #fff; color: #000; border-color: #fff; font-weight: 700; }
.resume-row { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 12px; align-items: center; }
.resume-title { margin: 0; font-size: 15px; font-weight: 650; color: #fff; }
@media (max-width: 480px) {
  .flow-b2 { --bar-w: 96px; }
  .b2-seg .seg-value { font-size: 20px; }
  .step-edit { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  /* 狭い画面では編集欄を帯の下に全幅で出す。左端の太い線で帯とのつながりを示す */
  .b2-seg { grid-row: 1; }
  .b2-row.open > .inline-editor { grid-column: 1 / -1; border-left: 8px solid var(--c); border-radius: 0 0 12px 12px; }
}
@media (max-width: 400px) { .rounds-row .number-stepper, .resume-row { width: 100%; } .resume-row { grid-template-columns: 1fr; } }


/* ===== 音タブ（2026-10-28 改定。試作 demo/音声通知の試作.html の B_03 を移植） =====
   試聴ボタンはどの行も同じ幅で右端の列にそろえる。スイッチを切っても行は消さずに薄くし、押しても下の行が動かない */
.sound-tab { --test-w: 64px; }
.sound-line { display: grid; grid-template-columns: minmax(0, 1fr) var(--test-w); align-items: center; gap: 10px; min-height: 52px; }
/* 見出しの列を同じ幅にして、2つのプルダウンの幅をそろえる。PCでも広がりすぎない幅で止める */
.sound-field { display: grid; grid-template-columns: 100px minmax(0, 200px); align-items: center; gap: 8px; }
.sound-field > label { margin: 0; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.sound-field select { width: 100%; min-height: 44px; font-size: 13px; }
.sound-line.is-disabled .sound-field { opacity: .4; }
.sound-test { width: var(--test-w); min-height: 40px; padding: 0; justify-self: end; }
.notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.notice-head h3 { margin: 0; font-size: 16px; }
.notice-head .rounds-seg { display: grid; grid-template-columns: 1fr 1fr; width: 148px; flex-shrink: 0; }
.notice-group { --c: #e5e9f0; margin: 0 0 22px; }
.notice-group[data-phase="rest"] { --c: var(--rest); }
.notice-group > h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.notice-group > h4 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.notice-group > h4 small { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 1段目：スイッチ ｜ 名前 ｜ 試聴、2段目：いつ鳴るかと細かい設定 */
.notice-row { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--test-w); align-items: center; gap: 4px 12px; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.notice-group > h4 + .notice-row { border-top: 0; }
.notice-row > .switch { grid-area: 1 / 1; }
.notice-row > .notice-name { grid-area: 1 / 2; font-size: 14px; font-weight: 700; cursor: pointer; }
.notice-row > .sound-test { grid-area: 1 / 3; }
.notice-row > .notice-body { grid-area: 2 / 2 / 3 / 4; }
.notice-row.off > .notice-name { color: var(--muted); }
.notice-row.off > .notice-body { opacity: .45; }
.notice-when { margin: 0; font-size: 12px; line-height: 1.7; color: #c9cdd4; }
.notice-skip { display: block; color: var(--muted); font-size: 11px; }
/* ±のある行は、説明を3行分の高さに固定する（文が増減しても±ボタンが上下に動かない） */
.notice-body:has(.notice-opt) .notice-when { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: calc(1.7em * 3); }
.notice-opt { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.notice-opt .number-stepper { width: 168px; }
.notice-unit { font-size: 12px; color: var(--muted); }
/* 真ん中の数字は押せるボタン（点線の下線で押せることを示す）。押すと細かく決める板が開く */
.number-stepper .value-btn { min-width: 0; min-height: 44px; display: grid; place-items: center; background: #090a0b; color: #fff; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: underline dotted #6c717a; text-underline-offset: 5px; }
.number-stepper .value-btn:hover { background: #15171a; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: #000a; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); color: #fff; }
@media (min-width: 601px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: 18px; } }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sheet-head b { font-size: 15px; }
.sheet-head span { font-size: 12px; color: var(--muted); }
.sheet-value { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-height: 64px; margin: 4px 0 12px; padding-top: 6px; border-radius: 12px; background: #090a0b; }
.sheet-value strong { font-size: 40px; font-variant-numeric: tabular-nums; }
.sheet-value small { font-size: 13px; color: var(--muted); }
.sheet .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sheet .chips button { min-height: 44px; border: 1px solid #50555e; border-radius: 9px; font-size: 13px; color: #c9cdd4; }
.sheet .chips button.on { background: #fff; color: #000; border-color: #fff; font-weight: 700; }
.sheet .fine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.sheet .fine button { min-height: 44px; border-radius: 9px; background: var(--surface-raised); font-size: 14px; font-weight: 600; }
.sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sheet-foot button { min-height: 48px; border-radius: 12px; font-weight: 700; }
.sheet-foot .cancel { border: 1px solid var(--line); color: #c9cdd4; }
.sheet-foot .ok { background: #fff; color: #000; }
/* 声と電子音の説明を同じ場所に重ね、選ばれていない方は見えなくする（切り替えても高さが変わらない） */
.swap { display: grid; }
.swap > span { grid-area: 1 / 1; }
.swap > .hide { visibility: hidden; }
/* ===== 2026-10-28 上の行：右上の設定時間は READY と同じ大きさ（中央と重なる幅では app.js の fitTopBar が縮める） ===== */
.timer-top .session-summary { font-size: var(--phase-size); line-height: 1; }
/* ショートカットの説明：マウスのある PC だけ。中央の文字と重なるときは .no-room で隠す（app.js の fitTopBar） */
.shortcut-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  /* 幅の計算に加わらないよう、右上の設定時間の左に重ねて置く（right は fitTopBar が決める。2026-10-29 に左上から移した） */
  .shortcut-hint { position: absolute; right: 260px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .shortcut-hint .hint-group { display: inline-flex; align-items: center; gap: 14px; }
  .shortcut-hint .hint-group > span { display: inline-flex; align-items: center; gap: 3px; }
  .shortcut-hint kbd { padding: 1px 5px; font-size: 10px; color: #c9cdd4; }
  .shortcut-hint kbd:last-of-type { margin-right: 4px; }
  /* 並んで入らないときは、1つずつ重ねて置き、10秒ごとにふわっと切り替える（app.js の rotateHint） */
  .shortcut-hint.rotate { height: 20px; }
  .shortcut-hint.rotate .hint-group { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .6s; white-space: nowrap; }
  .shortcut-hint.rotate .hint-group.on { opacity: 1; }
}
.shortcut-hint.no-room { display: none !important; }
/* ===== 2026-10-29 左上：星を付けたプリセットのショートカット。4列の幅はそろえ、3個以下なら残りの列は空ける。
   left・width は fitTopBar（全画面ボタンの右〜中央の文字の手前）。狭すぎる幅では .no-room で隠す ===== */
.preset-chips { position: absolute; left: 112px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.preset-chips.no-room { display: none !important; }
.preset-chip { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; padding: 0 10px 0 6px; border: 1px solid #44484e; border-radius: 8px; background: #16181b; color: #d0d4da; font-size: 13px; text-align: left; }
.preset-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-chip kbd { flex: none; padding: 0 5px; font-size: 10px; line-height: 16px; color: #c9cdd4; }
.preset-chip:hover:not(:disabled) { border-color: #8a9099; color: #fff; }
.preset-chip.current { border-color: #e5e9f0; color: #fff; background: #24272b; }
@media (hover: none) { .preset-chip kbd { display: none; } .preset-chip { padding-left: 10px; } }
@media (max-width: 600px) { .preset-chip { min-height: 32px; font-size: 12px; } }
/* プリセット一覧：いちばん上（デフォルト）の印。名前の span は下の説明用の span の指定を受けないようにする */
.preset-info strong span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.default-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 5px; background: #e5e9f0; color: #000; font-size: 10px; font-style: normal; font-weight: 700; vertical-align: 2px; }
.shortcuts dt { width: 110px; flex: none; }
/* その他：ショートカットの説明を出すかのスイッチ（マウスのある PC だけで意味があるので、PC だけに出す） */
.hint-setting { display: none; }
@media (hover: hover) and (pointer: fine) {
  .help-content .hint-setting { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; cursor: pointer; font-size: 13px; color: #fff; }
  .hint-setting small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
}
/* プレビュー：見出しの下に、何を表しているかを短く */
.cue-preview .preview-lead { margin: -6px 0 14px; font-size: 12px; color: var(--muted); }
/* 英語：「Start/end sound」が入るよう、音タブの見出しの列を少し広げる（2026-10-29） */
html[lang="en"] .sound-field { grid-template-columns: 116px minmax(0, 200px); }