/* ==========================================================================
   GRIDROP · OVERTAKE — THE FINAL RESULTS, from the owner's third design.

   The end of a match: a nebula behind, glass cards drifting across it, and one
   tall panel carrying the headline, a three-step podium, what the match is
   remembered for, everyone else in two columns, and the way to play again.

   It DECORATES the game's own end screen exactly as felt-results.css decorates
   the reveal — the game's Play-again button, its Back button and its whole
   per-player word breakdown are MOVED into this frame, never rebuilt, so every
   handler and every number stays the game's. Sizes come from variables felt.js
   writes after measuring the screen.
   ========================================================================== */

/* The stage hangs off the COLUMN here, not off `.arena-cen` — the end screen has
   no such wrapper — so the column is what has to be positioned and full height. */
body.ot-fin .arena-cen{position:relative;min-height:0;display:block;overflow:visible}
body.ot-fin .col{position:relative;gap:0;height:100%;min-height:0;padding:0;overflow:hidden}
/* what is left of the game's own centre after its parts have been borrowed */
body.ot-fin .center{position:absolute;inset:0;padding:0;margin:0;pointer-events:none;
  display:block;overflow:visible;background:none;border:0;box-shadow:none}
body.ot-fin .arena{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  grid-template-areas:"c";gap:0;padding:0;min-height:0}
body.ot-fin .side,body.ot-fin .arena-title,body.ot-fin .roster{display:none!important}
body.ot-fin .frame{max-width:none;padding:0}
body.ot-fin .chdr,body.ot-fin .hdr{position:absolute!important;left:0;right:0;top:0;height:0!important;
  min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;
  box-shadow:none!important;overflow:visible;pointer-events:none;z-index:30}
body.ot-fin .chdr > *,body.ot-fin .hdr > *{display:none!important}
body.ot-fin .gx-btn.gx-float,body.ot-fin #fsbtn,body.ot-fin #fsbtnhint-float{display:none!important}
/* the game's own end-screen furniture: its headline, its big number and its hint
   are all said again inside this frame, so the originals stand down */
body.ot-fin .center > .big,body.ot-fin .center > .hsub,
body.ot-fin .center > .standhint,body.ot-fin .center > div:first-child{display:none!important}

/* ---- the stage ---------------------------------------------------------- */
.ofin{position:absolute;inset:0;z-index:2;overflow:hidden;background:#0a1016}
.ofin-bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);
  object-fit:cover;animation:gr-nebula 46s ease-in-out infinite alternate}
.ofin-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,rgba(0,0,0,0) 30%,rgba(7,12,17,.55) 72%,rgba(6,10,14,.85) 100%),
             linear-gradient(180deg,rgba(8,13,18,.35),rgba(0,0,0,0) 28% 70%,rgba(7,11,16,.5))}
/* the design's drifting glass cards, well behind the panel */
.ofin-card{position:absolute;z-index:1;pointer-events:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(120,150,165,.16),rgba(10,20,26,.3));
  border:1px solid rgba(160,220,235,.16);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  font:900 var(--finCardF,26px)/1 Cairo,sans-serif;color:rgba(190,232,240,.3);
  animation:gr-float 9s ease-in-out infinite}

/* ---- the panel ---------------------------------------------------------- */
.ofin-panel{position:absolute;left:50%;transform:translateX(-50%);
  top:var(--finPad,26px);bottom:var(--finPad,26px);width:var(--finW,930px);
  max-width:calc(100% - 24px);z-index:4;box-sizing:border-box;
  border-radius:var(--finRad,26px);padding:var(--finPadIn,26px) var(--finPadX,34px) var(--finPadB,24px);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,22,28,.72),rgba(8,14,19,.82));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(120,214,226,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 40px rgba(69,237,237,.08),inset 0 1px 0 rgba(230,245,250,.1)}
