/* ==========================================================================
   מסך תצוגה — מסך קיר סטטי, בלי גלילה, נבנה למסך גדול
   ========================================================================== */

.display-body {
  overflow: hidden;
  height: 100vh;
  cursor: none;
}
.display-body.show-cursor { cursor: default; }

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: clamp(0.8rem, 2.2vh, 2.2rem) clamp(1rem, 2.6vw, 3.2rem);
  gap: clamp(0.6rem, 1.6vh, 1.6rem);
}

/* ---------------------------- ראש ---------------------------- */

.stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex: 0 0 auto;
}

.brand h1 {
  font-size: clamp(1.6rem, 4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px var(--glow);
}

.brand p {
  font-size: clamp(0.85rem, 1.35vw, 1.5rem);
  margin: 0.25em 0 0;
  font-weight: 500;
}

.head-side {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.4rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.match-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5em 1.1em;
  border-radius: 14px;
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, rgba(227, 180, 99, 0.2), rgba(227, 180, 99, 0.05));
  line-height: 1.15;
  animation: pulseGold 3.2s ease-in-out infinite;
}
.match-badge b {
  font-size: clamp(1.1rem, 2.1vw, 2.2rem);
  color: var(--gold-soft);
}
.match-badge span { font-size: clamp(0.62rem, 0.9vw, 1rem); color: var(--muted); }

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 180, 99, 0); }
  50%      { box-shadow: 0 0 34px 0 var(--glow); }
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}
.countdown .cd-label { font-size: clamp(0.6rem, 0.85vw, 0.95rem); color: var(--muted); }
.countdown .cd-clock {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  font-size: clamp(1.2rem, 2.4vw, 2.6rem);
  font-weight: 800;
  color: var(--gold-soft);
}
.countdown .cd-clock i { color: var(--line); font-style: normal; }
.countdown .cd-clock b { min-width: 1.7em; text-align: center; }
.countdown .cd-units {
  display: flex;
  gap: 0.12em;
  font-size: clamp(0.5rem, 0.7vw, 0.78rem);
  color: var(--muted);
}
.countdown .cd-units em { min-width: 1.7em; text-align: center; font-style: normal; }
.countdown .cd-units em + em { margin-inline-start: 0.5em; }
.countdown.urgent .cd-clock { color: #ff9c6e; }

/* ---------------------------- מכל התצוגות ---------------------------- */

.view { display: none; flex: 1 1 auto; min-height: 0; }
.view.active { display: flex; flex-direction: column; }

.hidden { display: none !important; }

/* ---------------------------- 1. קלאסית ---------------------------- */

.classic-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 4rem);
}

.gauge-wrap {
  position: relative;
  justify-self: center;
  width: min(62vh, 44vw);
  aspect-ratio: 1;
}

.gauge { width: 100%; height: 100%; transform: rotate(-90deg); }

/* stop-color לא קורא משתני CSS בכל המנועים — ערכים מפורשים, לכל ערכת נושא. */
#goldArc stop:nth-child(1) { stop-color: #f7dfa8; }
#goldArc stop:nth-child(2) { stop-color: #e3b463; }
#goldArc stop:nth-child(3) { stop-color: #9a6f27; }
:root[data-theme='day'] #goldArc stop:nth-child(1) { stop-color: #c8983f; }
:root[data-theme='day'] #goldArc stop:nth-child(2) { stop-color: #a9761f; }
:root[data-theme='day'] #goldArc stop:nth-child(3) { stop-color: #6b4810; }

.gauge-track {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 13;
}

.gauge-fill {
  fill: none;
  stroke: url(#goldArc);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 590.62;
  stroke-dashoffset: 590.62;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  text-align: center;
}

.gauge-center .raised {
  font-size: min(9.5vh, 7vw);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  text-shadow: 0 0 40px var(--glow);
}

.gauge-center .of-goal { font-size: min(2.4vh, 1.7vw); }
.gauge-center .of-goal b { color: var(--gold); font-weight: 700; }

.goal-tag {
  margin-top: 0.5em;
  font-size: min(1.9vh, 1.3vw);
  color: var(--gold-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3em 1em;
}
.goal-tag:empty { display: none; }

.classic-side {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2.4vh, 2rem);
  min-width: 0;
}

.big-pct { text-align: center; }
.pct-num {
  font-size: min(16vh, 11vw);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.pct-cap { font-size: min(2.4vh, 1.7vw); margin-top: 0.2em; }

.stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
}
.stat { padding: clamp(0.7rem, 1.8vh, 1.4rem); text-align: center; }
.stat-num {
  font-size: min(5vh, 3.4vw);
  font-weight: 800;
  color: var(--gold-soft);
  line-height: 1.05;
}
.stat-cap { font-size: min(1.9vh, 1.3vw); margin-top: 0.25em; }

.ladder { display: flex; flex-direction: column; gap: 0.4em; }
.ladder:empty { display: none; }
.ladder-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: min(1.9vh, 1.3vw);
  color: var(--muted);
}
.ladder-row .dot {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  border: 1px solid var(--gold); flex: 0 0 auto;
}
.ladder-row.done .dot { background: var(--gold); }
.ladder-row.done { color: var(--gold-soft); }
.ladder-row .amt { margin-inline-start: auto; font-weight: 700; }

