/* ============================================================
   TAMAKO OS — 近未来テックテーマ (style.css の後に読み込む上書き層)
   外すときはこのファイルへの <link> を消すだけで元のデザインに戻る
   ライト = クリーンHUD / ラボ風、ダーク = ネオンSF
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ------------------------------------------------------------
   1. デザイントークン (既存変数の再定義 + テック専用変数)
   ------------------------------------------------------------ */
:root {
  /* 既存変数のテック再マップ (ライト = ホワイトラボ) */
  --pink-main: #FF2E88;
  --pink-deep: #D60F6F;
  --pink-light: #C9D9F2;          /* 罫線・枠 = 薄スチールブルー */
  --pink-bg: #EAF1FB;             /* 面のアクセント = ペールブルー */
  --cream: #F2F6FD;               /* ページ背景 = クールホワイト */
  --text-main: #0E1B33;
  --text-sub: #46587A;
  --accent-mint: #0FC2B0;
  --accent-yellow: #FFC93C;
  --card-bg: #FFFFFF;
  --header-bg: rgba(248, 251, 255, 0.85);
  --shadow-soft: 0 8px 24px rgba(18, 60, 130, 0.10);
  --shadow-hover: 0 14px 36px rgba(18, 60, 130, 0.16), 0 0 0 1px rgba(0, 178, 255, 0.25);
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;

  /* テック専用 */
  --tc-cyan: #00A8E8;
  --tc-cyan-bright: #00D9FF;
  --tc-violet: #7C5CFF;
  --tc-line: rgba(0, 140, 220, 0.22);
  --tc-grid: rgba(20, 110, 200, 0.055);
  --tc-glow-pink: 0 0 14px rgba(255, 46, 136, 0.35);
  --tc-glow-cyan: 0 0 14px rgba(0, 180, 255, 0.35);
  --tc-mono: 'Share Tech Mono', 'Noto Sans JP', monospace;
  --tc-disp: 'Orbitron', 'Noto Sans JP', sans-serif;
  --tc-panel-grad: linear-gradient(135deg, rgba(0, 168, 232, 0.55), rgba(255, 46, 136, 0.55));
}

/* ダーク = ナイトオプス (ネオンSF) */
body.dark-mode, html.pre-dark body {
  --pink-main: #FF4D9D;
  --pink-deep: #FF7CB9;
  --pink-light: #24355C;
  --pink-bg: #101A33;
  --cream: #060B18;
  --text-main: #E6EEFF;
  --text-sub: #92A5CC;
  --accent-mint: #19E3C2;
  --accent-yellow: #FFD66B;
  --card-bg: #0C1426;
  --header-bg: rgba(6, 11, 24, 0.82);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 217, 255, 0.18);

  --tc-cyan: #00D9FF;
  --tc-cyan-bright: #6FF2FF;
  --tc-violet: #9D7CFF;
  --tc-line: rgba(0, 217, 255, 0.28);
  --tc-grid: rgba(0, 190, 255, 0.05);
  --tc-glow-pink: 0 0 18px rgba(255, 77, 157, 0.55);
  --tc-glow-cyan: 0 0 18px rgba(0, 217, 255, 0.45);
}

/* ------------------------------------------------------------
   2. ベース: フォント / 背景グリッド / 選択色 / スクロールバー
   ------------------------------------------------------------ */
body {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.01em;
}

/* 背景: 桜ラジアル → ブループリント・グリッド + コーナーグロー */
body::before {
  background-image:
    linear-gradient(var(--tc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tc-grid) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(255, 46, 136, 0.06) 0%, transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(0, 180, 255, 0.07) 0%, transparent 36%),
    radial-gradient(circle at 80% 12%, rgba(124, 92, 255, 0.05) 0%, transparent 30%);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

/* ダークのみ: ごく薄い走査線オーバーレイ */
body.dark-mode::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 217, 255, 0.012) 3px,
    rgba(0, 217, 255, 0.012) 4px
  );
  pointer-events: none;
  z-index: 5;
}

::selection {
  background: rgba(0, 180, 255, 0.30);
  color: inherit;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tc-cyan), var(--pink-main));
  border-radius: 5px;
  border: 2px solid var(--cream);
}

/* ------------------------------------------------------------
   3. ヘッダー / ナビ / ロゴ
   ------------------------------------------------------------ */
.header {
  border-bottom: 1px solid var(--tc-line);
  box-shadow: 0 1px 0 rgba(255, 46, 136, 0.12), 0 8px 24px rgba(10, 40, 90, 0.06);
  backdrop-filter: blur(14px) saturate(1.3);
}

.logo {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--text-main);
  text-shadow: 0 0 18px rgba(255, 46, 136, 0.28);
}

.logo::before {
  content: '⬢';
  color: var(--pink-main);
  font-size: 1.15rem;
  text-shadow: var(--tc-glow-pink);
}

.nav a {
  border-radius: var(--radius-sm);
  font-weight: 500;
  position: relative;
  border: 1px solid transparent;
}

.nav a:hover {
  background: var(--pink-bg);
  color: var(--tc-cyan);
  border-color: var(--tc-line);
  box-shadow: inset 0 -2px 0 var(--tc-cyan);
}

.nav a.active {
  background: linear-gradient(135deg, var(--pink-main), var(--tc-violet));
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--tc-glow-pink);
}

.theme-toggle {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(255, 46, 136, 0.08), 0 4px 14px rgba(10, 40, 90, 0.12);
}

/* ------------------------------------------------------------
   4. トップバナー (システムアラート風)
   ------------------------------------------------------------ */
.launch-banner {
  background: linear-gradient(90deg, #0E1B33 0%, #20254E 50%, #0E1B33 100%);
  color: #DCE9FF;
  border-bottom: 1px solid var(--tc-line);
  font-family: var(--tc-mono);
  letter-spacing: 0.04em;
}

.launch-banner a {
  color: var(--tc-cyan-bright);
  text-shadow: var(--tc-glow-cyan);
}

body.dark-mode .launch-banner {
  background: linear-gradient(90deg, #04060F 0%, #131B3A 50%, #04060F 100%);
}

/* ------------------------------------------------------------
   5. ヒーロー (バナー画像 = ホロディスプレイ風 / 見出し / バッジ)
   ------------------------------------------------------------ */
.hero-banner {
  box-shadow:
    inset 0 0 0 1px var(--tc-line),
    0 0 32px rgba(0, 170, 255, 0.10);
}

.hero-badge {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-sm);
  font-family: var(--tc-mono);
  letter-spacing: 0.05em;
  color: var(--text-main);
  box-shadow: 0 0 0 1px rgba(255, 46, 136, 0.06), 0 6px 18px rgba(10, 40, 90, 0.10);
}

.hero-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22E58F;
  box-shadow: 0 0 10px #22E58F;
  margin-right: 9px;
  vertical-align: 1px;
  animation: tt-pulse 2.2s ease-in-out infinite;
}

