/* ============================================================
   שלושה סגנונות טקסט בלבד בכל הממשק
   ------------------------------------------------------------
   1  כותרת  — Heebo 800,  clamp(30px,5.2vw,46px)
   2  טקסט   — Heebo 600,  17px            (ברירת המחדל של body)
   3  ספרות  — Bebas Neue 400, clamp(30px,5.2vw,46px)

   אין בקובץ הזה font-size / font-weight / font-family מחוץ
   לשלושת הבלוקים המסומנים למטה. ההיררכיה נבנית מצבע ורווח.
   ============================================================ */
:root{
  --f-ui:Heebo,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --f-num:"Bebas Neue",Heebo,sans-serif;
  --size-display:clamp(30px,5.2vw,46px);
  --size-text:17px;

  --felt-1:#0e3a29;
  --felt-2:#072018;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --card:rgba(255,255,255,.055);
  --card-hi:rgba(255,255,255,.09);
  --ink:#f2f6f3;
  --ink-dim:rgba(242,246,243,.72);
  --ink-faint:rgba(242,246,243,.50);
  --gold:#e8c66a;
  --gold-deep:#b8933c;
  --chalk:#3d6fd6;
  --win:#5ddc9a;
  --loss:#ff7d7d;
  --r-lg:22px;
  --r-md:14px;
  --shadow:0 18px 44px rgba(0,0,0,.45);
}

/* --- סגנון 2: טקסט. ברירת המחדל של כל דבר בממשק --- */
body, input, button, textarea, select, table.ledger{
  font-family:var(--f-ui);
  font-weight:600;
  font-size:var(--size-text);
  line-height:1.55;
}

/* --- סגנון 1: כותרת --- */
h1.display,
.rival-hero h1,
.rival-item .nm,
.ceremony-rhyme,
.reveal-rhyme,
.big-msg-text,
.res-word,
.tv-brand,
.tv-game,
.result-verdict{
  font-family:var(--f-ui);
  font-weight:800;
  font-size:var(--size-display);
  line-height:1.1;
  margin:0;
}

/* --- סגנון 3: ספרות --- */
.pair b, .pair .sep, .side .pts, .hero-cta .plus,
.fig, .money, .secret, .ballbtn, .catorce-num, .ceremony-num, .reveal-num, .res-amount, .tv-big,
.fm-v,
.askclock .num{
  font-family:var(--f-num);
  font-weight:400;
  font-size:var(--size-display);
  line-height:1;
  letter-spacing:.03em;
}

/* ============================================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:#071a13;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- רקע ---------- */
.felt{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%, #14513a 0%, var(--felt-1) 38%, var(--felt-2) 100%);
}
.felt::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size:4px 4px, 4px 4px;
  background-position:0 0, 2px 2px;
  opacity:.55;
}

/* ---------- סרגל עליון ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px clamp(14px,4vw,28px);
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(7,26,19,.9), rgba(7,26,19,.45));
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer; padding:0; color:inherit}
.brand-ball{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #fff 0 6%, var(--gold) 22%, var(--gold-deep) 72%, #6b5218 100%);
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.5);
}
.brand-name{color:var(--gold)}
.brand-user{color:var(--ink-dim); padding-inline-start:12px; border-inline-start:1px solid var(--line); margin-inline-start:4px}
.topbar-right{display:flex; gap:8px; flex-wrap:wrap}
.ghost-btn{
  color:var(--ink-dim); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  padding:8px 18px; cursor:pointer; transition:.16s ease;
}
.ghost-btn:hover{color:var(--ink); border-color:var(--line-strong); background:var(--card)}
.ghost-btn.admin{color:var(--gold); border-color:rgba(232,198,106,.4)}
/* אייקון במקום מילה: השורה העליונה צפופה ו'ניהול' דחף את 'יציאה' לשורה שנייה */
.ghost-btn.icon-only{padding:8px; width:40px; height:40px; display:grid; place-items:center}
.ghost-btn.icon-only svg{width:20px; height:20px}

/* שורת סשן נשארת בשורה אחת גם כשהסכום תלת-ספרתי */
.sess .sc{white-space:nowrap; flex:none}
.sess .date{min-width:0}

