:root {
  --bg-top: #0f3d57;
  --bg-mid: #13706b;
  --bg-low: #2fae7a;
  --accent: #ffcf4a;
  --accent-shadow: #c29400;
}

#timer {
  height: 8px;
  margin: 0 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
#timer-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
}
#timer-fill.low { background: var(--bad); }

#stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, calc(var(--u) * 4), 36px);
  padding: 16px;
  position: relative;
}
#ask {
  font-size: clamp(13px, calc(var(--u) * 2), 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

#sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, calc(var(--u) * 1.4), 14px);
  max-width: min(900px, 100%);
}
.chip {
  border: 0;
  border-radius: 14px;
  padding: .45em .7em;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: clamp(20px, calc(var(--u) * 4.6), 40px);
  cursor: pointer;
  box-shadow: 0 .18em 0 rgba(0,0,0,.25);
  transition: transform .12s ease-out, background-color .15s;
}
.chip:active { transform: translateY(2px); }
.chip:focus-visible, #btn-ok:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.chip.right { background: var(--good); }
.chip.wrong { background: var(--bad); color: #fff; animation: shake .35s ease-out; }
.chip.culprit { background: var(--accent); }
.chip.struck { text-decoration: line-through; text-decoration-thickness: 3px; }
.chip.dim { opacity: .55; }

#btn-ok { font-size: clamp(16px, calc(var(--u) * 2.6), 22px); padding: 12px 28px; }
#btn-ok .key { margin-right: .5em; opacity: .6; font-size: .75em; }
#btn-ok.right { background: var(--good); color: var(--ink); }
#btn-ok.wrong { background: var(--bad); animation: shake .35s ease-out; }

#feedback {
  width: min(560px, 100%);
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(10,20,40,.55);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
#fb-title { font-weight: 900; font-size: clamp(20px, calc(var(--u) * 3.6), 30px); }
#fb-title.good { color: var(--good); }
#fb-title.bad { color: var(--bad); }
#fb-fix { font-size: clamp(16px, calc(var(--u) * 2.8), 22px); }
#fb-fix b { color: var(--accent); }
#fb-tip { font-size: clamp(14px, calc(var(--u) * 2.3), 18px); opacity: .9; line-height: 1.4; }
#btn-next { margin-top: 6px; padding: 10px 34px; }