@keyframes tt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero h1 {
  letter-spacing: 0.03em;
}

.hero h1 .pink {
  background: linear-gradient(100deg, var(--pink-main) 10%, var(--tc-violet) 55%, var(--tc-cyan) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pink-main);
}

.hero h1 .pink::after {
  height: 2px;
  bottom: -6px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--pink-main), var(--tc-cyan));
  box-shadow: var(--tc-glow-cyan);
}

/* ------------------------------------------------------------
   6. ボタン (チャンファー角 + ネオン)
   ------------------------------------------------------------ */
.btn {
  border-radius: 12px 4px 12px 4px;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink-main) 0%, var(--tc-violet) 100%);
  box-shadow: var(--tc-glow-pink), 0 8px 20px rgba(120, 40, 160, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--tc-violet) 100%);
  box-shadow: 0 0 22px rgba(255, 46, 136, 0.5), 0 12px 28px rgba(120, 40, 160, 0.35);
}

.btn-secondary {
  border: 1px solid var(--tc-cyan);
  color: var(--tc-cyan);
  background: transparent;
  box-shadow: inset 0 0 12px rgba(0, 180, 255, 0.08);
}

.btn-secondary:hover {
  background: rgba(0, 180, 255, 0.10);
  color: var(--tc-cyan);
  box-shadow: var(--tc-glow-cyan), inset 0 0 16px rgba(0, 180, 255, 0.12);
}

/* ------------------------------------------------------------
   7. 統計 (テレメトリパネル)
   ------------------------------------------------------------ */
.stats {
  position: relative;
  border: 1px solid var(--tc-line);
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--tc-panel-grad) border-box;
  border-color: transparent;
  overflow: hidden;
}

.stats > .stat-item + .stat-item {
  border-left: 1px dashed var(--tc-line);
}

@media (max-width: 660px) {
  .stats > .stat-item + .stat-item { border-left: none; border-top: 1px dashed var(--tc-line); padding-top: 16px; }
}

.stat-number {
  font-family: var(--tc-disp);
  font-weight: 700;
  background: linear-gradient(120deg, var(--pink-main), var(--tc-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.25));
}

.stat-label {
  font-family: var(--tc-mono);
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

/* ------------------------------------------------------------
   8. セクション見出し / 機能カード
   ------------------------------------------------------------ */
.section-title {
  letter-spacing: 0.04em;
}

.section-title::before {
  content: '▰▰ ';
  color: var(--tc-cyan);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  vertical-align: 4px;
  text-shadow: var(--tc-glow-cyan);
}

.section-title::after {
  content: ' ▰▰';
  color: var(--pink-main);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  vertical-align: 4px;
  text-shadow: var(--tc-glow-pink);
}

.section-subtitle {
  font-family: var(--tc-mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

.feature-card {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(160deg, var(--tc-line), rgba(255, 46, 136, 0.18)) border-box;
  border-radius: var(--radius-md);
}

.feature-card:hover {
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--tc-panel-grad) border-box;
  border-color: transparent;
  box-shadow: var(--shadow-hover);
}

.feature-icon {
  filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.30));
}

.feature-card h3 {
  letter-spacing: 0.02em;
}

.feature-card::after {
  font-family: var(--tc-mono);
  color: var(--tc-cyan);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   9. モーダル (HUDパネル)
   ------------------------------------------------------------ */
.modal-overlay {
  background: rgba(4, 10, 24, 0.66);
  backdrop-filter: blur(6px);
}

.modal {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--tc-panel-grad) border-box;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), var(--tc-glow-cyan);
}

/* ------------------------------------------------------------
   10. 応援セクション / フッター
   ------------------------------------------------------------ */
.support-section {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-lg);
}

.support-section h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.footer {
  border-top: 1px solid var(--tc-line);
  box-shadow: 0 -1px 0 rgba(255, 46, 136, 0.10);
}

.footer-support,
.footer-shop {
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 10px 4px 10px 4px;
}

.footer-links a:hover {
  color: var(--tc-cyan);
  text-shadow: var(--tc-glow-cyan);
}

/* ------------------------------------------------------------
   11. FAQ / セットアップ / 規約ページ
   ------------------------------------------------------------ */
.faq-search {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-sm);
}

.faq-item {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-md);
}

.faq-question {
  font-weight: 700;
}

.faq-code,
.faq-code-row code,
code {
  font-family: var(--tc-mono);
}

.faq-copy-btn {
  border-radius: var(--radius-sm);
}

.setup-step {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-md);
}

.setup-step-number {
  font-family: var(--tc-disp);
}

/* ------------------------------------------------------------
   12. 2026アップデートページ (launch)
   ------------------------------------------------------------ */
.launch-hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 46, 136, 0.16) 0%, transparent 38%),
    radial-gradient(circle at 84% 24%, rgba(0, 180, 255, 0.18) 0%, transparent 36%),
    radial-gradient(circle at 50% 95%, rgba(124, 92, 255, 0.14) 0%, transparent 50%),
    linear-gradient(165deg, #DCE9FB 0%, #EAF1FC 50%, #E2ECFA 100%) !important;
}

body.dark-mode .launch-hero,
html.pre-dark body .launch-hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 77, 157, 0.20) 0%, transparent 38%),
    radial-gradient(circle at 84% 24%, rgba(0, 217, 255, 0.18) 0%, transparent 36%),
    radial-gradient(circle at 50% 95%, rgba(157, 124, 255, 0.16) 0%, transparent 50%),
    linear-gradient(165deg, #050A18 0%, #0B1330 50%, #060C1E 100%) !important;
}

/* キラキラドット → データドット + 微グリッド */
.launch-hero::before {
  background-image:
    radial-gradient(circle, rgba(0, 170, 255, 0.30) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 46, 136, 0.25) 1.5px, transparent 2px),
    linear-gradient(var(--tc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tc-grid) 1px, transparent 1px);
  background-size: 70px 70px, 95px 95px, 44px 44px, 44px 44px;
}

.launch-section {
  border: 1px solid var(--tc-line);
}

.launch-highlight-card {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------
   13. ダッシュボード / 時速グラフページ (インラインCSSの上書き)
   ------------------------------------------------------------ */
.dash h1,
.sp-card h3,
.feat-name,
.cf-box h3,
.dash-group h3 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.cf-actions button,
#save-btn,
.dash-login {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  border-radius: 10px 4px 10px 4px;
}

#save-btn {
  background: linear-gradient(135deg, var(--pink-main), var(--tc-violet));
  box-shadow: var(--tc-glow-pink);
}

.dash-card,
.dash-userbar,
.dash-guilds,
.dash-group,
.feat-card {
  border: 1px solid var(--tc-line);
}

.feat-card {
  border-left: 4px solid var(--accent-mint);
}

.feat-card.off {
  border-left-color: #5A6A8C;
}

