/* Shared end-of-match screen (Goob Falso and Virada!): who won from MY point of view, a staged podium and a ranking that
   explains itself. Markup: .panel.endc[data-tier] > .endhero (canvas, .kick, h2, p) + canvas.pod + .podnames + .read + ol.rk
   (li.p1.me > details > summary + .more with .bar/.chips/.why) + .endfoot. Needs --sun --goo --muted --ink-dark
   --font-logo --font-display from the page. Keyframes are prefixed (end-) so pages keep their own animations. */
/* ---------- end of game: who won, from MY point of view, and a ranking that explains itself ---------- */
.endc{--tc:var(--sun);--podw:min(560px,100%);width:min(900px,100%);display:grid;gap:14px;justify-items:center;text-align:center;max-height:calc(100dvh - 32px);overflow:auto;position:relative;padding:20px}
.endc[data-tier=podium]{--tc:#c7cee6}.endc[data-tier=mid]{--tc:#38d9e8}.endc[data-tier=last]{--tc:var(--goo)}
.endhero{position:relative;width:100%;display:grid;justify-items:center;gap:4px;border:3px solid var(--tc);border-radius:22px;padding:14px 16px 16px;overflow:hidden;isolation:isolate}
.endc[data-tier=win].shown .endhero::before{content:"";position:absolute;inset:-60%;z-index:-1;background:repeating-conic-gradient(rgba(255,204,77,.22) 0 10deg,transparent 10deg 20deg);animation:end-spin 14s linear infinite}
@keyframes end-spin{to{transform:rotate(1turn)}}
.endhero .kick{font-size:.85rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.endhero h2{font:400 clamp(2rem,6vw,4rem)/1 var(--font-logo);color:var(--tc);text-shadow:0 4px 0 rgba(0,0,0,.35);text-wrap:balance}
.endhero h2.stamp,.endhero h2.end-stamp{animation:end-stamp .38s cubic-bezier(.3,1.6,.5,1) both}
@keyframes end-stamp{from{transform:scale(2.2) rotate(-4deg);opacity:0}}
.endhero p{font-weight:700;font-size:1.1rem;max-width:44ch}
.endhero canvas{width:120px;height:120px}
.endc[data-tier=last].shown .endhero canvas{animation:end-melt 1.4s ease-in .2s both}
@keyframes end-melt{60%{transform:scaleY(.6) scaleX(1.25) translateY(18px)}100%{transform:none}}
.endc canvas.pod{width:var(--podw);height:auto}
.podnames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:var(--podw);margin-top:-8px;font:700 1.05rem var(--font-display);
  /* names sit on the podium steps (centres at 130/280/430 of the 560 canvas): inset = 9.8% of the block's own width */
  padding-inline:calc(var(--podw) * .098);box-sizing:border-box}
.podnames span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity .3s}
.podnames span.on{opacity:1}.podnames b{color:var(--sun)}
.endc .read{font-weight:700;max-width:60ch;background:rgba(255,255,255,.06);border-radius:14px;padding:10px 14px;opacity:0;transition:opacity .3s}
.endc.shown .read{opacity:1}
/* PLAN.md S15: .endfoot is sticky at the bottom of .endc's own scroll area, so it would otherwise sit on top of the
   list's last rows; reserve its height here instead of guessing a scroll position. */
.rk{list-style:none;margin:0;padding:0 0 calc(88px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;width:100%;text-align:left}
.rk>li{opacity:0;transform:translateY(14px);transition:opacity .26s,transform .26s;transition-delay:calc(var(--i) * 80ms)}
.endc.shown .rk>li{opacity:1;transform:none}
.rk details{background:rgba(255,255,255,.07);border-radius:16px}
.rk li.me details{box-shadow:inset 0 0 0 3px var(--sun)}
.rk summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:56px;padding:6px 12px;cursor:pointer;list-style:none}
.rk summary::-webkit-details-marker{display:none}
.rk summary::after{content:"▸";transition:transform .2s;color:var(--sun);font-size:1.2rem}
.rk details[open] summary::after{transform:rotate(90deg)}
.rk .medal{min-width:2.4em;text-align:center;border-radius:999px;padding:2px 8px;font:400 1.15rem var(--font-logo);background:rgba(255,255,255,.12)}
.rk .p1 .medal{background:#ffcc4d;color:var(--ink-dark)}.rk .p2 .medal{background:#c7cee6;color:var(--ink-dark)}.rk .p3 .medal{background:#d9925a;color:var(--ink-dark)}
.rk .nm{display:grid;min-width:0}.rk .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem}
.rk .nm small{color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .you{font-size:.7rem;color:var(--sun);margin-left:6px}
.rk .pts{font:400 1.5rem var(--font-logo)}
.rk .more{padding:0 12px 12px;display:grid;gap:8px}
.rk .bar{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08)}
.rk .bar i{min-width:6px;background:var(--c)}
.rk .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.rk .chip{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 10px;border-radius:999px;border-left:4px solid var(--c);background:rgba(255,255,255,.08);font-size:.85rem;font-weight:700}
.rk .why{color:var(--muted);font-size:.9rem;font-weight:700}
.endfoot{position:sticky;bottom:-20px;width:calc(100% + 40px);margin:0 -20px -20px;padding:12px 20px calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;flex-wrap:wrap;background:linear-gradient(transparent,rgba(29,26,77,.97) 30%)}
.endfoot .btn-primary{min-width:260px;min-height:52px}
/* "Ver ranking": under the reading while the list is below the fold (JS hides it once the list is on screen); not offered
   before the reveal ends */
.seerank{justify-self:center}.endc:not(.shown) .seerank{visibility:hidden}
@media (max-width:600px){.endc{padding:14px;gap:10px}.endfoot{bottom:-14px;width:calc(100% + 28px);margin:0 -14px -14px}.endfoot .btn-primary{flex:1;min-width:0;width:auto}.endfoot .btn:not(.btn-primary):not(.btn-small){flex:none}.endfoot .btn-small{flex:1 0 100%}.endhero canvas{width:88px;height:88px}.podnames{font-size:.85rem}}
/* short desktop windows (1280x800): a smaller podium and hero keep the reading above the footer */
@media (min-width:601px) and (max-height:860px){.endc{--podw:min(420px,100%);gap:10px}.endhero canvas{width:88px;height:88px}}
@media (prefers-reduced-motion:reduce){.endhero::before,.endhero canvas,.endhero h2.stamp,.endhero h2.end-stamp{animation:none!important}.rk>li{transition:none}}