/* ============================================================
   שלושה סגנונות טקסט בלבד, כמו בקטורזה:
   1  כותרת  — Heebo 800,  clamp(30px,5.2vw,46px)
   2  טקסט   — Heebo 600,  17px
   3  ספרות  — Bebas Neue 400, clamp(30px,5.2vw,46px)
   הפלטה: לבד ירוק של שולחן, זהב לז'יטונים, ואדום/שחור לסמלים.
   ============================================================ */
: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:#0f3d2e;
  --felt-2:#061410;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);
  --card:rgba(255,255,255,.055);
  --card-hi:rgba(255,255,255,.09);
  --ink:#f4f1e8;
  --ink-dim:rgba(244,241,232,.72);
  --ink-faint:rgba(244,241,232,.48);
  --gold:#d9b25f;
  --gold-deep:#a8842f;
  --red:#e23b47;
  --win:#5fd39a;
  --loss:#ff7d7d;
  --r-lg:20px;
  --r-md:13px;
  --shadow:0 18px 44px rgba(0,0,0,.5);
}

body, input, button, textarea, select{
  font-family:var(--f-ui); font-weight:600;
  font-size:var(--size-text); line-height:1.55;
}

h1.display, .hero-num, .big-name, .sum-word, .sect-break > span{
  font-family:var(--f-ui); font-weight:800;
  font-size:var(--size-display); line-height:1.1; margin:0;
}

.fig, .money, .amt, .chip-num, .stat-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%; max-width:100%}
html{overflow-x:hidden}
body{margin:0; color:var(--ink); background:#050f0c;
  -webkit-font-smoothing:antialiased; overflow-x:clip}
/* שם ארוך נשבר במקום לדחוף את העמוד הצידה */
.nm, .note, .section, .display{overflow-wrap:anywhere}

.felt{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%, #17553f 0%, var(--felt-1) 40%, var(--felt-2) 100%);
}
.felt::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size:4px 4px, 4px 4px; background-position:0 0, 2px 2px;
}

.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; gap:12px;
  padding:12px clamp(14px,4vw,28px);
  backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, rgba(6,20,16,.92), rgba(6,20,16,.5));
  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-chip{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:repeating-conic-gradient(var(--red) 0 22.5deg, #f6f2e8 0 45deg);
  box-shadow:inset 0 0 0 4px #f6f2e8, inset 0 0 0 6px var(--red), 0 3px 10px rgba(0,0,0,.5);
}
/* השם של מי שמחובר הוא מה שכתוב שם — אין יותר תווית לצידו */
.brand-user{color:var(--gold)}
.topbar-right{display:flex; gap:8px}
.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(217,178,95,.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}
.hidden{display:none !important}

main{max-width:860px; margin:0 auto; padding:clamp(20px,5vw,40px) clamp(14px,4vw,26px) 90px}
.stack{display:flex; flex-direction:column; gap:clamp(14px,3vw,20px)}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(16px,4vw,26px); box-shadow:var(--shadow);
}
.section{color:var(--ink-dim); margin:0}
.note{color:var(--ink-faint); margin:0}
.accent{color:var(--gold)}
.empty{color:var(--ink-faint); text-align:center; padding:40px 0}
.err{color:var(--loss); min-height:22px; margin:0}