.feat-cmd {
  font-family: var(--tc-mono);
  border: 1px solid var(--tc-line);
  border-radius: 4px;
  background: var(--pink-bg);
  color: var(--tc-cyan);
}

.dash-group h3 {
  border-bottom: 1px solid var(--tc-line);
  color: var(--text-main);
}

.dash-group h3::before {
  content: '▸ ';
  color: var(--tc-cyan);
}

/* トグルは角ばった四角だと「バーの幅が変」に見えるので標準のピル型(丸)に戻す */
.dash-switch span {
  background: #8A97B5;
  border-radius: 999px;
}

.dash-switch span::before {
  border-radius: 50%;
}

.dash-switch input:checked + span {
  background: linear-gradient(135deg, var(--accent-mint), var(--tc-cyan));
  box-shadow: 0 0 10px rgba(0, 200, 200, 0.35);
}

/* ダークのOFFトラックは元#2A3552でカード背景と同化しON/OFF不明瞭 → 視認できる明るさ+内枠+明knob、ONは発色強めで明確化 */
body.dark-mode .dash-switch span { background: #46557C; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
body.dark-mode .dash-switch span::before { background: #EAF1FF; }
body.dark-mode .dash-switch input:checked + span { background: #19E3C2; box-shadow: 0 0 12px rgba(25,227,194,0.55), inset 0 0 0 1px rgba(255,255,255,0.25); }

.dash-savebar {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.dash-pending {
  font-family: var(--tc-mono);
  border: 1px solid rgba(180, 140, 0, 0.35);
  background: rgba(255, 201, 60, 0.16);
  color: var(--text-main);
}

.newrem-form {
  border: 1px dashed var(--tc-line);
  background: var(--pink-bg);
}

.newrem-title { color: var(--tc-cyan); }

.bm-item { border-color: var(--tc-line); }

.bulk-row button {
  border: 1px solid var(--tc-line);
  border-radius: var(--radius-sm);
  font-family: var(--tc-mono);
  color: var(--tc-cyan);
  background: transparent;
}

.bulk-row button:hover { background: var(--pink-bg); }

.hist-meta { color: var(--tc-cyan); font-family: var(--tc-mono); }
.hist-item { border-bottom: 1px dashed var(--tc-line); }

.help-q {
  background: transparent;
  border: 1px solid var(--tc-cyan);
  color: var(--tc-cyan);
}

.cf-box {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--tc-panel-grad) border-box;
}

#cf-confirm {
  background: linear-gradient(135deg, var(--pink-main), var(--tc-violet));
}

input[type=text], input[type=number], select, textarea {
  border-radius: var(--radius-sm) !important;
}

/* ------------------------------------------------------------
   14. チャットウィジェット / ページローダー / 小物
   ------------------------------------------------------------ */
.chat-btn {
  box-shadow: var(--tc-glow-pink), 0 10px 26px rgba(120, 40, 160, 0.3);
}

.chat-panel {
  border: 1px solid var(--tc-line);
}

.chat-header {
  background: linear-gradient(135deg, var(--pink-main), var(--tc-violet));
}

.page-loader-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.jackpot-text {
  font-family: var(--tc-disp);
  /* Orbitron は横幅が広く、元の clamp(...,9rem)+nowrap のままだと PC でも横にはみ出すため、
     上限を抑えて折返しと幅上限で必ず画面内に収める (スマホ用のさらに小さい指定は section 17) */
  font-size: clamp(2rem, 11vw, 5.5rem);
  max-width: 94vw;
  white-space: normal;
  text-align: center;
}

/* ダークでヒーローバナー画像をほんの少しネオン馴染みに */
body.dark-mode .hero-banner img {
  filter: saturate(1.05) contrast(1.03) brightness(0.96);
}

/* ------------------------------------------------------------
   15. アクセシビリティ: 動きを減らす設定を尊重
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-badge::before { animation: none; }
  body.dark-mode::after { display: none; }
}

/* ------------------------------------------------------------
   16. スマホ: 横ちび(左右)とCTA横ちびは非表示 / 下ちびは左下へ寄せる
   横ちびは150x278の大物で、狭い画面だと中央寄せカードに被って浮くため非表示。
   .cta-peek (「ハイライトを見る」横のチビ) も狭い画面では邪魔なので非表示。
   下ちびは既定 left:81% だと半分見切れ+右下チャットボタンと被るので左端アンカー。
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .tama-peeker--left,
  .tama-peeker--right,
  .cta-peek {
    display: none;
  }
  .tama-peeker--bottom {
    left: 6px;
    transform: translate(0, 108%);
  }
  .tama-peeker--bottom.peek {
    transform: translate(0, 7%);
  }
}

/* ------------------------------------------------------------
   17. スマホ: ジャックポット文字の見切れ対策
   .jackpot-text は white-space:nowrap + clamp(...,14vw,9rem)。
   テック化で当てた Orbitron は横幅が広く、狭い画面で「✨818 JACKPOT!✨」が
   画面外へはみ出す。サイズを抑え+折返し許可+幅上限で必ず収める。
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .jackpot-text {
    font-size: clamp(1.4rem, 7vw, 2.6rem);
    white-space: normal;
    text-align: center;
    max-width: 92vw;
    line-height: 1.3;
  }
}

/* ------------------------------------------------------------
   18. スマホ: チャットパネル(「聞いてみる」)の上見切れ対策
   元は bottom:88px + height:calc(100vh-110px)。モバイルの 100vh は
   アドレスバー分だけ実表示より大きく、パネル上端が画面外へ押し出されてヘッダーが切れる。
   top を固定して上端を必ず画面内に収める。
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .chat-panel {
    top: 64px;
    height: auto;
    max-height: none;
  }
}

/* ------------------------------------------------------------
   19. スマホ: 左下フロートボタン(祝リリース / あそぶ)をもう少し下部へ
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .celebrate-btn { bottom: 40px; }
  .minigame-btn { bottom: 102px; }
}

/* ------------------------------------------------------------
   20. スマホ: 上部ナビ(8タブ)を1行・横スクロールに
   8項目が狭い画面で4行に折り返して「配列が崩れて」見えるため、
   折り返し禁止+横スクロールの1行タブバーにする。右端フェードでスクロール可を示唆。
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 2px 14px 4px 0;
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 6px 12px;
  }
}


/* ============================================================
   HOLO-DECK FUSION — 近未来オーバーレイ統合版 (最終1枚)
   読込順: style.css -> theme-tech.css -> このCSS (最後に勝つ)
   基軸=方向1 HOLO-DECK / 移植=方向2(ライブドット・端末見出し・ヘッダースキャン)
   ・方向3(細線コーナーブラケット・呼吸オーロラ・非対称チャンファー)
   ・方向4(フローテキスト見出し・セカンダリ内スキャン)
   実コード検証済: .feature-card::after('詳しく見る →') 不可侵 / .feature-card は
   overflow:hidden 無し+preserve-3dティルト / .launch-highlight-card::before は
   base 上端アクセントバー(色のみ上書き) / ライト&ダーク両対応 / reduced-motion全停止
   ============================================================ */

/* ---- 1. トークン: ガラス面/HUD/ブラケット (ライト=クールホワイト艦橋) ---- */
:root{
  --cream:#EEF4FE; --card-bg:#FFFFFF;
  --hd-glass: rgba(255,255,255,0.72);
  --hd-glass-soft: rgba(255,255,255,0.55);
  --hd-stroke: rgba(0,140,220,0.28);
  --hd-cyan:#00A8E8; --hd-cyan-br:#00D9FF; --hd-pink:#FF2E88; --hd-violet:#7C5CFF;
  --hd-glow: 0 0 16px rgba(0,180,255,0.30);
  --hd-glow-pink: 0 0 16px rgba(255,46,136,0.30);
  --hd-bracket: rgba(0,150,225,0.55);
  --hd-bracket-pink: rgba(255,46,136,0.55);
  --hd-live:#22E58F;
  --hd-disp:'Orbitron','Noto Sans JP',sans-serif;
  --hd-mono:'Share Tech Mono','Noto Sans JP',monospace;
  --hd-flow:linear-gradient(100deg,var(--hd-pink) 0%,var(--hd-violet) 42%,var(--hd-cyan) 80%,var(--hd-pink) 100%);
  --hd-brk:14px;
}
body.dark-mode, html.pre-dark body{
  --cream:#060B18; --card-bg:#0C1426;
  --hd-glass: rgba(12,20,40,0.55);
  --hd-glass-soft: rgba(12,20,40,0.40);
  --hd-stroke: rgba(0,217,255,0.32);
  --hd-cyan:#00D9FF; --hd-cyan-br:#6FF2FF; --hd-pink:#FF4D9D; --hd-violet:#9D7CFF;
  --hd-glow: 0 0 20px rgba(0,217,255,0.45);
  --hd-glow-pink: 0 0 20px rgba(255,77,157,0.45);
  --hd-bracket: rgba(0,217,255,0.65);
  --hd-bracket-pink: rgba(255,77,157,0.60);
  --hd-live:#39FF9E;
}

/* ---- 2. 背景: ブループリント格子 + ゆっくり呼吸するオーロラ(方向3移植) ---- */
body{ font-family:'Noto Sans JP',sans-serif; letter-spacing:.01em; }
body::before{
  background-image:
    linear-gradient(rgba(20,110,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,110,200,0.055) 1px, transparent 1px),
    radial-gradient(circle at 10% 6%, rgba(255,46,136,0.07) 0%, transparent 34%),
    radial-gradient(circle at 90% 94%, rgba(0,180,255,0.09) 0%, transparent 36%),
    radial-gradient(circle at 78% 10%, rgba(124,92,255,0.06) 0%, transparent 30%) !important;
  background-size: 46px 46px, 46px 46px, auto, auto, auto !important;
  background-attachment: fixed !important;
  animation: hd-breathe 28s ease-in-out infinite;
}
body.dark-mode::before, html.pre-dark body::before{
  background-image:
    linear-gradient(rgba(0,190,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,190,255,0.055) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(255,77,157,0.10) 0%, transparent 36%),
    radial-gradient(circle at 88% 92%, rgba(0,217,255,0.12) 0%, transparent 38%),
    radial-gradient(circle at 80% 14%, rgba(157,124,255,0.08) 0%, transparent 30%) !important;
  background-size: 46px 46px, 46px 46px, auto, auto, auto !important;
}
@keyframes hd-breathe{
  0%,100%{ opacity:.9; background-position:0 0,0 0,10% 6%,90% 94%,78% 10%; }
  50%{ opacity:1; background-position:0 0,0 0,16% 9%,84% 90%,78% 14%; }
}
::selection{ background:rgba(0,180,255,0.30); color:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--hd-cyan),var(--hd-pink));
  border-radius:5px; border:2px solid var(--cream); }

