/* PRESENTS ON THE PATH — see assets/presents.js. Each stone that has not
   been reached yet has a wrapped present sitting beside it; reaching the
   stone opens it. This is what the path is FOR. */
.gift .g-box { fill: #FF8FA6; stroke: #E0607F; stroke-width: 1.1; }
.gift .g-rib { fill: #FFCE3D; }
.gift .g-lid { fill: #FF9EC0; stroke: #E0607F; stroke-width: 1.1; transform-box: fill-box; transform-origin: 50% 100%; }
.gift .g-bow { fill: none; stroke: #FFCE3D; stroke-width: 1.6; stroke-linecap: round; }
.gift.closed .g-in { animation: giftWiggle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.gift.closed.next .g-in { animation: giftBounce 1.4s var(--spring) infinite; }
.gift.opened .g-lid, .gift.opened .g-bow { display: none; }
.gift.opened .g-box { fill: #FFE7B4; stroke: #E2A81F; }
.gift.opened .g-star { fill: #FFCE3D; stroke: #E2A81F; stroke-width: .8; }
.gift .g-star { display: none; }
.gift.opened .g-star { display: block; animation: giftTwinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.gift.opening .g-lid { animation: giftLid .9s var(--spring) forwards; }
.gift.opening .g-bow { animation: giftLid .9s var(--spring) forwards; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes giftWiggle { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-4deg)} }
@keyframes giftBounce { 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-4px) scale(1.08)} }
@keyframes giftTwinkle { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.25) rotate(18deg)} }
@keyframes giftLid { 0%{transform:none;opacity:1} 60%{transform:translateY(-18px) rotate(-30deg);opacity:1} 100%{transform:translateY(-30px) rotate(-50deg);opacity:0} }

/* the reveal card reuses #prizePop; a place gets a little caption under it */
#prizePop i { display: block; font-size: clamp(12px, 3.3vw, 15px); color: var(--ink-soft); font-style: normal; margin-top: 2px; font-weight: 600; }
#prizePop.place svg { width: clamp(110px, 30vw, 150px); }

/* the soft wipe between somewhere new and the games — see tour.js */
#wipe { position: fixed; inset: 0; z-index: 950; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(60% 40% at 50% 42%, #FFF9E6, transparent 72%), linear-gradient(180deg, #DDF1FF 0%, #FFF3D8 100%); }
#wipe.on { opacity: 1; pointer-events: auto; }
#wipe .w-sun { position: absolute; left: 50%; top: 40%; width: 26vw; height: 26vw; max-width: 130px; max-height: 130px;
  border-radius: 50%; transform: translate(-50%, -50%) scale(.6); background: radial-gradient(circle at 40% 36%, #FFE79A, var(--sun) 60%, #F3B21E);
  box-shadow: 0 0 60px 20px rgba(255,206,61,.35); transition: transform .5s var(--spring); }
#wipe.on .w-sun { transform: translate(-50%, -50%) scale(1); }

/* ---------------------------------------------------- the walk, side on */
.walk { position: relative; width: min(100vw, 520px); height: min(46vh, 380px); overflow: hidden; border-radius: 28px;
  box-shadow: 0 18px 40px rgba(59,42,30,.16), var(--gloss); flex: none; }
.walk::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 4px; z-index: 6; pointer-events: none;
  background: linear-gradient(135deg, var(--sun), var(--sky));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.wk-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #CFEBFF 0%, #E9F6FF 60%, #F7F3E4 100%); }
.wk-sun { position: absolute; right: 9%; top: 8%; width: 16%; padding-bottom: 16%; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #FFE79A, var(--sun) 62%, #F3B21E); box-shadow: 0 0 34px 10px rgba(255,206,61,.35); }
.wk-cloud { position: absolute; top: 14%; width: 22%; height: 9%; border-radius: 40px; background: #fff; opacity: .9; }
.wk-cloud::before { content: ''; position: absolute; left: 22%; top: -55%; width: 44%; height: 120%; border-radius: 50%; background: #fff; }
.wk-cloud.c1 { left: 8%; } .wk-cloud.c2 { left: 48%; top: 22%; width: 16%; height: 7%; opacity: .75; }
.wk-hill { position: absolute; bottom: 30%; border-radius: 50% 50% 0 0; }
.wk-hill.h1 { left: -12%; width: 70%; height: 36%; background: linear-gradient(180deg, #A9DD8E, #8AD37F); }
.wk-hill.h2 { right: -16%; width: 74%; height: 42%; background: linear-gradient(180deg, #98D686, #74C46A); }
.wk-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #8AD37F, #6BBE62); }
.wk-road { position: absolute; left: -4%; right: -4%; bottom: 13%; height: 11%; border-radius: 20px;
  background: linear-gradient(180deg, #EAD6AE, #D9BE8D); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); }
.wk-road::after { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 14px, transparent 14px 26px); }

.wk-stop { position: absolute; bottom: 20%; width: 0; }
.wk-post { position: absolute; left: -4px; bottom: 6px; width: 8px; height: 46px; border-radius: 4px; background: linear-gradient(90deg, #B98A50, #8E5F2B); }
.wk-sign { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 12px; background: #FFF6E9; color: #C9B79E; font-weight: 800; font-size: 20px; display: grid; place-items: center;
  box-shadow: 0 0 0 3px #DCCBB2, 0 6px 12px rgba(59,42,30,.16); }
.wk-stop.done .wk-sign { background: #8AD37F; color: #fff; box-shadow: 0 0 0 3px #5FAE58, 0 6px 12px rgba(59,42,30,.16); }
.wk-gift { position: absolute; left: 10px; bottom: 0; width: 40px; height: 40px; }
.wk-gift .gift-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wk-gift.closed .g-in { animation: giftWiggle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.wk-gift.closed.next .g-in { animation: giftBounce 1.4s var(--spring) infinite; }
.wk-gift.opened .g-lid, .wk-gift.opened .g-bow { display: none; }
.wk-gift.opened .g-box { fill: #FFE7B4; stroke: #E2A81F; }
.wk-gift.opened .g-star { display: block; fill: #FFCE3D; stroke: #E2A81F; stroke-width: .8; animation: giftTwinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.wk-gift.opening .g-lid, .wk-gift.opening .g-bow { animation: giftLid .9s var(--spring) forwards; transform-box: fill-box; transform-origin: 50% 100%; }

.wk-goal { position: absolute; left: 91%; bottom: 31%; transform: translateX(-50%); width: 20%; text-align: center; }
.wk-goal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(59,42,30,.18)); }
.wk-goal b { display: block; font-size: clamp(10px, 2.8vw, 13px); color: var(--ink); margin-top: 2px; white-space: nowrap; }
.wk-goal.arrived svg { animation: goalHere 1.6s var(--spring) infinite; }

.wk-mo { position: absolute; left: 9%; bottom: 16%; width: 21%; max-width: 110px; transform: translateX(-50%); z-index: 4; }
.wk-mo .char { width: 100%; }
.wk-mo .char svg { width: 100%; height: auto; display: block; overflow: visible; }
.wk-mo.walking { animation: wkBob .34s ease-in-out infinite; }
@keyframes wkBob { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-2deg); } 50% { transform: translateX(-50%) translateY(-7px) rotate(2deg); } }

#scPrize .prize-row { margin-top: 4px; }
body.no-asking #scPrize .prize-row { display: none; }
#scPrize.rolling .prize-row { display: none; }