:root{--paper:#f8f1e4;--card:#fffbf3;--ink:#17262b;--mute:#586668;--line:#e6dac4;--teal:#1f6f78;--teal-d:#124a52;--coral:#dc4a27;--coral-d:#ac3618;--wood-l:#e3b27a;--wood:#c98f55;--wood-d:#8a5a30;--ghost:#f2e8d5;--dash:#cbb995;--k:1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Rubik,"Noto Sans Hebrew",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
main{max-width:520px;margin:0 auto;background:var(--paper)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
[hidden]{display:none!important}

/* The river */
#stage{position:relative;height:47vh;height:47svh;min-height:300px;overflow:hidden;background:linear-gradient(#34587f,#9a8fb3 23%,#f0b193 41%,#ffe4bb 56%,#a999b5 70%,#2b4a6e)}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
#stage.ready canvas{opacity:1}
#stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(10,26,44,.44),rgba(10,26,44,0) 96px),radial-gradient(125% 95% at 50% 42%,transparent 60%,rgba(10,26,44,.22))}
header{position:absolute;z-index:2;top:0;inset-inline:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;color:#fff}
h1{margin:0;font-size:31px;font-weight:800;line-height:1.1;white-space:nowrap;text-shadow:0 2px 14px rgba(10,26,44,.55)}
html[lang=en] h1{font-size:23px}
.top{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
#meta,.top a{padding:6px 12px;border-radius:99px}
#meta{background:rgba(10,26,44,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#meta:empty{display:none}
.top a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.16)}

/* The sheet */
#sheet{position:relative;z-index:2;margin-top:-28px;padding:20px 16px 44px;border-radius:28px 28px 0 0;box-shadow:0 -14px 34px rgba(12,30,44,.28);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#play>*,#end>*{animation:rise .55s cubic-bezier(.2,.9,.3,1) backwards}
#play>:nth-child(2),#end>:nth-child(2){animation-delay:.06s}
#play>:nth-child(3),#end>:nth-child(3){animation-delay:.12s}
#play>:nth-child(4),#end>:nth-child(4){animation-delay:.18s}
#end>:nth-child(n+5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

#stock{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--mute)}
#left{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:24px;padding:0 7px;border-radius:99px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .3s}
#stock.low #left{background:var(--coral)}
#planks{display:flex;gap:5px}
#planks i{position:relative;display:block;width:13px;height:28px;border-radius:3.5px;border:1.5px dashed var(--dash)}
#planks i::after{content:'';position:absolute;inset:-1.5px;border-radius:3.5px;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 45%),linear-gradient(var(--wood-l),var(--wood));box-shadow:inset 0 -3px 0 var(--wood-d),inset 0 1px 0 #f5d7a8;transition:transform .55s cubic-bezier(.5,0,.9,.4),opacity .5s .05s}
#planks i.gone::after{transform:translateY(36px) rotate(38deg);opacity:0}

/* The clue: two words, and the planks that will hang between them */
#clue{--s:calc(30px*var(--k));display:flex;align-items:center;justify-content:center;gap:calc(13px*var(--k));min-height:108px;padding:18px 12px 22px;overflow:hidden;background:var(--card);border-radius:22px;box-shadow:0 0 0 1px var(--line),inset 0 1px 0 1px #fff,0 18px 28px -20px rgba(23,38,43,.4)}
#clue.in{animation:rise .4s cubic-bezier(.2,1,.4,1)}
.word{font-size:calc(27px*var(--k));font-weight:700;line-height:1.2;white-space:nowrap}
#slots{position:relative;display:flex;gap:calc(4px*var(--k));padding-top:calc(8px*var(--k))}
#slots::before{content:'';position:absolute;top:calc(12px*var(--k));inset-inline:calc(-13px*var(--k));height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,#cdb98f 0 5px,#b49f77 5px 7px)}
#slots b{position:relative;display:flex;align-items:center;justify-content:center;width:var(--s);height:calc(var(--s)*1.5);padding-top:calc(var(--s)*.22);border-radius:calc(6px*var(--k));border:1.5px dashed var(--dash);background:var(--ghost);font-size:calc(var(--s)*.78);font-weight:800;line-height:1;color:#3b2212}
#slots b::before{content:'';position:absolute;top:calc(2.5px*var(--k));left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--dash)}
#slots b.on{border-color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 42%),linear-gradient(var(--wood-l),var(--wood) 72%);box-shadow:inset 0 -3px 0 var(--wood-d),inset 0 1px 0 #f5d7a8,0 4px 7px -3px rgba(60,35,10,.5)}
#slots b.on::before{background:#6d4322}
#slots b.pop{animation:pop .34s cubic-bezier(.3,1.8,.5,1)}
#slots.right b{animation:drop .46s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*55ms)}
@keyframes pop{from{transform:scale(.3)}}
@keyframes drop{from{opacity:0;transform:translateY(-28px) rotate(-9deg)}}

#form{display:flex;gap:10px;margin-top:14px}
#form.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
input{flex:1;min-width:0;height:56px;padding:0 16px;font:inherit;font-size:20px;font-weight:500;color:var(--ink);background:var(--card);border:1.5px solid #d6c8ad;border-radius:16px;box-shadow:inset 0 2px 4px rgba(23,38,43,.07);transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#7c8789;font-weight:400}
input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,111,120,.18)}
#form button,#share{height:56px;padding:0 24px;border-radius:16px;background:var(--coral);color:#fff;font-size:19px;font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--coral-d),0 12px 18px -10px rgba(172,54,24,.75);transition:transform .08s,box-shadow .08s}
#form button:active,#share:active{transform:translateY(3px);box-shadow:0 1px 0 var(--coral-d)}
#tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
#hint{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:99px;border:1.5px solid #d2c3a5;background:rgba(255,255,255,.55);font-size:15px;font-weight:600}
#hint::before{content:'';width:8px;height:17px;border-radius:2px;background:linear-gradient(var(--wood-l),var(--wood));box-shadow:inset 0 -2px 0 var(--wood-d)}
#hint:active{transform:scale(.97)}
#hint:disabled{opacity:.45;cursor:default}
#quit{height:42px;padding:0 6px;color:var(--mute);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
#msg{min-height:24px;margin:12px 2px 0;font-size:16px;font-weight:600}
#msg.bad{color:var(--coral-d)}
#msg.good{color:var(--teal-d)}

/* The end */
#end h2{margin:6px 2px 4px;font-size:34px;font-weight:800;line-height:1.15}
#sub{margin:0 2px;font-size:17px;font-weight:500;color:var(--mute)}
#card{display:block;width:100%;height:auto;margin:16px 0 16px;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 24px 36px -24px rgba(23,38,43,.55)}
#share{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
#share::before{content:'';width:21px;height:21px;background:currentColor;-webkit-mask:var(--share) center/contain no-repeat;mask:var(--share) center/contain no-repeat;--share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0L7.5 7.5M12 3l4.5 4.5M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3C/svg%3E")}
#msg2{min-height:22px;margin-top:12px;font-size:15px;font-weight:600;text-align:center;color:var(--teal-d)}
#next{display:flex;justify-content:center;align-items:baseline;gap:8px;font-size:16px;font-weight:500;color:var(--mute)}
#next b{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#end h3{margin:26px 2px 8px;font-size:15px;font-weight:600;color:var(--mute)}
#list{list-style:none;margin:0;padding:4px 14px;background:var(--card);border-radius:20px;box-shadow:0 0 0 1px var(--line)}
#list li{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 0;font-size:18px;font-weight:500}
#list li+li{border-top:1px solid var(--line)}
#list b{padding:3px 10px 5px;border-radius:7px;background:linear-gradient(var(--wood-l),var(--wood));box-shadow:inset 0 -2px 0 var(--wood-d);color:#3b2212;font-weight:800}
#list li.fell b,#list li.unseen b{background:var(--ghost);box-shadow:inset 0 0 0 1.5px var(--dash);color:var(--mute)}

#how{margin-top:28px;padding:16px 16px 9px;border-radius:20px;background:rgba(255,255,255,.5);box-shadow:0 0 0 1px var(--line);color:var(--mute);font-size:15px;line-height:1.6}
#how h2{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink)}
#how p{margin:0 0 8px}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}

@media (min-width:560px){
  body{background:#ece1cc}
  main{margin:22px auto;border-radius:30px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(23,38,43,.45)}
  #stage{height:440px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}