:root {
  --apple-red: #ff3b30;
  --sage-green: #7ba67b;
  --offwhite: rgba(255,255,255,0.85);
  --ring-bg: rgba(255,255,255,0.25);
  --timer-text: #fff;
  --timer-border: #fff;
}

body {
  margin: 0;
  font-family: "Hiragino Sans", sans-serif;
  /* 動画が流れる前でも白文字が読めるよう、背景は墨色にしておく */
  background: linear-gradient(160deg, #2b2d33 0%, #17181c 100%);
  color: #222;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

#splash-screen {
  position: fixed; inset: 0;
  background: #fff;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  z-index: 9999;
  animation: splashFade 2s ease 0.4s forwards;
}
#splash-screen img { width: 120px; margin-bottom: 10px; }
#splash-screen h1 { font-size: 1.4rem; color: #111; }
@keyframes splashFade { 0%,80%{opacity:1}100%{opacity:0;visibility:hidden;} }

#bg-video {
  position: fixed; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 100vw; height: 100vh; object-fit: cover;
  z-index: -1; transition: opacity .8s ease;
}
.fadeout { opacity: 0; }

header { display:flex; justify-content:center; margin-top:10px; }
#mode-icons { display:flex; gap:40px; }
.mode-icon {
  position:relative; width:90px; height:90px; border-radius:50%;
  background: rgba(255,255,255,0.65);
  border:3px solid transparent;
  display:flex; align-items:center; justify-content:center;
  transition:.25s;
}
.mode-icon.active { transform:scale(1.1); }
.icon-img { width:60px; height:60px; }
.mode-text { position:absolute; bottom:6px; width:100%; font-size:.8em; font-weight:700; color:#333; }

/*
  Raise timer display further up the page by decreasing the viewport-based
  margin. The timer, its surrounding ring and progress indicator now sit
  closer to the top of the screen so they are more prominent.
*/
#timer-wrapper {
  margin-top: calc(15vh - 100px);
  display: flex;
  justify-content: center;
  align-items: center;
}
#timer-circle { position:relative; width:min(82vw,360px); height:min(82vw,360px); }
#timer-display {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:3.6rem; font-weight:800; color:var(--timer-text);
  border:6px solid var(--timer-border); border-radius:50%; background:transparent;
}
#progress-ring { position:absolute; inset:0; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--ring-bg); stroke-width:16; }
.ring-fg { fill:none; stroke:var(--apple-red); stroke-width:16; stroke-linecap:round;
  stroke-dasharray:1055; transition:stroke-dashoffset .9s linear, stroke .25s ease; }

#remaining { color:var(--offwhite); margin-top:18px; font-size:1rem; }
#message { color:var(--offwhite); margin-top:6px; font-size:1.1rem; font-weight:700; }

#controls { display:flex; justify-content:center; gap:38px; margin-top:12px; }
.ctrl-btn {
  width:78px; height:78px; border-radius:50%;
  background:#fff; border:2px solid #222; display:grid; place-items:center;
  transition:.15s;
}
.ctrl-btn:hover { transform:scale(1.05); }
.ctrl-btn img { width:38px; height:38px; }

/* ▼ ページ切替 */
.page { display:none; }
.page.active { display:block; animation: fadePage .4s ease; }
@keyframes fadePage { from{opacity:0} to{opacity:1} }

/* ▼ 記録画面 */
.page-title { color:#fff; font-size:1.2rem; margin:24px 0 12px; }
#today-summary { display:flex; justify-content:center; gap:16px; margin:0 20px 18px; }
.summary-card {
  flex:1; max-width:150px; padding:12px 8px; border-radius:16px;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
}
.summary-label { margin:0; font-size:.8rem; color:var(--offwhite); }
.summary-value { margin:4px 0 0; font-size:2rem; font-weight:800; color:#fff; }
.summary-value small { font-size:.9rem; font-weight:600; }
#records-list { margin:0 24px; }
.record-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 4px; border-bottom:1px solid rgba(255,255,255,0.15);
  color:#fff; font-size:.95rem;
}
.record-day { width:86px; text-align:left; flex-shrink:0; }
.record-shuriken { flex:1; text-align:left; letter-spacing:2px; overflow:hidden; white-space:nowrap; }
.record-min { width:56px; text-align:right; font-weight:700; }
#week-total { color:var(--offwhite); margin-top:14px; font-size:.95rem; }

/* ▼ 設定画面 */
.setting-group { margin:30px auto; }
.setting-title { font-size:1rem; color:#fff; font-weight:700; }
.circle-setting {
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:6px;
}
.circle-value {
  width:100px; height:100px; border-radius:50%;
  border:3px solid #fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700;
}
.circle-setting button {
  font-size:2rem; color:#fff;
  background:transparent; border:none; cursor:pointer;
  width:40px; height:40px;
}

/* ▼ 下部タブナビ（スマホアプリ風） */
#tab-nav {
  position:fixed; bottom:0; left:0; right:0;
  height:64px; background:rgba(255,255,255,0.15);
  display:flex; justify-content:space-around; align-items:center;
  backdrop-filter: blur(8px);
}
.tab-btn {
  flex:1; height:100%; font-size:1rem; border:none; background:transparent;
  color:#fff; font-weight:600; cursor:pointer;
  transition:background .25s;
}
.tab-btn.active { background:rgba(255,255,255,0.2); border-top:2px solid var(--apple-red); }