/* Motion: page-wake streak, submit celebration, shine, reduced-motion overrides. */
.wake{position:fixed;left:0;right:0;top:var(--head-h);height:8px;z-index:29;pointer-events:none;opacity:0;overflow:hidden}
.wake i{position:absolute;left:0;right:0;height:2px;background:var(--line-strong)}
.wake i:first-child{top:0}.wake i:last-child{top:5px}
.cele{position:fixed;inset:0;z-index:90;background:var(--bridge);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  opacity:0;transition:opacity .12s linear;perspective:700px}
.cele.in{opacity:1}
.cele.out{opacity:0;transition:opacity .3s linear}
.cele .cup3{position:relative;width:96px;height:100px;margin-bottom:var(--s3);transform-style:preserve-3d}
.cele .cup3 .r{position:absolute;left:0;right:0;top:0;height:34px;border-radius:50%;background:var(--cc,var(--solo));box-shadow:inset 0 0 0 3px var(--rim,var(--solo-rim));z-index:2}
.cele .cup3 .r::after{content:"";position:absolute;inset:6px 9px;border-radius:50%;background:var(--lager)}
.cele .cup3 .b{position:absolute;left:0;right:0;top:16px;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 32%),var(--cc,var(--solo));clip-path:polygon(0 0,100% 0,84% 100%,16% 100%)}
.cele .cup3.ot{--cc:var(--overtime)}
.cele .cup3.back{transform:translate(26px,-22px) scale(.9);opacity:.85;--cc:var(--solo);--rim:var(--brass)}
.cele .cwrap{position:relative;width:96px;height:100px;margin-bottom:var(--s4)}
.cele .cwrap .cup3{position:absolute;left:0;top:0;margin:0}
.cele .cwrap .cup3.main{z-index:2}
.cele .cwrap .squash{transform-origin:50% 100%}
.cele .ringw{position:absolute;left:50%;bottom:-8px;width:130px;height:34px;margin-left:-65px;border-radius:50%;background:var(--wet-ring);border:1px solid rgba(216,162,58,.35);opacity:0;z-index:0}
.cele .drop{position:absolute;left:50%;top:30px;width:6px;height:6px;border-radius:50%;background:var(--lager);opacity:0;z-index:3}
.cele .ballc{position:absolute;left:50%;bottom:8vh;width:14px;height:14px;margin-left:-7px;z-index:4;will-change:transform}
.cele .ballc i{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--pingpong) 60%,#c8c2ae);box-shadow:inset -2px -2px 3px rgba(0,0,0,.25);will-change:transform}
.cele .names{font:400 29px/1.15 var(--f-marker);color:var(--ball);text-align:center;padding:0 var(--s4);opacity:0;max-width:92vw;position:relative}
.cele .names u{position:absolute;left:10%;right:10%;bottom:-4px;height:3px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;text-decoration:none}
.cele .tagline{font:500 12px var(--f-ui);color:var(--sail);letter-spacing:.02em;margin-top:6px;opacity:0;text-align:center}
.cele ul{list-style:none;margin:var(--s4) 0 0;padding:0;width:min(420px,92vw)}
.cele li{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:2px 0;border-bottom:1px solid var(--line);opacity:0}
.cele li .nm{flex:1;font:600 19px var(--f-ui);color:var(--ball);min-width:0}
.cele li .dl{font:800 37px/1 var(--f-display);min-width:96px;text-align:right}
.cele li .fl{width:22px;height:15px;transform-origin:0 0;transform:scaleY(0);}
.cele .skip{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font:500 12px var(--f-ui);color:var(--fog)}
.cele.reduced .names,.cele.reduced li,.cele.reduced .tagline{opacity:1}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-14deg)}22%,100%{transform:translateX(260%) skewX(-14deg)}}
/* primary button: molded red plastic, a hard top edge highlight and a soft falloff */
.btn.primary{background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18);position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));transform:translateX(-160%) skewX(-14deg);pointer-events:none}
@media(min-width:1024px){.app-nav .nav-log::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));transform:translateX(-160%) skewX(-14deg);pointer-events:none}}
.btn.primary:hover::after{animation:sheen 1.1s var(--ease-out) 1}
@media(min-width:1024px){.app-nav .nav-log:hover::after{animation:sheen 1.1s var(--ease-out) 1}}
.btn.primary[disabled]{background-image:none;box-shadow:none}
@media(min-width:1024px){.app-nav .nav-log{overflow:hidden;background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}}
/* replay cups: broad soft lobe + a narrow hot specular line, darker on the far side */
.cup .b{background:linear-gradient(90deg,rgba(255,255,255,0) 4%,rgba(255,255,255,.24) 13%,rgba(255,255,255,.62) 18%,rgba(255,255,255,.14) 24%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22) 100%),var(--cc,var(--solo))}
.cele .cup3 .b{background:linear-gradient(90deg,rgba(255,255,255,0) 4%,rgba(255,255,255,.24) 13%,rgba(255,255,255,.62) 18%,rgba(255,255,255,.14) 24%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22) 100%),var(--cc,var(--solo))}
/* podium cups: static specular + a sweep of light every few seconds (as if someone walked past the bulb) */
.pcup .body{background:linear-gradient(90deg,#b8262c 0,#e8575c 12%,#ffb3b0 17%,var(--solo) 26%,var(--solo) 60%,#8f1a20 100%)}
.pcup .body::after,.cele .cup3 .b::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));transform:translateX(-160%) skewX(-14deg);animation:sheen 6.5s var(--ease-io) infinite}
.tower.r2 .pcup .body::after{animation-delay:.25s}.tower.r1 .pcup .body::after{animation-delay:.12s}
.pcup:nth-child(2) .body::after{animation-delay:.2s}.pcup:nth-child(3) .body::after{animation-delay:.28s}
.cele .cup3 .b::after{animation:sheen 1.4s var(--ease-io) .7s 1}
/* #1 on the podium: a light sweep over the brass plate */
.tower.r1 .plate{position:relative;overflow:hidden}
.tower.r1 .plate::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,240,205,0),rgba(255,240,205,.22),rgba(255,240,205,0));transform:translateX(-160%) skewX(-14deg);animation:sheen 6.5s var(--ease-io) .5s infinite;pointer-events:none}
/* new Admiral in the celebration: the brass underline catches the light once */
.cele [data-adm]{overflow:hidden;background:var(--brass)}
.cele [data-adm]::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));transform:translateX(-160%);animation:sheen 1s var(--ease-out) 1.4s 2}
/* ping-pong balls in the replay + celebration: same hard specular dot as the tournament balls */
.ballw .bl,.cele .ballc i{background:radial-gradient(circle at 33% 27%,#fff 0 11%,#FBF8F1 24%,#E6E0D1 64%,#C8C0AB 100%)}

@media(prefers-reduced-motion:reduce){
  .pcup .body::after,.cele .cup3 .b::after,.tower.r1 .plate::after,.cele [data-adm]::after,.btn.primary:hover::after,.app-nav .nav-log:hover::after{animation:none!important;display:none}
  .tilt,.sheet,.sheet-scrim,.toast,.pos,.cup .bb{transition-duration:.01ms!important}
  .phasecard,.victory,.puddle{animation:none!important}
  .cup.enter .bb{animation:none}
}

/* Beat the CPU in the mini game: balls and cups rain down, the page shakes, the banner stamps in */
.crazy{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.crazy::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,var(--wave),transparent 65%);opacity:0;animation:crazy-glow 1.1s ease-in-out 4 alternate}
.crazy i{position:absolute;top:-60px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff 0 18%,var(--pingpong) 19% 60%,#cfcabd 100%);
  animation-name:crazy-fall;animation-timing-function:cubic-bezier(.3,.05,.7,1);animation-iteration-count:2;will-change:transform}
.crazy i.c{border-radius:3px 3px 30% 30%/3px 3px 12% 12%;background:linear-gradient(90deg,var(--solo-press),var(--solo) 35%,#e8545b 50%,var(--solo) 65%,var(--solo-press));
  box-shadow:inset 0 4px 0 var(--solo-rim)}
.crazy-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-4deg);text-align:center;padding:var(--s4) var(--s6);max-width:calc(100vw - 40px);
  background:var(--pine);border:2px solid var(--wave);border-radius:var(--r-m);animation:crazy-stamp .5s cubic-bezier(.2,1.6,.4,1) both, crazy-wobble 1.2s ease-in-out .5s infinite alternate}