/* ---- 3. ヘッダー: ガラスのブリッジバー + 最上部スキャン(方向2/4移植) ---- */
.header{
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--hd-stroke);
  box-shadow: 0 1px 0 rgba(0,180,255,0.18), 0 10px 28px rgba(10,40,90,0.07);
  position: relative; overflow: hidden;
}
body.dark-mode .header{ box-shadow:0 1px 0 rgba(255,77,157,0.30),0 0 26px rgba(0,217,255,0.10); }
.header::before{
  content:''; position:absolute; top:0; left:0; height:2px; width:32%;
  background:linear-gradient(90deg,transparent,var(--hd-cyan),var(--hd-pink),transparent);
  box-shadow:var(--hd-glow); pointer-events:none;
  animation:hd-headerscan 6s ease-in-out infinite;
}
@keyframes hd-headerscan{ 0%{transform:translateX(-40%);} 50%{transform:translateX(330%);} 100%{transform:translateX(-40%);} }
.logo{ font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif; font-weight:900; letter-spacing:0.05em; text-shadow:0 0 16px rgba(0,180,255,0.30); }
.logo::before{ content:'◈'; color:var(--hd-cyan); font-size:1.05rem; text-shadow:var(--hd-glow); }
.nav a{ font-family:var(--hd-mono); letter-spacing:0.03em; }
.nav a:hover{ color:var(--hd-cyan); background:rgba(0,180,255,0.08); box-shadow:inset 0 -2px 0 var(--hd-cyan); }
.nav a.active{ background:linear-gradient(135deg,var(--hd-pink),var(--hd-violet)); color:#fff; box-shadow:var(--hd-glow-pink); }
.theme-toggle{ background:var(--hd-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--hd-stroke); }

/* ---- 4. トップバナー(システムアラート風) ---- */
.launch-banner{ font-family:var(--hd-mono); letter-spacing:0.04em; border-bottom:1px solid var(--hd-stroke); }
.launch-banner a{ color:var(--hd-cyan-br); text-shadow:var(--hd-glow); }

/* ---- 5. ヒーロー: ホロディスプレイ + ライブバッジ(方向2移植) + 下線(実在::after) ---- */
.hero-banner{ box-shadow: inset 0 0 0 1px var(--hd-stroke), 0 0 36px rgba(0,170,255,0.12); }
body.dark-mode .hero-banner img{ filter:saturate(1.06) contrast(1.04) brightness(.95); }
.hero-badge, .launch-badge{
  font-family:var(--hd-mono); letter-spacing:0.06em;
  border:1px solid var(--hd-stroke);
  box-shadow: 0 0 0 1px rgba(0,180,255,0.05), 0 6px 18px rgba(10,40,90,0.10);
}
.hero-badge::before, .launch-badge::before{
  content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--hd-live); box-shadow:0 0 10px var(--hd-live);
  margin-right:9px; vertical-align:1px;
  animation:hd-pulse 2.2s ease-in-out infinite;
}
@keyframes hd-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.hero h1, .launch-hero h1{ letter-spacing:0.03em; }
/* pink 見出し = pink->violet->cyan のフローグラデ(方向4移植・低速) */
.hero h1 .pink, .launch-hero h1 .pink{
  background:var(--hd-flow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:var(--hd-pink); animation:hd-flowtext 8s linear infinite;
}
@keyframes hd-flowtext{ 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} }
/* base 実在下線 .hero h1 .pink::after を発光下線へ */
.hero h1 .pink::after{
  height:2px; bottom:-6px; border-radius:0;
  background:linear-gradient(90deg,var(--hd-pink),var(--hd-cyan));
  box-shadow:var(--hd-glow); z-index:-1;
}
.launch-hero-lead, .hero-subtitle, .hero-subtitle-2{ font-family:'Noto Sans JP',sans-serif; }

