/* UAJ Studio ポータル(/ と /en)専用スタイル。色・フォントのトークンとヘッダー・表は site-theme.css を参照。
 * style.css の body は flex 行レイアウトのため、ポータルでは block に戻して
 * 「flexの子の min-width:auto で横にはみ出す」問題が起きないようにしている。 */
body.portal-page {
  display: block;
  padding: 0;
}

.portal {
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  margin: 0 auto;
  padding: 28px 20px 40px;
  line-height: 1.85;
}
.portal > * { min-width: 0; }

/* ---- ヒーロー: 左にコピー、右にゲーム画面(PC) ---- */
.portal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 40px 32px;
  border: 1px solid var(--c-border);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(108,140,255,.25), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(154,107,255,.18), transparent 60%),
    var(--c-surface);
  overflow: hidden;
}
@media (min-width: 860px) {
  .portal-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 56px 48px; }
}
.portal-brand {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-shadow: 0 0 28px rgba(108,140,255,.55);
}
.portal-brand span {
  background: linear-gradient(90deg, #8fb3ff, #b99bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  margin: 14px 0 10px;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 900;
  color: var(--c-text);
}
.portal-lead { margin: 0 0 22px; color: var(--c-text-sub); font-size: .95rem; }
.portal-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-visual { position: relative; min-height: 340px; }
.hv {
  position: absolute;
  width: 72%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transition: transform .4s var(--ease);
}
.hv-a { left: 0; top: 0; transform: rotate(-4deg); }
.hv-b { right: 0; bottom: 0; transform: rotate(3deg); }
.hero-visual:hover .hv-a { transform: rotate(-6deg) translateY(-6px); }
.hero-visual:hover .hv-b { transform: rotate(5deg) translateY(-6px); }
/* スマホ・タブレットでは直下のゲームカードに同じ画面写真があるので、ヒーローの画像は出さずCTAを早く見せる */
@media (max-width: 859px) {
  .hero-visual { display: none; }
}

/* ---- ボタン ---- */
.portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: transform .18s var(--ease), background .18s, box-shadow .18s, border-color .18s;
}
.portal-btn:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.portal-btn:active { transform: translateY(1px); }
.portal-btn.primary {
  background: linear-gradient(135deg, #4f7bff, #9a6bff);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(108,140,255,.35);
}
.portal-btn.primary:hover { box-shadow: 0 10px 30px rgba(108,140,255,.5); }
.portal-btn.stella { border-color: rgba(255,203,107,.5); color: #ffe2a6; background: rgba(255,203,107,.08); }
.portal-btn.stella:hover { background: rgba(255,203,107,.16); }

/* ---- ページ内ナビ: チップ ---- */
.portal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: .82rem;
  line-height: 1.4;
}
.portal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.portal-nav a:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border-strong); }
/* スマホではページ内ナビを1行の横スクロールにして、縦の場所を取らない */
@media (max-width: 600px) {
  .portal-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px;
  }
  .portal-nav::-webkit-scrollbar { display: none; }
  .portal-nav a { flex: none; }
}

/* ---- セクション共通 ---- */
.portal-section { margin-top: 72px; }
.portal-section > h2 {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-text);
  scroll-margin-top: 72px;
}
.portal-section .eyebrow { scroll-margin-top: 72px; }
.portal-section h3 {
  margin: 28px 0 8px;
  padding-left: 12px;
  border-left: 3px solid var(--c-brand);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  scroll-margin-top: 72px;
}
.portal-section p,
.portal-section li {
  color: var(--c-text-sub);
  font-size: .95rem;
}
.portal-section p { margin: 8px 0; }
.portal-section ul,
.portal-section ol { margin: 6px 0 12px; padding-left: 1.5em; }
.portal-section li { margin-bottom: 4px; }
.portal-section a { color: var(--c-link); text-underline-offset: 3px; }
.portal-section a:hover { color: var(--c-link-hover); }
.portal-section strong { color: var(--c-text); }
.portal-section code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.portal-section kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.85em;
}

