/* Pald Arena (2026-10-29): Key Rooms + Piggy Boink team ranking + level crests on every ranking + the 5-tab bar.
   A HUD language: dark stage panels with chamfered corners, a drifting grid, scanlines, neon cyan/violet edges, glowing
   numerals. The HUD panels stay dark in every theme (a show screen); lists follow the theme tokens. */

/* ---------- ranking tabs (Global · Games · League · Teams · Rooms) ---------- */
.rk-seg.rk-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px}
.rk-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:6px 2px;border:0;background:none;font:inherit;font-size:11px;font-weight:800;letter-spacing:.01em;color:var(--ink-2);cursor:pointer;border-radius:10px;min-width:0}
.rk-tabs .rt-ic{display:grid;place-items:center;width:20px;height:20px;line-height:0}
.rk-tabs .rt-ic .glyph{width:17px;height:17px}.rk-tabs .rt-ic .art{width:19px;height:19px}.rk-tabs .rt-ic img.glyph{width:17px;height:17px}
.rk-tabs .rt-l{display:grid;align-items:center;min-height:22px;max-width:100%;line-height:1.2;text-align:center;white-space:normal;overflow-wrap:anywhere}
.rk-tabs button:focus-visible{outline:2px solid var(--action-ink);outline-offset:-2px}
.rr-ranking-hub{display:grid;gap:14px;width:100%;max-width:760px;margin:0 auto}
.rk-tabs button[aria-selected="true"]{background:var(--surface);color:var(--action-ink);box-shadow:var(--sh-1)}
.rk-tabs button[aria-selected="true"] .rt-ic{filter:drop-shadow(0 0 6px rgba(124,108,255,.55))}
@media (min-width:760px){.rk-tabs button{flex-direction:row;gap:6px;min-height:48px;font-size:13px}}

/* ---------- level crest on faces ---------- */
.lvface{position:relative;display:inline-grid;flex:none;line-height:0}
.lvface>.art:first-child{border-radius:50%}
.lvface-b{position:absolute;right:-5px;bottom:-5px;line-height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));pointer-events:auto}
.lvface-b .level-emblem{display:block}
.t3-ava .lvface-b{right:-2px;bottom:-2px}

