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

   The round's reveal, restyled to match the table it follows: a brushed-steel
   cabinet around a dark screen, a nebula drifting behind it, sweeping beams,
   neon brackets down both edges, the ranked table, and one bar across the foot
   carrying the way out, the way on, and full screen.

   It DECORATES the game's own reveal exactly as felt.css decorates the play
   screen — the game's .revwrap and its Next button are MOVED into this frame,
   never rebuilt, so every score, every word and every handler stays the game's.
   Sizes come from variables felt.js writes after measuring the screen.
   ========================================================================== */

body.ot-res .arena-cen{position:relative;min-height:0;display:block;overflow:visible}
body.ot-res .col{gap:0;height:100%;min-height:0}
body.ot-res .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-res .side,body.ot-res .arena-title,body.ot-res .roster{display:none!important}
body.ot-res .frame{max-width:none;padding:0;margin:0;width:100%}
/* edge to edge, like the table — the stage's breathing room is for menus */
body.ot-res .stage{border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left)!important}
/* both headers collapse — this screen carries its own chrome */
body.ot-res .chdr,body.ot-res .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-res .chdr > *,body.ot-res .hdr > *{display:none!important}
body.ot-res .gx-btn.gx-float{display:none!important}
body.ot-res #fsbtn,body.ot-res #fsbtnhint-float{display:none!important}   /* the foot bar carries it */

/* ---- the cabinet ------------------------------------------------------- */
.ores{position:absolute;inset:0;z-index:2;box-sizing:border-box;
  padding:var(--resPad,14px);border-radius:var(--resRad,30px);
  background:linear-gradient(160deg,#dfe6eb 0%,#9aa5ae 12%,#5d6870 30%,#aab4bc 50%,#6e7a84 72%,#cfd6dc 92%,#8f99a2 100%)}
.ores-in{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--resRad,30px) * .67);
  background:radial-gradient(120% 100% at 50% 0%,#1a242c 0%,#10181f 46%,#090e12 100%);
  box-shadow:inset 0 0 0 1px rgba(150,220,230,.18),inset 0 4px 18px rgba(0,0,0,.7)}
.ores-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}
.ores-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 44%,rgba(0,0,0,0) 26%,rgba(7,12,17,.5) 70%,rgba(6,10,14,.82) 100%),
             linear-gradient(180deg,rgba(8,13,18,.4),rgba(0,0,0,0) 26% 68%,rgba(7,11,16,.55))}
.ores-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 55% at 50% 112%,rgba(69,237,237,.07),rgba(0,0,0,0) 65%),
             radial-gradient(140% 90% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}
.ores-beam{position:absolute;top:-60px;height:190%;pointer-events:none;
  clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);filter:blur(28px);transform-origin:50% 0}
