: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;}
/* 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 h1{font-size:20px;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:14px;padding-right:14px;
  background:linear-gradient(180deg,rgba(10,10,15,.92),rgba(10,10,15,0));pointer-events:none;}
.brand{font-weight:900;font-size:17px;letter-spacing:.5px;text-shadow:0 1px 4px #000;}
.brand span{color:var(--accent);}
.meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;text-shadow:0 1px 4px #000;}
.feed-date{font-size:12px;font-weight:700;}
.feed-count{font-size:10px;color:var(--muted);}

/* ---------- フィルタバー ---------- */
.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{display:flex;align-items:center;gap:8px;margin:2px 12px 0;padding:6px 12px;
  background:rgba(124,77,255,.18);border:1px solid var(--accent2);border-radius:999px;pointer-events:auto;
  font-size:13px;width:max-content;max-width:calc(100% - 24px);}
.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;}
.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.bpop{background:#ffd60a;color:#000;}
.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);}
.review{font-size:11px;color:var(--muted);margin-bottom:10px;}
.review .star{color:#ffd60a;}
.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:repeat(2,1fr);gap:10px;
  padding:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 18px) 12px 40px;}
.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;}
.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;}

/* 再生時間バッジ（左上・ミュートと対の位置） */
.time-badge{position:fixed;left:12px;z-index:6;
  top:calc(var(--bar-h) + var(--filter-h) + var(--safe-top) + 14px);
  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;pointer-events:none;font-variant-numeric:tabular-nums;}
.time-badge.show{opacity:1;}

/* 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;}