/* =====================================================================
   isREAL public UI — age gate (ルートのみのインタースティシャル)
   tokens.css を前提とするコンポーネントCSS。
   ゴールデンスクリーン: /_p/ir-golden-gate-7c3f92e8/
   実装WOでは参照のみ・編集禁止(変更はデザインレビューを通す)。
   画像正本: /assets/images/gate-mobile.webp / gate-pc.webp / logo-vector.svg
   ===================================================================== */

.gate {
  position: fixed; inset: 0; z-index: 90;
  background-color: var(--ir-bg);
  background-image:
    linear-gradient(to top, rgba(24, 22, 18, 0.55) 0%, rgba(24, 22, 18, 0.2) 30%, rgba(24, 22, 18, 0) 52%),
    linear-gradient(to bottom, rgba(24, 22, 18, 0.18), rgba(24, 22, 18, 0) 18%),
    url("/assets/images/gate-mobile.webp");
  background-size: cover;
  background-position: center;
  color: #FFFDFC;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.gate.is-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gate { transition: none; } }

html.gate-lock, html.gate-lock body { overflow: hidden; }
html.gate-accepted .gate { display: none; }

.gate__inner {
  position: relative; min-height: 82vh; min-height: 82svh;
  max-width: 430px; margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 26px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
}

/* ---- 中段ブランド(Coming Soon準拠: キャッチ→ロゴ→和名) ---- */
.gate__brand {
  position: absolute; left: 0; right: 0; top: 22%;
  padding: 60px 26px 68px;
  background: radial-gradient(58% 54% at 50% 46%, rgba(24, 22, 18, 0.32) 0%, rgba(24, 22, 18, 0.16) 46%, rgba(24, 22, 18, 0) 74%);
}
.gate__tagline {
  font-family: var(--ir-font-display); font-weight: 500;
  font-size: 16.5px; letter-spacing: 0.16em; line-height: 2;
  text-shadow: 0 1px 14px rgba(24, 22, 18, 0.35);
  white-space: nowrap;
}
.gate__logo { width: min(58vw, 245px); margin: 24px auto 0; }
.gate__logo img {
  width: 100%; height: auto;
  filter: drop-shadow(0 1px 4px rgba(24, 22, 18, 0.42)) drop-shadow(0 2px 18px rgba(24, 22, 18, 0.35));
}
.gate__kana {
  font-family: var(--ir-font-display);
  font-size: 13.5px; letter-spacing: 0.34em; text-indent: 0.34em;
  margin-top: 12px;
  text-shadow: 0 1px 10px rgba(24, 22, 18, 0.35);
}

/* ---- 下段: アイデンティティ行+年齢確認 ---- */
.gate__bottom { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gate__identity {
  font-family: var(--ir-font-display); font-weight: 500;
  font-size: 13.5px; letter-spacing: 0.22em;
  text-shadow: 0 1px 10px rgba(24, 22, 18, 0.4);
}
.gate__note {
  font-family: var(--ir-font-sans); font-weight: 400;
  font-size: 12.5px; letter-spacing: 0.06em; line-height: 1.9;
  color: rgba(255, 253, 252, 0.88); margin-top: 12px;
}
.gate__enter {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: min(100%, 300px); margin-top: 18px; padding: 12px 20px 14px;
  background: rgba(24, 22, 18, 0.16);
  border: 1px solid rgba(255, 253, 252, 0.9); border-radius: 2px;
  color: #FFFDFC; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gate__enter span {
  font-family: var(--ir-font-sans); font-size: 11.5px; letter-spacing: 0.28em; text-indent: 0.28em;
}
.gate__enter strong {
  font-family: var(--ir-font-en); font-weight: 500;
  font-size: 20px; letter-spacing: 0.42em; text-indent: 0.42em; line-height: 1.4;
}
.gate__enter:active { background: rgba(255, 253, 252, 0.92); color: var(--ir-ink); }
@media (hover: hover) {
  .gate__enter:hover { background: rgba(255, 253, 252, 0.92); color: var(--ir-ink); }
}
.gate__exit {
  display: inline-block; margin-top: 15px;
  font-family: var(--ir-font-sans); font-weight: 400;
  font-size: 12.5px; letter-spacing: 0.08em;
  color: rgba(255, 253, 252, 0.82);
  text-decoration: underline; text-underline-offset: 4px;
}
.gate__noscript {
  margin-top: 14px; font-family: var(--ir-font-sans);
  font-size: 12.5px; color: rgba(255, 253, 252, 0.88);
}

/* ---- 提携サイト: モバイルの初期表示で先頭バナーが見える位置 ---- */
.gate__sponsors {
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 253, 252, 0.22);
  background: rgba(24, 22, 18, 0.9);
}
.gate__sponsor-grid {
  display: grid;
  width: min(100%, 960px);
  margin: 0 auto;
  gap: 8px;
}
.gate__sponsor { min-width: 0; }
/* Keep the original static design reference usable with this stylesheet. */
.gate__sponsor > img { display: block; width: 100%; max-width: 468px; height: auto; }
.gate__banner-image {
  width: min(100%, var(--gate-banner-width, 468px));
  margin: 0 auto;
}
.gate__banner-image > a,
.gate__banner-image img,
.gate__banner-table a {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.gate__small-banners {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: min(100%, 960px);
  margin: 16px auto 0;
  gap: 12px;
}
.gate__small-banners .gate__banner-image {
  flex: 0 1 var(--gate-banner-width, 200px);
  min-width: 0;
  margin: 0;
}
.gate__banner-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0;
  line-height: 0;
}
.gate__banner-table td { padding: 0; vertical-align: top; }
.gate__support-links,
.gate__text-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.gate__text-links {
  width: min(100%, 960px);
  margin: 16px auto 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 253, 252, 0.22);
}
.gate__support-links a,
.gate__text-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px;
  color: #FFFDFC;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gate__enter--repeat { margin: 20px auto 0; }
.gate__sponsors a:focus-visible,
.gate__enter:focus-visible { outline: 2px solid #FFFDFC; outline-offset: 3px; }

@media (max-width: 767px) {
  .gate__sponsors { padding-top: 32px; }
}

/* ---- 低身長ビューポート(SP横持ち・小窓): 絶対配置をやめて流し込み+スクロール許可 ---- */
@media (max-width: 767px) and (max-height: 620px) {
  .gate { overflow-y: auto; }
  .gate__inner { height: auto; min-height: 100%; justify-content: flex-start; padding-top: 28px; }
  .gate__brand { position: static; padding: 24px 26px 32px; }
  .gate__bottom { margin-top: 10px; }
}

/* ---- PC: 道路の抜けがある左側へ左寄せブロック ---- */
@media (min-width: 768px) {
  .gate {
    background-image:
      linear-gradient(to right, rgba(24, 22, 18, 0.44) 0%, rgba(24, 22, 18, 0.14) 34%, rgba(24, 22, 18, 0) 56%),
      url("/assets/images/gate-pc.webp");
  }
  .gate__inner {
    max-width: none; margin: 0;
    align-items: flex-start; justify-content: center;
    padding: 0 0 0 8vw; text-align: left;
  }
  .gate__brand { position: static; }
  .gate__tagline { font-size: 19px; }
  .gate__logo { width: 300px; margin: 28px 0 0; }
  .gate__kana { text-indent: 0; }
  .gate__bottom { margin-top: 46px; align-items: flex-start; width: auto; }
  .gate__enter { width: 300px; }
  .gate__sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}