.ores-part{position:absolute;border-radius:50%;opacity:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(220,250,255,.95),rgba(120,235,245,.75) 55%,rgba(0,0,0,0))}
.ores-brk{position:absolute;width:var(--brkW,12px);z-index:3;
  background:linear-gradient(180deg,rgba(69,237,237,.1),#45eded 50%,rgba(69,237,237,.1));
  box-shadow:0 0 18px #45eded;animation:gr-bracket 3.2s ease-in-out infinite}
.ores-brk.l{left:8px;clip-path:polygon(0 0,100% 6%,100% 94%,0 100%)}
.ores-brk.r{right:8px;clip-path:polygon(100% 0,0 6%,0 94%,100% 100%);animation-delay:.8s}

/* ---- the two round buttons, top left ---------------------------------- */
.ores-btns{position:absolute;left:var(--resGut,34px);top:var(--resTop,26px);display:flex;
  gap:calc(var(--rbD,58px) * .28);z-index:6}
.ores-btns > .cap{width:var(--rbD,58px);height:var(--rbD,58px);border-radius:50%;box-sizing:border-box;
  padding:3px;background:linear-gradient(165deg,#cfd6dc,#7d8891 55%,#b9c2cb);
  box-shadow:0 8px 16px rgba(0,0,0,.5)}
.ores-btns .backbtn,.ores-btns .ch-help{all:unset;cursor:pointer;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
  background:linear-gradient(180deg,#16242d,#0b141a);border:1px solid rgba(120,214,226,.4);
  font:800 calc(var(--rbD,58px) * .36)/1 Cairo,sans-serif;color:#45eded;
  text-shadow:0 0 10px rgba(69,237,237,.6);white-space:nowrap}
.ores-btns .backbtn{font-size:calc(var(--rbD,58px) * .22)}
.ores-btns .backbtn:hover,.ores-btns .ch-help:hover{color:#7ff2f2}

/* ---- round plate + the countdown dial, top right ---------------------- */
.ores-hud{position:absolute;right:var(--resGut,28px);top:var(--resTop,22px);z-index:6;
  height:var(--dialD,98px);display:flex;align-items:center}
.ores-plate{height:calc(var(--dialD,98px) * .735);box-sizing:border-box;padding:1.5px;
  margin-inline-end:calc(var(--dialD,98px) * -.5);
  clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 50%);
  background:linear-gradient(165deg,rgba(223,230,235,.75),rgba(119,130,139,.6) 45%,rgba(185,194,203,.7))}
.ores-plate > div{width:100%;height:100%;box-sizing:border-box;position:relative;overflow:hidden;
  clip-path:polygon(11.2% 0,100% 0,100% 100%,11.2% 100%,.3% 50%);
  background:linear-gradient(115deg,rgba(69,237,237,.16),rgba(0,0,0,0) 42%,rgba(120,160,220,.08) 100%),
             linear-gradient(180deg,rgba(26,40,49,.48),rgba(10,18,24,.6));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(230,245,250,.28),inset 0 0 24px rgba(69,237,237,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  /* THE DIAL SITS ON THIS PLATE'S END — that is the design, the two read as one
     object — so the plate reserves room for it. That reserve was written in
     PHYSICAL right/left, which is correct in English and exactly backwards in
     Arabic: the dial moves to the plate's left and the padding stayed on the
     right, so the dial covered the round. Only "8" survived, which is why it
     looked like it was counting 8 to 2 instead of 2 to 8. Logical now. */
  padding-block:0;
  padding-inline:calc(var(--dialD,98px) * .22) calc(var(--dialD,98px) * .58)}
/* the notch points AWAY from the dial, so it mirrors too */
body.ar .ores-plate{clip-path:polygon(89% 0,0 0,0 100%,89% 100%,100% 50%)}
body.ar .ores-plate > div{clip-path:polygon(88.8% 0,0 0,0 100%,88.8% 100%,99.7% 50%)}
.ores-plate .l{font:700 var(--resLbl,14px)/1 Cairo,sans-serif;color:rgba(190,232,240,.75);white-space:nowrap}
.ores-plate .v{font:800 var(--resVal,21px)/1 Cairo,sans-serif;color:#f2fbfd;letter-spacing:1px;
  font-variant-numeric:tabular-nums}
.ores-dial{position:relative;flex:none;width:var(--dialD,98px);height:var(--dialD,98px);border-radius:50%;
  box-sizing:border-box;padding:4px;
  background:conic-gradient(from 180deg,#4a545d,#8b959e 22%,#e2e9ee 50%,#6e7a84 78%,#4a545d);
  box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 14px rgba(69,237,237,.14)}
.ores-dial > .face{position:relative;width:100%;height:100%;border-radius:50%;box-sizing:border-box;
  background:radial-gradient(circle at 50% 34%,#1d2f3a,#0a141a 74%);border:1px solid rgba(120,214,226,.3)}
.ores-dial .ticks{position:absolute;inset:3px;border-radius:50%;opacity:.5;
  background:repeating-conic-gradient(rgba(205,225,235,.75) 0deg 1.6deg,rgba(0,0,0,0) 1.6deg 7.5deg);
  -webkit-mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 76%,#000 78% 96%,rgba(0,0,0,0) 98%);
  mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 76%,#000 78% 96%,rgba(0,0,0,0) 98%)}
.ores-dial .ring{position:absolute;inset:10px;border-radius:50%;
  background:conic-gradient(from 0deg,#45eded 0deg var(--deg,360deg),rgba(120,200,215,.14) var(--deg,360deg) 360deg);
  -webkit-mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 74%,#000 76% 94%,rgba(0,0,0,0) 96%);
  mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 74%,#000 76% 94%,rgba(0,0,0,0) 96%);
  filter:drop-shadow(0 0 5px rgba(69,237,237,.85))}
.ores-dial .sweep{position:absolute;inset:3px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,0,0,0) 0deg 296deg,rgba(69,237,237,.35) 330deg,#9ff6f6 354deg,#fff 359deg,rgba(0,0,0,0) 360deg);
  -webkit-mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 76%,#000 78% 96%,rgba(0,0,0,0) 98%);
  mask:radial-gradient(circle closest-side,rgba(0,0,0,0) 76%,#000 78% 96%,rgba(0,0,0,0) 98%);
  animation:gr-rotR 2.6s linear infinite;filter:drop-shadow(0 0 5px rgba(69,237,237,.8))}
.ores-dial .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;
  font:800 var(--dialF,27px)/1 Cairo,sans-serif;color:#f0c04f;text-shadow:0 0 12px rgba(240,196,79,.55);
  font-variant-numeric:tabular-nums}
.ores-dial .num svg{width:calc(var(--dialF,27px) * .45);height:calc(var(--dialF,27px) * .52)}

/* ---- the ranked table -------------------------------------------------- */
.ores-tbl{position:absolute;left:50%;transform:translateX(-50%);top:var(--tblY,112px);
  width:var(--tblW,1190px);max-width:calc(100% - 12px);box-sizing:border-box;z-index:4;
  border-radius:16px;background:rgba(9,17,23,.55);border:1px solid rgba(150,220,230,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:6px 14px 12px;
  /* twelve players on a phone: the pane may grow only to the footer, and
     SCROLLS what cannot stand in it instead of clipping rank 7 into the void */
  max-height:calc(100% - var(--tblY,112px) - var(--footH,96px) - 8px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ores-tbl::-webkit-scrollbar{width:4px}
.ores-tbl::-webkit-scrollbar-thumb{background:rgba(140,235,247,.35);border-radius:3px}
/* the head reserves the badge column too, or its labels would sit one badge-width
   off the columns they name */
.ores-head{display:flex;align-items:center;gap:12px;
  padding:8px 16px 8px;padding-inline-end:calc(16px + var(--colTag,88px))}
.ores-head > span{font:700 var(--headF,16px)/1.5 Cairo,sans-serif;color:rgba(190,232,240,.75);text-align:center}
.ores-head .c-rank{flex:none;width:var(--colRank,96px)}
.ores-head .c-pts{flex:none;width:var(--colPts,120px)}
.ores-head .c-time{flex:none;width:var(--colTime,130px)}
.ores-head .c-who{flex:1;min-width:0;font:800 calc(var(--headF,16px) * 1.14)/1.5 Cairo,sans-serif;color:#eafcff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ores-head .c-who b{color:#f0c04f}

/* the game's own reveal panel becomes the body of the table */
/* max-height and overflow are deliberately NOT reset here — the rule further
   down gives the list a real ceiling so twelve rows scroll instead of running
   over the foot bar, and a `none!important` up here would silently outrank it. */
/* width:100% + max-width:none are both load-bearing. On a monitor the game caps
   .revwrap at 660px and centres it with margin-inline:auto — a cap meant for the
   narrow column it used to live in. Inside this table that cap left the rows at
   half the panel's width, and the margin:0 above killed the centring too, so
   they hugged one edge with a hole beside them and the names ran out of room. */
body.ot-res .revwrap{display:flex;flex-direction:column;gap:var(--rowGap,9px);
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;
  width:100%!important;max-width:none!important}
body.ot-res .revbanner{display:none!important}      /* its words moved into the table's head */
/* flex:none is the whole point — inside a list with a ceiling, a shrinkable row
   does not scroll, it COLLAPSES: twelve of them squeezed themselves to 4px each
   and the screen went blank rather than admitting it needed to scroll. */
/* THE ROW READS THE OWNER'S WAY: portrait, name, word, time, points, rank, badge.
   The badges are lifted out of the flow and pinned to the row's end, with the same
   width reserved on every row. They cannot be ordinary columns: the flexible name
   column now comes FIRST, so a badge in the flow would steal its width and shove
   time, points and rank sideways on exactly the two rows that matter — the
   winner's and yours — leaving twelve rows whose columns do not line up. */
body.ot-res .rrow{flex:none;height:var(--rowH,52px);min-height:var(--rowH,52px);
  display:flex;align-items:center;gap:12px;position:relative;
  padding:0 16px;padding-inline-end:calc(16px + var(--colTag,88px));
  border-radius:11px;box-sizing:border-box;margin:0;
  background:linear-gradient(180deg,rgba(38,50,61,.9),rgba(20,29,37,.92));
  border:1px solid rgba(150,220,230,.16);
  box-shadow:inset 0 1px 0 rgba(230,245,250,.14),0 4px 10px rgba(0,0,0,.35)}
body.ot-res .rrow.win{background:linear-gradient(90deg,rgba(96,30,34,.92),rgba(58,20,26,.95));
  border:1.5px solid #f0c04f;animation:gr-winpulse 2.4s ease-in-out infinite}
body.ot-res .rrow.you{background:linear-gradient(90deg,rgba(20,52,58,.9),rgba(12,30,36,.92));
  border:1.5px solid #45eded;animation:gr-youpulse 2.4s ease-in-out infinite}
body.ot-res .rrow.win.you{background:linear-gradient(90deg,rgba(96,30,34,.92),rgba(58,20,26,.95));
  border:1.5px solid #f0c04f}

/* THE FIRST THREE. The design dressed only the winner and only you; the other two
   places looked like everyone else, so second and third had nothing to show for
   it. They now wear the same metals the table's banner rail already uses — silver
   and bronze — and all three carry a slow sheen across the plate. Your own row
   keeps its cyan whatever place you took: which row is yours matters more than
   which metal it is, and the rank badge says the place anyway. */
body.ot-res .rrow.p2:not(.you):not(.win){
  background:linear-gradient(90deg,rgba(63,76,88,.92),rgba(26,35,44,.95));
  border:1.5px solid #c9d8e4;animation:gr-silverpulse 2.7s ease-in-out infinite}
body.ot-res .rrow.p3:not(.you):not(.win){
  background:linear-gradient(90deg,rgba(78,53,31,.92),rgba(34,24,16,.95));
  border:1.5px solid #cf9058;animation:gr-bronzepulse 3.1s ease-in-out infinite}
body.ot-res .rrow.p2:not(.you) .rsc{color:#e6eef5}
body.ot-res .rrow.p3:not(.you) .rsc{color:#e8b489}
body.ot-res .rrow.p1,body.ot-res .rrow.p2,body.ot-res .rrow.p3{position:relative;overflow:hidden}
body.ot-res .rrow.p1::after,body.ot-res .rrow.p2::after,body.ot-res .rrow.p3::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,rgba(0,0,0,0) 40%,rgba(255,255,255,.17) 49%,
             rgba(255,255,255,.06) 54%,rgba(0,0,0,0) 63%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:gr-sheenP 6.5s ease-in-out infinite}
body.ot-res .rrow.p2::after{animation-delay:.9s}
body.ot-res .rrow.p3::after{animation-delay:1.8s}

/* rank number, or the winner's trophy — injected by felt.js */
.ores-rk{flex:none;width:var(--colRank,96px);display:flex;align-items:center;justify-content:center;
  order:5;font:800 var(--rowF,19px)/1 Cairo,sans-serif;color:#eafcff;font-variant-numeric:tabular-nums}
.ores-rk svg{width:calc(var(--rowF,19px) * 1.6);height:calc(var(--rowF,19px) * 1.6)}
/* the top three read as places at a glance — gold, silver, bronze — which is what
   a twelve-row table needs most: the eye finds its own row by colour, not by counting */
.ores-rk.m1{color:#f6cd5e;text-shadow:0 0 10px rgba(240,196,79,.45)}
.ores-rk.m2{color:#dbe4ec;text-shadow:0 0 8px rgba(200,220,235,.35)}
.ores-rk.m3{color:#e2a06b;text-shadow:0 0 8px rgba(215,140,80,.3)}

/* ===== ARABIC NEEDS A TALLER LINE BOX THAN /1 =====
   The owner: «الكلمات اللي يكتبها الروبوت ما تبين كلها، تبين مكسوسة» — the words
   the bots write are cut off. They were, and so was every other label in this
   table. Every cell here was set at line-height 1, which is a Latin habit: a
   16px Latin line fits in 16px, but Cairo at the same size wants about 1.4 of
   it, because ق ج ح خ ع غ ن ي س ش ص ض ة all hang their bowl BELOW the baseline.
   Measured against an unclipped clone of each cell at 1902x1057:

     .rword    17px box, needs 24   -> 7px of every tail sliced   (overflow:hidden)
     .ores-nm  23px box, needs 28   -> 5px                        (overflow:hidden)
     .c-who    23px box, needs 29   -> 6px                        (overflow:hidden)
     .rsc      18px box, needs 25   -> spills, but overflow:visible saved it
     .rtm / .c-rank / .c-pts / .c-time — same story, also visible

   The three with overflow:hidden are the ones the eye catches, and .rword is the
   worst of them: «نطاق» lost the bowl of its ق and what was left read as a comma.
   The overflow:hidden cannot go — it is what makes text-overflow:ellipsis work on
   a narrow column — so the LINE BOX grows instead. The rows are 46px tall and
   align-items:center, so every one of these fits with room to spare.
   1.5 not 1.4: the measured need is a floor, and a name in a font with a longer
   descender should not put us back here. */
body.ot-res .rrow .rsc{flex:none;width:var(--colPts,120px);text-align:center;order:4;
  font:800 var(--rowF,19px)/1.5 Cairo,sans-serif;color:#eafcff}
body.ot-res .rrow.win .rsc{color:#f0c04f}
body.ot-res .rrow.you .rsc{color:#3ee8e8}
body.ot-res .rrow .rtm{flex:none;width:var(--colTime,130px);order:3;display:flex;align-items:center;
  justify-content:center;
  justify-content:center;gap:6px;font:800 calc(var(--rowF,19px) * .95)/1.5 Cairo,sans-serif;color:#f0c04f}
body.ot-res .rrow .rtm .u{font-size:.78em;opacity:.75}
body.ot-res .rrow .rn2{flex:1;min-width:0;order:1;display:flex;align-items:center;gap:12px;
  font:800 var(--rowF,19px)/1.5 Cairo,sans-serif;color:#eafcff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The NAME is a bare text node in the game's markup, and a bare text node cannot
   take an ellipsis — when the column tightened it did not shorten, it vanished
   whole (the winner's row showed an avatar and no name at all). felt.js wraps it
   so it can shorten honestly instead. */
body.ot-res .rrow .rn2 .ores-nm{flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.ot-res .rrow.you .rn2{text-shadow:0 0 10px rgba(69,237,237,.5)}
body.ot-res .rrow .rn2 .sav{flex:none;width:var(--avD,38px);height:var(--avD,38px);border-radius:9px;
  position:relative;overflow:hidden;box-sizing:border-box;border:2px solid var(--rc,#45eded);
  box-shadow:0 0 10px var(--rc,#45eded);background:linear-gradient(180deg,#16303a,#08181f)}
body.ot-res .rrow .rn2 .sav img,body.ot-res .rrow .rn2 .sav svg{width:100%;height:100%;
  object-fit:cover;object-position:50% 22%}
/* the word: yours legible, a rival's a rule of dots — the game's own rule kept */
/* the word stays next to the player who played it — the owner's order named the
   other five columns, not this one, and "who + what they wrote" belongs together */
body.ot-res .rrow .rword{flex:none;order:2;min-width:var(--colWord,120px);text-align:center;
  font:800 calc(var(--rowF,19px) * .95)/1.5 Cairo,sans-serif;color:#d6f0f6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.ot-res .rrow.win .rword{color:#f0c04f}
/* pinned to the row's end, out of the column flow — see the .rrow note above */
.ores-badges{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:6px;pointer-events:none;z-index:2}
body.ot-res .rrow .tag{flex:none;order:6;padding:3px 12px;border-radius:6px;transform:skewX(-8deg);
  font:800 calc(var(--rowF,19px) * .68)/1.3 Cairo,sans-serif;
  background:linear-gradient(180deg,#f6cd5e,#a87c22);color:#241a04;border:0;
  box-shadow:0 0 10px rgba(240,196,79,.4);white-space:nowrap}
.ores-you{flex:none;order:7;padding:3px 12px;border-radius:6px;transform:skewX(-8deg);white-space:nowrap;
  font:800 calc(var(--rowF,19px) * .68)/1.3 Cairo,sans-serif;
  background:rgba(10,30,36,.8);color:#3ee8e8;border:1px solid rgba(69,237,237,.6);
  box-shadow:0 0 8px rgba(69,237,237,.3)}

/* the best-possible-word strip */
/* THE BEST-POSSIBLE WORD LEADS — the owner: "show me right away, at the top
   of the table, so I don't need to scroll." paintResults lifts .revbest out
   of the scrolling list and into the cabinet pane (.ores-tbl); the pane is a
   flex column ordered head → best word → ranked rows, so the line stands
   above the list and can never scroll away. */
body.ot-res .ores-tbl{display:flex;flex-direction:column}
body.ot-res .ores-tbl > .ores-head{order:0}
body.ot-res .ores-tbl > .revbest{order:1;margin-top:4px;margin-bottom:4px}
body.ot-res .ores-tbl > .revwrap{order:2}
body.ot-res .revbest{
  margin-top:0;padding:10px 16px;border-radius:10px;
  background:rgba(14,24,31,.75);border:1px solid rgba(150,220,230,.14);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:700 var(--bestF,17px)/1.4 Cairo,sans-serif;color:#d6f0f6;text-align:center}
body.ot-res .revbest b{color:#f0c04f;font-weight:800}

/* ---- the foot bar ------------------------------------------------------ */
/* With fullscreen gone the bar carries two things, not three, and space-between
   would have shoved «الجولة التالية» off to one side. The way out is pinned to
   the starting edge (inset-inline-start, so Arabic pins it right) and the way on
   keeps the middle of the screen, where it was in the design. */
.ores-foot{position:absolute;left:0;right:0;bottom:0;height:var(--footH,96px);z-index:6;
  display:flex;align-items:center;justify-content:center;padding:0 var(--footPad,44px);
  background:linear-gradient(180deg,rgba(16,26,33,.2),rgba(7,12,16,.85));
  border-top:1px solid rgba(150,220,230,.14)}
.ores-foot .fside{position:absolute;inset-inline-start:var(--footPad,44px);
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  font:700 var(--footF,14px)/1 Cairo,sans-serif;color:#bfe6ec;background:none;border:0;padding:0}
.ores-foot .fside svg{width:calc(var(--footF,14px) * 1.85);height:calc(var(--footF,14px) * 1.85)}
.ores-foot .fside:hover{color:#eafcff}
.ores-next{flex:none;width:var(--nextW,620px);max-width:52%;height:var(--nextH,62px);border-radius:14px;
  padding:3px;box-sizing:border-box;background:linear-gradient(165deg,#cfd6dc,#7d8891 50%,#b9c2cb);
  box-shadow:0 10px 24px rgba(0,0,0,.5)}
body.ot-res .ores-next .btn{width:100%;height:100%;border-radius:11px;box-sizing:border-box;margin:0;padding:0;
  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(--nextF,24px)/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}
body.ot-res .ores-next .btn.gold{border-color:#f0c04f;color:#fff4d6;
  background:linear-gradient(180deg,rgba(120,88,20,.92),rgba(58,40,8,.95));
  text-shadow:0 0 12px rgba(240,196,79,.75);animation:gr-winpulse 2.4s ease-in-out infinite}

/* ---- the design's keyframes for this screen ---------------------------- */
@keyframes gr-rotR{to{transform:rotate(360deg)}}
@keyframes gr-nebula{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.07) translate(-14px,-10px)}}
@keyframes gr-pUpA{0%{transform:translate(0,0) scale(.7);opacity:0}10%{opacity:.85}85%{opacity:.5}
  100%{transform:translate(30px,-640px) scale(1.1);opacity:0}}
@keyframes gr-pUpB{0%{transform:translate(0,0) scale(.8);opacity:0}12%{opacity:.75}85%{opacity:.45}
  100%{transform:translate(-38px,-580px) scale(1);opacity:0}}
@keyframes gr-beamA{0%{transform:rotate(-11deg)}100%{transform:rotate(9deg)}}
@keyframes gr-beamB{0%{transform:rotate(10deg)}100%{transform:rotate(-8deg)}}
@keyframes gr-winpulse{0%,100%{filter:drop-shadow(0 0 6px rgba(240,196,79,.35))}
  50%{filter:drop-shadow(0 0 16px rgba(240,196,79,.7))}}
@keyframes gr-youpulse{0%,100%{filter:drop-shadow(0 0 5px rgba(69,237,237,.3))}
  50%{filter:drop-shadow(0 0 14px rgba(69,237,237,.65))}}
@keyframes gr-bracket{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gr-silverpulse{0%,100%{filter:drop-shadow(0 0 5px rgba(210,228,240,.3))}
  50%{filter:drop-shadow(0 0 14px rgba(210,228,240,.62))}}
@keyframes gr-bronzepulse{0%,100%{filter:drop-shadow(0 0 5px rgba(208,146,90,.28))}
  50%{filter:drop-shadow(0 0 13px rgba(208,146,90,.58))}}
/* the design's own plate sheen, borrowed for the rows that earned one */
@keyframes gr-sheenP{0%{background-position:170% 0}58%,100%{background-position:-70% 0}}
@keyframes gr-btn{0%,100%{box-shadow:0 0 12px rgba(69,237,237,.35),inset 0 0 14px rgba(69,237,237,.25)}
  50%{box-shadow:0 0 26px rgba(69,237,237,.65),inset 0 0 22px rgba(69,237,237,.4)}}

/* A SHORT PHONE drops what it cannot afford: the cabinet's frame, the drifting
   particles and the beams. The table and the foot bar are the screen. */
body.ot-res.ot-tight .ores{padding:0;border-radius:0;background:none}
body.ot-res.ot-tight .ores-in{border-radius:0}
body.ot-res.ot-tight .ores-part,
body.ot-res.ot-tight .ores-beam,
body.ot-res.ot-tight .ores-brk{display:none}
body.ot-res.ot-tight .ores-head .c-rank,
body.ot-res.ot-tight .ores-rk{width:var(--colRank,44px)}

/* NO prefers-reduced-motion block here, deliberately. There was one, and on a
   machine with the OS setting on it switched off the nebula, the beams, the
   brackets, the sweep, the winner's pulse and the button glow — every effect on
   the screen — which is exactly what "I cannot see the effects" was. Same lesson
   the Blitz end screen learned. The motion here is slow and ambient; nothing
   flashes, nothing strobes. */
/* with no dial beside it the plate takes back the room it was leaving clear */
.ores-hud.nodial .ores-plate{margin-inline-end:0}
.ores-hud.nodial .ores-plate > div{padding-inline:calc(var(--dialD,98px) * .22)}

/* TWELVE ROWS ON A PHONE do not fit and must not pretend to. The list is given
   a real ceiling and scrolls inside the table rather than running down over the
   foot bar — the rows keep a legible height instead of being crushed to 10px. */
body.ot-res .revwrap{max-height:var(--rowsMax,none);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(69,237,237,.5) rgba(0,0,0,.25)}
body.ot-res .revwrap::-webkit-scrollbar{width:6px}
body.ot-res .revwrap::-webkit-scrollbar-thumb{background:rgba(69,237,237,.5);border-radius:3px}
body.ot-res .revwrap::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:3px}

/* ---- FULL SCREEN ON PHONES ----------------------------------------------
   The owner: "now the results panel must be full screen." The steel frame
   and its radius are a monitor's dressing — on a phone the cabinet IS the
   screen. The slow nebula drift is also stilled here: one less compositing
   pass on the hardware that felt every one of them. */
@media (max-width:1024px){
  body.ot-res .ores{padding:0;border-radius:0;background:none}
  body.ot-res .ores-in{border-radius:0}
  body.ot-res .ores-bg{animation:none}
  body.ot-res .ores-part,body.ot-res .ores-beam{display:none}
}

/* ---- ARRIVE, don't cut — the owner: "the game should flow smoothly into
   the results board." Still true. What changed is WHAT arrives.

   THE CABINET ITSELF MUST BE OPAQUE IN ITS FIRST FRAME. It used to fade up from
   `opacity:0` over .3s — but afterRender takes the TABLE APART before it paints
   this screen (felt.js: teardown() then paintResults()), so that fade had
   nothing behind it. For the whole 300ms the player was looking through a
   transparent results board at the undressed arena underneath — the raw board
   that returnBoard() had handed back one line earlier, measured display:flex
   771x153 with the round's cards still in it. Then the results appeared. That
   was the owner's «عند انتهاء الوقت المتبقي بجزء من الثانية تظهر الطاولة
   العارية ثم تظهر صفحة النتائج»: 300ms is exactly a fraction of a second.
   Measured at 1/20 speed: .ores opacity 0.028 -> 0.995 with .ofelt already gone.

   So the arrival belongs to the things that sit ON the screen, not to the screen.
   The frame is simply there — and the table, the head-up plate and the foot bar
   rise into it. Nothing is ever seen through, because nothing is ever
   transparent. Same breath, no hole in the middle of it. --------------------- */
/* THE KEYFRAMES MUST CARRY THE CENTRING. .ores-tbl is centred by
   `transform:translateX(-50%)` (:128), and an animation on `transform` REPLACES
   that declaration for as long as it runs — so the table spent the whole .38s
   half its own width to the right and snapped back the instant the animation
   ended. Reproduced in isolation with this exact rule and these exact frames:
   the old keyframes measure 300px off on a 600px pane, the ones below, 0. */
.ores .ores-tbl{ animation:oresTblIn .38s cubic-bezier(.2,.7,.3,1) }
@keyframes oresTblIn{ from{opacity:0;transform:translateX(-50%) translateY(14px)}
                        to{opacity:1;transform:translateX(-50%)} }
.ores .ores-hud,.ores .ores-foot,.ores .ores-btns{ animation:oresRise .32s ease-out }
@keyframes oresRise{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.ores .ores-foot{ animation-name:oresRiseUp }
@keyframes oresRiseUp{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* the whole table must be reachable (owner, 2026-08-01: «مو كل اللاعبين مبينين») —
   the word list scrolls by touch inside the frozen page, and short tablets get
   compact rows so eight players fit without hunting */
body.ot-res .revwrap{overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y}
@media (max-height:620px){ body.ot-res .revwrap .rrow{padding:6px 10px;min-height:0} }