* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
}

html, body { margin: 0; min-width: 320px; min-height: 100%; }
body {
  min-height: 100vh;
  background: radial-gradient(circle at center, #17243a 0%, #070b12 60%, #000 100%);
  color: #f7f9ff;
  overflow-x: hidden;
}
button, input, select { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
input, select {
  width: 100%; min-height: 48px; border: 1px solid rgba(139,183,245,.5); border-radius: 12px;
  background: rgba(8,17,31,.9); color: #f7f9ff; outline: none;
}
input { padding: 10px 12px; }
select { padding: 10px 38px 10px 12px; }
input:focus, select:focus { border-color:#8fbaff; box-shadow:0 0 0 3px rgba(93,147,255,.2); }

.app-shell { width:min(1920px,100%); min-height:100vh; margin:0 auto; padding:clamp(14px,2vw,32px); }
.screen[hidden], .timer-section[hidden], .timer-settings-list[hidden], [hidden] { display:none !important; }

.page-header { margin-bottom:clamp(18px,2vw,30px); text-align:center; }
.page-header h1, .page-header p, .section-heading h2 { margin:0; }
.page-header h1 { font-size:clamp(1.8rem,3vw,3.1rem); }
.page-header p { margin-top:7px; color:#aebfd8; font-size:clamp(.9rem,1.2vw,1.15rem); }
.sleep-notice { width:min(760px,100%); margin:16px auto 0; padding:12px 16px; border:1px solid rgba(151,190,245,.28); border-radius:14px; background:rgba(5,12,23,.42); }
.sleep-notice p { margin:0; font-size:.88rem; line-height:1.65; }
.text-link-button { margin-top:7px; padding:2px; border:0; background:transparent; color:#9fc7ff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.text-link-button:hover, .text-link-button:focus-visible { color:#fff; outline:2px solid rgba(155,198,255,.45); outline-offset:3px; }
.board-header { margin-bottom:clamp(10px,1.2vw,18px); }

.setup-form { display:grid; gap:clamp(20px,2.4vw,34px); }
.setup-group { padding:clamp(16px,2vw,28px); border:1px solid rgba(151,190,245,.35); border-radius:22px; background:linear-gradient(145deg,rgba(23,39,63,.88),rgba(7,13,24,.93)); box-shadow:0 0 28px rgba(85,139,226,.12); }
.setup-group-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,200px); gap:18px; margin-bottom:18px; }
.field-block { display:grid; gap:7px; }
.field-block label { color:#dbe8fb; font-weight:700; }
.count-note { margin:2px 0 0; color:#9fb2ce; font-size:.78rem; line-height:1.35; }
.timer-settings-list { display:grid; gap:12px; }
.timer-setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; padding:14px; border:1px solid rgba(131,169,224,.22); border-radius:16px; background:rgba(5,12,23,.48); }
.duration-fields, .extension-duration-row { display:grid; grid-template-columns:repeat(2,minmax(90px,110px)); gap:10px; }
.setup-error { min-height:1.5em; margin:-2px 0 0; color:#ff9b9b; font-weight:700; text-align:center; }
.setup-actions { display:flex; justify-content:center; padding-bottom:20px; }
.setup-subheading { margin:0 0 14px; font-size:clamp(1.2rem,1.8vw,1.6rem); }
.board-title-setup { background:linear-gradient(145deg,rgba(22,36,58,.9),rgba(7,13,24,.94)); }

.primary-button, .secondary-button { min-height:48px; padding:10px 20px; border:1px solid #84b6ff; border-radius:14px; color:#eef5ff; font-weight:700; }
.primary-button { background:linear-gradient(145deg,#376cff,#1541b8); box-shadow:0 0 18px rgba(71,126,255,.35), inset 0 0 10px rgba(255,255,255,.1); }
.secondary-button { border-color:rgba(151,184,227,.58); background:rgba(21,34,54,.95); box-shadow:inset 0 0 10px rgba(122,169,236,.08); }
.primary-button:hover:not(:disabled), .primary-button:focus-visible:not(:disabled), .secondary-button:hover:not(:disabled), .secondary-button:focus-visible:not(:disabled) { filter:brightness(1.14); outline:3px solid rgba(155,198,255,.32); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.35; }
.create-board-button { width:min(440px,100%); min-height:56px; font-size:clamp(1.05rem,1.7vw,1.45rem); }

.timer-section { margin-bottom:clamp(12px,1.4vw,22px); padding:clamp(10px,1vw,18px); border:1px solid rgba(166,198,241,.18); border-radius:clamp(16px,1.5vw,24px); }
.timer-section-upper { background:linear-gradient(145deg,rgba(38,88,150,.14),rgba(7,13,24,.38)); }
.timer-section-lower { background:linear-gradient(145deg,rgba(92,57,137,.14),rgba(7,13,24,.38)); }
.timer-section-extension { background:linear-gradient(145deg,rgba(170,117,28,.18),rgba(30,21,6,.46)); border-color:rgba(239,188,87,.24); }

.extension-timer-panel.extension-base-upper .timer-face {
  background:linear-gradient(145deg,rgba(35,70,118,.96),rgba(8,18,34,.97));
  border-color:rgba(132,181,247,.62);
  box-shadow:0 0 24px rgba(71,137,225,.18), inset 0 0 24px rgba(111,170,245,.09);
}

.extension-timer-panel.extension-base-lower .timer-face {
  background:linear-gradient(145deg,rgba(78,50,112,.96),rgba(18,10,30,.97));
  border-color:rgba(178,135,226,.55);
  box-shadow:0 0 24px rgba(129,79,184,.18), inset 0 0 24px rgba(171,119,224,.09);
}
.section-heading { margin-bottom:8px; }
.section-heading h2 { font-size:clamp(1.35rem,2vw,2.2rem); line-height:1.1; overflow-wrap:anywhere; }
.timer-grid { display:grid; grid-template-columns:repeat(var(--timer-count,4),minmax(0,1fr)); gap:clamp(8px,1vw,16px); }
.timer-panel { min-width:0; perspective:1200px; transition:opacity .35s ease; }
.timer-panel-inner { display:grid; width:100%; min-height:clamp(180px,18vw,300px); transform-style:preserve-3d; transition:transform .7s ease-in-out; }
.timer-panel.is-finished { opacity:.7; }
.timer-panel.is-finished .timer-panel-inner { transform:rotateY(180deg); }
.timer-face { grid-area:1/1; display:grid; width:100%; padding:clamp(10px,1vw,18px); border:1px solid rgba(182,211,255,.55); border-radius:clamp(16px,1.5vw,26px); background:linear-gradient(145deg,rgba(32,50,78,.92),rgba(6,12,23,.96)); box-shadow:0 0 24px rgba(116,168,255,.16), inset 0 0 24px rgba(158,200,255,.08); text-align:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.timer-face-front { align-content:center; gap:clamp(8px,1vw,16px); }
.timer-face-back { align-content:center; justify-items:center; gap:14px; transform:rotateY(180deg); }
.timer-title { max-width:100%; margin:0; color:#eef5ff; font-size:clamp(1.15rem,2vw,2.25rem); font-weight:800; line-height:1.05; text-shadow:0 0 16px rgba(159,198,255,.36); overflow-wrap:anywhere; }
.time-display { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; width:100%; }
.minutes-display, .seconds-display, .time-colon { color:#fff; font-family:Consolas,"Roboto Mono","Courier New",monospace; font-weight:700; line-height:.9; text-shadow:0 0 11px rgba(255,255,255,.52),0 0 26px rgba(153,194,255,.22); transition:color .2s ease,text-shadow .2s ease; }
.minutes-display, .seconds-display { min-width:0; font-size:clamp(3.2rem,6.7vw,7.3rem); letter-spacing:-.09em; }
.time-colon { padding:0 .02em .08em; font-size:clamp(2.4rem,4.3vw,4.8rem); }
.time-display.is-warning .minutes-display, .time-display.is-warning .seconds-display, .time-display.is-warning .time-colon { color:#ff4b4b; text-shadow:0 0 11px rgba(255,75,75,.68),0 0 28px rgba(255,0,0,.24); }
.finished-message { display:grid; justify-items:center; gap:8px; width:100%; }
.finished-title, .finished-text { max-width:100%; margin:0; color:#fff; font-weight:800; line-height:1.05; overflow-wrap:anywhere; text-shadow:0 0 14px rgba(255,255,255,.4),0 0 28px rgba(153,194,255,.24); }
.finished-title { font-size:clamp(1.5rem,2.4vw,2.8rem); }
.finished-text { font-size:clamp(2.8rem,4.7vw,5.2rem); letter-spacing:.08em; }
.extension-info { display:grid; gap:2px; }
.extension-history,
.extension-total { margin:0; color:#f6d88d; font-size:clamp(.68rem,.9vw,.88rem); font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.extension-total { color:#ffe6a8; }
.extension-panel-actions { display:flex; justify-content:center; gap:8px; }
.extension-panel-actions .secondary-button { min-height:36px; padding:6px 12px; font-size:.85rem; }
.interaction-controls { opacity:0; pointer-events:none; transition:opacity .18s ease; }
.show-interaction-controls .interaction-controls { opacity:1; pointer-events:auto; }

.floating-controls { position:fixed; left:50%; bottom:0; z-index:50; display:flex; gap:10px; width:min(1240px,calc(100% - 24px)); padding:10px 12px; border:1px solid rgba(154,191,245,.35); border-bottom:0; border-radius:16px 16px 0 0; background:rgba(5,11,22,.96); box-shadow:0 -8px 30px rgba(0,0,0,.34); transform:translate(-50%,calc(100% - 5px)); opacity:.05; transition:transform .28s ease,opacity .2s ease; }
.floating-controls.is-visible { transform:translate(-50%,0); opacity:1; }
.control-button { flex:1 1 0; min-width:0; min-height:48px; white-space:nowrap; }
.finish-button { flex:.65 1 0; }
.fullscreen-button { flex:1.15 1 0; }

.extension-dialog { width:min(560px,calc(100% - 28px)); border:1px solid rgba(148,187,245,.45); border-radius:20px; background:linear-gradient(145deg,#15233a,#070d18); color:#f7f9ff; box-shadow:0 20px 60px rgba(0,0,0,.58); }
.sleep-guide-dialog { width:min(650px,calc(100% - 28px)); border:1px solid rgba(148,187,245,.45); border-radius:20px; background:linear-gradient(145deg,#15233a,#070d18); color:#f7f9ff; box-shadow:0 20px 60px rgba(0,0,0,.58); }
.sleep-guide-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(3px); }
.sleep-guide-content { display:grid; gap:14px; padding:6px; }
.sleep-guide-content h2, .sleep-guide-content p { margin:0; }
.sleep-guide-content p { color:#dbe8fb; line-height:1.7; }
.sleep-guide-steps { display:grid; gap:7px; margin:0; padding:14px 14px 14px 40px; border:1px solid rgba(151,190,245,.25); border-radius:14px; background:rgba(5,12,23,.42); }
.sleep-guide-note { font-size:.88rem; opacity:.82; }
.extension-dialog::backdrop { background:rgba(0,0,0,.68); backdrop-filter:blur(3px); }
.extension-form { display:grid; gap:16px; padding:4px; }
.extension-form h2 { margin:0 0 2px; font-size:1.45rem; }
.extension-current-total { padding:10px 12px; border:1px solid rgba(241,194,95,.3); border-radius:12px; background:rgba(142,91,12,.16); color:#f6d88d; font-weight:700; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* PCで3段をできるだけ1画面に収める */
@media (min-width:901px) {
  .board-screen { padding-bottom:10px; }
  .board-screen .page-header h1 { font-size:clamp(1.5rem,2vw,2.4rem); }
  .board-screen .timer-panel-inner { min-height:clamp(165px,17vh,255px); }
  .board-screen .minutes-display, .board-screen .seconds-display { font-size:clamp(3rem,5.4vw,6.2rem); }
  .board-screen .time-colon { font-size:clamp(2.1rem,3.4vw,4rem); }
  body.board-compact .app-shell { padding-top:10px; padding-bottom:8px; }
  body.board-compact .board-header { margin-bottom:8px; }
  body.board-compact .timer-section { margin-bottom:8px; padding:8px 10px; }
  body.board-compact .section-heading { margin-bottom:5px; }
  body.board-compact .section-heading h2 { font-size:clamp(1.15rem,1.55vw,1.7rem); }
  body.board-compact .timer-panel-inner { min-height:clamp(135px,15.5vh,210px); }
  body.board-compact .timer-title { font-size:clamp(1rem,1.45vw,1.55rem); }
  body.board-compact .minutes-display, body.board-compact .seconds-display { font-size:clamp(2.6rem,4.7vw,5rem); }
  body.board-compact .time-colon { font-size:clamp(1.9rem,3vw,3.4rem); }
  body.board-extra-compact .board-header { margin-bottom:4px; }
  body.board-extra-compact .board-header h1 { font-size:1.35rem; }
  body.board-extra-compact .timer-section { margin-bottom:5px; padding:6px 8px; }
  body.board-extra-compact .timer-panel-inner { min-height:120px; }
  body.board-extra-compact .timer-title { font-size:.95rem; }
  body.board-extra-compact .minutes-display, body.board-extra-compact .seconds-display { font-size:clamp(2.2rem,4.2vw,4.3rem); }
  body.board-extra-compact .time-colon { font-size:2.4rem; }
  body.board-extra-compact .extension-history, body.board-extra-compact .extension-total { font-size:.64rem; }
}

@media (max-width:1100px) and (min-width:701px) {
  .timer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) {
  .board-screen { padding-bottom:74px; }
  .timer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .timer-panel-inner { min-height:250px; }
  .minutes-display, .seconds-display { font-size:clamp(4rem,12vw,7rem); }
  .floating-controls { width:calc(100% - 12px); gap:6px; padding:8px; }
  .control-button { font-size:.82rem; padding:8px 6px; }
}

@media (max-width:700px) {
  .setup-group-header, .timer-setting-row { grid-template-columns:1fr; }
  .duration-fields, .extension-duration-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px) {
  .app-shell { padding:10px; }
  .timer-grid { grid-template-columns:1fr; }
  .timer-panel-inner { min-height:300px; }
  .minutes-display, .seconds-display { font-size:clamp(5.2rem,29vw,9rem); }
  .time-colon { font-size:clamp(3.6rem,15vw,5.4rem); }
  .floating-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fullscreen-button, .finish-button { grid-column:span 2; }
  .dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; transition:none!important; }
}

/* 第7回：累積時間／個別時間の選択 */
.time-mode-fieldset {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid rgba(131,169,224,.22);
  border-radius:14px;
  background:rgba(5,12,23,.36);
}
.time-mode-fieldset legend {
  padding:0 6px;
  color:#dbe8fb;
  font-weight:700;
}
.radio-option {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#eef5ff;
  font-weight:700;
  cursor:pointer;
}
.radio-option input[type="radio"] {
  width:18px;
  min-height:auto;
  height:18px;
  margin:0;
  accent-color:#5d93ff;
}

/* 第7回：段全体の終了回転 */
.timer-section-upper,
.timer-section-lower {
  perspective:1600px;
}
.group-flip-card {
  display:grid;
  width:100%;
  transform-style:preserve-3d;
  transition:transform .7s ease-in-out;
}
.group-flip-card.is-group-finished {
  transform:rotateY(180deg);
}
.group-face {
  grid-area:1 / 1;
  width:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.group-face-back {
  display:grid;
  place-content:center;
  justify-items:center;
  min-height:100%;
  padding:clamp(18px,2vw,32px);
  transform:rotateY(180deg);
  text-align:center;
}

.timer-section-upper .group-face-back {
  background:linear-gradient(145deg,rgba(38,88,150,.14),rgba(7,13,24,.38));
}
.timer-section-lower .group-face-back {
  background:linear-gradient(145deg,rgba(92,57,137,.14),rgba(7,13,24,.38));
}
.group-finished-title,
.group-finished-text {
  max-width:100%;
  margin:0;
  color:#fff;
  font-weight:800;
  overflow-wrap:anywhere;
  text-shadow:0 0 14px rgba(255,255,255,.42),0 0 30px rgba(153,194,255,.24);
}
.group-finished-title {
  font-size:clamp(1.8rem,3vw,3.6rem);
}
.group-finished-text {
  margin-top:12px;
  font-size:clamp(3.6rem,6vw,7rem);
  letter-spacing:.1em;
}

/* 第7回：通常タイマー全終了時の1秒待機＋1.5秒フェード */
.board-finish-overlay {
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--board-finish-fade-ms,1500ms) ease, visibility 0s linear var(--board-finish-fade-ms,1500ms);
}
.board-finish-overlay.is-visible {
  opacity:1;
  visibility:visible;
  transition:opacity var(--board-finish-fade-ms,1500ms) ease;
}
.board-finish-message {
  position:absolute;
  left:50%;
  top:var(--board-finish-center-y,50%);
  width:min(760px,90vw);
  padding:clamp(18px,3vw,38px);
  border:0;
  border-radius:22px;
  background:rgba(3,8,17,.64);
  box-shadow:0 18px 60px rgba(0,0,0,.34), inset 0 0 34px rgba(120,170,255,.06);
  backdrop-filter:blur(3px);
  transform:translate(-50%,-50%);
  text-align:center;
}
.board-finished-title,
.board-finished-text {
  margin:0;
  color:#fff;
  font-weight:800;
  line-height:1.05;
  overflow-wrap:anywhere;
  text-shadow:0 0 16px rgba(255,255,255,.48),0 0 34px rgba(141,189,255,.28);
}
.board-finished-title { font-size:clamp(2rem,4vw,4.4rem); }
.board-finished-text { margin-top:14px; font-size:clamp(4rem,8vw,8rem); letter-spacing:.12em; }

/* 第7回：個別延長の増減選択 */
.extension-adjust-fieldset {
  display:flex;
  align-items:center;
  gap:10px 18px;
  margin:0;
  padding:11px 13px;
  border:1px solid rgba(241,194,95,.28);
  border-radius:12px;
  background:rgba(142,91,12,.12);
}
.extension-adjust-fieldset legend {
  padding:0 6px;
  color:#f6d88d;
  font-weight:700;
}

@media (max-width:560px) {
  .time-mode-fieldset, .extension-adjust-fieldset { align-items:flex-start; flex-direction:column; }
  .board-finish-message { padding:22px 14px; }
}

/* =========================================================
   第8回：外観テーマ切り替え
   7テーマ（標準 / 工業 / ミニマル / サイバー / スチーム3方式）
   ========================================================= */

body {
  --theme-bg: radial-gradient(circle at center, #17243a 0%, #070b12 60%, #000 100%);
  --theme-text: #f7f9ff;
  --theme-muted: #aebfd8;
  --theme-panel: linear-gradient(145deg,rgba(23,39,63,.88),rgba(7,13,24,.93));
  --theme-panel-soft: rgba(5,12,23,.48);
  --theme-border: rgba(151,190,245,.35);
  --theme-border-strong: rgba(182,211,255,.55);
  --theme-input: rgba(8,17,31,.9);
  --theme-accent: #5d93ff;
  --theme-accent-2: #84b6ff;
  --theme-upper: linear-gradient(145deg,rgba(38,88,150,.14),rgba(7,13,24,.38));
  --theme-lower: linear-gradient(145deg,rgba(92,57,137,.14),rgba(7,13,24,.38));
  --theme-extension: linear-gradient(145deg,rgba(170,117,28,.18),rgba(30,21,6,.46));
  --theme-button-primary: linear-gradient(145deg,#376cff,#1541b8);
  --theme-button-secondary: rgba(21,34,54,.95);
  --theme-timer-face: linear-gradient(145deg,rgba(32,50,78,.92),rgba(6,12,23,.96));
  --theme-timer-glow: 0 0 24px rgba(116,168,255,.16), inset 0 0 24px rgba(158,200,255,.08);
  --theme-digit-font: Consolas,"Roboto Mono","Courier New",monospace;
  --theme-digit-shadow: 0 0 11px rgba(255,255,255,.52),0 0 26px rgba(153,194,255,.22);
}

body[data-theme] {
  background: var(--theme-bg);
  color: var(--theme-text);
}
body[data-theme] .page-header p { color:var(--theme-muted); }
body[data-theme] .setup-group,
body[data-theme] .board-title-setup { background:var(--theme-panel); border-color:var(--theme-border); }
body[data-theme] .timer-setting-row { background:var(--theme-panel-soft); border-color:var(--theme-border); }
body[data-theme] input,
body[data-theme] select { background:var(--theme-input); color:var(--theme-text); border-color:var(--theme-border); }
body[data-theme] input:focus,
body[data-theme] select:focus { border-color:var(--theme-accent-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-accent) 24%, transparent); }
body[data-theme] .field-block label,
body[data-theme] .time-mode-fieldset legend { color:var(--theme-text); }
body[data-theme] .count-note { color:var(--theme-muted); }
body[data-theme] .time-mode-fieldset { background:var(--theme-panel-soft); border-color:var(--theme-border); }
body[data-theme] .radio-option input[type="radio"] { accent-color:var(--theme-accent); }
body[data-theme] .primary-button { background:var(--theme-button-primary); border-color:var(--theme-accent-2); }
body[data-theme] .secondary-button { background:var(--theme-button-secondary); border-color:var(--theme-border); }
body[data-theme] .timer-section-upper { background:var(--theme-upper); }
body[data-theme] .timer-section-lower { background:var(--theme-lower); }
body[data-theme] .timer-section-extension { background:var(--theme-extension); }
body[data-theme] .timer-face { background:var(--theme-timer-face); border-color:var(--theme-border-strong); box-shadow:var(--theme-timer-glow); }
body[data-theme] .minutes-display,
body[data-theme] .seconds-display,
body[data-theme] .time-colon { font-family:var(--theme-digit-font); text-shadow:var(--theme-digit-shadow); }
body[data-theme] .floating-controls { background:color-mix(in srgb, var(--theme-input) 94%, black 6%); border-color:var(--theme-border); }
body[data-theme] .extension-dialog { background:var(--theme-panel); border-color:var(--theme-border); }

/* テーマ選択UI */
.theme-setup { overflow:hidden; position:relative; }
.theme-setup-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.theme-help { margin:4px 0 0; color:var(--theme-muted); line-height:1.55; }
.theme-experiment-note { margin:0; padding:7px 11px; border:1px solid var(--theme-border); border-radius:999px; color:var(--theme-muted); font-size:.78rem; white-space:nowrap; }
.theme-fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; }
.theme-option { position:relative; display:grid; grid-template-columns:auto 44px 1fr; align-items:center; gap:11px; min-height:72px; padding:10px 12px; border:1px solid var(--theme-border); border-radius:14px; background:var(--theme-panel-soft); cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.theme-option:hover { transform:translateY(-1px); border-color:var(--theme-accent-2); }
.theme-option:has(input:checked) { border-color:var(--theme-accent-2); box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 30%,transparent),0 8px 20px rgba(0,0,0,.16); }
.theme-option input { width:18px; height:18px; min-height:auto; margin:0; accent-color:var(--theme-accent); }
.theme-swatch { width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 0 12px rgba(255,255,255,.08); }
.theme-option-text { display:grid; gap:2px; min-width:0; }
.theme-option-text strong { color:var(--theme-text); line-height:1.25; }
.theme-option-text small { color:var(--theme-muted); }
.theme-option-blue .theme-swatch { background:linear-gradient(145deg,#315ea9,#07111f 58%,#1b3460); }
.theme-option-industrial .theme-swatch { background:linear-gradient(145deg,#4a4a47,#0c0d0d 55%,#28231b); }
.theme-option-minimal .theme-swatch { background:linear-gradient(145deg,#4f5962,#1d2328 58%,#2c343a); }
.theme-option-cyber .theme-swatch { background:linear-gradient(135deg,#00d9ff,#07121e 45%,#8a27ff 78%,#ff2bd6); }
.theme-option-steam-css .theme-swatch { background:repeating-linear-gradient(45deg,#3a2412 0 6px,#8c5b24 6px 8px,#24150b 8px 14px); }
.theme-option-steam-svg .theme-swatch { background:#2b1a0d url("assets/steam-gears.svg") center/80px 80px no-repeat; }
.theme-option-steam-image .theme-swatch { background:#2b1a0d url("assets/steam-metal-texture.png") center/cover; }

/* 1. 標準：ブルー・ガラス */
body[data-theme="blue"] {
  --theme-digit-font: Consolas,"Roboto Mono","Courier New",monospace;
}

/* 2. ブラック・インダストリアル：CSSのみ */
body[data-theme="industrial"] {
  color-scheme:dark;
  --theme-bg:radial-gradient(circle at 50% 20%,#262727 0%,#0e0f10 42%,#030404 100%);
  --theme-text:#f3f3ef;
  --theme-muted:#a9aaa4;
  --theme-panel:linear-gradient(155deg,rgba(47,48,47,.96),rgba(14,15,15,.97));
  --theme-panel-soft:linear-gradient(155deg,rgba(32,33,32,.92),rgba(11,12,12,.94));
  --theme-border:rgba(176,178,169,.28);
  --theme-border-strong:rgba(216,218,207,.42);
  --theme-input:rgba(13,14,14,.96);
  --theme-accent:#c49337;
  --theme-accent-2:#d5b66d;
  --theme-upper:linear-gradient(145deg,rgba(76,78,74,.34),rgba(9,10,10,.76));
  --theme-lower:linear-gradient(145deg,rgba(61,57,51,.34),rgba(9,10,10,.76));
  --theme-extension:linear-gradient(145deg,rgba(98,72,31,.26),rgba(18,14,8,.72));
  --theme-button-primary:linear-gradient(145deg,#4e7a2d,#233d17);
  --theme-button-secondary:linear-gradient(145deg,#3c3d3b,#151616);
  --theme-timer-face:linear-gradient(145deg,#252624,#080909 76%);
  --theme-timer-glow:inset 0 0 0 2px rgba(255,255,255,.035),inset 0 0 28px rgba(0,0,0,.55),0 9px 18px rgba(0,0,0,.35);
  --theme-digit-font:"Courier New",Consolas,monospace;
  --theme-digit-shadow:0 0 5px rgba(255,255,255,.32),0 0 15px rgba(255,255,255,.12);
}
body[data-theme="industrial"] .app-shell { position:relative; }
body[data-theme="industrial"] .setup-group,
body[data-theme="industrial"] .timer-section,
body[data-theme="industrial"] .timer-face,
body[data-theme="industrial"] .floating-controls { box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),0 8px 18px rgba(0,0,0,.34); }
body[data-theme="industrial"] .timer-face::before,
body[data-theme="industrial"] .setup-group::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.035); border-radius:inherit; pointer-events:none; }
body[data-theme="industrial"] .timer-face,
body[data-theme="industrial"] .setup-group { position:relative; }
body[data-theme="industrial"] .primary-button,
body[data-theme="industrial"] .secondary-button { border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -3px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.32); }
body[data-theme="industrial"] .finish-button { background:linear-gradient(145deg,#8b2f2a,#4a1412); border-color:#b1544d; }

/* 3. ミニマル：実用性優先 */
body[data-theme="minimal"] {
  color-scheme:dark;
  --theme-bg:linear-gradient(180deg,#242a2f,#15191d 70%,#111417);
  --theme-text:#f6f7f7;
  --theme-muted:#aab1b7;
  --theme-panel:#20262b;
  --theme-panel-soft:#1a2024;
  --theme-border:#3d464d;
  --theme-border-strong:#4a555d;
  --theme-input:#171c20;
  --theme-accent:#8ea9b8;
  --theme-accent-2:#b5c5ce;
  --theme-upper:#20262b;
  --theme-lower:#20262b;
  --theme-extension:#20262b;
  --theme-button-primary:linear-gradient(145deg,#3c8f63,#24603f);
  --theme-button-secondary:#343b40;
  --theme-timer-face:#171c20;
  --theme-timer-glow:none;
  --theme-digit-font:"Segoe UI",Arial,sans-serif;
  --theme-digit-shadow:none;
}
body[data-theme="minimal"] .setup-group,
body[data-theme="minimal"] .timer-section,
body[data-theme="minimal"] .timer-face,
body[data-theme="minimal"] .floating-controls { box-shadow:none; }
body[data-theme="minimal"] .timer-section,
body[data-theme="minimal"] .setup-group { border-radius:14px; }
body[data-theme="minimal"] .timer-face { border-radius:12px; }
body[data-theme="minimal"] .timer-title,
body[data-theme="minimal"] .finished-title,
body[data-theme="minimal"] .finished-text,
body[data-theme="minimal"] .group-finished-title,
body[data-theme="minimal"] .group-finished-text { text-shadow:none; }
body[data-theme="minimal"] .finish-button { background:#a93434; border-color:#bd5454; }

/* 4. サイバーパンク：CSSのみで強めのネオン */
body[data-theme="cyber"] {
  color-scheme:dark;
  --theme-bg:
    linear-gradient(rgba(0,222,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,222,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 18% 15%,rgba(0,226,255,.18),transparent 30%),
    radial-gradient(circle at 84% 82%,rgba(191,37,255,.16),transparent 32%),#020712;
  background-size:32px 32px,32px 32px,auto,auto,auto;
  --theme-text:#f3fbff;
  --theme-muted:#8cc9d8;
  --theme-panel:linear-gradient(145deg,rgba(2,22,39,.94),rgba(2,7,18,.98));
  --theme-panel-soft:rgba(2,16,30,.78);
  --theme-border:rgba(0,215,255,.44);
  --theme-border-strong:#00d7ff;
  --theme-input:rgba(1,10,21,.96);
  --theme-accent:#00d7ff;
  --theme-accent-2:#63efff;
  --theme-upper:linear-gradient(145deg,rgba(0,161,213,.13),rgba(2,7,18,.68));
  --theme-lower:linear-gradient(145deg,rgba(137,40,219,.15),rgba(2,7,18,.68));
  --theme-extension:linear-gradient(145deg,rgba(236,178,0,.11),rgba(19,13,1,.6));
  --theme-button-primary:linear-gradient(145deg,#00a63d,#006b2d);
  --theme-button-secondary:linear-gradient(145deg,#06324a,#031522);
  --theme-timer-face:linear-gradient(145deg,rgba(1,19,34,.98),rgba(2,5,14,.99));
  --theme-timer-glow:0 0 0 1px rgba(0,217,255,.72),0 0 18px rgba(0,217,255,.18),inset 0 0 24px rgba(0,217,255,.06);
  --theme-digit-font:"Segoe UI",Consolas,sans-serif;
  --theme-digit-shadow:0 0 8px rgba(255,255,255,.65),0 0 24px rgba(0,215,255,.42);
}
body[data-theme="cyber"] .page-header h1 { letter-spacing:.08em; text-shadow:0 0 8px #fff,0 0 24px rgba(0,215,255,.75); }
body[data-theme="cyber"] .timer-section-lower .timer-face { border-color:#8e43e6; box-shadow:0 0 0 1px rgba(142,67,230,.72),0 0 20px rgba(142,67,230,.2),inset 0 0 20px rgba(142,67,230,.06); }
body[data-theme="cyber"] .timer-section-extension .timer-face { border-color:#e4b719; }
body[data-theme="cyber"] .primary-button,
body[data-theme="cyber"] .secondary-button { border-radius:4px; clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
body[data-theme="cyber"] .finish-button { background:linear-gradient(145deg,#c6273e,#721020); border-color:#ff546b; box-shadow:0 0 16px rgba(255,45,78,.22); }

/* 5. スチームパンクA：純CSS */
body[data-theme="steam-css"] {
  color-scheme:dark;
  --theme-bg:
    repeating-linear-gradient(90deg,rgba(255,193,92,.022) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 18% 12%,rgba(216,140,53,.13),transparent 28%),
    radial-gradient(circle at 82% 88%,rgba(216,140,53,.1),transparent 30%),
    linear-gradient(180deg,#201309,#0c0704 72%,#050302);
  --theme-text:#f3dfb1;
  --theme-muted:#bda778;
  --theme-panel:linear-gradient(145deg,rgba(75,48,24,.92),rgba(20,12,7,.98));
  --theme-panel-soft:linear-gradient(145deg,rgba(54,34,17,.9),rgba(18,11,6,.96));
  --theme-border:rgba(186,125,52,.44);
  --theme-border-strong:rgba(213,154,72,.66);
  --theme-input:rgba(24,14,7,.96);
  --theme-accent:#b77a31;
  --theme-accent-2:#d4a155;
  --theme-upper:linear-gradient(145deg,rgba(109,72,34,.3),rgba(20,12,7,.78));
  --theme-lower:linear-gradient(145deg,rgba(82,51,25,.3),rgba(20,12,7,.78));
  --theme-extension:linear-gradient(145deg,rgba(119,72,22,.34),rgba(24,13,4,.78));
  --theme-button-primary:linear-gradient(145deg,#526029,#252d15);
  --theme-button-secondary:linear-gradient(145deg,#6c451d,#321e0e);
  --theme-timer-face:linear-gradient(145deg,#3a2412,#100a05 72%);
  --theme-timer-glow:inset 0 0 0 2px #120a04,inset 0 0 0 3px rgba(205,143,65,.24),0 8px 18px rgba(0,0,0,.36);
  --theme-digit-font:"Courier New",Consolas,monospace;
  --theme-digit-shadow:0 0 7px rgba(255,207,112,.55),0 0 20px rgba(231,145,38,.36);
}
body[data-theme="steam-css"] .minutes-display,
body[data-theme="steam-css"] .seconds-display,
body[data-theme="steam-css"] .time-colon { color:#ffd889; }
body[data-theme="steam-css"] .setup-group,
body[data-theme="steam-css"] .timer-section,
body[data-theme="steam-css"] .timer-face { border-width:2px; box-shadow:inset 0 0 0 1px #1a0f07,0 8px 18px rgba(0,0,0,.35); }
body[data-theme="steam-css"] .timer-face { position:relative; border-radius:10px; }
body[data-theme="steam-css"] .timer-face::after { content:""; position:absolute; inset:8px; pointer-events:none; border:1px dashed rgba(220,159,76,.18); border-radius:5px; }
body[data-theme="steam-css"] .primary-button,
body[data-theme="steam-css"] .secondary-button { border-radius:7px; box-shadow:inset 0 1px 0 rgba(255,221,154,.14),inset 0 -3px 0 rgba(41,21,7,.8),0 4px 8px rgba(0,0,0,.3); }
body[data-theme="steam-css"] .finish-button { background:linear-gradient(145deg,#8f3920,#4c1b0f); border-color:#bd704a; }

/* 6. スチームパンクB：CSS + SVG装飾 */
body[data-theme="steam-svg"] {
  color-scheme:dark;
  --theme-bg:
    url("assets/steam-gears.svg") -70px -80px/310px 310px no-repeat fixed,
    url("assets/steam-gears.svg") calc(100% + 70px) calc(100% + 70px)/350px 350px no-repeat fixed,
    radial-gradient(circle at center,#2d1c0e,#090503 72%);
  --theme-text:#f4ddb0;
  --theme-muted:#baa273;
  --theme-panel:linear-gradient(145deg,rgba(69,43,21,.93),rgba(18,10,5,.98));
  --theme-panel-soft:linear-gradient(145deg,rgba(49,29,13,.9),rgba(16,9,4,.96));
  --theme-border:rgba(190,128,55,.48);
  --theme-border-strong:rgba(226,165,83,.72);
  --theme-input:rgba(21,12,6,.97);
  --theme-accent:#bf7f32;
  --theme-accent-2:#e0ad61;
  --theme-upper:linear-gradient(145deg,rgba(102,66,31,.3),rgba(17,10,5,.8));
  --theme-lower:linear-gradient(145deg,rgba(77,46,23,.3),rgba(17,10,5,.8));
  --theme-extension:linear-gradient(145deg,rgba(127,77,24,.34),rgba(23,12,4,.8));
  --theme-button-primary:linear-gradient(145deg,#56622d,#2b3418);
  --theme-button-secondary:linear-gradient(145deg,#724a20,#321d0d);
  --theme-timer-face:linear-gradient(145deg,rgba(58,35,16,.98),rgba(12,7,3,.99));
  --theme-timer-glow:inset 0 0 0 2px #0b0603,inset 0 0 0 3px rgba(219,157,75,.28),0 8px 18px rgba(0,0,0,.4);
  --theme-digit-font:Georgia,"Times New Roman",serif;
  --theme-digit-shadow:0 0 7px rgba(255,207,112,.55),0 0 20px rgba(231,145,38,.36);
}
body[data-theme="steam-svg"] .app-shell::before,
body[data-theme="steam-svg"] .app-shell::after { content:""; position:fixed; z-index:-1; width:220px; height:220px; background:url("assets/steam-gears.svg") center/contain no-repeat; opacity:.2; pointer-events:none; }
body[data-theme="steam-svg"] .app-shell::before { left:-55px; top:34%; }
body[data-theme="steam-svg"] .app-shell::after { right:-50px; bottom:8%; transform:rotate(28deg); }
body[data-theme="steam-svg"] .minutes-display,
body[data-theme="steam-svg"] .seconds-display,
body[data-theme="steam-svg"] .time-colon { color:#ffd78a; font-weight:800; }
body[data-theme="steam-svg"] .setup-group,
body[data-theme="steam-svg"] .timer-section,
body[data-theme="steam-svg"] .timer-face { border-width:2px; }
body[data-theme="steam-svg"] .finish-button { background:linear-gradient(145deg,#913a20,#4d1d10); border-color:#c6774f; }

/* 7. スチームパンクC：CSS + 画像装飾 */
body[data-theme="steam-image"] {
  color-scheme:dark;
  --theme-bg:
    linear-gradient(rgba(8,4,2,.56),rgba(8,4,2,.72)),
    url("assets/steam-metal-texture.png") center/512px 512px repeat fixed;
  --theme-text:#f5dfb0;
  --theme-muted:#c0a978;
  --theme-panel:linear-gradient(145deg,rgba(77,49,24,.84),rgba(18,10,5,.93)),url("assets/steam-metal-texture.png") center/380px 380px;
  --theme-panel-soft:linear-gradient(rgba(31,18,8,.78),rgba(18,10,5,.84)),url("assets/steam-metal-texture.png") center/360px 360px;
  --theme-border:rgba(199,139,63,.5);
  --theme-border-strong:rgba(230,171,89,.76);
  --theme-input:rgba(20,11,5,.96);
  --theme-accent:#c78534;
  --theme-accent-2:#e3b364;
  --theme-upper:linear-gradient(rgba(56,34,15,.74),rgba(23,13,6,.86)),url("assets/steam-metal-texture.png") center/420px 420px;
  --theme-lower:linear-gradient(rgba(49,28,13,.76),rgba(20,11,5,.88)),url("assets/steam-metal-texture.png") center/420px 420px;
  --theme-extension:linear-gradient(rgba(70,42,14,.72),rgba(24,13,4,.88)),url("assets/steam-metal-texture.png") center/420px 420px;
  --theme-button-primary:linear-gradient(145deg,#59642e,#2c3518);
  --theme-button-secondary:linear-gradient(rgba(102,64,25,.76),rgba(48,28,12,.82)),url("assets/steam-metal-texture.png") center/220px 220px;
  --theme-timer-face:linear-gradient(rgba(36,20,8,.68),rgba(12,7,3,.86)),url("assets/steam-metal-texture.png") center/420px 420px;
  --theme-timer-glow:inset 0 0 0 2px #090502,inset 0 0 0 3px rgba(230,171,89,.24),0 10px 22px rgba(0,0,0,.42);
  --theme-digit-font:"Courier New",Consolas,monospace;
  --theme-digit-shadow:0 0 8px rgba(255,211,120,.62),0 0 22px rgba(235,149,44,.42);
}
body[data-theme="steam-image"] .minutes-display,
body[data-theme="steam-image"] .seconds-display,
body[data-theme="steam-image"] .time-colon { color:#ffda8d; }
body[data-theme="steam-image"] .setup-group,
body[data-theme="steam-image"] .timer-section,
body[data-theme="steam-image"] .timer-face,
body[data-theme="steam-image"] .floating-controls { border-width:2px; box-shadow:inset 0 0 0 1px rgba(20,10,4,.82),0 9px 20px rgba(0,0,0,.38); }
body[data-theme="steam-image"] .primary-button,
body[data-theme="steam-image"] .secondary-button { border-radius:7px; box-shadow:inset 0 1px 0 rgba(255,222,152,.14),inset 0 -3px 0 rgba(35,18,7,.72),0 4px 9px rgba(0,0,0,.32); }
body[data-theme="steam-image"] .finish-button { background:linear-gradient(rgba(128,48,25,.82),rgba(70,23,12,.9)),url("assets/steam-metal-texture.png") center/240px 240px; border-color:#ca794d; }

/* 全テーマ共通：操作ボタンの役割色を保つ */
body[data-theme] #start-all-button { background:linear-gradient(145deg,#3f8a43,#215527); border-color:#6eba74; }
body[data-theme="cyber"] #start-all-button { background:linear-gradient(145deg,#00b65a,#006735); border-color:#00ff84; box-shadow:0 0 18px rgba(0,255,132,.18); }
body[data-theme] #add-extension-button:not(:disabled) { border-color:#c89b48; }
body[data-theme] #finish-button { color:#fff; }

/* テーマごとに終了面も同系統にする */
body[data-theme] .timer-section-upper .group-face-back { background:var(--theme-upper); }
body[data-theme] .timer-section-lower .group-face-back { background:var(--theme-lower); }
body[data-theme] .board-finish-message { background:color-mix(in srgb,var(--theme-input) 74%,transparent); box-shadow:0 18px 60px rgba(0,0,0,.38),inset 0 0 34px color-mix(in srgb,var(--theme-accent) 8%,transparent); }

@media (max-width:760px) {
  .theme-fieldset { grid-template-columns:1fr; }
  .theme-setup-heading-row { display:grid; }
  .theme-experiment-note { justify-self:start; }
}

/* 第8回：テーマ内にUIフォントも含める（個別フォント切替は作らない） */
body[data-theme] { font-family:var(--theme-ui-font,"Segoe UI","Yu Gothic UI","Meiryo",sans-serif); }
body[data-theme="blue"] { --theme-ui-font:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif; }
body[data-theme="industrial"] { --theme-ui-font:"Arial Narrow","Yu Gothic UI","Meiryo",sans-serif; }
body[data-theme="minimal"] { --theme-ui-font:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif; }
body[data-theme="cyber"] { --theme-ui-font:"Arial","Yu Gothic UI","Meiryo",sans-serif; }
body[data-theme="steam-css"],
body[data-theme="steam-svg"],
body[data-theme="steam-image"] { --theme-ui-font:Georgia,"Yu Mincho","Hiragino Mincho ProN","Meiryo",serif; }