/* THROWAWAY GAME TEST. Tokens copied from mockup/site.css so the mockup stays untouched. */
:root{
  --ink:#1D192A;--b1:#1B55CF;--b2:#0E3A9C;--b3:#2F6BE6;--sky:#D4E6FB;--yel:#FFD21E;--white:#fff;
  --line:4px;
  --dots:radial-gradient(circle,rgba(29,25,42,.17) 26%,transparent 28%);
  --burst:repeating-conic-gradient(from 6deg at 50% 58%,var(--b1) 0 9deg,var(--b3) 9deg 18deg);
}
html[lang=he]{--display:'Karantina','Rubik',sans-serif;--dsize:1.3;--dtrack:0;}
html[lang=en]{--display:'Bangers','Rubik',sans-serif;--dsize:1;--dtrack:.02em;}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
input{-webkit-user-select:text;user-select:text}
body{font-family:Rubik,Arial,sans-serif;color:var(--ink);background:var(--b2);line-height:1.3;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,a{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--yel);outline-offset:2px}
.d{font-family:var(--display);font-weight:700;letter-spacing:var(--dtrack);line-height:.98}

#app{position:fixed;inset:0;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);background:var(--b1)}
#app>section{min-height:0;grid-area:1/1}

/* title and end screens */
.cover{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-y:auto;
  padding:0 16px max(16px,env(safe-area-inset-bottom));background:var(--burst);color:var(--white);text-align:center;isolation:isolate}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dots) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 60%);mask-image:linear-gradient(to top,#000 10%,transparent 60%)}
.lang{align-self:flex-end;margin-top:calc(8px + env(safe-area-inset-top));font-weight:700;font-size:15px;text-underline-offset:3px;padding:4px 2px}
.mast{font-family:var(--display);font-weight:700;letter-spacing:var(--dtrack);font-size:calc(min(19vw,92px)*var(--dsize));line-height:.92;
  color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);transform:rotate(-2deg);margin-top:2px}
.mast.small{font-size:calc(min(13vw,64px)*var(--dsize));margin-top:calc(14px + env(safe-area-inset-top));padding-inline:50px}
.caption{background:var(--yel);color:var(--ink);border:var(--line) solid var(--ink);padding:5px 12px;font-weight:700;font-size:16px;max-width:30em}
.hero{position:relative;flex:1 1 auto;min-height:150px;width:100%;display:flex;justify-content:center;align-items:flex-end}
.hero img{height:100%;max-height:300px;width:auto;object-fit:contain}
.hero canvas{position:absolute;bottom:2px;left:calc(50% + 74px);width:72px;height:auto}

.btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;min-height:60px;padding:8px 16px;background:var(--yel);color:var(--ink);
  border:var(--line) solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-family:var(--display);font-weight:700;letter-spacing:var(--dtrack);
  font-size:calc(30px*var(--dsize));line-height:1;text-decoration:none;cursor:pointer;touch-action:manipulation}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.white{background:var(--white);min-height:52px;font-size:calc(25px*var(--dsize))}
.btn.blue{background:var(--b1);color:var(--white);min-height:52px;font-size:calc(25px*var(--dsize))}
.textbtn{background:none;border:0;padding:6px;color:var(--white);font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.startform{width:100%;max-width:420px;display:grid;gap:6px}
.nicklabel{font-weight:700;font-size:15px}
#nick{width:100%;min-height:50px;padding:6px 12px;background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);border-radius:0;
  font:700 19px Rubik,Arial,sans-serif;text-align:center;-webkit-appearance:none;appearance:none}
.nickmsg{font-size:13.5px;min-height:1.3em;margin-bottom:4px}
.nickmsg.bad{background:var(--white);color:var(--ink);font-weight:700;padding:3px 8px}
.btn:disabled{opacity:.7;cursor:progress}
.mailform{width:100%;max-width:420px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.maillabel{font-weight:700;font-size:15px}
.mailrow{display:flex;gap:8px}
#mail{flex:1;min-width:0;min-height:50px;padding:6px 12px;background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);border-radius:0;
  font:700 17px Rubik,Arial,sans-serif;-webkit-appearance:none;appearance:none}