.seg{display:flex; gap:3px; padding:4px; background:rgba(0,0,0,.32); border:1px solid var(--line); border-radius:999px}
.seg button{
  padding:8px 20px; border:0; border-radius:999px;
  background:transparent; color:var(--ink-dim);
  cursor:pointer; transition:.16s ease; white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button.on{
  background:linear-gradient(180deg,#f4d888,var(--gold) 55%,var(--gold-deep));
  color:#231a05; box-shadow:0 4px 12px rgba(184,147,60,.28);
}
.seg.locked{opacity:.45; pointer-events:none}

/* ---------- פריסה ---------- */
main{max-width:940px; margin:0 auto; padding:clamp(20px,5vw,44px) clamp(14px,4vw,28px) 90px}
.hidden{display:none !important}
.stack{display:flex; flex-direction:column; gap:18px}
.center-screen{min-height:calc(100vh - 160px); display:flex; flex-direction:column; justify-content:center; gap:24px}

h1.display .accent{color:var(--gold)}
.sub{margin:0; color:var(--ink-dim); max-width:50ch}
.note{margin:0; color:var(--ink-faint)}
h2.section{color:var(--ink-faint); margin:0 0 6px}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(18px,3.5vw,26px);
  backdrop-filter:blur(10px); box-shadow:var(--shadow);
}

/* ---------- טפסים ---------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.field label{color:var(--ink-faint)}
input[type=text],input[type=password],select{
  color:var(--ink); background:rgba(0,0,0,.28);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:13px 16px; outline:none; width:100%; transition:.16s ease;
}
input::placeholder{color:var(--ink-faint)}
input:focus,select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,198,106,.16)}
select{appearance:none; cursor:pointer; padding-inline-end:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                   linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
  background-position:left 18px top 50%, left 12px top 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
select option{background:#0e2a20; color:var(--ink)}

.btn{
  border:0; border-radius:var(--r-md); padding:15px 24px;
  cursor:pointer; width:100%;
  transition:transform .12s ease, filter .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#231a05; background:linear-gradient(180deg,#f4d888,var(--gold) 45%,var(--gold-deep)); box-shadow:0 8px 22px rgba(184,147,60,.3)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-line{color:var(--ink); background:transparent; border:1px solid var(--line-strong)}
.btn-line:hover{background:var(--card-hi)}
.btn-danger{color:#ffd9d9; background:rgba(180,60,60,.22); border:1px solid rgba(255,125,125,.35)}
.btn-danger:hover{background:rgba(180,60,60,.34)}
.btn-sm{padding:11px 20px}
.btn-ritual{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:#231a05;
  background:linear-gradient(180deg,#f7e2a2,var(--gold) 45%,var(--gold-deep));
  box-shadow:0 8px 24px rgba(184,147,60,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-ritual:hover{filter:brightness(1.06)}
.btn-ritual svg{width:28px; height:28px; flex:none}

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.switcher{display:flex; gap:4px; padding:4px; background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:999px; margin-bottom:20px}
.switcher button{
  flex:1; padding:11px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--ink-dim); transition:.16s ease;
}
.switcher button.on{background:var(--card-hi); color:var(--ink)}

.err{color:#ffb4b4; margin:0 0 12px; min-height:22px}

/* ---------- כדורים ---------- */
.ball{
  position:relative; flex:none; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:
    inset -6px -8px 16px rgba(0,0,0,.5),
    inset 4px 5px 12px rgba(255,255,255,.22),
    0 8px 20px rgba(0,0,0,.45);
}
.ball::before{
  content:""; position:absolute; top:12%; left:20%; width:30%; height:24%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  border-radius:50%;
}
.ball .pip{
  position:relative; z-index:2;
  background:#fbfaf6; border-radius:50%;
  display:grid; place-items:center; color:#141414;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ball.stripe .band{position:absolute; inset:0; background:#fbfaf6; clip-path:polygon(0 0,100% 0,100% 26%,0 26%)}
.ball.stripe .band2{position:absolute; inset:0; background:#fbfaf6; clip-path:polygon(0 74%,100% 74%,100% 100%,0 100%)}
.ball.sm{width:58px;height:58px} .ball.sm .pip{width:32px;height:32px}
.ball.md{width:76px;height:76px} .ball.md .pip{width:38px;height:38px}
/* מידה בפיקסלים קודם: דפדפן שלא מכיר clamp מתעלם מהכלל כולו,
   ובלי רוחב הכדור פשוט לא נראה */
.ball.lg{width:104px;height:104px;
  width:clamp(96px,20vw,124px);height:clamp(96px,20vw,124px)}
.ball.lg .pip{width:46%;height:46%}

/* ---------- זוג תוצאות מתויג ---------- */
.pair{display:inline-flex; align-items:flex-start; gap:9px; direction:rtl}
.pair .pn{display:inline-flex; flex-direction:column; align-items:center}
.pair i{
  font-style:normal; color:var(--ink-faint); margin-top:6px;
  max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pair .sep{color:var(--ink-faint)}
/* כל הספרות בממשק לבנות. התוצאה נקראת מהתגית, לא מהצבע */

/* ---------- רשימת היריבים ---------- */
.list-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.rival-list{display:flex; flex-direction:column}
.rival-item{
  display:flex; align-items:center; gap:18px; width:100%;
  color:inherit; text-align:start; cursor:pointer;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:18px 8px; border-radius:12px; transition:.16s ease;
}
.rival-item:last-child{border-bottom:0}
.rival-item:hover{background:var(--card-hi); padding-inline-start:14px}
.rival-item .who{flex:1; min-width:0}
.rival-item .nm{display:block; color:var(--ink)}
.rival-item .chev{color:var(--ink-faint)}
.rival-item .hth{display:flex; flex-direction:column; align-items:center; gap:4px}
.rival-item .hth .cap{color:var(--ink-faint)}

.stat-strip{display:grid; grid-template-columns:1fr 1px 1fr; align-items:start; gap:clamp(10px,4vw,30px); text-align:center}
.stat-strip .divider{background:var(--line); align-self:stretch}
.stat-block .k{color:var(--ink-faint); margin-bottom:12px}
.stat-block .n{color:var(--ink-faint); margin-top:14px}
.stat-block .n.up{color:var(--win)}
.stat-block .n.down{color:var(--loss)}
.stat-block .n.even{color:var(--ink)}

.chart-wrap{width:100%; overflow-x:auto}
.chart-wrap svg{display:block; width:100%; height:auto; min-width:320px; direction:ltr}
.chart-caption{text-align:center; color:var(--ink-faint); margin-top:10px}

.form-slot{overflow:hidden; max-height:0; opacity:0; transition:max-height .28s ease, opacity .2s ease, margin .28s ease}
.form-slot.open{max-height:440px; opacity:1; margin-top:16px}

.rival-hero{display:flex; align-items:center; gap:clamp(14px,4vw,22px); flex-wrap:wrap}
.rival-hero .txt{flex:1; min-width:0}
.hero-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:clamp(96px,20vw,124px); aspect-ratio:1; flex:none;
  padding:10px; border:0; border-radius:22px; cursor:pointer;
  text-align:center; line-height:1.15;
  color:#231a05;
  background:linear-gradient(180deg,#f4d888,var(--gold) 45%,var(--gold-deep));
  box-shadow:0 8px 22px rgba(184,147,60,.3);
  transition:transform .12s ease, filter .16s ease;
}
.hero-cta:hover{filter:brightness(1.06)}
.hero-cta:active{transform:translateY(1px)}
.hero-cta .plus{line-height:.8}
.rival-hero .since{color:var(--ink-faint); margin-top:6px}

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink-dim);
}
.back-link:hover{color:var(--ink)}

.streak{
  display:inline-block; margin-top:12px;
  padding:6px 16px; border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--ink-dim);
}
.streak.hot{background:rgba(93,220,154,.15); color:var(--win)}
.streak.cold{background:rgba(255,125,125,.15); color:var(--loss)}

.mini-list{display:flex; flex-direction:column; gap:8px}
#nLogList .sess{white-space:nowrap}
#nLogList .date{overflow:hidden}

/* ---------- השולחן ---------- */
.session-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.head-actions .gamechip{padding-inline:13px}
.head-actions .btn-sm{padding-inline:13px}
.gamechip{
  color:var(--gold);
  border:1px solid rgba(232,198,106,.35); background:rgba(232,198,106,.09);
  border-radius:999px; padding:8px 20px;
}
.scoreboard{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(8px,3vw,22px); padding:clamp(16px,4vw,30px) clamp(10px,3vw,24px)}
.side{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:none; border:0; color:inherit;
  cursor:pointer; padding:14px 10px; border-radius:20px; transition:.16s ease;
}
.side:hover{background:rgba(255,255,255,.05)}
.side .ball.lg{transition:transform .18s cubic-bezier(.34,1.4,.64,1)}
.side:hover .ball.lg{transform:scale(1.05) translateY(-3px)}
.side .name{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side .tag{color:var(--ink-faint)}
.side .hint{color:var(--ink-faint); opacity:0; transition:.16s ease}
.side:hover .hint{opacity:1}
.vs{color:var(--ink-faint); letter-spacing:.12em}

.pocket-flash{animation:pocket .5s ease}
@keyframes pocket{0%{transform:scale(1)} 35%{transform:scale(1.16)} 100%{transform:scale(1)}}

.frames{display:flex; flex-wrap:wrap; gap:7px; padding-top:4px}
.frame-dot{width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,.16)}
.frame-dot.a{background:var(--gold)}
.frame-dot.b{background:var(--chalk)}

.session-actions{display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:4px}

/* ---------- שורות סשן ---------- */
.sess{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:start; color:inherit;
  padding:12px 16px; border-radius:12px; background:rgba(0,0,0,.2);
  border:1px solid transparent; transition:.16s ease;
}
button.sess{cursor:pointer}
button.sess:hover{background:rgba(0,0,0,.34); border-color:var(--line-strong)}
.sess .chev{color:var(--ink-faint)}
.sess .date .badge{margin-inline-start:12px; vertical-align:middle}
.sess .date{color:var(--ink-dim); flex:1; min-width:0}
.sess .badge{padding:5px 14px; border-radius:999px; white-space:nowrap}
.badge.won{background:rgba(93,220,154,.16); color:var(--win)}
.badge.lost{background:rgba(255,125,125,.16); color:var(--loss)}
.badge.tied{background:rgba(255,255,255,.1); color:var(--ink-dim)}

.empty{
  color:var(--ink-dim); line-height:1.7;
  border:1px dashed var(--line-strong); border-radius:var(--r-md);
  padding:26px; text-align:center;
}

/* ---------- תוצאה ---------- */
.result-hero{text-align:center; padding:clamp(20px,5vw,36px) 16px}
.result-verdict{margin-bottom:16px}
.result-verdict.won{color:var(--win)}
.result-verdict.lost{color:var(--loss)}
.result-verdict.tied{color:var(--gold)}
.result-line{color:var(--ink-dim); margin:10px 0 0}

textarea{
  color:var(--ink); background:rgba(0,0,0,.28);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:14px 16px; outline:none; width:100%; resize:vertical;
  transition:.16s ease;
}
textarea::placeholder{color:var(--ink-faint)}
textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,198,106,.16)}