.btn{
  width:100%; border:0; border-radius:14px; padding:15px 20px;
  cursor:pointer; transition:.16s ease;
}
.btn-primary{
  background:linear-gradient(180deg, var(--gold), var(--gold-deep));
  color:#2a1e06; box-shadow:0 10px 26px rgba(217,178,95,.25);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-line{background:transparent; color:var(--ink); border:1px solid var(--line-strong)}
.btn-line:hover{background:var(--card-hi)}
.btn-danger{background:transparent; color:var(--loss); border:1px solid rgba(255,125,125,.4)}
.btn-sm{padding:9px 16px; width:auto}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* כותרת ושדה על אותה שורה. minmax(0,1fr) הוא מה שמרשה לשדה
   להצטמצם — בלעדיו הוא נשאר ברוחב התוכן שלו וגולש החוצה. */
.fld{display:grid; grid-template-columns:max-content minmax(0,1fr);
  align-items:center; gap:12px; margin-bottom:10px}
.fld > span:first-child{color:var(--ink-dim); white-space:nowrap}
.fld.range{display:grid; grid-template-columns:max-content minmax(0,1fr);
  align-items:center; gap:12px; margin-bottom:10px}
.fld.range .range-in{display:flex; align-items:center; gap:8px; min-width:0}
.fld.range .range-in input{min-width:0; flex:1}
.fld.range .sep{color:var(--ink-faint); flex:none}
input, select, textarea{
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
  background:rgba(0,0,0,.28); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:13px 15px;
}
input:focus, select:focus, textarea:focus{outline:0; border-color:var(--gold)}
input[type=number]{-moz-appearance:textfield}

/* שדות תאריך ושעה מיישרים את הערך לימין, מתחת לכותרת שלו, בזמן
   שהספרות עצמן נשארות בסדר שלהן */
input[type=time]{direction:rtl; overflow:hidden; padding:11px 12px}

/* הבורר פרוש על כל התיבה, והטקסט מתחתיו הוא זה שנראה — כך אין לו
   רוחב מינימלי משלו שידחוף את העמוד הצידה. רק הספרות שלו מוסתרות,
   ולא הוא כולו: appearance:none היה מוחק גם את אייקון הלוח, ובלעדיו
   כרום לא פותח את הבורר בלחיצה ואין על מה ללחוץ. */
.datewrap{position:relative; display:block; min-width:0;
  background:rgba(0,0,0,.28); border:1px solid var(--line);
  border-radius:12px; padding:11px 14px; overflow:hidden}
.datewrap:focus-within{border-color:var(--gold)}
/* הכיתוב מיושר לימין, אז שומרים לאייקון מקום בקצה השני */
.datetext{display:block; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; padding-inline-end:24px}
.datewrap input[type=date]{position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent; cursor:pointer}
.datewrap input[type=date]:focus{border:0}
.datewrap input[type=date]::-webkit-datetime-edit{opacity:0}
.datewrap input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute; inset-block:0; left:12px; margin:auto 0;
  opacity:.5; cursor:pointer; filter:invert(1)}
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit{direction:ltr; flex:1; min-width:0;
  text-align:right; overflow:hidden}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{flex:none; margin:0}

/* ---------- מסך כניסה ---------- */
.auth-wrap{display:grid; gap:clamp(18px,4vw,28px); align-content:start; min-height:70vh}
.auth-hero .suits{display:flex; gap:10px; margin-bottom:14px}
.auth-hero .suits span{font-size:26px; line-height:1}
.suit-red{color:var(--red)}
.suit-dark{color:#f4f1e8}
.seg{display:flex; background:rgba(0,0,0,.3); border:1px solid var(--line);
  border-radius:999px; padding:5px; gap:4px}
.seg button{flex:1; border:0; background:transparent; color:var(--ink-dim);
  border-radius:999px; padding:10px; cursor:pointer}
.seg button.on{background:linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#2a1e06}

/* ---------- סיכום ---------- */
.hero{text-align:center; display:grid; gap:6px}
.hero-num{color:var(--gold); line-height:1}
.hero-num.up{color:var(--win)} .hero-num.down{color:var(--loss)}
.hero .stat-num{transform:scale(1.7); transform-origin:center; display:inline-block;
  margin:clamp(14px,3vh,26px) 0 clamp(10px,2vh,18px)}

.standings{display:flex; flex-direction:column; gap:8px}
.stand-row{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  background:rgba(0,0,0,.2); border-radius:12px;
}
.stand-row .rank{color:var(--ink-faint); min-width:22px}
.stand-row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stand-row .amt{font-size:22px}
.up{color:var(--win)} .down{color:var(--loss)} .flat{color:var(--ink-dim)}

/* ---------- רשימת סשנים ---------- */
.mini-list{display:flex; flex-direction:column; gap:8px}
.sess{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  color:inherit; padding:12px 15px; border-radius:12px; background:rgba(0,0,0,.2);
  border:1px solid transparent; cursor:pointer; transition:.16s ease;
}
.sess:hover{background:var(--card-hi); border-color:var(--line)}
.sess .when{flex:1; min-width:0; color:var(--ink-dim);
  display:flex; flex-wrap:wrap; gap:0 8px; align-items:baseline}
.sess .w-day{white-space:nowrap}
.sess .w-sub{color:var(--ink-faint); min-width:0}
.sess .amt{flex:none; font-size:22px}
.sess .chev{flex:none; color:var(--ink-faint)}

/* יוצא מן הכלל אחד לשלושת הסגנונות: שם הפנקס. סואץ הוא סריף
   עברי כבד, והזהב נמשח על האותיות עצמן */
h1.home-title{
  font-family:"Suez One", var(--f-ui), serif; font-weight:400;
  font-size:clamp(46px, 10.4vw, 86px); line-height:1.02; letter-spacing:.01em;
  text-align:center; margin:8px 0 20px;
  background:linear-gradient(178deg, #f6e4b0 0%, var(--gold) 42%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold);
  filter:drop-shadow(0 3px 22px rgba(217,178,95,.30));
}

/* קו מפריד עם כותרת באמצע */
.sect-break{display:flex; align-items:center; gap:16px; margin:34px 0 6px}
.sect-break::before, .sect-break::after{content:''; flex:1; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold-deep), transparent)}
.sect-break > span{color:var(--gold); white-space:nowrap;
  text-shadow:0 2px 18px rgba(217,178,95,.35)}
/* אותו קו, בלי כותרת — סוגר את הבלוק שמעליו */
.sect-rule{height:3px; border-radius:2px; margin:20px 0 10px;
  background:linear-gradient(90deg, transparent, var(--gold-deep), transparent)}

.list-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}