/* ---------------------------- 2. מתרימים ---------------------------- */

.teams-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 2rem);
  padding-bottom: clamp(0.5rem, 1.4vh, 1.2rem);
}
.tt-num { font-size: clamp(1.6rem, 4.2vh, 3.4rem); font-weight: 800; }
.tt-of { font-size: clamp(0.75rem, 1.7vh, 1.15rem); margin-inline-start: 0.5em; }
.tt-of b { color: var(--gold); }
.teams-bar, .st-bar {
  height: clamp(9px, 1.5vh, 16px);
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}
.teams-bar span, .st-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 45%, var(--gold-soft));
  box-shadow: 0 0 20px var(--glow);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.teams-meta { font-size: clamp(0.75rem, 1.7vh, 1.15rem); white-space: nowrap; }
.teams-meta i { margin: 0 0.5em; font-style: normal; color: var(--line); }

.teams-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: clamp(0.35rem, 0.9vh, 0.9rem);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

.team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'rank name amt' 'rank bar bar';
  align-items: center;
  gap: 0.15em 0.7em;
  padding: clamp(0.35rem, 1vh, 0.85rem) clamp(0.6rem, 1.2vw, 1.1rem);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  min-height: 0;
}
.team.top { border-color: var(--line); background: var(--panel-2); }

.team .rank {
  grid-area: rank;
  font-size: var(--fs-rank, 1.1rem);
  font-weight: 800;
  color: var(--gold-deep);
  min-width: 1.6em;
  text-align: center;
}
.team.top .rank { color: var(--gold); }

.team .tname {
  grid-area: name;
  font-size: var(--fs-name, 1.15rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team .tamt {
  grid-area: amt;
  font-size: var(--fs-amt, 1.05rem);
  font-weight: 800;
  color: var(--gold-soft);
  white-space: nowrap;
}
.team .tamt small { color: var(--muted); font-weight: 600; font-size: 0.7em; }

.team .tbar {
  grid-area: bar;
  height: var(--h-bar, 8px);
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}
.team .tbar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-soft));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.teams-empty, .stream-empty {
  margin: auto;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vh, 1.6rem);
}

/* ---------------------------- 3. זרם ---------------------------- */

.stream-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 2rem);
  padding-bottom: clamp(0.5rem, 1.4vh, 1.2rem);
}
.st-raised { font-size: clamp(1.5rem, 4vh, 3.2rem); font-weight: 800; }
.st-of { font-size: clamp(0.75rem, 1.6vh, 1.1rem); margin-inline-start: 0.5em; }
.st-of b { color: var(--gold); }
.st-right { text-align: center; line-height: 1.15; }
.st-pct { display: block; font-size: clamp(1.2rem, 3vh, 2.2rem); font-weight: 800; color: var(--gold-soft); }
.st-donors { font-size: clamp(0.7rem, 1.5vh, 1rem); }

.stream-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.8vh, 0.7rem);
  overflow: hidden;
}

.gift {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 clamp(0.6rem, 1.4vw, 1.4rem);
  padding: clamp(0.4rem, 1.1vh, 0.9rem) clamp(0.7rem, 1.4vw, 1.3rem);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  flex: 0 0 auto;
}
.gift.fresh { animation: giftIn 0.7s cubic-bezier(0.22, 1, 0.36, 1); border-color: var(--gold); }