/* ---------- מספרים ---------- */
.money.up{color:var(--win)}
.money.down{color:var(--loss)}

.nplayer{padding:14px 4px; border-bottom:1px solid var(--line)}
.nplayer:last-child{border-bottom:0}
.nplayer.out{opacity:.45}
.nplayer .who{flex:1; min-width:0}
.nplayer .meta{color:var(--ink-faint); margin-top:2px}
.nplayer .paid{
  min-width:6ch; text-align:center; flex:none;
  color:var(--ink-dim); font-variant-numeric:tabular-nums;
}
.nplayer .paid-action{min-width:auto}
.nplayer .paid-action .btn{width:auto}
.secret{
  color:var(--gold); line-height:1;
  padding:2px 18px; border-radius:14px;
  background:rgba(232,198,106,.12); border:1px solid rgba(232,198,106,.4);
}
.ask-card{border-color:rgba(232,198,106,.45); background:rgba(232,198,106,.07)}
.reveal-row{display:flex; gap:10px; align-items:center; margin-top:12px}
.reveal-row input{flex:1}

.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  padding:10px 18px; border-radius:999px; cursor:pointer;
  color:var(--ink-dim); background:transparent;
  border:1px solid var(--line-strong); transition:.16s ease;
}
.chip:hover{background:var(--card-hi); color:var(--ink)}
.chip.on{background:var(--gold); border-color:var(--gold); color:#231a05}
.chip.other{opacity:.45; border-style:dashed}
.chip.other.on{opacity:.7}

.balls-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
  gap:9px; margin-top:16px; transition:.16s ease;
}
.balls-grid.off{opacity:.35; pointer-events:none}
/* לוח הכדורים הוא כדורי ביליארד אמיתיים: 1 עד 8 מלאים, 9 עד 15
   מפוספסים, בצבעים של השולחן. הכפתור עצמו רק מחזיק אותם */
