@font-face {
  font-family: Manrope;
  src: url('./assets/fonts/manrope-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: #14161a;
  color: #f5f5f6;
  font-family: Manrope, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  z-index: -2;
  inset: 0;
  background: #14161a url('./assets/age-background.jpg') center top / cover no-repeat;
  filter: blur(10px) saturate(.88) brightness(.75);
  transform: scale(1.055);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 43%, #ff501c0c 0%, #0c0f16a6 100%),
    linear-gradient(180deg, #10121759, #1012176b 60%, #10121799);
  pointer-events: none;
}
main {
  width: min(100%, 470px);
  position: relative;
  padding: 45px 37px 43px;
  border: 1px solid #ffffff16;
  border-radius: 22px;
  background: linear-gradient(150deg, #282b33d9, #15181ee8);
  box-shadow: 0 28px 90px #0008, 0 1px 0 #ffffff0a inset;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
}
main::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff9a6a9c, transparent);
  pointer-events: none;
}
h1 {
  margin: 0 0 33px;
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.35;
  text-shadow: 0 3px 22px #0004;
}
.age-actions { display: flex; justify-content: center; gap: 14px; }
button {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 15px 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ff895f;
  border-radius: 11px;
  background: linear-gradient(165deg, #ff8650 -20%, #ff5720 47%, #ef3c10 100%);
  box-shadow: 0 5px 0 #9f2d0f, 0 9px 28px #ff501c35, 0 1px 0 #ffc3a778 inset;
  color: #fff;
  font: 800 16px/1.3 Manrope, Arial, sans-serif;
  text-shadow: 0 1px 2px #8f260f38;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 24%, #ffffff1c 44%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .5s ease;
  pointer-events: none;
}
@media(hover: hover) {
  button:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 7px 0 #9f2d0f, 0 14px 35px #ff501c4d, 0 1px 0 #ffc3a778 inset;
  }
  button:hover::before { transform: translateX(110%); }
  #decline-age:hover {
    border-color: #9b7969;
    box-shadow: 0 7px 0 #11151a, 0 12px 25px #0004, 0 1px 0 #ffffff18 inset;
  }
}
#decline-age {
  border-color: #535b68;
  background: linear-gradient(165deg, #414854 -20%, #2d333d 55%, #242a32);
  box-shadow: 0 5px 0 #11151a, 0 9px 22px #0003, 0 1px 0 #ffffff20 inset;
  text-shadow: 0 1px 2px #0005;
}
button:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #9f2d0f, 0 5px 15px #ff501c2b;
}
#decline-age:active { box-shadow: 0 2px 0 #11151a, 0 5px 15px #0003; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media(max-width: 480px) {
  body { padding: 20px; }
  body::before { background-position: 54% top; filter: blur(9px) saturate(.88) brightness(.75); }
  main { padding: 34px 23px 35px; border-radius: 19px; }
  h1 { font-size: clamp(22px, 5.9vw, 27px); letter-spacing: -.6px; margin-bottom: 28px; }
  .age-actions { gap: 12px; }
  button { min-height: 53px; border-radius: 10px; padding: 14px 12px; }
}
@media(max-width: 350px) {
  body { padding: 16px; }
  main { padding: 30px 17px 31px; }
  h1 { font-size: 22px; letter-spacing: -.8px; }
}
@media(max-height: 300px) {
  body { padding: 16px; }
  main { padding-top: 24px; padding-bottom: 26px; }
  h1 { margin-bottom: 21px; }
}
@media(prefers-reduced-motion: reduce) { button, button::before { transition: none; } }