@keyframes giftIn {
  from { opacity: 0; transform: translateY(-18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.gift .g-amt {
  font-size: clamp(1.1rem, 2.9vh, 2rem);
  font-weight: 800;
  color: var(--gold-soft);
  min-width: 4.5ch;
}
.gift .g-body { min-width: 0; }
.gift .g-name {
  display: block;
  font-size: clamp(0.95rem, 2.2vh, 1.5rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gift .g-note {
  display: block;
  font-size: clamp(0.75rem, 1.6vh, 1.05rem);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gift .g-meta {
  text-align: left;
  font-size: clamp(0.68rem, 1.4vh, 0.95rem);
  color: var(--muted);
  white-space: nowrap;
}
.gift .g-meta b { display: block; color: var(--gold-deep); font-weight: 700; }

/* ---------------------------- תחתית ---------------------------- */

.stage-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4.5rem);
  padding-top: clamp(0.5rem, 1.4vh, 1.2rem);
  border-top: 1px solid var(--line-soft);
}
.stage-foot > * { display: flex; flex-direction: column; align-items: center; gap: 0.15em; }
.cta-cap { font-size: clamp(0.62rem, 1.2vh, 0.9rem); letter-spacing: 0.04em; }
.cta-val { font-size: clamp(1.3rem, 3.6vh, 2.8rem); font-weight: 800; letter-spacing: 0.02em; }
.cta-url {
  font-size: clamp(0.8rem, 1.9vh, 1.3rem);
  font-weight: 600;
  color: var(--gold-soft);
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
.cta-qr img {
  width: clamp(52px, 9vh, 110px);
  height: clamp(52px, 9vh, 110px);
  display: block;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* ---------------------------- שכבות אירוע ---------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 3, 0.82);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
:root[data-theme='day'] .overlay { background: rgba(250, 244, 233, 0.9); }
.overlay.show { opacity: 1; visibility: visible; }

.burst {
  position: absolute;
  width: 130vmin;
  height: 130vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  opacity: 0;
}
.overlay.show .burst { animation: burstOut 1.5s ease-out; }
@keyframes burstOut {
  0%   { opacity: 0.95; transform: scale(0.25); }
  100% { opacity: 0; transform: scale(1); }
}

.ov-card {
  position: relative;
  text-align: center;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(2rem, 7vw, 7rem);
  transform: scale(0.9);
  transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.overlay.show .ov-card { transform: scale(1); }

.ov-kicker {
  font-size: clamp(0.9rem, 2.4vh, 1.6rem);
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: 0.6em;
}
.ov-amount {
  font-size: min(22vh, 17vw);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.ov-name {
  font-size: min(7vh, 5vw);
  font-weight: 700;
  margin-top: 0.25em;
}
.ov-note {
  font-size: min(3.4vh, 2.4vw);
  color: var(--muted);
  margin-top: 0.4em;
  max-width: 24ch;
  margin-inline: auto;
}
.ov-note:empty { display: none; }
.ov-by {
  margin-top: 0.9em;
  font-size: min(2.6vh, 1.8vw);
  color: var(--gold-deep);
}
.ov-by:empty { display: none; }

/* אבן דרך */
.ms-card { position: relative; text-align: center; }
.ms-ring {
  font-size: min(30vh, 24vw);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.ms-text {
  font-size: min(6vh, 4.4vw);
  font-weight: 700;
  margin-top: 0.2em;
}

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -8vh;
  width: 0.7vmin;
  height: 2.2vmin;
  background: var(--gold);
  opacity: 0;
  border-radius: 1px;
}
.overlay.show .confetti i { animation: fall linear forwards; }
@keyframes fall {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(112vh) rotate(760deg); }
}

/* ---------------------------- בקרה ---------------------------- */

.dock {
  position: fixed;
  inset-inline-start: clamp(0.6rem, 1.5vw, 1.4rem);
  inset-block-end: clamp(0.6rem, 1.5vh, 1.4rem);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
.dock.visible { opacity: 1; transform: none; pointer-events: auto; }

.dock-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dock-btn:hover { background: var(--panel); color: var(--text); }
.dock-btn.on { background: var(--gold); color: #241704; }

.dock-sep { width: 1px; height: 1.3rem; background: var(--line); margin: 0 0.15rem; }

.dock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d9534f; margin: 0 0.4rem;
  box-shadow: 0 0 8px currentColor;
}
.dock-dot.live { background: #64c27b; }

.sound-nudge {
  position: fixed;
  inset-block-end: clamp(0.6rem, 1.5vh, 1.4rem);
  inset-inline-end: clamp(0.6rem, 1.5vw, 1.4rem);
  z-index: 80;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  backdrop-filter: blur(8px);
  display: none;
}
.sound-nudge.show { display: block; }

/* ---------------------------- מסכים צרים ---------------------------- */

@media (max-width: 820px), (max-aspect-ratio: 3/4) {
  .classic-grid { grid-template-columns: 1fr; gap: clamp(0.6rem, 2vh, 1.4rem); }
  .gauge-wrap { width: min(46vh, 78vw); }
  .pct-num { font-size: min(11vh, 22vw); }
  .stat-num { font-size: min(4vh, 7vw); }
  .stat-cap, .pct-cap, .gauge-center .of-goal { font-size: clamp(0.72rem, 1.7vh, 1rem); }
  .stage-foot { gap: clamp(0.8rem, 5vw, 2rem); }
  .cta-url { max-width: 52vw; }
  .teams-top, .stream-top { grid-template-columns: 1fr; gap: 0.4rem; }
  .teams-meta, .st-right { text-align: start; }
}