:root{
  --bg:#0b1026;
  --panel:#121a36;
  --panel-2:#0d1430;
  --line:#26325e;
  --text:#f1f5ff;
  --muted:#9fb0d8;
  --primary:#22c55e;
  --primary-600:#16a34a;
  --accent:#38bdf8;
  --amber:#fbbf24;
  --danger:#f87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",ui-sans-serif,system-ui,sans-serif;
  font-size:18px;
  background:
    radial-gradient(1000px 700px at 15% -10%, #16224d 0%, transparent 55%),
    radial-gradient(900px 700px at 110% 15%, #0e2a4a 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:680px;
  margin:0 auto;
  padding:20px 16px 44px;
}

/* ---------- header ---------- */
.header{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.app-icon{width:52px; height:52px; border-radius:12px; object-fit:cover; background:#fff; border:1px solid var(--line)}
h1{
  flex:1;
  font-size:clamp(24px, 3vw + 14px, 32px);
  margin:0;
  color:#fff;
  letter-spacing:0.04em;
}
.sound-toggle{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--panel); color:var(--text);
  border:2px solid var(--line); border-radius:14px;
  padding:8px 14px; cursor:pointer; font-size:15px;
}
.sound-toggle .sound-icon{font-size:22px; line-height:1}
.sound-toggle[aria-pressed="false"]{opacity:.55}
.sound-toggle[aria-pressed="false"] .sound-icon{filter:grayscale(1)}

/* ---------- clock with progress ring ---------- */
.clock{
  position:relative;
  width:min(88vw, 380px);
  margin:14px auto 6px;
  aspect-ratio:1;
}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring-bg{
  fill:none; stroke:#1b2650; stroke-width:14;
}
.ring-bar{
  fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(56,189,248,.55));
  transition:stroke-dashoffset .25s linear, stroke .4s;
}
.clock.warning .ring-bar{stroke:var(--amber); filter:drop-shadow(0 0 8px rgba(251,191,36,.6))}
.clock.danger .ring-bar{stroke:var(--danger); filter:drop-shadow(0 0 10px rgba(248,113,113,.7))}
.clock.danger .time{color:var(--danger); animation:pulse 1s infinite}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.clock-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
}
.time{
  font-variant-numeric:tabular-nums;
  font-weight:800;
  letter-spacing:.02em;
  font-size:clamp(56px, 17vw, 84px);
  color:#fff;
  text-shadow:0 0 24px rgba(56,189,248,.35);
  line-height:1;
}
.time.long{font-size:clamp(40px, 12vw, 62px)}
.state-label{
  color:var(--muted);
  font-size:clamp(15px, 2.5vw, 18px);
  min-height:1.4em;
}

/* ---------- add-time buttons ---------- */
.adders{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0 6px}
.adder{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  color:#fff; border:2px solid var(--line); border-radius:14px;
  padding:14px 18px; font-size:21px; font-weight:700; cursor:pointer;
  min-width:104px; min-height:58px;
}
.adder:hover{border-color:var(--accent)}
.adder.clear{color:var(--muted); font-size:17px; min-width:auto}
.adder:disabled{opacity:.4; cursor:not-allowed}

/* ---------- presets ---------- */
.presets{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:10px; margin:14px 0 4px;
}
.presets button{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:2px solid var(--line); border-radius:16px;
  padding:12px 6px 10px; cursor:pointer; color:var(--text);
}
.presets button:hover{border-color:var(--accent); transform:translateY(-2px)}
.presets button:disabled{opacity:.4; cursor:not-allowed; transform:none}
.p-emoji{font-size:30px; line-height:1.2}
.p-min{font-size:22px; font-weight:800; color:#fff}
.p-use{font-size:14px; color:var(--muted)}

/* ---------- main controls ---------- */
.controls{display:flex; gap:12px; margin:18px 0 4px}
button{font-family:inherit}
button.big{
  flex:1; min-height:72px; font-size:clamp(22px, 3.5vw, 28px); font-weight:800;
  border-radius:18px; cursor:pointer; border:none; letter-spacing:.05em;
}
button.primary{
  background:linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#03210f;
  box-shadow:0 6px 20px rgba(34,197,94,.35);
}
button.primary:hover{filter:brightness(1.08)}
button.primary:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
button.big.pause{
  background:linear-gradient(180deg, #fbbf24, #d97706);
  color:#2b1600;
  box-shadow:0 6px 20px rgba(251,191,36,.3);
}
button.ghost{
  background:var(--panel-2); color:var(--text); border:2px solid var(--line);
}
button.ghost:hover{border-color:#3d4d86}
button:active{transform:translateY(1px)}

.hint{color:var(--muted); font-size:14px; margin-top:16px; text-align:center}

/* ---------- finished overlay ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,26,.8); backdrop-filter:blur(4px);
  animation:flash 1s infinite;
}
@keyframes flash{
  0%,100%{background:rgba(4,8,26,.8)}
  50%{background:rgba(30,32,8,.82)}
}
.overlay[hidden]{display:none}
.overlay-card{
  background:linear-gradient(180deg, #1a2450, #121a36);
  border:2px solid #3d4d86; border-radius:24px;
  padding:36px 32px; text-align:center; max-width:90vw; width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.overlay-emoji{font-size:72px; line-height:1; animation:bounce .8s infinite}
@keyframes bounce{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-14px) rotate(8deg)}
}
.overlay-title{font-size:clamp(26px, 5vw, 34px); font-weight:800; color:#fff; margin:14px 0 6px}
.overlay-msg{color:var(--muted); font-size:19px; margin-bottom:22px}
.overlay-card .big{width:100%}

@media (max-width:420px){
  .adders{gap:8px}
  .adder{min-width:88px; padding:12px 12px; font-size:19px}
}