:root{
  --bg:#0a0a0f;
  --bg2:#14141c;
  --fg:#ffffff;
  --muted:#b8b8c8;
  --accent:#ff2d72;
  --accent2:#7c4dff;
  --chip:#23232f;
  --chip-on:#ff2d72;
  --safe-top:env(safe-area-inset-top,0px);
  --bar-h:48px;
  --filter-h:44px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* アプリ画面(index)はテキスト選択・長押しコールアウト(コピー/検索/翻訳)を全面無効化。
   動画の長押し2倍速がiOSの選択メニューに乗っ取られるのを防ぐ。about.html には適用されない。 */
body.app, body.app *{
  -webkit-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important;}
/* hidden 属性を確実に効かせる（.age-gate/.empty-state/.context-bar の display 指定より優先） */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  overscroll-behavior:none;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* ---------- 年齢確認 ---------- */
.age-gate{position:fixed;inset:0;z-index:1000;background:rgba(5,5,9,.97);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.age-box{max-width:340px;text-align:center;background:var(--bg2);border:1px solid #2a2a38;
  border-radius:18px;padding:28px 22px;}
.age-box .age-title{font-size:20px;font-weight:700;color:#fff;margin:0 0 14px;}
.age-box p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 18px;}
.age-actions{display:flex;flex-direction:column;gap:10px;}
.btn-primary{background:var(--accent);color:#fff;font-weight:700;padding:13px;border-radius:12px;font-size:15px;}
.btn-ghost{display:block;padding:12px;border-radius:12px;border:1px solid #33333f;color:var(--muted);text-decoration:none;font-size:14px;}
.age-note{font-size:11px;margin-top:16px;}

/* ---------- ヘッダー ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:calc(var(--bar-h) + var(--safe-top));
  padding-top:var(--safe-top);z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding-left:12px;padding-right:12px;gap:6px;flex-wrap:nowrap;white-space:nowrap;
  background:linear-gradient(180deg,rgba(10,10,15,.92),rgba(10,10,15,0));pointer-events:none;}
.brand{margin:0;font-weight:900;font-size:14px;letter-spacing:.3px;text-shadow:0 1px 4px #000;
  pointer-events:auto;cursor:pointer;flex:0 0 auto;white-space:nowrap;}
.ws-credit{margin:8px 0 2px;}
/* CTA横の広告表示(景表法・規約第4条で必須) */
.pr-mini{display:inline-block;font-size:9px;font-weight:700;color:#aaa;
  border:1px solid rgba(255,255,255,.3);padding:2px 5px;border-radius:4px;margin-left:8px;vertical-align:middle;}
/* ヘッダーの𝕏共有(極小) */
.x-share{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  font-size:10px;font-weight:700;color:#ddd;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
  border-radius:50%;margin-left:6px;vertical-align:middle;pointer-events:auto;cursor:pointer;padding:0;}
/* 検索: ヘッダーの🔍ボタン(使い方の左)で全画面オーバーレイを開く */
.search-ico{cursor:pointer;}
/* 全画面検索オーバーレイ: 検索時だけ大きく表示、実行/閉じるで完全に消える */
.search-overlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding-top:calc(var(--safe-top) + 18vh);gap:18px;
  background:rgba(5,5,10,.96);backdrop-filter:blur(6px);pointer-events:auto;}
.search-overlay[hidden]{display:none !important;}
.search-big{display:flex;flex-direction:column;gap:14px;width:min(560px, 88vw);}
.search-big input{width:100%;box-sizing:border-box;font-size:17px;color:#fff;background:rgba(255,255,255,.07);
  border:2px solid var(--accent2);border-radius:16px;padding:15px 18px;outline:none;}
.search-big input::placeholder{color:#777;}
.search-big .search-go{cursor:pointer;width:100%;box-sizing:border-box;border:none;border-radius:14px;
  background:var(--accent2);color:#fff;font-size:16px;font-weight:800;padding:14px;}
.search-cancel{cursor:pointer;background:none;border:none;color:var(--muted);font-size:14px;padding:10px 20px;}

/* 検索入力はテキスト選択を許可(body.appの全面無効化の例外) */
body.app .search-big input{-webkit-user-select:text !important;user-select:text !important;}

/* お気に入りタブの「Xで共有」ピル */
.fav-share{display:none;position:fixed;left:12px;z-index:7;
  top:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 54px);
  align-items:center;gap:6px;padding:7px 13px;font-size:12px;font-weight:700;color:#fff;
  background:rgba(29,29,38,.85);backdrop-filter:blur(6px);border:1px solid #3a3a48;border-radius:999px;
  pointer-events:auto;cursor:pointer;}
.fav-share.show{display:flex;}
.brand span{color:var(--accent);}
.meta{display:flex;flex-direction:row;align-items:center;gap:6px;text-shadow:0 1px 4px #000;
  flex:0 1 auto;white-space:nowrap;min-width:0;}
.meta-col{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;flex:0 0 auto;}
.feed-date{font-size:11px;font-weight:700;white-space:nowrap;}
.feed-count{font-size:9px;color:var(--muted);white-space:nowrap;}
.guide-link{pointer-events:auto;font-size:10px;color:var(--muted);text-decoration:none;flex:0 0 auto;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:3px 8px;border-radius:999px;white-space:nowrap;}

/* ---------- フィルタバー ---------- */
.filterbar{position:fixed;top:calc(var(--bar-h) + var(--safe-top));left:0;right:0;z-index:30;pointer-events:none;}
.filter-scroll{display:flex;gap:8px;overflow-x:auto;padding:6px 12px;scrollbar-width:none;pointer-events:auto;
  -webkit-overflow-scrolling:touch;}
.filter-scroll::-webkit-scrollbar{display:none;}
.chip-filter,.chip-view{flex:0 0 auto;background:rgba(35,35,47,.85);backdrop-filter:blur(8px);
  border:1px solid #34343f;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.35);}
.chip-filter.on{background:var(--chip-on);border-color:var(--chip-on);color:#fff;}
.chip-view.on{background:var(--accent2);border-color:var(--accent2);color:#fff;}
.filter-sep{flex:0 0 auto;width:1px;background:#34343f;margin:4px 2px;}
/* 女優/メーカー選択中タブ(✕付き): タイム表示の下の段・左寄せ(タイムと重ならない) */
.context-bar{position:fixed;left:12px;z-index:7;
  top:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 54px);
  display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:rgba(124,77,255,.35);backdrop-filter:blur(6px);border:1px solid var(--accent2);border-radius:999px;pointer-events:auto;
  font-size:12px;width:max-content;max-width:52%;}
.context-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.context-clear{background:rgba(255,255,255,.15);border-radius:50%;width:20px;height:20px;font-size:11px;flex:0 0 auto;}

/* ---------- フィード ---------- */
.feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;
  overscroll-behavior-y:contain;}
.card{position:relative;height:100dvh;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(30px) brightness(.45);transform:scale(1.15);z-index:0;}
.card-media{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.card-media video,.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;z-index:1;}
/* ポスター(ジャケット)を動画より上に置き、再生開始時にフェードアウトさせる
   → カード表示直後はジャケットが約0.5秒見えてから動画が始まる */
.card-media .poster{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;z-index:2;transition:opacity .25s;}
.card-media.playing .poster{opacity:0;pointer-events:none;}
.card-shade{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 28%,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);}

/* タップで再生ヒント / ミュート表示 */
.tap-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;
  font-size:26px;z-index:3;}
.card.paused .tap-hint{display:flex;}
/* サンプル動画なしカード: ▶は出さず「なし」表示 */
.card.novideo .tap-hint{display:none !important;}
.novid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  background:rgba(0,0,0,.55);color:var(--muted);font-size:12px;font-weight:600;
  padding:8px 16px;border-radius:999px;pointer-events:none;}
.mute-badge{position:absolute;right:12px;font-size:17px;z-index:6;
  top:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 10px);
  background:rgba(0,0,0,.5);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;}

/* 右サイドアクション（画面下に寄せてコンパクトに） */
.actions{position:absolute;right:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:5;
  display:flex;flex-direction:column;gap:14px;align-items:center;}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:#fff;text-shadow:0 1px 3px #000;}
.act .ico{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-size:21px;}
.act.on .ico{background:var(--accent);}
.act.follow.on .ico{background:var(--accent2);}

/* 下部情報 */
.info{position:absolute;left:0;right:72px;bottom:0;z-index:4;padding:0 14px calc(env(safe-area-inset-bottom,0px) + 18px);}
.info .title{font-size:15px;font-weight:700;line-height:1.4;margin:0 0 8px;text-shadow:0 1px 4px #000;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.badge{font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.18);}
.badge.b4k{background:#0a84ff;}
.badge.bvr{background:#34c759;color:#000;}
.badge.bres{background:var(--accent2);color:#fff;}
.badge.bkyo{background:#ff9f0a;color:#000;}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;max-height:54px;overflow:hidden;}
.tag{font-size:11px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;}
.tag.actress{background:rgba(255,45,114,.22);border-color:rgba(255,45,114,.4);}
.tag.maker{background:rgba(124,77,255,.2);border-color:rgba(124,77,255,.4);}
.cta-row{display:flex;align-items:center;}
.cta{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font-weight:800;
  padding:11px 20px;border-radius:12px;font-size:14px;text-decoration:none;box-shadow:0 4px 14px rgba(255,45,114,.4);}
.cta .price{font-weight:600;opacity:.9;font-size:12px;}

/* フォロー＝女優一覧 */
.feed.list-mode{scroll-snap-type:none;overflow-y:auto;}
.actress-list{display:grid;grid-template-columns:1fr;gap:10px;
  padding:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 18px) 12px 40px;}
/* PC等の広い画面のみ2列(スマホは1列固定) */
@media (min-width:700px){
  .actress-list{grid-template-columns:repeat(2,1fr);}
}
.actress-item{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid #23232f;
  border-radius:14px;padding:12px 12px;text-align:left;position:relative;color:#fff;min-height:64px;}
.actress-item .av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;font-weight:800;font-size:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;
  overflow:hidden;}
.actress-item .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.actress-item .nm{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* フォロー一覧の女優ごとの共有ボタン(タップでその女優の連続再生ページをX共有) */
.actress-item .a-share{position:absolute;right:40px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:700;color:#fff;background:rgba(124,77,255,.35);
  border:1px solid rgba(124,77,255,.6);padding:6px 11px;border-radius:999px;white-space:nowrap;}
.actress-item .nm{padding-right:104px;}
.actress-item .unfollow{position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--muted);font-size:11px;display:flex;align-items:center;justify-content:center;}

/* 上部固定行: [再生時間] [女優タグ] [メーカータグ]（左上・ミュートと対） */
.top-row{position:fixed;left:12px;right:54px;z-index:6;
  top:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 14px);
  display:flex;align-items:center;gap:6px;pointer-events:none;}
.time-badge,.count-badge{flex:0 0 auto;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:600;
  padding:7px 11px;border-radius:999px;opacity:0;transition:opacity .15s;font-variant-numeric:tabular-nums;}
.time-badge.show,.count-badge.show{opacity:1;}
/* タグは右端(スピーカーマークのすぐ左)に寄せる */
.top-tags{display:flex;gap:6px;overflow:hidden;pointer-events:auto;margin-left:auto;justify-content:flex-end;}
.top-tags .tag{font-size:10px;padding:5px 9px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.top-tags .tag.actress{background:rgba(120,15,50,.6);border-color:rgba(255,45,114,.5);}
.top-tags .tag.maker{background:rgba(50,30,110,.6);border-color:rgba(124,77,255,.5);}

/* 女優タグ(動画下・タイトルの上): 何人いても1行の横スクロールで収まる */
.actress-wrap{position:relative;margin-bottom:8px;}
.info .tags-actress{flex-wrap:nowrap;overflow-x:auto;max-height:none;margin-bottom:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.info .tags-actress::-webkit-scrollbar{display:none;}
.info .tags-actress .tag{flex:0 0 auto;max-width:none;}
/* 溢れている時だけ出る「左右にスワイプできる」小さな ←/→ (タグ側は端でフェードして被らない) */
.ascroll{position:absolute;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;
  width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.45);color:#bbb;
  font-size:9px;line-height:16px;text-align:center;}
.ascroll.left{left:-4px;}
.ascroll.right{right:-4px;}
/* 端のタグをフェードアウトさせるマスク(矢印と重なる部分が透ける) */
.tags-actress.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);}
.tags-actress.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 100%);}
.tags-actress.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);}

