/* ===== Meow Battle · Season ranking ===== */
#rkScr { position: absolute; inset: 0; z-index: 42; opacity: 0; transition: opacity .45s ease; background: #08050a; overflow: clip; pointer-events: auto; font-family: Barlow, system-ui, sans-serif; color: #f6ecd6; }
#rkScr.on { opacity: 1; }
#rkScr[hidden] { display: none !important; }
#rkScr, #rkScr * { box-sizing: border-box; }
.rk-cvs { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.rk-bg { position: absolute; inset: 0; background: url(bg.webp) center / cover no-repeat; animation: rkKb 26s ease-in-out infinite alternate; transform-origin: 78% 40%; }
@keyframes rkKb { to { scale: 1.04; } }
.rk-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 4, 14, .9) 0%, rgba(8, 4, 14, .78) 52%, rgba(8, 4, 14, .15) 72%, rgba(8, 4, 14, 0) 100%), linear-gradient(0deg, rgba(8, 4, 14, .55), transparent 30%); }

/* header */
.rk-head { position: absolute; left: 104px; top: 26px; }
.rk-title { position: relative; width: 440px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .75)); }
.rk-title img { display: block; width: 100%; height: auto; }
.rk-title::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 42%, rgba(255, 252, 235, .85) 50%, transparent 58%); background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: rkGlint 6s ease-in-out 1s infinite; }
@keyframes rkGlint { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
.rk-season { display: flex; align-items: center; gap: 12px; margin: 6px 0 0 8px; font: 600 15px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 207, 122, .7); }
.rk-season b { color: #ffe7b0; font-weight: 700; }
.rk-season .dot { width: 5px; height: 5px; transform: rotate(45deg); background: rgba(243, 207, 122, .55); }
.rk-tabs { position: absolute; left: 920px; top: 192px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(8, 4, 14, .7); box-shadow: inset 0 0 0 1px rgba(236, 196, 116, .35); }
.rk-tabs button { height: 36px; min-width: 116px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 223, 176, .7); background: none; transition: color .2s, background .2s; }
.rk-tabs button:hover { color: #fff3d6; }
.rk-tabs button.on { color: #2a1404; background: linear-gradient(180deg, #fff0c4, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1px rgba(90, 54, 8, .8), 0 4px 12px rgba(0, 0, 0, .4); }

/* panel */
.rk-panel { position: absolute; left: 96px; top: 254px; width: 1084px; height: 798px; display: flex; flex-direction: column; padding: 18px 22px 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(30, 12, 38, .88), rgba(12, 5, 18, .92)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .5), inset 0 0 0 5px rgba(12, 5, 18, .9), inset 0 0 0 6px rgba(243, 207, 122, .16), 0 30px 60px rgba(0, 0, 0, .55); }

/* top three */
.rk-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 14px; height: 240px; padding: 0 6px 14px; }
.rk-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px 14px; border-radius: 18px; cursor: pointer; text-align: center; transition: transform .2s, box-shadow .25s;
  --c: #c9cfdb; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.rk-pod.first { --c: #ffcf6a; padding-top: 24px; }