/* ---- ゲームカード ---- */
.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 760px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  background: var(--c-surface);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1;
}
.game-card.typing::before { background: linear-gradient(90deg, var(--c-typing), #6c8cff); }
.game-card.stella::before { background: linear-gradient(90deg, var(--c-stella), #b97bff); }
.game-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.game-card.typing:hover { border-color: rgba(79,184,255,.45); }
.game-card.stella:hover { border-color: rgba(255,203,107,.45); }
.game-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  background: #14172f;
  transition: transform .5s var(--ease);
}
.game-card:hover .game-card-img { transform: scale(1.03); }
.game-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
  background: linear-gradient(180deg, rgba(9,11,24,0), rgba(9,11,24,.4));
}
.portal-section .game-card-body h3 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 1.45rem;
  font-weight: 900;
}
.game-card.typing h3 { color: #bfe4ff; }
.game-card.stella h3 { color: #ffe2a6; }
.game-card-body p { margin: 0 0 8px; }
.game-card-body ul { margin: 6px 0 14px; padding-left: 1.3em; }
.portal-section .game-card-body li { font-size: .88rem; }
.portal-section .game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.portal-section .game-tags li {
  margin: 0;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border-strong);
  background: rgba(108,140,255,.1);
  color: #c9d5ff;
  font-size: .75rem;
  font-weight: 500;
}
.portal-section .game-tags li.proto {
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.1);
  color: #ffd166;
}
.game-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* ---- 図(ステラオーブのワザ) ---- */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.formation {
  margin: 0;
  padding: 16px 12px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface);
  text-align: center;
  min-width: 0;
}
.formation-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 117px;
  margin: 0 0 6px;
}
.formation svg {
  display: block;
  max-width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}
.formation figcaption {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--c-text-sub);
}
.formation figcaption strong { display: block; font-size: 0.95rem; }

/* ---- 更新履歴 ---- */
.portal-section .news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-section .news-list li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0;
}
.news-list time {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .portal-section .news-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---- FAQ: Q&Aカード ---- */
.portal-faq h3 {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 18px 4px 48px;
  border: 1px solid var(--c-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--c-surface);
  color: var(--c-text);
}
.portal-faq h3::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-brand);
  font-size: 1.1rem;
}
.portal-faq h3 + p {
  margin: 0;
  padding: 2px 18px 14px 48px;
  border: 1px solid var(--c-border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--c-surface);
}

/* ---- 関連リンク・フッター ---- */
.portal-section .portal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-links li { margin: 0; }
.portal-section .portal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  text-decoration: none;
}

.portal-footer {
  margin-top: 72px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border);
}
.portal-footer .footer-links { margin-top: 0; }
.portal-copy {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--f-display);
  letter-spacing: .1em;
  color: var(--c-text-mute);
  font-size: 0.72rem;
}

@media (max-width: 480px) {
  .portal { padding: 16px 14px 32px; }
  .portal-hero { padding: 28px 20px; border-radius: 20px; }
  .portal-cta-row .portal-btn { width: 100%; }
  .portal-section { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal *, .portal *::before { transition: none !important; }
  .game-card:hover, .game-card:hover .game-card-img, .portal-btn:hover { transform: none; }
  .hero-visual:hover .hv-a { transform: rotate(-4deg); }
  .hero-visual:hover .hv-b { transform: rotate(3deg); }
}

/* ステラオーブのカード: 画面写真の上にロゴを重ねる */
.game-card-media { position: relative; overflow: hidden; }
.game-card-logo {
  position: absolute; left: 50%; bottom: 6%; width: min(62%, 300px); height: auto; transform: translateX(-50%);
  pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .75));
}

/* ---- 公式SNSへの案内(X / YouTube) ---- */
.social-follow {
  margin-top: 72px;
  padding: 20px 22px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-surface);
  text-align: center;
}
.social-follow + .portal-section { margin-top: 56px; }
.social-follow-text { margin: 0 0 14px; color: var(--c-text); font-weight: 700; font-size: .95rem; }
.social-follow-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.portal-btn.social-btn { gap: 10px; padding: 10px 20px; }
.social-btn .social-ico { width: 20px; height: 20px; flex: none; }
.portal-footer .social-icons { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.portal-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--c-text-mute);
  transition: color .18s, background .18s;
}
.portal-footer .social-icons a:hover { color: var(--c-text); background: var(--c-surface-2); }
.portal-footer .social-icons .social-ico { width: 22px; height: 22px; }
.portal-footer .social-icons + .portal-copy { margin-top: 2px; }
@media (max-width: 480px) {
  .social-follow { margin-top: 56px; padding: 18px 14px; }
  .social-follow-btns .portal-btn { width: 100%; }
}