.btn.mailbtn{width:auto;flex:none;min-height:50px;box-shadow:3px 3px 0 var(--ink)}
.mailmsg{font-size:13.5px;min-height:1.3em}
.mailmsg.bad{background:var(--white);color:var(--ink);font-weight:700;padding:3px 8px}
.mailok{font-weight:700;font-size:15px}
.closebtn{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-end:10px;z-index:2;display:grid;place-items:center;width:46px;height:46px;background:var(--white);color:var(--ink);
  border:var(--line) solid var(--ink);cursor:pointer;touch-action:manipulation}

/* leaderboard */
.boardbox{width:100%;max-width:480px;background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);padding:8px 10px;display:grid;gap:8px}
.boardmsg{padding:16px 6px;text-align:center;font-weight:700}
.boardlist{list-style:none;padding:0;display:grid}
.boardlist:empty{display:none}
.boardlist li{display:grid;grid-template-columns:2em 1fr auto;align-items:center;gap:8px;padding:7px 6px;font-weight:700;text-align:start}
.boardlist li+li{border-top:2px solid var(--sky)}
.boardlist li.me{background:var(--yel)}
.boardlist .place{color:var(--b1);text-align:center}
.boardlist bdi{justify-self:start;min-width:0;overflow-wrap:anywhere}
.boardlist b{font-size:calc(22px*var(--dsize));direction:ltr}
.boardme{background:var(--yel);font-weight:700;text-align:center;padding:6px}
.endboardtitle{font-size:calc(26px*var(--dsize));text-align:center}

/* end screen */
.scoreburst{position:relative;width:min(58vw,230px);aspect-ratio:1;display:grid;place-items:center;flex:none}
.scoreburst svg,#flash svg{position:absolute;inset:0;width:100%;height:100%}
#starPts{fill:var(--yel);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.scoreburst b{position:relative;color:var(--ink);font-size:calc(58px*var(--dsize));direction:ltr}
.best{font-weight:700;font-size:15px;min-height:1.3em}
.ctabox{width:100%;max-width:420px;background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);padding:10px 12px 14px;display:grid;gap:8px;justify-items:center}
.ctabox p{font-size:calc(25px*var(--dsize))}

/* game screen */
#play{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);height:100%;background:var(--ink);touch-action:none}
#hud{display:flex;align-items:center;gap:10px;padding:calc(6px + env(safe-area-inset-top)) 10px 6px;background:var(--b1);color:var(--white);
  background-image:var(--dots);background-size:9px 9px;border-bottom:var(--line) solid var(--ink)}
.time{flex:none;min-width:62px;text-align:center;background:var(--yel);color:var(--ink);border:var(--line) solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);
  font-family:var(--display);font-weight:700;font-size:calc(38px*var(--dsize));line-height:1;padding:1px 6px;direction:ltr}
.time.low{background:var(--white);animation:beat 1s steps(2) infinite}
@keyframes beat{50%{transform:rotate(2deg) scale(1.08)}}
.gardenlabel{font-size:calc(25px*var(--dsize));white-space:nowrap;min-width:0;overflow:hidden}
.score{margin-inline-start:auto;flex:none;font-size:13px;font-weight:700;white-space:nowrap}
.score b{font-size:calc(29px*var(--dsize));vertical-align:-2px}
.iconbtn{flex:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;background:var(--white);color:var(--ink);border:3px solid var(--ink);font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation}
#muteBtn[aria-pressed=false] #muteWave{display:none}
#exitBtn{background:var(--yel)}

#view{position:relative;overflow:hidden;touch-action:none;background:var(--sky);cursor:grab;outline-offset:-4px}
#view:active{cursor:grabbing}
#world{position:absolute;top:0;left:0;will-change:transform;transform-origin:0 0}
#garden{display:block}
#fx{position:absolute;inset:0;pointer-events:none;overflow:visible}