.ballbtn{
  aspect-ratio:1; border-radius:50%; cursor:pointer; line-height:1;
  background:transparent; border:0; padding:0; transition:.16s ease;
  display:grid; place-items:center;
}
.ballbtn:hover{transform:translateY(-2px) scale(1.05)}
.ballbtn:active{transform:scale(.96)}
.ball.fit{width:100%; height:100%}
.ball.fit .pip{width:46%; height:46%; font-size:.44em}
/* הקטורזה מסומן בטבעת זהב, והכדור שכבר הוכנס דוהה */
.ballbtn.catorce{box-shadow:0 0 0 3px var(--gold), 0 0 18px rgba(232,198,106,.5);
  border-radius:50%}
.ballbtn.used{opacity:.28}
.ballbtn.used:hover{transform:none}

.rival-item.picked{background:rgba(232,198,106,.1)}
.pick-mark{color:var(--gold)}

/* פנקס הסשן — טבלה משותפת */
.table-wrap{width:100%; overflow-x:auto}
table.ledger{border-collapse:collapse; width:100%; min-width:420px; white-space:nowrap}
table.ledger th, table.ledger td{
  padding:12px 14px; text-align:center;
  border-bottom:1px solid var(--line);
}
table.ledger th{color:var(--ink-faint)}
table.ledger th:first-child, table.ledger td:first-child{text-align:start; color:var(--ink-faint)}
/* --badge-w ו---sc-w נקבעים ב-alignSessCols() לפי הרחב ברשימה,
   כדי שהתגים והסכומים יעמדו זה מעל זה בכל השורות */
#nSessList .sess > .badge{min-width:var(--badge-w, auto); justify-content:center}
#nSessList .sess > .sc{min-width:var(--sc-w, auto); text-align:start}

table.ledger tbody tr:hover{background:var(--card-hi)}
/* קו לאורך כל הטבלה: משחק/זוכה/קופה מצד אחד, השחקנים מהצד השני */
table.ledger th:nth-child(3), table.ledger td:nth-child(3){
  border-inline-end:1px solid var(--line-strong);
}
table.ledger tr.live-row td{color:var(--ink-faint)}
table.ledger tr.live-row td .amt{opacity:.75}
table.ledger tfoot td{
  border-bottom:0; border-top:2px solid var(--line-strong);
  padding-top:16px;
}
.amt.up{color:var(--win)}
.amt.down{color:var(--loss)}

