@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

.company-name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-variant: normal;
  text-transform: none;
}

html[lang="ja"] {
  --japanese-font: 'MS Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif;
}

html[lang="ja"] body,
html[lang="ja"] [data-ja] {
  font-family: var(--japanese-font);
}

* { box-sizing: border-box; }

img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

html, body { margin: 0; min-height: 100%; }

body {
  background: #102331;
  color: #fff;
  font-family: 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}

button, a { font: inherit; }

.age-gate {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: #102331 url('../assets/age-gate-rice.png') center center / cover no-repeat;
}

.age-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(8, 21, 31, .79) 0%, rgba(8, 21, 31, .66) 46%, rgba(8, 21, 31, .28) 100%);
}

.rice-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.rice-grain {
  position: absolute;
  top: -18px;
  left: var(--left);
  width: var(--width);
  height: var(--height);
  border-radius: 58% 42% 54% 46%;
  background: #efe3c8;
  box-shadow: 0 0 5px rgba(255, 240, 208, .34);
  opacity: var(--opacity);
  filter: blur(var(--blur));
  animation: rice-fall var(--duration) linear var(--delay) infinite;
}

@keyframes rice-fall {
  from { transform: translate3d(0, -12vh, 0) rotate(20deg); }
  to { transform: translate3d(var(--drift), 115vh, 0) rotate(390deg); }
}

.age-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(100%, 1600px);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 38px clamp(26px, 5.5vw, 96px) 30px;
}

.age-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.age-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font: 600 clamp(15px, 1.4vw, 21px) 'Cinzel', Georgia, serif;
  letter-spacing: .07em;
  white-space: nowrap;
}

.age-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.age-language {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #d4d3cf;
  font-size: 13px;
}

.age-language button {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.age-language button.active,
.age-language button:hover,
.age-language button:focus-visible { color: #e8c58e; }

.age-language .lang-short { display: none; }

@media (max-width: 560px) {
  .age-language .lang-full { display: none; }
  .age-language .lang-short { display: inline; }
}

.age-content {
  width: min(100%, 650px);
  margin: auto 0;
  padding: 75px 0 92px;
}

.age-eyebrow {
  color: #e4bf83;
  font: 500 13px 'Cinzel', Georgia, serif;
  letter-spacing: .22em;
}

.age-content h1 {
  margin: 24px 0 24px;
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.age-description {
  max-width: 545px;
  margin: 0;
  color: #edece7;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.9;
  text-wrap: pretty;
}

.age-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 360px);
  margin-top: 36px;
}

.age-choices button,
.age-retry {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4c18b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.age-choices button:hover,
.age-choices button:focus-visible,
.age-retry:hover,
.age-retry:focus-visible { transform: translateY(-2px); }

.age-yes {
  background: #e4c18b;
  color: #142736;
}

.age-yes:hover,
.age-yes:focus-visible { background: #f1d7ac; }

.age-no {
  background: rgba(9, 28, 41, .58);
  color: #fff;
}

.age-no:hover,
.age-no:focus-visible { background: rgba(9, 28, 41, .78); }

.age-retry {
  width: fit-content;
  margin-top: 36px;
  padding: 0 22px;
  background: #e4c18b;
  color: #142736;
}

.age-footer {
  color: #dad9d5;
  font: 12px Georgia, serif;
  letter-spacing: .08em;
}

@media (max-width: 650px) {
  .age-gate { background-position: 88% center; }

  .age-gate::before {
    background: linear-gradient(90deg, rgba(8, 21, 31, .82), rgba(8, 21, 31, .52));
  }

  .age-shell { padding: 22px 22px 26px; }

  .age-brand { gap: 7px; font-size: 13px; }

  .age-brand img { width: 38px; height: 38px; }

  .age-language { gap: 3px; font-size: 11px; }

  .age-content { padding: 75px 0; }

  .age-content h1 { font-size: clamp(34px, 9vw, 48px); }

  .age-description { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .rice-grain { animation: none; display: none; }
  .age-choices button, .age-retry { transition: none; }
}