.rk-pod.third { --c: #d98c52; }
.rk-pod:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--c), 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.rk-pod.me, .rk-pod.empty { cursor: default; }
.rk-pod.empty { opacity: .5; min-height: 150px; justify-content: center; }
.rk-pod .medal { position: absolute; top: -14px; left: 50%; translate: -50% 0; width: 34px; height: 34px; display: grid; place-items: center; transform: rotate(45deg); border-radius: 8px; font: 800 17px/1 Barlow, sans-serif; color: #2a1404; background: linear-gradient(135deg, #fff6dc, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 0 1.5px rgba(40, 20, 4, .8), 0 6px 14px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.rk-pod .medal b { display: block; transform: rotate(-45deg); }
.rk-pod .nm { margin-top: 6px; font: 800 21px/1.1 Barlow, sans-serif; color: #fff4e0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pod.first .nm { font-size: 25px; }
.rk-pod small { font: 600 13px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .18em; color: rgba(243, 207, 122, .6); }
.rk-pod .pts { margin-top: 6px; font: 600 14px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 236, 214, .65); }
.rk-pod .pts b { font: 800 24px/1 Barlow, sans-serif; letter-spacing: 0; color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }

/* portraits */
.rk-av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 210deg, var(--ring), #fff6dc, var(--ring), color-mix(in srgb, var(--ring) 50%, #000), var(--ring)); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.rk-av i { display: block; width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; background-color: #1a0b22; }
.rk-av.big { width: 92px; height: 92px; padding: 4px; }
.rk-pod.first .rk-av.big { width: 112px; height: 112px; box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 0 34px rgba(255, 207, 106, .45); }

/* table */
.rk-th, .rk-row { display: grid; grid-template-columns: 84px 1fr 110px 110px 190px; align-items: center; column-gap: 10px; }
.rk-th { height: 40px; padding: 0 18px; border-top: 1px solid rgba(236, 196, 116, .18); font: 600 13px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 207, 122, .55); }
.rk-th .c-wr, .rk-th .c-b, .rk-th .c-p, .rk-row .c-wr, .rk-row .c-b, .rk-row .c-p { text-align: right; }
.rk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 8px 0; scrollbar-width: thin; scrollbar-color: rgba(243, 207, 122, .4) transparent; }
.rk-row { height: 64px; padding: 0 18px 0 14px; margin-bottom: 4px; border-radius: 12px; cursor: pointer; transition: background .2s, box-shadow .2s; background: rgba(255, 255, 255, .025); }
.rk-row:nth-child(odd) { background: rgba(255, 255, 255, .045); }
.rk-row:hover, .rk-row:focus-visible { outline: none; background: rgba(255, 210, 120, .08); box-shadow: inset 0 0 0 1px rgba(243, 207, 122, .45); }
.rk-row .c-rank { font: 800 22px/1 Barlow, sans-serif; color: rgba(246, 236, 214, .75); text-align: center; font-variant-numeric: tabular-nums; }
.rk-row .c-pl { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rk-row .nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rk-row .nm b { font: 700 19px/1 Barlow, sans-serif; color: #fff4e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .nm small { font: 600 12.5px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 207, 122, .55); }
.rk-row .c-wr, .rk-row .c-b { font: 600 17px/1 Barlow, sans-serif; color: rgba(246, 236, 214, .72); font-variant-numeric: tabular-nums; }
.rk-row .c-p b { font: 800 21px/1 Barlow, sans-serif; color: #ffe7b0; font-variant-numeric: tabular-nums; }
.rk-empty { margin: 40px 0; text-align: center; font: 500 17px/1.5 Barlow, sans-serif; color: rgba(246, 236, 214, .6); }

/* you, always at the bottom */
.rk-me { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(236, 196, 116, .25); }
.rk-row.me, .rk-row.pin { cursor: default; background: linear-gradient(90deg, rgba(255, 200, 110, .16), rgba(255, 200, 110, .05)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .7), 0 0 24px rgba(255, 200, 110, .12); }
.rk-row.pin { margin: 0; }
.rk-row.me .c-rank { color: #ffe7b0; }
.rk-next { margin: 8px 4px 0; font: 500 14.5px/1.3 Barlow, sans-serif; color: rgba(246, 236, 214, .66); text-align: right; }
.rk-next b { color: #ffe7b0; }
.rk-me.un .rk-row { grid-template-columns: 84px 1fr auto auto; }
.rk-me.un .c-go { font: 600 15px/1.2 Barlow, sans-serif; color: rgba(246, 236, 214, .7); }
.rk-play { height: 42px; margin-left: 16px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #2a1404; background: linear-gradient(180deg, #fff0c4, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1px rgba(90, 54, 8, .8), 0 6px 14px rgba(0, 0, 0, .45); }
.rk-play:hover { filter: brightness(1.08); }

/* rewards */
.rk-rew { position: absolute; right: 80px; bottom: 28px; width: 560px; padding: 18px 20px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(24, 10, 32, .82), rgba(10, 4, 16, .9)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .45), 0 20px 40px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rk-rh { margin-bottom: 10px; font: 700 15px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #ffe7b0; }
.rk-rr { display: grid; grid-template-columns: 22px 130px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(236, 196, 116, .14); }
.rk-rr .md { width: 14px; height: 14px; margin-left: 4px; transform: rotate(45deg); border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.rk-rr.gold { --c: #ffcf6a; } .rk-rr.silver { --c: #c9cfdb; } .rk-rr.bronze { --c: #d98c52; } .rk-rr.all { --c: #b36bff; }
.rk-rr .who { display: flex; flex-direction: column; gap: 3px; }
.rk-rr .who b { font: 700 17px/1 Barlow, sans-serif; color: #fff4e0; }
.rk-rr .who small { font: 600 12px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .16em; color: rgba(243, 207, 122, .6); }
.rk-rr .it { font: 500 14.5px/1.35 Barlow, sans-serif; color: rgba(246, 236, 214, .78); }
.rk-rnote { margin: 8px 0 0; font: 500 12.5px/1.4 Barlow, sans-serif; color: rgba(246, 236, 214, .45); }
@media (prefers-reduced-motion: reduce) { .rk-bg, .rk-title::after { animation: none; } }

/* the two boards: Cash first, then Free */
.rk-modes { position: absolute; left: 96px; top: 180px; display: flex; gap: 10px; }
.rk-modes button { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: rgba(246, 236, 214, .7); background: rgba(10, 4, 16, .7); box-shadow: inset 0 0 0 1.5px rgba(236, 196, 116, .28); transition: background .2s, box-shadow .2s, color .2s; }
.rk-modes button img, .rk-modes button svg { width: 34px; height: 34px; flex: none; }
.rk-modes button svg { color: #f3cf7a; }
.rk-modes button span { display: flex; flex-direction: column; gap: 4px; }
.rk-modes button b { font: 800 19px/1 Barlow, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.rk-modes button small { font: 600 12px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 207, 122, .55); }
.rk-modes button:hover { color: #fff4e0; box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .6); }
.rk-modes button.on { color: #fff6e2; background: linear-gradient(180deg, rgba(70, 30, 80, .95), rgba(30, 12, 38, .95)); box-shadow: inset 0 0 0 2px #ffd98a, 0 0 26px rgba(255, 200, 110, .22), 0 10px 24px rgba(0, 0, 0, .45); }
.rk-modes button[data-m="cash"].on { background: linear-gradient(180deg, rgba(24, 52, 92, .95), rgba(12, 22, 44, .95)); box-shadow: inset 0 0 0 2px #ffd98a, 0 0 26px rgba(80, 140, 255, .25), 0 10px 24px rgba(0, 0, 0, .45); }
.rk-row .c-p b.up { color: #9dff9a; }
.rk-row .c-p b.down { color: #ff9a8a; }
.rk-soon { margin-left: 16px; padding: 10px 16px 9px; border-radius: 999px; font: 700 13px/1 'Barlow Condensed', Barlow, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 223, 176, .8); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(236, 196, 116, .4); white-space: nowrap; }
.rk-cvs[data-mode="cash"] .rk-th .c-p { letter-spacing: .14em; }