/* ---------- ניהול ---------- */
.admin-user{display:flex; flex-direction:column; gap:14px; padding:22px 4px; border-bottom:1px solid var(--line)}
.admin-user:last-of-type{border-bottom:0}
.admin-top{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.admin-top .who{flex:1; min-width:0}
.admin-top .meta{color:var(--ink-faint); margin-top:2px}
.tag-pill{padding:5px 14px; border-radius:999px; background:rgba(232,198,106,.14); color:var(--gold)}
.admin-user .err:empty{display:none; margin:0; min-height:0}
.admin-fields{display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:10px}
.admin-actions{display:flex; gap:10px}
.admin-actions .btn{width:auto}

/* מתג הקטורזה המתחלפת */
.setting-card{display:flex; flex-direction:column; gap:10px}
.switch{display:flex; align-items:center; gap:11px; cursor:pointer; color:var(--ink); user-select:none}
.switch:hover{color:var(--ink)}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .track{
  width:44px; height:26px; border-radius:999px; flex:none;
  background:rgba(0,0,0,.4); border:1px solid var(--line-strong);
  display:flex; align-items:center; padding:2px; transition:.18s ease;
}
.switch .knob{
  width:18px; height:18px; border-radius:50%; background:var(--ink-faint);
  transition:.18s ease; transform:translateX(0);
}
.switch input:checked + .track{background:rgba(232,198,106,.3); border-color:var(--gold)}
.switch input:checked + .track .knob{background:var(--gold); transform:translateX(-18px)}

/* כל נתוני הפריים בכרטיס אחד: תווית מעל ערך, שלושה בשורה
   העליונה ושניים בתחתונה. ערך לצד תווית היה צפוף מדי בטלפון. */
/* שלוש האפשרויות תמיד על שורה אחת, גם במסך צר */
.chips-3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.chips-3 .chip{padding-inline:6px; text-align:center; white-space:nowrap; min-width:0}

.frame-meta{display:flex; flex-direction:column; gap:16px}
.fm-row{display:grid; gap:10px}
.fm-3{grid-template-columns:repeat(3,1fr)}
.fm-2{grid-template-columns:repeat(2,1fr)}
.fm{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0}
.fm-k{color:var(--ink-dim); white-space:nowrap}
.fm-v{
  color:var(--gold); line-height:1; white-space:nowrap;
  min-width:0; padding:6px 14px; border-radius:14px;
  background:rgba(232,198,106,.08); border:1px solid rgba(232,198,106,.28);
}
.fm-ask{cursor:pointer; background:rgba(232,198,106,.14)}
.fm-ask:hover{background:rgba(232,198,106,.24)}
.fm-off{color:var(--ink-faint); border-color:var(--line); background:none}

/* ההכרזה על הקטורזה של המשחק */
.catorce-banner-row{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:4px 0 2px; text-align:center; flex-wrap:wrap;
}
.phys-block{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.catorce-num{
  color:var(--gold); line-height:1;
  min-width:64px; padding:4px 16px; border-radius:14px;
  border:1px solid rgba(232,198,106,.5); background:rgba(0,0,0,.28);
}

/* טקס ההגרלה */
.ceremony{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center;
  background:radial-gradient(60% 60% at 50% 45%, rgba(20,60,44,.94), rgba(4,14,10,.97));
  opacity:0; transition:opacity .4s ease; cursor:pointer;
}
.ceremony.in{opacity:1}
.ceremony-inner{
  display:flex; flex-direction:column; align-items:center;
  width:min(92vw,440px); padding:0 max(16px,4vw);
}
.ceremony-stage{position:relative; width:min(74vw,320px); aspect-ratio:1; display:grid; place-items:center; flex:none}
.ceremony .halo{position:absolute; inset:0; width:100%; height:100%}
.ceremony .spin{animation:spin 26s linear infinite; transform-origin:200px 200px}
.ceremony .spin-slow{animation:spin 44s linear infinite reverse; transform-origin:200px 200px}
@keyframes spin{to{transform:rotate(360deg)}}

.ceremony-num{
  position:relative; color:var(--gold);
  transform:scale(2.4); transition:transform .5s cubic-bezier(.34,1.5,.64,1), text-shadow .5s ease;
  text-shadow:0 0 24px rgba(232,198,106,.5);
}
.ceremony-num.settled{transform:scale(3.2); text-shadow:0 0 46px rgba(244,216,136,.95)}

.ceremony-text{text-align:center; margin-top:clamp(8px,2vh,16px); max-width:34ch}
.ceremony-word{color:var(--ink-dim)}
.ceremony-sub{color:var(--ink-dim); margin-top:8px; line-height:1.6}
.ceremony-rhyme{
  color:var(--gold); text-align:center; line-height:1.15;
  margin-top:clamp(12px,3vh,24px); padding:0 max(16px,4vw);
  text-shadow:0 0 34px rgba(232,198,106,.4);
  opacity:0; animation:rhyme-in .45s ease .1s forwards;
}
.ceremony-rhyme:empty{display:none}
@keyframes rhyme-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.candles{position:absolute; bottom:-4%; display:flex; gap:190px}
.candles i{
  width:16px; height:26px; display:block;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%, #fff6d8, var(--gold) 45%, #b8933c 80%);
  filter:blur(.4px);
  animation:flicker 1.6s ease-in-out infinite alternate;
}
.candles i:last-child{animation-delay:.5s}
@keyframes flicker{
  from{transform:scaleY(1) translateY(0); opacity:.85}
  to{transform:scaleY(1.22) translateY(-3px); opacity:1}
}

/* המספר האישי על כל המסך */
.reveal-screen{
  position:fixed; inset:0; z-index:96; display:grid; place-items:center;
  background:radial-gradient(70% 70% at 50% 40%, #10402e, #04120c 85%);
  opacity:0; transition:opacity .3s ease; padding:24px;
}
.reveal-screen.in{opacity:1}
.reveal-inner{display:flex; flex-direction:column; align-items:center; gap:clamp(24px,6vh,52px); text-align:center}
.reveal-num{
  color:var(--gold); line-height:1;
  transform:scale(4); transform-origin:center;
  text-shadow:0 0 60px rgba(232,198,106,.45);
  margin:clamp(30px,9vh,80px) 0;
}
.reveal-warn{margin:0; max-width:34ch; color:var(--ink-dim); line-height:1.7}
.reveal-rhyme{
  color:var(--gold); text-align:center; line-height:1.15;
  margin:-8px 0 4px; padding:0 max(16px,4vw);
  text-shadow:0 0 34px rgba(232,198,106,.4);
}
.big-msg .reveal-inner{padding:0 max(20px, 6vw); width:100%; max-width:100%}
.big-msg-text{
  color:var(--gold); text-align:center; line-height:1.2;
  max-width:100%; overflow-wrap:break-word; hyphens:none;
  text-shadow:0 0 50px rgba(232,198,106,.45);
  animation:msg-pop .5s cubic-bezier(.34,1.5,.64,1) both;
}
@keyframes msg-pop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}

.msg-stars{display:flex; justify-content:center; gap:clamp(8px,3vw,20px); margin-bottom:clamp(18px,5vh,40px)}
.msg-stars span{
  width:clamp(26px,7vw,44px); height:clamp(26px,7vw,44px);
  background-repeat:no-repeat; background-size:contain; background-position:center;
  animation:star-in .6s cubic-bezier(.34,1.5,.64,1) both, star-spin 6s linear infinite 0.6s;
}
@keyframes star-in{from{transform:scale(0) rotate(-90deg); opacity:0} to{transform:scale(1) rotate(0); opacity:1}}
@keyframes star-spin{to{transform:rotate(360deg)}}
.reveal-inner .btn{width:auto; padding-inline:36px}

/* חלון ההחלטה — המשחק עוצר עד שעונים */
.modal-back{
  position:fixed; inset:0; z-index:92;
  display:grid; place-items:center; padding:24px;
  background:rgba(4,14,10,.86); backdrop-filter:blur(7px);
}
@keyframes fade-in{from{opacity:0} to{opacity:1}}
.modal-card{
  width:min(94vw,460px); text-align:center;
  padding:clamp(24px,5vw,36px);
  background:linear-gradient(180deg, rgba(20,60,44,.98), rgba(9,32,23,.98));
  border:1px solid rgba(232,198,106,.5); border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-card .sub{margin-inline:auto}
.waiting-dots{display:flex; justify-content:center; gap:9px; margin-top:22px}
.waiting-dots i{
  width:10px; height:10px; border-radius:50%; background:var(--gold);
  animation:urge 1.1s ease-in-out infinite;
}
.waiting-dots i:nth-child(2){animation-delay:.18s}
.waiting-dots i:nth-child(3){animation-delay:.36s}
@keyframes urge{0%,100%{opacity:.25; transform:translateY(0)} 50%{opacity:1; transform:translateY(-5px)}}

.iconbtn{
  width:76px; height:76px; margin:0 auto 10px; padding:0; display:grid; place-items:center;
  background:rgba(232,198,106,.10); color:var(--gold);
  border:1px solid rgba(232,198,106,.5); border-radius:50%; cursor:pointer;
}
.iconbtn:hover{background:rgba(232,198,106,.2)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:38px; height:38px}

.askclock{margin:20px 0 10px; line-height:1}
.askclock .num{color:var(--gold); animation:clock-beat 1s ease-in-out infinite}
@keyframes clock-beat{0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.09)}}

.ceremony-close{width:auto; padding-inline:32px; margin-top:clamp(16px,3vh,26px)}

/* ---------- סוף משחק: התוצאה שלי ---------- */
.result-cer .reveal-inner{position:relative; gap:clamp(10px,2.5vh,20px); padding:0 max(20px,6vw)}
.result-cer.win{background:radial-gradient(75% 70% at 50% 42%, #17563d, #04120c 88%)}
.result-cer.lose{background:radial-gradient(75% 70% at 50% 42%, #3a1618, #0b0405 88%)}

.res-halo{
  position:absolute; top:50%; left:50%; width:min(92vw,460px); aspect-ratio:1;
  transform:translate(-50%,-58%); opacity:.5; pointer-events:none;
}
.res-halo svg{width:100%; height:100%}
.res-halo .spin{animation:spin 26s linear infinite; transform-origin:200px 200px}
.res-halo .spin-slow{animation:spin 44s linear infinite reverse; transform-origin:200px 200px}

/* ענן כבד לצד המפסיד */
.res-cloud{
  position:absolute; top:50%; left:50%; width:min(88vw,420px); aspect-ratio:1;
  transform:translate(-50%,-58%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,125,125,.16), rgba(255,125,125,0) 68%);
  animation:sink 5s ease-in-out infinite alternate;
}
@keyframes sink{from{transform:translate(-50%,-60%) scale(1)} to{transform:translate(-50%,-52%) scale(1.06)}}

.res-word{position:relative; text-align:center; line-height:1.15}
.result-cer.win  .res-word{color:var(--gold)}
.result-cer.lose .res-word{color:var(--loss)}

.res-amount{
  position:relative; line-height:1; text-align:center;
  transform:scale(2.4); transform-origin:center;
  margin:clamp(26px,7vh,64px) 0;
}
.result-cer.win .res-amount{
  color:var(--win); text-shadow:0 0 50px rgba(93,220,154,.6);
  animation:res-pop .6s cubic-bezier(.34,1.6,.64,1) both;
}
.result-cer.lose .res-amount{
  color:var(--loss); text-shadow:0 0 40px rgba(255,125,125,.35);
  animation:res-drop .7s cubic-bezier(.36,.07,.5,1) both;
}
@keyframes res-pop{
  from{transform:scale(.4); opacity:0}
  to{transform:scale(2.4); opacity:1}
}
@keyframes res-drop{
  0%{transform:translateY(-40px) scale(2.4); opacity:0}
  60%{transform:translateY(6px) scale(2.4); opacity:1}
  75%{transform:translateY(-3px) scale(2.4)}
  100%{transform:translateY(0) scale(2.4); opacity:1}
}

.res-sub{position:relative; color:var(--ink-dim); text-align:center}
.res-close{position:relative; width:auto; padding-inline:36px; margin-top:clamp(14px,4vh,30px)}

/* כרטיס הקישור לצפייה */
.tv-share{border-color:rgba(232,198,106,.4); background:rgba(232,198,106,.06)}
.tv-share input{direction:ltr; text-align:left}

/* ---------- מסך צפייה ----------
   אי אפשר לגלול בטלוויזיה. המסך מצויר על בד קבוע של 1920x1080
   ומוקטן כיחידה אחת — כך הכל נכנס תמיד, וגם הריפודים והכדורים
   קטנים יחד עם הטקסט במקום להישאר גדולים ולדחוף החוצה.
   שלושת סגנונות הטקסט נשארים שלושה: רק המשתנים מכוילים. */
.tv-mode{--size-text:34px; --size-display:136px}
body.tv-mode{overflow:hidden}
.tv-mode main{
  position:fixed; inset:0; margin:0; padding:0;
  max-width:none; width:100%; height:100%; overflow:hidden;
}

/* מרכוז דרך translate ולא דרך grid: הבד גדול מהמסך, ו-grid היה
   דוחף אותו לפינה במקום למרכז אותו */
.tv-screen{
  position:absolute; top:50%; left:50%;
  width:1920px; height:1080px; padding:44px;
  transform:translate(-50%,-50%) scale(var(--tv-scale,1));
  transform-origin:center;
  display:grid; grid-template-rows:auto auto 1fr; gap:26px;
}

/* השם למעלה הוא זיהוי, לא נתון */
.tv-head{
  --size-display:58px;
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
}
.tv-brand{color:var(--gold)}
/* מספר המשחק באמצע, באותו גודל כמו שם האפליקציה */
.tv-game{flex:1; text-align:center; color:var(--ink); line-height:1}

/* כל נתון גדול בקופסה משלו, זו לצד זו */
.tv-band{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:26px}
.tv-cell{
  min-width:0;
  display:flex; align-items:center; justify-content:center; gap:26px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 32px;
}
.tv-cell .note{text-align:end}
.tv-band.asking .tv-ask{border-color:rgba(232,198,106,.45); background:rgba(232,198,106,.06)}
.tv-big{color:var(--gold); line-height:1}
.tv-pot{color:var(--win)}
.tv-ask .tv-big{color:var(--ink)}
.tv-ask .askclock{margin:.08em 0 0}

/* שתי הטבלאות זו לצד זו, בתוך הבד */
.tv-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; min-height:0}
.tv-col{display:flex; flex-direction:column; gap:16px; min-height:0; overflow:hidden}
.tv-mode .card{padding:30px}
.tv-mode table.ledger{min-width:0}
.tv-ledger{flex:1; min-height:0; overflow:hidden}
.tv-mode .ledger-note{display:none}
/* כותרת העמודה הראשונה: משחק ברוחב, # בצר */
.th-narrow{display:none}
.tv-mode .nplayer .nm{color:var(--ink)}
/* logFit() מודד את .tv-log-in ומכווץ אותו בדיוק לגובה הבלוק */
.tv-log{flex:1; min-height:0; overflow:hidden}
/* logFit() מכייל את ה-zoom. min-width:0 חובה: בלי זה טור עם שורה
   ארוכה גונב רוחב מהשני והם יוצאים לא שווים. */
.tv-log-in{
  display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;
}
.tv-log-in > *{min-width:0}
.tv-log-in.one{grid-template-columns:1fr}
.tv-log-in .sess{border-width:0}

/* צר או גבוה מ-16:9: חוזרים לזרימה רגילה, בלי בד קבוע */
@media (max-aspect-ratio:5/4){
  body.tv-mode{overflow:auto}
  .tv-mode{--size-text:17px; --size-display:clamp(30px,5.2vw,46px)}
  .tv-mode main{position:static; display:block; height:auto; padding:20px 14px 90px}
  .tv-screen{
    position:static; width:auto; height:auto; padding:0; transform:none;
    grid-template-rows:none; gap:16px;
  }
  .tv-head{--size-display:clamp(30px,5.2vw,46px)}
  .tv-log-in{grid-template-columns:1fr; gap:16px}
  .tv-band{grid-auto-flow:row; gap:16px}
  .tv-cols{grid-template-columns:1fr; gap:16px}
  .tv-col{overflow:visible}
  .tv-mode .card{padding:clamp(16px,4vw,26px)}
}

/* ---------- קונפטי ---------- */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden}
.confetti i{
  position:absolute; top:-24px; border-radius:2px;
  animation-name:confetti-fall; animation-timing-function:linear; animation-fill-mode:forwards;
}
.confetti i.star{
  border-radius:0; background-repeat:no-repeat;
  background-size:contain; background-position:center;
}
@keyframes confetti-fall{
  0%{transform:translateY(-24px) rotate(0deg); opacity:1}
  100%{transform:translateY(104vh) rotate(760deg); opacity:.85}
}

/* ---------- הודעה צפה ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:rgba(12,32,24,.96); border:1px solid var(--line-strong);
  color:var(--ink); padding:14px 26px; border-radius:999px;
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:.25s ease; z-index:80;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.sin{border-color:rgba(255,125,125,.6); color:#ffd9d9; background:rgba(60,16,16,.96)}
.toast.bless{border-color:rgba(232,198,106,.7); color:#231a05; background:linear-gradient(180deg,#f4d888,var(--gold))}

@media (max-width:680px){
  /* בטלפון: שם האפליקציה מימין, שם המשתמש באמצע, יציאה משמאל */
  .topbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; row-gap:10px}
  .brand{justify-self:start}
  .brand-user{
    justify-self:center; text-align:center;
    border:0; padding:0; margin:0; color:var(--ink);
  }
  .topbar-right{justify-self:end}
  .seg{grid-column:1 / -1; order:3; width:100%; justify-content:center}

  /* המסך צר: הכותרת והכפתורים בשורות נפרדות, כדי ששניהם ייכנסו יחד */
  .session-head{flex-direction:column; align-items:stretch}
  .head-actions{width:100%; justify-content:flex-start}
  .row-2{grid-template-columns:1fr}
  .session-actions{grid-template-columns:1fr}
  .admin-fields{grid-template-columns:1fr 1fr}
  .scoreboard{gap:4px; padding-left:2px; padding-right:2px}
  .side{padding:10px 2px}
  /* שורה אחת לכל השורה: התאריך הוא היחיד שמתכווץ, וכל השאר
     — תג, סכום וחץ — שומרים על רוחבם */
  .sess{flex-wrap:nowrap; gap:8px}
  .sess > .badge, .sess > .sc, .sess > .chev{flex:none}
  .sess > .date{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sess .badge{padding-inline:10px}

  /* הפנקס נכנס לרוחב המסך בלי גלילה. table-layout:fixed הוא מה
     שמבטיח את זה: העמודות מתחלקות ברוחב הקיים במקום להימתח לפי
     התוכן, והשמות נשברים בתוך התא. */
  table.ledger{min-width:0; table-layout:fixed; --size-text:14px}
  table.ledger th, table.ledger td{padding:10px 2px}
  table.ledger th:first-child, table.ledger td:first-child{width:40px; padding-inline:2px}
  .th-wide{display:none}
  .th-narrow{display:inline}
  /* עמודת הזוכה יורדת במסך צר — הסכום הירוק כבר מספר מי לקח */
  table.ledger th:nth-child(2), table.ledger td:nth-child(2){display:none}
  /* הכותרות מוצגות במלואן — נשברות לשתי שורות אם צריך, לא נחתכות.
     הסכומים לעולם לא נשברים: 200- בשתי שורות נקרא כמו מספר אחר. */
  table.ledger th{white-space:normal; overflow-wrap:anywhere; vertical-align:bottom}
  table.ledger td{white-space:nowrap}
  /* בשישה שחקנים כבר אין רווח בין סכומים תלת-ספרתיים, אז קו מפריד
     ביניהם: 100-100- צמודים נקראים כמו מספר אחד */
  table.ledger th:nth-child(n+4), table.ledger td:nth-child(n+4){
    border-inline-start:1px solid var(--line);
  }
}

/* מתחת ל-380 אין מקום לתאריך, לתג ולסכום תלת-ספרתי יחד. מוותרים
   על המילה 'ניצחונות' ומשאירים את המספר — עדיף מתאריך שנחתך. */
@media (max-width:380px){
  .wins-word{display:none}
}

/* רישום ידני של משחקים, ותיקון צעד */
.manual-add{display:flex; gap:10px; align-items:center}
.manual-add .btn{flex:1; min-width:0}
.manual-add input{flex:none; width:72px; text-align:center}
.manual-names{display:flex; flex-wrap:wrap; gap:8px}
.manual-names .btn{width:auto}
.tv-type{margin-top:10px}
.tv-type b{color:var(--gold, #d9b25f); letter-spacing:.08em}

/* קופסת הפאול, שנלחצה בטעות כי היא נראתה כמו כל השאר. עכשיו היא
   אדומה מלאה — אי אפשר להתבלבל בינה לבין כפתור ההכנסה */
.foul-card{border-color:#ff5560;
  background:linear-gradient(160deg,#8d1420 0%,#5d0d16 60%,#43090f 100%);
  box-shadow:0 10px 30px rgba(140,20,30,.35)}
.foul-card .section, .foul-card .note{color:#fff}
.foul-card .note{opacity:.9}
.foul-title{text-align:center; letter-spacing:.02em; font-size:22px;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.foul-card .chip{border-color:rgba(255,255,255,.5); color:#fff;
  background:rgba(0,0,0,.22)}
.foul-card .chip:hover{background:#fff; color:#7d1019; border-color:#fff}
.manual-sum{margin-top:6px}
.manual-row{display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid var(--line)}
.manual-row .nm{flex:1; min-width:0}
.manual-row .steps{display:flex; align-items:center; gap:6px; flex:none}
.manual-row .steps .btn{width:34px; padding:5px 0; text-align:center}
.manual-row .cnt{min-width:58px; text-align:center; color:var(--ink-dim)}
.manual-row.total{border-top-color:var(--line-strong); font-weight:600}
.manual-row.total .cnt{color:var(--gold)}

/* חור המנעול. המסכה היא שגדלה — החור נפתח ועובר את גבולות המסך,
   וכך נכנסים פנימה במקום שהמנעול יתנפח מולנו */
.reveal-screen.keyhole{background:#04120c; padding:0; overflow:hidden}
.keyhole .kh-scene, .keyhole .kh-mask{position:absolute; inset:0; width:100%; height:100%}
.keyhole .kh-scene svg{width:100%; height:100%; display:block}
.keyhole .kh-scene{transform:scale(1.35); transition:transform 1.5s cubic-bezier(.3,.7,.3,1)}
.keyhole.in .kh-scene{transform:scale(1)}

.keyhole .kh-mask{transform:scale(.34); transform-origin:50% 46%;
  transition:transform 1.25s cubic-bezier(.55,.02,.72,.4), opacity .3s ease 1.05s}
.keyhole.in .kh-mask{transform:scale(11); opacity:0}
.keyhole .kh-rim{opacity:.9}

.keyhole .kh-cap{position:absolute; left:0; right:0; bottom:5vh; text-align:center;
  opacity:0; transition:opacity .4s ease .95s}
.keyhole.in .kh-cap{opacity:1}
.keyhole .kh-warn{margin:0 auto}
.keyhole .kh-rhyme{margin:.4em auto 0}

/* המספר יושב בעיגול הלבן של הכדור, ולכן הוא כהה וקטן — כמו על
   כדור אמיתי, ולא כמו כותרת */
.keyhole .kh-num{font-family:'Bebas Neue',Impact,sans-serif; font-size:20px;
  fill:#141414; letter-spacing:.02em}
.keyhole .kh-star{transform-origin:100px 110px; animation:kh-pose 3.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.keyhole .kh-boa{transform-origin:100px 122px; animation:kh-sway 2.6s ease-in-out infinite}
.keyhole .kh-shades{animation:kh-glint 3.4s ease-in-out infinite}
.keyhole .kh-spark{animation:kh-twinkle 1.9s ease-in-out infinite; opacity:0}

@keyframes kh-pose{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-3px) rotate(1.4deg)}}
@keyframes kh-sway{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}
@keyframes kh-glint{0%,88%,100%{opacity:1} 93%{opacity:.55}}
@keyframes kh-twinkle{0%,100%{opacity:0; transform:scale(.4)}
  50%{opacity:.9; transform:scale(1)}}

/* מי שביקש פחות תנועה נכנס ישר פנימה, בלי הנסיעה ובלי הנדנוד */
.keyhole.still .kh-scene{transform:none; transition:none}
.keyhole.still .kh-mask{display:none}
.keyhole.still .kh-cap{opacity:1; transition:none}
.keyhole.still .kh-star, .keyhole.still .kh-boa,
.keyhole.still .kh-shades, .keyhole.still .kh-spark{animation:none}
.keyhole.still .kh-spark{opacity:.7}

/* הקטורזה על מסך הטלוויזיה — כדור אמיתי, לא ספרה */
.tv-cat{display:flex; justify-content:center; align-items:center; line-height:1}
.tv-cat .ball{width:96px; height:96px;
  width:clamp(64px,9vw,120px); height:clamp(64px,9vw,120px)}
.tv-cat .ball .pip{width:46%; height:46%;
  font-size:34px; font-size:clamp(22px,3.2vw,46px)}

/* טבלאות ספירה בסיכום הסשן — פס באורך יחסי לגבוה ביותר */
.countbar{flex:1; min-width:40px; height:8px; margin:0 12px;
  background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden}
.countbar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold))}