/* ---- 6. ボタン: 非対称チャンファー(方向3) + ネオン + セカンダリ内スキャン(方向4) ---- */
.btn{ font-family:var(--hd-mono); letter-spacing:0.05em; border-radius:13px 5px 13px 5px; position:relative; overflow:hidden; }
.btn-primary{
  background:linear-gradient(135deg,var(--hd-pink) 0%,var(--hd-violet) 100%);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:var(--hd-glow-pink), 0 8px 22px rgba(120,40,160,0.26);
}
.btn-primary:hover{ box-shadow:0 0 24px rgba(255,46,136,0.55), 0 12px 30px rgba(120,40,160,0.36); transform:translateY(-2px); }
.btn-secondary{
  background:var(--hd-glass-soft); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hd-cyan); color:var(--hd-cyan);
}
.btn-secondary::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(0,200,255,0.18) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.btn-secondary:hover{ background:rgba(0,180,255,0.12); color:var(--hd-cyan); box-shadow:var(--hd-glow); transform:translateY(-2px); }
.btn-secondary:hover::before{ transform:translateX(120%); }

/* ---- 7. 統計: ガラステレメトリパネル + 四隅ブラケット(方向3) + 上端スイープ ---- */
.stats{
  position:relative;
  background:
    linear-gradient(var(--hd-glass), var(--hd-glass)) padding-box,
    linear-gradient(135deg, rgba(0,168,232,0.55), rgba(255,46,136,0.55)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  overflow:hidden;
}
.stats::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--hd-cyan-br), transparent);
  box-shadow:var(--hd-glow); pointer-events:none;
  animation:hd-sweep 4s ease-in-out infinite;
}
@keyframes hd-sweep{ 0%,100%{opacity:.35; transform:translateX(-30%);} 50%{opacity:1; transform:translateX(30%);} }
/* 四隅L字ブラケット(線のみ・::after は数値側で未使用なので .stats に新規付与) */
.stats::after{
  content:''; position:absolute; bottom:10px; right:10px;
  width:var(--hd-brk); height:var(--hd-brk); pointer-events:none;
  border-bottom:2px solid var(--hd-pink); border-right:2px solid var(--hd-pink);
}
.stat-item + .stat-item{ border-left:1px dashed var(--hd-stroke); }
@media (max-width:660px){ .stat-item + .stat-item{ border-left:none; border-top:1px dashed var(--hd-stroke); padding-top:16px; } }
.stat-number{
  font-family:var(--hd-disp); font-weight:700;
  background:var(--hd-flow); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(0,180,255,0.28));
  animation:hd-flowtext 9s linear infinite;
}
.stat-label{ font-family:var(--hd-mono); letter-spacing:0.08em; font-size:0.82rem; }

/* ---- 8. セクション見出し: ターミナルプロンプト(方向2移植) ---- */
.section-title{ font-family:'Noto Sans JP',sans-serif; letter-spacing:0.04em; }
.section-title::before{
  content:'> '; font-family:var(--hd-mono); color:var(--hd-cyan); text-shadow:var(--hd-glow); font-size:0.9em;
}
.section-title::after{
  content:' _'; font-family:var(--hd-mono); color:var(--hd-pink); text-shadow:var(--hd-glow-pink);
  animation:hd-caret 1.1s steps(1) infinite;
}
@keyframes hd-caret{ 50%{opacity:0;} }
.section-subtitle, .launch-section-head p{ font-family:var(--hd-mono); letter-spacing:0.03em; }
.launch-section-head h2::after{ background:linear-gradient(90deg,var(--hd-pink),var(--hd-cyan)); box-shadow:var(--hd-glow); }

/* ---- 9. 機能カード: ガラス面 + HUD四隅ブラケット(::before・::after温存) ---- */
.feature-card{
  position:relative;
  background:
    linear-gradient(var(--hd-glass), var(--hd-glass)) padding-box,
    linear-gradient(160deg, var(--hd-stroke), rgba(255,46,136,0.20)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-radius:12px;
}
.feature-card::before{
  content:''; position:absolute; inset:7px; pointer-events:none; z-index:0;
  border-radius:4px;
  background:
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) right top/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) right top/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) left bottom/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/2px 16px no-repeat;
  opacity:0.5; transition:opacity .3s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  background:
    linear-gradient(var(--hd-glass), var(--hd-glass)) padding-box,
    linear-gradient(135deg, rgba(0,168,232,0.6), rgba(255,46,136,0.6)) border-box;
  border-color:transparent;
  box-shadow:var(--shadow-hover), var(--hd-glow);
}
.feature-card:hover::before{ opacity:1; }
.feature-icon{ filter:drop-shadow(0 0 8px rgba(0,180,255,0.30)); }
.feature-card h3{ letter-spacing:0.02em; }
/* base の '詳しく見る →' ラベルは内容不可侵・体裁のみモノスペース化 */
.feature-card::after{ font-family:var(--hd-mono); color:var(--hd-cyan); letter-spacing:0.06em; }

/* ---- 10. 更新ハイライトカード: base ::before(上端バー)尊重・box-shadowでHUD化 ---- */
.launch-highlight-card{
  background:var(--hd-glass);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--hd-stroke); border-radius:12px;
}
.launch-highlight-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover), var(--hd-glow); border-color:var(--hd-cyan); }
.launch-highlight-card::before{ background:linear-gradient(90deg,var(--hd-cyan),var(--hd-pink)) !important; box-shadow:var(--hd-glow); }
.launch-highlight-card h3{ font-family:var(--hd-disp); letter-spacing:0.02em; font-size:1.25rem; }
.launch-new-badge{ font-family:var(--hd-mono); letter-spacing:0.06em; }
.launch-new-item, .launch-changes-list li{
  background:var(--hd-glass-soft);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hd-stroke);
}
.launch-new-item:hover{ border-color:var(--hd-cyan); box-shadow:var(--hd-glow); }
.launch-changes-list li{ border-left:4px solid var(--hd-cyan); }
.launch-changes-list .label{ font-family:var(--hd-mono); letter-spacing:0.05em; }

