/* SnapX.one — メインスタイル
 * twixive風クリーン + twiigle masonry + xroll reel
 */
:root {
  --bg: #f7f7fa;
  --card-bg: #ffffff;
  --border: #e5e7ec;
  --header-bg: #1a1a2e;
  --header-fg: #ffffff;
  --accent: #5eb0ff;
  --primary: #2d6cdf;
  --primary-hover: #1f5ac4;
  --warn-bg: #ffe7e7;
  --warn-fg: #d94848;
  --ok-bg: #e7f5e8;
  --ok-fg: #2e7d32;
  --muted: #6b7280;
  --text: #14171a;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.6; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
body.age-gate-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === Age Gate === */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.age-gate-inner {
  background: #fff; border-radius: 12px; padding: 28px 24px;
  max-width: 460px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.age-gate h2 { margin: 0 0 12px; font-size: 22px; }
.age-gate p { margin: 8px 0; }
.age-gate-buttons { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 12px; }
.age-gate-buttons button { padding: 12px 16px; font-size: 15px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600; }
.age-gate-buttons .btn-yes { background: var(--primary); color: #fff; }
.age-gate-buttons .btn-yes:hover { background: var(--primary-hover); }
.age-gate-buttons .btn-no { background: #f3f4f6; color: #333; }
.age-gate-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* === Header === */
.site-header {
  background: var(--header-bg); color: var(--header-fg);
  position: sticky; top: 0; z-index: 100;
}
.header-wrap {
  max-width: 1280px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 6px; color: var(--header-fg); font-weight: 700; font-size: 18px; }
.brand:hover { text-decoration: none; opacity: 0.9; }
.brand-icon { color: var(--accent); }
.accent { color: var(--accent); }
.primary-nav { display: flex; gap: 18px; flex: 1; justify-content: center; font-size: 13px; }
.primary-nav a { color: rgba(255,255,255,0.85); padding: 8px 6px; border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav a.active { color: #fff; border-bottom-color: var(--accent); text-decoration: none; }
.menu-btn {
  background: transparent; color: var(--header-fg); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 18px; display: none;
}
@media (max-width: 720px) {
  .primary-nav { display: none; }
  .menu-btn { display: inline-block; }
}

/* === Nav Modal === */
.nav-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200;
  display: none; align-items: flex-start; justify-content: center; padding: 60px 16px 16px;
  overflow-y: auto;
}
.nav-modal.open { display: flex; }
.nav-inner {
  background: #fff; border-radius: 10px; padding: 16px; max-width: 360px; width: 100%;
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.nav-title { font-weight: 700; padding: 6px 4px 12px; border-bottom: 1px solid var(--border); }
.nav-modal ul { list-style: none; margin: 0; padding: 0; }
.nav-modal li a { display: block; padding: 10px 8px; border-radius: 6px; color: var(--text); }
.nav-modal li a:hover { background: var(--bg); text-decoration: none; }
.nav-divider { border-top: 1px solid var(--border); margin: 8px 0; height: 0; }

/* === Container === */
.container { max-width: 1280px; margin: 0 auto; padding: 16px; }

/* === Hero (HOME) === */
.hero { background: var(--card-bg); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 16px; }
.hero-title { margin: 0 0 4px; font-size: 22px; }
.hero-sub { margin: 0 0 14px; color: var(--accent); font-weight: 600; font-size: 12px; letter-spacing: 0.05em; }
.url-form { display: flex; gap: 8px; align-items: stretch; }
.url-form input[type="text"] {
  flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  font-family: inherit; outline: none;
}
.url-form input[type="text"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,108,223,0.1); }
.btn-primary, .btn-direct, .btn-open {
  background: var(--primary); color: #fff; border: 0; padding: 12px 20px; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center;
}
.btn-primary:hover, .btn-direct:hover, .btn-open:hover { background: var(--primary-hover); text-decoration: none; }
.hero-warn { color: var(--warn-fg); font-size: 12px; margin: 10px 0 0; }
.msg.error { background: var(--warn-bg); color: var(--warn-fg); padding: 8px 12px; border-radius: 6px; margin-top: 12px; font-size: 13px; }
.msg.ok { background: var(--ok-bg); color: var(--ok-fg); padding: 8px 12px; border-radius: 6px; margin-top: 12px; font-size: 13px; }
.result-box {
  margin-top: 12px; padding: 12px; background: var(--bg); border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.result-box .label { font-weight: 600; font-size: 12px; color: var(--muted); }
.result-box input[type="text"] { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }

/* === Layout: Main + Sidebar === */
.layout-with-sidebar {
  display: grid; grid-template-columns: 1fr 320px; gap: 16px;
}
@media (max-width: 960px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
}
.main-col { min-width: 0; }

/* === Info Cards === */
.info-card {
  background: var(--card-bg); border-radius: 12px; padding: 16px 20px; box-shadow: var(--shadow); margin-bottom: 12px;
}
.info-card h2 { margin: 0 0 12px; font-size: 14px; color: var(--muted); letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
.info-icon { background: var(--accent); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.info-list li:last-child { border-bottom: 0; }
.info-list time { color: var(--muted); font-size: 12px; margin-right: 8px; }
.info-card.compliance .compliance-note { color: var(--warn-fg); font-size: 12px; margin-top: 12px; padding: 8px; background: var(--warn-bg); border-radius: 6px; }

/* === Sidebar === */
.site-sidebar { display: flex; flex-direction: column; gap: 12px; }
.sb-section { background: var(--card-bg); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.sb-header { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.sb-icon { font-size: 14px; }
.sb-more { margin-left: auto; font-size: 11px; }
.trending-users { list-style: none; padding: 0; margin: 0; }
.trend-user { padding: 0; border-bottom: 1px dashed var(--border); }
.trend-user:last-child { border-bottom: 0; }
.trend-user.empty { padding: 12px 8px; color: var(--muted); font-size: 12px; text-align: center; }
.tu-link { display: flex; align-items: center; gap: 10px; padding: 8px 4px; color: inherit; text-decoration: none; transition: background 0.15s; border-radius: 6px; }
.tu-link:hover { background: rgba(94,176,255,0.05); text-decoration: none; }
.trend-user img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: 0 0 44px; background: #1a1a2e; }
.tu-info { flex: 1; min-width: 0; }
.tu-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu-screen { color: var(--muted); font-size: 11px; }
.tu-badge { background: linear-gradient(135deg, #ffd54f, #ff9100); color: #000; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.trend-user:nth-child(1) .tu-badge { background: linear-gradient(135deg, #ffd700, #ff8c00); }
.trend-user:nth-child(2) .tu-badge { background: linear-gradient(135deg, #c0c0c0, #909090); color: #fff; }
.trend-user:nth-child(3) .tu-badge { background: linear-gradient(135deg, #cd7f32, #8b4513); color: #fff; }
.sb-text { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.sb-cta {
  display: inline-block; background: var(--primary); color: #fff !important; padding: 8px 14px; border-radius: 6px;
  text-align: center; font-size: 13px; font-weight: 600; width: 100%; box-sizing: border-box;
}
.sb-cta:hover { text-decoration: none; }

/* === xroll式 top bar === */
.xtop-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; background: var(--card-bg);
  border-radius: 0; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  position: sticky; top: 50px; z-index: 30;
}
body.reel-landing .xtop-bar {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(10,10,20,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 60;
  height: var(--xtop-h);
}
body.reel-landing .site-header { display: none; }

.xtop-menu {
  background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 8px;
  font-size: 22px; color: var(--text);
}
body.reel-landing .xtop-menu { color: #fff; }
.xtop-menu:hover { background: rgba(0,0,0,0.06); }
body.reel-landing .xtop-menu:hover { background: rgba(255,255,255,0.1); }
.xtop-menu-icon { line-height: 1; }

.xtop-tab-container { flex: 1; display: flex; justify-content: center; }
.xtop-tab-current {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 700; color: var(--text);
  padding: 8px 14px; border-radius: 999px;
}
body.reel-landing .xtop-tab-current { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.xtop-tab-current:hover { background: rgba(0,0,0,0.05); }
body.reel-landing .xtop-tab-current:hover { background: rgba(255,255,255,0.1); }
.xtop-tab-arrow { font-size: 12px; opacity: 0.7; }

.xtop-display-toggle { flex: 0 0 auto; }
.xdt-btn {
  display: inline-block;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  text-decoration: none;
  transition: all 0.15s;
}
.xdt-btn:hover { color: var(--text); text-decoration: none; }
.xdt-btn.active { background: var(--card-bg); color: var(--text); }
body.reel-landing .xdt-btn { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); }
body.reel-landing .xdt-btn:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* === Category popover (xtop-tab-current click で開く) === */
.cat-popover {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 80px 16px 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cat-popover.open { display: flex; }
.cat-popover-inner {
  background: var(--card-bg); border-radius: 16px;
  padding: 20px 18px; max-width: 480px; width: 100%;
  max-height: calc(100vh - 100px); overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
body.reel-landing .cat-popover-inner {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #fff;
}
.cat-popover-title {
  font-size: 13px; color: var(--muted); font-weight: 700;
  letter-spacing: 0.06em; margin-bottom: 12px; text-transform: uppercase;
}
body.reel-landing .cat-popover-title { color: rgba(255,255,255,0.5); }
.cat-popover-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (min-width: 480px) {
  .cat-popover-grid { grid-template-columns: repeat(3, 1fr); }
}
.cat-popover-item {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-size: 14px; font-weight: 600;
  text-decoration: none; text-align: center;
  border: 1px solid transparent;
  transition: all 0.15s;
}
body.reel-landing .cat-popover-item { background: rgba(255,255,255,0.08); color: #fff; }
.cat-popover-item:hover {
  background: var(--card-bg); border-color: var(--accent);
  text-decoration: none; transform: translateY(-1px);
}
.cat-popover-item.active {
  background: linear-gradient(135deg, #2d6cdf, #5eb0ff); color: #fff; border-color: transparent;
}
body.reel-landing .cat-popover-item.active {
  background: linear-gradient(135deg, #ff3366, #d94848);
}
/* 期間 grid (twivideo型 1h/24h/3d/1w/1m/6m/1y/all) */
.cat-popover-section-title {
  margin: 14px 0 8px; font-size: 12px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.06em;
}
body.reel-landing .cat-popover-section-title { color: rgba(255,255,255,0.55); }
.period-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.period-item {
  display: block; padding: 8px 4px; text-align: center;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--card); color: var(--text); text-decoration: none;
  border: 1px solid var(--border);
}
body.reel-landing .period-item {
  background: rgba(255,255,255,0.08); color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.period-item:hover { background: var(--card-hover); text-decoration: none; }
.period-item.active {
  background: linear-gradient(135deg, #2d6cdf, #5eb0ff); color: #fff; border-color: transparent;
}
body.reel-landing .period-item.active {
  background: linear-gradient(135deg, #ff3366, #d94848);
}

/* xtop-bar に期間 label 追加 */
.xtop-tab-period { font-size: 11px; opacity: 0.7; margin-left: 4px; }

.cat-popover-foot { margin-top: 14px; text-align: center; padding-top: 10px; border-top: 1px solid var(--border); }
body.reel-landing .cat-popover-foot { border-top-color: rgba(255,255,255,0.1); }
.cat-popover-more { color: var(--accent); font-size: 13px; text-decoration: none; }
.cat-popover-more:hover { text-decoration: underline; }

/* === Beta popup (xroll v2 ベータ版風) === */
.beta-popup {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: promo-fadein 0.3s ease-out;
}
.beta-popup-inner {
  background: var(--card-bg); border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: 460px; width: 100%; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  animation: promo-slidein 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.beta-close {
  position: absolute; top: 8px; right: 12px;
  background: var(--bg); color: var(--muted); border: 0;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.beta-close:hover { background: var(--border); color: var(--text); }
.beta-tag {
  display: inline-block;
  background: linear-gradient(135deg, #5eb0ff, #2d6cdf);
  color: #fff; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.beta-title { margin: 6px 0 8px; font-size: 22px; font-weight: 800; }
.beta-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.beta-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  background: var(--bg); border-radius: 10px; padding: 14px 16px;
}
.beta-features li {
  font-size: 13px; padding: 4px 0;
  color: var(--text);
}
.beta-features li strong { color: var(--primary); }
.beta-cta {
  display: block; width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #2d6cdf, #5eb0ff);
  color: #fff; border: 0; border-radius: 10px;
  font-weight: 800; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(45,108,223,0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}
.beta-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(45,108,223,0.6);
}
.beta-note { color: var(--muted); font-size: 11px; text-align: center; margin: 10px 0 0; }

/* === Genre Header === */
.genre-header { background: var(--card-bg); border-radius: 12px; padding: 14px 20px; margin-bottom: 12px; box-shadow: var(--shadow); }
.genre-header h1 { margin: 0; font-size: 18px; }
.genre-meta { color: var(--muted); font-size: 12px; margin: 4px 0 0; }

/* === Grid (twiigle masonry: CSS column 方式 で詰まり感を出す) === */
.grid.grids {
  column-count: 2;
  column-gap: 6px;
  display: block;
}
@media (min-width: 480px) { .grid.grids { column-count: 3; } }
@media (min-width: 720px) { .grid.grids { column-count: 4; } }
@media (min-width: 1024px) { .grid.grids { column-count: 5; } }
@media (min-width: 1280px) { .grid.grids { column-count: 6; } }
.grid.grids > .art_li { display: inline-block; width: 100%; margin: 0 0 6px; break-inside: avoid; }
.art_li { background: var(--card-bg); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); position: relative; }
.art_li.ad-art { border: 1px dashed var(--border); }
.item_inner { position: relative; }
/* CLS 抑制: aspect-ratio 3/4 デフォ + 実画像比率は min/max で許容 (Codex 副作用E 対応) */
.item_image img {
  width: 100%; display: block;
  aspect-ratio: 3/4;
  min-height: 160px;
  max-height: 360px;
  object-fit: cover;
}
.item_ranking { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.7); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tw_icon { position: absolute; top: 6px; right: 6px; }
.tw_icon a { background: rgba(0,0,0,0.6); color: #fff; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.x-icon { font-size: 14px; }

/* === card 下段 stats / 登録 ボタン (twivideo art_li 互換) === */
.item_stats {
  position: absolute; left: 6px; bottom: 36px;
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 10px; line-height: 1; color: #fff;
}
.item_stats span {
  background: rgba(0,0,0,0.6); padding: 3px 6px; border-radius: 3px;
}
.item_stats .stat_like { color: #ff6b9a; }
.dist {
  position: absolute; right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(90deg,#ec4899,#f472b6);
  color: #fff; border: 0; cursor: pointer;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(236,72,153,0.4);
}
.dist[data-active="1"] { background: linear-gradient(90deg,#f59e0b,#facc15); color: #1f2937; }
.dist .star_icon { font-size: 12px; }
.dist:hover { transform: translateY(-1px); }
.dist:active { transform: translateY(0); }

/* === Rank tier (Layer1 HOOK ゴールド/シルバー/ブロンズ縁取り) === */
.art_li.rank-gold {
  box-shadow: 0 0 0 2px #f59e0b, 0 4px 14px rgba(245,158,11,0.4);
}
.art_li.rank-gold .item_ranking {
  background: linear-gradient(135deg,#fbbf24,#f59e0b);
  color: #1f2937; font-weight: 900;
  box-shadow: 0 2px 6px rgba(245,158,11,0.5);
}
.art_li.rank-silver { box-shadow: 0 0 0 2px #9ca3af, 0 3px 10px rgba(156,163,175,0.4); }
.art_li.rank-silver .item_ranking { background: linear-gradient(135deg,#e5e7eb,#9ca3af); color: #1f2937; font-weight: 900; }
.art_li.rank-bronze { box-shadow: 0 0 0 2px #b45309, 0 3px 10px rgba(180,83,9,0.4); }
.art_li.rank-bronze .item_ranking { background: linear-gradient(135deg,#d97706,#92400e); color: #fff; font-weight: 900; }

/* === スカーシティ badge (Layer4 MONETIZE) === */
.item_scarcity {
  position: absolute; top: 30px; left: 6px;
  background: linear-gradient(90deg,#dc2626,#f97316);
  color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 3px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(220,38,38,0.4);
  animation: scarcity-pulse 2.5s ease-in-out infinite;
}
@keyframes scarcity-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* === 「○○人が視聴中」 social proof (Layer4 MONETIZE) === */
.item_viewing {
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.78);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 9999px;
  white-space: nowrap;
}
.item_viewing .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
  animation: viewing-blink 1.4s ease-in-out infinite;
}
@keyframes viewing-blink {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* === Activity toast (右下に @user が登録しました 風) === */
.snapx-activity-toast {
  position: fixed; bottom: 18px; right: 14px;
  background: rgba(17,17,19,0.92);
  color: #fff;
  border: 1px solid rgba(236,72,153,0.35);
  border-radius: 12px;
  padding: 10px 14px 10px 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  max-width: 320px;
  z-index: 9998;
  opacity: 0; transform: translateY(20px) scale(0.95);
  transition: opacity 0.32s, transform 0.32s;
  pointer-events: none;
}
.snapx-activity-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.snapx-toast-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg,#ec4899,#f472b6);
  color: #fff; font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}
.snapx-toast-body { flex: 1; line-height: 1.3; }
.snapx-toast-body b { color: #ec4899; }
.snapx-toast-time { color: #9ca3af; font-size: 10px; flex-shrink: 0; }

/* === Scroll progress pill (左下) === */
.snapx-scroll-progress {
  position: fixed; bottom: 14px; left: 14px;
  background: rgba(17,17,19,0.88);
  color: #fff;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  z-index: 9997;
  display: flex; align-items: baseline; gap: 2px;
}
.snapx-scroll-current { color: #f472b6; font-size: 14px; font-weight: 900; }
.snapx-scroll-sep { color: #6b7280; }
.snapx-scroll-total { color: #d1d5db; }
.snapx-scroll-label { color: #9ca3af; margin-left: 4px; font-size: 10px; }

/* === Notification dot (header メニューの右上) === */
.snapx-notify-dot {
  position: absolute; top: -2px; right: -2px;
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color: #fff;
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px rgba(11,11,12,0.95);
  animation: notify-pulse 2.4s ease-in-out infinite;
}
@keyframes notify-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* === Ad Slots === */
.snapx-ad { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 4px; }
.snapx-ad-placeholder {
  background: linear-gradient(135deg, #fff8dc, #ffe6e6);
  border: 1px dashed #e0a8a8; border-radius: 6px;
  min-height: 100px; padding: 12px;
}
.placeholder-label { color: #c0392b; font-size: 12px; font-weight: 600; }
.ad-row { margin: 12px 0; min-height: 100px; display: flex; justify-content: center; }
.ad-tail-cluster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; margin: 18px 0;
}
.ad-tail-item { min-height: 100px; }

/* === Legal Docs === */
.legal-doc { padding: 24px 16px; max-width: 920px; }
.legal-doc h1 { margin: 0 0 6px; }
.legal-doc h2 { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 16px; }
.legal-doc h3 { margin-top: 16px; font-size: 14px; }
.legal-doc .muted { color: var(--muted); font-size: 12px; }
.legal-doc .card { background: var(--card-bg); border-radius: 12px; padding: 24px 28px; box-shadow: var(--shadow); }
.legal-doc .back { margin-top: 24px; }
.contact-email { background: var(--bg); padding: 8px 12px; border-radius: 6px; font-family: monospace; }
.transparency-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.transparency-table th, .transparency-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; font-size: 13px; }
.transparency-table th { background: var(--bg); }

/* === Watch === */
.watch-container { padding: 18px 16px; }
.watch-card .card { background: var(--card-bg); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); }
.player-wrap { background: #000; border-radius: 8px; min-height: 280px; display: flex; align-items: center; justify-content: center; color: #fff; }
.player-loading, .player-error { font-size: 14px; }
.watch-actions { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.btn-back { background: #f3f4f6; color: var(--text); padding: 10px 16px; border-radius: 8px; }
.btn-like {
  background: #fff; border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.btn-like.liked { background: #ffe6e6; color: #d94848; border-color: #d94848; }
.watch-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

/* === Reel (xroll式 full screen takeover) === */

/* reel-landing body: top barぶん breathing room確保、footerは非表示 */
body.reel-landing {
  background: #0a0a14; min-height: 100vh; overflow: hidden;
}
body.reel-landing .site-header { display: none; }  /* xtop-bar に集約 */
body.reel-landing .site-footer { display: none; }
body.reel-landing .nav-modal { padding-top: 70px; }

/* xtop-bar の高さ。card は top bar下から残り全部使う(XROLL同型) */
:root {
  --xtop-h: 56px;
}

.reel-main {
  max-width: 100%; margin: 0; padding: 0;
  height: 100vh; position: relative; overflow: hidden;
  background: #000;
}
.reel-main.reel-fullscreen {
  width: 100vw; height: 100vh;
}

/* Desktop: 中央 portrait の縦長(XROLL desktop風) */
@media (min-width: 720px) {
  .reel-main.reel-fullscreen .reel-stage {
    max-width: 420px; margin: 0 auto;
    padding-top: var(--xtop-h);
    height: 100vh;
    overflow-y: scroll;
  }
}

.reel-stage {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;       /* Android: stage 端でwindow bounceに伝播させない */
  touch-action: pan-y;                  /* 縦swipeのみ許可、横/ピンチ無効 */
  padding-top: var(--xtop-h);
  scroll-padding-top: var(--xtop-h);   /* snap時にtop barぶん下に揃える */
  will-change: scroll-position;
}
.reel-stage::-webkit-scrollbar { display: none; }

/* 実要素は id="reel-stage"(+Tailwind snap) なので上の .reel-stage(class)は不一致で未適用だった。
   home(header.php→style.css)の reel に reel.php同等の挙動を id セレクタで補う。
   ※height/overflow/snap は Tailwind 側で既定済み。ここは scrollbar隠し+bounce抑制+縦swipe限定のみ。 */
#reel-stage {
  scrollbar-width: none;
  overscroll-behavior-y: contain;   /* 端で背面ページに bounce 伝播させない */
  touch-action: pan-y;              /* 縦swipeのみ(横/ピンチ無効) */
  -webkit-overflow-scrolling: touch;
}
#reel-stage::-webkit-scrollbar { display: none; }

/* XROLL再現: card は flex column で 上にvideo (45vh contain), 下にinfo area */
.reel-card {
  height: calc(100vh - var(--xtop-h));
  scroll-snap-align: start;
  position: relative;
  background: #0a0a14;     /* card 余白の背景色 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 画面外cardの paint/layout コストを削減 (Android Chrome特に効果大) */
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}
/* video エリア = 45vh (XROLL同型: h-[45vh] w-full bg-black object-contain) */
.reel-media {
  position: relative;
  width: 100%;
  height: 45vh;
  background: #000;
  flex-shrink: 0;
}
@media (min-width: 720px) {
  .reel-media { height: 56.25vw; max-height: 60vh; }
}
.reel-poster {
  position: absolute; inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: #000;
}
.reel-card.has-video .reel-poster { opacity: 0; }
.reel-gradient { display: none; }

/* === 削除済 (XROLLにない独自飾り): progress bar / mute button / audio visualizer / FAB === */

/* video エリア下のinfo (action は absolute で video エリア内 right-4 bottom-40 = 160px) */
.reel-overlay {
  flex: 1;
  padding: 18px 16px 24px;
  display: flex; flex-direction: column;
  background: #0a0a14;
  color: #fff;
  position: relative;
}
.reel-info { color: #fff; max-width: 92%; }
.reel-rank {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: linear-gradient(135deg, #ffd54f, #ff9100); color: #000;
  font-size: 12px; font-weight: 700; margin-bottom: 6px;
}
.reel-screen { font-size: 15px; font-weight: 700; }
.reel-likes { font-size: 13px; opacity: 0.9; margin-top: 4px; }

/* XROLL action bar: absolute bottom-40 right-4, flex flex-col items-center space-y-6 */
.reel-actions {
  position: absolute; right: 16px; bottom: 160px; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;          /* space-y-6 = 1.5rem = 24px */
  pointer-events: none;
}
.reel-actions > * { pointer-events: auto; }
.ra {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: #fff; text-decoration: none;
  transition: transform 0.15s;
}
.ra:hover { text-decoration: none; }
.ra:active { opacity: 0.7; }
.ra .ra-icon {
  /* XROLL: text-3xl font-light = 30px / 100weight */
  font-size: 30px; line-height: 1; font-weight: 200;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 24px;     /* h-6 w-8 */
  margin-bottom: 4px;
}
.ra .ra-count {
  /* XROLL: text-xs = 12px */
  font-size: 12px; line-height: 1; opacity: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
/* avatar btn (XROLL: h-7 w-7 = 28px) */
.ra-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #1a1a2e; }
.ra-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* like 状態 (XROLL: text-red-500) */
.ra.liked .ra-icon { color: #ef4444; font-weight: 400; }
.ra-like.liked .ra-icon::before { content: "♥"; }

/* FAB は HTML側で削除済 = CSSも残骸不要 */
.snapx-fab { display: none !important; }

/* Reel ad card — 通常reel-card と同じ高さに揃える(snap ずれ防止) */
.reel-ad-card {
  height: calc(100vh - var(--xtop-h));
  scroll-snap-align: start;
  background: #1a1a2e;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.reel-ad-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reel-ad-label {
  position: absolute; top: 80px; left: 16px;
  padding: 4px 8px; background: rgba(255,255,255,0.15); color: #fff;
  font-size: 10px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em;
}

/* Nav arrows (desktop補助) */
.reel-nav-arrows {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 8px; z-index: 30;
}
@media (min-width: 720px) { .reel-nav-arrows { display: flex; } }
.reel-nav-arrows button {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 0; cursor: pointer;
  color: #fff; font-size: 18px; backdrop-filter: blur(6px);
}
.reel-nav-arrows button:hover { background: rgba(255,255,255,0.3); }

/* === URL Modal (reel から開く) === */
.url-modal {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; backdrop-filter: blur(8px);
}
.url-modal-inner {
  background: #fff; border-radius: 14px; padding: 28px 24px;
  max-width: 520px; width: 100%; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.url-modal-inner h2 { margin: 0 0 14px; font-size: 18px; }
.url-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0; font-size: 24px; cursor: pointer; line-height: 1; color: #888;
}
.url-modal-hint { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.url-result { margin-top: 12px; }
.url-result .msg { padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.url-result .msg:not(.error):not(.ok) { background: var(--bg); color: var(--muted); }

/* === Promo Popup (Stripchat saretarget風) === */
.promo-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: promo-fadein 0.25s ease-out;
}
@keyframes promo-fadein {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.promo-inner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  border-radius: 16px; padding: 28px 24px 20px;
  max-width: 440px; width: 100%;
  position: relative; text-align: center;
  box-shadow: 0 24px 80px rgba(217,72,72,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  animation: promo-slidein 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes promo-slidein {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.promo-close {
  position: absolute; top: 8px; right: 12px;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 0; width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.promo-close:hover { background: rgba(255,255,255,0.2); }

.promo-tag {
  display: inline-block;
  background: linear-gradient(135deg, #ff3366, #d94848);
  color: #fff; padding: 4px 12px; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(255,51,102,0.5);
  animation: promo-pulse 1.8s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.promo-title {
  margin: 6px 0 4px; font-size: 22px; line-height: 1.3; font-weight: 700;
}
.promo-title .hot {
  background: linear-gradient(135deg, #ffaa55, #ff3366);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.promo-subtitle {
  font-size: 12px; opacity: 0.7; letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.promo-bullets {
  list-style: none; padding: 0; margin: 0 0 18px;
  text-align: left;
  background: rgba(255,255,255,0.05);
  border-radius: 8px; padding: 14px 16px;
}
.promo-bullets li {
  font-size: 13px; line-height: 1.7; padding-left: 22px; position: relative;
}
.promo-bullets li::before {
  content: "✓"; position: absolute; left: 0; color: #5eb0ff; font-weight: 900;
}
.promo-bullets strong {
  color: #ffaa55;
}

.promo-cta {
  display: block; padding: 14px 28px;
  background: linear-gradient(135deg, #ff3366, #d94848);
  color: #fff !important; border-radius: 10px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  box-shadow: 0 6px 24px rgba(255,51,102,0.5);
  transition: transform 0.15s, box-shadow 0.2s;
  margin-bottom: 12px;
}
.promo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255,51,102,0.7);
  text-decoration: none;
}
.promo-cta:active { transform: translateY(0); }

.promo-foot {
  display: flex; justify-content: center;
}
.promo-skip {
  background: transparent; border: 0; color: rgba(255,255,255,0.5);
  cursor: pointer; font-size: 12px; padding: 4px 8px;
}
.promo-skip:hover { color: #fff; }
.promo-placeholder h3 { margin: 0 0 8px; }

/* === Footer === */
.site-footer { background: #1a1a2e; color: rgba(255,255,255,0.85); margin-top: 32px; padding: 28px 0 0; }
.footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
.footer-section a { display: block; color: rgba(255,255,255,0.7); padding: 4px 0; font-size: 13px; }
.footer-section a:hover { color: #fff; text-decoration: none; }
.footer-brand { font-weight: 700; font-size: 18px; }
.footer-tagline { color: rgba(255,255,255,0.6); font-size: 12px; margin: 6px 0 0; }
.footer-title { font-weight: 600; font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; margin-bottom: 8px; }
.footer-note { color: rgba(255,255,255,0.6); font-size: 11px; }
.footer-bottom { background: #0f0f20; padding: 12px 16px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 16px; }
.footer-bottom p { margin: 0; }

/* === Misc === */
.btn-direct { background: #f3f4f6; color: var(--text); }
.btn-direct:hover { background: #e5e7ec; }