.pop{position:absolute;width:128px;height:128px;margin:-64px 0 0 -64px;display:grid;place-items:center;text-align:center;color:var(--ink);pointer-events:none;
  animation:pop .62s cubic-bezier(.2,1.5,.4,1) both}
.pop svg{position:absolute;inset:0;width:100%;height:100%}
.pop b{position:relative;font-family:var(--display);font-weight:700;font-size:calc(21px*var(--dsize));line-height:.95;letter-spacing:var(--dtrack)}
.pop b small{display:block;font-size:.82em}
@keyframes pop{0%{transform:scale(.2) rotate(-14deg);opacity:0}24%{transform:scale(1) rotate(-4deg);opacity:1}72%{transform:scale(1.02) rotate(-3deg);opacity:1}100%{transform:scale(1.1) rotate(-2deg);opacity:0}}
.minus{position:absolute;margin:-22px 0 0 -30px;width:60px;text-align:center;font-family:var(--display);font-weight:700;font-size:calc(36px*var(--dsize));color:var(--white);
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;animation:rise .8s ease-out both;direction:ltr}
@keyframes rise{to{transform:translateY(-42px);opacity:0}}
.tick{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid var(--white);border-radius:50%;animation:tick .3s ease-out both}
@keyframes tick{from{transform:scale(.3);opacity:.9}to{transform:scale(1.2);opacity:0}}
.flying{position:fixed;width:50px;height:auto;z-index:5;pointer-events:none;margin:-24px 0 0 -25px}

#ring{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border:5px solid var(--yel);border-radius:50%;box-shadow:0 0 0 3px var(--ink),inset 0 0 0 3px var(--ink);pointer-events:none}
#sniff{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border:5px dashed var(--yel);border-radius:50%;pointer-events:none;animation:sniff 1.1s ease-in-out infinite}
@keyframes sniff{50%{transform:scale(.8)}}

/* more garden this way: arrows on every side that can still move */
.edge{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;padding:7px;background:var(--yel);color:var(--ink);border:var(--line) solid var(--ink);border-radius:50%;
  box-shadow:2px 3px 0 var(--ink);cursor:pointer;touch-action:manipulation}
.edge svg{width:100%;height:100%}
.edge.left{left:6px;top:50%;margin-top:-23px;animation:nudgeL 1.2s ease-in-out infinite}
.edge.right{right:6px;top:50%;margin-top:-23px;animation:nudgeR 1.2s ease-in-out infinite}
.edge.right svg{transform:rotate(180deg)}
.edge.up{top:58px;left:50%;margin-left:-23px;animation:nudgeU 1.2s ease-in-out infinite}
.edge.up svg{transform:rotate(90deg)}
.edge.down{bottom:8px;left:50%;margin-left:-23px;animation:nudgeD 1.2s ease-in-out infinite}
.edge.down svg{transform:rotate(-90deg)}
@keyframes nudgeL{50%{transform:translateX(-5px)}}
@keyframes nudgeR{50%{transform:translateX(5px)}}
@keyframes nudgeU{50%{transform:translateY(-5px)}}
@keyframes nudgeD{50%{transform:translateY(5px)}}

/* first big garden: how to move it */
#coach{position:absolute;inset:0;margin:auto;width:min(86%,300px);height:max-content;z-index:3;padding:12px 12px 14px;display:grid;justify-items:center;gap:6px;text-align:center;
  background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);box-shadow:6px 6px 0 var(--ink);pointer-events:none;transform:rotate(-1deg)}
#coach svg{max-width:100%;height:auto}
#coach p{font-size:calc(27px*var(--dsize))}
.finger{animation:swipe 1.5s ease-in-out infinite}
@keyframes swipe{0%,100%{transform:translateX(-58px)}50%{transform:translateX(58px)}}

#map{position:absolute;top:6px;left:6px;background:var(--b2);border:3px solid var(--ink);pointer-events:none}
#mapView{position:absolute;display:block;background:var(--yel)}
#nose{position:absolute;left:0;top:0;width:80px;height:40px;margin:-20px 0 0 -40px;pointer-events:none;transform-origin:50% 50%;z-index:2}

