/* Blitz45 Studio Timer — web version
   Brand palette (matches the iOS asset catalog):
     black  #080808   white #f7f7f7   red #d61822
   Layout goals: landscape, full-screen, huge high-contrast digits, no clutter. */

:root {
  --black: #080808;
  --white: #f7f7f7;
  --red: #d61822;
  --surface: rgba(255, 255, 255, 0.06);
  --stroke: rgba(255, 255, 255, 0.10);
  --subtle: rgba(255, 255, 255, 0.55);
  --radius: 18px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: relative; height: 100%; width: 100%; }

/* ---- Screens ---- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: clamp(16px, 3vh, 36px);
}
.screen.is-active { display: flex; }

/* ---- Wordmark (drawn in text) ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
}
.wordmark .w { color: var(--white); }
.wordmark .r { color: var(--red); }
.wordmark .logo { display: block; width: auto; height: 90px; }
.wordmark.sm .logo { height: 46px; }
.wordmark.big .logo { height: clamp(84px, 13vw, 150px); }

/* ---- Home ---- */
#screen-home { align-items: center; justify-content: center; gap: clamp(24px, 5vh, 56px); }
.home-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tagline { color: var(--subtle); font-weight: 700; letter-spacing: 0.4em; font-size: clamp(12px, 1.6vw, 20px); }
.mode-cards { display: flex; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; justify-content: center; }
.mode-card {
  width: clamp(220px, 26vw, 300px);
  height: clamp(180px, 34vh, 260px);
  background: var(--surface);
  border: 2px solid var(--stroke);
  border-radius: 24px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.mode-card:active { transform: scale(0.98); }
.mode-card:hover { border-color: var(--red); }
.mode-icon { width: clamp(52px, 6vw, 76px); height: clamp(52px, 6vw, 76px); color: var(--red); }
.mode-title { font-weight: 800; font-size: clamp(20px, 2.4vw, 30px); }
.mode-sub { color: var(--subtle); font-weight: 700; font-size: clamp(13px, 1.4vw, 18px); }

/* ---- Top bar ---- */
.bar { display: flex; align-items: center; gap: 12px; }
.bar-title { flex: 1; text-align: center; color: var(--subtle); font-weight: 700; letter-spacing: 0.25em; font-size: clamp(13px, 1.5vw, 20px); }
.bar-right { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.icon-btn.ghost { background: transparent; font-size: 22px; color: var(--subtle); }
.icon-btn:active { transform: scale(0.95); }

/* ---- Big display ---- */
.display-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.display {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--white);
  font-size: min(34vh, 24vw);
  white-space: nowrap;
}
.display.alert { color: var(--red); }

/* ---- Controls ---- */
.controls { display: flex; gap: clamp(12px, 2vw, 22px); justify-content: center; }
.btn {
  border: 2px solid var(--stroke);
  background: var(--surface);
  color: var(--white);
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 26px);
  min-height: 74px;
  padding: 0 clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--red); border-color: transparent; }
.btn.secondary { background: var(--surface); }
.btn.wide { min-width: clamp(200px, 24vw, 280px); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.chip { min-height: 60px; font-size: clamp(16px, 1.7vw, 22px); padding: 0 clamp(14px, 2vw, 24px); border-radius: 14px; }

/* ---- Countdown setup ---- */
.setup { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 28px); }
.setup-label { color: var(--subtle); font-weight: 700; letter-spacing: 0.25em; font-size: clamp(13px, 1.5vw, 20px); }
.wheel-row { display: flex; align-items: center; gap: clamp(8px, 1.5vw, 16px); }
.stepper { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 6px; position: relative; }
.step {
  width: 84px; height: 44px;
  border: 2px solid var(--stroke);
  background: var(--surface);
  color: var(--white);
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
}
.step:active { transform: scale(0.96); }
.step-val { font-size: clamp(30px, 4vw, 44px); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 84px; text-align: center; }
.step-unit { color: var(--subtle); font-weight: 700; font-size: 15px; }
.colon { font-size: clamp(30px, 4vw, 44px); font-weight: 800; color: var(--subtle); align-self: center; padding-top: 44px; }
.presets { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- Adjust row (countdown running) ---- */
.adjust-row { display: flex; gap: 12px; justify-content: center; margin-bottom: clamp(10px, 2vh, 20px); }

/* ---- Rotate hint (portrait phones only) ---- */
.rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--black);
  color: var(--subtle);
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media (max-aspect-ratio: 1/1) and (max-width: 820px) {
  .rotate-hint { display: flex; }
}