.crazy-banner span{display:block;font:400 clamp(26px,7.5vw,64px)/1 var(--f-marker);color:var(--wave);white-space:nowrap}
.crazy-banner small{display:block;margin-top:var(--s2);font:500 14px/1.3 var(--f-ui);color:var(--sail)}
body.crazy-on .stage{animation:crazy-shake .45s linear 6}
body.crazy-on .app-head .mark{animation:crazy-hue .6s linear infinite}
@keyframes crazy-fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--drift),calc(100vh + 120px)) rotate(var(--spin))}}
@keyframes crazy-glow{to{opacity:.35}}
@keyframes crazy-stamp{0%{transform:translate(-50%,-50%) rotate(-4deg) scale(2.4);opacity:0}100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:1}}
@keyframes crazy-wobble{to{transform:translate(-50%,-50%) rotate(3deg) scale(1.05)}}
@keyframes crazy-shake{0%,100%{transform:none}20%{transform:translate(-6px,3px) rotate(-.6deg)}40%{transform:translate(5px,-4px) rotate(.5deg)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,4px) rotate(.3deg)}}
@keyframes crazy-hue{to{filter:hue-rotate(360deg) brightness(1.3)}}
.crazy.calm::before{display:none}
.crazy.calm .crazy-banner{animation:none;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){body.crazy-on .stage,body.crazy-on .app-head .mark{animation:none}}