/* חיים בבועה · v7 games (מרוץ המטבעות, צובעים את השביל) */
.g3 .g3-pick .lvl-pick{margin:2px auto 8px}
.g3-wrap{background:#a9dcff}
.g3-wrap canvas{touch-action:none}
.g3-card .g3-lvlnote{display:inline-block;margin:0 0 8px;padding:3px 12px;border-radius:999px;background:#eef5ff;color:#1E64C8;font-weight:800;font-size:.95rem}
.g3-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.g3-actions .btn[hidden]{display:none}
.g3-pad{margin-top:10px}
#coins .g2-hud .cn-hearts{letter-spacing:1px}
/* paint */
.pt-top{display:flex;align-items:stretch;gap:10px;background:#fff;border:3px solid #e3eefb;border-radius:20px;padding:6px 12px 6px 8px;margin:0 0 10px}
.pt-haim{flex:0 0 auto;width:54px;height:84px;display:flex;align-items:flex-end;justify-content:center}
.pt-haim img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.22));transform-origin:50% 100%}
.pt-haim.boing img{animation:boing .7s ease}
.pt-haim.sad img{animation:shake .5s ease}
.pt-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.pt-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:800;color:#28466f;font-size:1rem;flex-wrap:wrap}
.pt-row b{color:var(--blue2,#1E64C8);font-size:1.15em}
.pt-mv.warn{color:#e2335a}.pt-mv.warn b{color:#e2335a}
.pt-par{font-weight:600;color:#6b7f9c;font-size:.8em}
.pt-bar{position:relative;height:16px;border-radius:999px;background:#eef3fa;overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.08)}
.pt-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:999px;transition:width .25s ease}
.pt-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#0d2a55}
.pt-say{font-weight:700;color:#0d2a55;font-size:.95rem;min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-say.pop{animation:g3-pop .35s cubic-bezier(.2,.9,.3,1.5)}
@keyframes g3-pop{from{transform:scale(.85);opacity:.3}to{transform:none;opacity:1}}
.pt-wrap{background:#5cbf4a}
.pt-pad{direction:ltr;display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". u ." "l d r";gap:8px;justify-content:center;margin:12px auto 4px}
.pt-pad button{height:58px;border-radius:18px;border:0;background:#fff;box-shadow:0 5px 0 #cfe2fa;font-size:1.6rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pt-pad button:active,.pt-pad button.hit{transform:translateY(4px);box-shadow:0 1px 0 #cfe2fa}
.pt-pad [data-d=up]{grid-area:u}.pt-pad [data-d=left]{grid-area:l}.pt-pad [data-d=down]{grid-area:d}.pt-pad [data-d=right]{grid-area:r}
.pt-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:8px 0 2px;direction:rtl}
.pt-lvb{border:0;border-radius:14px;min-height:52px;padding:4px 2px;background:linear-gradient(180deg,#6fbaf5,#2a72d4);box-shadow:0 4px 0 #1a4f9e;color:#fff;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;touch-action:manipulation}
.pt-lvb b{font-size:1.2rem;font-weight:800}
.pt-lvb i{font-style:normal;font-size:.72rem;letter-spacing:1px;color:#FFE678;min-height:.9em}
.pt-lvb.next{background:linear-gradient(180deg,#ffe98a,#ffc61a);color:#0d2a55;box-shadow:0 4px 0 #d39b00;animation:g3-glow 1.4s ease-in-out infinite}
.pt-lvb.next i{color:#c47a00}
.pt-lvb.lock{background:#dfe7f2;box-shadow:0 4px 0 #c3cfdf;color:#8a9ab3;cursor:default}
.pt-lvb:active:not(.lock){transform:translateY(3px);box-shadow:0 1px 0 #1a4f9e}
@keyframes g3-glow{50%{transform:scale(1.06)}}
.pt-tip{margin-top:4px}
html.a11y-motion .pt-lvb.next,html.a11y-motion .pt-say.pop,html.a11y-motion .pt-haim img{animation:none!important}
html.a11y-contrast .pt-top,html.a11y-contrast .pt-pad button{background:#000!important;color:#fff!important;border-color:#fff!important}
@media (min-width:700px){.pt-levels{grid-template-columns:repeat(5,64px);justify-content:center}}
.g3-card.pt-menu-card img.g2-cardhaim{height:72px}
.g3-card.pt-menu-card p{margin:2px 0 4px}
.pt-wrap .g2-over{align-items:center}
.pt-haim{height:70px;width:46px}
.pt-top{padding:5px 12px 5px 8px}

/* ---------- v8: iframe games (games/<id>/) full-screen ---------- */
.kid-card.hbx{display:none}
html.js-arcade .game-panel.hbx.gp-open{display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom);overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:contain;background:#bfe3ff}
.game-panel.hbx.gp-open>.gp-bar{margin:0;flex:0 0 auto;max-width:none}
.game-panel.hbx.gp-open>iframe{display:block;flex:1 1 auto;width:100%;max-width:none;min-height:0;height:auto;border:0;margin:0;background:#bfe3ff url(img/logo.webp) center/180px auto no-repeat}

/* ---------- v8: about thumbnail = still frame where Haim's head and kippah are whole, with gentle life ---------- */
.about-still-wrap img.about-still{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 100%;animation:abBreath 6s ease-in-out infinite}
@keyframes abBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ab-bub{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 18%),radial-gradient(circle,rgba(200,235,255,.08) 0 58%,rgba(140,200,255,.5) 82%,rgba(255,255,255,.9) 95%,rgba(255,255,255,0) 100%);opacity:0;animation:abRise 7s linear infinite}
.ab1{width:9%;aspect-ratio:1;left:30%;bottom:42%;animation-delay:0s}
.ab2{width:6%;aspect-ratio:1;left:38%;bottom:48%;animation-delay:1.8s}
.ab3{width:11%;aspect-ratio:1;left:22%;bottom:50%;animation-delay:3.6s}
.ab4{width:7%;aspect-ratio:1;left:44%;bottom:44%;animation-delay:5.2s}
@keyframes abRise{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translate(-30%,-260%) scale(1.15)}}
html.a11y-motion .about-still-wrap img.about-still,html.a11y-motion .ab-bub{animation:none}
html.a11y-motion .ab-bub{display:none}
@media (prefers-reduced-motion:reduce){.about-still-wrap img.about-still,.ab-bub{animation:none}.ab-bub{display:none}}

/* the accessibility button moves into the top bar while an iframe game is open, so it never covers game controls */
body.hbx-on .a11y-fab{top:calc(11px + env(safe-area-inset-top));bottom:auto;left:12px;width:44px;height:44px;border-width:2px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
body.hbx-on .a11y-fab svg{width:26px;height:26px}

/* ---------- v16 HBStage: stage card / pass banner / final card for the page games ---------- */
.hbst { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; font-family: inherit; direction: rtl; }
.hbst-card-wrap { background: rgba(10, 30, 70, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 16px; }
.hbst-card { background: linear-gradient(180deg, #fff, #eaf4ff); border-radius: 24px; box-shadow: 0 14px 40px rgba(0,0,0,.3); padding: 18px 18px 16px; width: min(340px, 92vw); text-align: center; color: #0d2a55; animation: hbstIn .35s cubic-bezier(.2,1.4,.4,1) both; }
.hbst-card.boss { background: linear-gradient(180deg, #fff6d6, #ffe08a); }
.hbst-card.won { background: linear-gradient(180deg, #fffbe8, #ffe678); }
.hbst-n { font-size: 1.7rem; font-weight: 800; color: #1E64C8; line-height: 1.2; }
.hbst-end .hbst-n { font-size: 1.35rem; }
.hbst-dots { display: flex; gap: 4px; justify-content: center; margin: 8px 0 6px; direction: ltr; flex-direction: row-reverse; }
.hbst-dots i { width: 14px; height: 14px; border-radius: 50%; background: #d4e3f7; display: block; }
.hbst-dots i.boss { border-radius: 4px; }
.hbst-dots i.ok { background: #3cc46b; }
.hbst-dots i.now { background: #FFB800; box-shadow: 0 0 0 3px rgba(255,184,0,.35); transform: scale(1.15); }
.hbst-goal { font-size: 1.15rem; font-weight: 700; margin: 6px 0 2px; }
.hbst-tw { font-size: .95rem; color: #3b5a85; margin: 4px 0; }
.hbst-best { font-size: .9rem; color: #7a5a00; font-weight: 700; margin: 6px 0 2px; }
.hbst-score { font-size: 1.3rem; font-weight: 800; margin: 4px 0; }
.hbst-stars { font-size: 2rem; letter-spacing: 4px; margin: 4px 0; }
.hbst-legend { font-size: .75rem; color: #6b7f99; margin: 2px 0 6px; }
.hbst-go { margin-top: 10px; font-size: 1.15rem; min-width: 150px; }
.hbst-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hbst-pass { pointer-events: none; }
.hbst-pass-in { background: rgba(255,255,255,.96); border-radius: 22px; padding: 14px 26px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: hbstIn .4s cubic-bezier(.2,1.5,.4,1) both; display: flex; flex-direction: column; gap: 2px; }
.hbst-pass-in b { font-size: 2rem; color: #1E64C8; }
.hbst-pass-in span { font-size: 1rem; color: #0d2a55; font-weight: 600; }
.hbst-pass-in em { font-style: normal; font-weight: 800; color: #1a9a4a; font-size: 1.05rem; }
.hbst-chance .hbst-pass-in b { color: #e0731a; }
.hbst-chip { display: inline-block; background: #1E64C8; color: #fff; border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: .9rem; white-space: nowrap; }
.hbst-chip.boss { background: #e0a400; }
@keyframes hbstIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hbst-card, .hbst-pass-in { animation: none; } }
.mem-card.mem-mix .mem-inner{animation:memMix .45s ease}@keyframes memMix{30%{transform:scale(.8) rotate(-8deg)}60%{transform:scale(1.05) rotate(6deg)}}
.pu-hole.pu-gold .pu-who img{filter:drop-shadow(0 0 6px #ffd400) drop-shadow(0 0 2px #ffb000)}.pu-hole.pu-gold{box-shadow:0 0 0 3px #ffd400 inset}

/* v20: stage toast — a small banner at the top edge; never covers the play area, never takes a tap */
.hbst-toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; z-index: 9500; pointer-events: none; direction: rtl; font-family: inherit; text-align: center;
  transform: translate(-50%, -140%); opacity: 0; transition: transform .32s cubic-bezier(.2,1.4,.4,1), opacity .2s; width: max-content; max-width: min(92vw, 420px);
  background: linear-gradient(180deg, #3e93e3, #1E64C8); color: #fff; border: 3px solid #fff; border-radius: 18px; padding: 6px 16px 7px; box-shadow: 0 8px 22px rgba(13,42,85,.35); display: flex; flex-direction: column; gap: 1px; }
.hbst-toast.on { transform: translate(-50%, 0); opacity: 1; }
.hbst-toast b { font-size: 1.05rem; font-weight: 900; color: #FFE678; line-height: 1.2; }
.hbst-toast small { font-size: .78rem; font-weight: 800; opacity: .9; }
.hbst-toast em { font-style: normal; font-size: .82rem; font-weight: 700; color: #dff0ff; }
.hbst-toast.boss { background: linear-gradient(180deg, #ff9a3c, #e0531a); }
.hbst-toast.win { background: linear-gradient(180deg, #2fbf71, #1a9a4a); }
.hbst-toast .hbfx-cf, .hbst-toast canvas { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hbst-toast { transition: opacity .2s; } }

/* v20: simon spin twist */
#simon-grid { transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
#simon-grid.simon-spin { transform: rotate(180deg); }