.top-page {
  --gold: #c9a24a;
  --gold-soft: rgba(201, 162, 74, .5);
  --panel: rgba(244, 243, 239, .04);
  --panel-line: rgba(244, 243, 239, .14);
}

/* ---------- utility ---------- */
.top-page .oa-login-link { margin-left: 20px; padding-left: 24px; border-left: 1px solid var(--line); color: var(--gold); }
.top-page .oa-login-link:hover, .top-page .oa-login-link:focus-visible { color: var(--white); }
@media (max-width: 760px) { .top-page .oa-login-link { margin-left: 0; padding-left: 0; border-left: 0; } }

/* ---------- header (independent bar, content starts below it) ---------- */
.top-page .site-header { position: sticky; top: 0; height: 84px; background: var(--black); z-index: 30; }
@media (max-width: 760px) { .top-page .site-header { height: 68px; } }

/* ================= PORTAL / HERO ================= */
.oa-portal { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 2.8fr) minmax(220px, .75fr); border-bottom: 1px solid var(--line); }
.oa-portal-left, .oa-portal-right { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 40px clamp(14px, 1.6vw, 28px) 36px; min-width: 0; }
.oa-portal-right { text-align: right; }

.oa-portal-intro p { margin: 0 0 16px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.oa-portal-welcome { color: var(--white) !important; letter-spacing: .04em; }
.oa-portal-tags { list-style: none; margin: 28px 0 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 16px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .22em; color: var(--gold); }

.oa-news { min-width: 0; border: 1px solid var(--panel-line); background: var(--panel); border-radius: 2px; padding: 20px; }
.oa-news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.oa-news-head h2 { margin: 0; font-size: 11px; letter-spacing: .28em; font-weight: 500; }
.oa-news-head a { flex: none; white-space: nowrap; font-size: 9px; letter-spacing: .18em; color: var(--muted); }
.oa-news-head a:hover { color: var(--gold); }
.oa-news-head a b { color: var(--gold); font-weight: 400; margin-left: 4px; }
.oa-news-list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.oa-news-list li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; min-width: 0; }
.oa-news-meta { display: flex; align-items: center; gap: 10px; }
.oa-news-list time { flex: none; font: 500 11px "Cormorant Garamond", serif; color: var(--muted); }
.oa-news-list span { display: block; color: #dcdde3; line-height: 1.5; }
.oa-tag-new { flex: none; font-size: 8px; letter-spacing: .1em; color: var(--black); background: var(--red); padding: 2px 6px; border-radius: 2px; }

.oa-portal-hero { position: relative; min-height: 520px; overflow: hidden; }
/* Source art has its own baked-in wordmark/kanji (see report to user); blurred to an
   ambient colour wash so it never competes with the real "運命の扉" heading on top. */
.oa-portal-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: blur(26px) saturate(1.2) brightness(.45); animation: oaZoom 26s ease-out both; }
.oa-portal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,4,11,.5), rgba(3,4,11,.74) 55%, rgba(3,4,11,.95)), linear-gradient(90deg, rgba(3,4,11,.62), transparent 20%, transparent 80%, rgba(3,4,11,.62)); }
@keyframes oaZoom { from { transform: scale(1.22); } to { transform: scale(1.32); } }
.oa-portal-vert { position: absolute; top: 32px; z-index: 1; writing-mode: vertical-rl; font-size: 12px; letter-spacing: .3em; color: #f0ece1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.oa-portal-vert-left { left: 20px; }
.oa-portal-vert-right { right: 20px; top: auto; bottom: 32px; }
.oa-portal-title { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 8%; }
.oa-portal-title .eyebrow { color: var(--gold); margin-bottom: 4px; }
.oa-portal-title h1 { margin: 10px 0 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; letter-spacing: .04em; font-size: clamp(32px, 4.4vw, 58px); text-shadow: 0 6px 40px rgba(0,0,0,.8); }
.oa-portal-en { margin: 8px 0 0; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: .35em; color: #e7e2d4; }
.oa-portal-lede { margin: 18px 0 0; max-width: 420px; font-size: 13px; line-height: 1.9; color: #cfd0da; }
.oa-door-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; border: 1px solid var(--gold-soft); border-radius: 2px; background: linear-gradient(180deg, rgba(255,72,31,.2), rgba(255,72,31,.08)); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 11px; letter-spacing: .3em; transition: border-color .25s ease, background .25s ease; }
.oa-door-cta b { color: var(--gold); font-weight: 400; }
.oa-door-cta:hover, .oa-door-cta:focus-visible { border-color: var(--gold); background: rgba(255,72,31,.22); }

.oa-portal-tagline-jp { margin: 0; font: 500 20px/1.5 "Noto Sans JP", sans-serif; }
.oa-portal-tagline-en { margin: 10px 0 0; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: .2em; color: var(--muted); }

.oa-login { border: 1px solid var(--panel-line); background: var(--panel); border-radius: 3px; padding: 26px 24px; text-align: left; }
.oa-login h2 { margin: 0; font-size: 16px; font-weight: 500; }
.oa-login > p:not(.oa-login-note) { margin: 8px 0 22px; font-size: 12px; color: var(--muted); }
.oa-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 16px; background: var(--white); color: #1f1f1f; border: 0; border-radius: 2px; font: 500 13px "Noto Sans JP", sans-serif; letter-spacing: .04em; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.oa-google-btn:hover, .oa-google-btn:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: translateY(-1px); }
.oa-google-btn svg { flex: none; width: 18px; height: 18px; }
.oa-login-note { margin: 14px 0 0; font-size: 10px; line-height: 1.8; letter-spacing: .04em; color: var(--muted); text-align: center; }

.oa-portal-foot-jp { margin: 0; font: 500 16px/1.6 "Noto Sans JP", sans-serif; }
.oa-portal-foot-en { margin: 10px 0 0; font-family: "Cormorant Garamond", serif; font-size: 10px; letter-spacing: .2em; color: var(--muted); }

/* ================= SEA / MOSES TEASER ================= */
.oa-realm-sea { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); cursor: pointer; }
.oa-realm-sea a { cursor: pointer; }
.oa-realm-sea-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9); }
.oa-realm-sea::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,11,.94) 0%, rgba(3,4,11,.55) 42%, rgba(3,4,11,.2) 70%); }
.oa-realm-sea-copy { position: relative; z-index: 1; max-width: 480px; padding: 0 8vw; }
.oa-realm-index { display: block; font: 500 14px/1 "Cormorant Garamond", serif; color: var(--gold); letter-spacing: .2em; margin-bottom: 14px; }
.oa-realm-sea-copy h2 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: .03em; }
.oa-realm-sea-copy .eyebrow { display: block; margin-top: 10px; color: var(--muted); }
.oa-realm-sea-lede { margin: 22px 0 0; font-size: 15px; line-height: 1.95; color: #dfe0e6; }
.oa-realm-sea-en { margin: 16px 0 0; font-family: "Cormorant Garamond", serif; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.oa-realm-sea-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.oa-realm-sea .oa-cta-link { margin-top: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.oa-realm-sea .oa-cta-link b { color: var(--gold); font-weight: 400; }
.oa-realm-sea .oa-cta-link:hover { color: var(--white); }
.oa-realm-sea .oa-cta-video b { font-size: 9px; }
.oa-realm-sea-vert { position: absolute; z-index: 1; right: 6vw; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 12px; letter-spacing: .3em; color: #e5e2d6; opacity: .85; }
.oa-realm-sea-index { position: absolute; z-index: 1; right: 6vw; bottom: 34px; font: 500 42px/1 "Cormorant Garamond", serif; color: rgba(244,243,239,.14); }

/* ================= GODDESS / REALM GRID ================= */
.oa-realm-grid { padding: 110px 8vw 90px; border-bottom: 1px solid var(--line); }
.oa-realm-grid-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6vw; flex-wrap: wrap; }
.oa-realm-grid-head h2 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); }
.oa-realm-grid-head .eyebrow { display: block; margin-top: 10px; color: var(--muted); }
.oa-realm-grid-lede { margin: 24px 0 0; max-width: 560px; font-size: 14px; line-height: 2; color: var(--muted); }
.oa-realm-grid-side { margin: 0; text-align: right; font: 500 20px/1.5 "Noto Sans JP", sans-serif; }
.oa-realm-grid-side span { display: block; margin-top: 12px; font-family: "Cormorant Garamond", serif; font-size: 11px; font-weight: 400; letter-spacing: .18em; color: var(--muted); }

.oa-realm-banner { margin: 64px auto 0; width: fit-content; text-align: center; padding: 14px 40px; border: 1px solid var(--gold-soft); border-radius: 2px; background: linear-gradient(180deg, rgba(255,72,31,.14), rgba(255,72,31,.04)); }
.oa-realm-banner span { display: block; font-size: 10px; letter-spacing: .3em; color: var(--gold); }
.oa-realm-banner b { display: block; margin-top: 6px; font: 500 16px "Noto Sans JP", sans-serif; }

.oa-realm-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.oa-realm-cards a { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 12px 22px; border: 1px solid var(--panel-line); background: var(--panel); border-radius: 3px; text-align: center; transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.oa-realm-cards a:hover, .oa-realm-cards a:focus-visible { border-color: var(--gold-soft); background: rgba(201,162,74,.06); transform: translateY(-4px); }
.oa-realm-cards svg { width: 26px; height: 26px; color: var(--gold); }
.oa-realm-card-en { font: 500 13px "Cormorant Garamond", serif; letter-spacing: .16em; }
.oa-realm-card-jp { font-size: 11px; color: var(--muted); line-height: 1.5; }
.oa-realm-cards b { margin-top: 2px; color: var(--gold); font-weight: 400; }

/* ================= OUTRO (terminal / brand / movie) ================= */
.oa-outro { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5vw; padding: 90px 6vw; border-bottom: 1px solid var(--line); }
.oa-terminal { border: 1px solid rgba(80,220,140,.35); background: rgba(6,18,10,.6); border-radius: 3px; padding: 18px 20px; font-family: "Courier New", monospace; font-size: 11px; line-height: 2; color: #6ee7a8; max-width: 320px; }
.oa-terminal-head { margin: 0 0 10px; color: #9df3bf; letter-spacing: .08em; border-bottom: 1px solid rgba(110,231,168,.25); padding-bottom: 10px; }
.oa-terminal p:not(.oa-terminal-head) { margin: 0; }

.oa-outro-brand { text-align: center; }
.oa-outro-brand .logo { font-size: 22px; }
.oa-outro-brand p { margin: 12px 0 0; font-size: 10px; letter-spacing: .28em; color: var(--muted); }
.oa-outro-dev { font-size: 9px !important; letter-spacing: .16em !important; }
.oa-outro-dev b { color: var(--gold); font-weight: 400; }

.oa-outro-movie { justify-self: end; max-width: 300px; }
.oa-outro-movie a { position: relative; display: block; aspect-ratio: 16/10; border-radius: 3px; overflow: hidden; border: 1px solid var(--panel-line); }
.oa-outro-movie img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.6); transition: transform .4s ease; }
.oa-outro-movie a:hover img { transform: scale(1.05); }
.oa-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--black); }
.oa-play::before { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: rgba(244,243,239,.92); z-index: -1; }
.oa-outro-movie-cap { position: absolute; left: 14px; bottom: 12px; font-size: 10px; line-height: 1.6; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.oa-outro-movie-cap b, .oa-outro-movie-cap i { display: block; font-style: normal; }
.oa-outro-movie-cap b { font-weight: 500; }
.oa-outro-movie-cap i { margin-top: 2px; color: var(--gold); }
.oa-outro-movie-note { margin: 12px 0 0; text-align: right; font-size: 9px; letter-spacing: .16em; color: var(--muted); }

/* ================= FOOTER ================= */
.top-page footer { flex-wrap: wrap; gap: 20px 32px; padding: 30px 4.5vw; }
.oa-footer-brand p { margin: 8px 0 0; font-size: 9px; letter-spacing: .22em; color: var(--muted); }
.oa-footer-nav { display: flex; gap: 24px; }
.oa-footer-nav a:hover { color: var(--gold); }
.oa-footer-social { display: flex; gap: 16px; }
.oa-footer-social a { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .2s ease, color .2s ease; }
.oa-footer-social a svg { width: 13px; height: 13px; }
.oa-footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.oa-footer-copy { margin: 0; }

.top-page .oa-cta-link:focus-visible, .top-page .oa-realm-cards a:focus-visible, .top-page .oa-door-cta:focus-visible, .top-page .oa-google-btn:focus-visible { outline-offset: 4px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .oa-realm-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .oa-portal { grid-template-columns: 1fr; }
  .oa-portal-hero { order: -1; min-height: 68vh; }
  .oa-portal-left, .oa-portal-right { padding: 36px 7vw; text-align: left; }
  .oa-portal-vert { display: none; }
  .oa-portal-title { padding: 24px 6vw; }
  .oa-portal-title h1 { font-size: clamp(30px, 9vw, 44px); }
  .oa-portal-lede { max-width: none; }

  .oa-realm-sea { min-height: 480px; }
  .oa-realm-sea-copy { padding: 0 7vw; max-width: none; }
  .oa-realm-sea-vert, .oa-realm-sea-index { display: none; }

  .oa-realm-grid { padding: 70px 7vw; }
  .oa-realm-grid-head { flex-direction: column; align-items: flex-start; }
  .oa-realm-grid-side { text-align: left; }
  .oa-realm-cards { grid-template-columns: repeat(2, 1fr); }

  .oa-outro { grid-template-columns: 1fr; text-align: center; padding: 60px 7vw; gap: 40px; }
  .oa-terminal { max-width: none; margin: 0 auto; }
  .oa-outro-movie { justify-self: center; max-width: 380px; }

  .top-page footer { flex-direction: column; align-items: flex-start; }

  .oa-gate-hero { grid-column: 1; order: -1; width: 100%; max-width: none; margin: 0; min-height: 0; }
  .oa-gate-heading { padding: 24px 12px 16px; }
  .oa-gate-heading .eyebrow { font-size: 8px; letter-spacing: .1em; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .oa-portal { grid-template-columns: 1fr 1fr; }
  .oa-gate-hero { grid-column: 1 / -1; order: -1; width: 100%; max-width: 1000px; margin: auto; }
}

/* Fate gate: original artwork is used as door textures, never regenerated. */
.oa-gate-hero { min-height: 0; overflow: hidden; background: #06070c; align-self: start; }
.oa-gate-hero::after { content: none; }
.oa-gate-heading { text-align:center; padding: 26px 12px 20px; }
.oa-gate-heading .eyebrow { color:var(--gold); font-size:9px; letter-spacing:.22em; }
.oa-gate-heading h1 { margin:8px 0; font:500 clamp(28px,3vw,48px)/1.2 'Yu Mincho',serif; letter-spacing:.14em; }
.oa-gate-stage { position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; isolation:isolate; perspective:1400px; background:#080a10; cursor:pointer; }
.oa-gate-world { position:absolute; left:23.4375%; top:21.484375%; width:53.125%; height:60.058594%; background: url('assets/gate-world.png') 50% 57% / 440% 167% no-repeat; filter:brightness(.65); transition:filter 1.8s ease; }
.oa-gate-leaf { position:absolute; top:21.484375%; width:26.5625%; height:60.058594%; background-image:url('assets/gate-closed.png'); background-size:376.470588% 166.504065%; background-repeat:no-repeat; backface-visibility:hidden; transition:transform 2s cubic-bezier(.3,.05,.2,1),filter 2s; z-index:2; }
.oa-gate-left { left:23.4375%; background-position:31.914894% 53.789731%; transform-origin:left center; }
.oa-gate-right { left:50%; background-position:68.085106% 53.789731%; transform-origin:right center; }
.oa-gate-frame { position:absolute; inset:0; z-index:3; background:url('assets/gate-closed.png') center / 100% 100%; pointer-events:none; clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,23.4375% 21.484375%,23.4375% 81.542969%,76.5625% 81.542969%,76.5625% 21.484375%,23.4375% 21.484375%); }
.oa-gate-stage.is-open .oa-gate-left { transform:rotateY(78deg); filter:brightness(.8); }
.oa-gate-stage.is-open .oa-gate-right { transform:rotateY(-78deg); filter:brightness(.8); }
.oa-gate-stage.is-open .oa-gate-world { filter:brightness(1); }
.oa-gate-controls { text-align:center; padding:16px 16px 26px; }
.oa-gate-message { color:#d9d3c7; font-size:12px; line-height:1.9; margin:0; min-height:46px; }
.oa-gate-controls .oa-door-cta { margin-top:12px; color:#fff; cursor:pointer; font-family:inherit; min-height:48px; background:linear-gradient(#542317,#25110f); }
.oa-gate-next { margin:16px 0 0; color:var(--gold); font-size:13px; }
.oa-gate-next:not([hidden]) { display:block; }
.oa-door-cta:focus-visible { outline:2px solid #efd391; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .oa-gate-leaf,.oa-gate-world { transition:none; } }

/* Full scenery textures: preserve aspect ratio, no enlarged gate crop. */
.oa-gate-world { background-image:url('assets/gate-palace.png'); background-size:cover; background-position:center; }
.oa-world-label { display:block; font-size:11px; color:var(--gold); margin-bottom:8px; }
#gate-world-choice { max-width:100%; padding:10px 14px; margin-bottom:14px; color:#eee2c7; background:#181311; border:1px solid var(--gold-soft); border-radius:3px; font:inherit; font-size:12px; }
#gate-world-choice:focus-visible { outline:2px solid #efd391; outline-offset:3px; }