/* 
 * Premium Dark Mode UI with Glassmorphism 
 * Modern Web Application Aesthetic
 */

:root {
  --bg-dark: #0a0a0f;
  --bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
  --accent-primary: #7c3aed; /* Vibrant Purple */
  --accent-secondary: #3b82f6; /* Vibrant Blue */
  --accent-glow: rgba(124, 58, 237, 0.5);
  
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.08);
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  
  --tier-god: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --tier-s-plus: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --tier-s: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  --tier-a-plus: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --tier-a: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-dark);
  background-image: radial-gradient(circle at 15% 50%, rgba(124, 58, 237, 0.15), transparent 25%),
                    radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.15), transparent 25%);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-gradient {
  background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-accent {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Header */
header {
  padding: 2rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-icon {
  width: 34px;
  height: 34px;
  background: url("../assets/emblem.webp?v=2") center/contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.logo-icon i { display: none; }

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

nav a:hover {
  color: var(--text-main);
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* Hero Section */
.hero {
  padding: 6rem 5% 4rem;
  text-align: center;
  position: relative;
}

.hero h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.hero p {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* Search Bar */
.search-container {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 1.2rem 1.5rem;
  font-size: 1.1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  color: var(--text-main);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px var(--accent-glow);
  background: rgba(255, 255, 255, 0.05);
}

/* Category Grid */
.container {
  padding: 2rem 5% 5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Glass Card */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transform: skewX(-20deg);
  transition: all 0.6s ease;
}

.glass-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 30px rgba(0,0,0,0.4), 0 0 15px rgba(124, 58, 237, 0.1);
}

.glass-card:hover::before {
  left: 200%;
}

.card-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: inline-flex !important; align-items: center; justify-content: center;
  line-height: 1; font-size: 1.45rem; margin-bottom: 0.9rem;
  color: #c4b5fd; -webkit-text-fill-color: currentColor;
  background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(59,130,246,.14));
  border: 1px solid rgba(168,85,247,.34);
  box-shadow: 0 0 16px rgba(124,58,237,.16), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}
.glass-card:hover .card-icon { box-shadow: 0 0 24px rgba(124,58,237,.42), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-2px); }

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-grow: 1;
}

.card-meta {
  margin-top: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--accent-secondary);
  font-weight: 600;
}
.card-meta span {
  background: rgba(168,85,247,.14);
  border: 1px solid rgba(168,85,247,.3);
  color: #cbb6ff;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}
.card-meta i {
  color: var(--accent-primary);
  transition: transform 0.2s ease;
}
.glass-card:hover .card-meta i { transform: translateX(4px); }
/* 上端アクセントライン（ホバーで点灯） */
.glass-card { border-top: 2px solid transparent; }
.glass-card:hover { border-top-color: rgba(168,85,247,.5); }

/* Item Grid (for category.html) */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.item-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.2);
}

.item-image {
  width: 100%;
  height: 200px;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.item-card:hover .item-image img {
  transform: scale(1.05);
}

.tier-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.85rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 10;
}

.tier-god { background: var(--tier-god); }
.tier-s-plus { background: var(--tier-s-plus); }
.tier-s { background: var(--tier-s); }
.tier-a-plus { background: var(--tier-a-plus); }
.tier-a { background: var(--tier-a); }

/* カードのティアピルに HUD アイコンを小さく前置き（god/S+/S/A+/A のみ） */
.tier-badge.tier-god::before,
.tier-badge.tier-s-plus::before,
.tier-badge.tier-s::before,
.tier-badge.tier-a-plus::before,
.tier-badge.tier-a::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 4px;
  vertical-align: -3px; background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.tier-badge.tier-god::before { background-image: url("../assets/tiers/god.webp"); }
.tier-badge.tier-s-plus::before { background-image: url("../assets/tiers/splus.webp"); }
.tier-badge.tier-s::before { background-image: url("../assets/tiers/s.webp"); }
.tier-badge.tier-a-plus::before { background-image: url("../assets/tiers/aplus.webp"); }
.tier-badge.tier-a::before { background-image: url("../assets/tiers/a.webp"); }

.apex-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--accent-primary);
  color: var(--accent-primary);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 0 10px var(--accent-glow);
}

.item-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.item-brand {
  font-size: 0.8rem;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.item-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.item-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-specs {
  margin-top: auto;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.85rem;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding-bottom: 0.4rem;
}

.spec-row:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.spec-label {
  color: var(--text-muted);
}

.spec-value {
  font-weight: 600;
  text-align: right;
  max-width: 60%;
}

/* Cross-Sell Section (ついで買い) */
.cross-sell-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.cross-sell-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cross-sell-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cross-sell-tag {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-main);
  transition: all 0.2s ease;
  cursor: pointer;
}

.cross-sell-tag:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--accent-primary);
  color: white;
}

/* Footer */
footer {
  text-align: center;
  padding: 3rem 5%;
  border-top: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 4rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  nav ul { display: none; } /* Hamburger menu needed for real prod */
}

/* ============================================================
   QUALITY LAYER v2  (polish: background, hero, filters,
   reveal animations, refined cards, pagination)
   ============================================================ */

/* --- Animated aurora background --- */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(40% 40% at 18% 22%, rgba(124,58,237,0.22), transparent 60%),
    radial-gradient(38% 38% at 82% 28%, rgba(59,130,246,0.20), transparent 60%),
    radial-gradient(45% 45% at 60% 85%, rgba(168,85,247,0.14), transparent 60%);
  filter: blur(40px);
  animation: auroraDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  pointer-events: none;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .fade-in, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Custom scrollbar + selection */
::selection { background: rgba(124,58,237,0.4); color: #fff; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent-primary), var(--accent-secondary));
  border-radius: 10px; border: 3px solid var(--bg-dark);
}

