/* Aleph Spark play site (spark.architestra.site, owner 2026-11-04): a white card in the middle, northern lights moving on
   white all around (aurora.js). Spark's four colours for the tiles, dark ink type in Noto Sans Hebrew at heavy weights,
   springy settles, never a jump. Phones: the card fills the width with a 16px gutter; no sideways scroll. */
:root{
  --blue:#3B74E4;--blue-d:#2753B5;--mint:#34C79A;--mint-d:#1C9672;--coral:#FF6F5B;--coral-d:#D64A37;--sun:#FFC83D;--sun-d:#D99A0E;
  --ink:#1B2240;--ink-2:#565E7E;--ink-3:#8A91AD;--line:#DCE2F5;--soft:#F3F6FF;--lav:#EEF0FC;
  --spring:cubic-bezier(.34,1.42,.64,1);--settle:cubic-bezier(.22,1,.36,1);
  --card-r:34px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:var(--ink);font-family:"Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.aurora{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:blur(7px) saturate(1.2);transform:scale(1.06)}
.stage{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:28px 16px 12px}
.card{position:relative;width:min(480px,100%);background:#fff;border-radius:var(--card-r);box-shadow:0 34px 90px -36px rgba(27,34,64,.34),0 2px 6px rgba(27,34,64,.05);overflow:hidden;transition:width .55s var(--settle)}
.card.wide{width:min(980px,100%)}
.screen{padding:34px 34px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.screen.enter{animation:screen-in .5s var(--settle) both}
@keyframes screen-in{from{opacity:0;transform:translateY(14px) scale(.985)}}
.stage{align-content:center;gap:22px}
.about{width:min(560px,100%);padding:18px 22px;border-radius:24px;background:rgba(255,255,255,.88);text-align:center;color:var(--ink-2);font-size:15px;line-height:1.6;animation:screen-in .6s var(--settle) .25s both}
.about h2{margin:0 0 6px;font-size:18px;font-weight:900;color:var(--ink)}
.about p{margin:0 0 6px}
.about-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-weight:700}
.about a,.foot a{color:var(--blue-d)}
body.playing .about{display:none}
.foot{position:relative;z-index:1;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 16px 18px;color:var(--ink-2);font-size:13px;font-weight:600}
.foot a{color:inherit}
.noscript{position:fixed;inset:auto 0 30%;text-align:center;font-weight:700}

.logo{width:88px;height:88px;border-radius:22px;box-shadow:0 12px 26px -10px rgba(39,83,181,.55);animation:logo-in .8s var(--spring) both}
@keyframes logo-in{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
.brand{margin:0;font-size:30px;font-weight:900;letter-spacing:-.01em}
.lead{margin:0;font-size:17px;font-weight:600;color:var(--ink-2)}
.loading{margin:0;color:var(--ink-2);font-weight:600}
.hint{margin:0;font-size:14px;color:var(--ink-3);font-weight:600}
.msg{min-height:22px;margin:0;font-size:15px;font-weight:700;color:var(--coral-d)}
.msg:empty{min-height:0}

/* ---- the code: one letter or digit per box ---- */
.code{display:flex;gap:clamp(6px,1.8vw,10px);direction:ltr;justify-content:center;margin:6px 0 2px;width:100%}
.box{--c:var(--blue);--d:var(--blue-d);width:clamp(40px,12.6vw,60px);height:clamp(54px,16vw,72px);border:2.5px solid var(--line);border-radius:18px;background:#fff;text-align:center;font-size:clamp(24px,7.2vw,34px);font-weight:900;text-transform:uppercase;caret-color:var(--blue);outline:none;padding:0;transition:border-color .2s,box-shadow .25s var(--settle),transform .35s var(--spring),background-color .2s}
.box:nth-child(4n+2){--c:var(--mint);--d:var(--mint-d)}.box:nth-child(4n+3){--c:var(--coral);--d:var(--coral-d)}.box:nth-child(4n+4){--c:var(--sun);--d:var(--sun-d)}
.box:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,116,228,.15)}
.box.filled{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);box-shadow:0 5px 0 var(--d);transform:translateY(-3px);animation:box-pop .42s var(--spring)}
.box.filled:focus{box-shadow:0 5px 0 var(--d),0 0 0 4px rgba(59,116,228,.15)}
@keyframes box-pop{0%{transform:scale(.86)}100%{transform:translateY(-3px)}}
.code.busy .box{animation:box-wave 1s var(--settle) infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes box-wave{0%,100%{transform:translateY(-3px)}40%{transform:translateY(-9px)}}
.code.shake{animation:shake .45s var(--settle)}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}

/* ---- the nickname ---- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--soft);font-weight:800;font-size:15px;max-width:100%}
.chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick{width:100%;height:64px;border:2.5px solid var(--line);border-radius:20px;padding:0 18px;font-size:24px;font-weight:800;text-align:center;outline:none;background:#fff;transition:border-color .2s,box-shadow .25s}
.nick:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(59,116,228,.15)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.go{width:100%;min-height:60px;border:0;border-radius:20px;background:var(--sun);color:var(--ink);font-size:21px;font-weight:900;box-shadow:0 6px 0 var(--sun-d);transition:transform .12s,box-shadow .12s,opacity .2s}
.go:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sun-d)}
.go:disabled{opacity:.55;cursor:default}
.back{border:0;background:none;color:var(--ink-2);font-weight:700;font-size:15px;padding:6px 10px;border-radius:12px}
.back:hover{background:var(--soft)}

/* ---- the waiting room ---- */
.me{font-size:clamp(34px,8vw,48px);font-weight:900;margin:0;line-height:1.05;overflow-wrap:anywhere}
.pulse-lines{width:120px;height:120px}
.pulse-lines line{stroke-linecap:round;stroke-width:7;transform-origin:50px 50px;animation:ray 2.4s var(--settle) infinite}
@keyframes ray{0%,100%{opacity:.25}50%{opacity:1}}
.count{font-weight:800;color:var(--ink-2);margin:0}

/* ---- the game ---- */
.game{padding:22px 24px 18px;gap:14px;align-items:stretch;text-align:start;min-height:min(640px,calc(100dvh - 110px))}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--ink-2);font-size:15px}
.g-top .tag{padding:5px 12px;border-radius:999px;background:var(--soft);color:var(--ink)}
.g-top .tag.x2{background:var(--sun)}
.g-q{flex:none;display:grid;place-items:center;text-align:center;min-height:120px;padding:8px 6px;transition:min-height .7s var(--settle),flex-grow .7s var(--settle)}
.g-q h2{margin:0;font-size:clamp(24px,4.4vw,40px);font-weight:900;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.game.solo .g-q{flex-grow:1}
.game.solo .g-q h2{animation:q-in .7s var(--spring) both}
@keyframes q-in{from{opacity:0;transform:scale(.8)}}
.g-time{height:10px;border-radius:999px;background:var(--lav);overflow:hidden;opacity:0;transition:opacity .4s}
.g-time i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--blue);transform-origin:right center;transform:scaleX(1)}
.game.open .g-time{opacity:1}
.tiles{flex:1 1 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;transition:flex-grow .7s var(--settle)}
.game.solo .tiles{flex-grow:0;overflow:hidden}
.tiles.two{grid-template-columns:1fr 1fr}
.tile{--c:var(--blue);--d:var(--blue-d);--tx:#fff;position:relative;border:0;border-radius:26px;background:var(--c);color:var(--tx);box-shadow:0 8px 0 var(--d);display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:96px;font-weight:900;font-size:clamp(18px,2.6vw,27px);text-align:start;line-height:1.15;opacity:0;transform:translateY(26px) scale(.94);transition:transform .18s,box-shadow .18s,opacity .3s,filter .3s}
.tile.t1{--c:var(--mint);--d:var(--mint-d);--tx:var(--ink)}.tile.t2{--c:var(--coral);--d:var(--coral-d)}.tile.t3{--c:var(--sun);--d:var(--sun-d);--tx:var(--ink)}
.game.open .tile{animation:tile-in .55s var(--spring) forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes tile-in{to{opacity:1;transform:none}}
.tile:active{transform:translateY(5px)!important;box-shadow:0 3px 0 var(--d)}
.tile .sym{flex:none;width:clamp(44px,6vw,62px);height:clamp(44px,6vw,62px);border-radius:50%;background:var(--d);display:grid;place-items:center}
.tile .sym svg{width:66%;height:66%}
.tile .w{overflow-wrap:anywhere;min-width:0}
.tile:disabled{cursor:default}
.game.picked .tile{animation:none;opacity:1;transform:none}
.game.picked .tile:not(.mine){opacity:.28;transform:scale(.96);filter:saturate(.6)}
.game.picked .tile.mine{transform:scale(1.02);box-shadow:0 8px 0 var(--d),0 0 0 5px #fff,0 0 0 9px var(--c)}
.g-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:18px;background:var(--soft);font-weight:800}
.g-bar .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-bar .pts{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 3, 2, 1 */
.countdown{position:absolute;inset:0;display:grid;place-items:center;z-index:5;background:#fff;pointer-events:none;animation:fade-out .35s ease forwards;animation-play-state:paused}
.countdown.done{animation-play-state:running}
@keyframes fade-out{to{opacity:0;visibility:hidden}}
.countdown svg{position:absolute;width:min(420px,80vw);height:min(420px,80vw)}
.countdown svg line{stroke-linecap:round;stroke-width:5}
.countdown b{position:relative;font-size:clamp(110px,22vw,190px);font-weight:900;line-height:1;color:var(--ink)}
.countdown b.tick{animation:tick .95s var(--spring) both}
@keyframes tick{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.08)}45%{transform:scale(1)}88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
.countdown svg.spin{animation:spin 3s linear both}
@keyframes spin{from{transform:rotate(0) scale(.7);opacity:.3}to{transform:rotate(60deg) scale(1.15);opacity:1}}
.yalla{position:absolute;inset:auto 0 18%;text-align:center;font-size:30px;font-weight:900;color:var(--blue);animation:pop-up .6s var(--spring) both}
@keyframes pop-up{from{opacity:0;transform:translateY(16px) scale(.8)}}

/* after the tap */
.waiting{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.waiting .orb{--c:var(--blue);--d:var(--blue-d);position:relative;width:150px;height:150px;display:grid;place-items:center}
.waiting .orb .core{width:92px;height:92px;border-radius:30px;background:var(--c);box-shadow:0 8px 0 var(--d);display:grid;place-items:center;animation:breathe 2.2s ease-in-out infinite}
.waiting .orb .core svg{width:60%;height:60%}
.waiting .orb svg.rays{position:absolute;inset:0;width:100%;height:100%;animation:drift 9s linear infinite}
.waiting .orb svg.rays line{stroke:var(--c);stroke-linecap:round;stroke-width:5;opacity:.75}
@keyframes breathe{50%{transform:scale(1.06) rotate(-2deg)}}
@keyframes drift{to{transform:rotate(360deg)}}
.waiting .line{font-size:clamp(22px,4vw,30px);font-weight:900;margin:0;min-height:1.3em}
.waiting .line.swap{animation:line-in .5s var(--settle) both}
@keyframes line-in{from{opacity:0;transform:translateY(10px)}}

/* the result */
.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border-radius:26px;padding:26px 16px;color:var(--ink);animation:screen-in .55s var(--settle) both}
.result.right{background:color-mix(in srgb,var(--mint) 18%,#fff)}
.result.wrong{background:color-mix(in srgb,var(--coral) 13%,#fff)}
.result.none{background:var(--soft)}
.result .badge{width:110px;height:110px;border-radius:36px;display:grid;place-items:center;animation:badge 0.7s var(--spring) both}
.result.right .badge{background:var(--mint);box-shadow:0 8px 0 var(--mint-d)}
.result.wrong .badge{background:var(--coral);box-shadow:0 8px 0 var(--coral-d)}
.result.none .badge{background:var(--ink-3);box-shadow:0 8px 0 #6B7290}
.result .badge svg{width:56%;height:56%}
@keyframes badge{from{opacity:0;transform:scale(.3) rotate(-14deg)}}
.result h2{margin:0;font-size:clamp(34px,6vw,50px);font-weight:900;line-height:1}
.result .plus{font-size:clamp(26px,4.6vw,36px);font-weight:900;color:var(--mint-d);font-variant-numeric:tabular-nums;margin:0}
.result .streak{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--sun);font-weight:900;box-shadow:0 4px 0 var(--sun-d);animation:pop-up .5s var(--spring) .35s both}
.result .broke{font-weight:800;color:var(--coral-d);margin:0}
.result .answer{margin:0;font-weight:700;color:var(--ink-2)}
.standing{display:flex;flex-direction:column;gap:8px;width:min(420px,100%);margin-top:4px}
.standing div{display:flex;justify-content:center;gap:8px;padding:10px 14px;border-radius:16px;background:#fff;font-weight:800;animation:pop-up .5s var(--settle) both}
.standing div:nth-child(2){animation-delay:.12s}.standing div:nth-child(3){animation-delay:.24s}
.standing .passed{background:var(--sun);color:var(--ink)}
.standing .podium{background:var(--blue);color:#fff}
.reacts{display:flex;gap:10px;justify-content:center;margin-top:6px}
.reacts button{width:52px;height:52px;border-radius:18px;border:0;background:#fff;font-size:26px;box-shadow:0 4px 0 var(--line);transition:transform .15s var(--spring)}
.reacts button:active{transform:translateY(3px) scale(.92);box-shadow:0 1px 0 var(--line)}
.reacts button.sent{animation:sent .6s var(--spring)}
@keyframes sent{40%{transform:translateY(-10px) scale(1.2)}}

/* the end */
.end{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.end .place{width:150px;height:150px;border-radius:44px;display:grid;place-items:center;font-size:76px;font-weight:900;color:#fff;background:var(--blue);box-shadow:0 10px 0 var(--blue-d);animation:badge .9s var(--spring) both}
.end .place.p1{background:var(--sun);color:var(--ink);box-shadow:0 10px 0 var(--sun-d)}
.end .place.p3{background:var(--coral);box-shadow:0 10px 0 var(--coral-d)}
.end h2{margin:0;font-size:clamp(32px,6vw,48px);font-weight:900}
.end .score{margin:0;font-size:22px;font-weight:800;color:var(--ink-2)}
.again{min-height:54px;padding:0 26px;border:0;border-radius:18px;background:var(--blue);color:#fff;font-weight:900;font-size:18px;box-shadow:0 5px 0 var(--blue-d)}
.again:active{transform:translateY(3px);box-shadow:0 2px 0 var(--blue-d)}

@media (max-width:640px){
  .stage{padding:16px 16px 8px;align-items:start}
  .screen{padding:28px 20px 24px}
  .card{--card-r:28px}
  .game{padding:16px 14px 14px;gap:12px;min-height:calc(100dvh - 72px)}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:12px 10px;min-height:120px;border-radius:22px;font-size:18px}
  .g-q{min-height:96px}
  .g-q h2{font-size:clamp(21px,6.2vw,28px)}
}
@media (max-width:640px) and (min-height:700px){.stage{align-items:center}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}
}