/* ---- 11. 更新ヒーロー背景(夜のネオン地平線・両対応) ---- */
.launch-hero{
  background:
    radial-gradient(circle at 16% 18%,rgba(255,46,136,.16) 0%,transparent 38%),
    radial-gradient(circle at 84% 24%,rgba(0,180,255,.18) 0%,transparent 36%),
    radial-gradient(circle at 50% 95%,rgba(124,92,255,.14) 0%,transparent 50%),
    linear-gradient(165deg,#DCE9FB,#EAF1FC 50%,#E2ECFA) !important;
}
body.dark-mode .launch-hero, html.pre-dark body .launch-hero{
  background:
    radial-gradient(ellipse 80% 50% at 18% 0%,rgba(255,77,157,.20) 0%,transparent 55%),
    radial-gradient(ellipse 80% 55% at 85% 100%,rgba(0,217,255,.18) 0%,transparent 55%),
    radial-gradient(circle at 50% 100%,rgba(157,124,255,.18) 0%,transparent 55%),
    linear-gradient(165deg,#04081A,#0A1230 50%,#050B1C) !important;
}
.launch-badge{ background:linear-gradient(135deg,var(--hd-pink) 0%,var(--hd-violet) 100%); box-shadow:var(--hd-glow-pink); }

/* ---- 12. ダッシュボード機能カード(.feat-card)ガラス化 ---- */
.feat-card{
  background:var(--hd-glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hd-stroke); border-left:4px solid var(--accent-mint);
}
.feat-card.off{ border-left-color:#5A6A8C; }
.feat-cmd{ font-family:var(--hd-mono); color:var(--hd-cyan); }

/* ---- 13. モーダル: HUDダイアログ ---- */
.modal-overlay{ background:rgba(4,10,24,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal{
  background:
    linear-gradient(var(--hd-glass), var(--hd-glass)) padding-box,
    linear-gradient(135deg, rgba(0,168,232,0.55), rgba(255,46,136,0.55)) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 24px 70px rgba(0,0,0,0.40), var(--hd-glow);
}
.modal h3{ font-family:var(--hd-disp); letter-spacing:0.02em; }
.modal-command{ font-family:var(--hd-mono); }

/* ---- 14. フッター / 応援セクション(四隅ブラケット・::before未使用) ---- */
.footer{
  background:var(--hd-glass);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--hd-stroke); box-shadow:0 -1px 0 rgba(0,180,255,0.14);
}
.footer-links a{ font-family:var(--hd-mono); letter-spacing:0.02em; }
.footer-links a:hover{ color:var(--hd-cyan); text-shadow:var(--hd-glow); }
.footer-support, .footer-shop{ font-family:'Noto Sans JP',sans-serif; border-radius:10px 4px 10px 4px; }
.support-section{
  position:relative; background:var(--hd-glass);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--hd-stroke); border-radius:14px;
}
.support-section::before{
  content:''; position:absolute; inset:8px; pointer-events:none; border-radius:6px;
  background:
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/18px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/2px 18px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/18px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/2px 18px no-repeat;
  opacity:0.6;
}
.support-section h2{ font-family:var(--hd-disp); letter-spacing:0.03em; }

/* ---- 15. FAQ / セットアップ / 小物 ---- */
.faq-item, .faq-search, .setup-step{ border:1px solid var(--hd-stroke); }
.faq-code, .faq-code-row code, code, .modal-command, .feat-cmd{ font-family:var(--hd-mono); }
.setup-step-number{ font-family:var(--hd-disp); }
.chat-btn{ box-shadow:var(--hd-glow-pink), 0 10px 26px rgba(120,40,160,0.3); }
.chat-panel{ border:1px solid var(--hd-stroke); }
.chat-header{ background:linear-gradient(135deg,var(--hd-pink),var(--hd-violet)); }
.jackpot-text{ font-family:var(--hd-disp); font-size:clamp(2rem,11vw,5.5rem); max-width:94vw; white-space:normal; text-align:center; filter:drop-shadow(0 0 18px rgba(255,46,136,0.5)); }

/* ---- 16. ダーク走査線オーバーレイ(既存 ::after 尊重・少し強調) ---- */
body.dark-mode::after{
  background: repeating-linear-gradient(
    to bottom, transparent 0px, transparent 3px,
    rgba(0,217,255,0.016) 3px, rgba(0,217,255,0.016) 4px);
}

/* ---- 17. レスポンシブ: スマホ(<=600px)で装飾軽量化・横スクロール厳禁 ---- */
@media (max-width:600px){
  .feature-card::before, .support-section::before{ inset:5px; opacity:0.45; }
  .stats::after{ width:9px; height:9px; }
  .section-title::before, .section-title::after{ font-size:0.7em; }
  .header::before{ display:none; } /* 狭幅では横走スキャン省略 */
  .jackpot-text{ font-size:clamp(1.4rem,7vw,2.6rem); max-width:92vw; line-height:1.3; }
  /* ガラス blur を弱めて GPU 負荷軽減 */
  .stats, .modal, .footer, .support-section,
  .feature-card, .launch-highlight-card, .feat-card, .btn-secondary{
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
}

/* ---- 18. アクセシビリティ: prefers-reduced-motion で全アニメ停止 ---- */
@media (prefers-reduced-motion: reduce){
  body::before,
  .header::before,
  .hero-badge::before, .launch-badge::before,
  .stats::before,
  .section-title::after,
  .hero h1 .pink, .launch-hero h1 .pink,
  .stat-number,
  body.dark-mode::after{ animation:none !important; }
  .btn-secondary::before{ transition:none !important; }
  /* フローテキストは停止後も読みやすいグラデを保持(background-position固定) */
  .hero h1 .pink, .launch-hero h1 .pink, .stat-number{ background-position:0 50% !important; }
}
/* ---- 19. nav: monoフォントで8項目がデスクトップ2行に折返すため >600px で詰めて1行に(<=600pxは横スクロール維持) ---- */
@media (min-width: 601px) {
  .header .nav { gap: 10px; }
  .header .nav a { font-size: 0.8rem; letter-spacing: 0; padding: 6px 9px; }
}





/* ===== アーケードを表に出す: ホームの機能カード群とメインCTAの間に、HUDスタイルの「PLAY ===== */

/* ============================================
   アーケード エントリCTA (HOLO-DECK風・かわいさ両立)
   js/arcade-entry.js が自己注入。--hd-* でライト/ダーク自動追従
   ============================================ */
.arcade-cta{
  margin: 40px 0 8px;
  border-radius: 18px 6px 18px 6px;
  position: relative;
  overflow: hidden;
  background: var(--hd-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hd-stroke);
  box-shadow: var(--hd-glow), 0 10px 30px rgba(60,30,120,0.10);
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* 上端の走光ライン */
.arcade-cta::before{
  content:'';
  position:absolute; left:0; top:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--hd-cyan), var(--hd-pink), transparent);
  box-shadow: var(--hd-glow);
  background-size: 220% 100%;
  animation: arcade-cta-scan 6s linear infinite;
  pointer-events:none;
}
.arcade-cta:hover{
  transform: translateY(-3px);
  border-color: var(--hd-cyan);
  box-shadow: var(--hd-glow-pink), 0 16px 40px rgba(60,30,120,0.18);
}
.arcade-cta:focus-visible{
  outline: 2px solid var(--hd-cyan);
  outline-offset: 2px;
}
@keyframes arcade-cta-scan{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}

/* 左の絵柄 (スロット枠) */
.arcade-cta-orb{
  flex: 0 0 auto;
  width: 74px; height: 74px;
  border-radius: 16px 5px 16px 5px;
  display: grid;
  place-items: center;
  font-size: 2.1rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--hd-pink) 0%, var(--hd-violet) 60%, var(--hd-cyan) 100%);
  color: #fff;
  box-shadow: var(--hd-glow-pink), inset 0 0 12px rgba(255,255,255,0.25);
  position: relative;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.arcade-cta-orb::after{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  pointer-events:none;
}
.arcade-cta:hover .arcade-cta-orb{ animation: arcade-orb-bob 1.1s ease-in-out infinite; }
@keyframes arcade-orb-bob{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-4px) rotate(2deg); }
}

