/* ============================================================
   style.css — חוברת עבודה לפסח | עיצוב משחק
   ============================================================ */

:root {
  /* ===== פלטה ידידותית לילדים ואוטיזם — פסטל רך ===== */
  --primary:        #3B82C4;   /* כחול שמיים רגוע */
  --primary-light:  #5BA8E8;
  --primary-dark:   #2563A8;
  --gold:           #F5C842;   /* צהוב חמים, לא צורח */
  --gold-light:     #FFE180;
  --gold-dark:      #D4A800;
  --success:        #5CB87A;   /* ירוק עדין */
  --success-dark:   #3E9A5F;
  --danger:         #E07878;   /* אדום-קורל רך */
  --bg:             #F2F8FF;   /* כחול-לבן בהיר מאוד */
  --card-bg:        #FFFFFF;
  --purple:         #9C87D4;   /* לבנדר עדין */
  --orange:         #F5974E;   /* כתום חם */
  --teal:           #3BBFB8;   /* תכלת-ירוק */
  --wheat:          #F5C842;
  --papyrus:        #FFF8E8;
  --terracotta:     #E08050;
  --nile:           #2563A8;
  --shadow:         0 8px 30px rgba(59,130,196,0.13);
  --shadow-hover:   0 14px 40px rgba(59,130,196,0.22);
  --radius:         22px;
  --font-main:      'Heebo', 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  --font-display:   'Secular One', 'Heebo', 'Frank Ruhl Libre', Georgia, serif;

  /* ===== מצב כהה ===== */
  --dm-bg:          #1A2536;
  --dm-card:        #243044;
  --dm-header:      #162030;
  --dm-text:        #E2EEFF;
  --dm-text-muted:  #8AAACE;
  --dm-border:      rgba(255,255,255,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-main);
  background: var(--bg);
  min-height: 100vh;
  direction: rtl;
  color: #2C4060;
  /* רקע נקי ובהיר — ללא דפוסים צורחים, ידידותי לאוטיזם */
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(91,168,232,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(59,191,184,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(245,200,66,0.06) 0%, transparent 40%);
}

/* ===== HEADER ===== */
/* ===== Splash Screen ===== */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #3A7BD5, #48C6EF);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  animation: splash-fade 0.5s ease 3.5s forwards;
}
#splash-screen.hidden { display: none; }
.splash-inner {
  position: relative;
  width: min(88vw, 420px);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.splash-img {
  width: 100%;
  display: block;
}
.splash-caption {
  position: absolute;
  bottom: 0;
  right: 0; left: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: #fff;
  font-size: clamp(13px, 3.5vw, 18px);
  font-weight: 700;
  text-align: center;
  padding: 32px 16px 18px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* לוגו מונפש בטעינה */
.splash-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.splash-logo-anim {
  height: clamp(44px, 12vw, 64px);
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0,0,0,0.25));
  animation: splash-logo-dance 1.4s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes splash-logo-dance {
  0%   { transform: translateY(0)    rotate(0deg)  scale(1);    }
  20%  { transform: translateY(-14px) rotate(-6deg) scale(1.08); }
  40%  { transform: translateY(0)    rotate(4deg)  scale(1);    }
  60%  { transform: translateY(-8px)  rotate(-3deg) scale(1.05); }
  80%  { transform: translateY(0)    rotate(2deg)  scale(1.02); }
  100% { transform: translateY(0)    rotate(0deg)  scale(1);    }
}
.splash-dots {
  display: flex;
  gap: 8px;
}
.splash-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  animation: splash-dot 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.splash-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes splash-dot {
  0%, 100% { transform: translateY(0);   opacity: 0.4; }
  50%       { transform: translateY(-7px); opacity: 1;   }
}
@keyframes splash-fade {
  to { opacity: 0; pointer-events: none; }
}

/* ===== Dev Banner ===== */
.dev-banner {
  background: #fff3cd;
  color: #7a5000;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
  border-bottom: 2px solid #f0c040;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.dev-banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e67e22;
  animation: dev-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dev-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

.site-header {
  background: linear-gradient(135deg, #3A7BD5 0%, #48C6EF 55%, #3BB5E8 80%, #2E8FCC 100%);
  color: #fff;
  padding: 16px 30px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(59,130,196,0.35), 0 1px 0 rgba(255,255,255,0.3) inset;
  border-bottom: 3px solid rgba(255,255,255,0.4);
  overflow: hidden;
}
/* Shimmer sweep across header */
.site-header::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -150%;
  width: 60%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255,255,255,0.12) 50%,
    transparent
  );
  animation: headerShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
/* Sparkle line at top */
.site-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), rgba(255,240,100,0.9), rgba(255,255,255,0.8), transparent);
  animation: shimmerLine 3s linear infinite;
  pointer-events: none;
}
.site-header h1 {
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin-bottom: 4px;
  position: relative;
  color: #fff;
}
.site-header .sub {
  font-size: clamp(11px, 1.8vw, 14px);
  color: rgba(255,255,255,0.88);
  position: relative;
  line-height: 1.4;
  max-width: 100%;
}
.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.site-header-text {
  text-align: center;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.site-header-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.site-header-logo-link:hover {
  opacity: 0.85;
  transform: scale(1.04);
}
.site-header-logo {
  height: 48px;
  width: auto;
  max-width: 120px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  object-fit: contain;
}
@media (max-width: 600px) {
  /* כפתורים עגולים קטנים — אייקון בלבד */
  .dark-mode-btn .mute-label,
  .dark-mode-btn .dm-label { display: none; }
  .dark-mode-btn {
    padding: 0;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
  }
  .dark-mode-btn .dm-icon,
  .dark-mode-btn .mute-icon { font-size: 16px; }
  .site-header-actions { gap: 5px; }
}
@media (max-width: 480px) {
  .site-header {
    padding: 8px 12px 8px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .site-header-inner { gap: 6px; }
  .site-header-logo  { height: 28px; max-width: 72px; }
  .site-header h1    { font-size: 15px; white-space: nowrap; margin-bottom: 0; }
  /* מסתירים אמוג'ים דקורטיביים בכותרת — חוסכים מקום במובייל */
  .site-header h1 span[aria-hidden="true"] { display: none; }
  /* מסתירים כותרת משנה — אין מקום במובייל */
  .site-header .sub  { display: none; }
  .dark-mode-btn     { width: 32px; height: 32px; }
}
@media (max-width: 360px) {
  .site-header-logo  { height: 24px; max-width: 60px; }
  .site-header h1    { font-size: 13px; white-space: nowrap; }
  .dark-mode-btn     { width: 30px; height: 30px; }
}

/* ===== STARS HUD (above progress bar) ===== */
.hud-bar {
  background: linear-gradient(90deg, #D8EEFF 0%, #C8E4FF 50%, #D8EEFF 100%);
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-bottom: 2px solid rgba(59,130,196,0.2);
}
.hud-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hud-star {
  font-size: 20px;
  filter: grayscale(1) brightness(0.7);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hud-star.earned {
  filter: none;
  animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hud-label {
  font-size: 12px;
  color: #4A6A8A;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hud-count {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark);
}

/* ===== PROGRESS BAR ===== */
.progress-bar-wrap {
  background: linear-gradient(90deg, #D8EEFF 0%, #C8E4FF 50%, #D8EEFF 100%);
  padding: 10px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  border-bottom: 2px solid rgba(59,130,196,0.15);
}
.progress-bar-wrap::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 4px;
  background: rgba(59,130,196,0.15);
  border-radius: 4px;
  z-index: 0;
}
.prog-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(59,130,196,0.15);
  border: 2px solid rgba(59,130,196,0.3);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.prog-dot.done {
  background: var(--success);
  border-color: var(--success-dark);
  box-shadow: 0 0 8px rgba(46,204,113,0.6);
}
.prog-dot.done::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  font-weight: 900;
}
.prog-dot.current {
  background: var(--gold-light);
  border-color: var(--gold);
  transform: scale(1.55);
  box-shadow: 0 0 12px rgba(255,224,102,0.8);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ===== NAV ===== */
.main-nav {
  background: linear-gradient(180deg, #fff 0%, #f8f4ea 100%);
  padding: 10px 12px;
  overflow-x: auto;
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  border-bottom: 3px solid #e8e0cc;
}
.nav-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 2px solid #c8d4f0;
  background: white;
  color: var(--primary);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  font-family: var(--font-main);
  transition: all 0.2s;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.nav-btn:hover { background: #eef4ff; border-color: var(--primary-light); transform: translateY(-1px); }
.nav-btn.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(30,61,143,0.4), 0 1px 0 rgba(255,255,255,0.2) inset;
  transform: translateY(-1px);
}
.nav-btn.done {
  border-color: var(--success-dark);
  color: var(--success-dark);
  background: linear-gradient(135deg, #e8faf0 0%, #d0f5e3 100%);
}
.nav-btn.done::before { content: '✓ '; }
.nav-btn.done.active { background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%); color: white; }

/* ===== MAIN ===== */
.main { max-width: 960px; margin: 0 auto; padding: 28px 14px max(70px, calc(50px + env(safe-area-inset-bottom))); }
.act  { display: none; }
.act.active { display: block; animation: actSlideIn 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); }

/* ===== ACTIVITY HEADER ===== */
.act-header {
  text-align: center;
  margin-bottom: 22px;
  position: relative;
}
.step-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: #1a0f00;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  box-shadow: 0 3px 8px rgba(240,184,0,0.35);
  text-shadow: none;
  letter-spacing: 0.5px;
}
.act-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.12);
  letter-spacing: -0.3px;
}


/* ===== CARD ===== */
.card {
  background: linear-gradient(170deg, #ffffff 0%, #fdfaf5 60%, #ffffff 100%);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  border: 1px solid rgba(212,168,83,0.15);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--primary), var(--purple), var(--orange), var(--gold), var(--success), var(--teal));
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ===== SCORE BAR ===== */
.score-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #eef4ff 0%, #e8f2ff 100%);
  border: 2px solid #c0d4f5;
  border-radius: 14px;
  padding: 10px 18px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(30,61,143,0.1), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}
.score-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.7);
}
.score-label { color: #445; font-size: 14px; font-weight: 700; }
.score-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  background: white;
  padding: 3px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(30,61,143,0.15);
  border: 2px solid #c8d8f8;
}

/* ===== BUTTONS ===== */
.btn {
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
  font-family: var(--font-main);
  transition: all 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
  margin: 4px;
  position: relative;
  letter-spacing: 0.3px;
  min-height: 50px;
}
.btn:active { transform: translateY(2px) scale(0.97) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  color: white;
  box-shadow: 0 5px 0 var(--primary-dark), 0 8px 16px rgba(30,61,143,0.35);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--primary-dark), 0 12px 24px rgba(30,61,143,0.4);
}
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-dark), 0 4px 8px rgba(30,61,143,0.3); }

.btn-success {
  background: linear-gradient(135deg, #3ee07a 0%, var(--success) 60%, var(--success-dark) 100%);
  color: white;
  box-shadow: 0 5px 0 var(--success-dark), 0 8px 16px rgba(46,204,113,0.35);
}
.btn-success:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--success-dark), 0 12px 24px rgba(46,204,113,0.4);
}

.btn-reset {
  background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
  color: white;
  box-shadow: 0 4px 0 #4a5568, 0 6px 14px rgba(0,0,0,0.2);
}
.btn-reset:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4a5568, 0 10px 20px rgba(0,0,0,0.25);
}

