/* 共通シェル — site-chrome.css
   ノッチ帯・ホームインジケータ帯・星空の下地（タイル）。
   LP の点滅・スクロールパララックスは main.css に残す。
   .panel-tag / .live-dot / ナビ土台は LP・arcade 共通。 */

:root {
  --safe-top: 0px;
  --notch-tint-h: 0px;
}
@supports (-webkit-touch-callout: none) {
  :root {
    --notch-tint-h: 12px;
  }
}
:root {
  --notch-cover-h: var(--notch-tint-h);
}

.notch-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--notch-cover-h);
  min-height: 3px;
  margin: 0;
  padding: 0;
  background-color: var(--color-ink);
  /* site-shell(z-10) より下でないとナビアイコンが欠ける */
  z-index: 5;
  pointer-events: none;
}

.toolbar-cover {
  display: none;
  position: fixed;
  bottom: -8px;
  left: 0;
  width: 100%;
  min-height: 12px;
  margin: 0;
  padding: 0;
  background-color: var(--color-ink);
  z-index: 5;
  pointer-events: none;
}

@supports (-webkit-text-size-adjust: none) and (font: -apple-system-body) and (-webkit-touch-callout: none) {
  @media (width < 768px) {
    .toolbar-cover { display: block; }
  }
}

/* 使用: body 直下 .starfield（LP / arcade 共通の下地）
   効果: 全面固定の深宇宙星空。上端はノッチ帯下から（Safari のノッチ色サンプル回避）
   色は lp-hero-stars.js の COL（paper / yellow / tiffany / purple）。tile を詰めて密度アップ */
.starfield {
  position: fixed;
  top: var(--notch-cover-h);
  right: 0;
  bottom: -18vh;
  left: 0;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color-ink);
  background-image:
    radial-gradient(1.75px 1.75px at 20% 30%, var(--paper-a90) 50%, transparent),
    radial-gradient(1.75px 1.75px at 75% 15%, color-mix(in srgb, var(--color-yellow) 72%, transparent) 50%, transparent),
    radial-gradient(2.5px 2.5px at 50% 60%, var(--tiffany-a72) 50%, transparent),
    radial-gradient(1.75px 1.75px at 85% 75%, color-mix(in srgb, var(--color-purple) 68%, transparent) 50%, transparent),
    radial-gradient(1.75px 1.75px at 12% 82%, var(--paper-a70) 50%, transparent),
    radial-gradient(2.5px 2.5px at 35% 45%, color-mix(in srgb, var(--color-yellow) 55%, transparent) 50%, transparent),
    radial-gradient(1.75px 1.75px at 65% 90%, var(--tiffany-a50) 50%, transparent),
    radial-gradient(1.75px 1.75px at 48% 12%, var(--paper-a60) 50%, transparent),
    radial-gradient(2.5px 2.5px at 8% 55%, color-mix(in srgb, var(--color-purple) 52%, transparent) 50%, transparent);
  background-size:
    340px 340px, 420px 420px, 520px 520px, 380px 380px,
    460px 460px, 580px 580px, 400px 400px, 300px 300px, 640px 640px;
  background-repeat: repeat;
}

/* 使用: >> 付きセクションタグ（LP / arcade 共通）
   display:block で親の strut（本文行高）を避ける */
.panel-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-ui-md);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  color: var(--color-tiffany);
}
.panel-tag.text-ink {
  color: var(--color-ink);
}

/* 使用: ステータス行の点滅ドット（親の text-color に追従） */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: blink 1.6s steps(2, jump-none) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* 使用: ナビ土台（sticky・高さ・シンボル点滅・IG ホバー）
   LP 専用の stuck 下線・tint・メニュー開閉は main.css */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-ink);
  padding-top: 0;
}
.site-nav__bar {
  position: relative;
  z-index: 2;
  height: var(--nav-bar-height);
  background-color: var(--color-ink);
}
.site-nav__symbol {
  animation: nav-signal-receive 3s ease-in-out infinite;
  filter: drop-shadow(0 0 5px var(--tiffany-a65));
}
.site-nav__wordmark {
  display: block;
}
@keyframes nav-signal-receive {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.38; }
}
.nav-social__icon,
.nav-social-link > img {
  width: 1.125rem;
  height: 1.125rem;
  transition: filter 0.2s ease;
}
.nav-social-link:hover,
.nav-social-link:focus-visible {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
  outline: none;
}
.nav-social-link:hover .nav-social__icon,
.nav-social-link:focus-visible .nav-social__icon,
.nav-social-link:hover > img,
.nav-social-link:focus-visible > img {
  filter: brightness(0);
}

@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .site-nav__symbol {
    animation: none !important;
  }
  .site-nav__symbol {
    filter: none;
    opacity: 1;
  }
}