/* テキスト群 */
.arcade-cta-body{ flex: 1 1 auto; min-width: 0; }
.arcade-cta-kicker{
  font-family: var(--hd-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hd-cyan);
  text-shadow: var(--hd-glow);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.arcade-cta-kicker .live-dot,
.arcade-cta-kicker .arcade-cta-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hd-live);
  box-shadow: 0 0 8px var(--hd-live);
  display: inline-block;
  animation: arcade-dot-blink 1.6s ease-in-out infinite;
}
@keyframes arcade-dot-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.arcade-cta-title{
  font-family: var(--hd-disp);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  color: var(--text-main);
  margin: 0 0 3px;
  line-height: 1.2;
}
.arcade-cta-title .pk{ color: var(--hd-pink); text-shadow: var(--hd-glow-pink); }
.arcade-cta-sub{
  font-size: 0.86rem;
  color: var(--text-sub);
  margin: 0;
  line-height: 1.5;
}

/* 右の擬似ボタン */
.arcade-cta-go{
  flex: 0 0 auto;
  font-family: var(--hd-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  padding: 11px 20px;
  border-radius: 11px 4px 11px 4px;
  background: linear-gradient(135deg, var(--hd-pink) 0%, var(--hd-violet) 100%);
  color: #fff;
  box-shadow: var(--hd-glow-pink);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.arcade-cta:hover .arcade-cta-go{
  transform: scale(1.05);
  box-shadow: var(--hd-glow-pink), 0 6px 18px rgba(120,40,160,0.3);
}

/* スマホ: 縦積み・横スクロール厳禁 */
@media (max-width: 600px){
  .arcade-cta{
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 16px;
    text-align: left;
  }
  .arcade-cta-orb{ width: 58px; height: 58px; font-size: 1.7rem; }
  .arcade-cta-body{ flex: 1 1 60%; }
  .arcade-cta-title{ font-size: 1.12rem; }
  .arcade-cta-sub{ font-size: 0.8rem; }
  .arcade-cta-go{ flex: 1 1 100%; text-align: center; padding: 12px 16px; }
}

/* reduced-motion: 派手アニメ停止 */
@media (prefers-reduced-motion: reduce){
  .arcade-cta::before{ animation: none; }
  .arcade-cta:hover .arcade-cta-orb{ animation: none; }
  .arcade-cta-kicker .arcade-cta-dot,
  .arcade-cta-kicker .live-dot{ animation: none; }
  .arcade-cta:hover{ transform: none; }
  .arcade-cta:hover .arcade-cta-go{ transform: none; }
}


/* ===== 時速グラフ「ミッションコンソール」化 — speeds.html を HUD/テレメトリ風に ===== */

/* ============================================================
   24. 時速グラフ = MISSION CONSOLE (speeds.html 専用テレメトリ化)
   既存インライン .dash / .sp-card / .dash-guilds を HUD パネル化。
   配色は --hd-* で自動追従、チャート本体の色は speeds-telemetry.js が担当。
   ============================================================ */

/* --- ページ見出しを管制コンソールのヘッダーに --- */
.dash > #login-view > h1,
body .dash h1 {
  font-family: var(--hd-disp);
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  display: inline-block;
}
.dash h1::before {
  content: '◈ ';
  color: var(--hd-cyan);
  text-shadow: var(--hd-glow);
  font-size: 0.85em;
}

/* --- TELEMETRY ステータス帯 (JS が #sp-telemetry-bar を userbar 内に注入) --- */
#sp-telemetry-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hd-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  white-space: nowrap;
}
#sp-telemetry-bar .sp-tlm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hd-live);
  box-shadow: 0 0 9px var(--hd-live);
  animation: hd-pulse 2.2s ease-in-out infinite;
  flex: 0 0 auto;
}
#sp-telemetry-bar .sp-tlm-label { color: var(--hd-cyan); }

/* --- ユーザーバー / サーバー選択バー = コンソール制御列 (ガラス+ブラケット) --- */
.dash-userbar,
.dash-guilds {
  background: var(--hd-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--hd-stroke);
  position: relative;
  overflow: hidden;
}
.dash-userbar::before,
.dash-guilds::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--hd-cyan-br), var(--hd-pink), transparent);
  box-shadow: var(--hd-glow);
  pointer-events: none;
}
.dash-userbar #who {
  font-family: var(--hd-mono);
  letter-spacing: 0.04em;
}
.dash-guilds label {
  font-family: var(--hd-mono);
  letter-spacing: 0.06em;
  color: var(--hd-cyan);
  text-transform: none;
}
.dash-guilds label::before {
  content: '▸ ';
  color: var(--hd-cyan);
}
#guild-select {
  font-family: var(--hd-mono);
  border: 1px solid var(--hd-stroke);
  background: var(--hd-glass-soft);
  color: var(--text-main);
}

/* --- モード切替 = セグメント端末トグル --- */
.sp-mode button {
  font-family: var(--hd-mono);
  letter-spacing: 0.03em;
  border: 1px solid var(--hd-stroke);
  background: var(--hd-glass-soft);
  color: var(--text-sub);
  transition: color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sp-mode button:hover {
  color: var(--hd-cyan);
  box-shadow: inset 0 0 10px rgba(0,180,255,0.12);
}
.sp-mode button.active {
  background: linear-gradient(135deg, var(--hd-pink), var(--hd-violet));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--hd-glow-pink);
}