.btn-check {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  color: #1a0f00;
  box-shadow: 0 5px 0 var(--gold-dark), 0 8px 16px rgba(240,184,0,0.35);
  font-weight: 900;
}
.btn-check:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--gold-dark), 0 12px 24px rgba(240,184,0,0.4);
}

.next-actions { text-align: center; margin-top: 24px; }

/* ===== MATCHING GAME ===== */
.matching-outer   { position: relative; }
.matching-svg     { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.matching-grid    { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 10px; align-items: start; }
.matching-col     { display: flex; flex-direction: column; gap: 9px; }
.match-item {
  padding: 13px 10px;
  border: 3px solid #dde8f8;
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.4;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  background: white;
  user-select: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.match-item:hover:not(.matched) {
  border-color: var(--primary-light);
  background: #f0f5ff;
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 6px 18px rgba(30,61,143,0.15);
}
.match-item.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fffaeb 0%, #fff3cc 100%);
  box-shadow: 0 0 0 4px rgba(240,184,0,0.2), 0 6px 16px rgba(240,184,0,0.2);
  transform: scale(1.05);
}
.match-item.matched {
  cursor: default;
  animation: matchPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.match-item.wrong-shake { animation: shake 0.4s; }
.match-mid     { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.mid-dot       { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #ccc; transition: all 0.3s; }
.mid-dot.done  { color: var(--success); animation: matchPop 0.4s; }

/* ===== CHAMETZ SCENE ===== */
.chametz-scene {
  background: linear-gradient(180deg, #c8e8ff 0%, #a0d8ff 30%, #90ee90 30%, #7bc87b 55%, #c4a870 55%);
  border-radius: 16px;
  min-height: 390px;
  position: relative;
  overflow: hidden;
  border: 3px solid #b0ccf0;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.08);
}
.scene-shelf { position: absolute; background: linear-gradient(90deg, #7a3810, #a0531a, #7a3810); height: 15px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.2) inset; }
.chametz-item {
  position: absolute;
  font-size: 40px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  line-height: 1;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.25));
}
.chametz-item:hover { transform: scale(1.25) rotate(-5deg); filter: drop-shadow(3px 5px 8px rgba(0,0,0,0.3)); }
.chametz-item.found {
  transform: scale(0) !important;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.chametz-hint {
  font-size: 12px;
  color: #556;
  text-align: center;
  margin-top: 10px;
  background: linear-gradient(135deg, #f4f8ff, #eef4ff);
  border-radius: 10px;
  padding: 9px;
  border: 1px solid #d0e4ff;
  font-weight: 600;
}

/* ===== CANVAS DRAWING ===== */
.canvas-wrap { text-align: center; }
.draw-canvas {
  border: 3px solid var(--primary);
  border-radius: 16px;
  cursor: crosshair;
  max-width: 100%;
  touch-action: none;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}
.draw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  align-items: center;
  background: #f4f8ff;
  border-radius: 14px;
  padding: 10px 14px;
  border: 1px solid #d8e8ff;
}
.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid white;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  padding: 0;
  display: inline-block;
}
.color-swatch:hover, .color-swatch.active {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--primary), 0 5px 12px rgba(0,0,0,0.25);
}
.brush-btns { display: flex; gap: 6px; align-items: center; }
.brush-btn {
  border: 2px solid var(--primary);
  background: white;
  color: var(--primary);
  border-radius: 12px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 12px;
  transition: all 0.2s;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.brush-btn:hover, .brush-btn.active {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(30,61,143,0.3);
}

/* ===== SEDER TABLE ===== */
.seder-layout { display: grid; grid-template-columns: 130px 1fr; gap: 18px; }
.items-bank   { display: flex; flex-direction: column; gap: 9px; }
.bank-item {
  background: linear-gradient(135deg, #fff8e0 0%, #fef0c0 100%);
  border: 2px dashed var(--gold);
  border-radius: 13px;
  padding: 9px 7px;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  box-shadow: 0 3px 10px rgba(240,184,0,0.15);
}
.bank-item:hover:not(.used)  {
  background: linear-gradient(135deg, #fef0b0, #fde880);
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 18px rgba(240,184,0,0.3);
}
.bank-item.selected-bank     {
  outline: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(240,184,0,0.2), 0 6px 18px rgba(240,184,0,0.3);
  border-style: solid;
}
.bank-item.used              { opacity: 0.2; cursor: not-allowed; transform: none; }
.bank-item .item-name        { font-size: 10px; color: #665500; display: block; margin-top: 3px; font-weight: 700; }
.table-scene {
  background: radial-gradient(ellipse at center, #7a4415 0%, #3d1e06 100%);
  border-radius: var(--radius);
  min-height: 320px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  border: 3px solid #5a3010;
}
.table-cloth  {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,248,220,0.22), rgba(255,248,220,0.06));
  border: 2px solid rgba(255,215,0,0.25);
}
.drop-spot {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 3px dashed rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  z-index: 2;
  background: rgba(255,255,255,0.05);
}
.drop-spot:hover     { border-color: rgba(255,215,0,0.8); background: rgba(255,215,0,0.12); transform: scale(1.08); }
.drop-spot.drag-over { border-color: gold; background: rgba(255,215,0,0.2); transform: scale(1.12); }
.drop-spot.placed    { font-size: 34px; border-style: solid; border-color: rgba(255,215,0,0.7); color: white; background: rgba(0,0,0,0.2); animation: matchPop 0.4s; }
.drop-spot.placed .name { display: none; }

/* ===== FOUR CUPS ===== */
.trays-row  { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.tray-box {
  background: linear-gradient(145deg, #8a6a10, #c8981a, #8a6a10);
  border-radius: 18px;
  padding: 16px 12px;
  min-width: 128px;
  text-align: center;
  box-shadow: 0 6px 0 #5a4008, 0 10px 24px rgba(0,0,0,0.3);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.tray-box:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #5a4008, 0 14px 28px rgba(0,0,0,0.35); }
.tray-box.selected-tray {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 4px rgba(255,224,102,0.5), 0 6px 0 #5a4008, 0 10px 24px rgba(0,0,0,0.3);
  transform: translateY(-3px);
}
.tray-label    { color: #fff8e0; font-size: 13px; margin-bottom: 8px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.cups-display  { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 48px; padding: 3px 0; }
.cup-emoji     { font-size: 26px; animation: cupPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tray-counter  { color: white; font-size: 16px; font-weight: 900; margin-top: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.tray-status   { font-size: 18px; height: 22px; }
.cup-source-area { text-align: center; margin-top: 24px; }
.cup-source-btn  {
  font-size: 52px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  background: none;
  border: none;
  font-family: var(--font-main);
  line-height: 1;
  padding: 4px;
  border-radius: 12px;
}
.cup-source-btn:hover { transform: scale(1.25) rotate(10deg); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3)); }
.cup-instruction { font-size: 14px; color: #556; margin-bottom: 6px; font-weight: 600; }

/* ===== SEDER PLATE (act 7) ===== */
.plates-row    { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.plate-puzzle  {
  text-align: center;
  background: linear-gradient(135deg, #fafcff, #f4f8ff);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  min-width: 178px;
  border: 1px solid #e0e8f8;
}
.seder-plate-visual {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fefef8, #f0e4cc);
  border: 8px solid #c8a06e;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(2,1fr);
  place-items: center;
  padding: 8px;
  gap: 4px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.18);
}
.plate-cell        { font-size: 26px; line-height: 1; transition: all 0.3s; }
.plate-cell.missing {
  width: 38px;
  height: 38px;
  border: 3px dashed #bbb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ccc;
  background: rgba(255,255,255,0.7);
  animation: pulse-dot 1.5s ease-in-out infinite;
}
.plate-cell.filled { animation: matchPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.plate-label       { font-size: 12px; color: #778; margin-bottom: 10px; font-weight: 700; }
.plate-options     { display: flex; gap: 8px; justify-content: center; }
.plate-opt {
  font-size: 30px;
  width: 52px;
  height: 52px;
  border: 3px solid #e0e0e0;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08), 0 3px 0 #d0d0d0;
}
.plate-opt:hover:not(.answered) {
  border-color: var(--primary);
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 6px 16px rgba(30,61,143,0.2), 0 6px 0 var(--primary);
}
.plate-opt.correct { border-color: var(--success); background: linear-gradient(135deg, #d5f5e3, #a8eccc); box-shadow: 0 3px 0 var(--success-dark), 0 6px 16px rgba(46,204,113,0.3); }
.plate-opt.wrong   { border-color: var(--danger); background: #fde8e8; animation: shake 0.4s; }

/* ===== ODD ONE OUT (act 8) ===== */
.odd-row {
  background: white;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.07);
  border: 1px solid #eef0f8;
  transition: all 0.3s;
}
.odd-row-label      { font-size: 13px; color: #778; margin-bottom: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.odd-items          { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.odd-item           {
  font-size: 44px;
  padding: 12px;
  border: 3px solid #eee;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: white;
  user-select: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07), 0 3px 0 #ddd;
}
.odd-item:hover:not(.answered) {
  border-color: var(--primary);
  transform: scale(1.15) translateY(-4px);
  box-shadow: 0 8px 20px rgba(30,61,143,0.2), 0 6px 0 var(--primary);
}
.odd-item.correct   {
  border-color: var(--success);
  background: linear-gradient(135deg, #d5f5e3, #b8f0d4);
  transform: scale(1.15);
  box-shadow: 0 6px 0 var(--success-dark), 0 10px 20px rgba(46,204,113,0.3);
}
.odd-item.wrong     { border-color: var(--danger); background: #fde8e8; animation: shake 0.4s; }
.odd-item.dimmed    { opacity: 0.3; transform: scale(0.9); }
.odd-explanation    { font-size: 14px; color: var(--success-dark); margin-top: 10px; font-weight: 700; display: none; background: #e8faf0; padding: 10px 14px; border-radius: 10px; border: 1px solid #b8ecd4; }

/* ===== MEMORY GAME (act 9) ===== */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 490px;
  margin: 0 auto;
}
.mem-card    { aspect-ratio: 1; cursor: pointer; position: relative; border-radius: 14px; user-select: none; }
.mem-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.15);
}
.mem-card:hover:not(.flipped):not(.matched) .mem-card-inner { transform: translateY(-4px); }
.mem-card.flipped .mem-card-inner { transform: rotateY(180deg); }
.mem-face, .mem-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mem-face    {
  background: linear-gradient(135deg, #4A9BD5 0%, #5BBFE8 50%, #3A8FCC 100%);
  color: rgba(255,255,255,0.5);
  font-size: 28px;
  border: 3px solid rgba(255,255,255,0.3);
}
.mem-face::after {
  content: '⭐';
  font-size: 28px;
  opacity: 0.6;
}
.mem-back    { background: linear-gradient(135deg, #fefefe, #f8f4e8); border: 3px solid #ddd; font-size: 40px; transform: rotateY(180deg); }
.mem-card.matched .mem-back {
  border-color: var(--success);
  background: linear-gradient(135deg, #e8faf0, #d0f5e3);
  box-shadow: 0 0 0 3px rgba(46,204,113,0.3);
  animation: matchPop 0.4s;
}

/* ===== SORT (act 10) ===== */
.sort-current-item  {
  text-align: center;
  font-size: 88px;
  margin: 18px 0 12px;
  line-height: 1;
  animation: matchPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}
.sort-item-name     {
  text-align: center;
  font-size: 22px;
  color: var(--primary);
  font-weight: 900;
  margin-bottom: 24px;
}
.sort-bins          { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sort-bin {
  border-radius: 20px;
  padding: 22px 16px;
  min-height: 110px;
  border: 4px solid;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.1);
  font-family: var(--font-main);
}
.sort-bin[data-type="chametz"]     { border-color: var(--danger); background: linear-gradient(135deg, #fff5f5, #ffe0e0); }
.sort-bin[data-type="not"]         { border-color: var(--success); background: linear-gradient(135deg, #f0fff4, #d5f5e3); }
.sort-bin:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 10px 0 rgba(0,0,0,0.15), 0 16px 28px rgba(0,0,0,0.15);
}
.sort-bin-label  { font-size: 20px; font-weight: 900; }
.sort-bin-emoji  { font-size: 34px; }
.sort-bin-count  { font-size: 13px; color: #666; font-weight: 600; }
.sort-result     { text-align: center; font-size: 24px; margin-top: 12px; font-weight: 900; min-height: 30px; }

/* ===== ORDER (act 11) ===== */
.order-list { display: flex; flex-direction: column; gap: 9px; max-width: 440px; margin: 0 auto; }
.order-step {
  background: white;
  border: 3px solid #dde0f0;
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  user-select: none;
  box-shadow: 0 3px 0 #c8ccdd, 0 6px 14px rgba(0,0,0,0.07);
}
.order-step:hover:not(.locked)   {
  border-color: var(--primary);
  background: #f4f8ff;
  transform: translateX(-3px);
  box-shadow: 4px 3px 0 var(--primary), 6px 6px 14px rgba(30,61,143,0.15);
}
.order-step.selected-order       {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fffaeb, #fff3cc);
  box-shadow: 0 0 0 4px rgba(240,184,0,0.2), 0 6px 16px rgba(240,184,0,0.2);
}
.order-step.correct-order        { border-color: var(--success); background: linear-gradient(135deg, #e8faf0, #d5f5e3); cursor: default; box-shadow: 0 3px 0 var(--success-dark); }
.order-step.wrong-order          { border-color: var(--danger); background: #fef0f0; animation: shake 0.4s; }
.order-step.locked               { cursor: default; }
.step-pos {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(30,61,143,0.3);
}
.step-emoji { font-size: 28px; flex-shrink: 0; }
.step-info  { display: flex; flex-direction: column; }
.step-name  { font-weight: 800; font-size: 16px; }
.step-desc  { font-size: 12px; color: #888; font-weight: 600; }
.order-hint {
  text-align: center;
  font-size: 13px;
  color: #778;
  margin-top: 14px;
  background: linear-gradient(135deg, #f4f8ff, #eef4ff);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d0e0f8;
  font-weight: 600;
}

/* ===== COUNTING (act 12) ===== */
.count-items-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  font-size: 52px;
  margin: 18px 0 12px;
  min-height: 75px;
  line-height: 1;
}
.count-items-display span {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
  transition: transform 0.2s;
}
.count-items-display span:hover { transform: scale(1.2); }
.count-question { text-align: center; font-size: 24px; color: var(--primary); font-weight: 900; margin: 14px 0; }
.count-options  { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.count-opt {
  font-size: 28px;
  font-weight: 900;
  width: 74px;
  height: 74px;
  border: 4px solid #dde0f0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: white;
  color: var(--primary);
  box-shadow: 0 5px 0 #c0c8dc, 0 8px 16px rgba(0,0,0,0.1);
}
.count-opt:hover              {
  border-color: var(--primary);
  transform: scale(1.15) translateY(-5px);
  box-shadow: 0 10px 0 var(--primary-dark), 0 14px 24px rgba(30,61,143,0.25);
}
.count-opt.correct            {
  border-color: var(--success);
  background: linear-gradient(135deg, #d5f5e3, #a8eccc);
  box-shadow: 0 5px 0 var(--success-dark), 0 8px 18px rgba(46,204,113,0.3);
  animation: matchPop 0.4s;
}
.count-opt.wrong              { border-color: var(--danger); background: #fde8e8; animation: shake 0.4s; }
.count-progress-label { text-align: center; font-size: 14px; color: #778; margin-top: 14px; font-weight: 700; }

/* ===== FILL IN BLANK (act 13) ===== */
.sentence-box {
  background: linear-gradient(135deg, #f0f6ff, #e8f2ff);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 22px;
  text-align: center;
  line-height: 2.4;
  margin-bottom: 20px;
  border: 2px solid #c8dcf8;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(30,61,143,0.08);
}
.blank-box {
  display: inline-block;
  min-width: 100px;
  height: 38px;
  border-bottom: 4px solid var(--primary);
  margin: 0 8px;
  vertical-align: middle;
  background: rgba(255,255,255,0.8);
  border-radius: 8px 8px 0 0;
  padding: 0 12px;
  font-size: 18px;
  color: var(--primary);
  font-weight: 900;
  line-height: 38px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 8px rgba(30,61,143,0.1);
}
.blank-box.filled { background: #d5f5e3; border-bottom-color: var(--success); animation: matchPop 0.4s; }
.word-bank        { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.word-opt {
  background: white;
  border: 3px solid var(--primary);
  border-radius: 24px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 16px;
  color: var(--primary);
  font-weight: 800;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 4px 0 var(--primary-dark), 0 6px 14px rgba(30,61,143,0.2);
}
.word-opt:hover:not(.used)  {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--primary-dark), 0 10px 20px rgba(30,61,143,0.3);
}
.word-opt.used              { opacity: 0.22; pointer-events: none; }
.word-opt.wrong-word        { border-color: var(--danger); animation: shake 0.4s; }
.fill-progress-label        { text-align: center; font-size: 14px; color: #778; margin-top: 14px; font-weight: 700; }

/* ===== MAZE (act 14) ===== */
.maze-wrapper    { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.maze-outer      { position: relative; }
.maze-grid-wrap  {
  display: grid;
  border: 5px solid var(--primary);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 0 var(--primary-dark), 0 12px 28px rgba(0,0,0,0.25);
  direction: ltr;
}
.mz-cell         { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.mz-cell.wall    { background: linear-gradient(135deg, #4A6A8A, #2E4A6A); }
.mz-cell.path    { background: #f9f5e8; }
.mz-cell.start   { background: linear-gradient(135deg, #d5f5e3, #a8eccc); }
.mz-cell.end     { background: linear-gradient(135deg, #fff9c4, #ffe066); animation: pulse-dot 1.5s ease-in-out infinite; }
.mz-cell.player  { background: linear-gradient(135deg, #d0ebff, #a8d8ff); }
.maze-d-pad      { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); gap: 6px; place-items: center; }
.mz-btn {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 3px solid var(--primary);
  background: white;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 0 var(--primary-dark), 0 8px 16px rgba(0,0,0,0.15);
  font-weight: 900;
}
.mz-btn:hover  { background: #eef4ff; transform: translateY(-2px); box-shadow: 0 7px 0 var(--primary-dark), 0 12px 20px rgba(30,61,143,0.25); }
.mz-btn:active { background: var(--primary); color: white; transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }
.maze-info { font-size: 13px; color: #778; text-align: center; font-weight: 600; }

/* ===== BUILD PLATE (act 15) ===== */
.build-plate-layout { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: start; }
.plate-bank         { display: flex; flex-direction: column; gap: 10px; }
.pbk-item {
  background: linear-gradient(135deg, #fff8e0 0%, #fef0c0 100%);
  border: 2px dashed var(--gold);
  border-radius: 13px;
  padding: 9px 7px;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  box-shadow: 0 3px 10px rgba(240,184,0,0.15);
}
.pbk-item:hover:not(.used)    { background: linear-gradient(135deg, #fef0b0, #fde880); transform: scale(1.08) translateY(-2px); box-shadow: 0 6px 18px rgba(240,184,0,0.3); }
.pbk-item.selected-pbk        { outline: 3px solid var(--gold); box-shadow: 0 0 0 6px rgba(240,184,0,0.2); border-style: solid; }
.pbk-item.used                { opacity: 0.2; cursor: not-allowed; }
.pbk-item .pbk-name           { font-size: 10px; color: #665500; display: block; margin-top: 3px; font-weight: 700; }
.plate-visual-large {
  width: 268px;
  height: 268px;
  border-radius: 50%;
  margin: 0 auto;
  background: radial-gradient(circle at 40% 38%, #fefef8, #f0e4cc);
  border: 12px solid #c8a06e;
  position: relative;
  box-shadow: inset 0 4px 16px rgba(0,0,0,0.12), 0 8px 28px rgba(0,0,0,0.25), 0 0 0 3px #a06030;
}
.plate-drop {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px dashed #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: rgba(255,255,255,0.55);
}
.plate-drop:hover   { border-color: var(--primary); background: rgba(255,255,255,0.85); transform: scale(1.1); }
.plate-drop.placed  { font-size: 30px; border-style: solid; border-color: #c8a06e; background: rgba(255,255,255,0.8); animation: matchPop 0.4s; }
.plate-drop.placed .pd-name { display: none; }

/* ===== PUZZLE (act 16) ===== */
.puzzle-wrapper  { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 580px; margin: 0 auto; }
.puzzle-section-label { text-align: center; font-size: 13px; color: #778; margin-bottom: 10px; font-weight: 800; letter-spacing: 0.5px; }
.puzzle-grid, .puzzle-ref { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pz-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 3px solid #dde0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  background: white;
  user-select: none;
  box-shadow: 0 4px 0 #c8ccdd, 0 6px 14px rgba(0,0,0,0.08);
}
.pz-tile:hover:not(.correct-tile) {
  border-color: var(--primary);
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 7px 0 var(--primary-dark), 0 10px 20px rgba(30,61,143,0.2);
}
.pz-tile.sel-tile   {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fffaeb, #fff3cc);
  box-shadow: 0 0 0 4px rgba(240,184,0,0.25), 0 4px 0 var(--gold-dark);
  transform: scale(1.1);
}
.pz-tile.correct-tile {
  border-color: var(--success);
  background: linear-gradient(135deg, #d5f5e3, #a8eccc);
  cursor: default;
  box-shadow: 0 4px 0 var(--success-dark), 0 6px 14px rgba(46,204,113,0.25);
  animation: matchPop 0.4s;
}
.pz-ref-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(135deg, #f4f8ff, #eef4ff);
  border: 2px solid #d0e4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.7;
}

/* ===== QUIZ (act 17) ===== */
.quiz-q-box {
  background: linear-gradient(135deg, #f0f6ff 0%, #e4f0ff 100%);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 21px;
  text-align: center;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 22px;
  border: 2px solid #c0d4f8;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(30,61,143,0.08);
}
.quiz-opts { display: flex; flex-direction: column; gap: 10px; max-width: 390px; margin: 0 auto; }
.quiz-opt {
  background: white;
  border: 3px solid #dde0f0;
  border-radius: 16px;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 17px;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  font-family: var(--font-main);
  font-weight: 700;
  box-shadow: 0 4px 0 #c8ccdd, 0 6px 14px rgba(0,0,0,0.07);
}
.quiz-opt:hover:not(.answered) {
  border-color: var(--primary);
  background: #f0f6ff;
  transform: translateX(-4px);
  box-shadow: 6px 4px 0 var(--primary), 8px 8px 16px rgba(30,61,143,0.15);
}
.quiz-opt.correct    {
  border-color: var(--success);
  background: linear-gradient(135deg, #d5f5e3, #a8eccc);
  box-shadow: 0 4px 0 var(--success-dark), 0 8px 18px rgba(46,204,113,0.25);
}
.quiz-opt.wrong      { border-color: var(--danger); background: #fde8e8; animation: shake 0.4s; }
.quiz-explanation    {
  text-align: center;
  font-size: 14px;
  color: var(--success-dark);
  margin-top: 12px;
  font-weight: 700;
  display: none;
  background: linear-gradient(135deg, #e8faf0, #d0f5e3);
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid #a8e0c0;
}
.quiz-progress-label { text-align: center; font-size: 14px; color: #778; margin-top: 14px; font-weight: 700; }

/* ===== COMPLETION ===== */
#act-complete      { text-align: center; padding: 52px 20px; }
.complete-emoji    {
  font-size: 68px;
  margin-bottom: 18px;
  display: block;
  animation: float 2.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(240,184,0,0.4));
}
.complete-title    { font-size: 32px; color: var(--primary); margin-bottom: 14px; font-weight: 900; }
.complete-msg      { font-size: 18px; color: #445; margin-bottom: 30px; font-weight: 600; }

/* ===== CELEBRATION OVERLAY ===== */
#celebration {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
#celebration.show { display: flex; }
.cel-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f4ff 100%);
  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  animation: bounceIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 3px var(--gold), 0 0 30px rgba(240,184,0,0.3);
  position: relative;
  overflow: hidden;
}
.cel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
}
.cel-emoji  { font-size: 70px; display: block; margin-bottom: 14px; animation: float 2s ease-in-out infinite; }
.cel-title  { font-size: 30px; color: var(--primary); margin-bottom: 8px; font-weight: 900; }
.cel-text   { color: #445; margin-bottom: 22px; font-size: 16px; font-weight: 600; }

/* ===== CONFETTI ===== */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(-10px) rotate(0deg) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.5); }
}

/* ===== ANIMATIONS ===== */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
@keyframes matchPop {
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  70%{transform:scale(0.95)}
  100%{transform:scale(1)}
}
@keyframes bounceIn {
  0%{transform:scale(0.3) rotate(-5deg);opacity:0}
  55%{transform:scale(1.08) rotate(1deg)}
  75%{transform:scale(0.97)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}
@keyframes cupPop {
  0%{transform:scale(0) rotate(-30deg)}
  60%{transform:scale(1.2)}
  100%{transform:scale(1)}
}
@keyframes floatUp {
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-65px) scale(1.3)}
}
@keyframes pulse-dot {
  0%,100%{transform:scale(1.55);box-shadow:0 0 12px rgba(255,224,102,0.8)}
  50%{transform:scale(1.75);box-shadow:0 0 20px rgba(255,224,102,1)}
}
@keyframes starPop {
  0%{transform:scale(0) rotate(-45deg)}
  60%{transform:scale(1.35) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes actSlideIn {
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ===== DIFFICULTY VISUAL ADJUSTMENTS ===== */
/* כשמשחק נטען ברמה קלה — גופן גדול ואלמנטים גדולים */
body.difficulty-easy .match-item   { font-size: 26px; padding: 16px 12px; }
body.difficulty-easy .odd-item     { font-size: 52px; padding: 16px; }
body.difficulty-easy .count-opt    { width: 88px; height: 88px; font-size: 34px; }
body.difficulty-easy .count-items-display { font-size: 64px; }
body.difficulty-easy .chametz-item { font-size: 52px; }
body.difficulty-easy .mem-back     { font-size: 52px; }
body.difficulty-easy .sort-current-item { font-size: 110px; }
body.difficulty-easy .sort-bin     { min-height: 130px; }
body.difficulty-easy .sort-bin-emoji { font-size: 44px; }
body.difficulty-easy .sort-bin-label { font-size: 24px; }

.main-nav { display: none !important; }
.hud-bar  { display: none !important; }

/* ===== LOBBY SCREEN ===== */
.lobby-screen {
  min-height: calc(100vh - 80px);
  display: block;
  padding: 0 0 60px;
  position: relative;
  /* overflow:hidden הוסר — הפרטיקלים כבר מוגבלים בתוך lobby-particles */
}
.lobby-inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 36px 16px 0;
}
.lobby-title-wrap {
  margin-bottom: 44px;
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 28px 36px 20px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(72,198,239,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(245,200,66,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 80%, rgba(92,184,122,0.12) 0%, transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,0.72) 0%, rgba(240,248,255,0.85) 100%);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.9);
  box-shadow:
    0 8px 40px rgba(59,123,213,0.12),
    0 2px 8px rgba(59,123,213,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95);
  overflow: hidden;
}

/* ניצוצות פינות */
.lobby-title-wrap::before,
.lobby-title-wrap::after {
  content: '✦';
  position: absolute;
  font-size: 18px;
  opacity: 0.35;
  animation: title-wrap-sparkle 3s ease-in-out infinite alternate;
}
.lobby-title-wrap::before { top: 12px;  right: 18px; color: #F5C842; animation-delay: 0s;   }
.lobby-title-wrap::after  { bottom: 12px; left: 18px; color: #48C6EF; animation-delay: 1.5s; }

@keyframes title-wrap-sparkle {
  0%   { opacity: 0.2; transform: scale(0.8) rotate(-10deg); }
  100% { opacity: 0.6; transform: scale(1.2) rotate(10deg);  }
}
.lobby-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 900;
  background: linear-gradient(
    120deg,
    #2563b0 0%,
    #48C6EF 18%,
    #5CB87A 34%,
    #F5C842 50%,
    #F5974E 66%,
    #e05b8a 78%,
    #48C6EF 90%,
    #2563b0 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  animation: lobby-title-shimmer 4s linear infinite;
  filter: drop-shadow(0 3px 12px rgba(59,130,196,0.25));
}
@keyframes lobby-title-shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 220% center; }
}
.lobby-sub {
  font-size: 17px;
  color: #3A6090;
  font-weight: 600;
  margin-bottom: 0;
  letter-spacing: 0.3px;
  opacity: 0.9;
}

/* ===== LOBBY ORNAMENT ===== */
.lobby-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 340px;
}
.ornament-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}
.ornament-icon {
  color: var(--gold-dark);
  font-size: 16px;
  text-shadow: 0 0 12px rgba(240,184,0,0.6);
  animation: float 3s ease-in-out infinite;
}
.ornament-icon:nth-child(3) { animation-delay: 0.4s; font-size: 20px; }
.ornament-icon:nth-child(4) { animation-delay: 0.8s; }

/* ===== Category cards (entry screen) ===== */
.category-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 700px;
  margin: 0 auto;
}
.category-card {
  border-radius: 32px;
  padding: 54px 28px 40px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  user-select: none;
  border: 2px solid rgba(255,255,255,0.35);
}
.category-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.22), transparent 70%);
  pointer-events: none;
}
.category-card:hover {
  transform: translateY(-8px) scale(1.03);
}
.category-card:active {
  transform: translateY(-2px) scale(1.01);
}
.category-pesach {
  background: linear-gradient(145deg, #8e44ad 0%, #6c3483 50%, #5b2c6f 100%);
  box-shadow: 0 10px 0 rgba(0,0,0,0.15), 0 20px 50px rgba(142,68,173,0.4);
  color: #fff;
}
.category-pesach:hover {
  box-shadow: 0 16px 0 rgba(0,0,0,0.12), 0 28px 65px rgba(142,68,173,0.55);
}
.category-yam-suf {
  background: linear-gradient(145deg, #1a8a9a 0%, #148a8a 50%, #0e6e7a 100%);
  box-shadow: 0 10px 0 rgba(0,0,0,0.15), 0 20px 50px rgba(26,138,154,0.4);
  color: #fff;
}
.category-yam-suf:hover {
  box-shadow: 0 16px 0 rgba(0,0,0,0.12), 0 28px 65px rgba(26,138,154,0.55);
}
.category-card-icon {
  font-size: 72px;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  animation: age-card-float 3s ease-in-out infinite;
}
.category-card-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.category-card-sub {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom: 12px;
}
.category-card-badge {
  font-size: 14px;
  opacity: 0.75;
  font-weight: 600;
}

/* lobby topbar — identical pattern to gs-topbar */
.lobby-topbar {
  background: linear-gradient(135deg, #3A7BD5, #48C6EF);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(59,130,196,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.lobby-topbar-title {
  font-family: var(--font-display);
  flex: 1;
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  text-align: center;
}

@media (max-width: 600px) {
  .category-cards-grid { grid-template-columns: 1fr; gap: 18px; }
  .category-card { padding: 44px 20px 30px; border-radius: 24px; }
  .category-card-icon { font-size: 56px; }
  .category-card-title { font-size: 28px; }
}

.age-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.age-card {
  border-radius: 28px;
  padding: 40px 24px 32px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  position: relative;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 0 rgba(0,0,0,0.18), 0 16px 36px rgba(0,0,0,0.15);
  text-align: center;
}
/* Radial top-light inner glow */
.age-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
/* Bottom shimmer line */
.age-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 2px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  pointer-events: none;
}
.age-card:hover {
  transform: translateY(-10px) scale(1.04);
  border-color: rgba(255,255,255,0.35);
}
.age-card:active {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
}
.age-card-0 {
  background: linear-gradient(145deg, #6BCF7F 0%, #4DB868 50%, #39A055 100%);
}
.age-card-0:hover {
  box-shadow: 0 18px 0 rgba(0,0,0,0.1), 0 28px 60px rgba(75,184,104,0.45), 0 0 60px rgba(75,184,104,0.2);
}
.age-card-1 {
  background: linear-gradient(145deg, #55A8E8 0%, #3A8FD5 50%, #2570B8 100%);
}
.age-card-1:hover {
  box-shadow: 0 18px 0 rgba(0,0,0,0.1), 0 28px 60px rgba(58,143,213,0.45), 0 0 60px rgba(58,143,213,0.2);
}
.age-card-2 {
  background: linear-gradient(145deg, #B89AE8 0%, #9C80D8 50%, #7A60BE 100%);
}
.age-card-2:hover {
  box-shadow: 0 18px 0 rgba(0,0,0,0.1), 0 28px 60px rgba(156,128,216,0.45), 0 0 60px rgba(156,128,216,0.2);
}
.age-card-3 {
  background: linear-gradient(145deg, #3DC1D3 0%, #1a8a9a 50%, #0e6e7a 100%);
}
.age-card-3:hover {
  box-shadow: 0 18px 0 rgba(0,0,0,0.1), 0 28px 60px rgba(26,138,154,0.45), 0 0 60px rgba(26,138,154,0.2);
}

.age-card-icon {
  font-size: 72px;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22));
  animation: float 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.age-card-1 .age-card-icon { animation-delay: 0.6s; }
.age-card-2 .age-card-icon { animation-delay: 1.2s; }
.age-card-3 .age-card-icon { animation-delay: 1.8s; }

.age-card-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.age-card-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-bottom: 16px;
}
.age-card-badge {
  display: inline-block;
  background: rgba(255,255,255,0.22);
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.age-card-stars {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
}

/* ===== LOBBY FEATURED QUIZ CARD ===== */
.lobby-featured-quiz {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 30px;
  background: linear-gradient(135deg, #c9a227 0%, #e8b84b 45%, #c9a227 100%);
  border-radius: 22px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 16px 40px rgba(201,162,39,0.4);
  transition: transform 0.18s, box-shadow 0.18s;
  color: #fff;
  text-align: right;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.lobby-featured-quiz::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.lobby-featured-quiz:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 0 rgba(0,0,0,0.12), 0 24px 55px rgba(201,162,39,0.55);
}
.lobby-featured-quiz:active {
  transform: translateY(-1px) scale(1.005);
}
.lfq-new-badge {
  position: absolute;
  top: 10px;
  left: 14px;
  background: linear-gradient(135deg, #ff4e7a, #ff7043);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255,78,122,0.5);
  animation: lfq-badge-pulse 2s ease-in-out infinite;
  font-family: var(--font-main);
  z-index: 2;
}
@keyframes lfq-badge-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 8px rgba(255,78,122,0.5); }
  50%       { transform: scale(1.08); box-shadow: 0 4px 16px rgba(255,78,122,0.75); }
}

/* wrapper שחותך את הסרט בפינה ימין-עליון */
.cat-ribbon-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-top-right-radius: 30px;
  pointer-events: none;
  z-index: 2;
}
/* badge בולט על כרטיס קטגוריה — סרט אלכסוני מושלם */
.category-card .lfq-new-badge {
  position: absolute;
  top: 20px;
  right: -26px;
  left: auto;
  width: 120px;
  text-align: center;
  transform: rotate(45deg);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 0;
  border-radius: 0;
  letter-spacing: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #ff2d6b 22%,
    #ff6a00 78%,
    transparent 100%
  );
  box-shadow: none;
  border: none;
  animation: cat-badge-pop 2.4s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes cat-badge-pop {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50%       { transform: rotate(45deg) scale(1.06); }
}
.lfq-icon {
  font-size: 48px;
  flex-shrink: 0;
}
.lfq-body { flex: 1; }
.lfq-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}
.lfq-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-top: 4px;
}
.lfq-arrow {
  font-size: 28px;
  font-weight: 900;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ===== QUIZ 46 STAGE/LEVEL BADGE ===== */
.quiz46-badge {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.badge-stage {
  background: #2c3e50;
  color: #f0c040;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}
.badge-level {
  background: #f4f0e8;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

/* ===== QUIZ 46 SOURCE LINK ===== */
.quiz46-source {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
}
.quiz46-source a {
  color: #c9a227;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dotted #c9a227;
  padding-bottom: 1px;
}
.quiz46-source a:hover { color: #a07d10; border-color: #a07d10; }

/* ===== GAME SELECT SCREEN ===== */
.game-select-screen {
  min-height: calc(100vh - 80px);
  padding: 0 0 60px;
  animation: actSlideIn 0.35s ease;
}
.gs-topbar {
  background: linear-gradient(135deg, #3A7BD5, #48C6EF);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(59,130,196,0.25);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.gs-title {
  font-family: var(--font-display);
  flex: 1;
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  text-align: center;
}
.gs-progress-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}
.back-btn {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.35);
  color: white;
  padding: 8px 18px;
  border-radius: 22px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  transition: all 0.2s;
  white-space: nowrap;
}
.back-btn:hover {
  background: rgba(255,255,255,0.28);
  transform: translateX(3px);
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  max-width: 960px;
  margin: 30px auto;
  padding: 0 20px;
}

/* ===== GAME CARD ===== */
.game-card {
  background: linear-gradient(170deg, #ffffff 0%, #fdfaf5 100%);
  border-radius: 22px;
  padding: 28px 18px 22px;
  text-align: center;
  cursor: pointer;
  border: 2px solid rgba(212,168,83,0.18);
  box-shadow: 0 6px 0 rgba(180,170,150,0.4), 0 10px 28px rgba(0,0,0,0.1);
  transition: all 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
  position: relative;
  overflow: hidden;
}
/* Colored top accent bar using group color */
.game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--group-color, var(--primary-light)) 25%, var(--group-color, var(--primary-light)) 75%, transparent);
  border-radius: 22px 22px 0 0;
  opacity: 0.9;
  transition: opacity 0.3s, height 0.3s;
}
.game-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 13px 0 rgba(180,170,150,0.4), 0 20px 36px rgba(0,0,0,0.15);
  border-color: var(--group-color, var(--primary));
}
.game-card:hover::before {
  height: 6px;
  opacity: 1;
}
.game-card.done {
  border-color: rgba(46,204,113,0.4);
  background: linear-gradient(170deg, #f5fffb 0%, #eafaf3 100%);
}
.gc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 18px;
  line-height: 1;
}
.gc-emoji {
  font-size: 54px;
  margin-bottom: 14px;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
}
.game-card:hover .gc-emoji {
  transform: scale(1.25) rotate(-8deg) translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25));
}
.gc-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 16px;
  line-height: 1.4;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gc-play-btn {
  width: 100%;
  padding: 10px 16px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  font-family: var(--font-main);
  background: linear-gradient(135deg, var(--group-color, var(--primary-light)), color-mix(in srgb, var(--group-color, var(--primary)) 80%, black));
  color: white;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--group-color, var(--primary)) 60%, black), 0 6px 14px rgba(0,0,0,0.2);
  transition: all 0.18s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.gc-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--group-color, var(--primary)) 60%, black), 0 10px 20px rgba(0,0,0,0.25);
}
.gc-play-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.3); }

/* ===== IN-GAME BACK BAR ===== */
.game-back-bar {
  background: linear-gradient(135deg, #3A7BD5, #48C6EF);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 12px rgba(59,130,196,0.25);
  position: sticky;
  top: 0;
  z-index: 150;
  gap: 12px;
}
.game-hud {
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-hud .hud-stars {
  display: flex;
  gap: 2px;
}
.game-hud .hud-star {
  font-size: 16px;
  filter: grayscale(1) brightness(1.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-hud .hud-star.earned {
  filter: none;
  animation: starPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-hud .hud-count {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}

/* ============================================================
   MOBILE — התאמה מלאה לסמארטפון
   ============================================================ */

/* כל האלמנטים הלחיצים — מינימום 44px לגעת */
* {
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .game-card, .age-card, .nav-btn,
.match-item, .odd-item, .mem-card, .plate-opt,
.count-opt, .word-opt, .quiz-opt, .order-step,
.pz-tile, .sort-bin, .bank-item, .pbk-item,
.cup-source-btn, .tray-box, .chametz-item,
.mz-btn, .color-swatch, .brush-btn, .gc-play-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* טאבלט (768px ומטה) */
@media (max-width: 768px) {
  .main { padding: 20px 12px 80px; }
  .card { padding: 18px 16px; }
  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; }
  .age-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .age-card { padding: 28px 14px; }
}

/* פלאפון (640px ומטה) */
@media (max-width: 640px) {
  /* ===== כללי ===== */
  .main       { padding: 16px 10px 80px; }
  .card       { padding: 16px 14px; border-radius: 16px; }
  .act-title  { font-size: 20px; }
  .step-tag   { font-size: 11px; }
  .score-bar  { padding: 8px 12px; margin-bottom: 14px; }
  .score-val  { font-size: 16px; }
  .next-actions { margin-top: 16px; }
  .btn        { padding: 11px 20px; font-size: 14px; }

  /* ===== LOBBY ===== */
  .lobby-screen   { padding: 0 0 40px; min-height: calc(100vh - 70px); }
  .lobby-topbar   { padding: 10px 14px; gap: 8px; }
  .lobby-topbar-title { font-size: 15px; }
  .lobby-inner    { padding: 20px 12px 0; }
  .lobby-title    { font-size: 24px; }
  .lobby-sub      { font-size: 14px; }
  .lobby-title-wrap {
    margin-bottom: 24px;
    padding: 20px 18px 16px;
    border-radius: 20px;
  }
  .lobby-title-wrap::before,
  .lobby-title-wrap::after { font-size: 14px; }
  .age-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .age-card       { padding: 22px 16px; border-radius: 20px; }
  .age-card-icon  { font-size: 44px; margin-bottom: 10px; }
  .age-card-title { font-size: 22px; }
  .age-card-sub   { font-size: 13px; }
  /* featured quiz mobile */
  .lobby-featured-quiz { padding: 16px 18px; gap: 12px; margin-top: 20px; }
  .lfq-icon       { font-size: 36px; }
  .lfq-title      { font-size: 17px; }
  .lfq-sub        { font-size: 12px; }
  .lfq-arrow      { font-size: 20px; }

  /* ===== GAME SELECT ===== */
  .games-grid     { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 10px; margin: 18px auto; }
  .game-card      { padding: 18px 12px 16px; border-radius: 16px; }
  .gc-emoji       { font-size: 40px; margin-bottom: 8px; }
  .gc-name        { font-size: 13px; min-height: 34px; }
  .gc-play-btn    { font-size: 13px; padding: 9px 12px; }
  .gs-topbar      { padding: 10px 14px; gap: 8px; }
  .gs-title       { font-size: 15px; }

  /* ===== IN-GAME BAR ===== */
  .game-back-bar  { padding: 8px 12px; flex-wrap: wrap; gap: 6px; }
  .back-btn       { padding: 7px 14px; font-size: 13px; }
  .game-hud .hud-star { font-size: 11px; }
  .game-hud .hud-count { font-size: 13px; }

  /* ===== MATCHING ===== */
  .matching-grid  { gap: 4px; }
  .match-item     { font-size: 14px; padding: 10px 6px; border-radius: 10px; }

  /* ===== CHAMETZ SCENE ===== */
  .chametz-scene  { min-height: 300px; }
  .chametz-item   { font-size: 34px; }

  /* ===== CANVAS ===== */
  .draw-canvas    { height: auto !important; max-height: 260px; }
  .draw-controls  { gap: 7px; padding: 8px 10px; }
  .color-swatch   { width: 28px; height: 28px; }

  /* ===== SEDER TABLE ===== */
  .seder-layout   { grid-template-columns: 1fr; }
  .items-bank     { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .bank-item      { min-width: 64px; font-size: 26px; }
  .table-scene    { min-height: 260px; }
  .drop-spot      { width: 64px; height: 64px; }
  .drop-spot.placed { font-size: 28px; }

  /* ===== 4 CUPS ===== */
  .trays-row      { gap: 10px; }
  .tray-box       { min-width: 100px; padding: 12px 8px; }
  .cup-source-btn { font-size: 44px; }

  /* ===== SEDER PLATE (act7) ===== */
  .plates-row     { gap: 14px; }
  .seder-plate-visual { width: 130px; height: 130px; }
  .plate-cell     { font-size: 20px; }
  .plate-opt      { width: 46px; height: 46px; font-size: 26px; }

  /* ===== ODD ONE OUT ===== */
  .odd-items      { gap: 7px; }
  .odd-item       { font-size: 36px; padding: 10px; border-radius: 12px; }

  /* ===== MEMORY ===== */
  .memory-grid    { gap: 7px; max-width: 100%; }

  /* ===== SORT ===== */
  .sort-current-item { font-size: 72px; }
  .sort-item-name    { font-size: 18px; }
  .sort-bins      { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sort-bin       { min-height: 90px; padding: 16px 10px; border-radius: 16px; }
  .sort-bin-emoji { font-size: 28px; }
  .sort-bin-label { font-size: 17px; }

  /* ===== ORDER (act11) ===== */
  .order-list     { max-width: 100%; }
  .order-step     { padding: 10px 12px; font-size: 15px; gap: 10px; }
  .step-emoji     { font-size: 24px; }
  .step-name      { font-size: 14px; }
  .step-desc      { font-size: 11px; }

  /* ===== COUNTING ===== */
  .count-items-display { font-size: 42px; gap: 5px; }
  .count-question { font-size: 18px; }
  .count-options  { gap: 10px; }
  .count-opt      { width: 62px; height: 62px; font-size: 22px; }

  /* ===== FILL IN BLANK ===== */
  .sentence-box   { font-size: 17px; padding: 14px 14px; line-height: 2.2; }
  .word-opt       { font-size: 14px; padding: 9px 16px; }

  /* ===== MAZE ===== */
  .maze-wrapper   { gap: 12px; }
  .mz-cell        { width: 28px; height: 28px; font-size: 15px; }
  .maze-d-pad     { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 60px); gap: 6px; }
  .mz-btn         { width: 60px; height: 60px; font-size: 24px; border-radius: 16px; }
  .maze-info      { display: none; }

  /* ===== BUILD PLATE (act15) ===== */
  .build-plate-layout { grid-template-columns: 1fr; }
  .plate-bank     { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .pbk-item       { min-width: 64px; font-size: 26px; }
  .plate-visual-large { width: 220px; height: 220px; }

  /* ===== PUZZLE ===== */
  .puzzle-wrapper { grid-template-columns: 1fr; }
  .puzzle-ref     { display: none; }
  .pz-tile        { font-size: 28px; }

  /* ===== QUIZ ===== */
  .quiz-q-box     { font-size: 16px; padding: 14px 16px; min-height: 60px; }
  .quiz-opts      { max-width: 100%; gap: 8px; }
  .quiz-opt       { padding: 12px 16px; font-size: 15px; }

  /* ===== CELEBRATION ===== */
  .cel-card       { padding: 28px 20px; }
  .cel-emoji      { font-size: 56px; }
  .cel-title      { font-size: 24px; }
}

/* פלאפון קטן מאוד (375px ומטה) */
@media (max-width: 375px) {
  .age-card-icon  { font-size: 36px; }
  .age-card-title { font-size: 20px; }
  .games-grid     { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; }
  .gc-emoji       { font-size: 34px; }
  .mz-cell        { width: 24px; height: 24px; font-size: 13px; }
  .maze-d-pad     { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); }
  .mz-btn         { width: 56px; height: 56px; font-size: 22px; }
  .odd-item       { font-size: 30px; padding: 8px; }
  .count-opt      { width: 54px; height: 54px; font-size: 20px; }
  .sort-current-item { font-size: 64px; }
  .plate-visual-large { width: 190px; height: 190px; }
  .seder-plate-visual { width: 115px; height: 115px; }
  .plate-opt      { width: 40px; height: 40px; font-size: 22px; }
}

/* ============================================================
   משחקי גיל 12+ — עיצוב חדש
   ============================================================ */

/* ----- Act 19: שאלות בלחץ זמן ----- */
.tq-timer-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 8px;
}
.tq-timer-bar-track {
  flex: 1;
  height: 14px;
  background: #ecf0f1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.tq-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #27ae60, #2ecc71);
  border-radius: 10px;
  transition: width 1s linear, background 0.4s;
}
.tq-timer-bar.warning {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
}
.tq-timer-count {
  font-size: 26px;
  font-weight: 900;
  min-width: 36px;
  text-align: center;
  color: #27ae60;
  font-family: 'Heebo', sans-serif;
  transition: color 0.3s;
}

/* ----- Act 20: נכון או לא נכון ----- */
.tf-statement {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 22px 18px;
  background: linear-gradient(135deg, #f8f9fa, #edf2f7);
  border-radius: 16px;
  margin: 16px 0;
  line-height: 1.6;
  color: #2c3e50;
  border: 2px solid #e2e8f0;
}
.tf-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.tf-btn {
  min-width: 140px;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 14px;
  border: 3px solid transparent;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: all 0.2s;
}
.tf-true  { background: #eafaf1; color: #27ae60; border-color: #27ae60; }
.tf-false { background: #fdecea; color: #e74c3c; border-color: #e74c3c; }
.tf-true:hover:not(:disabled)  { background: #27ae60; color: white; transform: translateY(-2px); }
.tf-false:hover:not(:disabled) { background: #e74c3c; color: white; transform: translateY(-2px); }
.tf-btn.correct { background: #27ae60 !important; color: white !important; border-color: #27ae60 !important; }
.tf-btn.wrong   { background: #e74c3c !important; color: white !important; border-color: #e74c3c !important; }
.tf-explanation {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f8f9fa;
  margin-top: 10px;
  border: 1px solid #e2e8f0;
}

/* ----- Act 21: סדר המכות ----- */
.plague-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px 0;
}
.plague-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 2px solid #dde1e7;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 72px;
  user-select: none;
}
.plague-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); border-color: #8e44ad; }
.plague-card.selected { background: #9b59b618; border-color: #8e44ad; box-shadow: 0 4px 12px rgba(142,68,173,0.25); }
.plague-card.correct  { background: #27ae6020; border-color: #27ae60; }
.plague-card.wrong    { background: #e74c3c20; border-color: #e74c3c; }
.plague-num  { font-size: 13px; font-weight: 900; color: #8e44ad; min-height: 17px; line-height: 1; }
.plague-emoji { font-size: 28px; line-height: 1.2; }
.plague-name  { font-size: 12px; font-weight: 700; color: #34495e; text-align: center; }
.plague-order-display {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  min-height: 26px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 10px;
}

/* ----- Act 22: מי אמר? ----- */
.quote-box {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 22px 20px;
  background: linear-gradient(135deg, #fdf6e3, #fef9f0);
  border-inline-start: 6px solid #f39c12;
  border-radius: 14px;
  margin: 14px 0;
  color: #2c3e50;
  font-style: italic;
  line-height: 1.6;
}

/* ----- Act 23: מספרי פסח ----- */
.num-display {
  font-size: 80px;
  font-weight: 900;
  text-align: center;
  color: #8e44ad;
  margin: 8px 0 2px;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(142,68,173,0.2);
  font-family: 'Heebo', sans-serif;
}

/* ----- Act 24: חידות פסח ----- */
.riddle-box {
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  padding: 22px 18px;
  background: linear-gradient(135deg, #667eea0d, #764ba20d);
  border-radius: 16px;
  border: 2px solid #8e44ad33;
  margin: 14px 0;
  color: #2c3e50;
  font-weight: 600;
}

/* ----- Act 25: חיבורים ----- */
.conn-instruction {
  text-align: center;
  font-size: 16px;
  color: #555;
  margin-bottom: 14px;
  font-weight: 600;
}
.conn-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0;
}
.conn-item {
  padding: 10px 18px;
  border: 2px solid #bdc3c7;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: white;
  transition: all 0.2s;
  font-family: 'Heebo', sans-serif;
}
.conn-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.conn-item.conn-selected   { border-color: #8e44ad; background: #9b59b618; outline: 3px solid #8e44ad44; }
.conn-item.conn-assigned-1 { background: #3498db12; border-color: #3498db; }
.conn-item.conn-assigned-2 { background: #e67e2212; border-color: #e67e22; }
.conn-item.conn-correct    { background: #27ae6022; border-color: #27ae60; }
.conn-item.conn-wrong      { background: #e74c3c22; border-color: #e74c3c; }
.conn-bins {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
.conn-bin {
  flex: 1;
  min-width: 160px;
  max-width: 260px;
  border: 3px dashed #bdc3c7;
  border-radius: 16px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}
.conn-bin:hover { border-color: #8e44ad; background: #9b59b606; }
.conn-bin-label {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: #2c3e50;
}
.conn-bin-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 38px;
}
.conn-bin-item {
  background: #ecf0f1;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #34495e;
}

/* ============================================================
   ACCESSIBILITY — נגישות
   ============================================================ */

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  right: 50%;
  transform: translateX(50%);
  background: var(--primary);
  color: white;
  padding: 12px 28px;
  border-radius: 0 0 12px 12px;
  font-weight: 800;
  font-size: 16px;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Global focus-visible styles — visible keyboard focus rings */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(240,184,0,0.3);
}

.back-btn:focus-visible,
.mz-btn:focus-visible,
.gc-play-btn:focus-visible,
.brush-btn:focus-visible,
.tf-btn:focus-visible,
.plague-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.color-swatch:focus-visible {
  outline: 3px solid white;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--primary);
}

.age-card:focus-visible {
  outline: 4px solid var(--gold-light);
  outline-offset: 4px;
}

.game-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.quiz-opt:focus-visible,
.count-opt:focus-visible,
.word-opt:focus-visible,
.plate-opt:focus-visible,
.odd-item:focus-visible,
.match-item:focus-visible,
.pz-tile:focus-visible,
.order-step:focus-visible,
.mem-card:focus-visible,
.sort-bin:focus-visible,
.bank-item:focus-visible,
.pbk-item:focus-visible,
.tray-box:focus-visible,
.conn-item:focus-visible,
.conn-bin:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.chametz-item:focus-visible,
.cup-source-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  border-radius: 8px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn, .back-btn, .mz-btn, .gc-play-btn { forced-color-adjust: auto; }
  :focus-visible { outline: 3px solid ButtonText; }
}

/* mobile tweaks for new games */
@media (max-width: 520px) {
  .tf-statement { font-size: 17px; padding: 16px 12px; }
  .tf-btn       { min-width: 110px; font-size: 16px; padding: 12px 18px; }
  .plague-card  { min-width: 60px; padding: 8px 6px; }
  .plague-emoji { font-size: 24px; }
  .num-display  { font-size: 60px; }
  .riddle-box   { font-size: 16px; padding: 16px 12px; }
  .quote-box    { font-size: 17px; padding: 16px 12px; }
  .conn-item    { padding: 8px 12px; font-size: 15px; }
  .conn-bin     { min-width: 140px; }
}

/* ═══════════════════════════════════════════════════════════════
   עיצוב ידידותי לילדים ואוטיזם — צבעים בהירים ורגועים
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  --font-game:  'Secular One', 'Heebo', Arial, sans-serif;
}

/* ─── Body — רקע בהיר וידידותי ─── */
/* (עיצוב הגוף מוגדר כבר למעלה) */

/* ─── Site Header — (styles set above) ─── */

/* ─── Lobby ─── */
.lobby-title {
  font-family: var(--font-game) !important;
  font-size: clamp(36px, 7vw, 74px) !important;
}

.lobby-sub {
  color: #3A6090 !important;
  font-size: 17px !important;
}

.ornament-line {
  background: linear-gradient(90deg, transparent, rgba(59,130,196,0.4), transparent) !important;
}
.ornament-icon {
  color: var(--primary) !important;
  text-shadow: none !important;
}

/* ─── Age Cards ─── */
.age-card-title {
  font-family: var(--font-game) !important;
  font-size: 26px !important;
}

/* ─── Game Select Topbar ─── */
.gs-title {
  font-family: var(--font-game) !important;
}

/* ─── Activity Headers ─── */
.act-title {
  font-family: var(--font-game) !important;
  color: var(--primary) !important;
  font-size: clamp(20px, 3.5vw, 32px) !important;
}
.step-tag {
  font-family: var(--font-game) !important;
}

/* ─── Completion screen ─── */
.complete-title {
  font-family: var(--font-game) !important;
}

/* ─── Celebration Card ─── */
.cel-title {
  font-family: var(--font-game) !important;
  color: var(--primary) !important;
}

/* ─── Keyframes ─── */
@keyframes shimmerLine {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}
@keyframes headerShimmer {
  0%    { left: -150%; opacity: 0; }
  15%   { opacity: 1; }
  85%   { opacity: 1; }
  100%  { left: 120%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   פרטיקלים וקישוטים ־ חיזוקים ויזואליים
   ═══════════════════════════════════════════════════════════════ */

/* ─── Lobby Particles: positioned + animated ─── */
.lobby-particles {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.lobby-inner { position: relative; z-index: 1; }
.lobby-particles span {
  position: absolute !important;
  animation: particleFloat 9s ease-in-out infinite !important;
  font-size: 1.6em !important;
}
.lobby-particles span:nth-child(1)  { left:  6%; bottom:  8%; font-size: 1.3em !important; animation-duration:  7.5s !important; animation-delay:  0s   !important; }
.lobby-particles span:nth-child(2)  { left: 16%; bottom: 22%; font-size: 2em   !important; animation-duration:  9.2s !important; animation-delay:  1.4s !important; }
.lobby-particles span:nth-child(3)  { left: 30%; bottom:  5%; font-size: 1.5em !important; animation-duration:  8.1s !important; animation-delay:  0.7s !important; }
.lobby-particles span:nth-child(4)  { left: 46%; bottom: 15%; font-size: 2.2em !important; animation-duration: 10.5s !important; animation-delay:  2.1s !important; }
.lobby-particles span:nth-child(5)  { left: 60%; bottom:  6%; font-size: 1.2em !important; animation-duration:  7.8s !important; animation-delay:  0.3s !important; }
.lobby-particles span:nth-child(6)  { left: 73%; bottom: 20%; font-size: 1.9em !important; animation-duration: 11.3s !important; animation-delay:  3.2s !important; }
.lobby-particles span:nth-child(7)  { left: 85%; bottom: 10%; font-size: 1.4em !important; animation-duration:  8.8s !important; animation-delay:  1.1s !important; }
.lobby-particles span:nth-child(8)  { left: 91%; bottom: 32%; font-size: 1.7em !important; animation-duration:  9.6s !important; animation-delay:  2.6s !important; }
.lobby-particles span:nth-child(9)  { left:  3%; bottom: 38%; font-size: 1.5em !important; animation-duration:  8.4s !important; animation-delay:  0.5s !important; }
.lobby-particles span:nth-child(10) { left: 53%; bottom: 42%; font-size: 1.3em !important; animation-duration: 10.1s !important; animation-delay:  1.9s !important; }

@keyframes particleFloat {
  0%   { opacity: 0;    transform: translateY(0)     rotate(0deg)  scale(0.7); }
  12%  { opacity: 0.55; }
  78%  { opacity: 0.42; }
  100% { opacity: 0;    transform: translateY(-58vh) rotate(22deg) scale(1.15); }
}

/* ─── Site Header H1 ─── */
.site-header h1 {
  font-family: var(--font-game) !important;
  font-size: clamp(20px, 4.2vw, 36px) !important;
}

/* ─── Lobby Title: קישוט עליון ─── */
.lobby-title-wrap {
  position: relative;
}
.lobby-title-wrap::before {
  content: '';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,196,0.5), transparent);
  border-radius: 2px;
}

/* ─── Age Card: Shine sweep on hover ─── */
.age-card::before {
  background: linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 45%, transparent 65%) !important;
  height: 100% !important;
  top: 0 !important;
  transition: opacity 0.4s !important;
}
.age-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; bottom: auto !important;
  left: -80% !important; right: auto !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(108deg, transparent 22%, rgba(255,255,255,0.2) 50%, transparent 78%) !important;
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  z-index: 3 !important;
}
.age-card:hover::after { left: 130% !important; }

.age-card-badge {
  background: rgba(0,0,0,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  font-family: var(--font-game) !important;
  letter-spacing: 0.5px !important;
}
.age-card-sub { color: rgba(255,255,255,0.9) !important; }

/* ─── HUD Stars ─── */
.game-hud .hud-star.earned {
  filter: drop-shadow(0 0 6px rgba(245,200,66,0.9)) !important;
}

/* ─── Back Button ─── */
.back-btn {
  font-family: var(--font-game) !important;
}

/* ─── Progress Dot current ─── */
.prog-dot.current {
  animation: starTwinkle 2.2s ease-in-out infinite !important;
}
@keyframes starTwinkle {
  0%, 100% { transform: scale(1.55); }
  50%       { transform: scale(1.8); }
}

/* ============================================================
   ACT 43 — תפזורת מילים
   ============================================================ */
.ws-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 10px auto;
  width: fit-content;
  direction: rtl;
}
.ws-row {
  display: flex;
  gap: 3px;
  flex-direction: row;
}
.ws-cell {
  width: 38px;
  height: 38px;
  border: 2px solid #c9d4e8;
  border-radius: 8px;
  background: #f0f4ff;
  color: #1e3d8f;
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.ws-cell:hover  { border-color: #2980b9; background: #dde9ff; transform: scale(1.1); }
.ws-cell.ws-sel { background: #fff176; border-color: #f39c12; transform: scale(1.1); }
.ws-cell.ws-found { border-color: transparent; font-weight: 900; }
.ws-wordlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  justify-content: center;
}
.ws-word-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #f0f4ff;
  border: 1.5px solid #c9d4e8;
  transition: opacity 0.3s;
}
.ws-word-item.ws-word-found {
  opacity: 0.55;
  text-decoration: line-through;
}
.ws-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9d4e8;
  flex-shrink: 0;
}
.ws-dot-empty { background: #c9d4e8; }

@media (max-width: 520px) {
  .ws-cell { width: 31px; height: 31px; font-size: 14px; border-radius: 6px; }
  .ws-row  { gap: 2px; }
  .ws-grid { gap: 2px; }
}

/* ============================================================
   ACT 44 — תשחץ (Word Scramble)
   ============================================================ */
.scr-question-box {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
  border: 2px solid #c9d4e8;
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.scr-hint-text {
  font-size: 19px;
  font-weight: 700;
  color: #1e3d8f;
  margin-bottom: 16px;
  line-height: 1.4;
}
.scr-scrambled-tiles {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.scr-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  background: linear-gradient(160deg, #fff 0%, #f0f4ff 100%);
  border: 2.5px solid #2980b9;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 900;
  color: #1e3d8f;
  box-shadow: 0 3px 8px rgba(41,128,185,0.18);
  letter-spacing: 0;
}
.scr-letter-count {
  font-size: 13px;
  color: #7f8c8d;
  margin-top: 4px;
}
.scr-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.scr-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 20px;
  font-family: var(--font-main);
  font-weight: 700;
  border: 2.5px solid #c9d4e8;
  border-radius: 12px;
  background: #fff;
  color: #1e3d8f;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.scr-input:focus { border-color: #2980b9; box-shadow: 0 0 0 3px rgba(41,128,185,0.15); }
.scr-check-btn  { white-space: nowrap; }
.scr-skip-btn   {
  display: block;
  margin: 0 auto 4px;
  background: transparent;
  color: #7f8c8d;
  border: 1.5px solid #c9d4e8;
  font-size: 14px;
  padding: 7px 18px;
}
.scr-skip-btn:hover { background: #f5f5f5; }

@media (max-width: 520px) {
  .scr-tile      { width: 36px; height: 40px; font-size: 18px; }
  .scr-hint-text { font-size: 16px; }
}

/* ============================================================
   ACT 45 — תשבץ פסח (Crossword)
   ============================================================ */
.cw-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}
.cw-grid-wrap {
  flex-shrink: 0;
}
.cw-table {
  border-collapse: collapse;
  margin: 0 auto;
  direction: rtl;
}
.cw-table td {
  width: 42px;
  height: 42px;
  padding: 0;
  position: relative;
}
.cw-black {
  background: #2c3e50;
  border-radius: 4px;
}
.cw-cell {
  background: #fff;
  border: 2px solid #8e9ab5;
  border-radius: 4px;
  cursor: text;
  transition: background 0.15s;
}
.cw-cell.cw-sel { background: #d4e9ff; border-color: #2980b9; }
.cw-num {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  font-weight: 800;
  color: #5a6a8a;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.cw-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 800;
  color: #1e3d8f;
  padding: 6px 0 0;
  outline: none;
  cursor: text;
  caret-color: transparent;
}
.cw-input.cw-correct { color: #27ae60; background: #eafaf1; }
.cw-input.cw-wrong   { color: #e74c3c; background: #fdf0f0; }
.cw-clues-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  font-size: 14px;
}
.cw-clue-section  { margin-bottom: 14px; }
.cw-clue-heading  {
  font-size: 15px;
  font-weight: 800;
  color: #1e3d8f;
  margin-bottom: 8px;
  border-bottom: 2px solid #c9d4e8;
  padding-bottom: 4px;
}
.cw-clue-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1.4;
  color: #34495e;
}
.cw-clue-item:hover      { background: #f0f4ff; }
.cw-clue-item.cw-clue-active { background: #d4e9ff; font-weight: 700; color: #1e3d8f; }
.cw-clue-num {
  font-weight: 800;
  color: #2980b9;
  flex-shrink: 0;
}
.cw-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .cw-table td   { width: 36px; height: 36px; }
  .cw-input      { font-size: 15px; padding: 4px 0 0; }
  .cw-clues-wrap { max-width: 100%; font-size: 13px; }
  .cw-clue-item  { padding: 4px 6px; }
}

/* ============================================================
   Footer — קרדיט פיתוח
   ============================================================ */
.dev-footer {
  direction: rtl;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #3A7BD5 0%, #2563A8 100%);
  border-top: 2px solid rgba(255,255,255,0.3);
  margin-top: 32px;
}

.dev-footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(240, 184, 0, 0.3);
  border-radius: 50px;
  overflow: hidden;
}

.dev-footer-side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.dev-footer-vsep {
  width: 1px;
  align-self: stretch;
  background: rgba(240, 184, 0, 0.3);
  flex-shrink: 0;
}

.dev-footer-label {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
}

.dev-footer-dot {
  color: rgba(240, 184, 0, 0.5);
  font-size: 11px;
}

.dev-footer-name {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
.dev-footer-name:hover { color: var(--gold-light); }

.dev-footer-contact {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
  direction: ltr;
  unicode-bidi: embed;
}
.dev-footer-contact:hover { color: var(--gold-light); }

.dev-footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #4fce6e;
}
.dev-footer-wa:hover { color: #7fffaa; }

.dev-footer-tag {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.dev-footer-tag-sep {
  color: rgba(240, 184, 0, 0.35);
  font-size: 11px;
}

.dev-footer-collab-logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}
.dev-footer-collab-logo-link:hover { opacity: 0.8; }

.dev-footer-collab-logo {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
  vertical-align: middle;
}

.dev-footer-collab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s;
}
.dev-footer-collab-icon:hover { transform: scale(1.15); }

.dev-footer-collab-icon.icon-fb { background: #1877f2; }
.dev-footer-collab-icon.icon-yt { background: #ff0000; }
.dev-footer-collab-icon.icon-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

@media (max-width: 640px) {
  .dev-footer { padding: 12px; }
  .dev-footer-inner { flex-direction: column; border-radius: 18px; width: calc(100% - 24px); }
  .dev-footer-side { padding: 10px 16px; gap: 6px; }
  .dev-footer-vsep { width: 80%; height: 1px; align-self: auto; margin: 0 auto; }
  .dev-footer-tag, .dev-footer-tag-sep { display: none; }
  .dev-footer-contact { font-size: 11px; }
}
@media (max-width: 360px) {
  .dev-footer-collab-logo { height: 18px; }
  .dev-footer-collab-icon { width: 22px; height: 22px; }
  .dev-footer-name { font-size: 12px; }
  .dev-footer-contact { font-size: 11px; }
  .dev-footer-wa svg { width: 13px; height: 13px; }
}

/* ============================================================
   LOBBY PARTICLES — floating Passover icons in background
   ============================================================ */
.lobby-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lobby-particles span {
  position: absolute;
  opacity: 0;
  animation: particleFloat 9s ease-in-out infinite;
  user-select: none;
  will-change: transform, opacity;
}
.lobby-particles span:nth-child(1)  { left: 4%;   top: 25%; font-size: 22px; animation-delay: 0s;    animation-duration: 9s; }
.lobby-particles span:nth-child(2)  { left: 12%;  top: 65%; font-size: 18px; animation-delay: 1.4s;  animation-duration: 11s; }
.lobby-particles span:nth-child(3)  { left: 82%;  top: 18%; font-size: 20px; animation-delay: 2.6s;  animation-duration: 8s; }
.lobby-particles span:nth-child(4)  { left: 90%;  top: 60%; font-size: 22px; animation-delay: 0.9s;  animation-duration: 10s; }
.lobby-particles span:nth-child(5)  { left: 48%;  top: 8%;  font-size: 16px; animation-delay: 3.8s;  animation-duration: 12s; }
.lobby-particles span:nth-child(6)  { left: 28%;  top: 82%; font-size: 18px; animation-delay: 2.0s;  animation-duration: 9s; }
.lobby-particles span:nth-child(7)  { left: 68%;  top: 78%; font-size: 20px; animation-delay: 4.5s;  animation-duration: 10s; }
.lobby-particles span:nth-child(8)  { left: 94%;  top: 38%; font-size: 16px; animation-delay: 1.7s;  animation-duration: 8s; }
.lobby-particles span:nth-child(9)  { left: 6%;   top: 50%; font-size: 14px; animation-delay: 5.2s;  animation-duration: 11s; }
.lobby-particles span:nth-child(10) { left: 55%;  top: 90%; font-size: 18px; animation-delay: 3.1s;  animation-duration: 9s; }

@keyframes particleFloat {
  0%   { opacity: 0;   transform: translateY(30px) rotate(0deg) scale(0.7); }
  15%  { opacity: 0.55; }
  75%  { opacity: 0.45; }
  100% { opacity: 0;   transform: translateY(-80px) rotate(25deg) scale(1.15); }
}

/* ============================================================
   NEW KEYFRAME ANIMATIONS
   ============================================================ */

/* Header shimmer sweep */
@keyframes headerShimmer {
  0%   { left: -150%; }
  60%  { left: 150%; }
  100% { left: 150%; }
}

/* Gold line shimmer */
@keyframes shimmerLine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Generic shimmer (for score bar etc.) */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Subtle pulse for interactive elements */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,184,0,0.0); }
  50%       { box-shadow: 0 0 0 8px rgba(240,184,0,0.15); }
}

/* ============================================================
   CUSTOM SCROLLBAR — elegant & on-brand
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  background: #E8F2FF;
}
::-webkit-scrollbar-track {
  background: #D8EAFF;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border-radius: 4px;
  border: 2px solid #D8EAFF;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

/* ============================================================
   ENHANCED CELEBRATION CARD
   ============================================================ */
.cel-card {
  background: linear-gradient(145deg, #ffffff 0%, #fffef8 50%, #fff9e6 100%);
  border-radius: 32px;
  padding: 44px 36px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  animation: bounceIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 0 0 4px var(--gold),
    0 0 0 8px rgba(240,184,0,0.2),
    0 24px 70px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}
.cel-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--gold-dark), var(--gold-light), var(--gold-dark), var(--primary), var(--primary-dark));
}
.cel-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.cel-title {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 900;
}
.cel-emoji {
  font-size: 76px;
  display: block;
  margin-bottom: 16px;
  animation: float 2s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2));
}

/* ============================================================
   STEP TAG — more distinctive badge
   ============================================================ */
.step-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: #1a0f00;
  padding: 5px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(240,184,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: none;
  letter-spacing: 0.5px;
  border: 1px solid rgba(200,144,0,0.3);
}

/* ============================================================
   SCORE VALUE — satisfying pop animation on update
   ============================================================ */
.score-val {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  background: white;
  padding: 4px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(30,61,143,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  border: 2px solid #c0d4f5;
  letter-spacing: 0.5px;
}

/* ============================================================
   MOBILE lobby adjustments
   ============================================================ */
@media (max-width: 640px) {
  .lobby-title { font-size: clamp(26px, 8vw, 40px); }
  .lobby-ornament { max-width: 260px; }
  .ornament-icon { font-size: 14px; }
  .ornament-icon:nth-child(3) { font-size: 17px; }
}

/* ============================================================
   כפתור מצב כהה
   ============================================================ */
.dark-mode-btn {
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.5);
  color: white;
  border-radius: 22px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.dark-mode-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.05);
}
.dark-mode-btn .dm-icon { font-size: 18px; line-height: 1; }
.dark-mode-btn .dm-label { font-size: 12px; }
.dark-mode-btn .mute-icon { font-size: 18px; line-height: 1; }
.dark-mode-btn .mute-label { font-size: 12px; }
.dark-mode-btn.muted {
  background: rgba(220, 50, 50, 0.7);
  border-color: rgba(255, 100, 100, 0.9);
  box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.35);
  animation: mutePulse 2s ease-in-out infinite;
}
@keyframes mutePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.35); }
  50%       { box-shadow: 0 0 0 6px rgba(220, 50, 50, 0.10); }
}

/* ============================================================
   מצב כהה — body.dark-mode
   ============================================================ */
body.dark-mode {
  background: var(--dm-bg);
  color: var(--dm-text);
}

body.dark-mode .site-header {
  background: linear-gradient(135deg, #1A2840 0%, #1E3050 55%, #223060 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  border-bottom-color: rgba(255,255,255,0.12);
}

body.dark-mode .dev-banner {
  background: #1A2030;
  color: #A8C8E8;
  border-bottom-color: rgba(255,255,255,0.08);
}

body.dark-mode .progress-bar-wrap,
body.dark-mode .hud-bar {
  background: linear-gradient(90deg, #1A2840 0%, #1E3050 50%, #1A2840 100%);
  border-bottom-color: rgba(255,255,255,0.08);
}

body.dark-mode .hud-count {
  color: var(--gold-light);
}

body.dark-mode .prog-dot {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode .card {
  background: linear-gradient(170deg, var(--dm-card) 0%, #1E2A3E 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  color: var(--dm-text);
}

body.dark-mode .act-title {
  color: var(--gold-light) !important;
}

body.dark-mode .score-bar {
  background: linear-gradient(135deg, #1A2840 0%, #162030 100%);
  border-color: rgba(255,255,255,0.1);
}

body.dark-mode .score-label { color: var(--dm-text-muted); }
body.dark-mode .score-val   { background: rgba(0,0,0,0.3); color: var(--gold-light); border-color: rgba(255,255,255,0.15); }

body.dark-mode .gs-topbar,
body.dark-mode .game-back-bar {
  background: linear-gradient(135deg, #1A2840, #1E3050);
}

body.dark-mode .game-card {
  background: linear-gradient(170deg, #1E2A3E 0%, #192436 100%);
  border-color: rgba(255,255,255,0.06);
  color: var(--dm-text);
}
body.dark-mode .gc-name { color: var(--dm-text); }

body.dark-mode .lobby-screen { color: var(--dm-text); }
body.dark-mode .lobby-sub    { color: var(--dm-text-muted) !important; }
body.dark-mode .lobby-title-wrap {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(72,198,239,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(245,200,66,0.10) 0%, transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.10) 100%) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body.dark-mode .match-item,
body.dark-mode .odd-item,
body.dark-mode .quiz-opt,
body.dark-mode .order-step,
body.dark-mode .count-opt,
body.dark-mode .word-opt,
body.dark-mode .plate-opt,
body.dark-mode .pz-tile,
body.dark-mode .odd-row,
body.dark-mode .plague-card {
  background: var(--dm-card);
  border-color: rgba(255,255,255,0.12);
  color: var(--dm-text);
}

body.dark-mode .mem-face {
  background: linear-gradient(135deg, #1A2840 0%, #1E3060 100%);
}

body.dark-mode .cel-card {
  background: linear-gradient(145deg, #1E2A3E 0%, #243044 100%);
  color: var(--dm-text);
}
body.dark-mode .cel-title { color: var(--gold-light) !important; }
body.dark-mode .cel-text  { color: var(--dm-text-muted); }

body.dark-mode .sentence-box,
body.dark-mode .quiz-q-box,
body.dark-mode .order-hint,
body.dark-mode .chametz-hint {
  background: #1E2A3E;
  border-color: rgba(255,255,255,0.1);
  color: var(--dm-text);
}

body.dark-mode ::-webkit-scrollbar { background: #1A2030; }
body.dark-mode ::-webkit-scrollbar-track { background: #1A2030; }
body.dark-mode ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3A5888, #2A4068); }

/* ===== Omer Toast — ספירת העומר ===== */
#omer-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  z-index: 8800;
  width: min(90vw, 390px);
  background: linear-gradient(135deg, #fffbf0 0%, #fef3c7 100%);
  border: 2px solid #f5c842;
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.13), 0 2px 8px rgba(245,200,66,0.25);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.52s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}
#omer-toast.omer-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#omer-toast.omer-hide {
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s ease-in, opacity 0.3s ease-in;
}
.omer-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px 10px 16px;
  direction: rtl;
}
.omer-star {
  font-size: 26px;
  color: #d97706;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 1px 3px rgba(217,119,6,0.35));
}
.omer-content { flex: 1; min-width: 0; }
.omer-title {
  font-family: var(--font-game, 'Heebo', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.omer-body {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 17px;
  font-weight: 700;
  color: #3f1905;
  line-height: 1.5;
}
.omer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #b45309;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.omer-close:hover { background: rgba(180,83,9,0.12); color: #92400e; }
.omer-progress {
  height: 4px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(to left, #f5c842, #f59e0b);
  transform-origin: right center;
  transform: scaleX(1);
}
#omer-toast.omer-show .omer-progress {
  animation: omer-bar-shrink 5s linear forwards;
}
@keyframes omer-bar-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* dark-mode adjustments */
body.dark-mode #omer-toast {
  background: linear-gradient(135deg, #2a1f00 0%, #3a2800 100%);
  border-color: #c9a800;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45), 0 2px 8px rgba(245,200,66,0.15);
}
body.dark-mode .omer-title { color: #fbbf24; }
body.dark-mode .omer-body  { color: #fef3c7; }
body.dark-mode .omer-star  { color: #fbbf24; }
body.dark-mode .omer-close { color: #fbbf24; }
body.dark-mode .omer-close:hover { background: rgba(251,191,36,0.15); }
body.dark-mode .omer-progress {
  background: linear-gradient(to left, #fbbf24, #d97706);
}