:root{--ink:#0f172a;--sky:#38bdf8;--good:#16a34a;--bad:#dc2626;--S:#2563eb;--P:#ea580c;--card:#fff;
 --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Hebrew",Arial,sans-serif;}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#7cc46a;font-family:var(--font);color:var(--ink);
 -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font-family:inherit;cursor:pointer}
.he,[lang=he]{font-family:var(--font)}
bdi{unicode-bidi:isolate}
/* HUD */
#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:6px;
 padding:calc(6px + env(safe-area-inset-top)) 8px 6px;pointer-events:none;z-index:5}
.hud-l,.hud-r{display:flex;gap:5px;align-items:center}
.chip{pointer-events:auto;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.92);border-radius:999px;
 padding:5px 9px;font-weight:800;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.15);border:0;color:var(--ink);min-height:34px}
.btn-ic{font-size:17px;padding:5px 9px;min-width:38px;justify-content:center}
.btn-ic:focus-visible,.btn:focus-visible,#act:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.bar{display:inline-block;width:44px;height:12px;border-radius:6px;background:#e2e8f0;overflow:hidden;border:1.5px solid #94a3b8}
.bar i{display:block;height:100%;width:100%;background:#22c55e;transition:width .25s,background .25s}
.coin{display:inline-block;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fef08a,#eab308 60%,#a16207);border:1.5px solid #a16207}
.combo{background:#fff7ed;color:#c2410c}
/* banner */
#banner{position:fixed;left:50%;transform:translateX(-50%);top:calc(50px + env(safe-area-inset-top));width:min(760px,calc(100% - 16px));
 background:rgba(255,255,255,.95);border-radius:16px;padding:8px 12px 7px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:4;text-align:center;pointer-events:none}
#bQ{font-size:clamp(18px,4.9vw,27px);font-weight:800;line-height:1.25}
#bQ .blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--ink);color:transparent}
#bQ .fill{color:var(--good);text-decoration:underline;text-decoration-thickness:3px}
#bQ .who{color:#64748b;font-weight:700}
#bQ .words{display:block;font-size:.66em;color:#475569;font-weight:700;margin-top:3px}
#bQ .built{color:#0f766e}
#bQ .slot{display:inline-block;min-width:1.6em;border-bottom:3px dashed #94a3b8;margin:0 2px}
#bHe{font-size:clamp(13px,3.5vw,16px);color:#334155;margin-top:3px;font-weight:600}
#bHe:empty{display:none}
/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%);top:120px;width:min(560px,calc(100% - 20px));
 background:#fff;border-radius:14px;padding:9px 13px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:6;font-size:16px;line-height:1.35;pointer-events:none;border:3px solid var(--bad)}
#toast.ok{border-color:var(--good)}
#toast .ans{font-weight:900;color:var(--good)}
#toast .x{font-weight:800;color:var(--bad);text-decoration:line-through}
#toast .he{display:block;margin-top:3px;color:#475569;font-size:14px}
#bigPop{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);font-size:clamp(28px,8vw,48px);font-weight:900;color:#fff;
 text-shadow:0 3px 0 #0f172a,0 0 12px rgba(0,0,0,.4);z-index:6;pointer-events:none;text-align:center;animation:pop .35s ease-out}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
/* action button */
#act{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));width:84px;height:84px;border-radius:50%;
 border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 70%);font-size:36px;box-shadow:0 5px 0 #b45309,0 8px 16px rgba(0,0,0,.25);z-index:5;touch-action:none}