/* ---------- טבלת שחקנים בסשן ---------- */
.prow{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .amt{font-size:24px}
.prow.me .nm{color:var(--gold)}

.sess-hours{color:var(--ink-dim); margin-top:4px}
.slang{color:var(--gold); margin-top:10px; opacity:.85}
.hero .slang{margin-top:6px}
.hh-tag{font-size:12px; color:var(--gold); border:1px solid rgba(217,178,95,.45);
  border-radius:999px; padding:2px 8px; margin-inline-start:8px; white-space:nowrap}
.due-pick{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.due-pick .who{display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.amt-edit{display:flex; align-items:center; gap:6px; flex:none}
.amt-edit .signbtn{height:38px; width:38px; flex:none}
.prow .amt-in{width:92px; margin:0; padding:8px 10px; text-align:end}

/* ---------- סינדי ---------- */
.up-next .btn{margin-top:14px}
.up-line{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.up-line .stat-num{font-size:34px}
/* איפה ומי מצד אחד, מתי מהצד השני */
.up-split{display:flex; align-items:center; justify-content:space-between; gap:16px}
.up-where{display:flex; flex-direction:column; gap:4px; min-width:0}
.up-where .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.up-when{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none}
.up-when .cindy-clock{font-size:44px; margin:0}

.cindy-count{text-align:center; padding:6px 0 2px}
.cindy-clock{font-family:'Bebas Neue',system-ui,sans-serif; font-size:64px;
  line-height:1; letter-spacing:.02em; color:var(--gold); margin:6px 0 8px}
@keyframes cindyRing{0%,100%{opacity:1} 50%{opacity:.12}}
.cindy-clock.ring{color:var(--red); animation:cindyRing .6s steps(1,end) infinite;
  cursor:pointer}

.cindy{padding:16px; border:1px solid var(--line-strong);
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
.cindy.done{opacity:.6; border-color:var(--line)}
.cindy-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--line)}
.cindy-at{font-family:'Bebas Neue',system-ui,sans-serif; font-size:40px;
  line-height:1; letter-spacing:.02em; color:var(--gold); flex:none}
.cindy.done .cindy-at{color:var(--ink-dim)}
/* בערב שנגמר השעה ניתנת לתיקון: סבב שנרשם בדיעבד כמעט אף פעם
   לא נופל בדיוק על המשבצת שהלוח הציע */
.cindy-at-in{flex:none; width:116px; margin:0; padding:9px 10px;
  font-family:'Bebas Neue',system-ui,sans-serif; font-size:26px;
  line-height:1.2; letter-spacing:.02em; color:var(--gold)}
.cindy.done .cindy-at-in{color:var(--ink-dim)}
.cindy-head .note{flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.cindy-head .amt{font-size:20px; flex:none}
.stack-btns{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.pot-sums{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none;
  font-family:'Bebas Neue',system-ui,sans-serif; line-height:1.1}
.pot-sums .s-main{font-size:22px; color:var(--win)}
.pot-sums .s-side{font-size:16px; color:var(--gold); opacity:.85}
.cindy-head .x{background:transparent; border:1px solid var(--line); color:var(--ink-faint);
  border-radius:10px; width:34px; height:34px; cursor:pointer; flex:none}
.cindy-head .x:hover{color:var(--loss); border-color:rgba(255,125,125,.4)}
.cindy .pot-edit:last-of-type{margin-bottom:0}
/* סבב סגור: שורה אחת שאפשר לפתוח */
.cindy-brief{display:flex; align-items:center; gap:12px; width:100%;
  text-align:start; color:inherit; cursor:pointer}
.cindy-brief .nm{flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; color:var(--win)}
.cindy-brief:hover{border-color:var(--line-strong); opacity:.85}
.cindy-head.can-fold{cursor:pointer}

/* טבלת הסינדי ההיסטורית */
.ctable{display:flex; flex-direction:column; gap:2px}
.ctable-head, .ctable-row{display:grid; grid-template-columns:1fr 44px 44px minmax(90px,auto);
  gap:8px; align-items:center; padding:10px 12px; border-radius:10px;
  width:100%; text-align:start; color:inherit; border:1px solid transparent}
button.ctable-row{cursor:pointer; transition:.14s ease}
button.ctable-row:hover{background:var(--card-hi); border-color:var(--line)}
.ctable-head span:nth-child(2), .ctable-head span:nth-child(3),
.ctable-row span:nth-child(2), .ctable-row span:nth-child(3){text-align:center}
.ctable-head{color:var(--ink-faint); padding-bottom:4px}
.ctable-row{background:rgba(0,0,0,.2)}
.ctable-row.total{background:var(--card-hi); margin-top:6px}
.ctable .e{text-align:end; justify-self:end}
.ctable .amt{font-size:20px}
.ctable-head span:first-child, .ctable-row span:first-child{min-width:0}
/* אותה טבלה בשלוש עמודות — שם, זכיות, כסף */
.ctable.c3 .ctable-head, .ctable.c3 .ctable-row{grid-template-columns:1fr 56px minmax(90px,auto)}
.ctable.c3 .ctable-head span:nth-child(3),
.ctable.c3 .ctable-row span:nth-child(3){text-align:end}
.ctable-row.me{border-color:var(--line); background:var(--card-hi)}

/* תיבת ההכתבה ומה שהובן ממנה */
.card.talk textarea{width:100%; resize:vertical; min-height:76px; line-height:1.5}
.talk-out{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.talk-row{display:flex; gap:10px; align-items:flex-start; padding:8px 0}
.talk-row + .talk-row{border-top:1px solid var(--line)}
.talk-row.off{opacity:.5}
.talk-row .chipbtn{flex:none; padding:4px 10px; line-height:1.4}
.talk-row .chipbtn.on{border-color:var(--gold); color:var(--gold)}
.talk-what{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.talk-at{color:var(--ink-dim)}
.talk-what .nm{overflow:hidden; text-overflow:ellipsis}
.talk-raw{font-style:italic}
.talk-note{color:var(--gold)}
.talk-stat:empty{display:none}
.talk-stat{margin-top:6px}
.talk-row.done .nm{color:var(--ink)}
.talk-done{color:var(--win)}
.talk-saved{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.talk-mark{flex:none; width:22px; text-align:center; color:var(--ink-faint)}
.talk-mark.in{color:var(--win)}
.talk-pot{color:var(--ink-dim)}
.btn.on{border-color:var(--gold); color:var(--gold)}

.pot-edit{border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px;
  background:rgba(0,0,0,.16)}
.pot-edit .top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.pot-edit .top .nm{flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.pot-edit .top .note{flex:none}
.pot-edit .top input{flex:none; width:88px}
.pot-edit .top .amt{flex:none; font-size:22px}
.pot-edit .who{display:flex; flex-wrap:wrap; gap:6px}
.chipbtn{border:1px solid var(--line); background:transparent; color:var(--ink-dim);
  border-radius:999px; padding:7px 14px; cursor:pointer}
.chipbtn.on{background:rgba(217,178,95,.16); border-color:rgba(217,178,95,.5); color:var(--gold)}
.chipbtn.win{background:rgba(95,211,154,.16); border-color:rgba(95,211,154,.5); color:var(--win)}

/* ---------- עורך סשן ---------- */
.erow{display:grid; grid-template-columns:1fr 44px 96px auto; gap:6px; align-items:center;
  margin-bottom:8px}
.erow select, .erow input{margin:0}
.rrow{display:grid; grid-template-columns:1fr 44px 96px; gap:6px; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--line)}
.rrow:last-of-type{border-bottom:0}
.rrow .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rrow input{margin:0}
.newseat{display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:8px;
  align-items:center; margin-top:14px}
.newseat input{margin:0}
.fld.last{margin-bottom:0}
.erow .x{background:transparent; border:1px solid var(--line); color:var(--ink-faint);
  border-radius:10px; width:40px; height:40px; cursor:pointer; flex:none}
.erow .x:hover{color:var(--loss); border-color:rgba(255,125,125,.4)}
.balance{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}

/* ---------- גרף ---------- */
.graph{width:100%; height:210px; display:block}
.graph .axis{stroke:var(--line); stroke-width:1}
.graph .zero{stroke:var(--line-strong); stroke-width:1; stroke-dasharray:4 4}
.graph .line{fill:none; stroke:var(--gold); stroke-width:2.5;
  stroke-linejoin:round; stroke-linecap:round}
.graph .area{fill:url(#gfill); opacity:.35}
.graph .dot{fill:var(--gold)}
.graph .lbl{fill:var(--ink-faint); font-size:11px; font-family:var(--f-ui)}

/* ---------- ניהול ---------- */
.admin-row{display:flex; align-items:center; gap:10px; padding:12px 0;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.admin-row:last-child{border-bottom:0}
.admin-row .nm{flex:1; min-width:120px}
.tag{border:1px solid rgba(217,178,95,.4); color:var(--gold);
  border-radius:999px; padding:4px 12px}

.back-link{background:none; border:0; color:var(--ink-dim); cursor:pointer;
  padding:0; text-align:start}
.back-link:hover{color:var(--ink)}

@media (max-width:680px){
  .topbar{display:grid; grid-template-columns:1fr auto; align-items:center}
  .row-2{grid-template-columns:1fr}
  .erow{grid-template-columns:1fr 42px 78px auto}
}

/* כפתור הסימן: המקלדת המספרית בטלפון לא נותנת מינוס */
/* ירוק לרווח, אדום להפסד — הצבע הוא מה שמסגיר שאפשר ללחוץ */
.signbtn{background:transparent; border:1px solid rgba(95,211,154,.45); color:var(--win);
  border-radius:10px; height:44px; cursor:pointer; padding:0; font-size:18px}
.signbtn.neg{color:var(--loss); border-color:rgba(255,125,125,.45)}

/* בחירת שחקן: רשימה מסוננת, כי datalist כמעט לא עובד בטלפון */
.pickwrap{position:relative; min-width:0}
.picker{position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:20;
  background:#0d2b21; border:1px solid var(--line-strong); border-radius:12px;
  max-height:216px; overflow-y:auto; box-shadow:0 18px 40px rgba(0,0,0,.5)}
.picker[hidden]{display:none}
.picker button{display:block; width:100%; text-align:start; background:transparent;
  border:0; border-radius:0; color:var(--ink); padding:11px 14px; cursor:pointer}
.picker button:hover, .picker button.on{background:var(--card-hi); color:var(--gold)}
.picker .none{color:var(--ink-faint); padding:11px 14px}

/* היי האנד */
.hh{border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px;
  background:rgba(0,0,0,.16)}
.hh:last-of-type{margin-bottom:0}
.hh-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.hh-head .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hand-pick{margin:12px 0 0}
.hand-step{margin-bottom:10px}
.hand-step > .note{display:block; margin-bottom:6px}
.cardface{display:flex; flex-wrap:wrap; gap:6px}
.cardbtn{width:40px; height:56px; padding:0; flex:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#f5f2e9; color:#14201b; border:1px solid rgba(0,0,0,.4);
  border-radius:7px; font-family:'Bebas Neue',system-ui,sans-serif;
  font-size:24px; line-height:1; letter-spacing:.03em;
  box-shadow:0 2px 6px rgba(0,0,0,.32); transition:.14s ease}
.cardbtn:hover{transform:translateY(-2px)}
.cardbtn.on{color:#7a5a12; border-color:var(--gold); transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--gold), 0 10px 18px rgba(0,0,0,.45)}
.hh-said{color:var(--gold); margin-top:8px}

/* בטלפון גם השורה הכפולה נערמת, וכל שדה מקבל את הרוחב המלא */
@media (max-width:680px){
  label.fld{gap:10px}
  .row-2 > label.fld{margin-bottom:10px}
}

.fld > .amt-edit{justify-content:flex-start}
.fld > .amt-edit input{flex:1; min-width:0; text-align:end}