#flash{position:absolute;inset:0;margin:auto;width:min(82vw,330px);aspect-ratio:1;max-height:92%;display:grid;place-items:center;text-align:center;z-index:3;pointer-events:none;
  animation:pop 1.15s cubic-bezier(.2,1.5,.4,1) both}
#flash b{position:relative;font-size:calc(52px*var(--dsize));color:var(--ink);padding:0 14%}
#flash b.long{font-size:calc(34px*var(--dsize));line-height:1.05}
#flash small{display:block;font-size:.62em;margin-top:4px}
#flyer{position:absolute;top:18%;left:0;width:260px;height:auto;z-index:4;pointer-events:none}

#strip{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:84px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:var(--white);border-top:var(--line) solid var(--ink)}
#pug{width:96px;height:auto;margin-top:-28px;margin-inline-start:-6px;align-self:end;transition:transform .12s;pointer-events:none}
#pug.nod{transform:translateY(5px)}
#pug.no{animation:no .32s linear}
@keyframes no{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.bubble{position:relative;justify-self:start;width:100%;max-width:440px;background:var(--white);border:3px solid var(--ink);border-radius:50%/60%;padding:7px 14px;font-weight:700;font-size:15px;line-height:1.15;text-align:center;min-height:44px;display:grid;place-items:center}
.bubble::before{content:"";position:absolute;top:50%;inset-inline-start:-13px;width:14px;height:14px;background:var(--white);border-bottom:3px solid var(--ink);border-inline-start:3px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
html[dir=rtl] .bubble::before{transform:translateY(-50%) rotate(-45deg)}
#bag{position:relative;display:grid;justify-items:center;width:56px;color:var(--white);transition:transform .1s}
#bag.bump{transform:scale(1.18)}
#bag b{position:absolute;top:21px;font-size:calc(27px*var(--dsize))}
.bagword{color:var(--ink);font-size:11px;font-weight:700;margin-top:-2px}

#view.shake{animation:shake .28s linear}
@keyframes shake{20%{transform:translate(-6px,1px)}45%{transform:translate(5px,-1px)}70%{transform:translate(-3px,0)}}

@media (max-width:420px){
  .score span{display:none}
  #hud{gap:7px;padding-inline:8px}
  .iconbtn{min-width:38px;padding:0 6px}
}
@media (max-height:760px){
  #end{gap:8px}
  .scoreburst{width:min(40vw,158px)}
  .scoreburst b{font-size:calc(40px*var(--dsize))}
  .mast.small{font-size:calc(min(11vw,50px)*var(--dsize));margin-top:calc(10px + env(safe-area-inset-top))}
  .ctabox{padding:6px 10px 10px;gap:5px}
  .ctabox p{font-size:calc(21px*var(--dsize))}
}
@media (max-height:620px){
  .hero{min-height:110px}
  .scoreburst{width:min(38vw,150px)}
  .scoreburst b{font-size:calc(38px*var(--dsize))}
  .mast{font-size:calc(min(15vw,64px)*var(--dsize))}
  .btn{min-height:48px;font-size:calc(24px*var(--dsize))}
  .btn.white,.btn.blue{min-height:44px;font-size:calc(21px*var(--dsize))}
  #strip{min-height:62px}
  #pug{width:66px;margin-top:-10px}
}
@media (max-height:480px){
  .hero{display:none}
  .edge.up{top:46px}
  .lang{position:absolute;top:4px;inset-inline-end:12px}
  .cover{justify-content:center}
  #end{justify-content:flex-start}
  .scoreburst{width:96px}
  .scoreburst b{font-size:calc(25px*var(--dsize))}
  #strip{min-height:50px;padding-block:3px}
  #pug{width:52px;margin-top:0}
  #bag{transform:scale(.72);margin-block:-10px}
  .bagword{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pop,#flash,.minus,.tick,#view.shake,#pug.no,.time.low,#sniff{animation-duration:.01s}
  .edge,.finger{animation:none}
}