/* ====== Base ====== */
:root{
  --bg:#0e0e10; --fg:#f2f2f2; --muted:#bbbbbf; --accent:#8b5cf6;
  --card:#151518; --radius:20px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; width:100%; max-width:100%;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  overflow-x:hidden; overscroll-behavior:none;
  padding-bottom:env(safe-area-inset-bottom);
}

/* Age gate */
.age-gate{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.7); z-index:50;}
.age-card{background:var(--card); padding:20px; border-radius:16px; width:min(480px, calc(100% - 24px));}
.age-actions{display:flex; gap:10px; margin-top:14px;}
.btn{padding:9px 14px; border-radius:12px; border:1px solid #333; color:var(--fg); background:#222; cursor:pointer;}
.btn.primary{background:var(--accent); border-color:transparent; color:#fff;}
.btn.ghost{background:transparent;}

/* App / Stage */
.app{position:fixed; inset:0; display:grid; place-items:center; width:100%; max-width:100%; overflow:hidden;}
.stage{position:relative; width:100%; height:100vh; height:100dvh; display:grid; place-items:center; overflow:hidden;}

.card{
  position:absolute; width:min(420px, 100%); max-width:100%; height:100vh; height:100dvh;
  background:var(--card);
  display:grid; grid-template-rows:auto auto auto auto auto 1fr; gap:8px; padding:8px 6px 8px 8px;
  overflow:hidden;
}
@media (max-width:360px){
  .card{gap:6px; padding:6px 4px 6px 6px;}
  .profile-img{width:48px; height:48px;}
  .ctrl{padding:6px 8px; font-size:13px;}
  .profile-name{font-size:14px;}
  .profile-url{font-size:11px;}
}

.profile{display:flex; gap:8px; align-items:center; padding:0 2px;}
.profile-img{width:56px; height:56px; border-radius:12px; object-fit:cover; background:#222;}
.profile-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.profile-name{color:#fff; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-url{color:var(--muted); font-size:12px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.controls{display:flex; gap:6px; align-items:center; justify-content:flex-start; padding:0 2px;}
.ctrl{background:#222; color:#fff; border:1px solid #333; padding:8px 10px; border-radius:12px; cursor:pointer;}

.player-wrap{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden;}
.player{width:100%; height:100%; object-fit:cover; border:0; border-radius:16px; background:#000;}

.seekbar-wrap{display:flex; align-items:center; gap:8px; padding:0 2px;}
.seekbar-wrap input[type="range"]{flex:1; appearance:none; height:4px; background:#333; border-radius:999px; outline:none;}
.seekbar-wrap input[type="range"]::-webkit-slider-thumb{appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:none; margin-top:-7px;}
.time{display:flex; gap:6px; font-size:12px; color:var(--muted);}

.thumb-wrap{width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#111; display:grid; place-items:center;}
.thumb-wrap img, .thumb-wrap video{width:100%; height:100%; object-fit:cover; display:block;}

/* 矢印（SVG）: モバイルで確実表示 */
.nav-arrows{position:absolute; inset:0; pointer-events:none; z-index:20;}
.arrow{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background:rgba(139,92,246,0.18); border:2px solid rgba(139,92,246,0.95);
  box-shadow:0 0 20px rgba(139,92,246,0.55), 0 0 50px rgba(139,92,246,0.25) inset;
  animation:float 2.2s ease-in-out infinite;
  pointer-events:auto; cursor:pointer; display:grid; place-items:center;
}
.arrow svg{ width:26px; height:26px; display:block; }
.arrow path{ fill:none; stroke:rgba(255,255,255,0.96); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }

.arrow.left{ left:8px; top:50%; transform:translateY(-50%); }
.arrow.right{ right:8px; top:50%; transform:translateY(-50%); animation-delay:.3s; }
.arrow.down{ left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); transform:translateX(-50%); animation-delay:.6s; }

@keyframes float{0%,100%{transform:translateY(-50%) scale(1);}50%{transform:translateY(calc(-50% - 6px)) scale(1.05);}}
.hidden{display:none !important;}

/* Slide-in transition */
.card.anim-out{opacity:.85; transform:scale(.985); transition:transform .22s ease, opacity .22s ease;}
.card.ghost{opacity:0; pointer-events:none;}
.card.ghost.slide-from-left{transform:translateX(-100%);}
.card.ghost.slide-from-right{transform:translateX(100%);}
.card.ghost.slide-from-up{transform:translateY(-100%);}
.card.ghost.slide-from-down{transform:translateY(100%);}
.card.ghost.sliding{opacity:1; transition:transform .22s ease, opacity .22s ease;}

/* Landscape support */
@media (orientation: landscape){
  .card{
    width:100%; height:100vh; height:100dvh;
    grid-template-rows:auto auto 1fr auto auto 0;
    gap:6px; padding:6px 8px;
  }
  .profile-img{width:44px; height:44px;}
  .profile-name{font-size:14px;}
  .profile-url{font-size:11px;}
  .ctrl{padding:6px 10px;}
  .arrow.left{left:10px;} .arrow.right{right:10px;}
  .arrow.down{bottom:calc(8px + env(safe-area-inset-bottom));}
}
@media (orientation: landscape) and (max-height: 380px){
  .profile{display:grid; grid-template-columns:auto 1fr; gap:6px;}
  .profile-img{width:40px; height:40px;}
  .controls .ctrl{padding:5px 8px; font-size:12px;}
  .thumb-wrap{display:none;}
}