/* --- 各時速チャネル = テレメトリパネル (ガラス + 四隅ブラケット + 上端スイープ) --- */
.sp-card {
  position: relative;
  background: var(--hd-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--hd-stroke);
  border-radius: 12px;
  overflow: hidden;
}
.sp-card::before {
  content: '';
  position: absolute; inset: 7px; pointer-events: none; z-index: 0;
  border-radius: 4px;
  background:
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) left top/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) right top/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) right top/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) left bottom/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket-pink),var(--hd-bracket-pink)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--hd-bracket),var(--hd-bracket)) right bottom/2px 16px no-repeat;
  opacity: 0.55;
}
/* 上端スイープライン */
.sp-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--hd-cyan-br), transparent);
  box-shadow: var(--hd-glow);
  pointer-events: none;
  animation: hd-sweep 5s ease-in-out infinite;
}
.sp-card > * { position: relative; z-index: 2; }
.sp-card h3 {
  font-family: var(--hd-disp);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-main);
}
.sp-card h3::before {
  content: 'CH ';
  font-family: var(--hd-mono);
  font-size: 0.62em;
  color: var(--hd-cyan);
  letter-spacing: 0.1em;
  vertical-align: 2px;
  margin-right: 2px;
}
.sp-meta {
  font-family: var(--hd-mono);
  letter-spacing: 0.03em;
  color: var(--text-sub);
}
/* キャンバス枠を計器の窓に */
.sp-canvas-wrap {
  border: 1px solid var(--hd-stroke);
  border-radius: 8px;
  background:
    linear-gradient(rgba(20,110,200,0.045) 1px, transparent 1px) 0 0/100% 24px,
    var(--hd-glass-soft);
  padding: 6px;
  box-sizing: border-box;
}
body.dark-mode .sp-canvas-wrap,
html.pre-dark body .sp-canvas-wrap {
  background:
    linear-gradient(rgba(0,190,255,0.05) 1px, transparent 1px) 0 0/100% 24px,
    var(--hd-glass-soft);
}

/* --- ローディング / 空表示をモノ端末文 --- */
.dash-loading,
.dash-empty {
  font-family: var(--hd-mono);
  letter-spacing: 0.05em;
  color: var(--text-sub);
}
.dash-loading::before {
  content: '> ';
  color: var(--hd-cyan);
}
.dash-note {
  font-family: var(--hd-mono);
  letter-spacing: 0.02em;
}

/* --- ログインボタン(Discord)はブランド色維持・角だけ HUD に --- */
.dash-login { border-radius: 12px 4px 12px 4px; }

/* --- スマホ: 装飾軽量化・横スクロール厳禁 --- */
@media (max-width: 600px) {
  .sp-card::before { inset: 5px; opacity: 0.45; }
  .sp-card,
  .dash-userbar,
  .dash-guilds {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .dash-guilds { gap: 8px; }
  .sp-mode { flex-wrap: wrap; }
  #sp-telemetry-bar { display: none; } /* userbar が窮屈なため非表示 */
  .sp-canvas-wrap { height: 240px; }
}

/* --- reduced-motion: スイープ/パルス停止 --- */
@media (prefers-reduced-motion: reduce) {
  .sp-card::after,
  .dash-userbar::before,
  .dash-guilds::before,
  #sp-telemetry-bar .sp-tlm-dot { animation: none !important; }
}




/* ===== ダッシュボードの「最下部メッセージ」編集に、Discordでの見え方ライブプレビューを追加。 ===== */

/* ============================================================
   最下部メッセージ Discord見え方プレビュー (bm-preview)
   ライト/ダーク両対応 (--hd-* 変数) / スマホ可読 / 横スクロール無し
   ============================================================ */
.bm-preview{
  margin:8px 0 12px;
  border:1px solid var(--hd-stroke);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(0,170,255,0.04), rgba(255,46,136,0.03)),
    var(--card-bg, #fff);
  padding:10px 12px 12px;
  position:relative;
  overflow:hidden;
}
.bm-preview::before{
  content:'PREVIEW · Discord';
  position:absolute; top:6px; right:10px;
  font-family:var(--hd-mono); font-size:.58rem; letter-spacing:.12em;
  color:var(--hd-cyan); opacity:.7; pointer-events:none;
}
.bmp-msg{ display:flex; gap:10px; align-items:flex-start; }
.bmp-av{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  background:linear-gradient(135deg, var(--hd-pink), var(--hd-violet));
  box-shadow:0 0 0 1px var(--hd-stroke); user-select:none;
}
.bmp-body{ flex:1 1 auto; min-width:0; }
.bmp-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-bottom:2px; }
.bmp-name{ font-weight:700; color:var(--text-main); font-size:.92rem; }
.bmp-bot{
  font-family:var(--hd-mono); font-size:.56rem; letter-spacing:.08em;
  color:#fff; background:var(--hd-cyan);
  border-radius:4px; padding:1px 5px; transform:translateY(-1px);
}
.bmp-time{ font-size:.66rem; color:var(--text-sub); }
/* 素のテキスト (Embed OFF) */
.bmp-plain{
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  color:var(--text-main); font-size:.9rem; line-height:1.5; margin-top:2px;
}
.bmp-empty{ color:var(--text-sub); font-style:italic; opacity:.8; }
/* Embed (ON) */
.bmp-embed{
  margin-top:3px;
  display:grid; grid-template-columns:4px 1fr; align-items:stretch;
  background:rgba(0,0,0,0.04);
  border-radius:5px; overflow:hidden;
  max-width:520px;
}
.bmp-embed-bar{ background:var(--hd-cyan); }
.bmp-embed-in{ padding:8px 12px 10px; min-width:0; }
.bmp-embed-title{
  font-weight:700; color:var(--text-main); font-size:.92rem; line-height:1.35;
  word-break:break-word; overflow-wrap:anywhere; margin-bottom:3px;
}
.bmp-embed-desc{
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  color:var(--text-main); font-size:.86rem; line-height:1.5;
}
.bmp-swatch{
  display:inline-block; width:.72em; height:.72em; border-radius:3px;
  margin-left:6px; vertical-align:-1px; box-shadow:0 0 0 1px var(--hd-stroke);
}
body.dark-mode .bmp-embed, html.pre-dark body .bmp-embed{ background:rgba(255,255,255,0.05); }
body.dark-mode .bm-preview, html.pre-dark body .bm-preview{ background:linear-gradient(180deg, rgba(0,217,255,0.05), rgba(255,77,157,0.04)), var(--card-bg, #0C1426); }
@media (max-width:600px){
  .bm-preview{ padding:9px 9px 10px; }
  .bmp-av{ flex-basis:32px; width:32px; height:32px; font-size:17px; }
  .bmp-name{ font-size:.86rem; }
  .bmp-embed{ max-width:100%; }
  .bm-preview::before{ font-size:.5rem; top:5px; right:8px; }
}
@media (prefers-reduced-motion: reduce){
  .bm-preview, .bmp-av{ transition:none !important; animation:none !important; }
}