/* =========================================================
   שיבוץ לכיבוד · חסלט
   ========================================================= */
:root{
  --green:#6FB23C;
  --green-d:#4f8f2a;
  --green-l:#8fce5a;
  --green-glow:rgba(111,178,60,.5);
  --ink:#161616;
  --ink-soft:#3a3a3a;
  --paper:#ffffff;
  --bg-1:#eef7e6;
  --bg-2:#d6ecc2;
  --muted:#7c8a73;
  --danger:#d6483b;
  --wa-bg:#e5ddd5;
  --wa-bar:#075e54;
  --wa-recv:#ffffff;
  --wa-link:#f3f4f6;
  --radius:20px;
  --shadow:0 16px 38px rgba(30,55,15,.18);
  --shadow-sm:0 6px 16px rgba(30,55,15,.12);
  --font:'Rubik',-apple-system,'Segoe UI',system-ui,sans-serif;
  --hand:'Gveret Levin','Rubik',cursive;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font); color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #fff 0%, var(--bg-1) 45%, var(--bg-2) 100%) fixed;
  min-height:100dvh; display:flex; justify-content:center; overflow-x:hidden; line-height:1.45;
}
.app{width:100%; max-width:540px; min-height:100dvh; padding:0; position:relative;}

.screen{display:none; animation:fadeUp .4s ease both;}
.screen.is-active{display:flex; flex-direction:column;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

/* =================== WHATSAPP =================== */
.wa{height:100dvh; background:var(--wa-bg);
  background-image:linear-gradient(rgba(229,221,213,.94),rgba(229,221,213,.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d9cfc4' stroke-width='1'/%3E%3C/svg%3E");
}
.wa__bar{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--wa-bar); color:#fff; flex:0 0 auto;
  padding-top:max(10px,env(safe-area-inset-top));
}
.wa__back{font-size:26px; line-height:1; margin-inline-end:-2px;}
.wa__avatar{
  width:40px; height:40px; border-radius:50%; background:#cfd8cf;
  display:flex; align-items:center; justify-content:center; font-size:21px; flex:0 0 auto;
}
.wa__id{flex:1; display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.wa__id strong{font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wa__id span{font-size:12.5px; opacity:.85;}
.wa__icons{font-size:15px; opacity:.9; letter-spacing:4px;}

.wa__chat{flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 16px 10px; display:block;}
.wa__date,.wa__enc{margin:6px auto; display:table; background:#d9eafd; color:#3b6ea5;
  font-size:12px; font-weight:600; padding:4px 12px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.06);}
.wa__enc{background:#fdf4d3; color:#8a6d1a; text-align:center; max-width:85%;}

.msg{
  max-width:80%; display:block; width:fit-content; margin:0 0 8px auto;
  background:var(--wa-recv); border-radius:9px; padding:7px 10px 5px;
  box-shadow:0 1px 1px rgba(0,0,0,.12); position:relative;
  animation:msgIn .26s ease both;
}
.msg::before{content:""; position:absolute; top:0; right:-7px;
  border:7px solid transparent; border-top-color:var(--wa-recv); border-right:0;}
.msg__who{font-size:13px; font-weight:700; margin-bottom:2px;}
.msg__txt{font-size:14.5px; color:#111; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;}
.msg__txt .at{color:#1f8acb; font-weight:600;}
.msg__time{display:block; text-align:left; font-size:10.5px; color:#8aa; margin-top:1px;}
@keyframes msgIn{from{opacity:0; transform:translateY(8px) scale(.97);}to{opacity:1; transform:none;}}

/* typing indicator */
.typing{display:block; width:fit-content; margin:0 0 8px auto; background:var(--wa-recv); border-radius:9px; padding:11px 13px;
  box-shadow:0 1px 1px rgba(0,0,0,.12); display:flex; gap:4px;}
.typing span{width:7px; height:7px; border-radius:50%; background:#b6c0bb; animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

/* shared "link" card (the Google-Sheet-style invite) */
.linkcard{
  max-width:84%; display:block; width:fit-content; margin:0 0 8px auto; background:var(--wa-recv);
  border-radius:10px; box-shadow:0 1px 1px rgba(0,0,0,.12); overflow:hidden;
  cursor:pointer; animation:msgIn .26s ease both; border:1px solid #e7e7e7;
}
.linkcard__prev{display:flex; gap:10px; padding:10px; background:var(--wa-link); align-items:center;}
.linkcard__ico{width:42px; height:42px; border-radius:9px; background:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto;}
.linkcard__t{flex:1; min-width:0;}
.linkcard__t b{display:block; font-size:14px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.linkcard__t span{font-size:12px; color:#667;}
.linkcard__url{padding:7px 10px; font-size:12.5px; color:#1f8acb; word-break:break-all;
  display:flex; align-items:center; gap:6px; justify-content:space-between;}
.linkcard__lock{font-size:12px; color:#b00; font-weight:600;}
.linkcard.is-live{box-shadow:0 0 0 2px var(--green), 0 4px 14px var(--green-glow);}
.linkcard.is-live .linkcard__lock{color:var(--green-d);}
.linkcard.is-live{animation:livePulse 1.3s ease-in-out infinite;}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 var(--green-glow),0 0 0 2px var(--green);}50%{box-shadow:0 0 0 9px rgba(111,178,60,0),0 0 0 2px var(--green);}}

.wa__footer{flex:0 0 auto; padding:10px 12px max(12px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; background:#f0f0f0;}
.wa__hint{flex:1; text-align:center; font-weight:800; color:#fff; background:var(--green); font-size:14.5px;
  padding:11px 14px; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-sm); animation:nudge 1.1s ease-in-out infinite;}
.wa__hint:active{transform:translateY(2px);}
@keyframes nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.wa__skip{margin-inline-start:auto; border:none; background:#dfe3df; color:#445; font-weight:700;
  font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer;}

/* =================== TABLE =================== */
.screen--table{padding:16px 16px 36px; gap:4px;}
.topbar{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.titles{flex:1;}
.title{font-weight:900; font-size:clamp(23px,7vw,31px); letter-spacing:-.5px;}
.subtitle{color:var(--ink-soft); font-weight:500; font-size:14px;}

.logo-card{background:var(--paper); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:7px 9px; display:inline-flex; border:3px solid #fff; outline:3px solid var(--green); outline-offset:-3px;}
.logo-card img{display:block; width:100%; height:auto;}
.logo-card--mini{width:82px; flex:0 0 auto; padding:5px 7px; border-radius:13px; outline-width:2px;}
.result__logo{display:block; width:min(38%,140px); height:auto; margin:10px auto 0;}

.status{
  background:var(--ink); color:#fff; font-weight:700; font-size:14.5px;
  padding:10px 16px; border-radius:13px; margin:6px 0 12px; box-shadow:var(--shadow-sm);
  min-height:42px; display:flex; align-items:center; animation:pop .3s ease both;
}
.status.is-rush{background:var(--danger);}
.status b{color:var(--green-l);}
@keyframes pop{from{opacity:0; transform:scale(.95);}to{opacity:1; transform:scale(1);}}

.sheet{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; border:3px solid #fff; outline:3px solid var(--green); outline-offset:-3px;}
.sheet__head{display:flex; background:var(--green); color:#fff; font-weight:800; font-size:14px; padding:11px 14px;}
.sheet__h1{flex:1.2;} .sheet__h2{flex:1; padding-inline-start:6px;}

.rows{list-style:none;}
.row{display:flex; align-items:center; padding:10px 14px; min-height:56px;
  border-top:2px dashed #e8efe1; transition:background .25s;}
.row:nth-child(odd){background:#fafdf6;}
.row--clickable{cursor:pointer;}
.row--clickable:active{transform:scale(.995);}

.row__item{flex:1.2; display:flex; align-items:center; gap:10px;}
.row__item .emoji{font-size:25px; line-height:1; flex:0 0 auto; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12));}
.row__item .name{font-weight:700; font-size:14.5px;}
.row__item .name small{display:block; font-weight:500; font-size:11.5px; color:var(--muted);}

.row__who{flex:1; padding-inline-start:6px; min-height:30px; display:flex; align-items:center;}
.row__free{font-size:12.5px; font-weight:700; color:var(--green-d); background:#eaf6df; border-radius:999px; padding:3px 11px;}
.row__who .signed{font-family:var(--hand); font-size:19px; color:#2b4a8c; transform:rotate(-3deg);
  display:inline-block; animation:ink .28s ease both;}
@keyframes ink{from{opacity:0; transform:rotate(-3deg) scale(.6);}to{opacity:1; transform:rotate(-3deg) scale(1);}}
.row__who .taken-tag{font-size:10.5px; font-weight:800; color:var(--danger); border:2px solid var(--danger);
  border-radius:6px; padding:1px 6px; transform:rotate(-7deg); margin-inline-start:6px; background:rgba(255,255,255,.7);}

.row--snatched{background:#f4f4f2 !important;}
.row--snatched .row__item .name{color:var(--muted);}
.row--snatched .row__item .emoji{filter:grayscale(.7); opacity:.65;}
.flash{animation:flash .5s ease;}
@keyframes flash{0%{background:#fff3c4;}100%{}}

/* the rare win — you clicked a free row in time */
.row--win{background:#e6fbd9 !important; box-shadow:inset 0 0 0 2px var(--green);}
.row--win .signed{color:#1c7a1c;}

/* the final two absurd leftovers */
.row--left{background:#fff8ef !important; box-shadow:inset 0 0 0 2px #ffce8a;}
.row--left.dim{opacity:.55;}

.sponsor{margin-top:16px; text-align:center; color:var(--muted); font-size:13px; font-weight:500;}
.sponsor b{color:var(--green-d); font-weight:800;}

/* =================== RESULT =================== */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(18,28,12,.62); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:16px;}
.overlay.is-open{display:flex; animation:fade .3s ease both;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none;}

.result-card{position:relative; z-index:2; background:var(--paper); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px 20px; text-align:center; width:100%; max-width:430px; min-width:0;
  max-height:94dvh; overflow-y:auto; overflow-x:hidden; border:3px solid #fff; outline:4px solid var(--green); outline-offset:-4px;
  animation:cardIn .45s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes cardIn{from{opacity:0; transform:scale(.85) translateY(10px);}to{opacity:1; transform:none;}}
.result__stamp{display:inline-block; background:var(--ink); color:#fff; font-weight:800; font-size:13px;
  padding:5px 16px; border-radius:999px; transform:rotate(-2deg);}
.result__title{font-weight:900; font-size:clamp(22px,6.5vw,29px); margin-top:10px; line-height:1.15;}
.result__title .hl{color:var(--green-d);}
.result__sub{font-size:14.5px; color:var(--ink-soft); font-weight:500; margin:8px auto 0; max-width:340px;}

.result__left{display:flex; flex-direction:column; gap:9px; margin:16px 0 4px; text-align:start;}
.left-card{display:flex; align-items:center; gap:11px; background:#f6faf1; border:2px solid #e3eed5;
  border-radius:13px; padding:11px 13px; min-width:0;}
.left-card .e{font-size:27px; flex:0 0 auto;}
.left-card .t{flex:1; min-width:0;}
.left-card .t b{font-size:14.5px; display:block; overflow-wrap:anywhere;}
.left-card .t span{font-size:12px; color:var(--muted); overflow-wrap:anywhere;}
.left-card--veg{border-color:var(--green); background:#eef8e3;}
.left-card__tag{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px; flex:0 0 auto;}
.left-card--veg .left-card__tag{background:var(--green); color:#fff;}
.left-card--absurd .left-card__tag{background:#ffe0b3; color:#8a5a12;}

.result__brand{font-size:13.5px; color:var(--ink-soft); font-weight:500; margin:14px auto 0; max-width:360px; line-height:1.6;}
.result__brand b{color:var(--green-d); font-weight:800;}
.result__brand .wink{color:var(--muted); font-style:italic;}

.result__actions{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.btn{font-family:var(--font); font-weight:800; font-size:17px; color:#fff; border:none; border-radius:15px;
  padding:14px 26px; cursor:pointer; transition:transform .07s, box-shadow .07s, background .2s; user-select:none; width:100%;}
.btn:active{transform:translateY(4px);}
.btn--share{background:#25D366; box-shadow:0 6px 0 #1da851;}
.btn--share:hover{background:#33de74;} .btn--share:active{box-shadow:0 1px 0 #1da851;}
.btn--again{background:var(--ink); box-shadow:0 6px 0 #000;}
.btn--again:hover{background:#333;} .btn--again:active{box-shadow:0 1px 0 #000;}

.result__close{position:absolute; top:9px; left:9px; width:30px; height:30px; border-radius:50%; border:none;
  background:#eee; color:#555; font-size:14px; font-weight:800; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;}
.result__close:hover{background:#e0e0e0;}

.replay-fab{position:fixed; left:50%; transform:translateX(-50%); bottom:max(16px,env(safe-area-inset-bottom));
  z-index:45; border:none; background:var(--ink); color:#fff; font-weight:800; font-size:15px;
  padding:12px 24px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer;}
.replay-fab[hidden]{display:none;}
.replay-fab:active{transform:translateX(-50%) translateY(2px);}

/* =================== ABOUT =================== */
.overlay--about{z-index:80;}
.about-card{text-align:center;}
.logo-card--about{width:min(46%,168px); margin:2px auto 14px;}
.about__body{text-align:start;}
.about__body p{font-size:14.5px; color:var(--ink-soft); font-weight:500; line-height:1.62; margin-bottom:11px;}
.about__body p:last-child{margin-bottom:0;}

.btn--train{background:var(--green); box-shadow:0 6px 0 var(--green-d); margin-top:18px;}
.btn--train:hover{background:var(--green-l);} .btn--train:active{box-shadow:0 1px 0 var(--green-d);}

.about__social{margin-top:18px; padding-top:16px; border-top:1px dashed #e3eed5;}
.about__social-label{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:10px;}
.about__social-row{display:flex; justify-content:center; gap:14px;}
.about__social-row a{width:42px; height:42px; border-radius:50%; background:#f2f7ec; color:var(--green-d);
  display:flex; align-items:center; justify-content:center; transition:transform .12s, background .2s, color .2s;}
.about__social-row a:hover{background:var(--green); color:#fff; transform:translateY(-2px);}
.about__social-row a:active{transform:translateY(0);}
.about__social-row svg{width:21px; height:21px;}

/* discreet "about" entry points (kept intentionally low-key) */
.about-link{display:block; width:fit-content; margin:8px auto 0; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:11.5px; font-weight:600; color:var(--muted); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:#cdd8c4;}
.about-link:hover{color:var(--green-d);}
.sponsor__link{font:inherit; background:none; border:none; padding:0; cursor:pointer; color:var(--green-d); font-weight:800;
  text-decoration:underline; text-underline-offset:2px; text-decoration-color:transparent; transition:text-decoration-color .2s;}
.sponsor__link:hover{text-decoration-color:var(--green-d);}
.wa__id, .wa__icons{cursor:pointer;}

/* =================== toasts / mute =================== */
.toasts{position:fixed; left:0; right:0; bottom:78px; display:flex; flex-direction:column; align-items:center;
  gap:7px; pointer-events:none; z-index:60; padding:0 12px;}
.toast{background:var(--ink); color:#fff; font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:12px;
  box-shadow:var(--shadow); max-width:92%; animation:toastIn .3s ease both, toastOut .4s ease 1.8s both;}
.toast--burn{background:var(--danger);}
.toast .hand{display:inline-block; animation:grab .5s ease;}
@keyframes toastIn{from{opacity:0; transform:translateY(16px) scale(.9);}to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px) scale(.96);}}
@keyframes grab{0%{transform:rotate(0);}30%{transform:rotate(-25deg) translateY(-3px);}100%{transform:rotate(0);}}

.mute{position:fixed; top:max(10px,env(safe-area-inset-top)); left:10px; z-index:70; width:40px; height:40px;
  border-radius:50%; border:none; background:rgba(255,255,255,.92); box-shadow:var(--shadow-sm); font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;}
.mute.is-muted{opacity:.55;}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; animation-iteration-count:1 !important;}}

/* =================== DESKTOP: phone mockup (WhatsApp intro only) =================== */
@media (min-width:760px){
  /* phone frame ONLY while the WhatsApp chat is showing */
  body[data-screen="chat"]{
    align-items:center; padding:28px 16px;
    background:radial-gradient(130% 100% at 50% 0%, #d4ecbf 0%, #a9d48c 55%, #7fb862 100%) fixed;
  }
  body[data-screen="chat"] .app{
    width:392px; max-width:392px; height:min(92vh,840px); min-height:0;
    border:13px solid #15171a; border-radius:54px;
    box-shadow:0 34px 70px rgba(20,45,10,.42), 0 2px 0 rgba(255,255,255,.15) inset;
    overflow:hidden;
    background:radial-gradient(120% 90% at 50% -10%, #fff 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  }
  body[data-screen="chat"] .wa{height:100%;}
  body[data-screen="chat"] .screen.is-active{height:100%;}
  /* table & result: normal, readable desktop layout (no phone frame) */
  body[data-screen="table"] .app{max-width:600px;}
}