/* The first night (build 236): Mote's walkthrough. The dim with a hole round the thing to touch, a
   hand showing the gesture, Mote's bubble, a "nice!" for every step, and a big finish. Nothing here
   takes a touch except the bubble and the finish, so the player can always tap the real thing. */
.wt{position:fixed;inset:0;z-index:60;pointer-events:none;--wt-ink:#f4efe3;--wt-ink2:#cfc6dd;--wt-glow:#7aefec;--wt-gold:#ffe08a;--hold:0}
.wt.is-out,.wt.leaving{opacity:0;transition:opacity .25s}
/* out of the way while the road shows something big, takes you inside, or asks a question (a fork, a cave) */
body.wk-revealing .wt,body.wk-inside .wt,body.wk-choosing .wt{visibility:hidden}
/* the dim: everything but the hole */
.wt-spot{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:50%;opacity:0;box-shadow:0 0 0 200vmax rgba(8,5,20,.6);transition:left .35s cubic-bezier(.2,.9,.3,1),top .35s cubic-bezier(.2,.9,.3,1),width .35s,height .35s,opacity .3s}
.wt.lit .wt-spot{opacity:1}
.wt-spot::after{content:'';position:absolute;inset:-5px;border-radius:inherit;border:2px solid var(--wt-glow);box-shadow:0 0 18px rgba(122,239,236,.55),inset 0 0 14px rgba(122,239,236,.3);animation:wt-pulse 1.3s ease-in-out infinite}
@keyframes wt-pulse{50%{inset:-11px;opacity:.55}}
/* holding: a ring that fills while the hand stays down */
.wt[data-gesture="hold"] .wt-spot::before{content:'';position:absolute;inset:-9px;border-radius:inherit;padding:4px;background:conic-gradient(var(--wt-gold) calc(var(--hold) * 360deg),transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.wt.big::before,.wt.final::before{content:'';position:fixed;inset:0;background:rgba(8,5,20,.66);animation:wt-fade .3s ease-out}
.wt.final::before{background:rgba(8,5,20,.84)}
@keyframes wt-fade{from{opacity:0}}
.wt-hand{position:fixed;left:0;top:0;width:36px;height:39px;image-rendering:pixelated;transform-origin:20% 10%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
/* Mote's bubble */
.wt-bubble{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(380px,calc(100vw - 24px));pointer-events:auto;
  display:grid;grid-template-columns:64px 1fr;column-gap:12px;align-items:start;padding:14px 16px 10px 12px;border-radius:22px;color:var(--wt-ink);
  background:linear-gradient(180deg,rgba(38,30,60,.97),rgba(23,18,42,.97));border:1px solid rgba(160,140,220,.35);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.wt-bubble.in{animation:wt-pop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes wt-pop{from{scale:.72;opacity:0}to{scale:1;opacity:1}}
.wt.big .wt-bubble{top:50%;bottom:auto;transform:translate(-50%,-50%);grid-template-columns:1fr;justify-items:center;text-align:center;padding:18px 20px 12px}
.wt.big .wt-mote{order:-1;width:112px;height:112px;margin:-62px 0 2px}
.wt-track{grid-column:1/-1;display:flex;justify-content:center;gap:5px;margin:-2px 0 8px}
.wt-track:empty{display:none}
.wt-track i{width:14px;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.wt-track i.on{background:var(--wt-gold);box-shadow:0 0 6px rgba(255,224,138,.6)}
.wt-track i.now{background:var(--wt-glow);animation:wt-now 1s ease-in-out infinite}
@keyframes wt-now{50%{opacity:.45}}
.wt-mote{width:64px;height:64px;image-rendering:pixelated;margin-top:-4px}
.wt-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.wt.big .wt-body{align-items:stretch;width:100%}
.wt-eyebrow{margin:0;color:var(--wt-glow);letter-spacing:.08em}
.wt-line{margin:0;font-size:15px;line-height:1.5;color:var(--wt-ink)}
.wt-input{width:100%;height:46px;padding:0 12px;background:#140f22;border:1px solid #4a3f6e;border-radius:12px;color:var(--wt-ink);font-size:16px;text-align:center}
.wt-input::placeholder{color:#7d7590}
html.glow .wt .wt-input{background-color:#140f22!important;color:var(--wt-ink)!important;border-color:#4a3f6e!important;box-shadow:none!important}
.wt-go{width:100%;margin:2px 0 0}
.wt-skip{align-self:center;min-height:32px;font-size:12px;color:#8f879f}
.wt-skip:hover{color:var(--wt-ink)}
/* a step done: the word, what it paid, and a burst */
.wt-cheer{position:absolute;left:50%;top:-10px;translate:-50% -100%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;animation:wt-cheer 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
.wt-cheer b{font-size:26px;font-weight:800;font-style:italic;color:var(--wt-gold);text-shadow:0 2px 0 #3a2a10,0 0 18px rgba(255,224,138,.6);white-space:nowrap}
.wt-cheer span{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fff4dc;color:#2a1a08;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.wt-cheer i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;background:var(--wt-gold);box-shadow:0 0 8px var(--wt-gold);rotate:var(--a);animation:wt-spark .8s ease-out forwards}
.wt-cheer i:nth-child(3n){background:var(--wt-glow);box-shadow:0 0 8px var(--wt-glow)}
@keyframes wt-cheer{0%{scale:.4;opacity:0}18%{scale:1.12;opacity:1}30%{scale:1}80%{opacity:1;translate:-50% -110%}100%{opacity:0;translate:-50% -150%}}
@keyframes wt-spark{from{translate:0 0;opacity:1}to{translate:var(--d) 0;opacity:0}}
/* the end of the night */
.wt-final{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 22px calc(28px + env(safe-area-inset-bottom));text-align:center;pointer-events:auto;color:var(--wt-ink);animation:wt-fade .35s ease-out}
.wt.final .wt-bubble,.wt.final .wt-spot,.wt.final .wt-hand{display:none}
.wt-rays{position:absolute;left:50%;top:38%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,138,.16) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 42%);mask:radial-gradient(circle,#000 6%,transparent 42%);animation:wt-spin 24s linear infinite}
@keyframes wt-spin{to{rotate:360deg}}
.wt-star{position:relative;width:168px;height:168px;image-rendering:pixelated;filter:drop-shadow(0 0 24px rgba(255,224,138,.45));animation:wt-pop .6s cubic-bezier(.2,1.6,.4,1)}
.wt-title{position:relative;margin:0;font-size:34px;font-weight:800;letter-spacing:-.01em;color:var(--wt-gold);text-shadow:0 3px 0 #3a2a10,0 0 28px rgba(255,224,138,.45);animation:wt-pop .6s .1s cubic-bezier(.2,1.6,.4,1) both}
.wt-sub{position:relative;margin:0;max-width:34ch;font-size:15px;line-height:1.5;color:var(--wt-ink2)}
.wt-gifts{position:relative;display:flex;gap:10px;margin:8px 0 6px}
.wt-gift{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:92px;padding:12px 10px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  animation:wt-gift .55s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.45s + var(--i) * .22s)}
.wt-gift b{font-size:26px;font-weight:800;line-height:1}
.wt-gift span{font-size:12px;color:var(--wt-ink2)}
.wt-energy b{color:var(--wt-glow)}.wt-dust b{color:#a9c4da}.wt-chest b{color:#ffb070}
@keyframes wt-gift{from{scale:.3;opacity:0;translate:0 20px}to{scale:1;opacity:1;translate:0 0}}
.wt-final-actions{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:min(320px,100%);margin-top:6px}
.wt-other{min-height:40px;font-size:14px;color:var(--wt-glow)}
@media(max-height:700px){.wt-line{font-size:14px}.wt.big .wt-mote{width:88px;height:88px;margin-top:-50px}.wt-star{width:128px;height:128px}.wt-title{font-size:28px}}
/* Nothing is disabled during the first night. The chest shop just steps back until it has been
   introduced, since it is the one thing that can cost the player something. */
.welcoming .chest-tiers,.welcoming #chest-tier-note{opacity:.35;pointer-events:none;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.wt *,.wt::before{animation:none!important;transition:none!important}}
.reduced-motion .wt *,.reduced-motion .wt::before{animation:none!important;transition:none!important}