html, body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tab-btn {
  @apply text-sm py-2 rounded-xl transition font-medium;
}
.tab-btn.active {
  @apply bg-brand-600 text-white shadow-soft;
}
.card {
  @apply bg-white rounded-2xl p-5 shadow-soft;
}
.card-title {
  @apply text-lg font-semibold;
}
.btn-primary {
  @apply bg-brand-600 text-white font-semibold rounded-xl px-4 py-3 shadow-soft active:scale-[.99];
}
.btn-secondary {
  @apply bg-gray-100 text-gray-800 font-semibold rounded-xl px-4 py-3 shadow-soft active:scale-[.99];
}
.btn-danger {
  @apply bg-red-600 text-white font-semibold rounded-xl px-4 py-3 shadow-soft active:scale-[.99];
}
.input {
  @apply rounded-xl border border-gray-200 px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-brand-400;
}
.switch-row {
  @apply flex items-center gap-3 text-sm;
}
.switch-row input[type="checkbox"] {
  transform: scale(1.2);
}

.refresh-btn {
  position: fixed;          /* תמיד בפינה גם בגלילה */
  top: 38px;
  left: 18px;               /* שמאל למעלה */
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 10px;
  background: #f4f4f6;
  color: #333;
  font-size: 16px;          /* אם משתמשים בתו ↻ */
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: transform .1s ease, background .2s ease;
}

.refresh-btn:hover { background: #eee; }
.refresh-btn:active { transform: scale(0.96); }



/* Spinner overlay */
.spinner {
  position: fixed; inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
}
.loader {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.25);
  border-top-color: white;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
  position: fixed;
  bottom: 18px; right: 18px; left: 18px;
  z-index: 80;
  background: #111827;
  color: white;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

/* Utilities */
.view.hidden { display: none; }
.hidden { display: none; }

.video-card .video-thumb {
  width: 260px;
  max-height: 180px;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .video-card { flex-direction: column; }
  .video-card .video-thumb { width: 100%; max-height: 220px; }
}
.player-badge {
  padding: 6px 10px; border-radius: 9999px; background: #f3f4f6; font-weight: 600;
}
.player-badge.active {
  background: #e0e7ff; outline: 2px solid #6366f1;
}

/* ===== Countdown (שורת זמן מעל הווידאו) ===== */
/* טיימר – סטייל כללי בלי display */
#timerRow{
  width:max-content;
  margin:10px auto 8px;
  padding:.55rem .95rem;
  border-radius:9999px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
  gap:.5rem; /* אפשר להשאיר gap כאן */
}

/* מופעל רק כשהוא לא hidden */
#timerRow:not(.hidden){
  display:flex;
  align-items:center;
  justify-content:center;
}

/* החבאה אמיתית גם מול id */
#timerRow.hidden{ display:none !important; }

/* במוד "מי מכיר את מי" – הטיימר תמיד מוסתר */
html.wnw-mode #timerRow{ display:none !important; }

#timerRow::before{ content:"⏱️"; font-size:1.05rem; line-height:1; opacity:.8; }
#countdown{
  font-size:1.25rem; font-weight:800; letter-spacing:.2px;
  color:#111827; font-variant-numeric: tabular-nums;
}

/* אופציונלי: פולס בעשר השניות האחרונות */
#timerRow.pulse { animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse{
  0%,100%{ box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45); }
  50%    { box-shadow: 0 9px 22px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.45); }
}



/* ===== Celebration ===== */
.trophy {
  font-size: 54px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}
