:root{
  --bg:#000;
  --panel:#111;
  --panel2:#222;
  --green:#28a745;
  --yellow:#ffc107;
  --text:#fff;
  --shadow:rgba(255,255,255,0.08);
}

body{
  margin:0;
  padding:20px 10px;
  background:var(--bg);
  color:var(--text);
  font-family:'メイリオ', Meiryo, system-ui, sans-serif;
  text-align:center;
}

#pomodoro{
  max-width:560px;
  margin:0 auto;
  background:var(--panel);
  padding:25px 20px;
  border-radius:16px;
  box-shadow:0 4px 25px var(--shadow);
}

h2{ margin:0 0 18px; font-size:20px; line-height:1.4; }

/* tabs */
.mode-tabs button{
  background:var(--panel2);
  color:var(--text);
  border:none;
  padding:10px 16px;
  margin:5px;
  border-radius:8px;
  font-size:14px;
  cursor:pointer;
}
.mode-tabs button.active{ background:var(--green); }

/* presets */
.presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:18px 0;
}
.presets button{
  background:var(--panel2);
  color:var(--text);
  border:none;
  padding:9px 14px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
}

/* custom */
.custom{ margin:12px 0; font-size:14px; }
#customMin{
  width:90px;
  background:var(--panel2);
  color:var(--text);
  border:none;
  padding:8px;
  border-radius:6px;
  text-align:center;
  margin-left:6px;
}
#setCustom{
  background:#444;
  color:var(--text);
  border:none;
  padding:8px 16px;
  margin-left:8px;
  border-radius:6px;
  cursor:pointer;
}

/* timer circle */
.timer-container{
  position:relative;
  width:260px;
  height:260px;
  margin:22px auto;              /* ★中央 */
  margin-left:auto;
  margin-right:auto;
}
.timer-container svg{
  transform:rotate(-90deg);
}

/* ★黒い円盤対策：塗りつぶし禁止 */
#pomodoro svg circle{ fill:none !important; }

circle.bg{
  stroke:var(--panel2);
  stroke-width:24;
}
circle.fg{
  stroke:#FFE4B5;
  stroke-width:24;
  stroke-linecap:round;
}

#timer{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:78px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--text);
  text-shadow:0 0 10px #000;
}

.info{
  font-size:14px;
  opacity:0.9;
  margin:12px 0;
  line-height:1.8;
}

/* buttons */
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:8px;
}

button.main-btn{
  background:var(--green);
  color:var(--text);
  border:none;
  padding:13px 20px;
  font-size:15px;
  border-radius:8px;
  cursor:pointer;
  min-width:120px;
}
button.main-btn:hover{ filter:brightness(0.95); }
button.pause-btn{ background:var(--yellow); color:#000; }
button.reset-btn{ background:#333; }
button.test-btn{ background:#444; }

#status{
  margin-top:12px;
  font-size:14px;
  font-weight:700;
  min-height:24px;
}

/* howto */
.howto{
  text-align:left;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #2b2b2b;
  font-size:14px;
  opacity:0.95;
}
.howto h3{ margin:0 0 8px; font-size:16px; }
.howto ol, .howto ul{ margin:8px 0; padding-left:20px; }

/* ===== PCだけタイマーを大きく ===== */
@media (min-width: 768px){
  #pomodoro{ max-width: 720px; }
  .timer-container{ width:340px; height:340px; }
  .timer-container svg{ width:340px; height:340px; }
  #timer{ font-size:104px; letter-spacing:4px; }
}

@media (max-width:520px){
  #pomodoro{ padding:22px 16px; }
  button.main-btn{ min-width:46%; }
}