/* ══════════════════════════════════════════════════════════════════════════
   watch-party.css  —  Watch Party page specific styles
   Defines local colour var --c-neko used for stream card theming.
   ══════════════════════════════════════════════════════════════════════════ */

/* toolbar */
.tb{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.stream-count{font-size:0.65rem;font-weight:700;font-family:'DM Mono',monospace;padding:2px 9px;border-radius:20px;background:rgba(124,92,252,0.1);border:1px solid rgba(124,92,252,0.22);color:var(--accent2);}
.live-count{display:none;font-size:0.65rem;font-weight:700;font-family:'DM Mono',monospace;padding:2px 9px;border-radius:20px;background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.22);color:var(--red);align-items:center;gap:0.3rem;}
.live-count.show{display:flex;}
.live-count::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);animation:lcpulse 1.5s ease infinite;}
@keyframes lcpulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* stream grid */
.stream-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;}

/* stream card */
.stream-card{
  border-radius:14px;overflow:visible;position:relative;cursor:pointer;
  background:rgba(var(--c-neko),0.055);
  border:1px solid rgba(var(--c-neko),0.2);
  box-shadow:0 4px 20px rgba(var(--c-neko),0.08),inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color 0.22s,box-shadow 0.22s,transform 0.22s;
}
.stream-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--c-neko),0.5),transparent);border-radius:14px 14px 0 0;pointer-events:none;}
.stream-card:hover{border-color:rgba(var(--c-neko),0.45);box-shadow:0 8px 32px rgba(var(--c-neko),0.18),inset 0 1px 0 rgba(255,255,255,0.07);transform:translateY(-3px);z-index:50;}

/* 16:9 thumbnail */
.stream-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:13px 13px 0 0;position:relative;background:rgba(0,0,0,0.5);}
.stream-thumb-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;width:100%;height:100%;background:linear-gradient(135deg,rgba(var(--c-neko),0.09),rgba(0,0,0,0.35));transition:all 0.2s;}
.stream-card:hover .stream-thumb-placeholder{background:linear-gradient(135deg,rgba(var(--c-neko),0.15),rgba(0,0,0,0.25));}
.stp-icon{font-size:2.5rem;opacity:0.6;line-height:1;}
.stp-label{font-size:0.68rem;color:rgba(var(--c-neko),0.7);font-weight:600;letter-spacing:1px;text-transform:uppercase;}

/* play overlay */
.stream-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);transition:background 0.2s;}
.stream-card:hover .stream-play-overlay{background:rgba(0,0,0,0.28);}
.play-btn{width:56px;height:56px;border-radius:50%;background:rgba(var(--c-neko),0.25);border:2px solid rgba(var(--c-neko),0.6);display:flex;align-items:center;justify-content:center;font-size:1.3rem;opacity:0;transform:scale(0.8);transition:opacity 0.2s,transform 0.2s;}
.stream-card:hover .play-btn{opacity:1;transform:scale(1);}

/* badges */
.badge-live{position:absolute;top:0.55rem;left:0.55rem;display:flex;align-items:center;gap:0.3rem;background:rgba(248,113,113,0.88);border-radius:20px;padding:2px 8px;font-size:0.6rem;font-weight:700;color:#fff;letter-spacing:0.8px;text-transform:uppercase;backdrop-filter:blur(4px);}
.badge-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:lcpulse 1.5s ease infinite;}
.badge-viewers{position:absolute;top:0.55rem;right:0.55rem;background:rgba(0,0,0,0.62);border-radius:20px;padding:2px 8px;font-size:0.65rem;font-family:'DM Mono',monospace;color:rgba(255,255,255,0.85);backdrop-filter:blur(4px);}

