/* The age screen is independent of the application and its route styles. */
html[data-age-state]:not([data-age-state="approved"]) { background: #141e20; }
html[data-age-state]:not([data-age-state="approved"]) body { margin: 0; }
#age-gate[hidden], #app[hidden], .skip-link[hidden], #age-gate [hidden] { display: none !important; }
#age-gate { box-sizing: border-box; min-height: 100vh; min-height: 100svh; padding: 48px 24px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 0%, #24514b 0%, #182728 42%, #11191b 100%); color: #f5faf8; font-family: 'Aspekta', Arial, sans-serif; }
#age-gate .age-shell { width: 100%; max-width: 520px; text-align: center; }
#age-gate .age-logo { display: block; width: 146px; height: auto; margin: 0 auto 10px; }
#age-gate .age-region { font-size: 11px; font-weight: 600; letter-spacing: .25em; color: #c9d9d4; margin: 0 0 35px; }
#age-gate .age-badge { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 27px; border: 1px solid #83beb2; border-radius: 50%; background: #77bca610; color: #b9e8db; font-size: 37px; font-weight: 650; letter-spacing: -.04em; }
#age-gate h1 { margin: 0 0 16px; font: 600 clamp(28px, 4.5vw, 38px)/1.18 'Aspekta', Arial, sans-serif; letter-spacing: -.025em; }
#age-gate p { line-height: 1.65; }
#age-gate .age-description { margin: 0 auto 27px; max-width: 440px; color: #d0ded9; font-size: 16px; }
#age-gate .age-actions { display: grid; gap: 12px; }
#age-gate button, #age-gate .age-exit { box-sizing: border-box; width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid #769c94; border-radius: 8px; font: 600 15px/1.5 'Aspekta', Arial, sans-serif; cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
#age-gate .age-accept, #age-gate .age-exit { background: #b8e2d4; color: #172d26; border-color: #b8e2d4; }
#age-gate .age-accept:hover:not(:disabled), #age-gate .age-exit:hover { background: #d0f0e5; border-color: #d0f0e5; }
#age-gate .age-decline { background: transparent; color: #eff7f3; }
#age-gate .age-decline:hover:not(:disabled) { background: #ffffff0d; border-color: #bbd3ca; }
#age-gate button:disabled { opacity: .6; cursor: wait; }
#age-gate :focus-visible { outline: 3px solid #f4cf81; outline-offset: 5px; }
#age-gate .age-warning { margin: 26px 0 14px; padding-top: 23px; border-top: 1px solid #5f81764d; color: #e4ece8; font-size: 13px; }
#age-gate .age-note, #age-gate .age-help { margin: 10px 0 0; color: #bdcdc7; font-size: 12px; }
#age-gate .age-status { margin: 15px 0 0; font-size: 14px; color: #f4cf81; }
#age-gate .age-status:empty { display: none; }
#age-gate .age-exit { display: block; margin-top: 12px; }
@media(max-width: 480px) { #age-gate { padding: 30px 20px; } #age-gate .age-region { margin-bottom: 26px; } #age-gate .age-badge { width: 84px; height: 84px; font-size: 32px; margin-bottom: 23px; } #age-gate .age-description { font-size: 15px; } }
@media(prefers-reduced-motion: reduce) { #age-gate button, #age-gate .age-exit { transition: none; } }