:root {
  --bg0: #0d1726;
  --bg1: #16243a;
  --ink: #e8eef6;
  --ink-dim: #9fb0c6;
  --accent: #7ec8e3;
  --accent-soft: rgba(126, 200, 227, 0.18);
  --card: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 800px at 70% -10%, #1c2f4d 0%, transparent 60%),
    radial-gradient(1000px 700px at 10% 110%, #122036 0%, transparent 55%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
}

/* ----- views ----- */
.view {
  display: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 8px;
  animation: fade 0.5s ease;
}
.view.is-active { display: block; }

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.view-head { margin-bottom: 18px; }
.view-head h2 { margin: 10px 0 4px; font-weight: 600; letter-spacing: .04em; }
.view-head .sub { margin: 0; color: var(--ink-dim); font-size: .9rem; }

/* ----- top ----- */
.view--top { min-height: 78vh; display: none; place-content: center; text-align: center; }
.view--top.is-active { display: grid; }
.logo {
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  letter-spacing: .22em;
  margin: 0 0 .1em;
  font-weight: 300;
  text-indent: .22em;
}
.tagline { color: var(--accent); letter-spacing: .12em; margin: 0 0 1.6em; }
.lead { color: var(--ink-dim); line-height: 1.9; margin: 0 0 2.4em; }

/* ----- buttons ----- */
.btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 12px 22px;
  border-radius: 999px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--accent);
  color: #07151f;
  border-color: var(--accent);
  font-weight: 600;
  letter-spacing: .04em;
}
.btn--primary:hover { background: #9bd6ec; }
.btn--ghost { background: transparent; }
.btn--back { padding: 8px 14px; font-size: .88rem; color: var(--ink-dim); }

/* ----- bubbles (room select) ----- */
.bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding: 18px 0 30px;
}
.bubble {
  border: none;
  cursor: pointer;
  border-radius: 50%;
  color: var(--ink);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), var(--accent-soft) 55%, rgba(126,200,227,.05));
  border: 1px solid rgba(126,200,227,.35);
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.3;
  padding: 6px;
  animation: float 6s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bubble:hover { transform: scale(1.06); box-shadow: 0 0 28px var(--accent-soft); }
.bubble .b-name { font-size: .82rem; font-weight: 600; }
.bubble .b-count { font-size: .72rem; color: var(--ink-dim); margin-top: 2px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ----- setup form ----- */
.setup-form { display: grid; gap: 18px; max-width: 460px; }
.field { display: grid; gap: 6px; }
.field span { font-size: .86rem; color: var(--ink-dim); letter-spacing: .04em; }
.field input, .field select {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.setup-form .btn--primary { margin-top: 6px; justify-self: start; }

/* ----- focus timer ----- */
.timer-wrap { display: grid; place-items: center; gap: 18px; margin: 10px 0 30px; }
.ring { position: relative; width: min(74vw, 300px); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: var(--line); }
.ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 578;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.timer-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
.my-name { color: var(--accent); font-size: .92rem; font-weight: 600; letter-spacing: .06em; max-width: 80%; margin: 0 auto; }
.time { font-size: clamp(2.2rem, 11vw, 3.4rem); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.my-task { color: var(--ink-dim); font-size: .9rem; max-width: 80%; margin: 0 auto; }

/* ----- reactions ----- */
.reactions { max-width: 460px; margin: 0 auto 26px; text-align: center; }
.reactions-head { color: var(--ink-dim); font-size: .85rem; letter-spacing: .06em; margin: 0 0 10px; }
.reaction-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.react-btn {
  font: inherit;
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 64px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.react-btn:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.react-btn:active { transform: translateY(0) scale(.94); }
.react-btn .r-emoji { font-size: 1.4rem; line-height: 1; }
.react-btn .r-label { font-size: .68rem; color: var(--ink-dim); }

.react-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.react-float {
  position: absolute;
  bottom: 16%;
  will-change: transform, opacity;
  animation: rise 2.6s ease-out forwards;
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46vh) scale(1.1); }
}

/* 自分の行のハイライト */
.others-list li.is-me { opacity: 1; animation: none; border-color: var(--accent); background: var(--accent-soft); }
.others-list .o-you {
  font-size: .66rem; color: #07151f; background: var(--accent);
  padding: 1px 7px; border-radius: 999px; align-self: center; font-weight: 600;
}

.others { max-width: 460px; margin: 0 auto; }
.others-head { color: var(--ink-dim); font-size: .85rem; letter-spacing: .06em; margin: 0 0 10px; }
.others-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.others-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  opacity: .55;
  animation: breathe 5s ease-in-out infinite;
}
.others-list .o-name { font-weight: 600; font-size: .9rem; }
.others-list .o-task { color: var(--ink-dim); font-size: .82rem; }
.others-list .o-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto; align-self: center;
}

@keyframes breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: .8; }
}

.footnote {
  text-align: center;
  color: var(--ink-dim);
  font-size: .74rem;
  opacity: .6;
  padding: 0 20px 28px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .view, .bubble, .others-list li { animation: none !important; }
  .ring-fg { transition: none; }
  .react-float { animation-duration: 1.6s; }
}