/* Website entry uses the game's existing Figma actions and materials. */
html[data-age-pending] { overflow: hidden; background: #080808; }
html[data-age-pending] body > :not(.age-gate):not(noscript) { visibility: hidden !important; }
body.ui-figma .age-gate {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; height: 100dvh;
  max-width: none; max-height: none; border: 0; border-radius: 0; padding: max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  color: var(--f-ivory); background: var(--f-black); overflow: hidden;
}
.age-gate[open] { display: grid; place-items: center; }
.age-gate::backdrop { background: #080808; }
.age-gate__content { width: 100%; display: grid; justify-items: center; gap: clamp(10px,2.4vmin,52px); text-align: center; }
.age-gate__identity { display: grid; justify-items: center; gap: clamp(4px,1vmin,22px); }
.age-gate__wordmark { display: block; width: clamp(128px,30vmin,440px); height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
body.ui-figma .age-gate h1 { margin: 0; max-width: none; grid-area: auto; font: 600 clamp(28px,6vmin,128px)/1.15 var(--font-display); text-wrap: balance; }
.age-gate__actions { display: flex; justify-content: center; gap: clamp(16px,3vmin,64px); width: 100%; }
body.ui-figma .age-gate .f-button {
  --f-button-image: url('/Devil_inc/img/figma-ui/main-primary.webp');
  --f-button-pressed: url('/Devil_inc/img/figma-ui/main-primary.webp');
  --f-button-focus: url('/Devil_inc/img/figma-ui/main-primary.webp');
  --f-button-disabled: url('/Devil_inc/img/figma-ui/main-primary.webp');
  width: clamp(148px,24vmin,520px); aspect-ratio: 567/187; min-height: 48px;
  padding: 8px 16px; font-size: clamp(20px,3vmin,64px);
}
.age-gate__statistics { width: 100%; display: grid; justify-items: center; gap: clamp(6px,1vmin,22px); }
body.ui-figma .age-gate__statistics h2 { margin: 0; font: 600 clamp(17px,2.8vmin,60px)/1.2 var(--font-display); }
.age-gate__statistics p { margin: 0; max-width: 60ch; font: 400 clamp(12px,1.8vmin,38px)/1.35 var(--font-ui); color: var(--f-muted); text-wrap: balance; }
.age-gate__statistics a { color: var(--f-muted); font: 400 clamp(12px,1.6vmin,34px)/1.3 var(--font-ui); text-decoration: underline; }
body.ui-figma .age-gate button.f-button[aria-pressed=false],
body.ui-figma .age-gate button.f-button[aria-pressed=false]:is(:hover,:focus-visible,:active),
body.ui-figma .age-gate button.f-button[data-age-continue]:disabled { filter: grayscale(1); }
body.ui-figma .age-gate button.f-button[aria-pressed=true] { color: var(--f-focus); }
@media(max-height:450px) {
  body.ui-figma .age-gate { padding-top: max(10px,env(safe-area-inset-top)); padding-bottom: max(10px,env(safe-area-inset-bottom)); }
}
@media(max-height:350px) {
  .age-gate__content,.age-gate__statistics { gap: 4px; }
}
@media(max-height:400px) { .age-gate__content,.age-gate__statistics { gap: 4px; } }
/* The shortest landscape screens keep the identity stacked beside the form. */
@media(max-height:350px) and (orientation:landscape) {
  .age-gate__content { grid-template-columns: minmax(90px,.2fr) minmax(0,1fr); gap: 4px 12px; }
  .age-gate__identity { grid-column: 1; grid-row: 1 / 5; align-self: center; }
  .age-gate__wordmark { width: clamp(72px,24vmin,120px); }
  .age-gate__content > :not(.age-gate__identity) { grid-column: 2; }
}
.age-gate[aria-busy=true]::after { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--f-red); animation: age-loading 1s ease-in-out infinite alternate; transform-origin: left; }
@keyframes age-loading { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
@media(prefers-reduced-motion:reduce) { .age-gate[aria-busy=true]::after { animation: none; } }