/* ---------- HUD stage ---------- */
.rm,.tr{display:grid;gap:10px;width:100%;max-width:760px;margin:0 auto}
.rm-sk1,.tr-sk1{height:150px;border-radius:22px}.rm-sk2,.tr-sk2{height:220px;border-radius:18px}
.rm-hero,.tr-hero,.rm-me{--cut:14px;position:relative;isolation:isolate;overflow:hidden;color:#EAF2FF;
 background:radial-gradient(90% 70% at 15% 0%,rgba(79,216,255,.18),rgba(79,216,255,0) 60%),radial-gradient(80% 70% at 100% 100%,rgba(139,140,248,.22),rgba(139,140,248,0) 62%),linear-gradient(160deg,#0E1638,#070B1F 70%);
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 box-shadow:inset 0 0 0 1px rgba(124,231,255,.22)}
.rm-hero::before,.tr-hero::before,.rm-me::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#4FD8FF 0 18px,transparent 18px) top left/100% 2px no-repeat,linear-gradient(180deg,#4FD8FF 0 18px,transparent 18px) top left/2px 100% no-repeat,
  linear-gradient(270deg,#8B8CF8 0 18px,transparent 18px) bottom right/100% 2px no-repeat,linear-gradient(0deg,#8B8CF8 0 18px,transparent 18px) bottom right/2px 100% no-repeat;opacity:.9}
.rm-grid{position:absolute;inset:-40px;z-index:-2;pointer-events:none;opacity:.55;
 background:repeating-linear-gradient(90deg,rgba(124,231,255,.07) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,rgba(124,231,255,.06) 0 1px,transparent 1px 22px);
 -webkit-mask:radial-gradient(70% 90% at 30% 50%,#000,transparent 75%);mask:radial-gradient(70% 90% at 30% 50%,#000,transparent 75%);animation:ar-drift 18s linear infinite}
.rm-scan{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.rm-scan::after{content:'';position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,rgba(79,216,255,0),rgba(79,216,255,.10),rgba(79,216,255,0));animation:ar-sweep 4.5s ease-in-out infinite}

/* hero: portal + title + countdown ring */
.rm-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 14px 14px 10px}
.rm-portal{position:relative;display:grid;place-items:center;width:96px;height:96px}
.rm-portal .rm-ic{position:relative;z-index:2;line-height:0;filter:drop-shadow(0 0 14px rgba(79,216,255,.75));animation:ar-float 3.4s ease-in-out infinite}
.rm-portal .rm-ic .art{width:78px;height:78px}
.rm-halo{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,216,255,.55),rgba(79,216,255,.12) 60%,rgba(79,216,255,0));animation:ar-pulse 2.4s ease-in-out infinite}
.rm-orbit{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(124,231,255,0),rgba(124,231,255,.95) 18%,rgba(139,140,248,0) 34%,rgba(139,140,248,.8) 60%,rgba(124,231,255,0) 76%);
 -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 88%,#000 96%,transparent 98%);mask:radial-gradient(closest-side,transparent 86%,#000 88%,#000 96%,transparent 98%);animation:ar-spin 6s linear infinite}
.rm-base{position:absolute;left:12%;right:12%;bottom:-2px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,216,255,.75),rgba(79,216,255,0));filter:blur(2px)}
.rm-base::before{content:'';position:absolute;left:20%;right:20%;bottom:6px;height:70px;background:repeating-linear-gradient(90deg,rgba(124,231,255,.0) 0 5px,rgba(124,231,255,.22) 5px 6px);-webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent);animation:ar-rise 2.2s linear infinite}
.rm-hero-t{display:grid;gap:3px;min-width:0}
.rm-chip{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:900;letter-spacing:.12em;background:rgba(79,216,255,.14);box-shadow:inset 0 0 0 1px rgba(79,216,255,.45);color:#9FEFFF;white-space:nowrap}
.rm-chip i{width:7px;height:7px;border-radius:50%;background:#4FD8FF;box-shadow:0 0 8px #4FD8FF;animation:ar-blink 1.1s steps(2) infinite}
.rm-title{font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.05;letter-spacing:.01em;background:linear-gradient(180deg,#FFFFFF,#9FEFFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-hero-t small{font-size:11.5px;color:#A9B8E0;font-weight:700}
.rm-timer{position:relative;display:grid;place-items:center;width:74px;height:74px}
.rm-timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rm-timer .trk{fill:none;stroke:rgba(124,231,255,.14);stroke-width:4}
.rm-timer .fil{fill:none;stroke:#4FD8FF;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(79,216,255,.9));transition:stroke-dashoffset 1s linear}
.rm-timer b{position:relative;margin-top:-8px;font-family:var(--font-display);font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:#EAF7FF;text-shadow:0 0 10px rgba(79,216,255,.8)}
.rm-timer small{position:absolute;bottom:17px;font-size:8.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7FA2CF}

/* my keys */
.rm-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:12px}
.rm-me.done{grid-template-columns:auto minmax(0,1fr)}
.rm-me.done b{display:block;font-size:14px}.rm-me.done small{font-size:12px;color:#A9B8E0}
.rm-keys{display:grid;justify-items:center;gap:0;min-width:58px}
.rm-k-ic{line-height:0;filter:grayscale(.6) brightness(.8);transition:filter .3s}
.rm-k-ic.lit{filter:drop-shadow(0 0 10px rgba(167,139,250,.85))}
.rm-k-ic.dim{filter:grayscale(1) brightness(.55)}
.rm-k-ic.pop{animation:ar-pop .8s var(--ease-spring)}
.rm-keys b{font-family:var(--font-display);font-size:26px;line-height:1;font-weight:700;color:#fff;text-shadow:0 0 12px rgba(167,139,250,.9)}
.rm-keys small{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9FB0DA}
.rm-next{display:grid;gap:5px;min-width:0}
.rm-segs{display:flex;gap:4px}
.rm-segs i{flex:1;height:8px;border-radius:2px;background:rgba(124,231,255,.12);box-shadow:inset 0 0 0 1px rgba(124,231,255,.22);transform:skewX(-18deg)}
.rm-segs i.on{background:linear-gradient(90deg,#4FD8FF,#A78BFA);box-shadow:0 0 8px rgba(79,216,255,.7)}
.rm-next small{font-size:11px;font-weight:800;color:#A9B8E0}
.rm-my-prize{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#BFE6FF}
.rm-my-prize b{font-family:var(--font-display);font-size:15px;color:#fff}.rm-my-prize em{display:inline-flex;align-items:center;gap:2px;font-style:normal;color:#E7D9C2;font-weight:800}
.rm-my-prize.none{color:#8EA2CF;font-weight:700}
.rm-place-chip{display:grid;place-items:center;align-self:stretch;min-width:58px;padding:4px 8px;border-radius:12px;background:rgba(255,215,118,.1);box-shadow:inset 0 0 0 1px rgba(255,215,118,.35);font-family:var(--font-display);font-size:20px;font-weight:700;color:#FFE7A3;text-shadow:0 0 10px rgba(247,197,78,.6)}
.rm-place-chip small{font-family:var(--font);font-size:10px;font-weight:800;color:#C9B47F;text-shadow:none;display:inline-flex;align-items:center;gap:2px}
.rm-place-chip.need{background:rgba(124,231,255,.08);box-shadow:inset 0 0 0 1px rgba(124,231,255,.3);color:#BFF4FF;text-shadow:0 0 10px rgba(79,216,255,.5)}
.rm-watch{grid-column:1/-1;position:relative;overflow:hidden;gap:8px;border:0;background:linear-gradient(100deg,#2FB8F0,#6D6BF5 55%,#A06BFF);color:#fff;box-shadow:0 10px 26px -8px rgba(79,216,255,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.rm-watch::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:ar-shine 2.8s ease-in-out infinite}
.rm-watch em{display:inline-grid;line-height:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.rm-watch.cool{background:linear-gradient(100deg,#253467,#2D2F6E);color:#BFD3FF;box-shadow:inset 0 0 0 1px rgba(124,231,255,.25);font-variant-numeric:tabular-nums}
.rm-watch.cool::after{animation-duration:1.2s;opacity:.4}
.rm-watch:disabled:not(.cool){opacity:.55}
.rm-note{display:flex;align-items:center;gap:6px;margin:0;grid-column:1/-1;font-size:13px;color:#C9D6F5}

/* the eight rooms */
.rm-pods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
@media (min-width:720px){.rm-pods{grid-template-columns:repeat(8,minmax(0,1fr))}}
.rm-pod{--cut:9px;position:relative;display:grid;justify-items:center;gap:2px;padding:9px 4px 8px;border:0;font:inherit;color:var(--ink);cursor:pointer;
 background:var(--surface);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 0 0 0 1px var(--line-2);transition:transform var(--t-press)}
.rm-pod:active{transform:scale(.96)}
.rm-pod b{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.04em}
.rm-pod em{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:10px;font-weight:850;color:var(--ink-3);white-space:nowrap}
.rm-pod em .glyph{width:11px;height:11px}
.rm-pod-ic{position:relative;line-height:0;transition:filter .3s}
.rm-pod-ic .lock{position:absolute;right:-6px;bottom:-4px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--inset-2);color:var(--ink-2);box-shadow:0 0 0 2px var(--surface)}
.rm-pod-ic .lock .glyph{width:10px;height:10px}
.rm-pod.ended .rm-pod-ic{filter:grayscale(1) brightness(.6) contrast(.9)}
.rm-pod.ended{opacity:.82}
.rm-pod.upcoming .rm-pod-ic{filter:saturate(.35) brightness(.82)}
.rm-pod.upcoming{box-shadow:inset 0 0 0 1px var(--line-2);background-image:repeating-linear-gradient(135deg,rgba(124,140,255,.05) 0 6px,transparent 6px 12px)}
.rm-pod.live{color:#EAF7FF;background:linear-gradient(170deg,#12204A,#0A1030);box-shadow:inset 0 0 0 1px rgba(79,216,255,.6),0 0 18px -4px rgba(79,216,255,.6)}
.rm-pod.live .rm-pod-ic{filter:drop-shadow(0 0 9px rgba(79,216,255,.9));animation:ar-float 2.8s ease-in-out infinite}
.rm-pod.live .rm-pod-ic::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,216,255,.4),rgba(79,216,255,0));animation:ar-pulse 2s ease-in-out infinite;z-index:-1}
.rm-pod.live em.lv{color:#7CE7FF}.rm-pod.live em.lv i{width:6px;height:6px;border-radius:50%;background:#4FD8FF;box-shadow:0 0 6px #4FD8FF;animation:ar-blink 1.1s steps(2) infinite}
.rm-pod.mine::after{content:'';position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent #FFD776 transparent transparent;filter:drop-shadow(0 0 4px rgba(247,197,78,.8))}

/* board */
.rm-board,.tr-tier{padding:12px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.rm-board-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.rm-board-h b{font-size:14px;font-weight:850}
.rm-pool{display:inline-flex;align-items:center;gap:4px;padding:5px 10px 5px 7px;border:0;border-radius:999px;background:linear-gradient(90deg,rgba(79,216,255,.14),rgba(139,140,248,.16));box-shadow:inset 0 0 0 1px rgba(79,216,255,.35);color:var(--ink);font:inherit;cursor:pointer}
.rm-pool b{font-family:var(--font-display);font-size:15px}.rm-pool small{font-size:10.5px;font-weight:850;color:var(--ink-3)}
.rm-rows{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rm-rows.pin{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.rm-row{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:5px 10px;border-radius:13px;background:var(--inset)}
.rm-rk{font-family:var(--font-display);font-size:15px;font-weight:700;text-align:center;color:var(--ink-2)}
.rm-row.p1 .rm-rk,.rm-row.p2 .rm-rk,.rm-row.p3 .rm-rk{font-size:19px}
.rm-row.p1{background:linear-gradient(90deg,rgba(247,197,78,.2),var(--inset) 70%);box-shadow:inset 0 0 0 1px rgba(247,197,78,.4)}
.rm-row.p2{background:linear-gradient(90deg,rgba(200,210,235,.16),var(--inset) 70%)}
.rm-row.p3{background:linear-gradient(90deg,rgba(214,150,100,.16),var(--inset) 70%)}
.rm-row.me{box-shadow:inset 0 0 0 2px #4FD8FF,0 0 16px -4px rgba(79,216,255,.6)}
.rm-who{display:grid;min-width:0}.rm-who b{font-size:13.5px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-kk{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:900;color:#4C9DFF;font-variant-numeric:tabular-nums}
.rm-pz{display:grid;justify-items:end;gap:1px;font-size:12px;font-weight:900;color:#4C9DFF}
.rm-pz>b{display:inline-flex;align-items:center;gap:3px}
.rm-pz{grid-auto-flow:row}.rm-pz em{display:inline-flex;align-items:center;gap:2px;font-style:normal;font-size:11px;font-weight:800;color:var(--ink-2)}
.rm-empty{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px;color:var(--ink-2)}
.rm-open{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:7px 10px;border-radius:11px;border:1px dashed var(--line-2);font-size:12px;font-weight:800;color:var(--ink-2)}
.rm-open span{display:inline-flex;align-items:center;gap:3px;color:var(--ink)}
.rm-how{gap:10px}.rm-how-vis{display:block;flex:none;width:60px;height:43px;overflow:hidden;border-radius:10px;background:radial-gradient(120% 100% at 50% 0,#1C2B62,#0A1030)}
.rm-how-vis>*{width:120px;height:86px;transform:scale(.5);transform-origin:0 0}
.rm-closed{display:grid;justify-items:center;gap:6px;padding:28px 12px;text-align:center;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.rm-closed b{font-size:15px}.rm-closed small{color:var(--ink-2)}

/* sheets */
.rm-sheet{display:grid;gap:10px}
.rm-sh-h{display:flex;align-items:center;gap:10px}.rm-sh-h b{display:block;font-size:15px}.rm-sh-h small{font-size:12px;color:var(--ink-2)}
.rm-sh-h .rm-pod-ic.ended{filter:grayscale(1) brightness(.6)}.rm-sh-h .rm-pod-ic.live{filter:drop-shadow(0 0 9px rgba(79,216,255,.9))}.rm-sh-h .rm-pod-ic.upcoming{filter:saturate(.35) brightness(.82)}
.rm-ptable{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rm-ptable li{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 10px;border-radius:11px;background:var(--inset)}
.rm-ptable .rk{font-weight:900;font-size:14px;white-space:nowrap}
.rm-ptable .pz{display:inline-flex;align-items:center;gap:4px;font-weight:900;color:#4C9DFF}.rm-ptable .pz small{font-size:10.5px;font-weight:700;color:var(--ink-3)}
.rm-ptable .ir{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.rm-fund{display:grid;gap:6px}
.rm-fund>span{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--inset)}
.rm-fund>span>.art,.rm-fund>span>.glyph{grid-row:span 2}
.rm-fund b{font-size:13px}.rm-fund small{font-size:11.5px;color:var(--ink-2)}
.rm-fine{margin:0;font-size:12px;line-height:1.45;color:var(--ink-2)}

/* ---------- team ranking ---------- */
.tr-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px}
.tr-hero>.art{filter:drop-shadow(0 0 14px rgba(255,150,200,.45));animation:ar-float 3.4s ease-in-out infinite}
.tr-hero-t{display:grid;gap:2px;min-width:0}.tr-hero-t b{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.1}.tr-hero-t small{font-size:11.5px;color:#A9B8E0;font-weight:700}
.tr-pool{display:grid;justify-items:center;padding:7px 12px;border:0;border-radius:14px;background:rgba(79,216,255,.1);box-shadow:inset 0 0 0 1px rgba(79,216,255,.4);color:#EAF7FF;font:inherit;cursor:pointer}
.tr-pool b{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:18px;text-shadow:0 0 10px rgba(79,216,255,.7)}
.tr-pool .art{width:20px;height:20px}
.tr-pool small{font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8FB2DD}
.tr-rules{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tr-rules>span{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:9px;background:var(--inset);font-size:12px;font-weight:900;color:var(--ink)}
.tr-rules>span small{font-weight:700;color:var(--ink-3)}.tr-rules .glyph{width:13px;height:13px}
.tr-rules-i{display:grid;place-items:center;width:28px;height:28px;margin-left:auto;border:0;border-radius:9px;background:var(--inset);color:var(--ink-2);cursor:pointer}
.tr-mine{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(100deg,rgba(79,216,255,.12),var(--surface) 60%);box-shadow:inset 0 0 0 1px rgba(79,216,255,.4),var(--sh-1)}
.tr-mine.none,.tr-mine.join{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.tr-mine-rk{display:grid;place-items:center;min-width:46px;height:46px;border-radius:13px;background:rgba(79,216,255,.14);font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--action-ink)}
.tr-mine b{display:block;font-size:14px}.tr-mine small{font-size:11.5px;color:var(--ink-2)}
.tr-podium{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;align-items:end}
.tr-card{--cut:12px;position:relative;display:grid;justify-items:center;gap:4px;padding:12px 6px 10px;text-align:center;color:#EAF2FF;
 background:linear-gradient(170deg,#15204C,#0A1030);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 0 0 0 1px rgba(124,231,255,.25)}
.tr-card.p1{order:2;padding-top:18px;background:linear-gradient(170deg,#3A2A0A,#16112A 70%);box-shadow:inset 0 0 0 1px rgba(255,215,118,.6),0 0 24px -6px rgba(247,197,78,.6)}
.tr-card.p2{order:1}.tr-card.p3{order:3}
.tr-card.mine{box-shadow:inset 0 0 0 2px #4FD8FF}
.tr-medal{font-size:24px;line-height:1}.tr-card.p1 .tr-medal{font-size:30px;filter:drop-shadow(0 0 8px rgba(247,197,78,.8))}
.tr-name{max-width:100%;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-faces{display:flex;padding-left:8px;max-width:100%}
.tr-faces i{margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2px #0E1638;line-height:0}
.tr-card .tr-faces{padding-left:9px}.tr-card .tr-faces i{margin-left:-9px}
.tr-rules .art{filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.tr-faces i.me{box-shadow:0 0 0 2px #4FD8FF;z-index:1}
.tr-faces .lvface-b{right:-3px;bottom:-3px;transform:scale(.8)}
.tr-pts{font-family:var(--font-display);font-size:15px;font-weight:700;color:#9FEFFF;text-shadow:0 0 8px rgba(79,216,255,.6)}
.tr-pts small{margin-left:2px;font-family:var(--font);font-size:9.5px;font-weight:900;color:#7F9BCB;text-shadow:none}
.tr-pz{display:grid;justify-items:center;gap:1px}
.tr-pz .b,.tr-pz .i{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:12px;white-space:nowrap}
.tr-pz .b{color:#8FD8FF}.tr-pz .i{color:#E7D9C2}
.tr-pz small{font-size:11px;font-weight:800;opacity:.85}
.tr-pz em{font-style:normal;font-size:9.5px;font-weight:700;color:#7F9BCB;white-space:nowrap}
.tr-pz.big .b{font-size:14.5px}.tr-pz.big .b b{font-family:var(--font-display);font-size:17px}
.tr-pz.none{color:var(--ink-3)}
.tr-tier-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.tr-tier-h b{font-family:var(--font-display);font-size:15px}.tr-tier-h small{font-size:11px;font-weight:800;color:var(--ink-3)}
.tr-rows{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.tr-rows.pin{padding:8px;border-radius:14px;border:1px dashed var(--line-2)}
.tr-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:46px;padding:5px 10px;border-radius:13px;background:var(--inset)}
.tr-row.mine{box-shadow:inset 0 0 0 2px #4FD8FF}
.tr-rk{font-family:var(--font-display);font-size:14px;font-weight:700;text-align:center;color:var(--ink-2)}
.tr-who{display:grid;gap:2px;min-width:0}.tr-who b{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-who .tr-faces i{box-shadow:0 0 0 2px var(--inset)}
.tr-pts.s{font-size:13px;color:var(--action-ink);text-shadow:none}
.tr-row .tr-pz{justify-items:end}.tr-row .tr-pz .b{color:#4C9DFF}.tr-row .tr-pz .i{color:var(--ink-2)}.tr-row .tr-pz em{color:var(--ink-3)}
.tr-open{margin:0;font-size:12px;color:var(--ink-3)}
.tr-open.big{display:grid;justify-items:center;gap:6px;padding:16px;text-align:center;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}

/* Piggy Boink page: the ranking card */
.pg-rank{--cut:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;color:#EAF2FF;font:inherit;text-align:left;cursor:pointer;
 background:radial-gradient(80% 80% at 0% 0%,rgba(79,216,255,.18),rgba(79,216,255,0)),linear-gradient(160deg,#111C44,#080D26);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 0 0 0 1px rgba(124,231,255,.3)}
.pg-rank-rk{display:grid;place-items:center;min-width:46px;height:46px;border-radius:13px;background:rgba(79,216,255,.14);font-family:var(--font-display);font-size:18px;font-weight:700;color:#BFF4FF;text-shadow:0 0 8px rgba(79,216,255,.6)}
.pg-rank b{display:block;font-size:14px}.pg-rank small{display:block;font-size:11.5px;color:#A9B8E0}
.pg-rank-pool{display:grid;justify-items:end}.pg-rank-pool b{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-display);font-size:16px;color:#BFE6FF}.pg-rank-pool small{font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8FB2DD}

/* tutorial scenes (howto-art.js rooms:0-3) */
.rmh-pod{fill:rgba(20,30,72,.9);stroke:#4FD8FF;stroke-width:1.2}
.rmh-play{fill:#5B5CF0;filter:drop-shadow(0 0 4px rgba(124,108,255,.8))}.rmh-tri{fill:#fff}
.rmh-key{fill:#A78BFA;stroke:#fff;stroke-width:.8}
.rmh-key.k{animation:rmh-key 2.6s ease-in-out infinite}.rmh-key.k2{animation-delay:.25s}.rmh-key.k3{animation-delay:.5s}
.rmh-lab{font:900 8px/1 system-ui,sans-serif;fill:#BFF4FF;text-anchor:middle;letter-spacing:.04em}
.rmh-bar{fill:rgba(124,231,255,.15)}.rmh-bar.on{fill:#4FD8FF;animation:rmh-bar 2.6s ease-in-out infinite}
.rmh-row{fill:rgba(255,255,255,.08)}.rmh-row.g{fill:rgba(247,197,78,.35)}
.rmh-gem{fill:#7CC8FF;filter:drop-shadow(0 0 3px #7CC8FF)}
.rmh-slot{fill:rgba(255,255,255,.07);stroke:rgba(124,231,255,.35);stroke-width:1}.rmh-slot.live{fill:rgba(79,216,255,.25);stroke:#4FD8FF;animation:hv-pulse 1.2s infinite}

/* ---------- public faces (2026-10-30): the player's photo in their level frame + the level crest only ---------- */
.pface{--av:36px;position:relative;display:inline-grid;place-items:center;flex:none;width:calc(var(--av) + 10px);height:calc(var(--av) + 10px);line-height:0;vertical-align:middle}
.pface .face{position:relative;z-index:2;display:block;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #0B1230}
.pface .face>.art{display:block;width:100%!important;height:100%!important}
.pface .face>.art>svg,.pface .face>.art>img{width:100%;height:100%;object-fit:cover;display:block}
.pface.portrait-frame .av-badge{position:absolute;z-index:5;left:50%;bottom:calc(var(--av) * -.15);transform:translateX(-50%);line-height:0;filter:drop-shadow(0 1px 2px #060B20)}
.pface .pr-halo{opacity:.45}.pface .pr-sweep{display:none}
.pface:not(.live) .pr-orbit{animation:none}
.pface.sm{width:calc(var(--av) + 6px);height:calc(var(--av) + 6px)}
.pface.sm.portrait-frame .av-badge{bottom:-5px}
.pf-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,var(--tc1),var(--tc2),var(--tc1),var(--tc2),var(--tc1));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.6px),#000 calc(100% - 2.2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.6px),#000 calc(100% - 2.2px));filter:drop-shadow(0 0 2px var(--tc1))}
/* the crest keeps its own size and shape inside lists that size or clip every .art */
.pface .av-badge>.art{width:var(--b)!important;height:var(--b)!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important}
.rk-row .who .pface{margin:-3px 0}
/* podium: the player's own frame replaces the medal ring; the medal colour stays as light */
.t3-ava:has(.pface){padding:0;background:none;box-shadow:none}
.t3-col.p1 .t3-ava:has(.pface){filter:drop-shadow(0 0 16px rgba(247,197,78,.6))}
.t3-col.p2 .t3-ava:has(.pface){filter:drop-shadow(0 0 12px rgba(200,210,235,.45))}
.t3-col.p3 .t3-ava:has(.pface){filter:drop-shadow(0 0 12px rgba(214,150,100,.5))}
.pg-card-faces .pg-face:not(.open){width:auto!important;height:auto!important;overflow:visible;border-radius:0;background:none;box-shadow:none}
.pg-card-faces{align-items:center}

/* ---------- team crest: the owner's picture, or the team's colours + initials ---------- */
.tcrest{--s:44px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .3);overflow:hidden;isolation:isolate;
 background:linear-gradient(135deg,var(--c1,#8B8CF8),var(--c2,#5B5CF0));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32),0 6px 14px -6px rgba(0,0,0,.55)}
.tcrest::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.tcrest b{position:relative;z-index:1;font-family:var(--font-display);font-size:calc(var(--s) * .38);font-weight:700;line-height:1;letter-spacing:.02em;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.tcrest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tcrest.gold{box-shadow:0 0 0 2.5px #FFD776,0 0 0 4.5px rgba(138,94,14,.6),0 0 22px -2px rgba(247,197,78,.85)}
.tcrest.silver{box-shadow:0 0 0 2.5px #E1E6F5,0 0 0 4.5px rgba(110,120,150,.55),0 0 18px -3px rgba(200,210,235,.7)}
.tcrest.bronze{box-shadow:0 0 0 2.5px #E7A56F,0 0 0 4.5px rgba(120,64,26,.55),0 0 18px -3px rgba(214,150,100,.75)}
.tcrest.glow{box-shadow:0 0 0 2px rgba(79,216,255,.85),0 0 18px -3px rgba(79,216,255,.8)}

/* ---------- Piggy Boink ranking 2026-10-30: stage podium with team pictures, point bars ---------- */
.tr-hero-pig{line-height:0;filter:drop-shadow(0 0 14px rgba(255,150,200,.5));animation:ar-float 3.4s ease-in-out infinite}
.tr-hero-n{justify-self:start;margin-top:2px;padding:2px 8px;border-radius:7px;font-size:10.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#FFC6DD;background:rgba(255,143,177,.14);box-shadow:inset 0 0 0 1px rgba(255,143,177,.38)}
.tr-podium{gap:8px;align-items:end;padding-top:6px}
.tr-card{gap:5px;padding:12px 6px 0;overflow:visible;cursor:pointer;transition:transform var(--t-press,.12s)}
.tr-card:active{transform:scale(.97)}
.tr-card.p1{padding-top:16px}
.tr-crest{position:relative;line-height:0;margin-top:2px}
.tr-card.p1 .tr-crest{animation:ar-float 3.2s ease-in-out infinite}
.tr-rays{position:absolute;left:50%;top:6px;width:150px;height:150px;margin-left:-75px;z-index:-1;pointer-events:none;border-radius:50%;opacity:.55;
 background:repeating-conic-gradient(from 0deg,rgba(255,215,118,.42) 0 6deg,rgba(255,215,118,0) 6deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 72%);mask:radial-gradient(closest-side,#000 30%,transparent 72%);animation:ar-spin 18s linear infinite}
.tr-card .tr-pz{margin-bottom:2px}
.tr-step{align-self:stretch;justify-self:stretch;display:grid;place-items:center;margin:4px -6px 0;height:30px;background:linear-gradient(180deg,rgba(124,231,255,.16),rgba(124,231,255,.04));border-top:1px solid rgba(124,231,255,.35)}
.tr-step span{font-family:var(--font-display);font-size:17px;font-weight:700;color:#BFF4FF;text-shadow:0 0 8px rgba(79,216,255,.7)}
.tr-card.p1 .tr-step{height:42px;background:linear-gradient(180deg,rgba(247,197,78,.32),rgba(247,197,78,.06));border-top-color:rgba(255,215,118,.75)}
.tr-card.p1 .tr-step span{font-size:22px;color:#FFE7A3;text-shadow:0 0 10px rgba(247,197,78,.85)}
.tr-card.p2 .tr-step{height:34px}
.tr-card.p3 .tr-step{height:26px;background:linear-gradient(180deg,rgba(214,150,100,.24),rgba(214,150,100,.04));border-top-color:rgba(231,165,111,.6)}
.tr-faces .pface .face{box-shadow:0 0 0 2px #0E1638}
.tr-faces i{box-shadow:none;margin-left:-7px}.tr-faces{padding-left:7px}
.tr-card .tr-faces i{margin-left:-6px}.tr-card .tr-faces{padding-left:6px}
.tr-faces i.me .pface .face{box-shadow:0 0 0 2px #4FD8FF}
.tr-row{grid-template-columns:24px auto minmax(0,1fr) auto;gap:9px;min-height:58px;padding:7px 10px;cursor:pointer;animation:rd-in .35s var(--ease-out,ease-out) both;animation-delay:calc(var(--i,0) * 35ms);transition:transform var(--t-press,.12s)}
.tr-row:active{transform:scale(.985)}
.tr-who{gap:3px}
.tr-bar{display:block;height:5px;border-radius:99px;background:var(--inset-2);overflow:hidden}
.tr-bar i{display:block;width:var(--w,0%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#4FD8FF,#A78BFA);box-shadow:0 0 8px rgba(79,216,255,.55)}
.tr-sub{display:flex;align-items:center;gap:6px;min-width:0}
.tr-sub em{font-style:normal;font-size:11px;font-weight:850;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-who .tr-faces i{margin-left:-6px}.tr-who .tr-faces{padding-left:6px}
.tr-who .tr-faces .pface .face{box-shadow:0 0 0 2px var(--inset)}
.tr-mine{grid-template-columns:auto minmax(0,1fr) auto;cursor:pointer}
.tr-mine.join{cursor:default}
.tr-mine-k{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:7px;background:rgba(79,216,255,.16);font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--action-ink);vertical-align:1px}
.tr-mine b{display:inline}.tr-mine small{display:block;margin-top:1px}
.tr-mine-pig{line-height:0;filter:drop-shadow(0 0 10px rgba(255,150,200,.45))}
.tr-all{gap:10px}

/* ---------- Piggy Boink page: the team picture, framed seats, team sheet, picture sheet ---------- */
.pg-top{grid-template-columns:auto minmax(0,1fr) auto}
.pg-crest{position:relative;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:24px}
.pg-crest:active{transform:scale(.96)}
.pg-crest-ed{position:absolute;right:-5px;bottom:-5px;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3EC8FF,#7C6CFF);color:#fff;box-shadow:0 0 0 2.5px var(--rose-soft,#2a1530),0 4px 10px rgba(0,0,0,.35)}
.pg-crest-ed .glyph{width:13px;height:13px}
.pg-seat-f{position:relative;display:grid;place-items:center;line-height:0}
.pg-seat-f .ok{position:absolute;right:-1px;top:-1px;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--rose-soft);display:grid;place-items:center}
.pg-seat-f .ok .glyph{width:10px;height:10px;color:#fff;stroke-width:3.4}
.pg-seat{gap:5px}
.pg-member{grid-template-columns:auto minmax(0,1fr) auto auto}
.pg-card{cursor:pointer;transition:transform var(--t-press,.12s)}
.pg-card:active{transform:scale(.98)}
.pg-card-top{grid-template-columns:auto minmax(0,1fr) auto}
.pg-tsheet .sheet-top h2:empty{display:none}
.pg-ts{display:grid;gap:12px}
.pg-ts-hero{position:relative;display:grid;justify-items:center;gap:8px;padding:14px 10px 12px;border-radius:20px;overflow:hidden;isolation:isolate;color:#EAF2FF;
 background:radial-gradient(90% 80% at 50% 0%,rgba(255,143,177,.25),rgba(255,143,177,0) 60%),linear-gradient(170deg,#1A1440,#0A0F28);box-shadow:inset 0 0 0 1px rgba(255,143,177,.3)}
.pg-ts-glow{position:absolute;left:50%;top:-40px;width:220px;height:220px;margin-left:-110px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,200,230,.18) 0 7deg,rgba(255,200,230,0) 7deg 22deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 70%);mask:radial-gradient(closest-side,#000 25%,transparent 70%);animation:ar-spin 22s linear infinite}
.pg-ts-name{max-width:100%;font-family:var(--font-display);font-size:20px;font-weight:700;text-align:center;overflow-wrap:anywhere}
.pg-ts-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pg-ts-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pg-ts-tag em{font-style:normal;font-weight:800;color:#BFD3FF}
.pg-ts-tag.hot{background:rgba(247,197,78,.14);box-shadow:inset 0 0 0 1px rgba(255,215,118,.45)}
.pg-ts-tag.open{color:#8DF5D2;background:rgba(94,230,200,.12);box-shadow:inset 0 0 0 1px rgba(94,230,200,.4)}
.pg-ts-tag .glyph{width:12px;height:12px}
.pg-ts-members{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pg-ts-m{display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;text-align:center}
.pg-ts-m small{max-width:100%;font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.pg-ts-m em{margin-top:-4px;font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.pg-ts-m.me small{color:var(--action-ink)}
.pg-ts-open{display:grid;place-items:center;width:46px;height:46px;margin:4px 0 2px;border-radius:50%;border:1.5px dashed var(--line-2);color:var(--ink-3)}
.pg-ts-m.open small{color:var(--ink-3);font-weight:700}
.pg-ts-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-ts-stats>span{display:grid;gap:2px;padding:9px 11px;border-radius:13px;background:var(--inset)}
.pg-ts-stats small{font-size:10.5px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pg-ts-stats b{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:900;font-variant-numeric:tabular-nums}
.pg-ts-note{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.pg-ts-report{justify-self:center;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.pg-pic{display:grid;justify-items:center;gap:10px;text-align:center}
.pg-pic-prev{position:relative;display:grid;place-items:center;width:100%;padding:18px 0;border-radius:20px;background:radial-gradient(70% 90% at 50% 40%,rgba(124,108,255,.2),rgba(124,108,255,0)),var(--inset)}
.pg-pic-sub{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.pg-pic-rule{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:11.5px;line-height:1.4;color:var(--ink-3);text-align:left}
.pg-pic-rule .glyph{flex:none;margin-top:1px}
@media (max-width:370px){.pg-ts-members{gap:2px}.pg-ts-m small{font-size:10.5px}}

/* ---------- Key Rooms: the Join gate (no videos, no keys before it) ---------- */
.rm-me.gate{grid-template-columns:auto minmax(0,1fr);gap:10px 12px}
.rm-door{position:relative;display:grid;place-items:center;width:64px;height:74px;border-radius:14px 14px 5px 5px;overflow:hidden;isolation:isolate;
 background:radial-gradient(closest-side,rgba(79,216,255,.6),rgba(79,216,255,.08) 70%,transparent),#081030;box-shadow:inset 0 0 0 1px rgba(124,231,255,.5),0 0 24px -6px rgba(79,216,255,.75)}
.rm-door-ic{position:relative;z-index:1;line-height:0;filter:drop-shadow(0 0 10px rgba(79,216,255,.95))}
.rm-door-l,.rm-door-r{position:absolute;top:0;bottom:0;z-index:2;width:50%;background:linear-gradient(90deg,#1B2C62,#0E1742);box-shadow:inset 0 0 0 1px rgba(124,231,255,.38)}
.rm-door-l{left:0}.rm-door-r{right:0;background:linear-gradient(270deg,#1B2C62,#0E1742)}
.rm-door-l::after,.rm-door-r::after{content:'';position:absolute;top:44%;width:3px;height:13px;border-radius:2px;background:#4FD8FF;box-shadow:0 0 7px #4FD8FF}
.rm-door-l::after{right:4px}.rm-door-r::after{left:4px}
.rm-me.gate:not(.shut) .rm-door-l{animation:rm-door-l 4s cubic-bezier(.65,0,.25,1) infinite}
.rm-me.gate:not(.shut) .rm-door-r{animation:rm-door-r 4s cubic-bezier(.65,0,.25,1) infinite}
.rm-me.gate.shut .rm-door{filter:grayscale(.85) brightness(.65);box-shadow:inset 0 0 0 1px rgba(124,231,255,.2)}
.rm-gate-t{display:grid;gap:3px;min-width:0}
.rm-gate-t b{font-size:15.5px;font-weight:900;line-height:1.2}
.rm-gate-t small{font-size:12px;line-height:1.35;color:#A9B8E0}
.rm-lobby{display:flex;align-items:center;margin-top:4px;padding-left:7px}
.rm-lobby .pface{margin-left:-7px}
.rm-lobby .pface .face{box-shadow:0 0 0 2px #0B1230}
.rm-lobby em{margin-left:5px;font-style:normal;font-size:11.5px;font-weight:900;color:#9FEFFF}
.rm-lobby.none{padding-left:0;font-size:11.5px;font-weight:700;color:#8EA2CF}
.rm-join{grid-column:1/-1;position:relative;overflow:hidden;gap:8px;border:0;background:linear-gradient(100deg,#2FB8F0,#6D6BF5 55%,#A06BFF);color:#fff;box-shadow:0 10px 26px -8px rgba(79,216,255,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.rm-join::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);animation:ar-shine 2.8s ease-in-out infinite}
.rm-join-ic{display:inline-grid;line-height:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.rm-join:disabled{opacity:.5}.rm-join:disabled::after{display:none}
.rm-me.enter{animation:rm-enter 1s var(--ease-spring,cubic-bezier(.3,1.4,.5,1))}
/* the room's ranking: every player's keys, big and readable */
.rm-keyc{display:inline-flex;align-items:center;gap:4px;padding:5px 9px 5px 6px;border-radius:11px;background:linear-gradient(135deg,rgba(124,108,255,.16),rgba(79,216,255,.1));box-shadow:inset 0 0 0 1px rgba(167,139,250,.38)}
.rm-keyc b{font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.rm-keyc .art{filter:drop-shadow(0 0 5px rgba(167,139,250,.75))}
.rm-row.p1 .rm-keyc{box-shadow:inset 0 0 0 1px rgba(247,197,78,.6),0 0 12px -4px rgba(247,197,78,.7)}
.rm-pzs{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;color:#4C9DFF;white-space:nowrap}

/* ---------- ranking videos: Monetag ⇄ AdsGram on one button ---------- */
.rkw{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.rkw-go{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;min-width:0;min-height:48px;padding:4px 12px 4px 4px;border:0;border-radius:14px;
 background:linear-gradient(100deg,#2FB8F0,#6D6BF5 60%,#A06BFF);color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 8px 20px -10px rgba(79,216,255,.85),inset 0 1px 0 rgba(255,255,255,.3);transition:transform var(--t-press,.12s)}
.rkw-go:active:not(:disabled){transform:scale(.97)}
.rkw-go::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:ar-shine 3s ease-in-out infinite}
.rkw-ring{position:relative;display:grid;place-items:center;width:40px;height:40px}
.rkw-ring>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rkw-ring .trk{fill:rgba(0,0,0,.2);stroke:rgba(255,255,255,.22);stroke-width:3}
.rkw-ring .fil{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear}
.rkw-ic{position:relative;line-height:0}.rkw-ic .glyph{width:18px;height:18px}
.rkw-tt{display:grid;gap:1px;min-width:0}
.rkw-tt b{font-size:14px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums}
.rkw-tt small{font-size:11px;font-weight:700;line-height:1.25;opacity:.88}
/* "Watch ad = +1,000 score" must be read whole (2026-10-31): on a phone the button takes the full row and the networks
   and today's count sit under it. */
@media (max-width:480px){.rkw{grid-template-columns:minmax(0,1fr)}.rkw-side{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start}.rkw-side .rkw-n{justify-self:end}}
.rkw[data-state="cool"] .rkw-go,.rkw[data-state="done"] .rkw-go{background:linear-gradient(100deg,#22305F,#2A2C68);color:#C7D7FF;box-shadow:inset 0 0 0 1px rgba(124,231,255,.28)}
.rkw[data-state="cool"] .rkw-go::after,.rkw[data-state="done"] .rkw-go::after{display:none}
.rkw[data-state="cool"] .rkw-ring .fil{stroke:#4FD8FF;filter:drop-shadow(0 0 4px rgba(79,216,255,.85))}
.rkw[data-state="done"] .rkw-ring .fil{stroke:#7F88B2}
.rkw[data-state="busy"] .rkw-ic{animation:ar-pulse 1s ease-in-out infinite}
.rkw-go:disabled{cursor:default}
.rkw-side{display:grid;justify-items:end;gap:5px}
.rkw-net{display:inline-flex;align-items:center;gap:4px}
.rkw-net b{font-size:11px;color:var(--ink-3);font-weight:900}
.rkw-p{padding:3px 7px;border-radius:7px;font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.01em;background:var(--inset);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.rkw-p.on{color:#fff;background:linear-gradient(90deg,#3EC8FF,#7C6CFF);box-shadow:0 0 10px -2px rgba(79,216,255,.85)}
.rkw-p.on.done{background:var(--inset);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:line-through}
.rkw-dots{display:flex;gap:3px}
.rkw-dots i{width:7px;height:7px;border-radius:2px;background:var(--inset-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.rkw-dots i.on{background:linear-gradient(135deg,#4FD8FF,#A78BFA);box-shadow:0 0 6px rgba(79,216,255,.6)}
.rkw-n{font-size:10.5px;font-weight:800;color:var(--ink-3)}
@media (max-width:390px){.rkw{grid-template-columns:1fr}.rkw-side{grid-auto-flow:column;justify-content:space-between;justify-items:start;align-items:center}}

/* ---------- motion ---------- */
@keyframes rm-door-l{0%,18%,100%{transform:translateX(0)}42%,72%{transform:translateX(-64%)}}
@keyframes rm-door-r{0%,18%,100%{transform:translateX(0)}42%,72%{transform:translateX(64%)}}
@keyframes rm-enter{0%{transform:scale(.96);filter:brightness(1.7)}55%{transform:scale(1.015)}100%{transform:none;filter:none}}
@keyframes ar-drift{to{transform:translate(22px,22px)}}
@keyframes ar-sweep{0%,100%{top:-30%}50%{top:100%}}
@keyframes ar-float{50%{transform:translateY(-4px)}}
@keyframes ar-pulse{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes ar-spin{to{transform:rotate(360deg)}}
@keyframes ar-rise{from{background-position:0 70px}to{background-position:0 0}}
@keyframes ar-blink{50%{opacity:.25}}
@keyframes ar-shine{0%,55%{left:-40%}100%{left:130%}}
@keyframes ar-pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-12deg)}100%{transform:scale(1)}}
@keyframes rmh-key{0%,30%{opacity:0;transform:translateY(6px)}45%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes rmh-bar{0%,20%{opacity:.3}50%,100%{opacity:1}}
.reduce-motion .rm *,.reduce-motion .tr *,.reduce-motion .pg-rank *,.reduce-motion .rkw *,.reduce-motion .pface *,.reduce-motion .pg-ts *{animation:none!important}
@media (prefers-reduced-motion:reduce){.rm *,.tr *,.pg-rank *,.rkw *,.pface *,.pg-ts *{animation:none!important}}
@media (max-width:370px){.rm-hero{grid-template-columns:auto minmax(0,1fr);gap:8px}.rm-timer{grid-column:1/-1;justify-self:center;width:66px;height:66px}.rm-portal{width:82px;height:82px}.rm-portal .rm-ic .art{width:64px;height:64px}.tr-podium{gap:5px}.tr-card{padding-left:3px;padding-right:3px}}

/* ---------- Room Ranking (2026-10-30 redesign): status chips · live room · 8-room board · ranking · earnings ---------- */
.rr{display:grid;gap:12px;padding-bottom:12px}
.rr-sk1{height:56px;border-radius:16px}.rr-sk2{height:260px;border-radius:22px}.rr-sk3{height:240px;border-radius:18px}
.rr-closed{display:grid;justify-items:center;gap:6px;padding:40px 16px;text-align:center}
.rr-closed small{color:var(--ink-3)}
/* top strip */
.rr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rr-brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 180px}
.rr-brand-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:radial-gradient(circle at 50% 35%,rgba(79,216,255,.38),rgba(79,216,255,0) 70%),linear-gradient(160deg,#16205A,#0A0F2C);box-shadow:inset 0 0 0 1px rgba(124,231,255,.38),0 6px 16px rgba(0,0,0,.3)}
.rr-brand-ic .art{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(79,216,255,.7))}
.rr-brand>span:last-child{display:grid;line-height:1.15;min-width:0}
.rr-brand b{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.rr-brand small{font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-chips{display:flex;gap:6px;flex:none}
.rr-chip{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 8px;border-radius:12px;background:linear-gradient(160deg,#121A48,#0A0F2C);box-shadow:inset 0 0 0 1px rgba(124,231,255,.3);color:#EAF2FF}
.rr-chip>span{display:grid;line-height:1.05}
.rr-chip b{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.rr-chip small{font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#8FA6D6}
.rr-chip .art{width:18px;height:18px}
.rr-chip.keys b{color:#FFE7A0}
.rr-chip.cool .glyph{width:16px;height:16px;color:#7CE7FF}
/* the live room */
.rr-live{--cut:16px;position:relative;isolation:isolate;overflow:hidden;display:grid;gap:12px;padding:14px;color:#EAF2FF;
 background:radial-gradient(90% 70% at 12% 0%,rgba(79,216,255,.2),rgba(79,216,255,0) 60%),radial-gradient(80% 70% at 100% 100%,rgba(185,140,255,.26),rgba(185,140,255,0) 62%),linear-gradient(160deg,#101A44,#070B1F 70%);
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 0 0 0 1px rgba(124,231,255,.24)}
.rr-live::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
 background:linear-gradient(90deg,#4FD8FF 0 18px,transparent 18px) top left/100% 2px no-repeat,linear-gradient(180deg,#4FD8FF 0 18px,transparent 18px) top left/2px 100% no-repeat,
  linear-gradient(270deg,#B98CFF 0 18px,transparent 18px) bottom right/100% 2px no-repeat,linear-gradient(0deg,#B98CFF 0 18px,transparent 18px) bottom right/2px 100% no-repeat}
.rr-live.enter{animation:rr-enter .9s var(--ease-spring)}
@keyframes rr-enter{0%{transform:scale(.97)}45%{transform:scale(1.015)}100%{transform:none}}
.rr-live-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.rr-emblem{position:relative;display:grid;place-items:center;width:84px;height:84px;flex:none}
.rr-em-halo{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,216,255,.55),rgba(79,216,255,.1) 62%,rgba(79,216,255,0));animation:ar-pulse 2.4s ease-in-out infinite}
.rr-em-orbit{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(124,231,255,0),rgba(124,231,255,.95) 18%,rgba(185,140,255,0) 36%,rgba(185,140,255,.85) 62%,rgba(124,231,255,0) 80%);
 -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 88%,#000 96%,transparent 98%);mask:radial-gradient(closest-side,transparent 86%,#000 88%,#000 96%,transparent 98%);animation:ar-spin 6s linear infinite}
.rr-em-ic{position:relative;z-index:1;line-height:0;filter:drop-shadow(0 0 12px rgba(79,216,255,.7));animation:ar-float 3.4s ease-in-out infinite}
.rr-em-ic .art{width:60px;height:60px}
.rr-em-no{position:absolute;z-index:2;right:2px;bottom:4px;display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:9px;background:linear-gradient(180deg,#FFE7A0,#F0A92E);color:#3A2300;font-family:var(--font-display);font-size:15px;font-weight:800;line-height:1;box-shadow:0 0 0 2px #0B1030,0 4px 10px rgba(240,169,46,.5)}
.rr-emblem.sm{width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#16205A,#0A0F2C);box-shadow:inset 0 0 0 1px rgba(124,231,255,.35)}
.rr-emblem.sm .rr-em-ic{animation:none}.rr-emblem.sm .rr-em-ic .art{width:38px;height:38px}
.rr-emblem.sm .rr-em-no{min-width:20px;height:20px;padding:0 5px;font-size:12px;border-radius:7px;right:-4px;bottom:-4px}
.rr-emblem.ended{filter:grayscale(.75) brightness(.85)}
.rr-live-t{display:grid;gap:4px;min-width:0}
.rr-live-t>b{font-family:var(--font-display);font-size:21px;font-weight:700;line-height:1.05;background:linear-gradient(180deg,#FFFFFF,#9FEFFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.rr-tag{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.rr-tag.live{background:rgba(255,77,109,.16);box-shadow:inset 0 0 0 1px rgba(255,107,134,.55);color:#FFB3C2}
.rr-tag.live i{width:7px;height:7px;border-radius:50%;background:#FF4D6D;box-shadow:0 0 8px #FF4D6D;animation:ar-blink 1.1s steps(2) infinite}
.rr-tag.sm{padding:1px 6px;font-size:9px;vertical-align:1px}
.rr-lobby{display:flex;align-items:center;min-width:0}
.rr-lobby .pface{margin-right:-6px;flex:none}
.rr-lobby em{margin-left:10px;font-style:normal;font-size:11px;font-weight:900;color:#9FEFFF}
.rr-joined{font-size:11.5px;font-weight:700;color:#A9B8E0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-timer{position:relative;display:grid;place-items:center;width:72px;height:72px}
.rr-timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rr-timer .trk{fill:none;stroke:rgba(124,231,255,.14);stroke-width:4}
.rr-timer .fil{fill:none;stroke:#4FD8FF;stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(79,216,255,.9));transition:stroke-dashoffset 1s linear}
.rr-timer b{position:relative;margin-top:-8px;font-family:var(--font-display);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#EAF7FF;text-shadow:0 0 10px rgba(79,216,255,.8)}
.rr-timer small{position:absolute;bottom:16px;font-size:8.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7FA2CF}
.rr-pool{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:linear-gradient(100deg,rgba(255,215,118,.17),rgba(79,216,255,.08) 55%,rgba(185,140,255,.13));box-shadow:inset 0 0 0 1px rgba(255,215,118,.38);color:#EAF2FF;text-align:left;cursor:pointer;transition:transform .15s}
.rr-pool:active{transform:scale(.985)}
.rr-pool-l{display:grid;gap:2px;flex:none}
.rr-pool-l small{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#FFD776}
.rr-pool-l .rr-prize b{font-size:20px;color:#9FD4FF}
.rr-pool-l .rr-prize em{font-size:14px}
.rr-pool-r{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.rr-pp{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:9px;background:rgba(9,14,40,.6);box-shadow:inset 0 0 0 1px rgba(124,231,255,.22);font-size:11.5px;font-weight:800;color:#CFE6FF;white-space:nowrap}
.rr-pp i{font-style:normal;font-size:10px;font-weight:900;color:#8FA6D6}
.rr-pp .art{width:12px;height:12px}
.rr-pp.more{background:none;box-shadow:none;color:#9FEFFF;padding-right:0}
.rr-pp.more .glyph{width:12px;height:12px}
@media (max-width:420px){.rr-pp:nth-child(3){display:none}}
@media (max-width:360px){.rr-pp:nth-child(2){display:none}.rr-emblem{width:70px;height:70px}.rr-em-ic .art{width:50px;height:50px}.rr-timer{width:64px;height:64px}.rr-live-t>b{font-size:18px}}
.rr-prize{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rr-prize b{font-size:14px;font-weight:900;color:#4C9DFF}
.rr-prize em{display:inline-flex;align-items:center;gap:2px;margin-left:4px;font-style:normal;font-size:12px;font-weight:800;color:var(--ink-2)}
.rr-prize.none{color:var(--ink-3);font-weight:800}
.rr-live .rr-prize b{color:#9FD4FF}.rr-live .rr-prize em{color:#C9D2E8}
/* actions in the live room */
.rr-join{gap:10px}
.rr-join-ic{line-height:0}.rr-join-ic .art{width:20px;height:20px;filter:drop-shadow(0 0 6px rgba(255,215,118,.8))}
.rr-hint{margin:-4px 0 0;text-align:center;font-size:11.5px;font-weight:700;color:#A9B8E0}
.rr-note{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:#CFE0FF}
.rr-done{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(71,227,176,.1);box-shadow:inset 0 0 0 1px rgba(71,227,176,.38)}
.rr-done>span{display:grid}.rr-done b{font-size:13.5px}.rr-done small{font-size:11.5px;color:#A9B8E0}
.rr-level{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:linear-gradient(100deg,rgba(185,140,255,.2),rgba(79,216,255,.06));box-shadow:inset 0 0 0 1px rgba(185,140,255,.48)}
.rr-level-ic{line-height:0}
.rr-level-t{display:grid;gap:4px;min-width:0}
.rr-level-t b{font-size:13.5px;font-weight:900;line-height:1.2}
.rr-level-t small{font-size:11.5px;color:#D3C9FF;font-weight:700}
.rr-level-bar{position:relative;display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.rr-level-bar::after{content:'';position:absolute;inset:0;width:var(--p);border-radius:6px;background:linear-gradient(90deg,#8B8CF8,#7CE7FF);box-shadow:0 0 8px rgba(124,231,255,.7)}
.rr-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(6,10,32,.55);box-shadow:inset 0 0 0 1px rgba(124,231,255,.22)}
.rr-me-k{display:grid;justify-items:center;line-height:1;min-width:46px}
.rr-k-ic{line-height:0}.rr-k-ic .art{width:32px;height:32px;filter:grayscale(.6) brightness(.8)}
.rr-k-ic.lit .art{filter:drop-shadow(0 0 8px rgba(255,215,118,.9))}
.rr-k-ic.pop{animation:ar-pop .8s var(--ease-spring)}
.rr-me-k b{margin-top:2px;font-family:var(--font-display);font-size:22px;font-weight:700;color:#FFE7A0}
.rr-me-k small{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8FA6D6}
.rr-me-p{display:grid;gap:4px;min-width:0}
.rr-segs{display:flex;gap:3px}
.rr-segs i{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
.rr-segs i.on{background:linear-gradient(90deg,#FFD776,#F0A92E);box-shadow:0 0 6px rgba(255,215,118,.7)}
.rr-me-p>small{font-size:11px;font-weight:700;color:#A9B8E0}
.rr-me-prize{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:#CFE6FF;flex-wrap:wrap}
.rr-me-prize.none{color:#8FA6D6;font-weight:700}
.rr-place{display:grid;place-items:center;min-width:52px;padding:7px 8px;border-radius:12px;background:linear-gradient(180deg,#FFE7A0,#F0A92E);color:#3A2300;font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1}
.rr-place small{font-size:10px;font-weight:800;opacity:.75}
.rr-place.need{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.08);color:#EAF2FF;font-size:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rr-place.need .art{width:12px;height:12px}
.rr-watch em{display:inline-flex;margin-left:4px;line-height:0}
.rr-watch.cool{opacity:.85}
/* section heads */
.rr-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:2px 2px 8px}
.rr-sec-h b{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink)}
.rr-sec-h small{font-size:11px;font-weight:700;color:var(--ink-3);text-align:right}
/* today's 8 rooms */
.rr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rr-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;min-height:122px;padding:9px 4px 8px;border:0;border-radius:16px;background:linear-gradient(170deg,#141C4C,#0A0F2C);box-shadow:inset 0 0 0 1px rgba(124,231,255,.16),0 6px 16px rgba(0,0,0,.22);color:#EAF2FF;cursor:pointer;overflow:hidden;transition:transform .18s var(--ease-spring)}
.rr-tile:active{transform:scale(.96)}
.rr-tile-no{position:absolute;top:6px;left:8px;font-family:var(--font-display);font-size:14px;font-weight:800;color:#8FA6D6}
.rr-you{position:absolute;top:6px;right:5px;padding:1px 5px;border-radius:6px;background:linear-gradient(180deg,#FFE7A0,#F0A92E);color:#3A2300;font-size:9px;font-weight:900;letter-spacing:.03em}
.rr-tile-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-top:8px}
.rr-tile-ic .art{width:30px;height:30px;filter:drop-shadow(0 0 6px rgba(79,216,255,.45))}
.rr-tile-w{position:absolute;right:-6px;bottom:-2px;line-height:0}
.rr-tile-time{font-size:9.5px;font-weight:800;color:#8FA6D6;white-space:nowrap}
.rr-tc{display:grid;justify-items:center;gap:1px;margin-top:3px;width:100%;min-width:0}
.rr-tc em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8FA6D6;white-space:nowrap}
.rr-tc b{max-width:100%;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:#DDE8FF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-tc.live em{color:#FF9DB0}.rr-tc.live em i{width:6px;height:6px;border-radius:50%;background:#FF4D6D;box-shadow:0 0 6px #FF4D6D;animation:ar-blink 1.1s steps(2) infinite}
.rr-tc.live b{color:#fff}
.rr-tc.soon b{color:#9FEFFF}
.rr-tc.end b{font-size:11px;color:#C9D2E8}
.rr-tile.live{background:radial-gradient(90% 60% at 50% 0%,rgba(255,77,109,.3),rgba(255,77,109,0) 70%),linear-gradient(170deg,#1C1850,#0A0F2C);box-shadow:inset 0 0 0 1.5px rgba(255,107,134,.72),0 0 18px rgba(255,77,109,.25)}
.rr-tile.live .rr-tile-ic .art{animation:ar-float 3s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,140,170,.75))}
.rr-tile.ended{opacity:.74}.rr-tile.ended .rr-tile-ic .art{filter:grayscale(.8) brightness(.8)}
.rr-tile.mine{box-shadow:inset 0 0 0 1.5px rgba(255,215,118,.85),0 0 14px rgba(255,215,118,.22)}
@media (max-width:360px){.rr-grid{gap:6px}.rr-tile{min-height:114px}.rr-tc b{font-size:11px}.rr-tile-time{font-size:8.5px}}
@media (min-width:720px){.rr-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* ranking rows (page and sheets) */
.rr-board{padding:12px;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.rr-rows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rr-row{display:grid;grid-template-columns:30px auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.rr-row.p1{background:linear-gradient(90deg,rgba(255,215,118,.16),rgba(255,215,118,.02))}
.rr-row.me{background:linear-gradient(90deg,rgba(255,215,118,.2),rgba(255,215,118,.05));box-shadow:inset 0 0 0 1px rgba(255,215,118,.5)}
.rr-row.open{opacity:.68}
.rr-rows.pin{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.rr-rows.pin .rr-row,.rr-js-list .rr-row.open{grid-template-columns:30px auto minmax(0,1fr) auto auto}
.rr-rows.pin .rr-row{grid-template-columns:30px auto minmax(0,1fr) auto}
.rr-ptable .rr-row{grid-template-columns:30px minmax(0,1fr) auto}
.rr-rec-list .rr-row{grid-template-columns:auto minmax(0,1fr) auto auto}
.rr-who{display:grid;min-width:0}
.rr-who b{font-size:13px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-who small{font-size:11px;font-weight:700;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-keyc{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:9px;background:rgba(255,215,118,.13);box-shadow:inset 0 0 0 1px rgba(255,215,118,.38);font-size:12.5px;font-weight:900;color:var(--gold-ink);white-space:nowrap}
.rr-keyc .art{width:15px;height:15px}
.rr-row>.rr-keyc{min-width:50px;justify-content:center}
.rr-row>.rr-prize{min-width:86px;justify-content:flex-end}
.rr-keyc.none{background:none;box-shadow:none;color:var(--ink-3)}
.rr-medal{position:relative;display:grid;place-items:center;width:30px;height:30px}
.rr-medal .art{width:24px;height:24px}
.rr-medal b{position:absolute;right:-2px;bottom:-3px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#0B1030;color:#fff;font-size:9px;font-weight:900;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.rr-medal.m2 .art{filter:grayscale(1) brightness(1.3)}
.rr-medal.m3 .art{filter:sepia(.7) hue-rotate(-28deg) saturate(1.5) brightness(.85)}
.rr-rank{display:grid;place-items:center;width:30px;font-size:13px;font-weight:900;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rr-seat{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);color:var(--ink-3)}
.rr-seat .glyph{width:13px;height:13px}
.rr-open{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;border-radius:12px;border:1px dashed color-mix(in srgb,#4FD8FF 45%,transparent);font-size:12px;font-weight:700;color:var(--ink-2)}
.rr-empty{display:flex;align-items:center;gap:8px;margin:0;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.rr-empty .art{flex:none}
/* earnings */
.rr-earn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:18px;background:linear-gradient(110deg,rgba(76,157,255,.18),rgba(185,140,255,.1)),var(--glass);box-shadow:inset 0 0 0 1px rgba(124,200,255,.38),var(--sh-1)}
.rr-earn-ic{line-height:0}.rr-earn-ic .art{width:32px;height:32px;filter:drop-shadow(0 0 8px rgba(76,157,255,.6))}
.rr-earn-t{display:grid;gap:1px;min-width:0}
.rr-earn-t small{font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-earn-t b{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.rr-earn-t b em{font-style:normal;font-size:12px;font-weight:800;color:#4C9DFF}
.rr-earn-t b i{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:13px;font-weight:800;color:var(--ink-2)}
.rr-rec{gap:5px;white-space:nowrap}
.rr-how{margin-top:2px}
/* sheets */
.rr-js{display:grid;gap:12px}
.rr-js-h{display:flex;align-items:center;gap:12px}
.rr-js-h>span:last-child{display:grid;gap:3px;min-width:0}
.rr-js-h b{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink)}
.rr-js-h small{font-size:12px;font-weight:700;color:var(--ink-2)}
.rr-js-req{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rr-js-req>span{display:grid;justify-items:center;gap:4px;padding:10px 8px;border-radius:14px;background:linear-gradient(170deg,#141C4C,#0A0F2C);box-shadow:inset 0 0 0 1px rgba(124,231,255,.24);color:#EAF2FF;text-align:center}
.rr-js-req small{font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8FA6D6}
.rr-js-req b{font-size:12px;font-weight:800}
.rr-js-keys{display:flex;gap:2px;line-height:0}
.rr-js-keys .art{width:22px;height:22px;filter:drop-shadow(0 0 5px rgba(255,215,118,.7))}
.rr-js-pl{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;border-radius:12px;background:color-mix(in srgb,#4FD8FF 9%,transparent);font-size:12.5px;font-weight:800;color:var(--ink)}
.rr-js-list{max-height:min(44vh,420px);overflow:auto;padding-right:2px}
.rr-fine{margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
.rr-fund{display:grid;gap:8px}
.rr-fund>span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.rr-fund>span b{font-size:12.5px}.rr-fund>span small{grid-column:2;font-size:11px;color:var(--ink-3)}
.rr-rec-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rr-rec-sum>span{display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.rr-rec-sum b{display:flex;align-items:center;gap:3px;font-size:15px;font-weight:900;color:var(--ink)}
.rr-rec-sum small{font-size:9.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.rr-rec-d{display:grid;line-height:1.15;min-width:64px}
.rr-rec-d b{font-size:12.5px;font-weight:900;color:var(--ink)}
.rr-rec-d small{font-size:10.5px;color:var(--ink-3)}
.reduce-motion .rr-em-halo,.reduce-motion .rr-em-orbit,.reduce-motion .rr-em-ic,.reduce-motion .rr-tile.live .rr-tile-ic .art,.reduce-motion .rr-tag i,.reduce-motion .rr-tc i,.reduce-motion .hr-glow,.reduce-motion .hr-grid,.reduce-motion .hr-emblem,.reduce-motion .hr-live i{animation:none!important}
@media (prefers-reduced-motion:reduce){.rr-em-halo,.rr-em-orbit,.rr-em-ic,.rr-tile.live .rr-tile-ic .art,.hr-glow,.hr-grid,.hr-emblem{animation:none!important}}

/* ---------- home: the Room Ranking card (first card of the games carousel) ---------- */
.hcard-room{--g1:#4FD8FF}
.hr-art{background:radial-gradient(80% 60% at 50% 32%,rgba(79,216,255,.3),rgba(79,216,255,0) 70%),radial-gradient(60% 50% at 85% 95%,rgba(185,140,255,.32),rgba(185,140,255,0) 70%),linear-gradient(165deg,#13205A,#080C26 75%)}
.hr-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hr-grid{position:absolute;inset:-30px;background:repeating-linear-gradient(90deg,rgba(124,231,255,.08) 0 1px,transparent 1px 24px),repeating-linear-gradient(0deg,rgba(124,231,255,.07) 0 1px,transparent 1px 24px);-webkit-mask:radial-gradient(60% 70% at 50% 45%,#000,transparent 80%);mask:radial-gradient(60% 70% at 50% 45%,#000,transparent 80%);animation:ar-drift 18s linear infinite}
.hr-glow{position:absolute;left:50%;top:42%;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;background:radial-gradient(closest-side,rgba(79,216,255,.45),rgba(79,216,255,0));animation:ar-pulse 2.6s ease-in-out infinite}
.hr-live{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:rgba(255,77,109,.2);box-shadow:inset 0 0 0 1px rgba(255,107,134,.62);font-size:10.5px;font-weight:900;letter-spacing:.08em;color:#FFC9D4}
.hr-live i{width:7px;height:7px;border-radius:50%;background:#FF4D6D;box-shadow:0 0 8px #FF4D6D;animation:ar-blink 1.1s steps(2) infinite}
.hr-lv{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:9px;background:rgba(9,14,40,.72);box-shadow:inset 0 0 0 1px rgba(185,140,255,.55);font-size:10.5px;font-weight:900;color:#E3D9FF}
.hr-emblem{position:relative;z-index:1;display:grid;place-items:center;height:min(58%,118px);aspect-ratio:1;margin-bottom:28px;animation:ar-float 3.4s ease-in-out infinite}
.hr-emblem>.art{width:100%!important;height:100%!important;filter:drop-shadow(0 0 16px rgba(79,216,255,.75))}
.hr-emblem>b{position:absolute;right:0;bottom:6%;display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:10px;background:linear-gradient(180deg,#FFE7A0,#F0A92E);color:#3A2300;font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1;box-shadow:0 0 0 2px #0B1030,0 4px 12px rgba(240,169,46,.55)}
.hr-pods{position:absolute;left:0;right:0;bottom:6px;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:6px;pointer-events:none}
.hr-pods i{display:grid;justify-items:center;align-content:start;width:42px;padding-top:4px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,rgba(124,231,255,.3),rgba(124,231,255,.05));box-shadow:inset 0 0 0 1px rgba(124,231,255,.38)}
.hr-pods i.p1{width:48px;height:40px;background:linear-gradient(180deg,rgba(255,215,118,.38),rgba(255,215,118,.05));box-shadow:inset 0 0 0 1px rgba(255,215,118,.6)}
.hr-pods i.p2{height:30px}.hr-pods i.p3{height:24px}
.hr-pods .art{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.hr-prize em{display:inline-flex;align-items:center;gap:2px;margin-left:4px;font-style:normal;font-size:13px;font-weight:800;color:var(--ink-2)}
.hc-m .hr-prize{position:relative;display:flex;align-items:center;gap:5px;min-width:0;color:#4C9DFF;font-size:17px;font-weight:900;line-height:1.1;white-space:normal;overflow:visible;text-shadow:0 0 12px rgba(76,157,255,.32)}
.hc-m .hr-prize .art{flex:none;width:24px;height:24px}
.hr-prize-value{display:inline-block;background:linear-gradient(105deg,#6EB3FF 0%,#DDF0FF 29%,#4C9DFF 48%,#EAF6FF 62%,#6EB3FF 100%);background-size:220% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 5px rgba(76,157,255,.5));animation:hr-prize-sheen 3.8s ease-in-out infinite}
@keyframes hr-prize-sheen{0%,18%{background-position:130% 0}78%,100%{background-position:-20% 0}}
.reduce-motion .hr-prize-value{animation:none!important;background-position:center}
@media (prefers-reduced-motion:reduce){.hr-prize-value{animation:none!important;background-position:center}}
.level-locked .hr-time{font-size:12px;white-space:normal}
.level-locked .hr-live{background:rgba(124,108,255,.2);box-shadow:inset 0 0 0 1px rgba(185,140,255,.55);color:#E3D9FF}
.level-locked .hr-join:disabled{opacity:1;background:var(--glass);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.hcard-room .hr-unlock{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
.hcard-room .hr-unlock-crest{display:block;flex:none;width:24px;height:24px;object-fit:contain}
.hcard-room .hr-live .hr-unlock{gap:4px}
.hcard-room .hr-live .hr-unlock-crest{width:18px;height:18px}
.hr-join{gap:8px;letter-spacing:.05em;font-weight:900;background:linear-gradient(180deg,#FFE08A,#F0A92E);color:#2B1A00;box-shadow:0 6px 16px rgba(240,169,46,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.hr-join .art{width:18px;height:18px}
.hcard-room.joined .hr-join{background:linear-gradient(180deg,#7CE7FF,#3E8BFF);color:#04122E;box-shadow:0 6px 16px rgba(62,139,255,.35)}
.hc-dots .dot-room[aria-selected="true"]{background:#FFD776}
.shell.is-home.fit-2 .hr-pods i.p1{height:34px}.shell.is-home.fit-2 .hr-emblem{margin-bottom:24px}
.shell.is-home.fit-3 .hr-pods,.shell.is-home.fit-3 .hr-lv{display:none}.shell.is-home.fit-3 .hr-emblem{margin-bottom:0}