/* --- Hero polish --- */
.hero h1 { font-size: 4.4rem; letter-spacing: -0.03em; }
.hero .text-accent {
  background: linear-gradient(110deg, #a78bfa 0%, #60a5fa 45%, #a78bfa 90%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 6s linear infinite;
}
@keyframes shimmerText { to { background-position: 220% center; } }

.search-input::placeholder { color: rgba(148,163,184,0.7); }

/* Hero stats strip (injected by JS) */
.hero-stats {
  display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap;
  margin-top: 2.5rem;
}
.hero-stat { text-align: center; }
.hero-stat .num {
  font-size: 2rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-stat .lbl { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }

/* --- Filter / sort toolbar --- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 2rem;
  backdrop-filter: blur(10px);
}
.filter-bar .fb-search { flex: 1 1 240px; min-width: 200px; padding: 0.7rem 1.1rem; font-size: 0.95rem; border-radius: 10px; }
.filter-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.filter-group > .fg-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.2rem; }
.chip {
  font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 50px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; user-select: none;
}
.chip:hover { color: var(--text-main); border-color: rgba(255,255,255,0.25); }
.chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
.fb-select {
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  color: var(--text-main); border-radius: 10px; padding: 0.55rem 0.9rem; font-size: 0.88rem;
  cursor: pointer; outline: none; transition: all 0.2s ease;
}
.fb-select:focus { border-color: var(--accent-primary); }
.fb-count { font-size: 0.85rem; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.fb-count strong { color: var(--text-main); }

/* --- Scroll reveal --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
.reveal.visible { opacity: 1; transform: none; }

/* --- Refined item cards --- */
.item-card { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease; }
.item-card:hover { transform: translateY(-7px); box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.35); }
.item-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.55), transparent 55%);
  pointer-events: none;
}
.item-image img { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.item-card:hover .item-image img { transform: scale(1.08); }
.item-name { background: linear-gradient(90deg,#fff,#fff); -webkit-background-clip: text; background-clip: text; }
.item-card:hover .item-name { background: linear-gradient(90deg, #fff, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tier-badge { backdrop-filter: blur(2px); letter-spacing: 0.03em; }

/* price pill */
.price-pill {
  display: inline-block; margin-top: 0.6rem; font-weight: 800; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* 価格未掲載時のCTA（ハードコード価格は陳腐化・景表法リスクのため出さず、ストア誘導に） */
.price-pill--ask {
  background: none; -webkit-text-fill-color: initial; color: var(--text-secondary, #9aa);
  font-weight: 700; font-size: 0.92rem; opacity: 0.85;
}
.detail-price--ask {
  background: none; -webkit-text-fill-color: initial; color: var(--text-secondary, #9aa) !important;
  font-size: 1rem; font-weight: 700;
}

/* buy link button */
.buy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1rem; padding: 0.7rem 1rem; width: 100%;
  border-radius: 10px; font-weight: 700; font-size: 0.9rem; text-decoration: none;
  color: #fff; background: linear-gradient(135deg, rgba(251,146,60,.20), rgba(124,58,237,.16));
  border: 1px solid rgba(251,191,36,.44);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color .2s ease; box-shadow: 0 8px 22px rgba(251,146,60,0.16);
}
.buy-btn:hover { transform: translateY(-2px); border-color: rgba(251,191,36,.72); box-shadow: 0 12px 28px rgba(251,146,60,0.24), 0 0 18px rgba(124,58,237,.16); }

/* --- 購入ストアブロック（買い物導線） --- */
.buy-stores { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.buy-stores .buy-btn { margin-top: 0; }
.buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.buy-amazon { background: linear-gradient(135deg, rgba(251,146,60,.20), rgba(124,58,237,.16)); }
.buy-rakuten { background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(124,58,237,.14)); border-color: rgba(244,114,182,.42); box-shadow: 0 8px 22px rgba(244,63,94,0.14); }
.buy-rakuten:hover { border-color: rgba(244,114,182,.72); box-shadow: 0 12px 28px rgba(244,63,94,0.22), 0 0 18px rgba(124,58,237,.16); }
.buy-yahoo { background: linear-gradient(135deg, rgba(244,63,94,.18), rgba(124,58,237,.14)); border-color: rgba(244,114,182,.42); box-shadow: 0 8px 22px rgba(244,63,94,0.14); }
.buy-yahoo:hover { border-color: rgba(244,114,182,.72); box-shadow: 0 12px 28px rgba(244,63,94,0.22), 0 0 18px rgba(124,58,237,.16); }
.buy-detail { background: rgba(255,255,255,0.07); color: #fff; box-shadow: none; border: 1px solid var(--hairline); }
.buy-detail:hover { background: rgba(255,255,255,0.12); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.buy-note { font-size: 0.74rem; color: var(--text-muted); margin: 0.55rem 0 0; text-align: center; line-height: 1.5; }

/* --- Load more / pagination --- */
.load-more-wrap { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 2.5rem; }
.load-more {
  padding: 0.9rem 2.2rem; border-radius: 50px; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  color: var(--text-main); background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); transition: all 0.25s ease;
}
.load-more:hover { background: var(--glass-hover); border-color: var(--accent-primary); box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-2px); }

.empty-state { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 4rem 1rem; font-size: 1rem; }

/* stagger helper for grid reveal */
.item-grid .reveal { transition-delay: var(--rd, 0s); }

/* ============================================================
   MOBILE / RESPONSIVE + NAV  (quality layer v3)
   ============================================================ */

/* Hamburger button (injected by js/ui.js) */
.nav-toggle {
  display: none;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-main); width: 42px; height: 42px; border-radius: 10px;
  font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); transition: all 0.2s ease;
}
.nav-toggle:hover { border-color: var(--accent-primary); box-shadow: 0 0 14px var(--accent-glow); }

@media (max-width: 1024px) {
  header { padding: 1.1rem 5%; }
  .nav-toggle { display: inline-flex; }
  nav ul {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(10,10,15,0.96); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    padding: 0.5rem 5% 1.2rem; transform: translateY(-130%);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); z-index: 90;
  }
  body.nav-open nav ul { transform: translateY(0); display: flex; }
  nav ul li { padding: 0.6rem 0; border-bottom: 1px solid var(--glass-border); }
}

@media (max-width: 768px) {
  .hero { padding: 3.5rem 5% 2.5rem; }
  .hero h1, .hero .text-accent { font-size: 2.4rem; }
  .hero p { font-size: 1rem; }
  .hero-stats { gap: 1.5rem; margin-top: 1.8rem; }
  .hero-stat .num { font-size: 1.5rem; }
  .section-title { font-size: 1.5rem; }
  .container { padding: 1.5rem 5% 4rem; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
  .filter-bar { padding: 0.85rem; gap: 0.6rem; }
  .filter-bar .fb-search { flex-basis: 100%; }
  .fb-count { margin-left: 0; }
}

@media (max-width: 480px) {
  .item-grid, .category-grid { grid-template-columns: 1fr; }
  .hero h1, .hero .text-accent { font-size: 2rem; }
  .hero-stats { gap: 1.1rem; }
}

/* ============================================================
   SITE UX  (toast, back-to-top, active nav) v5
   ============================================================ */
nav a.is-active { color: var(--text-main); position: relative; }
nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }

#toast-wrap { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 500; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.toast { pointer-events: auto; min-width: 220px; max-width: 340px; padding: 0.85rem 1.1rem; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: #fff;
  background: rgba(26,26,46,0.95); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  display: flex; align-items: center; gap: 0.6rem; transform: translateX(120%); opacity: 0; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s; }
.toast.show { transform: none; opacity: 1; }
.toast.ok { border-left: 3px solid #10b981; } .toast.ok i { color: #34d399; }
.toast.err { border-left: 3px solid #ef4444; } .toast.err i { color: #fca5a5; }
.toast.info { border-left: 3px solid var(--accent-primary); } .toast.info i { color: #a78bfa; }

#to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 300; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-main); font-size: 1.1rem; backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: all 0.3s ease; }
#to-top.show { opacity: 1; visibility: visible; transform: none; }
#to-top:hover { border-color: var(--accent-primary); box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-3px); }

/* card subtle pointer affordance already set; add focus-visible accessibility */
a:focus-visible, button:focus-visible, .chip:focus-visible, .opt:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }

/* ---- Favorites (★) ---- */
.fav-btn { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 12; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.55); border: 1px solid var(--glass-border); color: #94a3b8; font-size: 1rem; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.fav-btn:hover { color: #fcd34d; border-color: #fcd34d; transform: scale(1.1); }
.fav-btn.is-fav { color: #fbbf24; border-color: #fbbf24; background: rgba(251,191,36,0.18); box-shadow: 0 0 14px rgba(251,191,36,0.45); }
/* when an apex-badge is present, push the star down a little so they don't overlap */
.item-image .apex-badge + .fav-btn { top: 3.1rem; }

.fav-count { display: none; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 0.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg,#fbbf24,#d97706); border-radius: 50px; margin-left: 0.3rem; vertical-align: middle; }

/* ============================================================
   DETAIL MODAL  (quality layer v4)
   ============================================================ */
.item-card { cursor: pointer; }

.detail-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,5,10,0.72); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 5vh 4vw;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.detail-overlay.open { opacity: 1; visibility: visible; }

.detail-modal {
  width: 100%; max-width: 780px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(26,26,46,0.96), rgba(10,10,15,0.97));
  border: 1px solid var(--glass-border); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6); position: relative;
  transform: translateY(20px) scale(0.98); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.detail-overlay.open .detail-modal { transform: none; }

.detail-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border);
  color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.detail-close:hover { background: var(--accent-primary); transform: rotate(90deg); }

.detail-hero { position: relative; height: 260px; overflow: hidden; border-radius: 20px 20px 0 0; background: rgba(0,0,0,0.4); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,15,0.95), transparent 70%); }

.detail-body { padding: 1.75rem 2rem 2rem; margin-top: -60px; position: relative; z-index: 2; }
.detail-brand { font-size: 0.85rem; color: var(--accent-secondary); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.detail-name { font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin: 0.2rem 0 0.6rem; }
.detail-badges { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.detail-badges .detail-tier-icon { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 7px rgba(0,0,0,.5)); }
.detail-tier { padding: 0.25rem 0.8rem; border-radius: 20px; font-weight: 800; font-size: 0.8rem; color: #fff; }
.detail-price { font-weight: 800; font-size: 1.4rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.detail-desc { color: #cbd5e1; font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.5rem; }

.detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.detail-specs .drow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.detail-specs .dk { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }
.detail-specs .dv { font-weight: 600; font-size: 0.85rem; text-align: right; }
.detail-section-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0.5rem 0 0.8rem; }
.sim-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sim-card { width: 96px; cursor: pointer; transition: transform 0.2s ease; }
.sim-card:hover { transform: translateY(-3px); }
.sim-card img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--glass-border); }
.sim-card .sim-name { font-size: 0.7rem; color: #cbd5e1; margin-top: 0.3rem; line-height: 1.3; }

/* ---- Featured (今月のおすすめ) + News feed ---- */
.featured-card { display: block; text-decoration: none; color: var(--text-main); background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(59,130,246,0.12)); border: 1px solid rgba(124,58,237,0.35); border-radius: 18px; padding: 1.6rem 1.8rem; transition: all 0.3s ease; }
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.4); border-color: rgba(124,58,237,0.6); }
.featured-tag { display: inline-block; font-size: 0.78rem; font-weight: 800; color: #fde047; margin-bottom: 0.5rem; }
.featured-card h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.featured-card p { color: #cbd5e1; font-size: 0.95rem; }
.featured-cta { display: inline-block; margin-top: 0.9rem; color: #a78bfa; font-weight: 700; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.news-item { display: block; text-decoration: none; color: var(--text-main); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 1.1rem 1.2rem; transition: all 0.25s ease; }
.news-item:hover { transform: translateY(-3px); border-color: rgba(124,58,237,0.4); background: var(--glass-hover); }
.news-item h3 { font-size: 1rem; margin: 0.4rem 0 0.3rem; line-height: 1.4; }
.news-item p { color: var(--text-muted); font-size: 0.83rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-tag2 { font-size: 0.7rem; font-weight: 700; color: #c4b5fd; background: rgba(124,58,237,0.15); padding: 0.15rem 0.6rem; border-radius: 50px; }
.news-date { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.5rem; }

/* ---- Sponsor / promo slot (協賛枠) + coupon ---- */
.promo-slot { display: flex; align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap; background: var(--glass-bg); border: 1px dashed var(--glass-border); border-radius: 12px; padding: 0.9rem 1.2rem; margin: 1.5rem auto; max-width: 1100px; color: var(--text-muted); font-size: 0.85rem; }
.promo-slot.filled { border-style: solid; border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.08); color: var(--text-main); }
.coupon-pill { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(16,185,129,0.12); border: 1px dashed #10b981; color: #6ee7b7; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.85rem; }

@media (max-width: 600px) {
  .detail-hero { height: 200px; }
  .detail-name { font-size: 1.5rem; }
  .detail-specs { grid-template-columns: 1fr; }
  .detail-body { padding: 1.25rem 1.25rem 1.75rem; }
}

/* ============================================================
   PREMIUM POLISH v6 — device browsing
   軽量・GPU負荷を抑える方針: アニメは transform/opacity のみ、
   常時アニメは最小、hover系は擬似要素のopacityで切替、
   長い一覧は content-visibility で描画コストを削減。
   ============================================================ */

/* --- perf: 画面外カードの描画をスキップ（大量カードでも軽い） --- */
.item-card { content-visibility: visible; contain-intrinsic-size: auto; position: relative; }
.category-card { position: relative; }

/* --- カードのグラデーション・グロー枠（hover時のみ・レイアウト非干渉） --- */
.item-card::before, .category-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(124,58,237,0.85), rgba(59,130,246,0.55) 45%, rgba(16,185,129,0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 6;
}
.item-card:hover::before, .category-card:hover::before { opacity: 1; }

/* --- 画像エリアの光沢スイープ（hover時に一度流れる） --- */
.item-image { isolation: isolate; }
.item-image::before {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 0.75s cubic-bezier(0.16,1,0.3,1);
}
.item-card:hover .item-image::before { left: 135%; }

/* --- 画像プレースホルダ（読み込み前の地色をブランド寄りに） --- */
.item-image { background: radial-gradient(120% 120% at 30% 0%, rgba(124,58,237,0.10), rgba(0,0,0,0.32) 60%); }

/* --- tierバッジを少し立体的に --- */
.tier-badge { box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }

/* --- 購入ボタンに控えめなシャイン --- */
.buy-btn { position: relative; overflow: hidden; }
.buy-btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none;
}
.buy-btn:hover::after { left: 130%; }

/* --- セクション見出しのアクセント下線 --- */
.section-title { position: relative; }

/* --- フィルターバーをガラス質に＆フォーカスで発光 --- */
.filter-bar { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.filter-bar:focus-within { border-color: rgba(124,58,237,0.45); box-shadow: 0 0 0 1px rgba(124,58,237,0.25), 0 10px 30px rgba(0,0,0,0.35); }

/* --- チップ/トグルのhover微動 --- */
.chip, .opt { transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.chip:hover, .opt:hover { transform: translateY(-1px); }

/* --- 環境光（ゆっくり漂うオーロラ。transformのみ＝低負荷・最背面） --- */
body::before {
  content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(124,58,237,0.12), transparent 70%),
    radial-gradient(34% 34% at 82% 72%, rgba(59,130,246,0.12), transparent 70%);
  will-change: transform;
  animation: gax-aurora 26s ease-in-out infinite alternate;
}
@keyframes gax-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -3%, 0) scale(1.1); }
}

/* --- アクセシビリティ／省電力: モーション抑制時は装飾アニメを止める --- */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .item-image::before, .buy-btn::after, .item-image img, .item-card, .category-card { transition: none; }
}

/* ============================================================
   FILTER v7 — コンパクトなバー＋「フィルター」ボタンで開くパネル
   普段はスッキリ、押すと詳細条件が出る直感UX。
   ============================================================ */
.filter-bar2 {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 0.8rem 1rem; margin-bottom: 2rem; backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.filter-bar2:focus-within { border-color: rgba(124,58,237,0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.fb-top { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.filter-bar2 .fb-search { flex: 1 1 240px; min-width: 180px; padding: 0.7rem 1.1rem; font-size: 0.95rem; border-radius: 10px; }
.fb-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.62rem 1.05rem; border-radius: 10px;
  font-size: 0.88rem; font-weight: 700; cursor: pointer; color: var(--text-main);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); transition: all 0.2s ease; white-space: nowrap;
}
.fb-toggle:hover { border-color: rgba(124,58,237,0.5); transform: translateY(-1px); }
.fb-toggle.has-active { border-color: rgba(124,58,237,0.6); color: #c4b5fd; }
.fb-toggle.expanded { background: rgba(124,58,237,0.14); }
.fb-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 0.7rem; font-weight: 800; color: #fff; border-radius: 50px;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}
.fb-panel { display: none; }
.fb-panel.open {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.4rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-border);
}
.fb-panel .fg { display: flex; flex-direction: column; gap: 0.5rem; }
.fb-panel .fg-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fb-panel .fg-label b { color: #a78bfa; font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 0.3rem; }
.fb-panel .fg-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fb-panel input[type=range] { width: 100%; }
.fb-panel .fb-select { width: 100%; }
.fg-actions { grid-column: 1 / -1; }
.fb-clear {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 50px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--text-muted);
  background: transparent; border: 1px solid var(--glass-border); transition: all 0.2s ease;
}
.fb-clear:hover { color: #fca5a5; border-color: rgba(239,68,68,0.5); }
@media (max-width: 768px) {
  .fb-top { gap: 0.5rem; }
  .fb-toggle, .filter-bar2 .fb-sort { flex: 1 1 auto; justify-content: center; }
  .fb-count { width: 100%; margin-left: 0; text-align: right; }
  .fb-panel.open { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .fb-panel.open { grid-template-columns: 1fr; } }

/* ============================================================
   UI FEEDBACK — 押下感 + 画面遷移 + 操作音トグル
   ============================================================ */
button, .chip, .opt, .buy-btn, .load-more, .fav-btn, .fb-toggle, .fb-clear, .daily-btn {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
button:active, .chip:active, .opt:active, .buy-btn:active, .load-more:active, .fav-btn:active, .fb-toggle:active, .fb-clear:active, .daily-btn:active {
  transform: scale(0.95); filter: brightness(1.08);
}

/* page transition — opacity only (safe for fixed/sticky elements) */
@keyframes gax-page-in { from { opacity: 0.4; } to { opacity: 1; } }
body { animation: gax-page-in 0.25s ease both; }
body.gax-leaving { opacity: 0; transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.gax-leaving { opacity: 1; transition: none; }
}

/* sound on/off toggle (bottom-left, mirrors #to-top) */
#sfx-toggle {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 300; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-main); font-size: 1rem; backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; transition: all 0.25s ease;
}
#sfx-toggle:hover { border-color: var(--accent-primary); box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-3px); }
#sfx-toggle.muted { color: var(--text-muted); }

.gax-tap-pulse {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(56, 213, 255, .72);
  background: radial-gradient(circle, rgba(56,213,255,.26), rgba(168,85,247,.10) 52%, transparent 70%);
  box-shadow: 0 0 18px rgba(56,213,255,.35), 0 0 28px rgba(168,85,247,.18);
  animation: gaxTapPulse .5s cubic-bezier(.16, 1, .3, 1) forwards;
  will-change: transform, opacity;
}
.gax-tap-pulse.is-strong {
  border-color: rgba(251,191,36,.78);
  background: radial-gradient(circle, rgba(251,191,36,.32), rgba(251,113,133,.12) 55%, transparent 72%);
  box-shadow: 0 0 20px rgba(251,191,36,.36), 0 0 34px rgba(251,113,133,.18);
}
@keyframes gaxTapPulse {
  0% { opacity: .92; transform: scale(.45); }
  70% { opacity: .28; transform: scale(4.2); }
  100% { opacity: 0; transform: scale(5.4); }
}
@media (prefers-reduced-motion: reduce) {
  .gax-tap-pulse { display: none; }
}

/* ===== キャラ相談バナー（トップ：二人紹介＋掛け合い） v8 ===== */
.char-hero {
  position: relative; max-width: 1180px; margin: 1.2rem auto 0.4rem; padding: 0 1rem;
  display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; align-items: end; gap: 0; min-height: 300px;
}
.char-hero .ch-art { position: relative; height: 330px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.char-hero .ch-art img, .char-hero .ch-art svg { width: auto; height: 470px; max-width: none; object-fit: contain; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.55)); animation: chFloat 6s ease-in-out infinite; }
.char-hero .ch-right .ch-art img, .char-hero .ch-right img { animation-delay: -3s; }
@keyframes chFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.char-hero .ch-left { justify-content: flex-end; }
.char-hero .ch-left img, .char-hero .ch-left svg { transform: translateX(6%); }
.char-hero .ch-right { justify-content: flex-start; }
.char-hero .ch-right img, .char-hero .ch-right svg { transform: translateX(-6%); }
.char-hero .ch-mid {
  position: relative; z-index: 3; text-align: center;
  background: linear-gradient(160deg, rgba(30,26,56,.92), rgba(18,16,34,.92));
  border: 1px solid var(--glass-border); border-radius: 22px; padding: 1.6rem 1.4rem 1.5rem;
  backdrop-filter: blur(12px); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(124,58,237,.12);
}
.char-hero .ch-tag { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: #cbb6ff; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.3); padding: .35rem .8rem; border-radius: 999px; margin-bottom: .8rem; }
.char-hero .ch-title { font-size: 1.5rem; line-height: 1.35; margin: 0 0 1rem; font-weight: 800; }
.char-hero .ch-talk { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.2rem; text-align: left; }
.char-hero .ch-line { font-size: .92rem; line-height: 1.5; color: var(--text-main); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); border-radius: 14px; padding: .6rem .85rem; }
.char-hero .ch-line.mio { border-left: 3px solid #a78bfa; }
.char-hero .ch-line.hina { border-left: 3px solid #fb7185; }
.char-hero .ch-who { font-weight: 800; margin-right: .25rem; white-space: nowrap; flex-shrink: 0; }

/* HUDセクション仕切り（グローバル版・全ページ共通／home版は body.home 側に同内容） 2026-06-24 */
.hud-divider { position: relative; height: 26px; max-width: 1180px; margin: 2px auto 6px; }
.hud-divider::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.45) 22%, rgba(34,211,238,.5) 55%, rgba(168,85,247,.45) 78%, transparent);
}
.hud-divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%,-50%) rotate(45deg);
  background: linear-gradient(135deg,#a855f7,#22d3ee);
  box-shadow: 0 0 12px rgba(168,85,247,.6), 0 0 0 4px rgba(8,8,18,.9);
}
.char-hero .ch-cta {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; font-size: 1.02rem;
  color: #fff; background: linear-gradient(135deg, #7c3aed, #f43f5e); padding: .8rem 1.7rem; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(124,58,237,.4); transition: transform .2s ease, box-shadow .2s ease;
}
.char-hero .ch-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(244,63,94,.45); }
@media (max-width: 880px) {
  .char-hero {
    grid-template-columns: 1fr 1fr; grid-template-areas: "left right" "mid mid";
    min-height: 0; margin-top: .8rem; gap: 0 .5rem;
  }
  .char-hero .ch-left { grid-area: left; }
  .char-hero .ch-right { grid-area: right; }
  .char-hero .ch-mid { grid-area: mid; margin-top: -10px; }
  .char-hero .ch-art { height: 200px; }
  .char-hero .ch-art img, .char-hero .ch-art svg { height: 330px; }
  .char-hero .ch-left img, .char-hero .ch-left svg { transform: translateX(8%); }
  .char-hero .ch-right img, .char-hero .ch-right svg { transform: translateX(-8%); }
  .char-hero .ch-title { font-size: 1.2rem; }
  .char-hero .ch-line { font-size: .85rem; }
}

/* ===== 結果画面の大きめ立ち絵ステージ＋ヒナ成長Lv v9 ===== */
.gc-stage {
  display: flex; gap: 1rem; align-items: flex-end; margin-top: 1rem; padding: 0.9rem 1rem 0;
  border-radius: 16px; background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(0,0,0,.22));
  border: 1px solid var(--glass-border); border-left: 4px solid var(--gc-accent, #7c3aed); overflow: hidden;
}
.gc-stage-art { flex: 0 0 auto; width: 124px; height: 178px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; align-self: flex-end; }
.gc-stage-art img { width: auto; height: 310px; max-width: none; object-fit: contain; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.gc-stage-art svg { width: 110px; height: 110px; }
.gc-stage-body { flex: 1 1 auto; min-width: 0; padding-bottom: 0.9rem; }
.gc-stage-name { font-size: 1.02rem; margin-bottom: 0.35rem; }
.gc-stage-text { font-size: 0.95rem; line-height: 1.65; color: var(--text-main); }
.gc-lv { display: inline-block; font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #f43f5e); padding: 0.12rem 0.55rem; border-radius: 999px; margin-left: 0.45rem; vertical-align: middle; }
.gc-lvup { font-size: 0.72rem; font-weight: 800; color: #0a0a0f; background: #fde047; padding: 0.1rem 0.4rem; border-radius: 6px; margin-left: 0.25rem; }
.gc-lvup-note { margin-top: 0.55rem; font-size: 0.82rem; color: #fde047; background: rgba(253,224,71,.1); border: 1px dashed rgba(253,224,71,.5); border-radius: 10px; padding: 0.45rem 0.7rem; }
.gc-stage .gc-cta { display: inline-block; margin-top: 0.6rem; font-weight: 700; color: #c4b5fd; text-decoration: none; }
.gc-stage .gc-cta:hover { color: #ddd0ff; }
@media (max-width: 520px) {
  .gc-stage-art { width: 92px; height: 138px; }
  .gc-stage-art img { height: 240px; }
  .gc-stage-text { font-size: 0.88rem; }
}

/* ===== ミオ専門解説ステージ v10 ===== */
.gc-expert { margin-bottom: 1rem; }
.gc-expert .gc-stage-art { width: 150px; height: 212px; }
.gc-expert .gc-stage-art img { height: 372px; }
.gc-expert-tag { font-size: 0.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #3b82f6); padding: 0.12rem 0.55rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
.gc-expert-list { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: #cbd5e1; line-height: 1.65; }
.gc-expert-list li { margin-bottom: 0.25rem; }
.gc-expert-focus { margin-top: 0.55rem; font-size: 0.88rem; background: rgba(124,58,237,.14); border: 1px solid rgba(124,58,237,.28); border-radius: 10px; padding: 0.5rem 0.7rem; }
.gc-expert-focus b { color: #c4b5fd; }
@media (max-width: 520px) {
  .gc-expert .gc-stage-art { width: 104px; height: 150px; }
  .gc-expert .gc-stage-art img { height: 262px; }
}

/* ===== ミオ解説の締め＋サイト季節装飾 v11 ===== */
.gc-expert-close { margin-top: 0.5rem; font-size: 0.9rem; color: #cbd5e1; font-style: normal; opacity: 0.95; }
.gax-season-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.gax-flake { position: absolute; top: -6%; line-height: 1; will-change: transform; animation-name: gaxFall; animation-timing-function: linear; animation-iteration-count: infinite; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
@keyframes gaxFall { 0% { transform: translateY(-8vh) translateX(0) rotate(0deg); } 100% { transform: translateY(112vh) translateX(46px) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gax-season-layer { display: none; } }

/* ===== ミオ信頼度・深掘り／Lv4祝い演出／季節tint v12 ===== */
.gc-trust { font-size: 0.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); padding: 0.12rem 0.55rem; border-radius: 999px; margin-left: 0.35rem; vertical-align: middle; }
.gc-expert-depth { margin-top: 0.55rem; font-size: 0.86rem; line-height: 1.6; color: #ddd6fe; background: rgba(124,58,237,.10); border-left: 3px solid #a855f7; border-radius: 10px; padding: 0.5rem 0.7rem; }
.gc-depth-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #fff; background: #a855f7; border-radius: 6px; padding: 0.06rem 0.4rem; margin-right: 0.45rem; vertical-align: middle; }

.gax-season-tint { position: fixed; inset: 0; pointer-events: none; z-index: -1; }

.gax-celebrate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(5,5,12,.55); backdrop-filter: blur(2px); animation: gaxFadeIn .25s ease; }
.gax-conf-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gax-conf { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; opacity: .95; animation-name: gaxConfFall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes gaxConfFall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(110vh) rotate(540deg); } }
.gax-cele-card { position: relative; display: flex; gap: 1rem; align-items: center; max-width: 460px; width: 88%; background: linear-gradient(160deg, rgba(30,26,56,.97), rgba(18,16,34,.97)); border: 2px solid #fbbf24; border-radius: 20px; padding: 1.2rem 1.3rem; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(251,191,36,.25); animation: gaxPop .35s cubic-bezier(.2,1.3,.4,1); }
.gax-cele-art { width: 96px; height: 130px; overflow: hidden; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: center; background: linear-gradient(160deg, rgba(251,113,133,.16), rgba(0,0,0,.2)); }
.gax-cele-art img { width: auto; height: 240px; max-width: none; object-fit: contain; display: block; }
.gax-cele-art svg { width: 90px; height: 90px; }
.gax-cele-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.4rem; }
.gax-cele-title b { color: #fbbf24; }
.gax-cele-text { font-size: 0.88rem; color: #cbd5e1; line-height: 1.6; margin-bottom: 0.7rem; }
.gax-cele-close { padding: 0.5rem 1.1rem; border: none; border-radius: 999px; font-weight: 800; color: #0a0a0f; background: linear-gradient(135deg, #fbbf24, #f59e0b); cursor: pointer; }
@keyframes gaxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gaxPop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gax-conf { animation: none; display: none; } .gax-cele-card { animation: none; } }

/* ===== ミオの本音(Lv3)／二人との歩み v13 ===== */
.gc-expert-special { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.6; color: #fbcfe8; background: linear-gradient(135deg, rgba(244,63,94,.10), rgba(168,85,247,.10)); border: 1px solid rgba(244,114,182,.3); border-radius: 10px; padding: 0.55rem 0.75rem; }
.gc-special-tag { display: inline-block; font-size: 0.66rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f43f5e, #a855f7); border-radius: 6px; padding: 0.06rem 0.45rem; margin-right: 0.45rem; vertical-align: middle; }
.story-log { display: flex; flex-direction: column; gap: 0.5rem; }
.story-item { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.55rem 0.8rem; border-radius: 10px; background: rgba(255,255,255,.03); border-left: 3px solid var(--accent-primary); }
.story-item .st-date { flex: 0 0 auto; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.story-item .st-text { font-size: 0.9rem; color: var(--text-main); }

/* ===== ストーリーログのアイコン v14 ===== */
.story-item .st-icon { flex: 0 0 auto; font-size: 1rem; width: 1.4rem; text-align: center; }

/* ===== 称号バッジ・コレクション v15 ===== */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; }
.badge { text-align: center; padding: 1rem 0.7rem; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--bc, var(--glass-border)); box-shadow: inset 0 0 22px -16px var(--bc, transparent); }
.badge .b-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 0.45rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.badge .b-label { font-size: 0.86rem; font-weight: 800; color: var(--bc, var(--text-main)); }
.badge .b-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }
.badge.locked { opacity: 0.5; filter: grayscale(0.7); border-style: dashed; }
.badge.locked .b-label { color: var(--text-muted); }

/* ===== バッジ獲得トースト／レアバッジ v16 ===== */
#gax-toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; }
.gax-toast { background: linear-gradient(135deg, rgba(30,26,56,.98), rgba(18,16,34,.98)); border: 1px solid var(--glass-border); border-left: 4px solid #7c3aed; border-radius: 12px; padding: 0.7rem 1.1rem; color: #fff; font-size: 0.9rem; line-height: 1.45; box-shadow: 0 14px 34px rgba(0,0,0,.5); opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease; text-align: center; }
.gax-toast.show { opacity: 1; transform: translateY(0); }
.badge.rare { position: relative; }
.badge.rare::after { content: '✦ RARE'; position: absolute; top: 6px; right: 8px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em; color: #fbbf24; }
.badge.rare:not(.locked) { background: linear-gradient(160deg, rgba(251,191,36,.10), rgba(255,255,255,.02)); box-shadow: inset 0 0 26px -14px var(--bc, #fbbf24); }

/* ===== バッジ獲得の小紙吹雪／全制覇称号 v17 ===== */
.gax-mini-conf { position: fixed; left: 0; right: 0; bottom: 92px; height: 0; z-index: 10001; pointer-events: none; }
.gax-mini-conf i { position: absolute; bottom: 0; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: gaxMiniPop 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes gaxMiniPop { 0% { opacity: 0; transform: translate(0, 20px) rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -120px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .gax-mini-conf { display: none; } }
.badge.capstone:not(.locked) { background: linear-gradient(135deg, rgba(244,114,182,.16), rgba(167,139,250,.14), rgba(96,165,250,.12)); border-color: #f472b6; box-shadow: 0 0 24px -8px #f472b6; }
.badge.capstone::after { content: '♛ 最高位'; color: #f472b6; }

/* ===== チビ表情スタンプ v18 ===== */
.gc-chibi { display: block; width: 100%; height: 100%; object-fit: contain; }
/* マスコットのアバター枠をチビ用に */
#gc-mascot .gc-mascot-av { overflow: visible; background: transparent !important; }
#gc-mascot .gc-mascot-av .gc-chibi { width: 100%; height: 100%; }
/* トースト内のチビ */
.gax-toast { display: flex; align-items: center; gap: 0.6rem; }
.gc-toast-chibi { flex: 0 0 auto; width: 40px; height: 40px; display: inline-block; }
.gc-toast-chibi .gc-chibi { width: 40px; height: 40px; }
/* 結果ステージ右上のチビステッカー */
.gc-stage { position: relative; }
.gc-stage-chibi { position: absolute; top: -6px; right: 8px; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); animation: gcPop .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes gcPop { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (max-width: 520px) { .gc-stage-chibi { width: 48px; height: 48px; top: -4px; right: 4px; } }

/* ===== チビ：ホバーぴょこ／ローディング・空状態 v19 ===== */
.gc-chibi { transition: transform 0.2s ease; }
@keyframes gcBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-9px) scale(1.06); } 55% { transform: translateY(0) scale(.98); } 75% { transform: translateY(-3px); } }
#gc-mascot:hover .gc-chibi, .adv-msg .av-img:hover .gc-chibi, .gc-bounce:hover .gc-chibi { animation: gcBounce 0.55s ease; }
.adv-msg .av-img { cursor: pointer; }
.gc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.6rem 1rem; color: var(--text-muted); }
.gc-empty .gc-empty-art { width: 100px; height: 100px; }
.gc-empty .gc-empty-art .gc-chibi { width: 100px; height: 100px; }
.gc-empty .gc-empty-cta { margin-top: 0.3rem; }
.gc-loading { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.8rem; color: var(--text-muted); }
.gc-loading .gc-chibi { width: 88px; height: 88px; animation: gcFloatY 1.1s ease-in-out infinite; }
@keyframes gcFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.gc-dots::after { content: ''; animation: gcDots 1.2s steps(1,end) infinite; }
@keyframes gcDots { 0% { content: ''; } 25% { content: '・'; } 50% { content: '・・'; } 75% { content: '・・・'; } }
@media (prefers-reduced-motion: reduce) { #gc-mascot:hover .gc-chibi, .adv-msg .av-img:hover .gc-chibi, .gc-bounce:hover .gc-chibi { animation: none; } .gc-loading .gc-chibi { animation: none; } }

/* ===== 演出強化 v20: マスコット登場/揺れ・視差 ===== */
#gc-mascot { animation: gcMascotIn 0.5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes gcMascotIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
#gc-mascot.gc-wiggle .gc-chibi { animation: gcWiggle 0.6s ease; }
@keyframes gcWiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-3deg); } }
/* トップ・バナーの立ち絵：マウス視差（コンテナをやわらかく追従） */
.char-hero .ch-art { transition: transform 0.25s cubic-bezier(.2,.8,.3,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  #gc-mascot { animation: none; }
  #gc-mascot.gc-wiggle .gc-chibi { animation: none; }
  .char-hero .ch-art { transition: none; }
}

/* ===== 演出強化 v21: 立ち絵の呼吸/まばたき・走るチビ・ボタンのキラッ ===== */
@keyframes gaxBreathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
@keyframes gaxBlink { 0%,92%,100% { opacity: 1; } 94% { opacity: .86; } 96% { opacity: 1; } }
.gc-stage-art img, #vn-art-mio img, #vn-art-hina img, .gw-art img {
  animation: gaxBreathe 4.4s ease-in-out infinite, gaxBlink 6.5s ease-in-out infinite;
  transform-origin: bottom center; will-change: transform, opacity;
}
#vn-art-mio img { animation-delay: 0s, 1.1s; }
#vn-art-hina img { animation-delay: 0s, 3.4s; }
.gw-art img { animation-delay: 0s, 2.2s; }

/* ページ遷移で横切る走るチビ */
.gc-runner { position: fixed; bottom: 12px; left: -150px; width: 84px; height: 84px; z-index: 9000; pointer-events: none; animation: gcRun 1.05s linear forwards; }
.gc-runner .gc-chibi { width: 84px; height: 84px; animation: gcRunBob 0.24s ease-in-out infinite; }
@keyframes gcRun { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 180px)); } }
@keyframes gcRunBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }

/* ボタンのキラッ（hoverで光が流れる） */
.btn-primary, .ch-cta, .adv-start, .save-btn, .adv-btn { position: relative; overflow: hidden; }
.btn-primary::after, .ch-cta::after, .adv-start::after, .save-btn::after, .adv-btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none;
}
.btn-primary:hover::after, .ch-cta:hover::after, .adv-start:hover::after, .save-btn:hover::after, .adv-btn:hover::after { left: 135%; }

@media (prefers-reduced-motion: reduce) {
  .gc-stage-art img, #vn-art-mio img, #vn-art-hina img, .gw-art img { animation: none; }
  .gc-runner { display: none; }
  .btn-primary::after, .ch-cta::after, .adv-start::after, .save-btn::after, .adv-btn::after { display: none; }
}

/* ===== 振り向き見守りチビ v22 ===== */
.gax-buddy { position: fixed; z-index: 60; width: 132px; height: 132px; pointer-events: none; }
.gax-buddy.bl { left: 14px; bottom: 14px; }
.gax-buddy.br { right: 14px; bottom: 14px; }
.gax-buddy-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); transition: transform 0.12s ease; }
.gax-buddy-x { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(20,18,38,.9); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .2s; }
.gax-buddy:hover .gax-buddy-x { opacity: 1; }
.gax-buddy-tip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; color: #cbd5e1; background: rgba(20,18,38,.92); border: 1px solid var(--glass-border); border-radius: 8px; padding: .2rem .5rem; margin-bottom: 4px; }
@media (max-width: 640px) { .gax-buddy { display: none; } }

/* ===== v23: 立ち絵をサイトの世界観になじませる（下端フェード＋テーマ発光＋色なじみ） ===== */
/* .gc-photo = 全立ち絵共通クラス。矩形を被せず、画像の透過に追従するCSSのみで処理。 */
.char-hero .ch-art .gc-photo,
#vn-art-mio .gc-photo, #vn-art-hina .gc-photo,
.gc-stage-art .gc-photo, .gw-art .gc-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.4) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.4) 92%, transparent 100%);
  filter: saturate(1.05) drop-shadow(0 10px 22px rgba(124,58,237,.32));
}
/* バナー（トップ）の立ち絵は下のセクションへより深く溶け込ませる */
.char-hero .ch-art .gc-photo {
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,.35) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,.35) 90%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  /* 発光・色なじみは残し、アニメだけ止める（別ルールで対応済み） */
}

/* ===== v24: 動く立ち絵（黒背景webm/mp4）を縁ぼかし＋発光で暗背景になじませる ===== */
#vn-art-mio .gc-standee-vid, #vn-art-hina .gc-standee-vid {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, #000 68%, rgba(0,0,0,.35) 84%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 45%, #000 68%, rgba(0,0,0,.35) 84%, transparent 100%);
  filter: saturate(1.05) contrast(1.03) drop-shadow(0 0 28px rgba(124,58,237,.40));
}
/* (clean) */

/* トップ char-hero でも動く立ち絵(mp4)を使う：画像と同じ立ち絵サイズ＋暗背景ブレンド */
.char-hero .ch-art .gc-standee-vid {
  width: auto; height: 470px; max-width: none; object-fit: contain; display: block;
  animation: chFloat 6s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(closest-side at 50% 44%, #000 62%, rgba(0,0,0,.3) 82%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 44%, #000 62%, rgba(0,0,0,.3) 82%, transparent 100%);
  filter: saturate(1.05) contrast(1.03) drop-shadow(0 0 24px rgba(124,58,237,.4));
}
.char-hero .ch-right .gc-standee-vid { animation-delay: -3s; }
@media (max-width: 860px) {
  .char-hero .ch-art .gc-standee-vid { height: 330px; }
}

/* ===== マスコット土台の修正（コンパクト浮遊カード） v23 ===== */
#gc-mascot {
  position: fixed; left: 16px; bottom: 84px; z-index: 80;
  width: 230px; max-width: calc(100vw - 32px);
  background: linear-gradient(160deg, rgba(30,26,56,.96), rgba(18,16,34,.96));
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 0.6rem 0.7rem; box-shadow: 0 14px 34px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
}
#gc-mascot .gc-mascot-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-main); }
#gc-mascot .gc-mascot-av { width: 58px; height: 58px; flex: 0 0 auto; }
#gc-mascot .gc-mascot-av .gc-chibi { width: 58px; height: 58px; object-fit: contain; }
#gc-mascot .gc-mascot-txt { font-size: 0.78rem; line-height: 1.4; color: var(--text-main); }
#gc-mascot .gc-mascot-txt b { font-size: 0.82rem; }
#gc-mascot .gc-close { position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; }
#gc-mascot .gc-close:hover { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 640px) { #gc-mascot { width: 190px; bottom: 76px; } }

/* ===== AIM-FIT融合カードの適合表示 v24 ===== */
.adv-fit { display: flex; gap: 0.4rem; align-items: center; margin: 0.3rem 0 0.5rem; flex-wrap: wrap; }
.adv-fit-pct { font-size: 0.78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #7c3aed, #3b82f6); padding: 0.15rem 0.6rem; border-radius: 999px; }
.adv-fit-ok { font-size: 0.74rem; font-weight: 800; color: #34d399; border: 1px solid rgba(52,211,153,.5); border-radius: 999px; padding: 0.12rem 0.5rem; }
.adv-balance { font-size: 0.78rem; line-height: 1.5; color: #cbd5e1; background: rgba(124,58,237,.10); border-left: 3px solid #a855f7; border-radius: 8px; padding: 0.4rem 0.6rem; margin: 0.4rem 0; }

/* ===== AIM-FIT統合：精密入力フォーム＋結果ボタン v25 ===== */
.adv-form { max-width: 560px; margin: 0 auto; text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); border-radius: 14px; padding: 1.1rem 1.2rem; }
.adv-form h3 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.adv-form label { display: block; font-size: 0.78rem; color: var(--text-muted); margin: 0.6rem 0 0.25rem; }
.adv-form input, .adv-form select { width: 100%; padding: 0.55rem 0.7rem; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); color: var(--text-main); outline: none; }
.adv-form input:focus, .adv-form select:focus { border-color: var(--accent-primary); }
.adv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.adv-grow { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.adv-gchip { padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.04); color: var(--text-muted); font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.adv-gchip.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); }
.adv-calc { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.78rem; color: var(--text-muted); }
.adv-calc select, .adv-calc input { width: auto; flex: 1 1 70px; min-width: 60px; }
.adv-calc #pf-calc { flex: 0 0 auto; background: rgba(124,58,237,.3); border: 1px solid var(--glass-border); color: #fff; border-radius: 8px; padding: 0.35rem 0.6rem; cursor: pointer; }
.adv-precise, .adv-retry2 { background: rgba(255,255,255,.08); border: 1px solid var(--glass-border); color: var(--text-main); border-radius: 999px; padding: 0.5rem 1rem; font-weight: 700; cursor: pointer; }
.adv-save { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; border-radius: 999px; padding: 0.5rem 1.1rem; font-weight: 700; cursor: pointer; }
.adv-save:disabled { opacity: 0.7; }
#pf-go { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border: none; border-radius: 999px; padding: 0.55rem 1.2rem; font-weight: 800; cursor: pointer; margin-top: 0.8rem; }

/* ===== 上位ティア既定表示＋解放ボタン v26 ===== */
.load-more.reveal-lower { background: rgba(255,255,255,.05); border: 1px dashed var(--glass-border); color: var(--text-muted); }
.load-more.reveal-lower:hover { color: var(--text-main); border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.1); }

/* ================================================================
   THEME REFRESH v27 — 電撃ネオン×二色（紫×アンバー）/ 差別化＋可読性
   既存レイヤーを上書きする最終テーマ層（後勝ち）
   ================================================================ */
:root {
  --bg-dark: #0b0b13;
  --accent-primary: #a855f7;     /* electric purple (ミオ) */
  --accent-secondary: #fb923c;   /* amber (ヒナ) */
  --accent-glow: rgba(168,85,247,0.5);
  --text-main: #f6f4ff;
  --text-muted: #a8a6bd;
  --glass-border: rgba(255,255,255,0.10);
}
body {
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(42% 36% at 10% -2%, rgba(168,85,247,0.14), transparent 60%),
    radial-gradient(42% 36% at 90% 6%, rgba(251,146,60,0.10), transparent 60%),
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
  background-attachment: fixed;
}
/* 見出し：二色グラデのボルト下線 */
.section-title { letter-spacing: -0.01em; }
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: -10px; width: 56px; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 0 12px rgba(168,85,247,.5);
}
.text-accent { background: linear-gradient(120deg, #b478ff 0%, #fb923c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ロゴのアイコン＝ブランドエンブレム（全ページ統一・箱型枠/グローなし） */
.logo-icon { background: url("../assets/emblem.webp") center/contain no-repeat !important; box-shadow: none !important; border-radius: 0 !important; }

/* デバイスカード：上部に二色アクセントバー＋ティアの色味グロー */
.item-card { position: relative; border-radius: 16px; }
.item-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  opacity: 0.55; transition: opacity 0.3s ease; border-radius: 16px 16px 0 0; z-index: 7; pointer-events: none;
}
.item-card:hover::after { opacity: 1; }
.item-card:hover { box-shadow: 0 16px 38px rgba(0,0,0,0.55), 0 0 22px rgba(168,85,247,0.14); }

/* 主要ボタンを二色ネオンに統一 */
.btn-primary, .load-more:not(.reveal-lower), .daily-btn, .ch-cta, .adv-start, #pf-go {
  background: linear-gradient(135deg, #a855f7, #fb923c) !important;
  box-shadow: 0 10px 26px rgba(168,85,247,0.32);
}
.btn-primary:hover, .ch-cta:hover { box-shadow: 0 16px 34px rgba(251,146,60,0.40); }

/* セクション見出しアイコンも二色 */
.section-title i.text-accent, .section-title .text-accent { filter: drop-shadow(0 0 6px rgba(168,85,247,.4)); }

/* リンク色を温度のある紫へ（青リンクの汎用感を脱却） */
a.featured-cta, .news-item:hover h3 { color: #c4a3ff; }

/* スクロールバー（細部の作り込み） */
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,.5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a855f7, #fb923c); border-radius: 10px; border: 2px solid var(--bg-dark); }

/* ===== セレクトの白飛び修正（ドロップダウンを確実にダーク＆可読に） v28 ===== */
select, .fb-select, .adv-form select {
  background-color: #14141f !important;
  color: var(--text-main) !important;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a8a6bd' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2rem;
}
/* ネイティブの選択肢リスト本体（OS描画）— 背景と文字を明示 */
select option, select optgroup {
  background-color: #14141f;
  color: #f6f4ff;
}
select option:checked, select option:hover { background-color: #7c3aed; color: #fff; }
select:focus { border-color: var(--accent-primary); outline: none; }

/* ===== お気に入りを分かりやすく v29 ===== */
/* 角の星：未登録でも金色で「お気に入り」と分かるように */
.fav-btn:not(.fav-cta) { color: #fcd34d; border-color: rgba(252,211,77,.5); background: rgba(0,0,0,.55); }
.fav-btn:not(.fav-cta):hover { color: #fff; border-color: #fcd34d; }
.fav-btn:not(.fav-cta).is-fav { color: #1a1208; background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: transparent; box-shadow: 0 0 14px rgba(251,191,36,.55); }
/* 詳細ページのラベル付きトグル（角の丸ボタンではなくインラインのピル） */
.fav-cta { position: static !important; width: auto !important; height: auto !important; border-radius: 999px !important;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.95rem; font-weight: 800; font-size: 0.85rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(252,211,77,.55); color: #fcd34d; backdrop-filter: none; }
.fav-cta i { font-size: 0.95rem; }
.fav-cta .fav-cta-on { display: none; }
.fav-cta.is-fav { background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: transparent; color: #1a1208; box-shadow: 0 6px 16px rgba(251,191,36,.35); }
.fav-cta.is-fav .fav-cta-on { display: inline; }
.fav-cta.is-fav .fav-cta-off { display: none; }
/* ヘッダーの「お気に入り」リンクを金色で目立たせる */
nav a[href="wishlist.html"] { color: #fcd34d; }
nav a[href="wishlist.html"]:hover { color: #ffe49a; }

/* 未実装（封鎖中）ナビ：鍵マーク付き・淡色・準備中 */
nav a.nav-locked { color: var(--text-dim, #8b8ba7); cursor: not-allowed; opacity: .7; }
nav a.nav-locked:hover { color: var(--text-dim, #8b8ba7); text-shadow: none; }
nav a.nav-locked::after { display: none !important; } /* 下線アニメ無効 */
.nav-lock-ico { font-size: .72em; margin-left: .28em; opacity: .85; vertical-align: baseline; }

/* ================================================================
   DESIGN SYSTEM v30 — 有料級リファイン（トークン＋コア部品の統一）
   ================================================================ */
:root {
  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px;
  --surface-1: rgba(255,255,255,0.035);
  --hairline: rgba(255,255,255,0.10);
  --shadow-1: 0 6px 20px rgba(0,0,0,.35);
  --shadow-2: 0 18px 48px rgba(0,0,0,.5);
  --ring: 0 0 0 3px rgba(168,85,247,.45);
  --ease: cubic-bezier(.2,.7,.3,1);
}
body { line-height: 1.65; }
h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.02em; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; }
.hero p { font-size: clamp(1rem, 1.6vw, 1.2rem); }
.section-title { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* フォーカスリング（アクセシビリティ＆上質感） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .chip:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 10px;
}

/* カード統一：上質な面・影・ホバー */
.item-card, .glass-card, .category-card {
  background: linear-gradient(180deg, var(--surface-1), rgba(255,255,255,0.012));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.item-card:hover, .glass-card:hover, .category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2), 0 0 26px rgba(168,85,247,0.14);
  border-color: rgba(255,255,255,0.18);
}
.item-image { background: radial-gradient(120% 120% at 30% 0%, rgba(168,85,247,0.10), rgba(0,0,0,0.35) 65%); }

/* ボタン/チップの基準統一 */
.btn-primary, .buy-btn, .daily-btn, .adv-start, #pf-go, .save-btn { padding: 0.8rem 1.4rem; border-radius: 999px; font-weight: 800; }
.btn-primary:active, .buy-btn:active, .daily-btn:active, #pf-go:active { transform: translateY(1px) scale(.99); }

/* パネル/モーダルの格上げ */
.glass-panel, .panel, .modal-content {
  background: linear-gradient(180deg, rgba(20,18,34,0.88), rgba(13,11,22,0.92));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
}

/* ナビ：青いバーが左→右に「びゅん」と伸びる */
nav a { position: relative; }
nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #38bdf8, #2563eb); box-shadow: 0 0 10px rgba(56,189,248,.6); transform: scaleX(0); transform-origin: left; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
nav a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .item-card, .glass-card, .category-card { transition: none; }
  nav a::after { transition: none; }
}

/* ================================================================
   LP（トップ）再設計 v31
   ================================================================ */
.hero { padding-top: 4.5rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: #cbb6ff; background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.3); padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1.1rem; }
.hero-cta { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin: 0.4rem 0 1.4rem; }
.hero-cta .btn-primary { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-ghost-lp { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 800; color: var(--text-main); background: rgba(255,255,255,.06); border: 1px solid var(--hairline); padding: 0.8rem 1.4rem; border-radius: 999px; transition: all 0.2s var(--ease); }
.btn-ghost-lp:hover { border-color: rgba(168,85,247,.55); transform: translateY(-2px); }
.hero-trust { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; margin-top: 1.3rem; color: var(--text-muted); font-size: 0.85rem; }
.hero-trust b { color: var(--text-main); font-size: 1rem; }
.lp-features { padding-top: 1rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.feature-card { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: var(--text-main); background: linear-gradient(180deg, var(--surface-1), rgba(255,255,255,.012)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.4rem; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); position: relative; overflow: hidden; }
.feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); opacity: 0.5; transition: opacity 0.3s; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: rgba(255,255,255,.18); }
.feature-card:hover::after { opacity: 1; }
.fc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #a855f7, #fb923c); box-shadow: 0 6px 16px rgba(168,85,247,.3); }
.feature-card h3 { font-size: 1.12rem; margin: 0.2rem 0 0; }
.feature-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; flex-grow: 1; }
.fc-go { color: #c4a3ff; font-weight: 700; font-size: 0.86rem; }
@media (max-width: 600px) { .hero-cta { flex-direction: column; } .hero-trust { gap: 0.8rem; } }

/* ================================================================
   一覧＋フィルター再設計 v32
   ================================================================ */
.filter-bar2 {
  position: sticky;
  top: 0.6rem;
  z-index: 40;
  background: linear-gradient(180deg, rgba(20,20,31,.92), rgba(16,16,26,.88));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
.fb-top { align-items: center; }
.filter-bar2 .fb-search {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.filter-bar2 .fb-search:focus { border-color: rgba(168,85,247,.55); box-shadow: 0 0 0 3px rgba(168,85,247,.16); }
.chip { border-radius: 999px; padding: 0.42rem 0.95rem; font-weight: 600; font-size: 0.82rem; }
.chip.active {
  background: linear-gradient(135deg, rgba(168,85,247,.95), rgba(124,58,237,.95));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(168,85,247,.35);
}
.fb-toggle, .filter-bar2 .fb-sort { border-radius: 999px; }
.fb-count { font-weight: 600; }
.fb-count strong { color: #c4a3ff; font-size: 1.02rem; }
#item-grid { gap: 1.15rem; }
.item-card { border-radius: var(--radius-lg, 16px); }
.tier-badge { font-weight: 800; border-radius: 8px; padding: 0.28rem 0.6rem; }
.load-more {
  background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(251,146,60,.12));
  border: 1px solid rgba(168,85,247,.3);
  color: var(--text-main);
  font-weight: 700;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.load-more:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(168,85,247,.28); border-color: rgba(168,85,247,.6); }
.load-more.reveal-lower { background: rgba(255,255,255,.04); border-color: var(--hairline); color: var(--text-muted); }
.load-more.reveal-lower:hover { color: var(--text-main); border-color: rgba(255,255,255,.25); }
.load-more-wrap { text-align: center; margin: 1.6rem 0 0.5rem; }
.empty-state { padding: 2.5rem 1rem; }
@media (max-width: 700px) { .filter-bar2 { top: 0.3rem; } }

/* ================================================================
   診断/詳細/エイム体験 v33
   ================================================================ */
/* 詳細モーダルのプレミアム化 */
.detail-modal { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(168,85,247,.12); }
.detail-hero { height: 280px; }
.detail-hero::after { background: linear-gradient(to top, rgba(10,10,15,.97), rgba(10,10,15,.2) 55%, transparent 80%); }
.detail-close {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,15,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; cursor: pointer; z-index: 3;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.detail-close:hover { transform: rotate(90deg); background: rgba(168,85,247,.7); }
.detail-name { font-size: 1.7rem; line-height: 1.25; letter-spacing: -.01em; }
.detail-tier { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 4px 12px rgba(168,85,247,.3); }
.detail-price { font-weight: 800; color: #fdba74; }
/* セクション見出しにアクセントバー */
.detail-section-label { position: relative; padding-left: 0.7rem; }
.detail-section-label::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0.85em; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
}
.detail-specs .drow:hover { background: rgba(168,85,247,.05); }
.detail-specs .drow { padding: 0.55rem 0.4rem; border-radius: 6px; transition: background .15s; }
.detail-specs .dk { color: var(--text-muted); }
.detail-specs .dv { font-weight: 600; }
.sim-card img { transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.sim-card:hover img { border-color: rgba(168,85,247,.5); box-shadow: 0 6px 18px rgba(168,85,247,.25); }
.detail-modal .buy-btn { font-weight: 700; }

/* ================================================================
   診断結果の本命/コスパ演出 v34
   ================================================================ */
.adv-card { position: relative; }
.adv-rank-ribbon {
  position: absolute; top: -1px; left: -1px; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 800; color: #fff;
  padding: 0.4rem 0.9rem 0.4rem 0.8rem;
  border-radius: var(--radius-lg, 16px) 0 14px 0;
  letter-spacing: 0.02em;
}
.adv-rank-ribbon.main { background: linear-gradient(135deg, #a855f7, #7c3aed); box-shadow: 0 4px 14px rgba(168,85,247,.45); }
.adv-rank-ribbon.cospa { background: linear-gradient(135deg, #fb923c, #f97316); box-shadow: 0 4px 14px rgba(251,146,60,.4); }
.adv-card.is-main {
  border: 1.5px solid rgba(168,85,247,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 28px rgba(168,85,247,.22);
}
.adv-card.is-main .item-image { padding-top: 0.4rem; }
.adv-card.is-cospa { border: 1.5px solid rgba(251,146,60,.45); }
/* 適合スコアのリング（本命のみ） */
.adv-ring {
  position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 4;
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  background:
    radial-gradient(closest-side, rgba(16,16,26,.92) 78%, transparent 80% 100%),
    conic-gradient(#a855f7 calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.adv-ring span { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.adv-ring span small { font-size: 0.7rem; font-weight: 700; }
.adv-ring label { font-size: 0.6rem; color: #cbb6ff; margin-top: 2px; letter-spacing: 0.08em; }

/* ================================================================
   エイム計測ページの仕上げ v35
   ================================================================ */
.aim-measures {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin: 0.2rem 0 1.4rem;
}
.aim-measures span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  padding: 0.34rem 0.8rem; border-radius: 999px;
}
.aim-measures span i { color: #c4a3ff; }

/* ================================================================
   全ページ共通フッター v36（アフィリエイト開示・法令導線）
   ================================================================ */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.25));
}
.site-footer .sf-inner { max-width: 1080px; margin: 0 auto; padding: 2rem 1.3rem 2.6rem; }
.site-footer .sf-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.site-footer .sf-brand { font-weight: 800; font-size: 1.1rem; text-decoration: none; color: var(--text-main); display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer .sf-brand i { color: var(--accent-primary); }
.site-footer .sf-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.site-footer .sf-links a { color: var(--text-muted); text-decoration: none; font-size: 0.86rem; transition: color .2s var(--ease); }
.site-footer .sf-links a:hover { color: #c4a3ff; }
.site-footer .sf-disclosure {
  color: var(--text-muted); font-size: 0.78rem; line-height: 1.8;
  background: rgba(255,255,255,.03); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0 0 1rem;
}
.site-footer .sf-disclosure i { color: #c4a3ff; margin-right: 0.4rem; }
.site-footer .sf-copy { color: var(--text-faint, #6b7280); font-size: 0.76rem; margin: 0; }
/* 法令・ガイドページ本文（世界観統一：ガラスパネル＋背景グロー＋アクセント見出し） */
.legal-page {
  max-width: 860px; margin: 2.5rem auto; padding: 2rem 2.2rem 2.4rem; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(20,18,38,.5), rgba(12,10,26,.32));
  border: 1px solid rgba(168,85,247,.16); border-radius: 18px;
  box-shadow: 0 22px 54px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.legal-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(85% 45% at 50% 0%, rgba(124,58,237,.14), transparent 60%); }
.legal-page::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; pointer-events: none;
  border-right: 2px solid rgba(168,85,247,.5); border-bottom: 2px solid rgba(168,85,247,.5); border-bottom-right-radius: 18px; }
.legal-page h1 { font-size: 2rem; margin-bottom: 0.45rem; background: linear-gradient(90deg, #fff, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.legal-page .legal-lead { color: #cbd5e1; margin-bottom: 2rem; font-size: 1.02rem; line-height: 1.8; }
.legal-page h2 {
  font-size: 1.25rem; margin: 2rem 0 0.7rem; padding-left: 0.75rem; position: relative; color: #fff;
}
.legal-page h2::before {
  content: ''; position: absolute; left: 0; top: 0.15em; width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(180deg, #fbbf24, #a855f7);
}
.legal-page h3 { color: #c4b5fd; font-size: 1.08rem; margin: 1.5rem 0 0.5rem; }
.legal-page p, .legal-page li { color: var(--text-soft, #cbd5e1); line-height: 1.9; font-size: 0.95rem; }
.legal-page ul { margin: 0 0 1rem 1.2rem; }
.legal-page li::marker { color: #a78bfa; }
.legal-page a { color: #93c5fd; }
.legal-page .legal-callout {
  background: rgba(124,58,237,.1); border: 1px solid rgba(168,85,247,.3);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.2rem 0;
  box-shadow: 0 0 22px rgba(124,58,237,.12);
}
.legal-page .legal-meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 2.5rem; border-top: 1px solid var(--hairline); padding-top: 1rem; }
@media (max-width: 600px) { .legal-page { padding: 1.5rem 1.2rem 1.8rem; } }

/* ================================================================
   比較機能 v37（ボタン／トレイ／比較表）
   ================================================================ */
/* カードの比較ボタン（お気に入りの右隣） */
.item-image .cmp-btn {
  position: absolute; top: 3.4rem; left: 0.9rem; z-index: 12;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,15,.55); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.16); color: #cbd5e1; cursor: pointer;
  font-size: 0.85rem; transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.item-image .apex-badge ~ .cmp-btn { top: 5.6rem; }
.item-image .cmp-btn:hover { transform: translateY(-2px); color: #fff; border-color: rgba(168,85,247,.6); }
.item-image .cmp-btn.is-cmp { background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(168,85,247,.4); }
/* 比較トレイ（画面下中央） */
.compare-tray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 9990;
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; justify-content: center;
  max-width: 94vw; padding: 0.7rem 1rem;
  background: rgba(20,20,31,.92); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(168,85,247,.35); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.compare-tray .ct-label { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.compare-tray .ct-label b { color: #c4a3ff; }
.compare-tray .ct-items { display: flex; gap: 0.5rem; }
.compare-tray .ct-item { position: relative; width: 46px; height: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline); background: #0f0f19; }
.compare-tray .ct-item img { width: 100%; height: 100%; object-fit: cover; }
.compare-tray .ct-x { position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; border: none; border-radius: 0 0 0 8px; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: 0.62rem; line-height: 1; }
.compare-tray .ct-x:hover { background: #ef4444; }
.compare-tray .ct-actions { display: flex; align-items: center; gap: 0.5rem; }
.compare-tray .ct-go { text-decoration: none; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg,#a855f7,#fb923c); padding: 0.55rem 1.1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; }
.compare-tray .ct-clear { background: transparent; border: 1px solid var(--hairline); color: var(--text-muted); padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer; font-size: 0.8rem; }
.compare-tray .ct-clear:hover { color: #fca5a5; border-color: rgba(239,68,68,.5); }
@media (max-width: 560px) { .compare-tray .ct-label { width: 100%; text-align: center; } }
/* 比較表 */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg,16px); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 0.85rem 0.9rem; text-align: center; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.cmp-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
.cmp-rowlabel { text-align: left !important; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; white-space: nowrap; position: sticky; left: 0; background: var(--surface-1,#14141f); z-index: 1; }
.cmp-head { position: relative; min-width: 150px; background: linear-gradient(180deg, rgba(168,85,247,.08), transparent); }
.cmp-imgwrap { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; }
.cmp-imgwrap img { max-width: 130px; max-height: 90px; object-fit: contain; }
.cmp-brand { color: var(--accent-secondary); font-size: 0.7rem; font-weight: 700; margin-top: 0.3rem; }
.cmp-name { font-weight: 700; font-size: 0.9rem; line-height: 1.3; margin-top: 0.1rem; }
.cmp-detail { display: inline-block; margin-top: 0.4rem; font-size: 0.75rem; color: #c4a3ff; text-decoration: none; }
.cmp-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: 0.7rem; }
.cmp-remove:hover { background: #ef4444; }
.cmp-tier { padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 800; font-size: 0.78rem; color: #fff; }
.cmp-best { color: #34d399; font-weight: 800; }
.cmp-buy { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.15rem; padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.76rem; font-weight: 700; text-decoration: none; color: #fff; }
.cmp-buy.az { background: linear-gradient(135deg,#ff9900,#e88a00); color:#1a1a1a; }
.cmp-buy.rk { background: linear-gradient(135deg,#bf0000,#e60000); }
.cmp-foot { margin: 1.2rem 0 2rem; text-align: center; }
.cmp-empty { text-align: center; padding: 3rem 1rem; }
.cmp-empty-ic { font-size: 2.4rem; color: #6d5bb0; margin-bottom: 0.8rem; }
.cmp-empty h2 { margin: 0 0 0.5rem; }
.cmp-empty p { color: var(--text-muted); max-width: 460px; margin: 0 auto; line-height: 1.8; }

/* ================================================================
   ガイド記事の関連デバイス v38
   ================================================================ */
#guide-related { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--hairline); }
.gr-title { font-size: 1.15rem; margin: 0 0 1rem; }
.gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.gr-card { display: block; text-decoration: none; color: var(--text-main); background: linear-gradient(180deg, var(--surface-1), rgba(255,255,255,.012)); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.gr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(168,85,247,.35); }
.gr-img { position: relative; height: 110px; background: #0f0f19; display: flex; align-items: center; justify-content: center; }
.gr-img img { max-width: 88%; max-height: 96px; object-fit: contain; }
.gr-tier { position: absolute; top: 6px; right: 6px; padding: 0.12rem 0.5rem; border-radius: 7px; font-weight: 800; font-size: 0.7rem; color: #fff; }
.gr-brand { color: var(--accent-secondary); font-size: 0.68rem; font-weight: 700; padding: 0.5rem 0.7rem 0; }
.gr-name { font-weight: 700; font-size: 0.85rem; line-height: 1.35; padding: 0.1rem 0.7rem 0.7rem; }
.gr-more { margin-top: 1rem; }
.gr-more a { color: #c4a3ff; text-decoration: none; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 560px) {
  .gr-more {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
    line-height: 1.2;
  }
  .gr-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .55rem .7rem;
    border: 1px solid rgba(168,85,247,.28);
    border-radius: 10px;
    background: rgba(124,58,237,.08);
    text-align: center;
  }
  .legal-page p a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: .15rem .25rem .15rem 0;
    line-height: 1.25;
  }
}

/* ================================================================
   カテゴリ上部の選び方ガイド導線 v39
   ================================================================ */
.cat-guide-banner {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1rem; padding: 0.8rem 1.1rem;
  text-decoration: none; color: var(--text-main);
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(251,146,60,.1));
  border: 1px solid rgba(168,85,247,.3); border-radius: 14px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cat-guide-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(168,85,247,.22); border-color: rgba(168,85,247,.55); }
.cat-guide-banner > i:first-child { color: #c4a3ff; font-size: 1.1rem; }
.cat-guide-banner span:not(.cgb-go) { font-size: 0.9rem; color: var(--text-soft, #cbd5e1); }
.cat-guide-banner b { color: #fff; }
.cat-guide-banner .cgb-go { margin-left: auto; white-space: nowrap; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg,#a855f7,#fb923c); padding: 0.45rem 0.9rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 600px) { .cat-guide-banner { flex-wrap: wrap; } .cat-guide-banner .cgb-go { margin-left: 0; width: 100%; justify-content: center; } }
.cat-compare-hint {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: 0.6rem 1rem;
  font-size: 0.84rem; color: var(--text-muted);
  background: rgba(255,255,255,.03); border: 1px dashed var(--hairline); border-radius: 12px;
}
.cat-compare-hint > i { color: #c4a3ff; }
.cat-compare-hint b { color: var(--text-main); font-weight: 700; }
.cat-compare-hint .cch-go { margin-left: auto; color: #c4a3ff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.cat-compare-hint .cch-go:hover { text-decoration: underline; }
@media (max-width: 600px) { .cat-compare-hint .cch-go { margin-left: 0; } }

/* タッチ操作中のスクロール/ズーム抑止（エイム計測/練習のcanvas） */
body.aim-body canvas { touch-action: none; }
�レアリティで色分け・ガチャ/FPS風）
   app.js が .item-card に rarity-<tier> を付与。角丸維持・静止＝軽量。
   =========================================================================== */
.item-card.rarity-god      { --rar: 251,191,36; }   /* GOD = 金 */
.item-card.rarity-s-plus   { --rar: 244,114,182; }  /* S+  = ホロ(ピンク) */
.item-card.rarity-s        { --rar: 167,139,250; }  /* S   = 紫 */
.item-card.rarity-a-plus   { --rar: 96,165,250; }   /* A+  = 青 */
.item-card.rarity-a        { --rar: 56,189,248; }   /* A   = シアン青 */
.item-card.rarity-b-plus   { --rar: 52,211,153; }   /* B+  = 緑 */
.item-card.rarity-b        { --rar: 34,197,94; }
.item-card.rarity-c-plus,
.item-card.rarity-c        { --rar: 148,163,184; }  /* C   = グレー */
.item-card.rarity-d        { --rar: 100,116,139; }
.item-card.rarity-special  { --rar: 251,113,133; }  /* SPECIAL = 朱 */

.item-card[class*="rarity-"] { border-color: rgba(var(--rar,124,58,237), .32); }
.item-card[class*="rarity-"]:hover {
  border-color: rgba(var(--rar,124,58,237), .9) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 26px rgba(var(--rar,124,58,237), .5) !important;
}
/* 上位レア（GOD / S+ / S）は常時うっすら発光して“当たり”感を出す（静止） */
.item-card.rarity-god, .item-card.rarity-s-plus, .item-card.rarity-s {
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 15px rgba(var(--rar), .28);
}
/* GOD は金の二重リング＋ティアバッジを一段強く */
.item-card.rarity-god { border-color: rgba(251,191,36,.55); }
.item-card.rarity-god .tier-badge { box-shadow: 0 0 14px rgba(251,191,36,.65), inset 0 1px 0 rgba(255,255,255,.4); }
.item-card.rarity-s-plus .tier-badge { box-shadow: 0 0 12px rgba(244,114,182,.55), inset 0 1px 0 rgba(255,255,255,.35); }
@media (prefers-reduced-motion: reduce) { /* 静止のため対応不要・記載のみ */ }

/* ===========================================================================
   eスポーツ・ヘッダー（全ページ共通／静止＆hoverのみ＝軽量）＋ホロ ティアバッジ
   =========================================================================== */
header { position: relative; box-shadow: 0 1px 0 rgba(168,85,247,.16), 0 6px 22px rgba(0,0,0,.28); }
header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.6) 30%, rgba(34,211,238,.5) 70%, transparent);
}
.logo { filter: drop-shadow(0 0 10px rgba(168,85,247,.25)); }
nav a:hover { text-shadow: 0 0 10px rgba(56,189,248,.5); }
nav a::after { box-shadow: 0 0 10px rgba(56,189,248,.6); }
nav a.is-active::after { box-shadow: 0 0 10px rgba(56,189,248,.7); }

/* ホログラム調ティアバッジ（静止グラデ＝アニメなし。全ページのバッジに適用） */
.tier-badge.tier-god {
  background: linear-gradient(120deg, #fde68a, #fbbf24 38%, #fffbe6 52%, #fbbf24 66%, #f59e0b) !important;
  color: #5b3d00 !important; text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.tier-badge.tier-s-plus {
  background: linear-gradient(120deg, #f9a8d4, #f472b6 42%, #a5f3fc 58%, #f472b6 78%) !important;
  color: #5b1d3a !important;
}

/* ===========================================================================
   ① GOD限定“動く”虹ホログラム（GODバッジのみ＝個数が少なく軽量）
   =========================================================================== */
@keyframes gaxHolo { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.tier-badge.tier-god {
  background: linear-gradient(110deg, #fde68a, #fbbf24, #fffbe6, #a7f3d0, #a5b4fc, #fbbf24, #fde68a) !important;
  background-size: 300% 100% !important;
  animation: gaxHolo 4.5s linear infinite;
  color: #5b3d00 !important; text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
@media (prefers-reduced-motion: reduce) { .tier-badge.tier-god { animation: none; background-position: 0 50%; } }

/* ===========================================================================
   ② ナビをゲームのタブUIに（全ページ共通ヘッダー／hover・activeのみ＝軽量）
   =========================================================================== */
header nav ul { gap: 0.2rem; }
header nav a { padding: 0.38rem 0.62rem; border-radius: 7px; font-size: .83rem; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
header nav a:hover { background: rgba(168,85,247,.14); }
header nav a.is-active {
  background: linear-gradient(135deg, rgba(168,85,247,.30), rgba(34,211,238,.16));
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.45), 0 0 12px rgba(168,85,247,.22);
}
header nav a.is-active::after { bottom: 2px; }

/* ===========================================================================
   ③ 診断/結果ページを HUD 調に（advisor 固有クラスのみ＝他ページ非影響）
   =========================================================================== */
.vn-center { position: relative; }
.vn-center::before, .vn-center::after { content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 4; }
.vn-center::before { left: -4px; top: -4px; border-left: 2px solid rgba(34,211,238,.6); border-top: 2px solid rgba(34,211,238,.6); }
.vn-center::after { right: -4px; bottom: -4px; border-right: 2px solid rgba(168,85,247,.6); border-bottom: 2px solid rgba(168,85,247,.6); }
.adv-bubble { box-shadow: -2px 0 0 rgba(168,85,247,.55), 0 2px 14px rgba(0,0,0,.25); }
.adv-opt {
  border-radius: 7px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.adv-opt:hover { box-shadow: 0 0 14px rgba(168,85,247,.4); }
.adv-actions .adv-start, .adv-actions .adv-retry, .adv-card-img {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
/* 診断のヒーロー見出しを発光（advisorのみ：vn-stageを持つページ） */
.vn-stage ~ * h1, body:has(.vn-stage) .hero h1 { text-shadow: 0 0 16px rgba(124,58,237,.35); }

/* ══ キャラ固定 + 結果パネル全幅化 (v59) ══════════════════════════════════ */

/* ── キャラ：結果画面では常にビューポート縦中央に固定 ── */
.vn-char {
    text-align: center !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; height: 100vh !important;
    width: clamp(160px, 18vw, 340px) !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    pointer-events: none !important; z-index: 5 !important;
}
.vn-char > * { pointer-events: auto !important; }
.vn-char.vn-left  { left:  max(0px, calc(50vw - 900px)) !important; }
.vn-char.vn-right { right: max(0px, calc(50vw - 900px)) !important; }

/* ── イントロ・質問画面は元の grid 内 relative に戻す ── */
body.adv-mode-intro .vn-char {
    position: relative !important; height: auto !important; width: auto !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    margin-top: 5.5rem !important; pointer-events: auto !important;
}

/* ── 結果画面：container の横幅制限 & padding を解除してフル幅を確保 ── */
body:not(.adv-mode-intro) .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* vn-stage をブロック化（grid の ghost 列を消す） */
body:not(.adv-mode-intro) .vn-stage {
    display: block !important;
}
/* 結果パネル：固定キャラの幅分だけ左右にマージンを取り、残り全幅を使う */
body:not(.adv-mode-intro) .vn-center.adv-wrap {
    max-width: none !important;
    width: auto !important;
    margin-left:  clamp(160px, 22vw, 420px) !important;
    margin-right: clamp(160px, 22vw, 420px) !important;
    box-sizing: border-box !important;
}

/* ── 結果カード：2列ワイド表示 ── */
.adv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none !important; }

/* ── スマホ：すべてリセット ── */
@media (max-width: 920px) {
    .vn-char { position: relative !important; height: auto !important; width: auto !important;
        top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; }
    body:not(.adv-mode-intro) .container { max-width: 1400px !important; padding-left: 5% !important; padding-right: 5% !important; }
    body:not(.adv-mode-intro) .vn-stage { display: grid !important; }
    body:not(.adv-mode-intro) .vn-center.adv-wrap { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
}

/* ══ article.html #art-root：キャラと被らないよう左右マージンを強制 (v61) ══ */
/* 式: キャラ左端オフセット max(0px,50vw-900px) + キャラ幅 clamp(160px,18vw,340px) + 余白20px  */
/* → どのビューポートでもキャラ右端より必ず外側に来る                                         */
#art-root {
    margin-left:  calc(max(0px, 50vw - 900px) + clamp(160px, 18vw, 340px) + 20px) !important;
    margin-right: calc(max(0px, 50vw - 900px) + clamp(160px, 18vw, 340px) + 20px) !important;
    max-width:    none !important;
    padding:      3rem 2rem 5rem !important;
    box-sizing:   border-box !important;
}
@media (max-width: 920px) {
    #art-root { margin-left: 0 !important; margin-right: 0 !important; padding: 1.5rem 5% 4rem !important; }
}

/* ===========================================================================
   練習(train)/計測(aim・fit) ページの eスポーツHUDスキン  scope: body.gx-hud
   ※ゲーム描画 canvas には一切かけない（周辺UI＝パネル/ボタン/見出し/結果のみ）。
     疑似要素やアニメは増やさず static のみ＝軽量。
   =========================================================================== */
.gx-hud .section-title { position: relative; text-shadow: 0 0 16px rgba(124,58,237,.26); }
.gx-hud .section-title::before {
  content: ''; display: inline-block; width: 7px; height: 1.05em; margin-right: .25rem; vertical-align: -2px;
  background: linear-gradient(180deg, #fbbf24, #a855f7); border-radius: 2px; transform: skewX(-16deg);
  box-shadow: 0 0 10px rgba(168,85,247,.5);
}
/* パネル類：ネオン枠＋上アクセント＋発光（疑似要素不使用で安全） */
.gx-hud .glass-panel, .gx-hud .pos-card, .gx-hud .fit-block,
.gx-hud .setup-guide, .gx-hud .settings-bar, .gx-hud .warning-box, .gx-hud .hud-raw-warning {
  border: 1px solid rgba(168,85,247,.30);
  box-shadow: inset 0 2px 0 rgba(168,85,247,.42), 0 10px 28px rgba(0,0,0,.4);
}
/* 結果カードは“勝利演出”寄りに金アクセント＋発光 */
.gx-hud .result-card, .gx-hud .tr-card, .gx-hud .tr-modal .tr-card {
  border: 1px solid rgba(251,191,36,.4) !important;
  box-shadow: inset 0 2px 0 rgba(251,191,36,.55), 0 14px 34px rgba(0,0,0,.5), 0 0 24px rgba(168,85,247,.18) !important;
}
/* 角カット(FPS)ボタン */
.gx-hud .btn-primary, .gx-hud .btn-secondary, .gx-hud .btn-ghost, .gx-hud .sg-btn {
  border-radius: 7px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
/* スコア/グレード/見出しを発光 */
.gx-hud .score-value, .gx-hud .tr-grade-big { text-shadow: 0 0 18px rgba(168,85,247,.5); }
.gx-hud .consultant-title, .gx-hud .recommendation-header, .gx-hud .tr-scores { text-shadow: 0 0 14px rgba(124,58,237,.3); }

/* スマホ/タブレット向け「PC推奨」案内バナー（aim/train） */
.aim-mobile-note {
  margin: 0 auto 1rem; max-width: 880px; padding: 0 1rem;
}
.aim-mobile-note .amn-in {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(168,85,247,.12));
  border: 1px solid rgba(251,191,36,.5); border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: 0 0 22px rgba(251,191,36,.14);
}
.aim-mobile-note .amn-in > i { font-size: 1.6rem; color: #fbbf24; flex-shrink: 0; margin-top: 2px; }

/* ===== v26: ヘッダーナビを1行に収める（中折返し防止＋幅に応じて圧縮） ===== */
header nav ul { gap: 1.1rem; flex-wrap: nowrap; }
header nav a { white-space: nowrap; font-size: 0.9rem; }
@media (min-width: 1025px) and (max-width: 1340px) {
  header nav ul { gap: 0.6rem; }
  header nav a { font-size: 0.82rem; padding: 0.4rem 0.5rem; }
}
@media (min-width: 1025px) and (max-width: 1140px) {
  header { padding-left: 3%; padding-right: 3%; }
  header nav a { font-size: 0.78rem; padding: 0.35rem 0.4rem; }
}
/* まだ収まらない幅では横スクロールで全項目へ到達可（見切れ防止・スクロールバー非表示） */
@media (min-width: 1025px) {
  header { gap: 0.8rem; }
  .logo { flex-shrink: 0; }
  header nav { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  header nav::-webkit-scrollbar { height: 0; display: none; }
}
.aim-mobile-note .amn-body b { color: #fde68a; display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.aim-mobile-note .amn-body > span { color: var(--text-soft, #cbd5e1); font-size: 0.88rem; line-height: 1.6; display: block; }
.aim-mobile-note .amn-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.aim-mobile-note .amn-links a {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700;
  color: #fff; text-decoration: none; padding: 0.45rem 0.9rem; border-radius: 50px;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border, rgba(255,255,255,.12));
}
.aim-mobile-note .amn-links a:hover { border-color: rgba(168,85,247,.6); background: rgba(124,58,237,.16); }

/* ===========================================================================
   ④ ガチャ/HUD 強化 v56：既存のhover演出をレア度に同期＋上位レアを“当たり”寄りに
      方針＝新規の常時アニメは追加しない（hover時のみ／静止）＝軽量。
      既存: .item-card::before(枠グロー) / .item-image::before(シャイン掃引) を流用。
   =========================================================================== */
/* (a) hoverのグロー枠を、そのカードのレア度カラーに同期（全レア共通・色だけ差替え） */
.item-card[class*="rarity-"]::before {
  background: linear-gradient(135deg, rgba(var(--rar,124,58,237),0.95), rgba(var(--rar,124,58,237),0.32) 60%, rgba(255,255,255,0.16));
}
/* (b) 上位レア（GOD/S+/S）はhoverのシャインを“広く・明るく・色付き”に＝当たりの手応え */
.item-card.rarity-god .item-image::before {
  width: 72%;
  background: linear-gradient(100deg, transparent, rgba(255,236,170,0.22), rgba(255,255,255,0.52) 50%, rgba(255,236,170,0.22), transparent);
}
.item-card.rarity-s-plus .item-image::before {
  width: 66%;
  background: linear-gradient(100deg, transparent, rgba(244,114,182,0.20), rgba(255,255,255,0.44) 50%, rgba(165,243,252,0.20), transparent);
}
.item-card.rarity-s .item-image::before {
  width: 62%;
  background: linear-gradient(100deg, transparent, rgba(196,181,253,0.20), rgba(255,255,255,0.42) 50%, transparent);
}
/* (c) 上位レアはhoverの発光を一段強める（レア度色のオーラ） */
.item-card.rarity-god:hover    { box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 30px rgba(251,191,36,.45) !important; }
.item-card.rarity-s-plus:hover { box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 28px rgba(244,114,182,.42) !important; }
.item-card.rarity-s:hover      { box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 26px rgba(167,139,250,.40) !important; }
/* (d) S（紫）バッジもホロ調に（既存はGOD/S+のみ。色の階段を揃える） */
.tier-badge.tier-s {
  background: linear-gradient(120deg, #c4b5fd, #a78bfa 45%, #ede9fe 55%, #a78bfa 70%) !important;
  color: #2e1065 !important; text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
/* (e) APEX META バッジ＝激レア感（数が少なく軽量・静止グロー） */
.apex-badge { box-shadow: 0 0 14px rgba(251,191,36,.5), inset 0 1px 0 rgba(255,255,255,.4); }

/* ===========================================================================
   ⑤ ページ別マスコット立ち絵 #gax-buddy（pwa.jsが各ページに注入／ページごとに表情違い）
      HUD調の角ブラケット枠＋ふわっと上下（reduced-motionで停止）＝軽量。
      ※スタイルは pwa.js 側にも自己完結で同梱（style.css未読でも崩れない）。ここは見た目の正本。
   =========================================================================== */
#gax-buddy {
  position: fixed; left: 16px; bottom: 88px; z-index: 78;
  width: 230px; max-width: calc(100vw - 32px);
  background: linear-gradient(160deg, rgba(30,26,56,.96), rgba(18,16,34,.96));
  border: 1px solid rgba(168,85,247,.32); border-radius: 14px;
  padding: .55rem .65rem .6rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 18px rgba(168,85,247,.14);
  backdrop-filter: blur(10px);
  animation: gxbIn .5s cubic-bezier(.2,1.2,.4,1) both;
}
#gax-buddy::before, #gax-buddy::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; }
#gax-buddy::before { left: -1px; top: -1px; border-left: 2px solid rgba(34,211,238,.7); border-top: 2px solid rgba(34,211,238,.7); border-top-left-radius: 14px; }
#gax-buddy::after  { right: -1px; bottom: -1px; border-right: 2px solid rgba(168,85,247,.7); border-bottom: 2px solid rgba(168,85,247,.7); border-bottom-right-radius: 14px; }
#gax-buddy .gxb-link { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text-main,#e8e8f0); }
#gax-buddy .gxb-art { width: 62px; height: 62px; flex: 0 0 auto; }
#gax-buddy .gxb-art img { width: 62px; height: 62px; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); animation: gxbBob 3.4s ease-in-out infinite; }
#gax-buddy .gxb-txt { font-size: .78rem; line-height: 1.45; color: var(--text-main,#e8e8f0); }
#gax-buddy .gxb-txt b { font-size: .82rem; }
#gax-buddy .gxb-close { position: absolute; top: 3px; right: 5px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(255,255,255,.08); color: #cbd5e1; font-size: 13px; line-height: 1; cursor: pointer; z-index: 1; }
#gax-buddy .gxb-close:hover { background: rgba(255,255,255,.2); color: #fff; }
#gax-buddy:hover .gxb-art img { animation: gxbBounce .6s ease; }
@keyframes gxbIn { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes gxbBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gxbBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-8px) scale(1.06); } 60% { transform: translateY(0) scale(.98); } }
@media (max-width: 640px) {
  #gax-buddy { width: 184px; bottom: 80px; left: 12px; padding: .5rem; }
  #gax-buddy .gxb-art { width: 52px; height: 52px; }
  #gax-buddy .gxb-art img { width: 52px; height: 52px; }
}
@media (max-width: 920px) {
  #gax-buddy {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) { #gax-buddy, #gax-buddy .gxb-art img { animation: none !important; } }

/* Responsive QA guard: keep the shared desktop nav inside the header. */
@media (min-width: 1025px) {
  header {
    gap: 0.8rem;
    padding-left: clamp(16px, 3.2vw, 54px);
    padding-right: clamp(16px, 3.2vw, 54px);
  }
  .logo { flex-shrink: 0; }
  header nav {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  header nav ul {
    gap: clamp(.22rem, .45vw, .55rem) !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  header nav li:has(a.nav-locked) { display: none; }
  header nav a {
    white-space: nowrap;
    font-size: clamp(.72rem, .58rem + .22vw, .84rem) !important;
    padding: .34rem .46rem !important;
  }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  header nav a { font-size: .72rem !important; padding: .3rem .36rem !important; }
}

@media (max-width: 1024px) {
  header nav ul {
    gap: 0 !important;
    justify-content: flex-start !important;
  }
  header nav a { white-space: normal; }
}

/* Floating UI should never cover footer links or primary controls. */
#pwa-install-btn,
#sfx-toggle,
#gax-buddy {
  transition: opacity .18s ease, transform .18s ease, filter .18s ease !important;
}

body.gax-footer-visible #pwa-install-btn,
body.gax-footer-visible #sfx-toggle,
body.gax-footer-visible #gax-buddy {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(.94) !important;
  filter: blur(2px) !important;
}

@media (max-width: 1100px) {
  #sfx-toggle,
  #pwa-install-btn {
    display: none !important;
  }
  #pwa-install-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    right: 14px !important;
    bottom: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #pwa-install-btn i {
    font-size: 1rem !important;
    margin: 0 !important;
  }
}

#gax-buddy .gxb-link {
  width: calc(100% - 30px) !important;
  padding-right: 0 !important;
}
#gax-buddy .gxb-close {
  right: 6px !important;
}

@media (max-width: 1500px) {
  #sfx-toggle,
  #pwa-install-btn,
  #gax-buddy {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .legal-page p a {
    display: inline-block;
    margin: .08rem .12rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

/* Advisor intro cards: prevent long Japanese labels from widening buttons. */
.adv-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.adv-menu .adv-menu-card {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.adv-menu .adv-menu-card > * {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .adv-menu { grid-template-columns: 1fr !important; }
}

/* ===========================================================================
   ⑥ 修正: 選択中ナビ(is-active)の文字が消える問題
      原因＝.text-accent の -webkit-text-fill-color:transparent（グラデ文字）が残り、
      is-active が背景を通常塗りに上書き→文字が透明のまま不可視に。文字色を復活させる。
   =========================================================================== */
header nav a.is-active, nav a.is-active {
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  -webkit-background-clip: border-box; background-clip: border-box;
}

/* ===========================================================================
   ⑦ 修正: 相談チャットの小アバターは“丸抜き”をやめ、元のスタンプ全体をそのまま表示。
      角丸の枠に object-fit:contain で丸ごと収める＝顔の見切れ・髪型崩れ・隣への被りなし。
   =========================================================================== */
/* 元画像の下部にあった“別スタンプのアホ毛の切れ端”は画像側で除去済み。
   アイコンは元どおりスタンプ全体を表示（丸抜きしない・角丸タイル）。 */
.adv-msg .av-img {
  width: 58px; height: 58px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  box-shadow: none;
  padding: 3px;
  box-sizing: border-box;
}
.adv-msg .av-img .gc-chibi {
  position: static;
  width: 100%; height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: none; max-width: none;
}