#act:active,#act.down{transform:translateY(3px);box-shadow:0 2px 0 #b45309}
#act .k{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}
@media (pointer:fine){#act{width:70px;height:70px;font-size:30px}}
/* overlays & cards */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;padding:12px;overflow:auto}
.overlay.dim{background:rgba(15,23,42,.45)}
.overlay[hidden]{display:none}
.card{background:var(--card);border-radius:22px;padding:18px 18px 16px;width:min(560px,100%);max-height:calc(100% - 8px);overflow:auto;box-shadow:0 12px 36px rgba(0,0,0,.35);-webkit-user-select:text;user-select:text}
.card h2{margin:.1em 0 .3em;font-size:26px;text-align:center}
.card h3{margin:.2em 0 .5em}
.card p{line-height:1.45;margin:.45em 0}
.card .big-emo{font-size:56px;text-align:center;line-height:1}
.card .story{font-size:18px;background:#f0f9ff;border-radius:14px;padding:10px 12px;border-inline-start:5px solid var(--sky)}
.card .heline{font-size:16px;color:#334155}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.center{justify-content:center;text-align:center}
.btn{border:0;border-radius:14px;padding:12px 18px;font-size:18px;font-weight:800;background:#e2e8f0;color:var(--ink);box-shadow:0 3px 0 #94a3b8;min-height:48px}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #94a3b8}
.btn.primary{background:#22c55e;color:#fff;box-shadow:0 4px 0 #15803d}
.btn.big{font-size:22px;padding:14px 28px}
.btn.small{font-size:15px;padding:9px 14px;min-height:42px}
.btn.ghost{background:rgba(255,255,255,.9)}
.btn.wa{background:#25d366;color:#05351b;box-shadow:0 3px 0 #128c4a}
.btn.mail{background:#dbeafe;box-shadow:0 3px 0 #93c5fd}
.small{font-size:14px}.muted{color:#64748b}
.stagelist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.stagelist span{background:#f1f5f9;border-radius:999px;padding:5px 10px;font-weight:700;font-size:15px}
.ctl{background:#fefce8;border-radius:12px;padding:8px 10px;font-size:15px}
/* title */
#title{background:radial-gradient(ellipse at 50% 45%,rgba(12,74,110,.55),rgba(12,74,110,.25) 70%,rgba(0,0,0,.2))}
.title-wrap{width:min(560px,100%);text-align:center;color:#fff;background:rgba(8,47,73,.62);border-radius:26px;padding:18px 12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
h1{margin:0;line-height:1;text-shadow:0 4px 0 #0c4a6e,0 0 18px rgba(0,0,0,.25)}
h1 .t1{display:block;font-size:clamp(46px,13vw,84px);letter-spacing:-1px}
h1 .t2{display:block;font-size:clamp(24px,7vw,40px);color:#fde047;margin-top:4px}
.sub{font-size:18px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5);margin:12px 0}
.skins{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.skin{background:rgba(255,255,255,.92);border:3px solid transparent;border-radius:16px;padding:6px 4px 4px;width:76px;color:var(--ink);font-size:12px;font-weight:800}
.skin canvas{width:60px;height:52px;display:block;margin:0 auto}
.skin.on{border-color:#f59e0b;background:#fff}
.skin.locked{opacity:.6}
.title-wrap .small{text-shadow:0 1px 3px rgba(0,0,0,.7);min-height:1.2em}
.ctl-hint{font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.6);font-size:16px}
/* results */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.res-grid div{background:#f1f5f9;border-radius:12px;padding:8px;text-align:center;font-size:14px}
.res-grid b{display:block;font-size:24px}
.stars{font-size:40px;text-align:center;letter-spacing:4px}
.places{width:100%;border-collapse:collapse;font-size:15px}
.places td{padding:5px 4px;border-bottom:1px solid #e2e8f0}
details.misses{background:#fff7ed;border-radius:12px;padding:8px 12px;margin:8px 0}
details.misses li{margin:4px 0;font-size:14px}
/* send */
.send{background:#f0fdf4;border-radius:16px;padding:12px;margin-top:12px;border:2px solid #bbf7d0}
.send h3{margin:.1em 0 .4em}
.lbl{font-weight:700;display:block;margin-bottom:4px}
.txt{width:100%;font-size:18px;padding:11px 12px;border-radius:12px;border:2px solid #94a3b8;font-family:inherit}
.txt:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.3)}
.send-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.send-btns .btn{flex:1 1 140px}
.send-msg{color:var(--bad);font-weight:800;min-height:1em;margin:6px 0 0}
.ltr-code{direction:ltr;text-align:left;background:#f1f5f9;border-radius:10px;padding:8px 10px;font-family:ui-monospace,Menlo,monospace;font-size:14px}
/* diary */
.diary{background:#fffbeb;border-radius:14px;padding:12px;border:2px dashed #f59e0b}
.diary .line{font-size:19px;margin:10px 0;line-height:1.9}
.diary input{font-size:18px;width:9.5em;max-width:100%;padding:6px 8px;border-radius:10px;border:2px solid #94a3b8;font-family:inherit}
.diary input.ok{border-color:var(--good);background:#f0fdf4}
.diary input.bad{border-color:var(--bad);background:#fef2f2}
.diary .fb{display:block;font-size:15px;line-height:1.35}
.instr{background:#fef9c3;border-radius:12px;padding:8px 10px;font-weight:800;font-size:17px;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.chips .lab{font-size:14px;color:#64748b;font-weight:700}
.chips button{border:0;border-radius:999px;padding:8px 14px;font-size:17px;font-weight:800;background:#fde68a;box-shadow:0 2px 0 #d97706}
@media (max-width:420px){.chip{font-size:14px;padding:4px 7px;min-height:32px}.bar{width:34px}.btn-ic{min-width:34px;font-size:16px}}
@media (prefers-reduced-motion:reduce){#bigPop{animation:none}}