/* Watch page: compact 9:16 player for phone + laptop */
.watch{padding:110px 0 70px;min-height:70vh;}
.watch-back{display:inline-block;color:var(--text-dim);font-size:14px;margin-bottom:22px;transition:color .2s ease;}
.watch-back:hover{color:var(--cyan);}
.watch-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;justify-content:center;max-width:980px;margin:0 auto;}

.wplayer{
  position:relative;background:#000;border-radius:20px;overflow:hidden;
  aspect-ratio:9/16;height:min(78vh,720px);max-width:100%;
  border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.wplayer video{width:100%;height:100%;object-fit:contain;display:block;background:#000;}
.wp-big{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(6,7,12,.55);color:#fff;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(8px);transition:opacity .25s ease;
}
.wplayer.is-playing .wp-big{opacity:0;pointer-events:none;}
.wp-bar{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:30px 12px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;
}
.wp-btn{background:none;border:none;color:#fff;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border-radius:50%;flex:none;}
.wp-btn:hover{background:rgba(255,255,255,.15);}
.wp-btn:focus-visible,.wp-big:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.wp-btn .i-pause,.wplayer.is-playing .wp-btn .i-play{display:none;}
.wplayer.is-playing .wp-btn .i-pause{display:block;}
.wp-btn .i-on{display:none;}
.wp-btn[aria-pressed="true"] .i-on{display:block;}
.wp-btn[aria-pressed="true"] .i-off{display:none;}
.wp-time{font-family:var(--font-mono);font-size:11.5px;min-width:34px;opacity:.9;}
.wp-seek{flex:1;min-width:0;height:4px;accent-color:var(--cyan);cursor:pointer;}


.winfo h1{font-family:var(--font-display);font-size:clamp(26px,3.6vw,38px);font-weight:800;margin:14px 0 8px;}
.w-sub{color:var(--cyan);font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:14px;}
.w-desc{color:var(--text-dim);font-size:15.5px;line-height:1.7;margin-bottom:20px;}
.w-actions{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 22px;}
.w-actions [hidden]{display:none!important;}
.w-url{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);}
.w-url small{display:block;color:var(--text-faint,var(--text-dim));font-size:11px;margin-bottom:4px;letter-spacing:.04em;text-transform:uppercase;}
.w-url code{font-family:var(--font-mono);font-size:12.5px;word-break:break-all;color:var(--text);}

.w-more{max-width:980px;margin:60px auto 0;}
.w-more h2{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:16px;}
.w-more-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
.w-thumb{
  flex:0 0 130px;scroll-snap-align:start;position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);display:block;
}
.w-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.w-thumb:hover img{transform:scale(1.05);}
.w-thumb span{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);}

@media (max-width:820px){
  .watch{padding-top:90px;}
  .watch-grid{grid-template-columns:1fr;gap:26px;justify-items:center;}
  .wplayer{height:min(62vh,560px);width:auto;}
  .winfo{width:100%;max-width:520px;}
}

/* Live-site chip + exit button inside the player */
.wp-live{
  position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#19c8c0,#5b63f5);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.wp-live[hidden]{display:none!important;}
.wp-close{
  position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:none;
  background:rgba(6,7,12,.6);color:#fff;display:none;place-items:center;cursor:pointer;backdrop-filter:blur(8px);
}
.wplayer.is-fs .wp-close{display:grid;}
.wp-btn .i-fsx{display:none;}
.wplayer.is-fs .wp-btn .i-fsx{display:block;}
.wplayer.is-fs .wp-btn .i-fs{display:none;}

/* Full screen: native (laptop/Android) and pseudo (iPhone) share these rules */
.wplayer.is-fs,.wplayer:fullscreen,.wplayer:-webkit-full-screen{
  width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border-radius:0;border:0;max-width:none;box-shadow:none;
}
.wplayer.is-pfs{position:fixed;inset:0;z-index:2147483000;}
.wplayer.is-fs .wp-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
.wplayer.is-fs .wp-live,.wplayer.is-fs .wp-close{top:calc(14px + env(safe-area-inset-top,0px));}
body.wp-lock{overflow:hidden;}