:root { font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}
.background-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.background-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
}
.bg-slide {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(88vw, 1450px) auto;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  filter: saturate(0.95);
}
.bg-slide.active { opacity: 0.62; }
.header, .main, .status, .footer {
  position: relative;
  z-index: 1;
}
.header {
  background: #1f4f82;
  color: #fff;
  text-align: center;
  padding: 14px;
  font-size: 2rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.main { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1; padding: 16px; }
.side {
  background: rgba(255,255,255,0.84);
  backdrop-filter: blur(1px);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.side h2 { text-align: center; margin: 0 0 10px; font-size: 1.8rem; }
.timer { text-align: center; font-size: 4rem; font-weight: 700; margin: 8px 0 12px; }
.button { width: 100%; padding: 14px 10px; margin: 6px 0; font-size: 1.35rem; font-weight: 700; border: 2px solid #333; border-radius: 9px; background: #fff; cursor: pointer; }
.button:active { transform: scale(.98); background: #eee; }
.reset { background: #333; color: #fff; }
.status { text-align: center; padding: 10px; min-height: 42px; font-size: 1.05rem; }
.footer { text-align: center; padding: 0 12px 14px; }
.footer a { color: #555; font-size: .95rem; }
@media (max-width: 750px) {
  .main { grid-template-columns: 1fr; }
  .timer { font-size: 3.4rem; }
  .bg-slide { background-size: 105vw auto; }
}