.ofin-head{flex:none;text-align:center;font:900 var(--finHeadF,26px)/1.3 Cairo,sans-serif;
  color:#eafcff;text-shadow:0 0 18px rgba(69,237,237,.35)}
.ofin-head b{color:var(--fingold,#f0c04f)}

/* ---- the podium --------------------------------------------------------- */
.ofin-pod{position:relative;flex:none;height:var(--podH,322px);margin-top:6px}
.ofin-step{position:absolute;bottom:6px;display:flex;flex-direction:column;align-items:center}
.ofin-step.s1{left:50%;transform:translateX(-50%);width:var(--s1W,280px);z-index:2;
  animation:gr-aura1 2.2s ease-in-out infinite}
.ofin-step.s2{left:var(--sideX,40px);width:var(--sW,250px);animation:gr-aura2 3s ease-in-out infinite}
.ofin-step.s3{right:var(--sideX,40px);width:var(--sW,250px);animation:gr-aura3 3.4s ease-in-out infinite}
.ofin-sc{display:flex;align-items:center;gap:var(--scGap,12px)}
.ofin-sc .v{font:900 var(--sc1F,66px)/1 Cairo,sans-serif;font-variant-numeric:tabular-nums}
.ofin-step.s1 .ofin-sc .v{color:#f0c04f;text-shadow:0 0 26px rgba(240,196,79,.6)}
.ofin-step.s2 .ofin-sc .v{color:#dfe6eb;text-shadow:0 0 20px rgba(210,228,240,.55);font-size:var(--scF,54px)}
.ofin-step.s3 .ofin-sc .v{color:#f0a44f;text-shadow:0 0 20px rgba(240,164,79,.55);font-size:var(--scF,54px)}
.ofin-sc img{display:block;width:var(--medal1,52px);height:var(--medal1,52px);
  filter:drop-shadow(0 0 10px rgba(240,196,79,.65))}
.ofin-step.s2 .ofin-sc img,.ofin-step.s3 .ofin-sc img{width:var(--medal,38px);height:var(--medal,38px);
  filter:drop-shadow(0 0 8px rgba(240,180,80,.5))}
.ofin-sub{font:700 var(--subF,14px)/1.3 Cairo,sans-serif;color:#f0c04f;margin:2px 0 4px;white-space:nowrap}
.ofin-step.s3 .ofin-sub{color:#9fd6de;font-size:var(--sub3F,13px)}

.ofin-av{position:relative;width:var(--avS,96px);height:var(--avS,96px);border-radius:14px;
  overflow:hidden;box-sizing:border-box;border:3px solid var(--rc,#45eded);z-index:2;
  box-shadow:0 8px 18px rgba(0,0,0,.5),0 0 16px var(--rc,#45eded);
  background:linear-gradient(180deg,#1a2c36,#0b161d)}
.ofin-step.s2 .ofin-av,.ofin-step.s3 .ofin-av{width:var(--avS2,80px);height:var(--avS2,80px);border-radius:12px}
.ofin-av img,.ofin-av svg{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.ofin-av .mock{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 65% at 50% 34%,rgba(0,0,0,0),rgba(10,22,28,.5) 78%)}

.ofin-top{margin-top:-8px;z-index:1;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.ofin-step.s1 .ofin-top{width:var(--t1W,198px);height:var(--t1H,24px);
  background:linear-gradient(180deg,#ffedb0,#dcae40)}
.ofin-step.s2 .ofin-top{width:var(--t2W,176px);height:var(--t2H,22px);
  background:linear-gradient(180deg,#f7fafc,#b6c1ca)}
.ofin-step.s3 .ofin-top{width:var(--t3W,168px);height:var(--t3H,20px);
  background:linear-gradient(180deg,#f3c79b,#b07840)}
.ofin-body{position:relative;overflow:hidden;box-sizing:border-box;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ofin-step.s1 .ofin-body{width:var(--b1W,238px);height:var(--b1H,102px);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(0,0,0,0) 30%,rgba(0,0,0,.28) 100%),
             linear-gradient(90deg,#7a5a1c,#f0c04f 15% 85%,#7a5a1c);
  border:1px solid #ffe9a8;border-top:none;
  box-shadow:0 18px 34px rgba(0,0,0,.55),inset 0 -8px 14px rgba(0,0,0,.3)}
.ofin-step.s2 .ofin-body{width:var(--b2W,212px);height:var(--b2H,78px);border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(0,0,0,0) 30%,rgba(0,0,0,.26) 100%),
             linear-gradient(90deg,#5d6870,#dfe6eb 15% 85%,#5d6870);
  border:1px solid #f4f8fb;border-top:none;
  box-shadow:0 16px 30px rgba(0,0,0,.5),inset 0 -7px 12px rgba(0,0,0,.28)}
.ofin-step.s3 .ofin-body{width:var(--b3W,204px);height:var(--b3H,62px);border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,0) 30%,rgba(0,0,0,.26) 100%),
             linear-gradient(90deg,#6e431c,#e8a76a 15% 85%,#6e431c);
  border:1px solid #f3c79b;border-top:none;
  box-shadow:0 14px 26px rgba(0,0,0,.5),inset 0 -6px 11px rgba(0,0,0,.26)}
.ofin-body .tex{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 2px,rgba(0,0,0,0) 2px 7px)}
.ofin-body .shn{position:absolute;inset:0;pointer-events:none;background-size:240% 100%;
  background-repeat:no-repeat;animation:gr-sheenP 4.6s ease-in-out infinite;
  background:linear-gradient(112deg,rgba(0,0,0,0) 42%,rgba(255,252,235,.34) 50%,rgba(0,0,0,0) 58%)}
.ofin-body .nm{position:relative;z-index:1;font:800 var(--podNmF,19px)/1.3 Cairo,sans-serif;
  max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofin-body .no{position:relative;z-index:1;font:900 var(--podNoF,44px)/1 Cairo,sans-serif}
.ofin-step.s1 .nm{color:#241a04} .ofin-step.s1 .no{color:rgba(36,26,4,.85);text-shadow:0 1px 0 rgba(255,240,190,.5)}
.ofin-step.s2 .nm{color:#10161c;font-size:var(--podNm2F,17px)}
.ofin-step.s2 .no{color:rgba(16,22,28,.85);text-shadow:0 1px 0 rgba(245,250,255,.5);font-size:var(--podNo2F,38px)}
.ofin-step.s3 .nm{color:#2a1607;font-size:var(--podNm2F,17px)}
.ofin-step.s3 .no{color:rgba(42,22,7,.85);text-shadow:0 1px 0 rgba(250,225,190,.5);font-size:var(--podNo3F,34px)}
.ofin-base{z-index:1;border-radius:4px}
.ofin-step.s1 .ofin-base{width:var(--bs1W,256px);height:var(--bsH,15px);
  background:linear-gradient(180deg,#c2933a,#6e4f14);box-shadow:0 10px 22px rgba(0,0,0,.5)}
.ofin-step.s2 .ofin-base{width:var(--bs2W,228px);height:var(--bsH,15px);
  background:linear-gradient(180deg,#aab4bc,#5c666e);box-shadow:0 9px 20px rgba(0,0,0,.48)}
.ofin-step.s3 .ofin-base{width:var(--bs3W,220px);height:var(--bsH,15px);
  background:linear-gradient(180deg,#b0783f,#5f3d18);box-shadow:0 9px 20px rgba(0,0,0,.48)}
/* the confetti over the podium and each step's own sparks */
.ofin-cf{position:absolute;border-radius:2px;pointer-events:none;animation:gr-fall linear infinite}
.ofin-spk{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(240,196,79,.6) 60%,rgba(0,0,0,0));
  animation:gr-rise ease-out infinite}

/* ---- what the match is remembered for ----------------------------------- */
.ofin-feats{flex:none;display:flex;gap:var(--featGap,14px);justify-content:center;
  margin:var(--featMT,14px) 0 4px}
.ofin-feat{position:relative;overflow:hidden;flex:1 1 0;min-width:0;box-sizing:border-box;
  padding:var(--featPad,11px) 12px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  background:linear-gradient(150deg,rgba(90,110,122,.35),rgba(16,26,34,.75));
  border:1px solid rgba(205,242,250,.3);
  box-shadow:inset 0 1px 0 rgba(235,250,255,.25),0 8px 20px rgba(0,0,0,.4),0 0 12px rgba(240,196,79,.14)}
.ofin-feat .shn{position:absolute;inset:0;pointer-events:none;background-size:240% 100%;
  background-repeat:no-repeat;animation:gr-sheenP 7s ease-in-out infinite;
  background:linear-gradient(112deg,rgba(0,0,0,0) 42%,rgba(200,250,255,.16) 50%,rgba(0,0,0,0) 60%)}
.ofin-feat .l{font:700 var(--featLF,12px)/1.4 Cairo,sans-serif;color:rgba(190,232,240,.75);white-space:nowrap}
.ofin-feat .v{font:900 var(--featVF,16px)/1.4 Cairo,sans-serif;color:#f0c04f;
  text-shadow:0 0 10px rgba(240,196,79,.4);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofin-feat .b{font:700 var(--featLF,12px)/1.4 Cairo,sans-serif;color:#45eded;white-space:nowrap}

/* ---- everyone else, two columns ----------------------------------------- */
.ofin-rest{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--restGapY,10px) var(--restGapX,14px);align-content:start;margin-top:8px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:rgba(69,237,237,.5) rgba(0,0,0,.25)}
.ofin-rest::-webkit-scrollbar{width:6px}
.ofin-rest::-webkit-scrollbar-thumb{background:rgba(69,237,237,.5);border-radius:3px}
.ofin-rest::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:3px}
/* flex:none is why these scroll instead of collapsing — the same lesson the round
   results list taught: a shrinkable row in a capped list crushes itself to nothing
   and reports that everything fits */
.ofin-row{flex:none;height:var(--restH,46px);min-height:var(--restH,46px);
  display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:10px;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(32,44,56,.85),rgba(16,24,32,.9));
  border:1px solid rgba(150,220,230,.14);cursor:pointer}
.ofin-row:hover{border-color:rgba(69,237,237,.4)}
.ofin-row.you{background:linear-gradient(90deg,rgba(20,52,58,.9),rgba(12,30,36,.92));
  border-color:rgba(69,237,237,.55)}
.ofin-row .rk{flex:none;width:20px;font:800 var(--restRkF,15px)/1 Cairo,sans-serif;
  color:rgba(190,232,240,.65);font-variant-numeric:tabular-nums}
.ofin-row .av{position:relative;flex:none;width:var(--restAv,28px);height:var(--restAv,28px);
  border-radius:7px;overflow:hidden;box-sizing:border-box;border:2px solid var(--rc,#45eded);
  box-shadow:0 0 8px var(--rc,#45eded);background:linear-gradient(180deg,#16303a,#08181f)}
.ofin-row .av img,.ofin-row .av svg{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.ofin-row .nm{flex:1;min-width:0;font:800 var(--restNmF,16px)/1.4 Cairo,sans-serif;color:#eafcff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ofin-row .pt{font:900 var(--restPtF,17px)/1 Cairo,sans-serif;color:#dff2f6;font-variant-numeric:tabular-nums}
.ofin-row .pen{flex:none;width:18px;height:18px;opacity:.85}

/* ---- the notes and the way on ------------------------------------------- */
.ofin-notes{flex:none;display:flex;justify-content:space-between;gap:12px;padding:8px 4px 0}
.ofin-notes span{font:600 var(--noteF,11.5px)/1.4 Cairo,sans-serif;color:rgba(190,232,240,.55);
  white-space:nowrap}
.ofin-notes .det{cursor:pointer;color:#45eded;border-bottom:1px dashed rgba(69,237,237,.5)}
.ofin-notes .det:hover{color:#7ff2f2}
.ofin-go{flex:none;display:flex;justify-content:center;margin-top:var(--goMT,12px)}
.ofin-go > div{width:var(--goW,420px);max-width:100%;height:var(--goH,56px);border-radius:13px;
  padding:2.5px;box-sizing:border-box;background:linear-gradient(165deg,#cfd6dc,#7d8891 50%,#b9c2cb)}
body.ot-fin .ofin-go .btn{width:100%;height:100%;border-radius:10px;box-sizing:border-box;margin:0;padding:0;
  max-width:none;background:linear-gradient(180deg,rgba(34,90,96,.9),rgba(12,42,48,.95));
  border:1.5px solid #45eded;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font:800 var(--goF,21px)/1 Cairo,sans-serif;color:#eafcff;text-shadow:0 0 12px rgba(69,237,237,.7);
  animation:gr-btn 2.4s ease-in-out infinite}

/* the exit pill, bottom-left, carrying the game's own Back button */
.ofin-exit{position:absolute;left:22px;bottom:18px;z-index:5;display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:10px;border:1px solid rgba(150,220,230,.25);
  background:rgba(10,20,26,.65);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body.ot-fin .ofin-exit .backbtn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;
  font:700 var(--exitF,14px)/1 Cairo,sans-serif;color:#bfe6ec;white-space:nowrap}
body.ot-fin .ofin-exit .backbtn:hover{color:#eafcff}

/* ---- the word breakdown, the game's own, one tap away ------------------- */
.ofin-det{position:absolute;left:50%;transform:translateX(-50%);z-index:6;
  top:var(--finPad,26px);bottom:var(--finPad,26px);width:var(--finW,930px);max-width:calc(100% - 24px);
  box-sizing:border-box;border-radius:var(--finRad,26px);padding:18px 22px;
  display:none;flex-direction:column;
  background:linear-gradient(180deg,rgba(10,19,25,.96),rgba(6,12,17,.98));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(120,214,226,.28);box-shadow:0 30px 80px rgba(0,0,0,.7)}
body.ot-fin.ot-det .ofin-det{display:flex}
.ofin-det > .h{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid rgba(150,220,230,.16);
  font:900 var(--finHeadF,20px)/1.3 Cairo,sans-serif;color:#eafcff}
.ofin-det .x{cursor:pointer;font:800 15px/1 Cairo,sans-serif;color:#45eded;
  border:1px solid rgba(69,237,237,.45);border-radius:8px;padding:6px 13px}
.ofin-det .x:hover{color:#7ff2f2;border-color:rgba(69,237,237,.8)}
body.ot-fin .ofin-det .stand{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  width:100%;max-width:none;margin:0}

/* ---- the design's keyframes -------------------------------------------- */
@keyframes gr-aura1{0%,100%{filter:drop-shadow(0 0 10px rgba(240,196,79,.45))}
  50%{filter:drop-shadow(0 0 26px rgba(255,222,125,.85))}}
@keyframes gr-aura2{0%,100%{filter:drop-shadow(0 0 7px rgba(210,228,240,.3))}
  50%{filter:drop-shadow(0 0 16px rgba(230,244,252,.6))}}
@keyframes gr-aura3{0%,100%{filter:drop-shadow(0 0 7px rgba(224,149,92,.3))}
  50%{filter:drop-shadow(0 0 16px rgba(235,170,110,.6))}}
@keyframes gr-rise{0%{transform:translateY(10px) scale(.5);opacity:0}15%{opacity:1}
  100%{transform:translateY(-90px) scale(1.1);opacity:0}}
@keyframes gr-fall{0%{transform:translateY(-14px) rotate(0deg);opacity:0}12%{opacity:.9}
  100%{transform:translateY(150px) rotate(200deg);opacity:0}}
@keyframes gr-float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}

/* NO prefers-reduced-motion block here, deliberately — the same one that was
   silencing every effect on the round results and the table. The motion is slow
   and ambient; nothing flashes. */

/* A SHORT SCREEN drops what it cannot afford: the drifting cards, the confetti
   and the sparks. The podium, the three feats and the list are the screen. */
body.ot-fin.ot-tight .ofin-card,
body.ot-fin.ot-tight .ofin-cf,
body.ot-fin.ot-tight .ofin-spk{display:none}
body.ot-fin.ot-tight .ofin-panel{border-radius:0;top:0;bottom:0}
/* and a NARROW one puts the also-rans in one column rather than two half-names */
@media(max-width:720px){ .ofin-rest{grid-template-columns:1fr} }