/* Mo & Pip — the trophy room. Every class carries the tp- prefix. */
#scTrophies{justify-content:flex-start;padding:0;overflow:hidden}
#scTrophies .corner-btn{z-index:9}
.tp-room{position:absolute;inset:0;z-index:0;overflow:hidden}
.tp-wall{position:absolute;left:0;right:0;top:0;height:72%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%,rgba(255,246,200,.95),rgba(255,220,120,0) 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 14px,rgba(0,0,0,0) 14px 28px),
    linear-gradient(180deg,#F7C64A 0%,#E9A93A 55%,#D68F2C 100%)}
.tp-beam{position:absolute;left:50%;top:-4%;width:120%;height:80%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.28) 12deg,rgba(255,255,255,0) 24deg,rgba(255,255,255,0) 336deg,rgba(255,255,255,.28) 348deg,rgba(255,255,255,0) 360deg)}
.tp-curtain{position:absolute;top:0;bottom:28%;width:11%;background:
  repeating-linear-gradient(90deg,#B23A48 0 22%,#8E2A36 22% 40%,#C94A58 40% 60%,#8E2A36 60% 100%);
  box-shadow:inset 0 -30px 40px rgba(0,0,0,.25)}
.tp-curtain.l{left:0;border-radius:0 0 40% 0}
.tp-curtain.r{right:0;border-radius:0 0 0 40%}
.tp-curtain::after{content:"";position:absolute;left:-6%;right:-6%;top:0;height:5%;background:#FFD84A;border-radius:0 0 10px 10px;box-shadow:0 3px 0 #D9951F}
.tp-floor{position:absolute;left:0;right:0;top:72%;bottom:0;
  background:linear-gradient(180deg,#8E2A36,#B23A48 30%,#8E2A36);border-top:6px solid #FFD84A}
.tp-floor::before{content:"";position:absolute;left:8%;right:8%;top:0;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0))}

/* the banner: how many, with two stars — the grown-up reads the number,
   the child reads the row of cups */
.tp-banner{position:absolute;left:50%;top:calc(var(--pad-top) + 14px);transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:10px;padding:6px 20px;border-radius:999px;
  background:#B23A48;color:#FFF3B0;font-weight:900;font-size:clamp(22px,6vw,30px);box-shadow:0 4px 0 #6E1B26,0 8px 18px rgba(0,0,0,.2)}
.tp-banner.none{opacity:.55}
.tp-star{width:18px;height:18px;background:#FFD84A;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* the shelves */
.tp-shelves{position:absolute;left:12%;right:12%;top:calc(var(--pad-top) + 72px);bottom:31%;z-index:3;
  display:flex;flex-direction:column;justify-content:flex-start;gap:14px;overflow:hidden}
.tp-shelf{position:relative;display:flex;align-items:flex-end;justify-content:space-around;flex:none;
  height:min(clamp(84px,15vh,130px),calc((100% - (var(--rows,1) - 1) * 14px) / var(--rows,1)));padding:0 2%;
  border-bottom:10px solid #5C3B1E;box-shadow:0 12px 0 -2px #3E2612,0 16px 12px rgba(0,0,0,.18)}
.tp-shelf::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-10px;height:3px;background:#FFD84A}
.tp-shelf.numbers{border-bottom-color:#3F5A80;box-shadow:0 12px 0 -2px #263A55,0 16px 12px rgba(0,0,0,.18)}
.tp-item{position:relative;width:calc(92% / var(--per,4));max-width:96px;height:100%;padding:0 0 2px;border:0;background:none;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;display:flex;align-items:flex-end;justify-content:center;
  animation:tpArrive .5s var(--spring) both;animation-delay:calc(min(var(--i,0),14) * 60ms)}
@keyframes tpArrive{from{transform:translateY(14px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.tp-plinth{position:relative;display:block;width:100%;height:100%}
.tp-cup{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 0 rgba(90,50,0,.25))}
.tp-item.bop .tp-plinth{animation:tpBop .55s var(--spring)}
@keyframes tpBop{0%{transform:scale(1)}40%{transform:scale(1.18) translateY(-8px)}100%{transform:scale(1)}}
.tp-shine{transform-origin:50px 13px;animation:tpTwinkle 2.6s ease-in-out infinite}
@keyframes tpTwinkle{0%,100%{transform:scale(.6);opacity:.6}50%{transform:scale(1.1);opacity:1}}
.tp-ghost .tp-cup{opacity:.38;filter:grayscale(.7) drop-shadow(0 0 0 transparent)}
.tp-ghost .tp-shine{display:none}

/* the next one: an empty plinth that glows */
.tp-next .tp-glow{position:absolute;left:10%;right:10%;top:10%;bottom:10%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,243,176,.75),rgba(255,243,176,0) 70%);animation:tpGlow 1.6s ease-in-out infinite}
@keyframes tpGlow{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.tp-outline{position:relative}
.tp-next.asked .tp-plinth{animation:tpAsk 1.1s ease-in-out infinite}
@keyframes tpAsk{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tp-next.go .tp-plinth{animation:tpBop .6s var(--spring) 2}

/* sparkles when a cup is tapped */
.tp-sparks{position:absolute;inset:0;pointer-events:none;z-index:6}
.tp-sparks i{position:absolute;width:10px;height:10px;background:#FFF3B0;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:tpSpark .85s ease-out var(--d,0s) both}
@keyframes tpSpark{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-50%) translateY(-40px) scale(1.2) rotate(70deg);opacity:0}}

/* Mo and Pip on the carpet */
.tp-cast{position:absolute;left:8%;right:8%;top:66%;height:30%;display:flex;align-items:flex-end;justify-content:center;gap:6%;z-index:5}
.tp-cast .char{width:44%;max-width:170px;cursor:pointer}
.tp-cast .char.pip{width:28%;max-width:104px}
.tp-cast .char svg{width:100%;height:auto;display:block;overflow:visible}

/* ================================ CELEBRATING, NOT JUST COUNTING
   A tapped cup lifts off its plinth and turns. `.bop` is still there for the
   little acknowledgement; this is the one that says well done. */
.tp-item.lift{z-index:6}
.tp-item.lift .tp-plinth{animation:tpLift .85s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes tpLift{
  0%{transform:translateY(0) rotate(0) scale(1)}
  35%{transform:translateY(-18%) rotate(-8deg) scale(1.18)}
  62%{transform:translateY(-22%) rotate(7deg) scale(1.16)}
  100%{transform:translateY(0) rotate(0) scale(1)}}

/* the count is a button: press it and the whole shelf goes off */
.tp-banner.tp-tappable{cursor:pointer;transition:transform .2s cubic-bezier(0.34,1.56,0.64,1)}
.tp-banner.tp-tappable:active{transform:translateX(-50%) scale(.94)}
.tp-banner.tp-tappable::after{content:'tap me';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:3px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#8A5A2B;opacity:.75;white-space:nowrap}
.tp-banner.none.tp-tappable::after{content:''}

/* ---- the party: bunting, balloons, stars, a rainbow runner, the big letter ---- */
.tp-wall{background:
    radial-gradient(ellipse 70% 55% at 50% 22%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
    radial-gradient(circle,rgba(255,255,255,.55) 2px,transparent 2.6px) 0 0/40px 40px,
    linear-gradient(180deg,#8ED1FC 0%,#C9A0F0 45%,#FFB6C9 75%,#FFD84A 100%)}
.tp-beam{opacity:.6}
.tp-curtain{background:repeating-linear-gradient(90deg,#FF7BA0 0 22%,#E85D86 22% 40%,#FF9EC0 40% 60%,#E85D86 60% 100%)}
.tp-curtain::after{background:#FFCE3D;box-shadow:0 3px 0 #D9951F}
.tp-floor{background:linear-gradient(180deg,#7C4FA8,#9A6BD8 30%,#7C4FA8);border-top-color:#FFD84A}
.tp-runner{position:absolute;left:18%;right:18%;top:72%;bottom:0;background:
  linear-gradient(90deg,#FF5E5E 0 16.6%,#FFA63D 16.6% 33.3%,#FFE14D 33.3% 50%,#6FD96F 50% 66.6%,#5FB1DD 66.6% 83.3%,#C9A0F0 83.3%);opacity:.9;
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.tp-bunting{position:absolute;left:-2%;right:-2%;top:calc(var(--pad-top) + 54px);height:36px;display:flex;justify-content:space-between;padding:0 4%;z-index:3;pointer-events:none}
.tp-bunting::before{content:"";position:absolute;left:0;right:0;top:6px;height:3px;background:#5C3B1E;border-radius:2px}
.tp-bunting i{width:22px;height:26px;margin-top:7px;clip-path:polygon(0 0,100% 0,50% 100%);background:#FF8FA6;transform-origin:50% 0;animation:tpFlap 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.2s)}
.tp-bunting i:nth-child(3n+2){background:#FFCE3D}.tp-bunting i:nth-child(3n+3){background:#6EC6F0}.tp-bunting i:nth-child(4n+1){background:#8AD37F}
@keyframes tpFlap{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.tp-balloons{position:absolute;top:calc(var(--pad-top) + 20px);width:12%;height:34%;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.tp-balloons.l{left:0}.tp-balloons.r{right:0}
.tp-balloon{width:100%;height:auto;margin-top:-22%;animation:tpBob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s);filter:drop-shadow(0 3px 0 rgba(0,0,0,.1))}
.tp-balloons.r .tp-balloon{animation-delay:calc(var(--i) * -1.1s - .6s)}
@keyframes tpBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.tp-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.tp-stars i{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:tpTwinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.tp-big{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:8;pointer-events:none;transition:transform .35s var(--spring),opacity .2s}
.tp-big b{display:block;font-size:clamp(150px,44vw,260px);line-height:1;font-weight:900;color:var(--c,#B23A48);
  text-shadow:0 8px 0 rgba(0,0,0,.12),0 0 0 6px #fff;-webkit-text-stroke:6px #fff;paint-order:stroke fill}
.tp-big.on{opacity:1;transform:translate(-50%,-50%) scale(1);animation:tpBigOut 1.5s ease-in forwards}
@keyframes tpBigOut{0%,60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
.tp-shelves{top:calc(var(--pad-top) + 96px)}