:root {
  color-scheme: dark;
  font-family: Roboto, system-ui, sans-serif;
  color: #faf6ee;
  background: #151515;
  --accent: #ff8b42;
  --muted: #b3aca5;
  --stroke: #363330;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 52% 15%, #29221e 0, #151515 60%);
}
.shell {
  width: min(100%, 880px);
  margin-inline: auto;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.hero {
  min-height: clamp(288px, 44vw, 410px);
  display: flex;
  align-items: end;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background:
    linear-gradient(0deg, #110f0de8 0%, #120f0d48 58%, transparent 100%),
    linear-gradient(90deg, #100d0bd9 0%, #100d0b26 70%),
    #3b2820 url('/hero.jpg') center 53% / cover no-repeat;
  overflow: hidden;
}
.hero-copy { padding: clamp(22px, 6vw, 54px); }
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: #ffe0cb;
  font-size: clamp(.72rem, 2vw, .85rem);
  font-weight: 700;
  letter-spacing: .15em;
  margin-bottom: 15px;
}
.brand span { font-size: 1.3rem; }
h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 4.3rem);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px #120e0d;
}
h1 em { color: var(--accent); font-style: normal; }
.panel {
  margin-top: 12px;
  background: #201f1e;
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: clamp(12px, 3vw, 26px);
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 2vw, 14px);
}
.unit {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 17px 1px 13px;
  background: linear-gradient(160deg, #2b2927, #242322);
  border: 1px solid #393633;
  border-radius: 13px;
}
.unit span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(1.35rem, 5.7vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.07em;
}
.unit span.long { font-size: clamp(1rem, 4.3vw, 2.5rem); }
.unit small {
  font-size: clamp(.55rem, 2vw, .78rem);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--muted);
}
.seconds {
  border-color: #785032;
  background: linear-gradient(155deg, #3a2a21, #2b241e);
  box-shadow: inset 0 0 16px rgb(255 139 66 / 11%);
}
.seconds span { color: var(--accent); }
.details {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
  border-top: 1px solid var(--stroke);
  padding-top: 16px;
}
.details div { display: flex; gap: 8px; align-items: center; }
.details span { color: var(--accent); font-size: 1.25rem; }
.details p { margin: 0; color: var(--muted); font-size: .77rem; }
.details strong { display: block; margin-top: 3px; font-size: .98rem; color: #faf6ee; }
.opened { text-align: center; padding: 20px 4px; }
.opened strong { font-size: clamp(1.75rem, 6vw, 3.2rem); color: var(--accent); text-transform: uppercase; }
.opened p { margin: 8px 0 0; }
.status { color: #f5c5a6; margin-top: 12px; font-size: .875rem; }
.retry {
  margin-top: 10px;
  border: 1px solid #785032;
  border-radius: 8px;
  padding: 10px 14px;
  background: #33251f;
  color: #ffe0cb;
  font: inherit;
  cursor: pointer;
}
.footer { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
@media (max-width: 520px) {
  .hero { background-position: center, center, 89% center; }
  .hero-copy { padding-bottom: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: enter .35s ease-out both; }
  @keyframes enter { from { opacity: 0; transform: translateY(7px); } }
}