/* =========================================================
   HEIZZAI — Community / video player styles
   ========================================================= */

.community-layout{ display:grid; grid-template-columns:1fr 360px; gap:34px; align-items:start; }
@media (max-width:980px){ .community-layout{ grid-template-columns:1fr; } }

/* ---- Player stage ---- */
.hz-stage{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.hz-stage video{ width:100%; height:100%; display:block; object-fit:contain; background:#000; }
/* YouTube IFrame fills the stage */
#hz-player, .hz-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* persistent corner watermark while viewing */
.hz-watermark{
  position:absolute; top:14px; right:16px; z-index:4; pointer-events:none;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; letter-spacing:.04em;
  color:rgba(255,255,255,.55); text-shadow:0 1px 6px rgba(0,0,0,.6); opacity:.8;
}
.hz-watermark b{ color:var(--crimson); }

/* big center play */
.hz-bigplay{
  position:absolute; inset:0; margin:auto; width:84px; height:84px; z-index:5;
  display:grid; place-items:center; border-radius:50%; cursor:none; border:0;
  background:var(--crimson); color:#fff; box-shadow:0 0 50px var(--crimson-glow);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.hz-bigplay svg{ width:34px; height:34px; fill:#fff; margin-left:4px; }
.hz-bigplay:hover{ transform:scale(1.08); }
.hz-stage.playing .hz-bigplay{ opacity:0; transform:scale(.6); pointer-events:none; }

/* spinner */
.hz-spinner{
  position:absolute; inset:0; margin:auto; width:54px; height:54px; z-index:6;
  border:3px solid rgba(255,255,255,.15); border-top-color:var(--crimson); border-radius:50%;
  opacity:0; pointer-events:none; animation:hzspin .8s linear infinite;
}
.hz-spinner.on{ opacity:1; }
@keyframes hzspin{ to{ transform:rotate(360deg); } }

/* ---- Controls bar ---- */
.hz-controls{
  position:absolute; left:0; right:0; bottom:0; z-index:7; padding:10px 14px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.0));
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hz-stage:hover .hz-controls,
.hz-stage:not(.playing) .hz-controls{ opacity:1; transform:none; }

/* progress */
.hz-progress{ position:relative; height:16px; display:flex; align-items:center; cursor:pointer; margin-bottom:4px; }
.hz-track{ position:relative; width:100%; height:4px; border-radius:4px; background:rgba(255,255,255,.18); overflow:visible; }
.hz-buffered{ position:absolute; left:0; top:0; height:100%; width:0; background:rgba(255,255,255,.3); border-radius:4px; }
.hz-played{ position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,var(--crimson),var(--blue-2)); border-radius:4px; }
.hz-scrub{ position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 10px var(--crimson-glow); opacity:0; transition:opacity .2s; }
.hz-progress:hover .hz-scrub{ opacity:1; }
.hz-progress:hover .hz-track{ height:6px; }

/* button row */
.hz-row{ display:flex; align-items:center; gap:14px; }
.hz-btn{
  width:38px; height:38px; display:grid; place-items:center; border:0; background:none;
  color:#fff; cursor:none; border-radius:9px; transition:background .2s, color .2s, transform .2s;
}
.hz-btn:hover{ background:rgba(255,255,255,.12); color:var(--crimson); transform:translateY(-1px); }
.hz-btn svg{ width:22px; height:22px; fill:currentColor; }
.hz-btn.disabled{ opacity:.4; cursor:not-allowed; }
.hz-btn.busy{ opacity:.6; pointer-events:none; }
.hz-spacer{ flex:1; }

/* volume */
.hz-volwrap{ display:flex; align-items:center; gap:6px; }
.hz-vol{ width:0; opacity:0; transition:width .3s var(--ease), opacity .3s; accent-color:var(--crimson); cursor:pointer; }
.hz-volwrap:hover .hz-vol{ width:78px; opacity:1; }

/* time */
.hz-time{ font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.hz-time .sep{ opacity:.5; margin:0 4px; }

/* quality badge */
.hz-qbadge{
  font-size:.66rem; letter-spacing:.12em; padding:4px 9px; border-radius:50px;
  border:1px solid var(--line); color:var(--blue-2); white-space:nowrap;
}

/* download label */
.hz-dl-note{ font-size:.7rem; color:var(--ink-dim); letter-spacing:.04em; }

/* settings menu */
.hz-menu{
  position:absolute; right:14px; bottom:62px; z-index:9; width:210px; max-height:60%;
  overflow:auto; background:rgba(14,14,20,.97); border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(16px); padding:8px; opacity:0; transform:translateY(8px) scale(.98);
  pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.hz-menu.open{ opacity:1; transform:none; pointer-events:all; }
.hz-menu h5{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); padding:10px 12px 6px; }
.hz-opt{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:9px 12px; border:0; background:none; color:var(--ink-soft); cursor:none;
  border-radius:9px; font-size:.85rem; transition:background .2s, color .2s;
}
.hz-opt:hover{ background:rgba(255,255,255,.08); color:#fff; }
.hz-opt .hz-check{ opacity:0; color:var(--crimson); }
.hz-opt.sel{ color:#fff; }
.hz-opt.sel .hz-check{ opacity:1; }

/* ---- Now-playing meta ---- */
.hz-now{ margin-top:22px; }
.hz-now h2{ font-family:var(--font-head); font-size:1.7rem; line-height:1.15; }
.hz-now p{ color:var(--ink-soft); margin-top:8px; max-width:60ch; }
.hz-now .hz-tags{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* ---- Playlist ---- */
.hz-playlist-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hz-playlist-head h3{ font-family:var(--font-head); font-size:1.1rem; letter-spacing:.02em; }
.hz-playlist-head span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); }
.hz-playlist{ display:flex; flex-direction:column; gap:12px; max-height:560px; overflow:auto; padding-right:4px; }
@media (max-width:980px){ .hz-playlist{ max-height:none; } }

.hz-card{
  display:flex; gap:14px; align-items:center; text-align:left; cursor:none;
  padding:10px; border-radius:14px; border:1px solid var(--line); background:var(--panel);
  backdrop-filter:blur(10px); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; width:100%;
}
.hz-card:hover{ transform:translateX(5px); border-color:var(--crimson); box-shadow:0 12px 30px rgba(255,31,61,.14); }
.hz-card.active{ border-color:var(--crimson); background:rgba(255,31,61,.08); }
.hz-thumb{
  position:relative; flex:0 0 116px; width:116px; aspect-ratio:16/9; border-radius:10px;
  background:#14141c center/cover no-repeat; display:grid; place-items:center; overflow:hidden;
}
.hz-thumb-play{ color:#fff; opacity:.85; font-size:.9rem; text-shadow:0 2px 8px #000; }
.hz-thumb-time{ position:absolute; right:5px; bottom:5px; font-size:.66rem; background:rgba(0,0,0,.75); padding:1px 6px; border-radius:5px; color:#fff; }
.hz-cardmeta strong{ display:block; font-size:.92rem; line-height:1.25; }
.hz-cardmeta span{ font-size:.72rem; color:var(--ink-dim); letter-spacing:.05em; }

/* ---- Feature strip ---- */
.feat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
@media (max-width:780px){ .feat-strip{ grid-template-columns:repeat(2,1fr); } }
.feat{ padding:20px; border-radius:14px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(10px); }
.feat .ico{ color:var(--crimson); margin-bottom:10px; }
.feat strong{ font-family:var(--font-head); display:block; font-size:1rem; margin-bottom:4px; }
.feat span{ color:var(--ink-soft); font-size:.85rem; }