/* card body */
.stream-body{padding:0.85rem 1rem 1rem;overflow:hidden;border-radius:0 0 13px 13px;}
.stream-name{font-size:0.92rem;font-weight:700;color:var(--text);margin-bottom:0.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stream-desc{font-size:0.75rem;color:var(--text-dim);line-height:1.45;margin-bottom:0.65rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.stream-footer{display:flex;align-items:center;gap:0.5rem;}
.stream-status{display:flex;align-items:center;gap:0.35rem;font-size:0.68rem;color:var(--text-muted);}
.s-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.s-dot.on{background:var(--green);box-shadow:0 0 5px rgba(52,211,153,0.6);}
.s-dot.off{background:var(--text-muted);}
.btn-join{margin-left:auto;padding:0.32rem 0.95rem;border-radius:7px;font-size:0.78rem;font-weight:700;cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.15s;background:rgba(var(--c-neko),0.15);border:1px solid rgba(var(--c-neko),0.4);color:rgba(var(--c-neko),1);white-space:nowrap;}
.btn-join:hover{background:rgba(var(--c-neko),0.25);border-color:rgba(var(--c-neko),0.65);}

/* card admin — hover reveal */
.stream-admin{display:none;gap:0.2rem;position:absolute;top:0.5rem;right:0.5rem;z-index:5;}
.stream-card:hover .stream-admin{display:flex;}
.s-act{width:24px;height:24px;border-radius:5px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:rgba(255,255,255,0.65);transition:background 0.12s;backdrop-filter:blur(4px);}
.s-act:hover{background:rgba(0,0,0,0.75);color:#fff;}
.s-act.del:hover{background:rgba(248,113,113,0.3);color:var(--red);}

/* empty state */
.empty-state{text-align:center;padding:4rem 1rem;color:var(--text-muted);}
.empty-state .es-icon{font-size:2.5rem;margin-bottom:0.75rem;}
.empty-state .es-title{font-size:0.95rem;font-weight:600;color:var(--text-dim);margin-bottom:0.35rem;}
.empty-state .es-sub{font-size:0.8rem;line-height:1.55;}

/* ═══ HOVER PREVIEW POPUP ═══════════════════════════════════════════════ */
.preview-popup{
  position:fixed;z-index:800;pointer-events:none;
  opacity:0;transform:scale(0.96) translateY(4px);
  transition:opacity 0.2s ease,transform 0.2s ease;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(var(--c-neko),0.45);
  box-shadow:0 0 0 1px rgba(var(--c-neko),0.15),0 24px 60px rgba(0,0,0,0.75),0 8px 24px rgba(var(--c-neko),0.15);
  background:#000;width:480px;
}
.preview-popup.visible{opacity:1;transform:scale(1) translateY(0);}
.preview-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--c-neko),0.6),transparent);z-index:2;pointer-events:none;}
.pp-video-area{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:rgba(0,0,0,0.8);}
.pp-iframe-wrap{position:absolute;inset:0;opacity:0;transition:opacity 0.35s;}
.pp-iframe-wrap.loaded{opacity:1;}
.pp-iframe-wrap iframe{width:200%;height:200%;transform:scale(0.5);transform-origin:top left;border:none;pointer-events:none;}
.pp-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;background:linear-gradient(135deg,rgba(var(--c-neko),0.08),rgba(0,0,0,0.5));}
.pp-placeholder .ppp-icon{font-size:2.5rem;opacity:0.55;}
.pp-placeholder .ppp-label{font-size:0.72rem;color:rgba(var(--c-neko),0.7);font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.pp-live-badge{position:absolute;top:0.5rem;left:0.5rem;display:flex;align-items:center;gap:0.3rem;background:rgba(248,113,113,0.88);border-radius:20px;padding:2px 8px;font-size:0.6rem;font-weight:700;color:#fff;letter-spacing:0.8px;text-transform:uppercase;}
.pp-live-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:lcpulse 1.5s ease infinite;}
.pp-viewers-badge{position:absolute;top:0.5rem;right:0.5rem;background:rgba(0,0,0,0.62);border-radius:20px;padding:2px 8px;font-size:0.65rem;font-family:'DM Mono',monospace;color:rgba(255,255,255,0.85);}
.pp-info{padding:0.75rem 1rem 0.85rem;background:rgba(10,10,22,0.95);backdrop-filter:blur(12px);}
.pp-name{font-size:0.9rem;font-weight:700;color:var(--text);margin-bottom:0.18rem;}
.pp-meta{display:flex;align-items:center;gap:0.45rem;}
.pp-viewers-text{font-size:0.68rem;color:var(--text-muted);font-family:'DM Mono',monospace;}
.pp-click-hint{font-size:0.65rem;color:var(--text-muted);margin-left:auto;}

/* ═══ FULL-SCREEN OVERLAY ════════════════════════════════════════════════ */
.fs-overlay{position:fixed;inset:0;z-index:9000;background:#000;display:none;flex-direction:column;}
.fs-overlay.open{display:flex;}
.fs-toolbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:0.65rem;padding:0.8rem 1.1rem;background:linear-gradient(180deg,rgba(0,0,0,0.88) 0%,transparent 100%);transition:opacity 0.3s;}
.fs-toolbar.hidden{opacity:0;pointer-events:none;}
.fs-name{font-size:0.9rem;font-weight:700;color:#fff;flex:1;}
.fs-btn{padding:0.3rem 0.85rem;border-radius:7px;font-size:0.76rem;font-weight:600;cursor:pointer;font-family:'DM Sans',inherit;transition:all 0.15s;border:1px solid;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);}
.fs-btn.back{border-color:rgba(255,255,255,0.22);color:#fff;}
.fs-btn.back:hover{background:rgba(255,255,255,0.14);}
.fs-btn.newtab{border-color:rgba(124,92,252,0.45);color:var(--accent2);}
.fs-btn.newtab:hover{background:rgba(124,92,252,0.2);}
.fs-iframe-wrap{flex:1;position:relative;}
.fs-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

/* port assignment pill */
.port-pill{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.62rem;font-family:'DM Mono',monospace;padding:2px 8px;border-radius:20px;background:rgba(var(--c-neko),0.08);border:1px solid rgba(var(--c-neko),0.2);color:rgba(var(--c-neko),0.8);}

/* mobile */
@media(max-width:600px){
  .stream-grid{grid-template-columns:1fr;}
  .preview-popup{width:calc(100vw - 24px);}
}