.winner-title {
  background: linear-gradient(90deg, #f59e0b, #f43f5e, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: .5px;
}
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  border-radius: 9999px;
  background: #f3f4f6;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) inset;
}
.score-pill .dot {
  width: .6rem; height: .6rem; border-radius: 9999px;
}
.score-pill.p1 .dot { background: #6366f1; }  /* Indigo */
.score-pill.p2 .dot { background: #f43f5e; }  /* Rose   */

/* Confetti */
.confetti {
  position: fixed;
  top: -10px;
  width: 8px; height: 14px;
  opacity: .9;
  transform: rotate(0deg);
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(720deg); }
}

/* ברירת מחדל: לא להציג את כפתור iOS */
.only-ios { display: none !important; }

/* כשהדף מסומן כ-iOS, להציג את כפתור iOS ולהסתיר את הכפתור הרגיל */
.ios .only-ios { display: inline-flex !important; }
.ios .not-ios  { display: none !important; }

/* כפתור פרימיום – עגול, גרדיאנט, זוהר, ואפקט לחיצה */
.btn-premium{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:9999px; font-weight:700;
  color:#fff; text-decoration:none; border:0; cursor:pointer;
  background: linear-gradient(135deg,#7c3aed 0%, #ec4899 100%);
  box-shadow:
    0 10px 22px rgba(236,72,153,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  position:relative; overflow:hidden;
}
.btn-premium:hover{ transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(236,72,153,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-premium:active{ transform: translateY(0) scale(.98); filter:brightness(.96);
  box-shadow:
    0 6px 14px rgba(236,72,153,.30),
    inset 0 1px 0 rgba(255,255,255,.2);
}
/* הילה עדינה בלחיצה (ripple) */
.btn-premium::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.25), transparent 55%);
  opacity:0; transition: opacity .2s ease;
}
.btn-premium:active::after{ opacity:1; }

/* פוקוס נגיש למקלדת */
.btn-premium:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(124,58,237,.6),
    0 10px 22px rgba(236,72,153,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* אייקון בתוך הכפתור */
.btn-premium svg{ width:18px; height:18px; flex:0 0 auto; }

/* הצגה לפי פלטפורמה (כבר הוספת .ios על <html>) */
.only-ios { display:none !important; }
.ios .only-ios { display:inline-flex !important; }
.ios .not-ios  { display:none !important; }

/* הפחתת אנימציות – נגישות */
@media (prefers-reduced-motion: reduce){
  .btn-premium{ transition:none; }
  .btn-premium:hover, .btn-premium:active{ transform:none; }
  .btn-premium::after{ display:none; }
}

.video-card { position: relative; }
.del-x{
  position:absolute; top:.35rem; inset-inline-end:.35rem;
  width:28px; height:28px; border-radius:9999px; border:0; cursor:pointer;
  font-size:18px; line-height:28px; text-align:center;
  color:#fff; background:rgba(0,0,0,.35); backdrop-filter: blur(2px);
  transition: transform .12s ease, background .2s ease, opacity .2s ease;
}
.del-x:hover{ transform: scale(1.06); background: rgba(244,63,94,.75); } /* ורוד-אדום */
.del-x:active{ transform: scale(.96); }
.btn-danger{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:9999px; border:0; cursor:pointer;
  color:#fff; background: linear-gradient(135deg,#ef4444,#f97316);
  box-shadow: 0 8px 18px rgba(239,68,68,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-danger:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(239,68,68,.45); }
.btn-danger:active{ transform: translateY(0) scale(.98); filter:brightness(.96); }


/* ===== כפתורי מצב המשחק (עדינים) ===== */
.btn-game{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem; border-radius:14px; font-weight:700;
  color:#111827; background:#fff; border:1px solid rgba(17,24,39,.12);
  box-shadow: 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.btn-game:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.07);
  border-color: rgba(17,24,39,.18);
}
.btn-game:active{
  transform: translateY(0) scale(.98);
}
.btn-game:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(59,130,246,.35),
    0 6px 14px rgba(0,0,0,.07);
}

/* וריאציות עדינות בתוך המשחק */
.btn-game.primary{ border-color: rgba(59,130,246,.35); color:#1f2937; }
.btn-game.success{ border-color: rgba(16,185,129,.35); }
.btn-game.warn   { border-color: rgba(245,158,11,.35); }
.btn-game.danger { border-color: rgba(239,68,68,.4);   color:#991b1b; }

/* אייקון אופציונלי בכפתורים */
.btn-start-primary svg, .btn-game svg{ width:18px; height:18px; flex:0 0 auto; }

/* העדפת נגישות – הפחתת אנימציות */
@media (prefers-reduced-motion: reduce){
  .btn-start-primary, .btn-game { transition:none; }
  .btn-start-primary:hover, .btn-game:hover,
  .btn-start-primary:active, .btn-game:active { transform:none; }
  .btn-start-primary::after{ display:none; }
}

/* כפתור התחלה – רוחב לפי טקסט ומרוכז אופקית */
#btnOpenStart{
  display: block;
  width: max-content;
  margin: 0 auto;      /* מרכז אופקי */
}

/* === WNW (מי מכיר את מי) – פאנל Q&A === */
#wnwPanel { display:none; }
#wnwPanel.active { display:block; }
#wnwPanel .card {
  background:#fff; border:1px solid rgba(17,24,39,.12);
  border-radius:16px; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
#wnwPanel label { font-size:.85rem; color:#374151; }
#wnwPanel input[type="text"]{
  width:100%; border:1px solid rgba(17,24,39,.15);
  border-radius:12px; padding:.55rem .75rem; font-size:1rem;
}
#wnwPanel .row { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }
#wnwPanel .muted { font-size:.8rem; color:#6b7280; margin-top:.25rem; }

/* במוד WNW נסתיר את תצוגת הווידאו/תצוגה מקדימה אם קיימים */
.wnw-mode #previewWrap, 
.wnw-mode #previewIdle { display:none !important; }

/* רווח קטן מעל הווידאו – רק במצב רגיל (לא WNW) */
html:not(.wnw-mode) :is(#preview) {
  margin-top: 12px !important;
  display: block; /* מבטיח שה-margin יחול גם אם היה inline */
}


.preview-idle .pi-bg{
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 80% -20%, rgba(99,102,241,.20), transparent 60%),
              radial-gradient(1000px 300px at -20% 120%, rgba(236,72,153,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
  animation: floatGrad 8s ease-in-out infinite alternate;
}
@keyframes floatGrad{
  0%{ transform: translateY(0px) }
  100%{ transform: translateY(-6px) }
}

.preview-idle .pi-card{
  position:relative; z-index:1;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
  color:#111827;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.preview-idle .pi-icon{ font-size:24px; line-height:1; }
.preview-idle .pi-title{ font-weight:800; margin-top:6px; }
.preview-idle .pi-sub{ font-size:.85rem; color:#4b5563; margin-top:4px; }

/* equalizer */
.preview-idle .pi-bars{
  display:inline-flex; gap:4px; margin-top:8px;
}
.preview-idle .pi-bars span{
  width:4px; height:18px; border-radius:9999px;
  background: linear-gradient(180deg,#60a5fa,#a78bfa);
  animation: eqBeat 1.2s ease-in-out infinite;
}
.preview-idle .pi-bars span:nth-child(2){ animation-delay:.1s }
.preview-idle .pi-bars span:nth-child(3){ animation-delay:.2s }
.preview-idle .pi-bars span:nth-child(4){ animation-delay:.3s }
.preview-idle .pi-bars span:nth-child(5){ animation-delay:.4s }

@keyframes eqBeat{
  0%,100%{ transform: scaleY(.35) }
  50%{ transform: scaleY(1) }
}


/* קופסת הוידאו (מבלי להזיז את הווידאו בדום) */
#previewWrap{
  position: relative;
  width: min(100%, 520px);
  margin: 12px auto 14px;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;            /* חשוב כדי לגזור קצוות */
}

#preview{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* היה contain */
  background: transparent;     /* שלא ייראו פסים במקרה של רינדור חלקי */
}


#previewIdle{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;         /* שלא ילכוד לחיצות */
}

#previewIdle.hidden{ display:none !important; }


/* רווח קטן מהכפתורים העליונים (רק במצב רגיל) */
html:not(.wnw-mode) #previewWrap { margin-bottom: 12px; }

/* פריוויו ממורכז וקומפקטי */
#previewWrap{
  position: relative;
  width: min(100%, 520px);
  margin: 12px auto 14px;
}
#preview{
  display:block;
  width:100%;
  max-height:46vh;
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:18px;
  background:#000;
}

/* שכבת ההמתנה מעל הווידאו עצמו */
#previewIdle.preview-idle{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit; pointer-events:none;
}
#previewIdle.hidden{ display:none !important; }

/* במוד "מי מכיר את מי" להסתיר *הכול* שקשור לפריוויו */
.wnw-mode #previewWrap,
.wnw-mode #preview,
.wnw-mode #previewIdle,
.wnw-mode #recordDialog{ display:none !important; }

/* ההורה של התצוגה – לעיגון האוברליי */
#previewBox { position: relative; }

/* האוברליי של הטיימר הגדול (מציג רק מספרים) */
#bigTimer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  font-weight:800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(64px, 18vw, 140px);
  color:#111827;
  z-index:3;
  pointer-events:none;
}
#bigTimer.hidden{ display:none; }

/* אין טיימר גדול במוד מי-מכיר-את-מי */
.wnw-mode #bigTimer{ display:none !important; }