/* 本目スライダー（カウント長押し） */
.seek-panel{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);}
.seek-panel.show{display:flex;}
#seekLabel{font-size:24px;font-weight:800;text-shadow:0 1px 6px #000;}
#seekRange{width:78%;max-width:420px;height:34px;accent-color:var(--accent);}
.seek-hint{font-size:11px;color:var(--muted);}

/* カウントバッジはタップ可能(ブラウザの既定ジェスチャは抑止) */
.count-badge{pointer-events:auto;cursor:pointer;touch-action:none;}

/* 2倍速表示（長押し中） */
.speed-badge{position:fixed;top:14%;left:50%;transform:translateX(-50%);z-index:40;
  background:rgba(0,0,0,.62);color:#fff;font-size:15px;font-weight:800;padding:8px 16px;border-radius:999px;
  opacity:0;transition:opacity .12s;pointer-events:none;}
.speed-badge.show{opacity:1;}

/* スワイプヒント（初回） */
.swipe-hint{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:20;
  font-size:12px;color:var(--muted);background:rgba(0,0,0,.45);padding:6px 14px;border-radius:999px;
  animation:bounce 1.6s infinite;pointer-events:none;}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}

/* 状態 */
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;z-index:5;}
.empty-state{position:fixed;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;
  z-index:25;background:var(--bg);padding:24px;text-align:center;}
.empty-state p{color:var(--muted);}

/* フッター */
.site-footer{height:100dvh;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;
  align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--bg2);}
.site-footer p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;}
.site-footer p:first-child{font-weight:900;font-size:18px;color:#fff;}
.footer-links a{color:var(--accent2);text-decoration:none;}
.disclaimer{font-size:10px;max-width:300px;}