/* המדינה · משחק הקלפיות */
body[data-screen="play"],body[data-screen="end"]{background:var(--vx-bg);overflow:hidden}
body[data-screen="play"] .hm-hdr,body[data-screen="end"] .hm-hdr{display:none}
.g-sab{position:fixed;bottom:0;left:0;width:1px;height:env(safe-area-inset-bottom,0px);pointer-events:none;visibility:hidden}

/* ---------- start / hero ---------- */
.g-hero{position:relative;background:var(--vx-bg);color:#fff;overflow:hidden;padding:46px 0 54px;isolation:isolate}
.g-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.75}
.g-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,8,11,.0) 0%,rgba(7,8,11,.35) 35%,rgba(7,8,11,.94) 70%),
  linear-gradient(0deg,rgba(7,8,11,.9) 0%,rgba(7,8,11,0) 45%)}
.g-hero-in{position:relative}
.g-kick{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--f);letter-spacing:.03em;color:#fff;background:var(--red);padding:7px 11px;border-radius:999px;margin:0}
.g-title{font:900 clamp(56px,17vw,104px)/.9 var(--f);letter-spacing:-.045em;margin:18px 0 16px;text-wrap:balance}
.g-lede{font:500 clamp(18px,5vw,22px)/1.35 var(--f);color:rgba(255,255,255,.86);margin:0;max-width:20ch}
.g-best{display:inline-flex;gap:8px;align-items:center;margin:18px 0 0;font:700 14px/1 var(--f);color:rgba(255,255,255,.75);background:rgba(255,255,255,.08);border:1px solid var(--vx-line);padding:9px 14px;border-radius:999px}
.g-best b{color:#fff;font-weight:900;font-variant-numeric:tabular-nums}

.g-pick{padding-top:28px;padding-bottom:44px}
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:640px){.g-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
.g-card{position:relative;border:1px solid var(--hair);background:var(--snow);border-radius:18px;padding:14px 6px 13px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:var(--ink);transition:transform .16s cubic-bezier(.3,.7,.4,1.4),box-shadow .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.g-card:hover{border-color:transparent;box-shadow:0 10px 26px rgba(10,10,14,.12)}
.g-card:active{transform:scale(.95)}
.g-card b{font:800 14px/1.15 var(--f);letter-spacing:-.01em;text-wrap:balance}
.g-card small{font:500 12px/1.2 var(--f);color:var(--grey);margin-top:-5px;text-wrap:balance}
.g-card.picked{border-color:transparent;box-shadow:0 0 0 3px var(--c),0 14px 30px rgba(10,10,14,.18);transform:scale(1.03)}
.g-note{margin:18px 0 6px;font:600 13.5px/1.4 var(--f);color:var(--grey);text-align:center}
.g-link{display:block;margin:4px auto 0;background:none;border:0;color:var(--grey);font:600 13px/1 var(--f);text-decoration:underline;text-underline-offset:3px;padding:8px}

/* medallion (DOM) */
.med{--s:64px;display:block;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 6px 16px -6px var(--c)}
.med .mi{position:absolute;inset:calc(var(--s)*.06);border-radius:50%;overflow:hidden;box-shadow:0 0 0 calc(var(--s)*.03) #fff;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),transparent 60%),var(--c);display:grid;place-items:center;color:var(--t);font:800 calc(var(--s)*.33)/1 var(--f);letter-spacing:-.02em}
.med img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;max-width:none}

/* ---------- play ---------- */
.g-play{position:fixed;inset:0;z-index:10;background:radial-gradient(130% 55% at 50% -8%,#1c1e26 0%,#0b0c10 55%,#07080b 100%);touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden;color:#fff}
.g-play canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-hud{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,600px);padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none}
.g-hud-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g-score{display:flex;align-items:baseline;gap:7px;min-width:96px}
.g-score b{font:900 36px/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-block;transition:transform .12s}
.g-score b.bump{animation:bump .28s cubic-bezier(.3,.7,.4,1.6)}
.g-score span{font:700 12px/1 var(--f);color:rgba(255,255,255,.55)}
@keyframes bump{40%{transform:scale(1.22)}}
.g-lives{display:flex;gap:6px}
.g-lives svg{width:26px;height:20px;transition:opacity .3s,transform .3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.g-lives svg.lost{opacity:.18;transform:scale(.82) rotate(-8deg)}
.g-lives svg.hit{animation:lifehit .5s ease-out}
@keyframes lifehit{0%{transform:scale(1.5) rotate(10deg)}100%{transform:scale(.82) rotate(-8deg)}}
.g-tools{display:flex;align-items:center;gap:8px}
.g-time{font:800 17px/1 var(--f);font-variant-numeric:tabular-nums;min-width:26px;text-align:center;color:rgba(255,255,255,.9)}
.g-hud.low .g-time{color:var(--live)}
.g-ic{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.g-ic:active{transform:scale(.92)}
.g-timebar{height:4px;margin-top:11px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.g-timebar i{display:block;height:100%;background:#fff;border-radius:4px;transform-origin:100% 50%;will-change:transform}
.g-hud.low .g-timebar i{background:var(--live)}
.g-target{display:inline-flex;align-items:center;gap:8px;margin-top:11px;padding:4px 4px 4px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--vx-line);font:700 13px/1 var(--f);color:rgba(255,255,255,.75)}
.g-target b{color:#fff;font-weight:800}
.g-target .med{--s:26px;box-shadow:none}
.g-combo{position:absolute;top:calc(env(safe-area-inset-top,0px) + 132px);left:50%;transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;font:900 15px/1 var(--f);color:#fff;background:var(--red);padding:9px 15px;border-radius:999px;box-shadow:0 10px 30px rgba(219,0,0,.45);transition:opacity .2s,transform .25s cubic-bezier(.3,.7,.4,1.5);white-space:nowrap}
.g-combo.on{opacity:1;transform:translateX(-50%) scale(1)}
.g-combo.pop{animation:combopop .45s cubic-bezier(.3,.7,.4,1.6)}
.g-combo em{font-style:normal;font-size:22px;letter-spacing:-.02em}
@keyframes combopop{0%{transform:translateX(-50%) scale(1.5)}100%{transform:translateX(-50%) scale(1)}}
.g-count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:900 clamp(96px,32vw,160px)/1 var(--f);letter-spacing:-.05em;color:#fff;text-shadow:0 12px 40px rgba(0,0,0,.6)}
.g-count span{display:block;animation:countin .7s cubic-bezier(.2,.8,.3,1) both}
.g-count span.word{font-size:clamp(54px,16vw,92px);text-align:center;line-height:1.05}
.g-count span.word small{display:block;font:700 18px/1.4 var(--f);letter-spacing:0;color:rgba(255,255,255,.7);margin-top:8px}
@keyframes countin{0%{opacity:0;transform:scale(1.8)}35%{opacity:1;transform:scale(.95)}60%{transform:scale(1)}100%{opacity:1}}
.g-flash{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 90px 24px rgba(245,22,27,.75);background:rgba(245,22,27,.08)}
.g-flash.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:1}100%{opacity:0}}
.g-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;font:700 15px/1 var(--f);color:rgba(255,255,255,.7)}
.g-loading i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.g-pause{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,8,11,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:16px}
.g-pause-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.g-pause-card h2{font:900 34px/1.05 var(--f);letter-spacing:-.03em;margin:0 0 6px}
.g-pause-card .btn{min-width:230px}
.btn.light-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}

/* ---------- demo ---------- */
.g-demo{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(7,8,11,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fadein .25s ease-out}
@keyframes fadein{from{opacity:0}}
.g-demo-card{position:relative;width:min(100%,380px);background:#fff;color:var(--ink);border-radius:28px;padding:16px 16px 20px;box-shadow:0 30px 80px rgba(0,0,0,.5);text-align:center;animation:cardin .4s cubic-bezier(.2,.8,.3,1.1)}
@keyframes cardin{from{transform:translateY(24px) scale(.96);opacity:0}}
.g-skip{position:absolute;top:24px;left:24px;z-index:3;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 13px/1 var(--f);padding:8px 13px;border-radius:999px}
.g-demo-stage{position:relative;height:230px;border-radius:20px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#1c1e26,#07080b 70%)}
.g-demo-card h3{font:900 23px/1.15 var(--f);letter-spacing:-.02em;margin:16px 0 6px;text-wrap:balance}
.g-demo-card p{font:500 15px/1.45 var(--f);color:var(--grey);margin:0 6px 18px;min-height:44px;text-wrap:pretty}
.g-demo-next{width:100%;padding:16px}
.g-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.g-dots i{width:7px;height:7px;border-radius:7px;background:var(--hair);transition:width .25s,background .25s}
.g-dots i.on{width:22px;background:var(--ink)}
.d-box{transform-origin:50% 85%;position:absolute;bottom:-4px;left:50%;margin-left:-90px;width:180px;height:140px}
.d-item{position:absolute;top:0;left:50%}
.d-plus{direction:ltr;unicode-bidi:isolate;position:absolute;left:50%;bottom:118px;transform:translateX(-50%);font:900 26px/1 var(--f);color:#fff;opacity:0}
.d-minus{color:var(--live)}
.d-finger{position:absolute;bottom:4px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 8px rgba(255,255,255,.1)}
.d-arrows{position:absolute;top:44px;left:50%;transform:translateX(-50%);width:200px;color:rgba(255,255,255,.55)}
.d-lives{position:absolute;top:14px;right:14px;display:flex;gap:5px}
.d-lives svg{width:24px;height:18px}
.f1 .d-box,.f1 .d-finger{animation:dslide 2.4s ease-in-out infinite}
@keyframes dslide{0%,100%{transform:translateX(-70px)}50%{transform:translateX(70px)}}
.f2 .d-item{animation:dfall 2s cubic-bezier(.5,0,.8,.6) infinite}
.f2 .d-plus{animation:dplus 2s ease-out infinite}
.f2 .d-box,.f3 .d-box{animation:dsquash 2s ease-out infinite}
@keyframes dfall{0%{transform:translate(-50%,-70px) rotate(-10deg);opacity:0}8%{opacity:1}62%{transform:translate(-50%,112px) rotate(5deg) scale(1);opacity:1}72%{transform:translate(-50%,128px) scale(.25);opacity:0}100%{opacity:0}}
@keyframes dplus{0%,62%{opacity:0;transform:translate(-50%,10px)}70%{opacity:1;transform:translate(-50%,0)}95%{opacity:0;transform:translate(-50%,-30px)}100%{opacity:0}}
@keyframes dsquash{0%,62%{transform:none}68%{transform:scale(1.07,.93)}80%{transform:none}}
.f3 .d-item{animation:dbounce 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes dbounce{0%{transform:translate(-50%,-70px) rotate(-10deg);opacity:0}8%{opacity:1}60%{transform:translate(-50%,108px) rotate(5deg);opacity:1}78%{transform:translate(30px,40px) rotate(60deg);opacity:.9}100%{transform:translate(90px,120px) rotate(120deg);opacity:0}}
.f3 .d-lives svg:first-child{animation:dlife 2s ease-out infinite}
@keyframes dlife{0%,60%{opacity:1;transform:none}70%{transform:scale(1.4) rotate(10deg)}85%,100%{opacity:.18;transform:scale(.85) rotate(-8deg)}}
.f3 .g-x-mark{position:absolute;left:50%;bottom:116px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--live);display:grid;place-items:center;opacity:0;animation:dplus 2s ease-out infinite}

/* ---------- end ---------- */
.g-end{position:fixed;inset:0;z-index:20;overflow-y:auto;color:#fff;background:radial-gradient(90% 45% at 50% 24%,var(--glow,rgba(219,0,0,.25)) 0%,rgba(7,8,11,0) 70%),var(--vx-bg)}
.g-end-in{max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;align-items:center;text-align:center}
.g-end-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.g-end-top .wm{font-size:24px}
.g-end-tag{font:700 13px/1 var(--f);color:rgba(255,255,255,.6)}
.g-end-reason{margin:22px 0 14px;font:800 13px/1 var(--f);letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.1);padding:7px 12px;border-radius:999px}
.g-end-med .med{--s:108px;box-shadow:0 18px 50px -10px var(--c)}
.g-end-med{animation:medin .6s cubic-bezier(.2,.8,.3,1.3) both}
@keyframes medin{from{transform:scale(.6);opacity:0}}
.g-end-list{font:800 21px/1.2 var(--f);margin:14px 0 0;letter-spacing:-.01em}
.g-end-score{display:flex;flex-direction:column;align-items:center;margin-top:2px}
.g-end-score b{font:900 clamp(92px,30vw,128px)/.95 var(--f);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.g-end-score span{font:700 14px/1 var(--f);color:rgba(255,255,255,.55);margin-top:2px}
.g-newbest{margin:12px 0 0;font:900 13px/1 var(--f);color:var(--ink);background:var(--yel);padding:7px 12px;border-radius:999px;animation:countin .7s both .5s}
.g-end-caught{font:600 16px/1.4 var(--f);color:rgba(255,255,255,.82);margin:14px 0 0}
.g-end-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:18px}
.g-end-stats div{background:var(--vx-card);border:1px solid var(--vx-line);border-radius:16px;padding:12px 8px;display:flex;flex-direction:column;gap:6px}
.g-end-stats b{font:900 24px/1 var(--f);font-variant-numeric:tabular-nums}
.g-end-stats span{font:600 12.5px/1 var(--f);color:rgba(255,255,255,.55)}
.g-rank{margin:12px 0 0;width:100%;font:800 15px/1.3 var(--f);background:#fff;color:var(--ink);border-radius:14px;padding:12px}
.g-end-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:20px}
.g-end-btns .g-share-main{grid-column:1/-1;padding:17px;font-size:17px;box-shadow:0 12px 30px -8px rgba(219,0,0,.7)}
.g-end-btns .btn{padding:15px 10px}
.g-social{display:flex;justify-content:center;gap:10px;margin-top:16px}
.g-social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff}
.g-social a:active{transform:scale(.92)}
.g-social.dark a{background:var(--soft);color:var(--ink)}

/* ---------- sheets ---------- */
.g-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.g-sheet-bg{position:absolute;inset:0;background:rgba(7,8,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadein .2s}
.g-sheet-panel{position:relative;width:min(100%,520px);max-height:88vh;overflow-y:auto;background:#fff;color:var(--ink);border-radius:26px 26px 0 0;padding:22px 18px calc(env(safe-area-inset-bottom,0px) + 22px);animation:sheetin .32s cubic-bezier(.2,.8,.3,1)}
@media (min-width:640px){.g-sheet{align-items:center}.g-sheet-panel{border-radius:26px}}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}}
.g-sheet-panel h3{font:900 22px/1.1 var(--f);margin:0 0 6px;letter-spacing:-.02em}
.g-sub{margin:0 0 12px;color:var(--grey);font:500 14px/1.4 var(--f)}
.g-x{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center}
.g-credits{list-style:none;margin:0;padding:0}
.g-credits li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair);font:500 13.5px/1.35 var(--f);color:var(--grey)}
.g-credits li b{display:block;color:var(--ink);font-weight:800;font-size:14.5px}
.g-credits .med{--s:40px;box-shadow:none}
.g-share-panel{text-align:center}
.g-share-img{width:min(62%,250px);aspect-ratio:9/16;margin:12px auto 10px;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.25);background:var(--vx-bg)}
.g-share-hint{font:500 13.5px/1.45 var(--f);color:var(--grey);margin:0 0 14px}
.g-share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-share-row .btn{padding:14px 8px}

.g-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,20px);z-index:80;background:var(--ink);color:#fff;font:700 14px/1 var(--f);padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.g-toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .f1 .d-box,.f1 .d-finger,.f2 .d-item,.f3 .d-item{animation-duration:2.4s!important}
}
.g-play::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(env(safe-area-inset-top,0px) + 120px);background:linear-gradient(#0b0c10 30%,rgba(11,12,16,0));z-index:1;pointer-events:none}
.g-hud{z-index:2}
.g-pause,.g-loading{z-index:4}.g-combo,.g-count,.g-flash{z-index:3}