/* Super Snake Pro — AAA interface. Layered glass, animated gradients, spring micro-interactions, Oxanium + Cairo (self-hosted, OFL). */
@font-face { font-family: "Oxanium"; src: url("../assets/fonts/oxanium.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../assets/fonts/cairo.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --bg: #05070d; --ink: #eef3ff; --tx2: #a9b4cc; --tx3: #6f7a92; --line: rgba(255, 255, 255, 0.10); --line2: rgba(255, 255, 255, 0.18);
  --gold1: #ffe9a8; --gold2: #ffc845; --gold3: #e09a12; --cyan: #3ad8ff; --mag: #ff3fd8; --green: #2be38b; --red: #ff4d5e;
  --glass: linear-gradient(160deg, rgba(26, 34, 58, 0.86), rgba(9, 12, 22, 0.9)); --glass2: linear-gradient(160deg, rgba(48, 62, 98, 0.55), rgba(16, 20, 36, 0.7));
  --r: 1rem; --spring: cubic-bezier(.34, 1.56, .64, 1); --ease: cubic-bezier(.22, 1, .36, 1);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --bf: none; --font: "Oxanium", "Cairo", -apple-system, "SF Pro Display", "Segoe UI", Roboto, "Noto Sans Arabic", "Kohinoor Devanagari", "Noto Sans Devanagari", system-ui, sans-serif; --box: 0;
}
html.blur { --bf: blur(0.875rem) saturate(1.3); }
html.blur #hud { --bf: none; }
html[lang="ar"] { --font: "Cairo", "Oxanium", -apple-system, "Segoe UI", Roboto, "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }
/* fix1: Hindi — Oxanium has no Devanagari; iOS / macOS have Kohinoor Devanagari (+ Devanagari Sangam MN), Android / Linux Noto Sans Devanagari, Windows Nirmala UI */
html[lang="hi"] { --font: "Oxanium", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", "Nirmala UI", "Mangal", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
/* resp1: one UI scale for every device. Every length is in rem, so the root size scales the whole interface: 16px on phones,
   larger on big screens (designed for ~1100x680 CSS px of room in landscape, ~390px wide in portrait), capped for 4K. */
html { --fs: clamp(16px, min(1.4545vw, 2.353vh), 48px); font-size: var(--fs); }
@media (orientation: portrait) { html { --fs: clamp(16px, min(4.1vw, 2vh), 22px); } }
html.big { font-size: calc(var(--fs) * 1.1); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: manipulation; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input { user-select: text; -webkit-user-select: text; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-hide { display: none !important; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* vignette (CSS fallback when the post stack is off), storm warning, letterbox */
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%); opacity: 0; transition: opacity .4s; }
html.nopost #vignette { opacity: 1; }
#vignette.flash { animation: hit .5s ease-out; }
@keyframes hit { 0% { background: radial-gradient(ellipse at center, rgba(255, 0, 40, 0.25) 30%, rgba(160, 0, 20, 0.75) 100%); opacity: 1; } 100% { opacity: inherit; } }
#storm-vig { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .35s; background: radial-gradient(ellipse at center, transparent 40%, rgba(130, 40, 255, 0.55) 100%); box-shadow: inset 0 0 5rem rgba(170, 60, 255, 0.6); }
#storm-vig.on { opacity: 1; }
@keyframes stormp { 50% { opacity: 0.6; } }
#lbox i { position: fixed; left: 0; right: 0; height: calc(11vh * var(--box)); background: #000; z-index: 2; pointer-events: none; }
#lbox i:first-child { top: 0; } #lbox i:last-child { bottom: 0; }

/* rotate cover */
#rotate { position: fixed; inset: 0; z-index: 99; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; background: #05070a; color: var(--tx2); text-align: center; }
#rotate .rot-ic { font-size: 3.375rem; color: var(--gold2); animation: spin 2.4s var(--ease) infinite; }
#rotate p { margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
/* resp1: portrait is supported everywhere now; the rotate cover is never shown */

/* ---------- logo / wordmark ---------- */
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo img { width: 4rem; height: 4rem; object-fit: contain; filter: drop-shadow(0 0.375rem 1.125rem rgba(255, 180, 40, 0.45)); }
.wm { direction: ltr; display: flex; align-items: baseline; gap: 0.5rem; font-weight: 800; letter-spacing: 0.04em; line-height: 0.9; font-family: "Oxanium", var(--font); }
.wm .w1, .wm .w2 { font-size: 2.5rem; background: linear-gradient(180deg, #ffffff 0%, #dfe7ff 45%, #8ea2c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.1875rem 0 rgba(0, 0, 0, 0.35)); }
.wm .w2 { background: linear-gradient(180deg, #fff6d0 0%, #ffd25a 40%, #e08a00 100%); -webkit-background-clip: text; background-clip: text; }
.wm .pro { font-size: 0.8125rem; padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: linear-gradient(135deg, var(--gold1), var(--gold2) 50%, var(--gold3)); color: #2a1800; letter-spacing: 0.15em; align-self: center; box-shadow: 0 0 1.125rem rgba(255, 200, 69, 0.5); }
.wm.big .w1, .wm.big .w2 { font-size: 4rem; }

/* ---------- studio intro ---------- */
#intro { position: fixed; inset: 0; z-index: 95; background: #000; display: grid; place-items: center; overflow: hidden; }
#intro .st-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; animation: stin 2.6s var(--ease) forwards; }
#intro .st-emb { width: 6.75rem; height: 6.75rem; object-fit: contain; filter: drop-shadow(0 0 1.875rem rgba(255, 190, 60, 0.6)); }
#intro .st-name { font-weight: 800; font-size: 1.625rem; letter-spacing: 0.5em; color: #fff; padding-inline-start: 0.5em; }
#intro .st-name span { color: var(--gold2); margin-inline-start: 0.35em; }
#intro .st-pres { font-size: 0.75rem; letter-spacing: 0.6em; color: var(--tx3); text-transform: uppercase; }
#intro .st-sweep { position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 45%, rgba(255, 230, 160, 0.22) 50%, transparent 55%); animation: sweep 2.2s .4s ease-out forwards; transform: translateX(-60%); }
#intro.out { animation: fadeout .6s forwards; }
@keyframes stin { 0% { opacity: 0; transform: scale(0.92); filter: blur(0.5rem); } 25% { opacity: 1; transform: scale(1); filter: blur(0); } 80% { opacity: 1; } 100% { opacity: 1; transform: scale(1.04); } }
@keyframes sweep { to { transform: translateX(60%); } }
@keyframes fadeout { to { opacity: 0; visibility: hidden; } }

/* ---------- cinematic loading ---------- */
#boot { position: fixed; inset: 0; z-index: 90; background: #04060b; overflow: hidden; transition: opacity .15s, visibility .15s; }
#boot.out { opacity: 0; visibility: hidden; }
.ld-art { position: absolute; inset: -4%; background: #04060b url("../assets/keyart_lo.webp") center/cover no-repeat; animation: kb 18s ease-in-out infinite alternate; }
.ld-art.hi { background-image: url("../assets/keyart.webp"); }
@keyframes kb { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.12) translateX(-2%); } }
.ld-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 6, 11, 0.94) 0%, rgba(4, 6, 11, 0.55) 40%, rgba(4, 6, 11, 0.05) 70%), linear-gradient(0deg, rgba(4, 6, 11, 0.95) 0%, transparent 40%); }
.ld-main { position: absolute; top: calc(1.75rem + var(--st)); inset-inline-start: calc(2.125rem + var(--sl)); }
.ld-ctx { margin-top: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold1); text-shadow: 0 0.125rem 0.5rem #000; }
.ld-ctx b { display: block; font-size: 1.5rem; letter-spacing: 0.06em; color: #fff; margin-top: 0.25rem; }
.ld-foot { position: absolute; left: calc(2.125rem + var(--sl)); right: calc(2.125rem + var(--sr)); bottom: calc(1.125rem + var(--sb)); }
.ld-tip { display: flex; gap: 0.625rem; align-items: baseline; color: var(--tx2); font-size: 0.8125rem; margin-bottom: 0.625rem; max-width: 38.75rem; min-height: 1.125rem; }
.ld-tip b { color: var(--gold2); letter-spacing: 0.2em; font-size: 0.6875rem; }
.ld-bar { position: relative; height: 0.375rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.08); overflow: visible; }
.ld-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6.1875rem; background: linear-gradient(90deg, var(--gold3), var(--gold2), #fff6d0); box-shadow: 0 0 1rem rgba(255, 200, 69, 0.8); transition: width .35s var(--ease); }
html[dir="rtl"] .ld-bar i { inset: 0 0 0 auto; }
.ld-bar em { position: absolute; inset-inline-end: 0; top: -1.25rem; font-style: normal; font-size: 0.75rem; color: var(--gold1); font-variant-numeric: tabular-nums; }
#bootmsg { margin: 0.5rem 0 0; font-size: 0.6875rem; color: var(--tx3); letter-spacing: 0.25em; text-transform: uppercase; }
.ns { position: absolute; bottom: 2.5rem; left: 0; right: 0; text-align: center; }

/* ---------- title ---------- */
#title { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.375rem; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.55) 100%); animation: fin .9s var(--ease); }
.t-logo { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; animation: tlogo 1.2s var(--ease); }
.t-emb { width: 6rem; height: 6rem; object-fit: contain; filter: drop-shadow(0 0 1.625rem rgba(255, 190, 60, 0.6)); animation: float 4s ease-in-out infinite; }
.t-tag { margin: 0.25rem 0 0; color: #fff; text-shadow: 0 0.125rem 0.625rem #000; letter-spacing: 0.4em; font-size: 0.75rem; text-transform: uppercase; opacity: .85; }
.t-start { padding: 0.75rem 2.125rem; border-radius: 6.1875rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.875rem; color: #fff; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 220, 140, 0.5); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); animation: breathe 2s ease-in-out infinite; }
.t-ver { position: absolute; bottom: calc(0.5rem + var(--sb)); inset-inline-end: calc(0.875rem + var(--sr)); margin: 0; font-size: 0.625rem; color: rgba(255, 255, 255, 0.45); }
#title.out { animation: fadeout .5s forwards; }
@keyframes tlogo { from { opacity: 0; transform: translateY(0.875rem) scale(0.96); letter-spacing: 0.3em; } }
@keyframes float { 50% { transform: translateY(-0.375rem); } }
@keyframes breathe { 50% { box-shadow: 0 0 1.75rem rgba(255, 200, 69, 0.55); border-color: rgba(255, 220, 140, 0.95); } }
@keyframes fin { from { opacity: 0; } }

/* ---------- glass & controls ---------- */
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); box-shadow: 0 1.125rem 2.5rem rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); position: relative; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(140deg, rgba(255, 255, 255, 0.28), transparent 35%, transparent 65%, rgba(120, 180, 255, 0.18)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html.blur .glass { background: linear-gradient(160deg, rgba(30, 40, 66, 0.62), rgba(10, 14, 26, 0.72)); }
.chip { display: flex; align-items: center; gap: 0.5rem; height: 2.375rem; padding: 0 0.75rem; border-radius: 0.75rem; background: rgba(10, 14, 26, 0.55); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); transition: transform .25s var(--spring), border-color .2s; }
.chip.coins b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold1); min-width: 2.5rem; }
.chip.coins.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { border-color: var(--gold2); box-shadow: 0 0 1rem rgba(255, 200, 69, 0.55); } }
.coin { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d0, var(--gold2) 45%, var(--gold3)); box-shadow: 0 0 0.625rem rgba(255, 200, 69, 0.6), inset 0 -0.125rem 0 rgba(0, 0, 0, 0.25); position: relative; }
.coin::after { content: ""; position: absolute; inset: 0.25rem; border-radius: 50%; border: 1.5px solid rgba(120, 70, 0, 0.5); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.625rem; padding: 0 1.125rem; border-radius: 0.75rem; font-weight: 700; letter-spacing: 0.04em; background: var(--glass2); border: 1px solid var(--line2); color: var(--ink); transition: filter .12s, box-shadow .2s; }
@media (hover: hover) { .btn:hover { filter: brightness(1.12); } }
/* press state: colour only, never geometry (taps1) */
button:active, .item:active, .mode:active, .icon-btn:active, .world:active, .prs { filter: brightness(0.82); transition-duration: .05s; }
.btn:focus-visible, .icon-btn:focus-visible, .seg button:focus-visible, .item:focus-visible, .mode:focus-visible { outline: 0.125rem solid var(--gold2); outline-offset: 0.125rem; }
.btn.wide { width: 100%; }
.btn.primary { background: linear-gradient(180deg, #3cf0a0, #12b066); border-color: rgba(160, 255, 210, 0.6); color: #022614; box-shadow: 0 0.5rem 1.375rem rgba(20, 200, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn.gold { background: linear-gradient(180deg, #fff1bd, var(--gold2) 45%, var(--gold3)); border-color: rgba(255, 240, 190, 0.8); color: #2a1800; box-shadow: 0 0.5rem 1.5rem rgba(255, 170, 30, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.btn.ghost { background: rgba(255, 255, 255, 0.04); }
.btn.danger { background: linear-gradient(180deg, #ff6b7a, #d1263a); border-color: rgba(255, 180, 190, 0.6); }
.btn.xl { height: 3.25rem; font-size: 1.125rem; padding: 0 1.875rem; }
.btn.glassbtn { background: rgba(10, 14, 26, 0.5); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); height: 2.25rem; font-size: 0.8125rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.ripw { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ripw .rip, .btn .rip, .item .rip, .mode .rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: rip .55s ease-out forwards; pointer-events: none; }
@keyframes rip { to { transform: scale(4); opacity: 0; } }
.icon-btn { position: relative; width: 2.375rem; height: 2.375rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(10, 14, 26, 0.55); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); transition: transform .25s var(--spring); }
.icon-btn .badge { position: absolute; top: -0.25rem; inset-inline-end: -0.25rem; min-width: 1.0625rem; height: 1.0625rem; padding: 0 0.25rem; border-radius: 6.1875rem; background: var(--red); color: #fff; font-size: 0.625rem; font-style: normal; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0.625rem rgba(255, 77, 94, 0.7); }
.icon-btn.back { width: 2.375rem; }
html[dir="rtl"] .icon-btn.back svg { transform: scaleX(-1); }
.dot { position: absolute; top: 0.25rem; inset-inline-end: 0.25rem; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0.5rem var(--red); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.3); } }
.seg { display: inline-flex; padding: 0.1875rem; gap: 0.125rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { position: relative; height: 2rem; padding: 0 0.75rem; border-radius: 0.5625rem; font-size: 0.8125rem; font-weight: 600; color: var(--tx2); white-space: nowrap; transition: color .2s, background .25s var(--ease); }
.seg button.on { color: #1d1200; background: linear-gradient(180deg, #fff1bd, var(--gold2)); box-shadow: 0 0.25rem 0.875rem rgba(255, 190, 50, 0.35); }
.seg button.lock { opacity: 0.5; }
.seg button svg { width: 0.75rem; height: 0.75rem; vertical-align: -1px; }
.seg.small button { height: 1.75rem; padding: 0 0.5625rem; font-size: 0.75rem; }
input:not([type]), input[type="email"], input[type="password"], input[type="search"], input[type="text"] { width: 100%; height: 2.625rem; padding: 0 0.875rem; border-radius: 0.75rem; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.35); outline: none; transition: border-color .2s, box-shadow .2s; }
input:focus { border-color: var(--gold2); box-shadow: 0 0 0 0.1875rem rgba(255, 200, 69, 0.18); }
.chk { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--tx2); }
.chk input { width: 1.125rem; height: 1.125rem; accent-color: var(--gold2); }
.err { min-height: 1rem; margin: 0; font-size: 0.75rem; color: #ff8a96; }
.fine { font-size: 0.6875rem; color: var(--tx3); margin: 0; }

/* ---------- screens & transitions ---------- */
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; padding: calc(0.625rem + var(--st)) calc(0.75rem + var(--sr)) calc(0.625rem + var(--sb)) calc(0.75rem + var(--sl)); }
.screen.on { display: flex; flex-direction: column; animation: scin .15s ease-out; }
@keyframes scin { from { opacity: 0; } }
html.rm .screen.on, html.rm .modal, html.rm .mcard { animation: none !important; }
.screen.panel { background: linear-gradient(90deg, rgba(4, 6, 12, 0.88), rgba(4, 6, 12, 0.55) 60%, rgba(4, 6, 12, 0.2)); }
#wipe { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#wipe i { position: absolute; top: -10%; bottom: -10%; width: 70%; left: -80%; transform: skewX(-18deg); }
#wipe i:nth-child(1) { background: linear-gradient(90deg, #0b1020, #121a33); }
#wipe i:nth-child(2) { background: linear-gradient(90deg, var(--gold3), var(--gold2)); width: 3%; }
#wipe i:nth-child(3) { background: linear-gradient(90deg, #121a33, #070a14); }
#wipe.go i { animation: wipe .7s var(--ease) forwards; }
#wipe.go i:nth-child(2) { animation-delay: .05s; } #wipe.go i:nth-child(3) { animation-delay: .1s; }
@keyframes wipe { 0% { left: -80%; } 45%, 55% { left: 15%; width: 85%; } 100% { left: 130%; } }
#wipe.fade { background: #000; animation: dissolve .6s ease forwards; }
@keyframes dissolve { 0% { opacity: 0; } 45%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- auth ---------- */
#s-auth { justify-content: center; background: radial-gradient(ellipse at 30% 50%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6)); }
.auth-wrap { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex: 1; }
.auth-hero { display: flex; flex-direction: column; gap: 0.875rem; max-width: 29rem; } /* resp2: room for the full wordmark (PRO badge ran under the card at 22.5rem) */
.auth-hero .tag { margin: 0; color: var(--tx2); letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.8125rem; }
.auth-card { width: 20.625rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.auth-card form { display: flex; flex-direction: column; gap: 0.5625rem; }
.auth-card .seg { width: 100%; } .auth-card .seg button { flex: 1; }
.lang-row { display: flex; justify-content: center; gap: 0.375rem; flex-wrap: wrap; }
.lang-row button { padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.75rem; color: var(--tx2); }
.lang-row button.on { color: var(--gold1); background: rgba(255, 200, 69, 0.12); }

/* ---------- lobby ---------- */
#s-lobby { gap: 0.5rem; }
.topbar { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; flex: none; }
.topbar .sp { flex: 1; }
.prof { padding: 0 0.75rem 0 0.25rem; gap: 0.5rem; }
.av { position: relative; width: 2rem; height: 2rem; border-radius: 0.625rem; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--gold2), #3a2400); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; min-width: 5.625rem; }
.pinfo b { font-size: 0.8125rem; line-height: 1; } .pinfo small { font-size: 0.625rem; color: var(--tx2); line-height: 1; }
.xpbar { display: block; width: 100%; height: 0.25rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #8af2ff); box-shadow: 0 0 0.5rem var(--cyan); transition: width .8s var(--ease); }
.xpbar.big { height: 0.5rem; }
.chip.season { gap: 0.5rem; padding: 0 0.75rem 0 0.5rem; position: relative; }
.chip.season .sic { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; display: grid; place-items: center; color: #2a1800; font-weight: 900; background: linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3)); box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.5); }
.chip.season small { display: block; font-size: 0.625rem; color: var(--gold1); letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; }
.chip.season b { font-size: 0.8125rem; line-height: 1.2; }
.chip.season .sbar { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0; height: 0.125rem; border-radius: 0.125rem; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.chip.season .sbar i { display: block; height: 100%; background: var(--gold2); box-shadow: 0 0 0.5rem var(--gold2); transition: width .8s var(--ease); }
.notif { position: absolute; top: calc(3.375rem + var(--st)); inset-inline-end: calc(3.5rem + var(--sr)); width: 17.5rem; max-height: 60vh; overflow-y: auto; padding: 0.625rem; z-index: 5; display: flex; flex-direction: column; gap: 0.375rem; animation: scin .35s var(--ease); }
.notif .nt { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.04); font-size: 0.75rem; }
.notif .nt i { font-style: normal; font-size: 1rem; } .notif .nt small { display: block; color: var(--tx3); font-size: 0.625rem; }
.notif .empty { color: var(--tx3); font-size: 0.75rem; text-align: center; padding: 0.875rem; }
.lobby-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 14.75rem 1fr 14.75rem; gap: 0.625rem; }
.col-l, .col-r { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.modes { padding: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; scrollbar-width: none; flex: 1; min-height: 0; }
.modes::-webkit-scrollbar { display: none; }
.mode { position: relative; display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; border-radius: 0.75rem; text-align: start; transition: background .25s; flex: none; }
@media (hover: hover) { .mode:hover { background: rgba(255, 255, 255, 0.05); } }
.mode .mi { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); flex: none; }
.mode .mi svg { width: 1.25rem; height: 1.25rem; }
.mode b { display: block; font-size: 0.8125rem; } .mode small { display: block; font-size: 0.625rem; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.375rem; }
.mode .new { position: absolute; top: 0.375rem; inset-inline-end: 0.375rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; padding: 0.125rem 0.3125rem; border-radius: 0.3125rem; background: var(--red); color: #fff; }
.mode.on { background: linear-gradient(90deg, rgba(255, 200, 69, 0.22), rgba(255, 200, 69, 0.04)); box-shadow: inset 0 0 0 1px rgba(255, 200, 69, 0.45); }
html[dir="rtl"] .mode.on { background: linear-gradient(270deg, rgba(255, 200, 69, 0.22), rgba(255, 200, 69, 0.04)); }
.mode.on .mi { background: linear-gradient(135deg, var(--gold1), var(--gold2)); color: #2a1800; box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.5); }
.col-c { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.25rem; pointer-events: none; } /* fit1: Locker sits right under the skin name; the snake fills the box below it */
.show-tag { text-align: center; margin-bottom: 0.25rem; text-shadow: 0 0.125rem 0.75rem #000; }
.show-tag b { display: block; font-size: 1.125rem; letter-spacing: 0.05em; }
.rar { display: inline-block; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 0.375rem; }
.rar.common { color: #c8d2e0; background: rgba(154, 167, 184, 0.18); } .rar.rare { color: #8cc8ff; background: rgba(58, 160, 255, 0.2); } .rar.epic { color: #dcb2ff; background: rgba(180, 92, 255, 0.22); }
.rar.legendary { color: #2a1800; background: linear-gradient(90deg, #ffe9a8, #ffb636, #ffe9a8); background-size: 200% 100%; animation: shimmer 2.5s linear infinite; box-shadow: 0 0 0.875rem rgba(255, 182, 54, 0.6); }
@keyframes shimmer { to { background-position: -200% 0; } }
.show-act { pointer-events: auto; margin-bottom: 0.25rem; }
.pass-card { display: block; width: 100%; padding: 0.625rem; text-align: start; flex: none; transition: transform .25s var(--spring); }
.pass-card .pc-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.8125rem; }
.pass-card .pc-h small { font-size: 0.625rem; color: var(--gold1); font-weight: 600; }
.pc-track { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.pc-track .tn { flex: 1; height: 1.875rem; border-radius: 0.4375rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); display: grid; place-items: center; font-size: 0.625rem; color: var(--tx3); position: relative; }
.pc-track .tn.got { background: linear-gradient(180deg, rgba(255, 200, 69, 0.35), rgba(255, 200, 69, 0.1)); color: var(--gold1); border-color: rgba(255, 200, 69, 0.5); }
.pc-track .tn.leg { background: linear-gradient(135deg, rgba(255, 182, 54, 0.35), rgba(255, 63, 216, 0.25)); border-color: #ffb636; color: #fff; }
.pc-track .tn.cur { box-shadow: 0 0 0 0.125rem var(--gold2), 0 0 0.875rem rgba(255, 200, 69, 0.6); }
.side { padding: 0.625rem; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side h3 { margin: 0 0 0.375rem; font-size: 0.8125rem; display: flex; justify-content: space-between; letter-spacing: 0.04em; }
.side h3 small { font-weight: 500; color: var(--tx3); font-size: 0.625rem; }
.mis { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; padding: 0.4375rem 0.5rem 0.5625rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.04); margin-bottom: 0.3125rem; font-size: 0.6875rem; }
.mis span { color: var(--tx2); } .mis .rw { color: var(--gold1); font-weight: 700; font-size: 0.6875rem; }
.mis .pb { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.1875rem; height: 0.1875rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mis .pb i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #9dffcf); transition: width .6s var(--ease); }
html[dir="rtl"] .mis .pb i { margin-inline-start: auto; }
.mis .claim { height: 1.5rem; padding: 0 0.625rem; font-size: 0.6875rem; border-radius: 0.5rem; }
.mis.done span:first-child { color: #fff; }
.lobby-foot { display: flex; align-items: flex-end; gap: 0.625rem; flex: none; }
.dock { display: flex; gap: 0.375rem; }
.dk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; width: 4rem; padding: 0.375rem 0; border-radius: 0.75rem; font-size: 0.625rem; color: var(--tx2); background: rgba(10, 14, 26, 0.55); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); transition: transform .25s var(--spring), color .2s; }
@media (hover: hover) { .dk:hover { color: #fff; } } .dk svg { width: 1.25rem; height: 1.25rem; }
.playbox { margin-inline-start: auto; display: flex; align-items: flex-end; gap: 0.625rem; }
.pb-opts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; }
.worlds { display: flex; gap: 0.3125rem; }
.world { position: relative; width: 3.25rem; height: 2.25rem; border-radius: 0.5625rem; border: 1.5px solid var(--line2); background: #111 center/cover; transition: border-color .2s, box-shadow .2s; }
.world span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.625rem; font-weight: 700; padding: 1px 0.125rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent); text-align: center; letter-spacing: 0.04em; }
.world.on { border-color: var(--gold2); box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.55); }
.world.lock { filter: grayscale(0.8) brightness(0.5); }
.world .lk { position: absolute; inset: 0; display: grid; place-items: center; } .world .lk svg { width: 0.875rem; height: 0.875rem; }
.room { width: 12.5rem; } .room input { height: 2rem; font-size: 0.8125rem; }
.play { height: 4rem; min-width: 13.125rem; padding: 0 1.375rem; border-radius: 1rem; gap: 0.75rem; font-size: 1.375rem; color: #2a1800; border: 1px solid rgba(255, 240, 190, 0.9); background: linear-gradient(110deg, #fff4c4, #ffc845 30%, #ffa51a 60%, #ffc845 85%, #fff4c4); background-size: 220% 100%; animation: playg 4s ease-in-out infinite; box-shadow: 0 0.625rem 2.125rem rgba(255, 160, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -0.1875rem 0 rgba(140, 70, 0, 0.35); }
.play svg { width: 1.75rem; height: 1.75rem; fill: #2a1800; stroke: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)); }
.play .pl-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .play b { font-size: 1.5rem; letter-spacing: 0.1em; } .play small { font-size: 0.625rem; letter-spacing: 0.08em; opacity: 0.75; margin-top: 0.1875rem; font-weight: 700; }
.play .pl-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes playg { 50% { background-position: 100% 0; } }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
html.rm .play, html.rm .play .pl-shine { animation: none; }

/* ---------- panels ---------- */
.phead { display: flex; align-items: center; gap: 0.625rem; height: 2.5rem; flex: none; }
.phead h2 { margin: 0; font-size: 1.125rem; letter-spacing: 0.06em; white-space: nowrap; background: linear-gradient(180deg, #fff, #c9d4f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phead .tabs { flex: 1; min-width: 0; }
.pbody { flex: 1; min-height: 0; display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.pcontent { flex: 1; min-width: 0; overflow-y: auto; padding: 0.125rem 0.25rem 0.625rem 0.125rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.pcontent.wide { max-width: 61.25rem; margin: 0 auto; }
.lockerbody .pcontent { max-width: 52%; }
.lk-show { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; pointer-events: none; }
.lk-info { pointer-events: auto; width: min(20rem, 100%); padding: 0.625rem 0.75rem; text-align: center; }
.lk-info b { display: block; font-size: 1.125rem; margin: 0.25rem 0 0.125rem; } .lk-info p { margin: 0.25rem 0 0.5rem; font-size: 0.6875rem; color: var(--tx2); }
.lk-info .btn { height: 2.125rem; font-size: 0.8125rem; }
.presets { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--tx3); }
#c-presets { display: flex; gap: 0.375rem; }
.pre { width: 4rem; height: 2.25rem; border-radius: 0.625rem; border: 1px dashed var(--line2); font-size: 0.625rem; color: var(--tx2); display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.pre.full { border-style: solid; position: relative; } .pre .sw { position: absolute; inset: 0; }
.pre-act { position: relative; display: flex; gap: 0.125rem; } .pre-act button { font-size: 0.625rem; padding: 0.125rem 0.25rem; border-radius: 0.3125rem; background: rgba(0, 0, 0, 0.6); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.item { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 0.4375rem; border-radius: 0.8125rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); text-align: start; overflow: hidden; transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; }
@media (hover: hover) { .item:hover { border-color: var(--line2); } }
.item .sw { height: 2.5rem; border-radius: 0.5rem; box-shadow: inset 0 -0.625rem 1.125rem rgba(0, 0, 0, 0.35), inset 0 0.125rem 0 rgba(255, 255, 255, 0.25); }
.item b { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item small { font-size: 0.625rem; color: var(--tx3); }
.item.on { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 0 1.125rem rgba(255, 200, 69, 0.35); }
.item.sel { border-color: #fff; }
.item.lock .sw { filter: saturate(0.4) brightness(0.6); }
.item.r-rare { border-color: rgba(58, 160, 255, 0.35); } .item.r-epic { border-color: rgba(180, 92, 255, 0.45); }
.item.r-legendary { border-color: transparent; background: linear-gradient(#141826, #141826) padding-box, linear-gradient(120deg, #ffe9a8, #ffb636, #ff3fd8, #3ad8ff, #ffe9a8) border-box; background-size: 100% 100%, 300% 300%; animation: legb 4s linear infinite; }
@keyframes legb { to { background-position: 0 0, 300% 0; } }
.item.r-legendary .sw { height: 3.375rem; }
.item .rtag { position: absolute; top: 0.5625rem; inset-inline-start: 0.5625rem; font-size: 0.625rem; } .item .lkic { position: absolute; top: 0.5625rem; inset-inline-end: 0.5625rem; } .item .lkic svg { width: 0.8125rem; height: 0.8125rem; }
.item .emo { height: 2.5rem; display: grid; place-items: center; font-size: 1.625rem; }
.searchbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.ed-row { display: flex; gap: 0.625rem; align-items: flex-end; margin-top: 0.625rem; flex-wrap: wrap; } .ed-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6875rem; color: var(--tx2); }
input[type="color"] { width: 3.375rem; height: 2.125rem; border: 1px solid var(--line2); border-radius: 0.5625rem; background: none; padding: 0.125rem; }
.pats { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 0.375rem; }
.namecols { display: flex; gap: 0.5rem; flex-wrap: wrap; } .namecols button { width: 2rem; height: 2rem; border-radius: 0.625rem; border: 0.125rem solid transparent; } .namecols button.on { border-color: #fff; box-shadow: 0 0 0.625rem rgba(255, 255, 255, 0.5); }
h4.sub { margin: 0.625rem 0 0.375rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tx2); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.125rem; padding: 0.375rem 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.035); margin-bottom: 0.375rem; border: 1px solid transparent; }
@media (hover: hover) { .set-row:hover { border-color: var(--line); } }
.set-row > span { display: flex; flex-direction: column; font-size: 0.8125rem; } .set-row small { font-size: 0.625rem; color: var(--tx3); }
.toggle { position: relative; width: 3rem; height: 1.75rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.12); transition: background .25s; flex: none; }
.toggle::after { content: ""; position: absolute; top: 0.1875rem; inset-inline-start: 0.1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fff; transition: inset-inline-start .3s var(--spring); box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.4); }
.toggle.on { background: linear-gradient(90deg, var(--gold3), var(--gold2)); } .toggle.on::after { inset-inline-start: 1.4375rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 10rem; height: 0.375rem; border-radius: 6.1875rem; background: linear-gradient(90deg, var(--gold2) var(--p, 50%), rgba(255, 255, 255, 0.14) var(--p, 50%)); outline: none; vertical-align: middle; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5); }
input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; border: 0; }
.rv { display: inline-block; width: 3rem; text-align: end; font-size: 0.75rem; color: var(--tx2); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: 0.5rem; }
.stat { padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.stat small { display: block; font-size: 0.625rem; color: var(--tx3); letter-spacing: 0.1em; text-transform: uppercase; } .stat b { font-size: 1.25rem; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.375rem; }
.ach { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.ach .ic { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; display: grid; place-items: center; font-size: 1.25rem; background: rgba(255, 255, 255, 0.05); filter: grayscale(1); opacity: 0.5; }
.ach.got .ic { filter: none; opacity: 1; background: linear-gradient(135deg, rgba(255, 200, 69, 0.35), rgba(255, 200, 69, 0.08)); box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.3); }
.ach b { display: block; font-size: 0.75rem; } .ach small { font-size: 0.625rem; color: var(--tx3); } .ach .rw { margin-inline-start: auto; color: var(--gold1); font-size: 0.6875rem; font-weight: 700; }
table.lb { width: 100%; border-collapse: collapse; font-size: 0.75rem; } table.lb th { text-align: start; color: var(--tx3); font-weight: 600; padding: 0.375rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; } table.lb td { padding: 0.4375rem 0.375rem; border-top: 1px solid var(--line); } table.lb tr:nth-child(2) td { color: var(--gold1); font-weight: 700; }
/* season track */
.trk-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.625rem; }
.trk-head .big { font-size: 2.125rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff6d0, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trk-head .xpbar { flex: 1; height: 0.625rem; } .trk-head .xpbar i { background: linear-gradient(90deg, var(--gold3), var(--gold2), #fff6d0); box-shadow: 0 0 0.75rem var(--gold2); }
.track { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.375rem 0.125rem 0.75rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tier { position: relative; flex: none; width: 6rem; height: 9.25rem; border-radius: 0.875rem; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); scroll-snap-align: center; }
.tier .tn2 { font-size: 0.6875rem; color: var(--tx3); font-weight: 700; } .tier .rwd { flex: 1; width: 100%; display: grid; place-items: center; text-align: center; font-size: 0.6875rem; color: var(--tx2); }
.tier .rwd .sw { width: 4rem; height: 2.5rem; border-radius: 0.5625rem; margin: 0 auto 0.25rem; }
.tier .rwd .bigc { font-size: 1.125rem; font-weight: 800; color: var(--gold1); }
.tier.ok { border-color: rgba(255, 200, 69, 0.45); } .tier.claimed { opacity: 0.6; } .tier.leg { border-color: transparent; background: linear-gradient(#151a2a, #151a2a) padding-box, linear-gradient(140deg, #ffe9a8, #ffb636, #ff3fd8, #3ad8ff) border-box; }
.tier .btn { height: 1.625rem; font-size: 0.6875rem; padding: 0 0.625rem; border-radius: 0.5rem; width: 100%; }
.tier.cur { box-shadow: 0 0 0 0.125rem var(--gold2), 0 0 1.25rem rgba(255, 200, 69, 0.4); }
.chain { padding: 0.75rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); margin-bottom: 0.5rem; }
.chain h4 { margin: 0 0 0.5rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.steps { display: flex; gap: 0.375rem; } .steps .stp { flex: 1; padding: 0.5rem; border-radius: 0.625rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); font-size: 0.6875rem; color: var(--tx2); min-height: 3.625rem; position: relative; }
.steps .stp.done { border-color: rgba(43, 227, 139, 0.5); color: #fff; } .steps .stp.cur { border-color: var(--gold2); } .steps .stp .pb { height: 0.1875rem; margin-top: 0.375rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .steps .stp .pb i { display: block; height: 100%; background: var(--gold2); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
#touch { position: absolute; inset: 0; pointer-events: auto; touch-action: none; z-index: 0; }
.h-tl { position: absolute; top: calc(0.5rem + var(--st)); inset-inline-start: calc(0.625rem + var(--sl)); display: flex; align-items: center; gap: 0.5rem; z-index: 3; }
.hbtn { pointer-events: auto; width: 2.375rem; height: 2.375rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(8, 12, 22, 0.55); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); }
.h-score { display: flex; flex-direction: column; padding: 0.25rem 0.75rem; border-radius: 0.75rem; background: rgba(8, 12, 22, 0.55); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); line-height: 1.05; }
.h-score b { font-size: 1.25rem; font-variant-numeric: tabular-nums; } .h-score small { font-size: 0.625rem; color: var(--tx2); }
.h-chip { display: flex; align-items: center; gap: 0.3125rem; height: 1.875rem; padding: 0 0.625rem; border-radius: 0.625rem; background: rgba(8, 12, 22, 0.55); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-chip svg { width: 0.9375rem; height: 0.9375rem; color: var(--red); }
.h-chip.warn { color: #ffb3bb; border-color: rgba(255, 77, 94, 0.6); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .6; } }
.h-mode { position: absolute; top: calc(0.5rem + var(--st)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; z-index: 3; }
.tm-bar { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.125rem; }
.tm-bar .tb { width: 7.5rem; height: 0.625rem; border-radius: 6.1875rem; background: rgba(0, 0, 0, 0.45); overflow: hidden; border: 1px solid var(--line); } .tm-bar .tb i { display: block; height: 100%; transition: width .4s var(--ease); }
.tm-bar .a { color: #6fb8ff; } .tm-bar .b { color: #ff7a87; } .tm-bar .ta i { background: linear-gradient(90deg, #2a7fff, #6fb8ff); margin-inline-start: auto; } .tm-bar .tb2 i { background: linear-gradient(90deg, #ff7a87, #ff2a40); }
.boss-bar { width: min(26.25rem, 50vw); text-align: center; } .boss-bar b { display: block; font-size: 0.75rem; letter-spacing: 0.3em; color: #ff9aa4; text-shadow: 0 0 0.625rem rgba(255, 40, 60, 0.8); }
.boss-bar .hb { display: flex; gap: 0.1875rem; margin-top: 0.1875rem; } .boss-bar .hb i { flex: 1; height: 0.625rem; border-radius: 0.1875rem; background: linear-gradient(180deg, #ff6b6b, #b8001a); box-shadow: 0 0 0.625rem rgba(255, 40, 60, 0.6); transition: opacity .3s, transform .3s; } .boss-bar .hb i.gone { opacity: 0.15; transform: scaleY(0.6); box-shadow: none; }
.boss-bar small { font-size: 0.625rem; color: var(--tx2); }
.mode-pill { padding: 0.25rem 0.75rem; border-radius: 6.1875rem; background: rgba(8, 12, 22, 0.6); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.mode-pill.hot { border-color: var(--gold2); color: var(--gold1); box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.4); }
#h-mini { position: absolute; top: calc(3.25rem + var(--st)); inset-inline-start: calc(0.625rem + var(--sl)); width: 5.75rem; height: 5.75rem; border-radius: 50%; background: rgba(8, 12, 22, 0.45); border: 1px solid var(--line); z-index: 2; }
.h-lb { position: absolute; top: calc(0.5rem + var(--st)); inset-inline-end: calc(0.625rem + var(--sr)); min-width: 9.375rem; padding: 0.375rem 0.5rem; border-radius: 0.75rem; background: rgba(8, 12, 22, 0.5); border: 1px solid var(--line); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); font-size: 0.6875rem; z-index: 3; }
.h-lb div { display: flex; gap: 0.375rem; align-items: center; padding: 1px 0; } .h-lb div i { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; } .h-lb em { font-style: normal; margin-inline-start: auto; color: var(--tx2); font-variant-numeric: tabular-nums; } .h-lb .me { color: var(--gold1); font-weight: 700; } .h-lb b { width: 0.75rem; color: var(--tx3); font-weight: 600; }
.h-lb .crown { width: 0.75rem; height: 0.75rem; color: var(--gold2); }
.h-net { position: absolute; top: calc(3.25rem + var(--st)); left: 50%; transform: translateX(-50%); padding: 0.375rem 0.875rem; border-radius: 6.1875rem; background: rgba(8, 12, 22, 0.75); font-size: 0.75rem; z-index: 4; } .h-net.bad { color: #ffb3bb; }
.h-fps { position: absolute; bottom: calc(0.25rem + var(--sb)); left: 50%; transform: translateX(-50%); font-size: 0.625rem; color: var(--tx3); }
.h-feed { position: absolute; top: calc(9.375rem + var(--st)); inset-inline-end: calc(0.625rem + var(--sr)); display: flex; flex-direction: column; align-items: flex-end; gap: 0.1875rem; font-size: 0.6875rem; }
.h-feed div { padding: 0.1875rem 0.5625rem; border-radius: 0.5rem; background: rgba(8, 12, 22, 0.55); animation: fin .3s; } .h-feed .mine { color: var(--gold1); border: 1px solid rgba(255, 200, 69, 0.4); }
.h-banner { position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%) scale(0.9); padding: 0.5rem 1.375rem; border-radius: 0.875rem; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.06em; text-align: center; background: rgba(8, 12, 22, 0.6); border: 1px solid var(--line2); opacity: 0; transition: opacity .25s, transform .35s var(--spring); white-space: nowrap; z-index: 4; }
.h-banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.h-count { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: 6rem; font-weight: 800; color: #fff; text-shadow: 0 0 2.5rem rgba(255, 200, 69, 0.8), 0 0.375rem 0 rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; z-index: 5; }
.h-count.on { animation: cnt .8s var(--ease) forwards; }
@keyframes cnt { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }
.h-kill { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); text-align: center; opacity: 0; z-index: 5; }
.h-kill b { display: block; font-size: 1.875rem; font-weight: 800; letter-spacing: 0.25em; background: linear-gradient(180deg, #fff, #ffb3bb 60%, #ff2a40); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 0.875rem rgba(255, 40, 60, 0.7)); }
.h-kill small { font-size: 0.75rem; letter-spacing: 0.2em; color: #fff; opacity: .85; }
.h-kill.on { animation: kill 1.6s var(--ease) forwards; }
@keyframes kill { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); letter-spacing: 0.6em; } 15% { opacity: 1; transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-0.625rem); } }
.h-cine { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; z-index: 6; }
.h-cine b { display: block; font-size: 4rem; font-weight: 800; letter-spacing: 0.2em; padding-inline-start: 0.2em; background: linear-gradient(180deg, #fffbe8, #ffd25a 45%, #e08a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1.875rem rgba(255, 190, 40, 0.8)) drop-shadow(0 0.25rem 0 rgba(0, 0, 0, 0.4)); }
.h-cine.lose b { background: linear-gradient(180deg, #fff, #9aa7c0 60%, #4b5670); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0.25rem 1.25rem rgba(0, 0, 0, 0.8)); }
.h-cine small { font-size: 0.8125rem; letter-spacing: 0.35em; text-transform: uppercase; color: #fff; text-shadow: 0 0.125rem 0.625rem #000; }
.h-cine.on { animation: cine 3.4s var(--ease) forwards; }
@keyframes cine { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); filter: blur(0.625rem); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } 85% { opacity: 1; } 100% { opacity: 0; } }
#h-pop { position: absolute; inset: 0; pointer-events: none; }
.pop { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-weight: 800; font-size: 1.125rem; color: #fff; text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.6); animation: popup 1s var(--ease) forwards; white-space: nowrap; }
.pop.kill { color: #ffd0d5; font-size: 1rem; } .pop.mass { color: var(--gold1); }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
#joy { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .15s; z-index: 1; }
#joy.on { opacity: 1; }
#joy .base { position: absolute; width: 7.75rem; height: 7.75rem; left: -3.875rem; top: -3.875rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 70%); border: 1.5px solid rgba(255, 255, 255, 0.24); }
#joy .knob { position: absolute; width: 3.375rem; height: 3.375rem; left: -1.6875rem; top: -1.6875rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18)); box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.4); }
#boost { --bs: 1; --bp: 0.5; position: absolute; pointer-events: auto; z-index: 3; width: calc(5.25rem * var(--bs)); height: calc(5.25rem * var(--bs)); inset-inline-end: calc(1.375rem + var(--sr)); bottom: calc(0.875rem + var(--sb) + (45vh - 5.25rem) * var(--bp)); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, rgba(255, 231, 163, 0.38), rgba(255, 200, 69, 0.12) 60%, rgba(0, 0, 0, 0.25)); border: 0.125rem solid rgba(255, 231, 163, 0.6); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 1.375rem rgba(255, 200, 69, 0.25); transition: transform .12s var(--spring), background .15s; touch-action: none; }
#boost svg { width: calc(2.125rem * var(--bs)); height: calc(2.125rem * var(--bs)); fill: var(--gold1); stroke: none; filter: drop-shadow(0 0 0.5rem rgba(255, 200, 69, 0.9)); }
#boost.on { background: radial-gradient(circle at 40% 30%, rgba(255, 231, 163, 0.8), rgba(255, 200, 69, 0.5) 60%, rgba(150, 90, 0, 0.4)); box-shadow: 0 0 2.125rem rgba(255, 200, 69, 0.7); }
html.lefty #boost { inset-inline-end: auto; inset-inline-start: calc(1.375rem + var(--sl)); }
html.lefty #h-mini { inset-inline-start: auto; inset-inline-end: calc(0.625rem + var(--sr)); top: auto; bottom: calc(6.875rem + var(--sb)); }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(2, 4, 10, 0.55); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); animation: fin .15s; padding: 0.625rem; }
.mcard { width: min(23.75rem, 92vw); padding: 1.125rem; display: flex; flex-direction: column; gap: 0.5625rem; animation: mpop .15s ease-out; max-height: 96vh; overflow-y: auto; }
@keyframes mpop { from { opacity: 0; } }
.mcard h2 { margin: 0 0 0.25rem; text-align: center; letter-spacing: 0.08em; }
.results { width: min(35rem, 94vw); gap: 0.4375rem; }
.r-head { text-align: center; } .r-head h2 { font-size: 1.625rem; background: linear-gradient(180deg, #fff, #ffd25a); -webkit-background-clip: text; background-clip: text; color: transparent; } .r-head p { margin: 0; color: var(--tx2); font-size: 0.75rem; }
.results.win { box-shadow: 0 0 0 1px rgba(255, 200, 69, 0.5), 0 0 3.75rem rgba(255, 180, 40, 0.3), 0 1.125rem 2.5rem rgba(0, 0, 0, 0.5); }
.r-best { display: inline-block; margin-top: 0.25rem; padding: 0.1875rem 0.75rem; border-radius: 6.1875rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.2em; color: #2a1800; background: linear-gradient(90deg, #ffe9a8, #ffb636, #ffe9a8); background-size: 200% 100%; animation: shimmer 2s linear infinite; }
.r-score { text-align: center; font-size: 2.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 1.5rem rgba(255, 200, 69, 0.35); }
.r-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.r-grid div { padding: 0.4375rem; border-radius: 0.6875rem; background: rgba(255, 255, 255, 0.05); text-align: center; animation: rin .5s var(--spring) backwards; } .r-grid div:nth-child(2) { animation-delay: .06s; } .r-grid div:nth-child(3) { animation-delay: .12s; } .r-grid div:nth-child(4) { animation-delay: .18s; }
.r-grid small { display: block; font-size: 0.625rem; color: var(--tx3); letter-spacing: 0.1em; text-transform: uppercase; } .r-grid b { font-size: 1.0625rem; }
@keyframes rin { from { opacity: 0; } }
.r-xp { display: grid; grid-template-columns: auto 1fr; gap: 0.1875rem 0.625rem; align-items: center; font-size: 0.75rem; } .r-gain { grid-column: 1 / -1; color: var(--gold1); font-size: 0.6875rem; }
.r-extra { display: flex; flex-wrap: wrap; gap: 0.3125rem; } .r-extra span { padding: 0.1875rem 0.5625rem; border-radius: 6.1875rem; font-size: 0.625rem; background: rgba(255, 200, 69, 0.12); color: var(--gold1); border: 1px solid rgba(255, 200, 69, 0.3); animation: rin .5s var(--spring) backwards; }
.r-btns { display: flex; gap: 0.5rem; } .r-btns .btn { flex: 1; }
.tut canvas { width: 100%; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.35); } #t-text { margin: 0; text-align: center; font-size: 0.8125rem; }
.dots { display: flex; gap: 0.375rem; justify-content: center; } .dots i { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .dots i.on { background: var(--gold2); }
#cf-text { margin: 0; text-align: center; }
/* rarity reveal */
#m-reveal { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(1.125rem + var(--st)) 0 calc(1rem + var(--sb)); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.75) 80%); animation: fin .4s; pointer-events: auto; }
.rv-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 200, 80, 0.13) 0deg 6deg, transparent 6deg 18deg); animation: spin 18s linear infinite; mask: radial-gradient(circle, #000 10%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); pointer-events: none; }
#m-reveal.r-epic .rv-rays { background: repeating-conic-gradient(rgba(180, 92, 255, 0.15) 0deg 6deg, transparent 6deg 18deg); }
.rv-card { position: relative; text-align: center; animation: rvin 1s var(--spring); }
.rv-rar { font-size: 0.875rem; letter-spacing: 0.6em; font-weight: 800; padding-inline-start: 0.6em; background: linear-gradient(90deg, #ffe9a8, #ffb636, #fff, #ffb636, #ffe9a8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2s linear infinite; }
.rv-name { font-size: 2.625rem; font-weight: 800; letter-spacing: 0.05em; text-shadow: 0 0 1.875rem rgba(255, 180, 40, 0.6), 0 0.25rem 0 rgba(0, 0, 0, 0.4); }
.rv-sub { color: var(--tx2); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.rv-btns { position: relative; display: flex; gap: 0.625rem; animation: fin 1.4s; }
@keyframes rvin { 0% { opacity: 0; transform: scale(2.4); filter: blur(0.75rem); } 60% { opacity: 1; filter: blur(0); } }
/* toasts */
#toasts { position: fixed; top: calc(3.5rem + var(--st)); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1rem; border-radius: 0.8125rem; font-size: 0.8125rem; font-weight: 600; background: linear-gradient(160deg, rgba(30, 40, 66, 0.9), rgba(10, 14, 26, 0.92)); border: 1px solid var(--line2); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35); animation: tin .4s var(--ease); max-width: 86vw; }
.toast.good { border-color: rgba(43, 227, 139, 0.55); } .toast.gold { border-color: rgba(255, 200, 69, 0.65); color: var(--gold1); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35); } .toast.warn { border-color: rgba(255, 77, 94, 0.6); }
.toast.out { opacity: 0; transform: translateY(-0.625rem) scale(0.95); transition: opacity .3s, transform .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(-0.875rem) scale(0.9); } }

/* ---------- compact landscape phones ---------- */
@media (max-height: 430px) {
  .screen { padding-top: calc(0.375rem + var(--st)); padding-bottom: calc(0.375rem + var(--sb)); }
  .lobby-body { grid-template-columns: 13rem 1fr 13.125rem; gap: 0.5rem; }
  .mode { padding: 0.25rem 0.375rem; } .mode .mi { width: 1.875rem; height: 1.875rem; } .mode small { max-width: 8.25rem; }
  .play { height: 3.5rem; min-width: 11.625rem; } .play b { font-size: 1.3125rem; }
  .wm .w1, .wm .w2 { font-size: 2rem; } .wm.big .w1, .wm.big .w2 { font-size: 3rem; } .logo img { width: 3.25rem; height: 3.25rem; }
  .auth-card { width: 18.75rem; padding: 0.75rem; gap: 0.4375rem; } .auth-card input { height: 2.375rem; } .btn.xl { height: 2.875rem; font-size: 1rem; }
  .results { padding: 0.75rem; } .r-score { font-size: 2.125rem; }
  .dk { width: 3.5rem; font-size: 0.625rem; }
  .pc-track .tn { height: 1.5rem; }
  .h-cine b { font-size: 3rem; } .h-count { font-size: 4.75rem; }
  .tier { width: 5.375rem; height: 8.375rem; }
}
@media (max-width: 760px) { .lobby-body { grid-template-columns: 12.25rem 1fr 0; } .col-r { display: none; } }

body.revealing .screen { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.35s ease; }
#hud.cine > :not(.h-cine):not(#h-pop) { opacity: 0 !important; transition: opacity 0.4s ease; pointer-events: none; }

/* ---- in-match features: power-up chips, combo, mission toasts, hints, spectate, kill feed, KOTH meter ---- */
.h-pu { position: absolute; top: calc(3.375rem + var(--st)); inset-inline-start: calc(6.875rem + var(--sl)); display: flex; flex-wrap: wrap; max-width: 34vw; gap: 0.375rem; z-index: 3; pointer-events: none; }
html.lefty .h-pu { inset-inline-start: calc(0.625rem + var(--sl)); }
.pu-chip { position: relative; display: flex; align-items: center; gap: 0.25rem; height: 1.875rem; padding: 0 0.625rem 0 0.375rem; border-radius: 6.1875rem; background: rgba(8, 12, 22, 0.82); border: 1.5px solid var(--c); box-shadow: 0 0 0.875rem color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 0.625rem color-mix(in srgb, var(--c) 25%, transparent); font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; animation: puIn .35s var(--spring); }
.pu-chip::after { content: ""; position: absolute; left: 0; bottom: 0; height: 0.1875rem; width: calc(var(--f) * 100%); background: var(--c); transition: width .25s linear; }
.pu-chip i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c); } .pu-chip svg { width: 0.875rem; height: 0.875rem; fill: #0a0c18; stroke: none; }
.pu-chip span { color: #fff; }
.pu-chip.end { animation: blink .4s infinite; } .pu-chip.bad { border-style: dashed; }
@keyframes puIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#pu-flash { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; box-shadow: inset 0 0 7.5rem var(--c, #fff); }
#pu-flash.on { animation: puF .7s ease-out; }
@keyframes puF { 0% { opacity: 1; } 100% { opacity: 0; } }
#frost-vig { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at center, transparent 45%, rgba(150, 230, 255, 0.45) 100%); box-shadow: inset 0 0 5.625rem rgba(170, 240, 255, 0.7); }
#frost-vig.on { opacity: 1; }
.h-combo { position: absolute; top: 36%; inset-inline-end: calc(18% + var(--sr)); text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 4; }
.h-combo.on { opacity: 1; }
.h-combo b { display: block; font-size: 1.625rem; font-weight: 900; letter-spacing: 0.08em; background: linear-gradient(180deg, #fff, #ffe08a 50%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 0.625rem rgba(255, 160, 0, 0.8)); }
.h-combo small { font-size: 0.6875rem; color: var(--tx2); letter-spacing: 0.2em; }
.h-combo.pump b { animation: pump .35s var(--spring); }
@keyframes pump { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
.pop.gain { font-size: 0.9375rem; color: #e8ffe9; } .pop.gain.hot { color: #ffd36a; font-size: 1.0625rem; }
.pop.pu { font-size: 1.25rem; color: #fff; text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.8), 0 0.125rem 0.375rem #000; animation-duration: 1.4s; }
.pop.rank { font-size: 1.125rem; color: var(--gold1); text-shadow: 0 0 0.75rem rgba(255, 200, 69, 0.7), 0 0.125rem 0.375rem #000; animation-duration: 1.6s; }
.h-mission { position: absolute; bottom: calc(0.875rem + var(--sb)); left: 50%; transform: translate(-50%, 1.25rem); min-width: 13.75rem; max-width: 60vw; padding: 0.4375rem 0.875rem 0.5625rem; border-radius: 0.875rem; background: rgba(8, 12, 22, 0.78); border: 1px solid var(--line2); opacity: 0; transition: opacity .3s, transform .4s var(--spring); pointer-events: none; z-index: 4; display: grid; grid-template-columns: 1fr auto; column-gap: 0.625rem; align-items: center; }
.h-mission.on { opacity: 1; transform: translate(-50%, 0); }
.h-mission small { grid-column: 1 / -1; font-size: 0.625rem; letter-spacing: 0.25em; color: var(--tx2); text-transform: uppercase; }
.h-mission b { font-size: 0.8125rem; } .h-mission em { font-style: normal; font-size: 0.75rem; color: var(--tx2); font-variant-numeric: tabular-nums; }
.h-mission .mbar { grid-column: 1 / -1; height: 0.3125rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 0.25rem; } .h-mission .mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold1)); }
.h-mission.done { border-color: var(--gold2); box-shadow: 0 0 1.5rem rgba(255, 200, 69, 0.45); } .h-mission.done b { color: var(--gold1); }
.h-hint { position: absolute; bottom: calc(6.875rem + var(--sb)); left: 50%; transform: translateX(-50%); max-width: 56vw; padding: 0.4375rem 0.875rem; border-radius: 0.75rem; background: rgba(8, 12, 22, 0.72); border: 1px dashed rgba(255, 255, 255, 0.3); font-size: 0.8125rem; text-align: center; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 4; }
.h-hint.on { opacity: 1; }
.h-spec { position: absolute; bottom: calc(1rem + var(--sb)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.5rem 0.375rem 1rem; border-radius: 6.1875rem; background: rgba(8, 12, 22, 0.78); border: 1px solid var(--line2); z-index: 6; pointer-events: auto; font-weight: 700; }
.h-spec .btn { pointer-events: auto; padding: 0.375rem 0.875rem; min-height: 0; }
#hud.watch #joy, #hud.watch #boost, #hud.watch .h-pu, #hud.watch .h-combo { display: none; }
.h-feed div b { font-weight: 800; } .h-feed div i { font-style: normal; color: #ff6b78; margin: 0 0.1875rem; } .h-feed .dead { color: #ffb3bb; border: 1px solid rgba(255, 77, 94, 0.5); }
.mode-pill.koth { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; min-width: 10.625rem; }
.mode-pill.contest { border-color: #ff4d5e; color: #ffb3bb; animation: blink .6s infinite; }
.mode-pill .cap { width: 100%; height: 0.375rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .mode-pill .cap i { display: block; height: 100%; background: linear-gradient(90deg, #ffb000, #ffe7a3); box-shadow: 0 0 0.5rem rgba(255, 200, 69, 0.8); transition: width .25s linear; }
.r-season { margin-top: 0.25rem; font-size: 0.75rem; color: #c9b8ff; }

/* ---- iOS touch hardening: no double-tap / pinch zoom, no selection, callout or rubber-band during play ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
#gl, canvas, #hud, #touch, #boost, #joy { touch-action: none; }
button, .btn, a, label, select, [role="button"], .item, .tab, .mode, .sw, .hbtn { touch-action: manipulation; }
#hud, #hud * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ---- HUD layout: kill feed top-centre under the mode/timer strip, clear of the joystick, boost and minimap ---- */
.h-feed { top: var(--feedT, calc(2.75rem + var(--st))); left: 50%; right: auto; inset-inline-end: auto; transform: translateX(-50%); align-items: center; max-width: min(46vw, 26.25rem); z-index: 3; pointer-events: none; }
.h-feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.h-kill { top: max(17%, calc(var(--feedB, 0px) + 0.875rem)); }
.h-banner { top: max(28%, calc(var(--feedB, 0px) + 1.875rem)); }
/* leaderboard always fully below the top inset / Safari bar; trimmed above the boost button by Hud.layout() */
.h-lb { top: max(0.5rem, calc(0.375rem + var(--st))); overflow: hidden; }
.h-tl, .h-mode { top: max(0.5rem, calc(0.375rem + var(--st))); }
#h-mini { top: max(3.25rem, calc(3.125rem + var(--st))); }
html.lefty #h-mini { inset-inline-start: calc(0.625rem + var(--sl)); inset-inline-end: auto; top: max(3.25rem, calc(3.125rem + var(--st))); bottom: auto; }
@media (max-height: 500px) {
  .h-feed { font-size: 0.625rem; gap: 0.125rem; } .h-feed div { padding: 0.125rem 0.4375rem; border-radius: 0.375rem; }
  .h-feed div:nth-child(n+4) { display: none; }
  .h-lb { font-size: 0.625rem; min-width: 8rem; padding: 0.25rem 0.4375rem; } .h-lb div { padding: 0; }
}
/* redeem code row (Settings → Account) */
.set-row.redeem { flex-wrap: wrap; } .set-row .rd-box { flex-direction: row; align-items: center; gap: 0.5rem; flex: 1 1 13.75rem; justify-content: flex-end; }
.rd-box input { flex: 1 1 7.5rem; min-width: 0; max-width: 13.75rem; height: 2.375rem; padding: 0 0.75rem; border-radius: 0.625rem; border: 1px solid var(--line2); background: rgba(0, 0, 0, 0.35); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; touch-action: manipulation; }
.rd-box input::placeholder { text-transform: none; letter-spacing: 0; color: var(--tx3); }
.rd-box .btn { flex: none; }

/* =====================================================================================================
   M2 lobby: one place for everything. Top bar: profile card · season chip · coins · bell · settings.
   Grid: modes (left, full height, scroll + fade hint) | showcase + single Locker | daily missions + rewards | worlds + Play
   ===================================================================================================== */
.lobby-body { display: grid; grid-template-columns: 13.25rem minmax(0, 1fr) 14.75rem; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "modes show side" "modes foot foot"; gap: 0.5rem 0.625rem; }
.col-l { grid-area: modes; position: relative; min-height: 0; padding: 0; overflow: hidden; display: block; }
.col-l .modes { height: 100%; padding: 0.375rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.mfade { position: absolute; left: 1px; right: 1px; height: 1.875rem; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 2; border-radius: inherit; display: grid; place-items: end center; }
.mfade.top { top: 1px; background: linear-gradient(180deg, rgba(14, 19, 34, 0.98), transparent); border-radius: var(--r) var(--r) 0 0; }
.mfade.bot { bottom: 1px; background: linear-gradient(0deg, rgba(14, 19, 34, 0.98) 25%, transparent); border-radius: 0 0 var(--r) var(--r); }
.mfade.bot svg { width: 1rem; height: 1rem; color: var(--gold1); margin-bottom: 0.125rem; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(0.1875rem); } }
.col-l.can-up .mfade.top, .col-l.can-down .mfade.bot { opacity: 1; }
.mode { padding: 0.375rem 0.5rem; min-height: 2.75rem; }
.mode b { font-size: 0.8125rem; line-height: 1.15; } .mode small { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; font-size: 0.6562rem; line-height: 1.2; color: var(--tx2); }
.mode .new { top: 0.3125rem; }
.mode > span:nth-child(2) { min-width: 0; padding-inline-end: 1.875rem; }
.col-c { grid-area: show; min-width: 0; }
.col-r { grid-area: side; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.side { flex: 1 1 auto; min-height: 0; padding: 0.5rem 0.5625rem; overflow-y: auto; }
.side h3 { margin: 0 0 0.3125rem; align-items: baseline; }
.mis { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.5rem; padding: 0.375rem 0.5rem 0.5625rem; margin-bottom: 0.25rem; }
.mis > span:first-child { white-space: normal; line-height: 1.2; font-size: 0.6875rem; }
.mis .rw, .mis .claim { white-space: nowrap; }
.rw-row { display: flex; gap: 0.375rem; flex: none; }
.rwb { flex: 1; display: flex; align-items: center; gap: 0.375rem; height: 2.375rem; padding: 0 0.5rem; border-radius: 0.75rem; font-size: 0.6875rem; font-weight: 700; text-align: start; line-height: 1.1; }
.rwb svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--gold2); } .rwb span { min-width: 0; }
.rwb .dot { top: 0.3125rem; inset-inline-end: 0.3125rem; }
.rwb.ready { border-color: rgba(255, 200, 69, 0.6); box-shadow: 0 0 1rem rgba(255, 200, 69, 0.25); }
.playbox { grid-area: foot; margin: 0; justify-content: flex-end; align-self: end; min-width: 0; }
.room { display: flex; gap: 0.375rem; align-items: center; width: 15rem; } .room input { flex: 1; min-width: 0; } .room .icon-btn { width: 2.125rem; height: 2rem; flex: none; }
.room .icon-btn svg { width: 1.0625rem; height: 1.0625rem; }
/* top bar */
.topbar { gap: 0.5rem; }
.prof { height: 2.75rem; padding: 0 0.625rem 0 0.25rem; gap: 0.5rem; max-width: 18.75rem; }
.prof .pinfo { min-width: 6.5rem; gap: 1px; } .prof .pinfo b { font-size: 0.8125rem; max-width: 9.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prof .pinfo small { color: var(--gold1); font-size: 0.625rem; letter-spacing: 0.04em; white-space: nowrap; }
.lvrow { display: flex; align-items: center; gap: 0.375rem; width: 100%; } .lvrow em { font-style: normal; font-size: 0.625rem; color: var(--tx2); white-space: nowrap; } .lvrow .xpbar { flex: 1; min-width: 2.5rem; }
.prk:empty { display: none; }
.chip.season { height: 2.375rem; padding: 0 0.75rem 0 0.375rem; gap: 0.4375rem; } .chip.season b { font-size: 0.75rem; white-space: nowrap; } .chip.season .dot { top: 0.1875rem; inset-inline-end: 0.1875rem; }
/* avatars + frames */
.ava { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; --fw: 0.125rem; --fc: rgba(255, 255, 255, 0.25); }
.ava img, .ava .avf { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; box-shadow: 0 0 0 var(--fw) var(--fc), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5); background: #0b1020; }
.ava .avf b { font-size: 60%; line-height: 1; filter: drop-shadow(0 1px 0.125rem rgba(0, 0, 0, 0.6)); }
.ava.s { width: 1.125rem; height: 1.125rem; --fw: 1.5px; } .ava.m { width: 2.25rem; height: 2.25rem; } .ava.l { width: 5.25rem; height: 5.25rem; --fw: 0.25rem; } .ava.xl { width: 3.625rem; height: 3.625rem; --fw: 0.1875rem; }
.ava.s .avf b { font-size: 0.6875rem; } .ava.m .avf b { font-size: 1.25rem; } .ava.l .avf b { font-size: 2.875rem; } .ava.xl .avf b { font-size: 2rem; }
.ava.fr-bronze { --fc: #cd7f45; } .ava.fr-silver { --fc: #dfe6f0; } .ava.fr-gold { --fc: #ffc845; }
.ava.fr-gold img, .ava.fr-gold .avf { box-shadow: 0 0 0 var(--fw) var(--fc), 0 0 0.75rem rgba(255, 200, 69, 0.6); }
.ava.fr-diamond { --fc: #9fe8ff; } .ava.fr-diamond img, .ava.fr-diamond .avf { box-shadow: 0 0 0 var(--fw) #9fe8ff, 0 0 0 calc(var(--fw) * 2) rgba(58, 124, 255, 0.6), 0 0 0.875rem rgba(120, 220, 255, 0.7); }
.ava.fr-legend::before, .ava.fr-season::before { content: ""; position: absolute; inset: calc(var(--fw) * -1.6); border-radius: 50%; background: conic-gradient(from var(--fa, 0deg), #ffe9a8, #ffb636, #ff3fd8, #3ad8ff, #ffe9a8); animation: frs 3s linear infinite; z-index: -1; }
.ava.fr-season::before { background: conic-gradient(from var(--fa, 0deg), #c9b8ff, #7a4dff, #fff, #ffc845, #c9b8ff); }
.ava.fr-legend img, .ava.fr-legend .avf, .ava.fr-season img, .ava.fr-season .avf { box-shadow: 0 0 0.875rem rgba(255, 140, 60, 0.6); }
.ava { isolation: isolate; }
@keyframes frs { to { transform: rotate(360deg); } }

/* cos1: eight new frames (static rings; flame and babylon get a slow sheen, off in calm mode) */
.ava.fr-emerald img, .ava.fr-emerald .avf { box-shadow: 0 0 0 var(--fw) #1b9e5a, 0 0 0 calc(var(--fw) * 1.8) #b8ffcf, 0 0 0 calc(var(--fw) * 2.4) #0b5a33, 0 0 0.75rem rgba(47, 210, 122, 0.45); }
.ava.fr-ruby img, .ava.fr-ruby .avf { box-shadow: 0 0 0 var(--fw) #c4102e, 0 0 0 calc(var(--fw) * 1.7) #ffd1d9, 0 0 0 calc(var(--fw) * 2.2) #6a0716, 0 0 1rem rgba(255, 40, 80, 0.5); }
.ava.fr-ruby::after, .ava.fr-ice::after, .ava.fr-babylon::after { content: ""; position: absolute; inset: calc(var(--fw) * -2.2); border-radius: 50%; pointer-events: none; }
.ava.fr-ruby::after { background: radial-gradient(circle at 50% 0, #ff8aa0 0 4%, #c4102e 4.5% 6%, transparent 6.5%), radial-gradient(circle at 50% 100%, #ff8aa0 0 4%, #c4102e 4.5% 6%, transparent 6.5%), radial-gradient(circle at 0 50%, #ff8aa0 0 4%, #c4102e 4.5% 6%, transparent 6.5%), radial-gradient(circle at 100% 50%, #ff8aa0 0 4%, #c4102e 4.5% 6%, transparent 6.5%); }
.ava.fr-babylon::before, .ava.fr-flame::before, .ava.fr-ice::before, .ava.fr-sakura::before { content: ""; position: absolute; inset: calc(var(--fw) * -1.8); border-radius: 50%; z-index: -1; }
.ava.fr-babylon::before { background: repeating-conic-gradient(from var(--fa, 0deg), #1f4fa8 0 13deg, #e9c46a 13deg 15deg); animation: frs 24s linear infinite; }
.ava.fr-babylon img, .ava.fr-babylon .avf { box-shadow: 0 0 0 0.125rem #e9c46a, 0 0 0.875rem rgba(58, 124, 255, 0.5); }
.ava.fr-babylon::after { background: radial-gradient(circle at 50% 2%, #fff1b0 0 3%, #e9c46a 3.5% 6%, transparent 6.5%); }
.ava.fr-flame::before { background: conic-gradient(from var(--fa, 0deg), #ff2a00, #ffb000, #ff6a00, #ffd84a, #ff2a00, #ff8a00, #ff2a00); animation: frs 9s linear infinite; }
.ava.fr-flame img, .ava.fr-flame .avf { box-shadow: 0 0 0 0.125rem #3a0a00, 0 0 1.125rem rgba(255, 110, 0, 0.65); }
.ava.fr-ice::before { background: repeating-conic-gradient(#e9fbff 0 10deg, #7fd3ff 10deg 20deg); }
.ava.fr-ice img, .ava.fr-ice .avf { box-shadow: 0 0 0 0.125rem #fff, 0 0 1rem rgba(140, 220, 255, 0.65); }
.ava.fr-ice::after { background: radial-gradient(circle at 15% 15%, #fff 0 4%, transparent 5%), radial-gradient(circle at 85% 15%, #fff 0 4%, transparent 5%), radial-gradient(circle at 50% 98%, #dff6ff 0 3.5%, transparent 4.5%); }
.ava.fr-obsidian img, .ava.fr-obsidian .avf { box-shadow: 0 0 0 var(--fw) #120f1a, 0 0 0 calc(var(--fw) * 1.6) #9b3dff, 0 0 0 calc(var(--fw) * 2.1) #120f1a, 0 0 1.125rem rgba(155, 61, 255, 0.5); }
.ava.fr-tigris img, .ava.fr-tigris .avf { box-shadow: 0 0 0 var(--fw) #0b5563, 0 0 0 calc(var(--fw) * 1.6) #2ec4b6, 0 0 0 calc(var(--fw) * 2.2) #cbf3f0, 0 0 0.75rem rgba(46, 196, 182, 0.45); }
.ava.fr-sakura::before { background: repeating-conic-gradient(#ffd1e6 0 18deg, #ff6fae 18deg 24deg); }
.ava.fr-sakura img, .ava.fr-sakura .avf { box-shadow: 0 0 0 0.125rem #fff, 0 0 0.75rem rgba(255, 111, 174, 0.45); }
html.calm .ava.fr-babylon::before, html.calm .ava.fr-flame::before { animation: none; }

/* anim1: everything alive, calmly. Frames: a light glint orbits the ring; rotating rings turn slowly. Badges and medals: a shine sweeps across.
   Locker swatches: a sheen glides over. All transform/position only, no flashing; html.calm (Reduce effects) stops it. */
.ava:not(.s):is(.fr-bronze, .fr-silver, .fr-gold, .fr-diamond, .fr-emerald, .fr-ruby, .fr-obsidian, .fr-tigris)::before { content: ""; position: absolute; inset: calc(var(--fw) * -2.4); border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(transparent 0 290deg, rgba(255, 255, 255, 0) 290deg, rgba(255, 255, 255, 0.9) 332deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--fw) * 2.5), #000 calc(100% - var(--fw) * 2.3)); mask: radial-gradient(closest-side, transparent calc(100% - var(--fw) * 2.5), #000 calc(100% - var(--fw) * 2.3));
  mix-blend-mode: screen; animation: frs 4.2s linear infinite; }
.ava.fr-diamond::before { animation-duration: 3.4s; } .ava.fr-gold::before { animation-duration: 3.8s; } .ava.fr-obsidian::before { animation-duration: 5.5s; } .ava.fr-tigris::before { animation-duration: 5s; animation-direction: reverse; }
.ava.fr-ice::before { animation: frs 22s linear infinite; } .ava.fr-sakura::before { animation: frs 26s linear infinite reverse; }
.ava.fr-ruby::after, .ava.fr-ice::after { animation: frs 30s linear infinite; }
.rkb { position: relative; }
.rkb::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.8) 50%, transparent 62%) no-repeat; background-size: 260% 100%; animation: shine 3.8s ease-in-out infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mix-blend-mode: screen; }
.rkb.s::after { display: none; }
.ach.got .ic { position: relative; overflow: hidden; }
.ach.got .ic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 200, 0.7) 50%, transparent 62%) no-repeat; background-size: 260% 100%; animation: shine 4.6s ease-in-out infinite; }
.ach.got:nth-child(3n + 2) .ic::after { animation-delay: 1.5s; } .ach.got:nth-child(3n) .ic::after { animation-delay: 3s; }
.item .sw { position: relative; overflow: hidden; }
.item .sw::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%) no-repeat; background-size: 280% 100%; animation: shine 5s ease-in-out infinite; }
.item:nth-child(4n + 2) .sw::after { animation-delay: 1.2s; } .item:nth-child(4n + 3) .sw::after { animation-delay: 2.4s; } .item:nth-child(4n) .sw::after { animation-delay: 3.6s; }
@keyframes shine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
html.calm .ava::before, html.calm .ava::after, html.calm .rkb::after, html.calm .ach .ic::after, html.calm .item .sw::after { animation: none; }
html.calm .rkb::after, html.calm .ach .ic::after, html.calm .item .sw::after { display: none; }
html.rm .ava::before { animation: none; }
/* ranked badge */
.rkb { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; } .rkb.s { width: 1rem; height: 1rem; }
.rkb svg { width: 100%; height: 100%; } .rkb svg path:first-child { fill: var(--b); stroke: var(--a); stroke-width: 1.6; } .rkb svg .st { fill: var(--a); stroke: none; }
/* profile screen */
.pr-hero { position: relative; display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; border-radius: 1rem; overflow: hidden; border: 1px solid var(--line2); margin-bottom: 0.625rem; }
.pr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 13, 0.82), rgba(5, 7, 13, 0.35)); z-index: 0; }
html[dir="rtl"] .pr-hero::after { background: linear-gradient(270deg, rgba(5, 7, 13, 0.82), rgba(5, 7, 13, 0.35)); }
.pr-hero > * { position: relative; z-index: 1; }
.pr-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.pr-id .nm { font-size: 1.375rem; font-weight: 800; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-id .tt { color: var(--gold1); font-size: 0.75rem; letter-spacing: 0.08em; }
.pr-id .xpbar { height: 0.4375rem; max-width: 20rem; } .pr-id small { font-size: 0.6875rem; color: var(--tx2); }
.pr-rank { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; font-size: 0.6875rem; color: var(--tx2); text-align: center; min-width: 4.625rem; } .pr-rank b { color: #fff; font-size: 0.8125rem; } .pr-rank .rkb { width: 2.5rem; height: 2.5rem; }
.pr-name { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.625rem; } .pr-name input { max-width: 16.25rem; font-size: 1rem; } .pr-name label { font-size: 0.75rem; color: var(--tx2); white-space: nowrap; }
.pr-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
.pr-pins .ach { min-height: 3.25rem; } .pr-pins .empty { display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: 0.75rem; color: var(--tx3); font-size: 0.6875rem; padding: 0.5rem; text-align: center; min-height: 3.25rem; }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: 0.5rem; }
.avc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem 0.375rem; border-radius: 0.8125rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 0.625rem; color: var(--tx3); text-align: center; line-height: 1.15; min-height: 5.75rem; }
.avc.on { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 0 1rem rgba(255, 200, 69, 0.35); color: var(--gold1); }
.avc.lock .ava { filter: grayscale(0.9) brightness(0.45); } .avc .lki { position: absolute; top: 1.875rem; left: 50%; transform: translateX(-50%); } .avc .lki svg { width: 1rem; height: 1rem; }
.avc b { color: var(--ink); font-size: 0.6875rem; }
.ttl { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.5625rem 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); margin-bottom: 0.375rem; width: 100%; text-align: start; }
.ttl b { font-size: 0.875rem; color: var(--gold1); } .ttl small { font-size: 0.6875rem; color: var(--tx3); } .ttl.on { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2); } .ttl.lock b { color: var(--tx3); }
.bngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem; }
.bnc { position: relative; height: 4.375rem; border-radius: 0.8125rem; border: 1px solid var(--line2); overflow: hidden; display: flex; align-items: flex-end; padding: 0.375rem 0.5625rem; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 0.25rem #000; }
.bnc small { display: block; font-weight: 500; font-size: 0.625rem; color: var(--tx2); } .bnc.on { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 0 1rem rgba(255, 200, 69, 0.35); } .bnc.lock { filter: grayscale(0.85) brightness(0.55); }
.ach.pin { border-color: var(--gold2); } .ach .pn { margin-inline-start: 0.375rem; font-size: 0.875rem; opacity: 0.35; } .ach.pin .pn { opacity: 1; }
table.hist td, table.hist th { white-space: nowrap; } table.hist .w { color: var(--green); font-weight: 700; } table.hist .l { color: var(--tx3); } table.hist tr:nth-child(2) td { color: inherit; font-weight: inherit; }
/* rewards modals */
.mclose { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; width: 2rem; height: 2rem; z-index: 2; } .mclose svg { width: 1rem; height: 1rem; }
.lgc { width: min(35rem, 94vw); position: relative; } .lgc p.fine { text-align: center; margin-top: -0.25rem; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.375rem; }
.cal .cd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.125rem; height: 5.125rem; padding: 0.375rem 0.125rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 0.625rem; color: var(--tx2); }
.cal .cd b { font-size: 0.8125rem; color: var(--gold1); } .cal .cd .coin { width: 1.25rem; height: 1.25rem; } .cal .cd .gift { font-size: 1.25rem; line-height: 1; }
.cal .cd.got { opacity: 0.55; } .cal .cd.got::after { content: "✓"; position: absolute; top: 0.125rem; inset-inline-end: 0.375rem; color: var(--green); font-weight: 900; }
.cal .cd.today { border-color: var(--gold2); box-shadow: 0 0 0 1px var(--gold2), 0 0 1.125rem rgba(255, 200, 69, 0.35); color: #fff; animation: breathe 2s ease-in-out infinite; }
.cal .cd.d7 { background: linear-gradient(160deg, rgba(255, 182, 54, 0.25), rgba(255, 63, 216, 0.15)); }
.spc { width: min(37.5rem, 96vw); flex-direction: row; align-items: center; gap: 1rem; position: relative; }
.sp-wrap { position: relative; width: min(15.625rem, 60vh); aspect-ratio: 1; flex: none; }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 0.25rem solid rgba(255, 220, 140, 0.85); box-shadow: 0 0 1.875rem rgba(255, 190, 50, 0.35), inset 0 0 1.25rem rgba(0, 0, 0, 0.5); transition: transform 4.2s cubic-bezier(.12, .7, .1, 1); overflow: hidden; }
.wheel .sg { position: absolute; left: 50%; top: 50%; width: 46%; height: 0; transform-origin: 0 0; font-weight: 800; font-size: 0.75rem; color: #fff; text-shadow: 0 1px 0.1875rem #000; }
.wheel .sg span { position: absolute; inset-inline-start: 34%; top: -0.5625rem; white-space: nowrap; display: flex; align-items: center; gap: 0.1875rem; }
html[dir="rtl"] .wheel .sg span { inset-inline-start: auto; left: 34%; }
.sp-pin { position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 0.75rem solid transparent; border-right: 0.75rem solid transparent; border-top: 1.375rem solid var(--gold2); filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6)); z-index: 2; }
.sp-hub { position: absolute; left: 50%; top: 50%; width: 2.625rem; height: 2.625rem; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: #2a1800; background: radial-gradient(circle at 35% 30%, #fff6d0, var(--gold2) 60%, var(--gold3)); box-shadow: 0 0 0.875rem rgba(255, 200, 69, 0.7); z-index: 2; }
.sp-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .sp-side h2 { text-align: start; }
.sp-res { min-height: 1.25rem; margin: 0; font-weight: 800; color: var(--gold1); font-size: 0.9375rem; }
html.rm .wheel { transition-duration: .3s; }
/* results: who played */
.r-who { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.625rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.r-who .who { flex: 1; min-width: 0; display: flex; flex-direction: column; } .r-who b { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r-who small { font-size: 0.625rem; color: var(--gold1); }
.r-who .rp { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 800; } .r-who .rp.up { color: var(--green); } .r-who .rp.dn { color: #ff8a96; }
/* HUD leaderboard: own row carries the avatar */
.h-lb div .ava.s { margin-inline-end: -0.125rem; }
/* HUD emotes */
#h-emo { position: absolute; z-index: 3; inset-inline-end: calc(7.375rem * var(--bs, 1) + 0.75rem + var(--sr)); bottom: calc(1.125rem + var(--sb)); width: 2.5rem; height: 2.5rem; border-radius: 50%; }
html.lefty #h-emo { inset-inline-end: auto; inset-inline-start: calc(7.375rem + 0.75rem + var(--sl)); }
.h-emos { position: absolute; z-index: 6; inset-inline-end: calc(7.375rem + 0.75rem + var(--sr)); bottom: calc(4rem + var(--sb)); display: grid; grid-template-columns: repeat(3, 2.75rem); gap: 0.375rem; padding: 0.5rem; border-radius: 1rem; background: rgba(8, 12, 22, 0.85); border: 1px solid var(--line2); pointer-events: auto; animation: mpop .3s var(--spring); }
html.lefty .h-emos { inset-inline-end: auto; inset-inline-start: calc(7.375rem + 0.75rem + var(--sl)); }
.h-emos button { height: 2.75rem; border-radius: 0.75rem; font-size: 1.375rem; background: rgba(255, 255, 255, 0.06); } .h-emos button.txt { font-size: 0.875rem; font-weight: 800; color: var(--gold1); }
#hud.watch #h-emo, #hud.watch .h-emos { display: none; }
/* compact landscape phones (iPhone 844x390 / 874x402 / 932x430) */
@media (max-height: 430px) {
  .lobby-body { grid-template-columns: 12.5rem minmax(0, 1fr) 13.875rem; gap: 0.375rem 0.5rem; }
  .mode { padding: 0.25rem 0.375rem; min-height: 2.5rem; gap: 0.5rem; } .mode .mi { width: 1.75rem; height: 1.75rem; } .mode .mi svg { width: 1.125rem; height: 1.125rem; } .mode small { max-width: none; font-size: 0.625rem; }
  .play { height: 3.375rem; min-width: 11rem; padding: 0 1rem; } .play b { font-size: 1.25rem; }
  .worlds { gap: 0.25rem; } .world { width: 3rem; height: 2rem; }
  .prof { height: 2.5rem; } .topbar { height: 2.5rem; } .ava.m { width: 2rem; height: 2rem; }
  .spc .sp-wrap { width: min(13.75rem, 62vh); }
  .cal .cd { height: 4.375rem; }
}
@media (max-width: 760px) { .lobby-body { grid-template-columns: 11.875rem minmax(0, 1fr) 0; } .col-r { display: none; } }
#s-profile.panel { background: linear-gradient(90deg, rgba(4, 6, 12, 0.94), rgba(4, 6, 12, 0.86)); }
.avc.lockf { color: var(--tx3); } .avc.lockf .ava img, .avc.lockf .ava .avf { filter: brightness(0.55); } .avc.lockf .lki { color: #fff; filter: drop-shadow(0 1px 0.1875rem #000); }
#s-settings.panel, #s-season.panel { background: linear-gradient(90deg, rgba(4, 6, 12, 0.94), rgba(4, 6, 12, 0.84)); }

/* =====================================================================================================
   M2-clean in-game HUD: one top-left cluster (score+rank, kills, combo) -> small power-up timers -> kill feed (3 lines);
   tiny top-centre pill; top-5 leaderboard + minimap on the right; one small centre banner in the upper third.
   ===================================================================================================== */
#hud { --hg: rgba(8, 12, 22, 0.46); --hl: rgba(255, 255, 255, 0.09); }
.h-tl { gap: 0.375rem; }
.hbtn { width: 2.125rem; height: 2.125rem; border-radius: 0.6875rem; background: var(--hg); border-color: var(--hl); } .hbtn svg { width: 1.0625rem; height: 1.0625rem; }
.h-score { padding: 0.1875rem 0.625rem; border-radius: 0.6875rem; background: var(--hg); border-color: var(--hl); } .h-score b { font-size: 1.0625rem; } .h-score small { font-size: 0.625rem; }
.h-chip { height: 1.75rem; padding: 0 0.5625rem; border-radius: 0.625rem; background: var(--hg); border-color: var(--hl); font-size: 0.75rem; }
.h-chip.combo { color: var(--gold1); border-color: rgba(255, 200, 69, 0.45); letter-spacing: 0.04em; } .h-chip.combo.pump { animation: pump .35s var(--spring); }
.h-combo, #h-kill, .pop { display: none !important; }
.h-pu { top: max(3rem, calc(2.875rem + var(--st))); inset-inline-start: calc(0.625rem + var(--sl)); max-width: 40vw; gap: 0.25rem; }
html.lefty .h-pu { inset-inline-start: calc(0.625rem + var(--sl)); }
.pu-chip { height: 1.375rem; padding: 0 0.4375rem 0 0.1875rem; gap: 0.1875rem; font-size: 0.6562rem; border-width: 1px; background: var(--hg); box-shadow: 0 0 0.5rem color-mix(in srgb, var(--c) 30%, transparent); animation: puIn .3s var(--spring); }
.pu-chip i { width: 1rem; height: 1rem; } .pu-chip svg { width: 0.6875rem; height: 0.6875rem; } .pu-chip::after { height: 0.125rem; }
.h-feed { top: var(--feedT, calc(5rem + var(--st))); left: auto; right: auto; inset-inline-start: calc(0.625rem + var(--sl)); inset-inline-end: auto; transform: none; align-items: flex-start; max-width: min(38vw, 18.75rem); gap: 0.125rem; font-size: 0.6562rem; }
.h-feed div { padding: 0.125rem 0.5rem; border-radius: 0.4375rem; background: var(--hg); border: 1px solid transparent; animation: feedIn .3s var(--ease); }
.h-feed div:nth-child(2) { opacity: 0.72; } .h-feed div:nth-child(3) { opacity: 0.45; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-0.5rem); } }
html[dir="rtl"] .h-feed div { animation-name: feedInR; } @keyframes feedInR { from { opacity: 0; transform: translateX(0.5rem); } }
.h-mode { gap: 0.1875rem; } .mode-pill { padding: 0.125rem 0.625rem; font-size: 0.6875rem; background: var(--hg); border-color: var(--hl); } .mode-pill.hot { box-shadow: none; }
.h-banner { top: var(--bannerT, 22%) !important; transform: translate(-50%, 0) scale(0.92); padding: 0.3125rem 0.875rem; border-radius: 0.6875rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; background: var(--hg); border-color: var(--hl); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.h-banner.on { transform: translate(-50%, 0) scale(1); } .h-banner.kill { color: #ffd0d5; border-color: rgba(255, 77, 94, 0.4); } .h-banner.sub { font-size: 0.8125rem; color: var(--gold1); }
.h-lb { background: var(--hg); border-color: var(--hl); border-radius: 0.6875rem; }
#h-mini, html.lefty #h-mini { top: var(--miniT, calc(8.125rem + var(--st))); inset-inline-start: auto; inset-inline-end: calc(0.625rem + var(--sr)); bottom: auto; width: 4.375rem; height: 4.375rem; background: rgba(8, 12, 22, 0.32); border-color: var(--hl); opacity: 0.85; }
#joy.on { opacity: 0.6; }
#joy .base { width: 5.75rem; height: 5.75rem; left: -2.875rem; top: -2.875rem; background: radial-gradient(circle, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%); border: 1px solid rgba(255, 255, 255, 0.14); }
#joy .knob { width: 2.375rem; height: 2.375rem; left: -1.1875rem; top: -1.1875rem; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)); box-shadow: none; }
#boost { opacity: 0.85; }
#h-emo { width: 2.125rem; height: 2.125rem; opacity: 0.8; }
.h-mission { min-width: 11.25rem; padding: 0.3125rem 0.75rem 0.4375rem; background: var(--hg); } .h-mission b { font-size: 0.75rem; }
@media (max-height: 500px) { .h-lb { min-width: 7.5rem; } .h-feed { font-size: 0.625rem; } }
/* PWA / Safari: fill exactly what is visible; Add-to-Home-Screen hint */
html, body { height: 100%; height: 100dvh; }
.a2hs { position: absolute; z-index: 6; top: calc(3.5rem + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 0.75rem; max-width: min(23.75rem, 44vw); font-size: 0.6875rem; line-height: 1.2; border-color: rgba(255, 200, 69, 0.5); animation: scin .4s var(--ease); }
.a2hs > svg { width: 1.125rem; height: 1.125rem; color: var(--gold2); flex: none; } .a2hs .icon-btn { width: 1.75rem; height: 1.75rem; flex: none; } .a2hs .icon-btn svg { width: 0.875rem; height: 0.875rem; }

/* ---------- taps1: stable layout + 44px hit areas ---------- */
html { font-variant-numeric: tabular-nums; }
html, body { overscroll-behavior: none; }
button, [role="button"], .item, .mode, .world, .chip, .icon-btn, .rwb, .cd { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* every button reaches at least 44x44 CSS px: an invisible ::after (or ::before on switches) centred on it */
button { position: relative; }
button:not(.toggle)::after, .toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 2.75rem); height: max(100%, 2.75rem); transform: translate(-50%, -50%); border-radius: inherit; }
.toggle::before { left: 50%; top: 50%; }
#boost::after, #h-emo::after { border-radius: 50%; }
/* numbers never change a box's width */
.chip.coins b { min-width: 3.5rem; }
#l-tier, #l-lv, #h-kills, #h-rank { display: inline-block; min-width: 2ch; text-align: center; }
#h-mass { display: inline-block; min-width: 4ch; }
/* tab bars: 38px tabs inside a 44px strip (the strip may scroll sideways); option groups never clip their buttons */
.phead { height: 2.875rem; }
.seg.tabs button { height: 2.375rem; }
.seg:not(.tabs) { overflow: visible; flex-wrap: wrap; }
input:not([type]), input[type="email"], input[type="password"], input[type="search"], input[type="text"] { height: 2.75rem; }
.world { overflow: visible; }
.world span { border-radius: 0 0 0.5rem 0.5rem; }
/* presets: a saved slot is two full-height halves (load | save) */
.pre { width: 5.5rem; height: 2.75rem; }
.pre.full .pre-act { position: absolute; inset: 0; gap: 0; }
.pre.full .pre-act button { flex: 1; height: 100%; padding: 0; border-radius: 0; font-size: 0.625rem; font-weight: 700; background: rgba(0, 0, 0, 0.45); display: grid; place-items: end center; padding-bottom: 0.25rem; }
.pre.full .pre-act button + button { border-inline-start: 1px solid rgba(255, 255, 255, 0.18); }
.btn.play { overflow: hidden; }
/* neighbours' 44px hit areas must not overlap */
.pb-opts { gap: 0.875rem; }
.namecols { gap: 0.75rem; }
input[type="color"] { height: 2.75rem; }
.mode { min-height: 2.75rem; }
.namecols { padding: 0.375rem; }
input[type="range"] { height: 2.75rem; background-color: transparent; background-size: 100% 0.375rem; background-repeat: no-repeat; background-position: center; }
.seg:not(.tabs) button { min-width: 2.75rem; }
/* the Play box never changes size or position when the mode/world changes: fixed-width Play, one fixed slot for difficulty / room code */
.btn.play { width: 15rem; min-width: 0; }
.play .pl-txt { min-width: 0; flex: 1; }
.play small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-opts { display: grid; justify-items: end; grid-template-rows: auto 2.75rem; }
#l-diff, #l-room { grid-row: 2; grid-column: 1; align-self: center; }
/* tidy1: iOS Safari stretched the difficulty bar to the worlds row width (empty dark strip left of Easy); keep it tight, right-aligned */
#l-diff { justify-self: end; width: max-content; max-width: 100%; flex-wrap: nowrap; }
/* short landscape phones: the results card fits without scrolling so its buttons are never cut off */
@media (max-height: 440px) { .results { gap: 0.25rem; padding-top: 0.625rem; padding-bottom: 0.625rem; } .results .r-score { line-height: 1; } }

/* ---------- calm1: eye comfort + cheap compositing ---------- */
/* full-screen overlays: no blurred inset shadows, no pulsing, no flashes in Reduce effects */
#storm-vig { box-shadow: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(70, 40, 120, 0.35) 100%); }
#frost-vig { box-shadow: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(150, 200, 230, 0.28) 100%); }
html.nopost #vignette { opacity: 0; }
html.calm #vignette.flash, html.calm #pu-flash.on { animation: none; }
html.calm .h-count.on { animation-duration: .5s; }
.r-grid div, .r-extra span { animation: none; }
.notif { animation-duration: .15s; }
/* glass stays subtle */
.glass { box-shadow: 0 0.625rem 1.625rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.glass::before { opacity: .55; }
/* no flashing anywhere; Reduce effects also stops the looping repaint animations (gradient shimmer, shine, pulses) */
.h-chip.warn, .pu-chip.end, .mode-pill.contest { animation: none; }
html.calm .dot, html.calm .rar.legendary, html.calm .play, html.calm .play .pl-shine, html.calm .item.r-legendary, html.calm .r-best, html.calm .mfade.bot svg, html.calm .ava.fr-legend::before, html.calm .ava.fr-season::before, html.calm .cal .cd.today, html.calm .ld-art, html.calm .t-emb { animation: none; }
html.calm .play .pl-shine { display: none; }

/* replay1: death replay, a calm cinematic highlight: solid letterbox bars, big REPLAY title + progress, killed-by card, big buttons */
#replay { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#replay .rp-bar { position: absolute; left: 0; right: 0; background: #000; display: flex; align-items: center; transition: transform .38s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
#replay .rp-bar.top { top: 0; height: calc(3.625rem + var(--st)); padding-top: var(--st); justify-content: center; transform: translateY(-100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
#replay .rp-bar.bot { bottom: 0; height: calc(5.375rem + var(--sb)); padding: 0 calc(1.125rem + var(--sr)) var(--sb) calc(1.125rem + var(--sl)); justify-content: space-between; gap: 0.875rem; transform: translateY(100%); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06); }
#replay.on .rp-bar { transform: none; }
.rp-tt { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.rp-tt b { font-size: 2rem; line-height: 1; font-weight: 900; letter-spacing: 0.32em; margin-inline-start: 0.32em; color: #fff; text-shadow: 0 0.125rem 0.875rem rgba(255, 200, 69, 0.25); }
.rp-tt b::before { content: ""; display: inline-block; width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: #ff4d5e; margin-inline-end: 0.75rem; vertical-align: 0.22em; box-shadow: 0 0 0.625rem rgba(255, 77, 94, 0.6); }
.rp-prog { width: 15rem; height: 0.3125rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.rp-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold1), var(--gold2)); transform-origin: left; transform: scaleX(0); }
[dir="rtl"] .rp-prog i { transform-origin: right; }
.rp-card { display: flex; align-items: center; gap: 0.875rem; min-width: 0; padding-inline-start: 0.875rem; border-inline-start: 0.25rem solid #ff6b5a; }
.rp-card .rp-who { display: flex; flex-direction: column; min-width: 0; }
.rp-card small { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.rp-card b { font-size: 1.625rem; line-height: 1.15; font-weight: 800; color: #ff8a78; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-card .rp-ic { width: 3.625rem; height: 3.625rem; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.875rem; color: #ffb3a6; background: rgba(255, 107, 90, 0.14); border: 0.1875rem solid rgba(255, 107, 90, 0.55); }
.rp-btns { display: flex; gap: 0.75rem; flex: none; pointer-events: auto; }
.rp-b { height: 3.625rem; min-width: 9.375rem; padding: 0 1.5rem; border-radius: 1rem; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.02em; }
.rp-b svg, #r-replay svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#rp-skip svg { fill: currentColor; stroke-width: 1.6; }
[dir="rtl"] #rp-skip svg { transform: scaleX(-1); }
html.rm #replay .rp-bar { transition: none; }
@media (max-height: 440px) { #replay .rp-bar.top { height: calc(3.125rem + var(--st)); } .rp-tt b { font-size: 1.625rem; } #replay .rp-bar.bot { height: calc(4.875rem + var(--sb)); } .rp-card b { font-size: 1.375rem; } }
@media (max-width: 700px) { .rp-b { min-width: 0; padding: 0 1rem; font-size: 1rem; } .rp-card b { max-width: 30vw; } }

/* replay1: bolder results: big title, big score, bigger stats with the rank highlighted, big buttons */
.r-head h2 { font-size: 2.25rem; line-height: 1.05; font-weight: 900; letter-spacing: 0.02em; }
.r-head p { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.r-score { font-size: 4rem; font-weight: 900; }
.r-grid b { font-size: 1.375rem; font-weight: 800; } .r-grid small { font-size: 0.625rem; font-weight: 700; }
.r-grid div:nth-child(3) { background: rgba(255, 200, 69, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 200, 69, 0.45); } .r-grid div:nth-child(3) b { color: var(--gold1); }
.r-btns .btn { height: 3.375rem; font-size: 1rem; font-weight: 800; border-radius: 0.875rem; padding: 0 0.75rem; white-space: nowrap; }
.r-btns #r-again { flex: 1.35; font-size: 1.0625rem; }
.results .r-xp { grid-template-columns: auto 1fr auto; } .results .r-gain { grid-column: auto; order: 3; white-space: nowrap; } .results .r-season { margin: 0; grid-column: 1 / -1; font-size: 0.6875rem; }
@media (max-height: 440px) { .results .r-season { display: none; } .results .r-head p { margin-top: 0.125rem; } .r-best { margin-top: 0.125rem; padding: 0.125rem 0.625rem; } .results .r-extra span { padding: 0.125rem 0.5rem; } .r-head h2 { font-size: 2rem; } .r-score { font-size: 3.5rem; } .r-grid div { padding: 0.3125rem; } .r-grid b { font-size: 1.3125rem; } .r-btns .btn { height: 3.125rem; } .results .r-who { padding: 0.125rem 0.625rem; } .results .r-who .ava.m { width: 1.875rem; height: 1.875rem; }
  .results { gap: 0.1875rem; } .r-head p { font-size: 0.8125rem; } .r-grid div { padding: 0.1875rem 0.3125rem; } .r-grid b { line-height: 1.15; } .results .r-extra { flex-wrap: nowrap; overflow: hidden; } .results .r-extra span { white-space: nowrap; } .r-best { font-size: 0.625rem; }
  [dir="rtl"] .results * { line-height: 1.15; } [dir="rtl"] .r-score { line-height: 1; } [dir="rtl"] .r-head h2 { font-size: 1.875rem; } }
[dir="rtl"] .rp-tt b { letter-spacing: 0; margin: 0; }

/* ===================== lux1 · Track B design system =====================
   Deep tones, champagne gold + ivory accents, crafted panels (subtle gradient, gold hairline, inner bevel),
   a refined type scale, colour/glow-only press states, fast composited transitions (opacity/transform, <=220 ms). */
:root {
  --ivory: #f3ead6; --ivory2: #cfc5ae; --ivory3: #8f8878; --champ1: #f7e8c0; --champ2: #e2c078; --champ3: #b88b3e;
  --deep0: #06080d; --deep1: #0c1019; --deep2: #131927;
  --lx-panel: linear-gradient(180deg, rgba(23, 28, 42, 0.93), rgba(10, 13, 21, 0.95));
  --lx-panel2: linear-gradient(180deg, rgba(34, 40, 58, 0.78), rgba(15, 19, 30, 0.86));
  --lx-edge: rgba(226, 192, 120, 0.16); --lx-edge2: rgba(226, 192, 120, 0.38); --lx-in: inset 0 1px 0 rgba(255, 240, 214, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --lx-gold: linear-gradient(180deg, #faecc6 0%, #e6c57f 46%, #c4964a 100%);
  --gold1: #f7e8c0; --gold2: #e2c078; --gold3: #b88b3e; --tx2: #b9b4a6; --tx3: #7f7b70; --line: rgba(226, 192, 120, 0.12); --line2: rgba(226, 192, 120, 0.22);
  --t-fast: 160ms; --t-mid: 220ms;
}
body { color: var(--ivory); }
/* panels */
.glass { background: var(--lx-panel); border: 1px solid var(--lx-edge); box-shadow: 0 0.875rem 1.875rem rgba(0, 0, 0, 0.42), var(--lx-in); }
.glass::before { opacity: 1; background: linear-gradient(180deg, rgba(240, 212, 150, 0.30), rgba(240, 212, 150, 0.04) 38%, transparent 60%, rgba(240, 212, 150, 0.06)); }
.chip, .icon-btn { background: var(--lx-panel); border-color: var(--lx-edge); box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.35), var(--lx-in); }
.icon-btn svg { stroke: var(--ivory2); } .icon-btn:hover svg { stroke: var(--champ1); }
.chip.coins b, .coinsv { color: var(--champ1); }
/* type scale: display 36 / title 18 / body 13 / caption 10.5, tracked caps for labels */
.phead h2, .mcard h2 { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; background: linear-gradient(180deg, #fffaf0, var(--ivory2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phead h2 { font-size: 1rem; }
html[lang="ar"] .phead h2, html[lang="ar"] .mcard h2, html[lang="hi"] .phead h2 { letter-spacing: 0; text-transform: none; }
.side h3, h4.sub, .pcontent h4 { color: var(--champ2); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.6562rem; font-weight: 700; }
html[lang="ar"] .side h3, html[lang="ar"] h4.sub, html[lang="ar"] .pcontent h4 { letter-spacing: 0; font-size: 0.75rem; }
.side h3 small { color: var(--ivory3); letter-spacing: 0.04em; }
/* buttons */
.btn { background: var(--lx-panel2); border: 1px solid var(--lx-edge2); color: var(--ivory); box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.32), var(--lx-in); }
.btn:hover { border-color: rgba(240, 212, 150, 0.6); }
.btn.ghost { background: rgba(243, 234, 214, 0.035); border-color: var(--lx-edge); }
.btn.gold, .btn.play { background: var(--lx-gold); border-color: rgba(255, 240, 205, 0.85); color: #23170a; box-shadow: 0 0.5rem 1.375rem rgba(196, 150, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -0.125rem 0 rgba(120, 82, 24, 0.35); }
.btn.gold:hover, .btn.play:hover { box-shadow: 0 0.5rem 1.625rem rgba(226, 192, 120, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -0.125rem 0 rgba(120, 82, 24, 0.35); }
.btn.play .pl-shine { opacity: 0.5; }
.btn.play small { color: rgba(35, 23, 10, 0.72); }
/* press = colour + glow only (never moves) */
.btn.prs, .btn:active { filter: brightness(1.12) saturate(1.05); box-shadow: 0 0 0 1px rgba(255, 236, 190, 0.7), 0 0 1.375rem rgba(226, 192, 120, 0.45); }
.btn.gold.prs, .btn.play.prs, .btn.gold:active, .btn.play:active { filter: brightness(1.08); }
.icon-btn.prs, .chip.prs, .mode.prs, .item.prs, .world.prs, .seg button.prs { filter: brightness(1.18); }
/* segmented tabs: ivory text, champagne underline + inner edge on the active tab */
.seg { background: rgba(4, 6, 10, 0.55); border-color: var(--lx-edge); box-shadow: inset 0 1px 0.125rem rgba(0, 0, 0, 0.5); }
.seg button { color: var(--ivory3); }
.seg button:hover { color: var(--ivory2); }
.seg button.on { color: var(--champ1); background: linear-gradient(180deg, rgba(226, 192, 120, 0.24), rgba(226, 192, 120, 0.08)); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.48), inset 0 -0.125rem 0 var(--champ2); }
/* lobby modes list: gold accent rail + gilded icon tile on the selected mode */
.mode { transition: background var(--t-fast), box-shadow var(--t-fast); }
.mode b { color: var(--ivory); letter-spacing: 0.02em; } .mode small { color: var(--ivory3); }
.mode .mi { background: rgba(243, 234, 214, 0.05); box-shadow: inset 0 0 0 1px var(--lx-edge); color: var(--ivory2); }
.mode.on { background: linear-gradient(90deg, rgba(226, 192, 120, 0.17), rgba(226, 192, 120, 0.03) 85%); box-shadow: inset 0.1875rem 0 0 var(--champ2), inset 0 0 0 1px rgba(226, 192, 120, 0.22); border-color: transparent; }
html[dir="rtl"] .mode.on { background: linear-gradient(270deg, rgba(226, 192, 120, 0.17), rgba(226, 192, 120, 0.03) 85%); box-shadow: inset -0.1875rem 0 0 var(--champ2), inset 0 0 0 1px rgba(226, 192, 120, 0.22); }
.mode.on .mi { background: var(--lx-gold); color: #23170a; box-shadow: 0 0 0.875rem rgba(226, 192, 120, 0.35); }
.mode.on small { color: var(--ivory2); }
.mode .new { background: transparent; color: var(--champ1); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.6); letter-spacing: 0.14em; }
.mode .new.hot { background: var(--lx-gold); color: #23170a; box-shadow: none; }
/* worlds, missions, toggles, sliders, rows */
.world { border-color: var(--lx-edge2); } .world.on { border-color: var(--champ2); box-shadow: 0 0 0 1px rgba(255, 240, 205, 0.5), 0 0 0.875rem rgba(226, 192, 120, 0.4); }
.mis { background: linear-gradient(180deg, rgba(243, 234, 214, 0.05), rgba(243, 234, 214, 0.02)); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.07); }
.mis span { color: var(--ivory2); } .mis .rw { color: var(--champ1); }
.mis .pb i, .h-mission .mbar i { background: linear-gradient(90deg, var(--champ3), var(--champ2), var(--champ1)); }
.mis.done .pb i { background: linear-gradient(90deg, #3fae7a, #8fe0b6); }
.toggle.on { background: linear-gradient(90deg, var(--champ3), var(--champ2)); }
.set-row { background: linear-gradient(180deg, rgba(243, 234, 214, 0.045), rgba(243, 234, 214, 0.02)); border-color: rgba(226, 192, 120, 0.08); }
.set-row > span { color: var(--ivory); }
input[type="range"] { accent-color: var(--champ2); }
.item { background: linear-gradient(180deg, rgba(243, 234, 214, 0.055), rgba(243, 234, 214, 0.015)); border-color: var(--lx-edge); }
.item.on, .item.sel { border-color: var(--champ2); box-shadow: 0 0 0 1px rgba(255, 240, 205, 0.35), 0 0 1rem rgba(226, 192, 120, 0.25); }
.tier.cur { box-shadow: 0 0 0 0.125rem var(--champ2), 0 0 1.125rem rgba(226, 192, 120, 0.35); }
.toast { background: var(--lx-panel); border: 1px solid var(--lx-edge2); color: var(--ivory); }
.toast.gold { color: var(--champ1); border-color: rgba(226, 192, 120, 0.7); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35); }
.chip.season .sic { background: var(--lx-gold); box-shadow: 0 0 0.75rem rgba(226, 192, 120, 0.4); }
.chip.season .sbar i { background: var(--champ2); box-shadow: none; }
.screen.panel { background: linear-gradient(90deg, rgba(5, 7, 11, 0.93), rgba(5, 7, 11, 0.66) 58%, rgba(5, 7, 11, 0.32)); }
html[dir="rtl"] .screen.panel { background: linear-gradient(270deg, rgba(5, 7, 11, 0.93), rgba(5, 7, 11, 0.66) 58%, rgba(5, 7, 11, 0.32)); }
/* modals: deep card, gold edge */
.modal { background: radial-gradient(ellipse at center, rgba(6, 8, 13, 0.55), rgba(3, 4, 7, 0.86)); }
.mcard.glass { background: linear-gradient(180deg, rgba(25, 30, 45, 0.97), rgba(10, 13, 21, 0.98)); border-color: rgba(226, 192, 120, 0.28); }
.results.win { border-color: rgba(226, 192, 120, 0.6); }
.r-score { background: linear-gradient(180deg, #fffaf0, var(--champ2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* coordinated screen transitions: the screen fades, header + body follow 20-40 ms later (opacity/transform only) */
@keyframes lxIn { from { opacity: 0; transform: translate3d(0, 0.375rem, 0); } to { opacity: 1; transform: none; } }
@keyframes lxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lxPop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.screen.on { animation: lxFade var(--t-fast) ease-out; }
.screen.on > .phead, .screen.on > .topbar { animation: lxIn var(--t-mid) var(--ease) both; }
.screen.on > .pbody, .screen.on > .lobby-body { animation: lxIn var(--t-mid) var(--ease) 30ms both; }
.mcard { animation: lxPop 180ms var(--ease); }
html.rm .screen.on > *, html.rm .mcard { animation: none !important; }
/* reward count-up + reveal pulse (glow only) */
.lx-up { font-variant-numeric: tabular-nums; }
@keyframes lxGlow { 0% { box-shadow: 0 0 0 0 rgba(226, 192, 120, 0.0); } 30% { box-shadow: 0 0 0 0.125rem rgba(255, 236, 190, 0.8), 0 0 1.75rem rgba(226, 192, 120, 0.55); } 100% { box-shadow: 0 0 0 0 rgba(226, 192, 120, 0); } }
.lx-glow { animation: lxGlow 900ms ease-out; }
.lx-fly { position: fixed; z-index: 95; pointer-events: none; font-weight: 800; color: var(--champ1); font-size: 1.125rem; text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.7); animation: lxFly 900ms var(--ease) forwards; will-change: transform, opacity; }
@keyframes lxFly { 0% { opacity: 0; transform: translate3d(-50%, 0.375rem, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-50%, -2.125rem, 0); } }
/* ===== cine1 · key-art title with a slow parallax camera (composited transform layers only) ===== */
#title { background: #05070b; align-items: flex-start; padding-inline-start: calc(6vw + var(--sl)); gap: 1rem; }
html[dir="rtl"] #title { align-items: flex-start; }
.t-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; direction: ltr; }
.t-art i { position: absolute; display: block; will-change: transform; }
.ta-bg { inset: -6%; background: #05070b url("../assets/keyart.webp") 62% 50%/cover no-repeat; animation: taCam 26s ease-in-out infinite alternate; }
.ta-glow { inset: 0; background: radial-gradient(ellipse 38% 46% at 68% 42%, rgba(255, 196, 96, 0.16), transparent 70%); animation: taGlow 9s ease-in-out infinite alternate; }
.ta-motes { inset: -20%; opacity: 0.55; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #ffd98a, transparent 60%), radial-gradient(1px 1px at 32% 68%, #ffe7b5, transparent 60%), radial-gradient(0.125rem 0.125rem at 54% 38%, #ffcf70, transparent 60%), radial-gradient(1px 1px at 72% 80%, #fff1cf, transparent 60%), radial-gradient(1.5px 1.5px at 86% 30%, #ffd98a, transparent 60%), radial-gradient(1px 1px at 44% 12%, #ffe7b5, transparent 60%); background-size: 26.25rem 18.75rem; animation: taMotes 34s linear infinite; }
.ta-motes.m2 { opacity: 0.3; background-size: 40rem 28.75rem; animation-duration: 52s; animation-direction: reverse; }
.ta-shade { inset: 0; background: linear-gradient(90deg, rgba(5, 7, 11, 0.92) 0%, rgba(5, 7, 11, 0.62) 34%, rgba(5, 7, 11, 0.0) 62%), linear-gradient(0deg, rgba(5, 7, 11, 0.8), transparent 30%), linear-gradient(180deg, rgba(5, 7, 11, 0.55), transparent 22%); }
@keyframes taCam { 0% { transform: scale(1.04) translate3d(1.2%, 0.6%, 0); } 100% { transform: scale(1.12) translate3d(-1.6%, -0.8%, 0); } }
@keyframes taGlow { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes taMotes { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-26.25rem, -18.75rem, 0); } }
#title .t-logo { position: relative; align-items: flex-start; animation: lxIn 600ms var(--ease) both; }
#title .t-emb { width: 4.875rem; height: 4.875rem; animation: none; filter: drop-shadow(0 0 1.125rem rgba(226, 192, 120, 0.45)); }
#title .t-tag { color: var(--champ1); letter-spacing: 0.42em; opacity: 0.9; }
#title .t-start { position: relative; color: var(--ivory); border-color: rgba(226, 192, 120, 0.6); background: rgba(8, 10, 16, 0.55); min-height: 3rem; animation: lxIn 600ms var(--ease) 200ms both; }
#title .t-start::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 1.375rem rgba(226, 192, 120, 0.35); opacity: 0; animation: tBreath 2.6s ease-in-out 900ms infinite; }
@keyframes tBreath { 50% { opacity: 1; } }
.t-tip { position: relative; margin: 0; max-width: min(26.25rem, 44vw); min-height: 2rem; font-size: 0.75rem; line-height: 1.35; color: var(--ivory2); opacity: 0.85; transition: opacity 300ms; }
.t-tip.fade { opacity: 0; }
.t-tip b { color: var(--champ2); letter-spacing: 0.2em; font-size: 0.625rem; margin-inline-end: 0.5rem; }
html.rm .t-art i { animation: none !important; }
#title .wm.big .w1, #title .wm.big .w2 { font-size: 3.375rem; }
.wm .w1 { background: linear-gradient(180deg, #fffdf6 0%, #efe5cf 50%, #a99d84 100%); -webkit-background-clip: text; background-clip: text; }
.wm .w2 { background: linear-gradient(180deg, #fff3cf 0%, #e9c77e 45%, #b0802f 100%); -webkit-background-clip: text; background-clip: text; }
.wm .pro { background: var(--lx-gold); color: #23170a; box-shadow: 0 0 0.875rem rgba(226, 192, 120, 0.35); }
@media (max-height: 400px) { #title .wm.big .w1, #title .wm.big .w2 { font-size: 2.875rem; } #title .t-emb { width: 4rem; height: 4rem; } #title { gap: 0.75rem; } }
/* ===== cine1 · match card over the start beat ===== */
#m-intro { position: fixed; left: 0; right: 0; top: calc(0.75rem + var(--st)); z-index: 30; display: flex; justify-content: center; pointer-events: none; }
#m-intro.out { opacity: 0; transition: opacity 180ms ease-out; }
.mi-card { position: relative; display: flex; align-items: center; gap: 0.875rem; width: min(32.5rem, 62vw); padding: 0.625rem 0.875rem 0.875rem 0.625rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(22, 27, 40, 0.94), rgba(9, 12, 19, 0.96)); border: 1px solid rgba(226, 192, 120, 0.32); box-shadow: 0 1rem 2.125rem rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 214, 0.08); overflow: hidden; }
.mi-art { position: relative; flex: none; width: 7rem; height: 4.5rem; border-radius: 0.6875rem; background: #111 center/cover; box-shadow: inset 0 0 0 1px rgba(255, 240, 214, 0.18), inset 0 -1.625rem 1.625rem rgba(0, 0, 0, 0.55); display: grid; place-items: center; }
.mi-ic { width: 2.375rem; height: 2.375rem; border-radius: 0.6875rem; display: grid; place-items: center; background: var(--lx-gold); color: #23170a; box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.45); }
.mi-ic svg { width: 1.375rem; height: 1.375rem; }
.mi-txt { min-width: 0; flex: 1; }
.mi-txt small { display: block; font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champ2); }
.mi-txt b { display: block; font-size: 1.375rem; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory); margin: 0.125rem 0 0.125rem; }
.mi-txt p { margin: 0; font-size: 0.75rem; line-height: 1.3; color: var(--ivory2); }
html[lang="ar"] .mi-txt small, html[lang="ar"] .mi-txt b { letter-spacing: 0; text-transform: none; }
.mi-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.mi-chips span { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 6.1875rem; font-size: 0.6875rem; font-weight: 700; color: var(--champ1); background: rgba(226, 192, 120, 0.1); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.3); font-variant-numeric: tabular-nums; }
.mi-chips svg { width: 0.8125rem; height: 0.8125rem; }
.mi-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.1875rem; background: rgba(255, 255, 255, 0.06); }
.mi-bar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--champ3), var(--champ2), var(--champ1)); }
html[dir="rtl"] .mi-bar i { transform-origin: 100% 50%; }
@keyframes miBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ld-mic { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; background: var(--lx-gold); color: #23170a; vertical-align: middle; margin-inline-end: 0.5rem; }
.ld-mic svg { width: 1rem; height: 1rem; }
.ld-rule { display: block; margin-top: 0.375rem; font-style: normal; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: none; color: var(--ivory2); max-width: 26.25rem; }
.ld-bar i { background: linear-gradient(90deg, var(--champ3), var(--champ2), var(--champ1)); box-shadow: 0 0 0.75rem rgba(226, 192, 120, 0.5); }
.xpbar i { background: linear-gradient(90deg, var(--champ3), var(--champ2), var(--champ1)); box-shadow: 0 0 0.5rem rgba(226, 192, 120, 0.45); }
/* the title block keeps the brand wordmark LTR and sits over the dark left of the key art in every language */
#title { direction: ltr; }
html[dir="rtl"] #title .t-tag, html[dir="rtl"] #title .t-tip, html[dir="rtl"] #title .t-start, html[dir="rtl"] #title .t-ver { direction: rtl; }
html[dir="rtl"] #title .t-tip { text-align: left; unicode-bidi: plaintext; }
/* ===== lux2 · every-screen consistency pass: 4/8/12/16/24 spacing scale, one radius family (10/14/18), one button family ===== */
:root { --sp1: 0.25rem; --sp2: 0.5rem; --sp3: 0.75rem; --sp4: 1rem; --sp5: 1.5rem; --rad-s: 0.625rem; --rad-m: 0.875rem; --rad-l: 1.125rem; }
/* one primary action colour: champagne. green / red only as state, never as a button fill */
.btn.primary { background: var(--lx-gold); border-color: rgba(255, 240, 205, 0.85); color: #23170a; box-shadow: 0 0.5rem 1.375rem rgba(196, 150, 74, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -0.125rem 0 rgba(120, 82, 24, 0.35); }
.btn.danger { background: linear-gradient(180deg, rgba(120, 32, 40, 0.9), rgba(70, 16, 22, 0.95)); border-color: rgba(255, 140, 150, 0.45); color: #ffd9dc; box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 200, 205, 0.12); }
/* auth: same key art as the title, one card, all six languages on one row */
#s-auth { background: #05070b; overflow: hidden; }
#s-auth::before { content: ""; position: absolute; inset: -4%; background: url("../assets/keyart_lo.webp") 70% 50%/cover no-repeat; opacity: 0.55; animation: taCam 30s ease-in-out infinite alternate; will-change: transform; }
#s-auth::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 7, 11, 0.9), rgba(5, 7, 11, 0.55) 55%, rgba(5, 7, 11, 0.85)); }
#s-auth > * { position: relative; z-index: 1; }
html.rm #s-auth::before { animation: none; }
.auth-wrap { gap: var(--sp5); }
.auth-card { padding: var(--sp4); gap: var(--sp3); border-radius: var(--rad-l); }
.auth-card form { gap: var(--sp2); }
.auth-card input, .set-row input, #l-code, input[data-ip] { background: rgba(4, 6, 10, 0.6); border: 1px solid var(--lx-edge2); border-radius: var(--rad-s); color: var(--ivory); }
.auth-card input:focus, input[data-ip]:focus { outline: none; border-color: var(--champ2); box-shadow: 0 0 0 0.1875rem rgba(226, 192, 120, 0.18); }
.auth-hero .tag { color: var(--champ1); }
.chk input { appearance: none; -webkit-appearance: none; width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; border: 1px solid var(--lx-edge2); background: rgba(4, 6, 10, 0.6); display: grid; place-items: center; margin: 0; }
.chk input:checked { background: var(--lx-gold); border-color: var(--champ1); }
.chk input:checked::after { content: ""; width: 0.375rem; height: 0.6875rem; border: solid #23170a; border-width: 0 0.125rem 0.125rem 0; transform: rotate(45deg) translate(-1px, -1px); }
.lang-row { flex-wrap: nowrap; gap: var(--sp1); }
.lang-row button { min-height: 2rem; padding: 0 0.625rem; border-radius: var(--rad-s); color: var(--ivory3); }
.lang-row button.on { color: var(--champ1); background: rgba(226, 192, 120, 0.12); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.4); }
/* lobby: world strip shows art + lock level only (the Play button names the world); showcase tag yields to the A2HS hint */
.world span { font-size: 0; padding: 0; background: none; }
.world.lock span { font-size: 0.625rem; padding: 0.125rem; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent); color: var(--ivory2); }
#s-lobby:has(#l-a2hs:not(.x-hide)) #l-showtag { opacity: 0; }
.a2hs { border-color: rgba(226, 192, 120, 0.5); }
.rwb { border-radius: var(--rad-m); }
.rwb.ready { border-color: rgba(226, 192, 120, 0.55); }
/* locker: info card sits at the bottom of the stage, the snake stays fully visible above it */
.lk-show { justify-content: flex-end; gap: var(--sp2); }
.lk-info { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--sp3); text-align: start; width: min(23.75rem, 100%); padding: var(--sp2) var(--sp3); border-radius: var(--rad-m); }
.lk-info > * { grid-column: 1; margin: 0 !important; }
.lk-info .btn, .lk-info .btns, .lk-info button { grid-column: 2; grid-row: 1 / span 3; min-width: 7.5rem; }
.lk-info b { font-size: 1.0625rem; }
.presets { width: min(23.75rem, 100%); justify-content: space-between; }
/* season + missions lists: one row height, readable type, progress under the label */
.mis { min-height: 2.75rem; padding: var(--sp2) var(--sp3) 0.75rem; border-radius: var(--rad-s); font-size: 0.75rem; margin-bottom: 0.375rem; }
.mis .pb { left: var(--sp3); right: var(--sp3); bottom: 0.3125rem; }
.mis .claim { min-height: 1.75rem; }
#s-content .mis { min-height: 3.125rem; font-size: 0.8125rem; }
#s-content .mis .rw { font-size: 0.8125rem; }
.cal .cd { justify-content: center; gap: 0.25rem; overflow: hidden; height: auto; min-height: 5.125rem; line-height: 1.15; }
.cal .cd.d7 { gap: 0.125rem; padding-block: 0.3125rem; } .cal .cd.d7 .gift { font-size: 1.125rem; }
@media (max-height: 430px) { .cal .cd { min-height: 4.375rem; } }
.cal .cd small, .cal .cd .cos { font-size: 0.625rem; line-height: 1.05; text-align: center; max-width: 100%; }
.cal .cd.d7 { background: linear-gradient(160deg, rgba(226, 192, 120, 0.22), rgba(120, 80, 30, 0.12)); }
.cal .cd.today { animation: none; border-color: var(--champ2); box-shadow: 0 0 0 1px var(--champ2), 0 0 1rem rgba(226, 192, 120, 0.3); }
.wheel { border-color: rgba(226, 192, 120, 0.85); box-shadow: 0 0 1.5rem rgba(196, 150, 74, 0.25), inset 0 0 1.375rem rgba(0, 0, 0, 0.55); }
.wheel .sg { color: var(--champ1); }
/* settings: identical row rhythm on every tab */
.set-row { min-height: 3.375rem; padding: var(--sp2) var(--sp3); border-radius: var(--rad-m); margin-bottom: var(--sp2); }
.set-row .btn { min-height: 2.5rem; height: 2.5rem; }
/* empty states */
.lx-empty { display: flex; align-items: center; gap: var(--sp3); padding: var(--sp4); border-radius: var(--rad-m); border: 1px dashed var(--lx-edge2); color: var(--ivory3); font-size: 0.75rem; background: rgba(243, 234, 214, 0.02); }
.lx-empty svg { width: 1.375rem; height: 1.375rem; stroke: var(--champ3); flex: none; }
/* tables (history, leaderboards) */
table.lb { border-collapse: separate; border-spacing: 0 0.25rem; }
table.lb th { color: var(--champ2); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
table.lb td { background: rgba(243, 234, 214, 0.035); }
table.lb .w { color: #8fe0b6; }
/* tutorial, confirm, reveal, notifications */
.tut canvas { border-radius: var(--rad-m); box-shadow: inset 0 0 0 1px var(--lx-edge); background: rgba(4, 6, 10, 0.6); }
.tut .dots i.on { background: var(--champ2); }
.notif { background: var(--lx-panel); border-color: var(--lx-edge2); }
.notif > div { border-radius: var(--rad-s); }
.rv-rar { letter-spacing: 0.3em; }
/* HUD: same panel language, kept small and calm */
.h-score, .h-chip, .h-lb, .hbtn { background: rgba(10, 13, 21, 0.72) !important; border: 1px solid rgba(226, 192, 120, 0.14) !important; }
.h-lb .me, .h-lb .row.me { color: var(--champ1); }
#boost { border-color: rgba(226, 192, 120, 0.55); }
/* pause + results buttons share one height */
#m-pause .btn { min-height: 2.875rem; }
.lk-info .rar { justify-self: start; } .lk-info .btn.wide { width: auto; }
.presets { width: auto; }
.lk-info .rar { width: max-content; max-width: 100%; display: inline-block; }
#s-content .mis span { font-size: 0.8125rem; } #s-content .mis span.rw { font-size: 0.8125rem; }
.item b { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }
.rv-card { animation: lxPop 260ms var(--ease); }
.rv-rar { background: linear-gradient(90deg, var(--champ1), var(--champ2), var(--champ1)); -webkit-background-clip: text; background-clip: text; animation: none; }
@media (max-height: 430px) { #m-reveal { padding-top: calc(0.625rem + var(--st)); padding-bottom: calc(0.625rem + var(--sb)); } .rv-name { font-size: 2.125rem; } }
/* ===== modes1 · weekly skill chain, daily info, HUD tracker ===== */
#l-skill { margin-top: var(--sp2); }
.wc-mini { position: relative; padding: var(--sp2) var(--sp3); border-radius: var(--rad-s); background: linear-gradient(180deg, rgba(226, 192, 120, 0.1), rgba(226, 192, 120, 0.03)); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.24); }
.wc-mini small { display: block; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champ2); }
html[lang="ar"] .wc-mini small { letter-spacing: 0; font-size: 0.6875rem; }
.wc-mini b { display: block; font-size: 0.75rem; line-height: 1.25; color: var(--ivory); margin-top: 0.125rem; padding-inline-end: 2.75rem; }
.wc-dots { position: absolute; top: 0.625rem; inset-inline-end: 0.625rem; display: flex; gap: 0.25rem; }
.wc-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(243, 234, 214, 0.12); }
.wc-dots i.on { background: var(--champ2); } .wc-dots i.cur { box-shadow: inset 0 0 0 1.5px var(--champ2); }
.wc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); margin-bottom: var(--sp3); }
.wc-tier { padding: var(--sp2) var(--sp3); border-radius: var(--rad-m); background: linear-gradient(180deg, rgba(243, 234, 214, 0.05), rgba(243, 234, 214, 0.015)); box-shadow: inset 0 0 0 1px var(--lx-edge); }
.wc-tier.cur { box-shadow: inset 0 0 0 1px var(--champ2), 0 0 1rem rgba(226, 192, 120, 0.18); }
.wc-tier.done { opacity: 0.75; } .wc-tier.lock { opacity: 0.55; }
.wc-th { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.375rem; }
.wc-th b { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--champ1); } .wc-th em { font-style: normal; font-size: 0.75rem; font-weight: 700; color: var(--champ1); }
.wc-m { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.75rem; line-height: 1.25; color: var(--ivory2); padding: 0.25rem 0; }
.wc-m i { flex: none; width: 1rem; text-align: center; font-style: normal; color: var(--champ3); } .wc-m i svg { width: 0.75rem; height: 0.75rem; }
.wc-m.ok { color: var(--ivory); } .wc-m.ok i { color: #8fe0b6; }
.dinfo { display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.75rem; border-radius: var(--rad-s); background: rgba(226, 192, 120, 0.08); box-shadow: inset 0 0 0 1px rgba(226, 192, 120, 0.3); font-size: 0.75rem; color: var(--ivory2); white-space: nowrap; }
.dinfo span svg { width: 1rem; height: 1rem; stroke: var(--champ2); } .dinfo b { color: var(--champ1); }
.h-track { position: absolute; left: 50%; bottom: calc(0.625rem + var(--sb)); transform: translateX(-50%); display: flex; align-items: center; gap: 0.375rem; max-width: 46vw; padding: 0.3125rem 0.75rem; border-radius: 6.1875rem; font-size: 0.6875rem; color: var(--ivory2); background: rgba(10, 13, 21, 0.62); border: 1px solid rgba(226, 192, 120, 0.16); pointer-events: none; opacity: 0.9; transition: opacity 200ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-track i { font-style: normal; color: var(--champ2); } .h-track span { overflow: hidden; text-overflow: ellipsis; }
#hud:has(.h-mission.on) .h-track, #hud.cine .h-track { opacity: 0; }
.mode-pill.gr.hot, .mode-pill.inf.hot { border-color: rgba(226, 192, 120, 0.6); color: var(--champ1); }
#l-daily .mis { min-height: 2.375rem; padding: 0.375rem 0.625rem 0.625rem; margin-bottom: 0.25rem; }
#l-daily .mis .pb { left: 0.625rem; right: 0.625rem; bottom: 0.25rem; }
#l-skill .wc-mini { padding: 0.375rem 0.625rem; }
.side { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 0.875rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 0.875rem), transparent); }
.dinfo b { margin-inline-end: 0.25rem; }
.wc-mini small { padding-inline-end: 2.5rem; }
@media (max-height: 396px) { #l-skill { display: none; } }

/* =====================================================================================================
   fix1 (owner iPhone review): replay floats over a full-screen view; calm power-up chips
   ===================================================================================================== */
#replay .rp-bar { background: transparent; box-shadow: none; transition: opacity .2s ease; transform: none; opacity: 0; }
#replay.on .rp-bar { opacity: 1; }
#replay .rp-bar.top { top: 0; height: auto; box-shadow: none; transform: none; padding: calc(0.375rem + var(--st)) 0 1.125rem; background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)); }
#replay .rp-bar.bot { bottom: 0; height: auto; box-shadow: none; transform: none; padding: 1.375rem calc(0.75rem + var(--sr)) calc(0.5rem + var(--sb)) calc(0.75rem + var(--sl)); gap: 0.625rem; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42)); }
#replay .rp-tt { gap: 0.25rem; padding: 0.25rem 0.75rem 0.375rem; border-radius: 0.625rem; background: rgba(8, 10, 16, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); }
#replay .rp-tt b { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3em; text-shadow: none; }
#replay .rp-tt b::before { width: 0.375rem; height: 0.375rem; margin-inline-end: 0.4375rem; vertical-align: 0.15em; box-shadow: none; }
#replay .rp-prog { width: 6.875rem; height: 0.1875rem; }
#replay .rp-card { gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; border-radius: 0.75rem; background: rgba(8, 10, 16, 0.62); border: 1px solid rgba(255, 255, 255, 0.08); border-inline-start: 0.1875rem solid #ff6b5a; min-width: 0; }
html[dir="rtl"] #replay .rp-card { padding: 0.25rem 0.25rem 0.25rem 0.75rem; }
#replay .rp-card .ava.xl { width: 2.25rem; height: 2.25rem; --fw: 0.125rem; } #replay .rp-card .ava.xl .avf b { font-size: 1.25rem; }
#replay .rp-card small { font-size: 0.625rem; letter-spacing: 0.12em; }
#replay .rp-card b { font-size: 0.9375rem; line-height: 1.2; max-width: 34vw; }
#replay .rp-card .rp-ic { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; border-width: 0.125rem; }
#replay .rp-btns { gap: 0.5rem; }
#replay .rp-b { height: 2.75rem; min-width: 0; padding: 0 0.875rem; border-radius: 0.75rem; font-size: 0.875rem; gap: 0.375rem; }
#replay .rp-b svg { width: 1.0625rem; height: 1.0625rem; }
/* power-up chips: no glow, no blinking */
.pu-chip { box-shadow: none; } .pu-chip.end { animation: none; }
#pu-flash, #pu-flash.on { animation: none; opacity: 0; }
/* fix1 HUD: kill feed top-centre between the score cluster and the leaderboard (max 3 lines); compact leaderboard when short */
#hud .h-feed { top: var(--feedT, calc(0.5rem + var(--st))); left: 50%; right: auto; transform: translateX(-50%); align-items: center; max-width: min(var(--feedW, 46vw), 26.25rem); z-index: 3; pointer-events: none; }
html[dir="rtl"] #hud .h-feed { left: 50%; transform: translateX(-50%); }
#hud .h-feed div { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .h-feed div:nth-child(n+4) { display: none; }
@keyframes feedIn { from { opacity: 0; } } @keyframes feedInR { from { opacity: 0; } }
#hud.lb-c .h-lb div:nth-child(4):not(.me), #hud.lb-c .h-lb div:nth-child(5):not(.me) { display: none; }
#hud #h-mini, html.lefty #hud #h-mini { inset-inline-end: var(--miniE, calc(0.625rem + var(--sr))); }

/* fit1: lobby toasts sit in the top bar's empty middle, never over the skin name / showcase */
body:has(#s-lobby.on) #toasts { top: calc(0.625rem + var(--st)); }

/* tidy2: foot row = options centred under the show column + Play exactly as wide as the right column, aligned under it */
.lobby-body .playbox { display: grid; grid-template-columns: minmax(0, 1fr) 14.75rem; align-items: end; gap: 0.625rem; justify-content: stretch; }
.lobby-body .playbox .pb-opts { justify-self: center; justify-items: center; }
.lobby-body .playbox #l-diff { justify-self: center; }
.lobby-body .playbox .btn.play { width: 100%; }
@media (max-width: 760px) { .lobby-body .playbox { grid-template-columns: minmax(0, 1fr) 12.5rem; } }
/* prof2: cover-style profile overview (design 3) */
.pv-hero { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(226, 192, 120, 0.18); background: linear-gradient(180deg, rgba(23, 28, 42, 0.95), rgba(10, 13, 21, 0.97)); margin-bottom: 0.75rem; }
.pv-cover { height: 7.375rem; }
.pv-cover::after { content: ""; display: block; height: 100%; background: linear-gradient(180deg, rgba(5, 7, 13, 0) 30%, rgba(5, 7, 13, 0.7)); }
.pv-idrow { display: flex; align-items: flex-end; gap: 1rem; padding: 0 1.125rem 1rem; margin-top: -2.875rem; position: relative; flex-wrap: wrap; }
.pv-idrow .ava.l { flex: none; }
.pv-id { flex: 1; min-width: 12.5rem; padding-bottom: 0.125rem; }
.pv-id .nm { font-size: 1.375rem; font-weight: 700; color: var(--ivory, #f3ead6); line-height: 1.15; }
.pv-id .tt { font-size: 0.75rem; color: var(--ivory2, #cfc5ae); margin-top: 0.125rem; }
.pv-xp { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; max-width: 22.5rem; } .pv-xp .xpbar { flex: 1; margin: 0; } .pv-xp small { font-size: 0.6875rem; color: var(--ivory3, #8f8878); white-space: nowrap; }
.pv-acts { display: flex; gap: 0.5rem; } .pv-acts .btn { min-height: 2.75rem; height: 2.75rem; }
.pv-card { border-radius: 1rem; border: 1px solid rgba(226, 192, 120, 0.16); background: linear-gradient(180deg, rgba(23, 28, 42, 0.93), rgba(10, 13, 21, 0.95)); padding: 0.875rem 1rem; margin-bottom: 0.75rem; }
.pv-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .pv-g2 > .pv-card { margin-bottom: 0.75rem; }
@media (max-width: 640px) { .pv-g2 { grid-template-columns: 1fr; } }
.pv-h { display: flex; align-items: center; justify-content: space-between; min-height: 1.375rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory3, #8f8878); margin-bottom: 0.625rem; }
html[lang="ar"] .pv-h { letter-spacing: 0; font-size: 0.7812rem; }
.pv-link { min-height: 2.75rem; margin: -0.75rem -0.5rem; padding: 0 0.5rem; font: inherit; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; color: var(--champ2, #e2c078); background: none; border: 0; }
.pv-bio { font-size: 0.875rem; line-height: 1.5; color: var(--ivory, #f3ead6); margin-bottom: 0.75rem; white-space: pre-line; overflow-wrap: anywhere; }
.pv-lab { display: block; font-size: 0.6562rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory3, #8f8878); margin: 0.625rem 0 0.5rem; }
html[lang="ar"] .pv-lab { letter-spacing: 0; font-size: 0.75rem; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pv-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem; border-radius: 1rem; font: inherit; font-size: 0.7812rem; color: var(--ivory, #f3ead6); background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(226, 192, 120, 0.22); }
button.pv-chip { min-height: 2.75rem; border-radius: 1.375rem; padding: 0 0.875rem; }
button.pv-chip.on { background: linear-gradient(180deg, #faecc6, #e6c57f 46%, #c4964a); color: #23170a; border-color: rgba(255, 240, 200, 0.8); font-weight: 700; }
.pv-editor input, .pv-editor textarea { width: 100%; max-width: 32.5rem; font: inherit; font-size: 1rem; color: var(--ivory, #f3ead6); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(226, 192, 120, 0.25); border-radius: 0.75rem; padding: 0.625rem 0.75rem; min-height: 2.75rem; resize: none; }
.pv-rk { display: flex; align-items: center; gap: 0.75rem; } .pv-rk .rkb { width: 2.5rem; height: 2.5rem; flex: none; } .pv-rk b { color: var(--ivory, #f3ead6); } .pv-rk .xpbar { margin-top: 0.375rem; }
.pv-ladder { display: flex; justify-content: space-between; margin: 0.875rem 0 0.75rem; text-align: center; }
.pv-ladder > div { opacity: 0.35; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; } .pv-ladder > div.on { opacity: 1; }
.pv-ladder .rkb { width: 1.625rem; height: 1.625rem; } .pv-ladder small { font-size: 0.625rem; color: var(--ivory2, #cfc5ae); }
.pv-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pv-mini > div, .pv-stats .stat { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(226, 192, 120, 0.12); border-radius: 0.75rem; padding: 0.5625rem 0.6875rem; }
.pv-mini small { display: block; font-size: 0.625rem; color: var(--ivory3, #8f8878); letter-spacing: 0.08em; text-transform: uppercase; } .pv-mini b { font-size: 0.9375rem; color: var(--ivory, #f3ead6); }
.pv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } @media (max-width: 640px) { .pv-stats { grid-template-columns: repeat(2, 1fr); } }
.pv-stats .stat b { font-size: 1.25rem; color: var(--ivory, #f3ead6); } .pv-stats .stat b.g, .pv-hist td.g { color: var(--champ1, #f7e8c0); font-weight: 700; }
.pv-favs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.pv-fav { position: relative; height: 6.5rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(226, 192, 120, 0.18); padding: 0.625rem 0.75rem; display: flex; flex-direction: column; justify-content: space-between; }
.pv-fav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, 0.1), rgba(5, 7, 13, 0.78)); }
.pv-fav > * { position: relative; } .pv-fav small { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .pv-fav b { font-size: 0.9375rem; color: #fff; }
.pv-favm { background: radial-gradient(120% 120% at 80% 0%, rgba(226, 192, 120, 0.35), rgba(10, 13, 21, 0.95) 60%); } .pv-favm span { position: absolute; top: 0.625rem; right: 0.75rem; font-size: 0.6875rem; color: var(--ivory2, #cfc5ae); } html[dir="rtl"] .pv-favm span { right: auto; left: 0.75rem; }
.pv-bm { display: flex; justify-content: space-between; font-size: 0.7812rem; color: var(--ivory, #f3ead6); margin-top: 0.375rem; } .pv-bm b { color: var(--champ1, #f7e8c0); } .pv-card .xpbar { margin: 0.3125rem 0 0.375rem; }
.pv-rings { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; text-align: center; } @media (max-width: 640px) { .pv-rings { grid-template-columns: repeat(3, 1fr); } }
.pv-ring i { display: grid; place-items: center; width: 3.625rem; height: 3.625rem; margin: 0 auto 0.375rem; border-radius: 50%; background: conic-gradient(var(--champ2, #e2c078) 0 var(--p), rgba(255, 255, 255, 0.08) 0); }
.pv-ring span { display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%; background: #0d111b; font-size: 0.6875rem; font-style: normal; font-weight: 700; color: var(--ivory, #f3ead6); }
.pv-ring small { font-size: 0.7188rem; color: var(--ivory2, #cfc5ae); }
.pv-hist td, .pv-hist th { height: 2.375rem; } table.pv-hist tr td.g { color: var(--champ1, #f7e8c0); font-weight: 700; } table.pv-hist tr:nth-child(2) td.w { color: var(--green); font-weight: 700; }

/* ===== lk1: Locker redesign: clearer cards, tidy header, readable presets ===== */
.lk-head { display: flex; align-items: center; gap: 0.625rem; margin: 0.125rem 0 0.625rem; }
.lk-head h4.sub { margin: 0; }
.lk-head .cnt { font-size: 0.6875rem; color: var(--tx3); padding: 0.1875rem 0.5625rem; border-radius: 62.4375rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums; } .lk-head .cnt b { color: var(--champ2, #f3e2b8); }
.lk-chips { margin-inline-start: auto; display: flex; gap: 0.25rem; }
.lk-chips button { min-height: 2rem; padding: 0 0.75rem; font-size: 0.6875rem; border-radius: 62.4375rem; }
#c-content .grid { grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr)); gap: 0.625rem; }
.item.lk2 { padding: 0.375rem 0.375rem 0.5rem; gap: 0.375rem; border-radius: 0.875rem; min-height: 2.75rem; }
.item.lk2 .sw { height: 3.875rem; border-radius: 0.625rem; position: relative; }
.item.lk2.r-legendary .sw { height: 4.375rem; }
.item.lk2 .rtag { display: none; }
.item.lk2 .meta { display: flex; align-items: center; gap: 0.375rem; padding: 0 0.125rem; min-width: 0; }
.item.lk2 .meta b { flex: 1; min-width: 0; font-size: 0.7812rem; line-height: 1.2; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; }
.item.lk2 .rd { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: #9aa7b8; } .item.lk2 .rd.rare { background: #3aa0ff; } .item.lk2 .rd.epic { background: #b45cff; } .item.lk2 .rd.legendary { background: linear-gradient(135deg, #ffe9a8, #ffb636); box-shadow: 0 0 0.375rem rgba(255, 182, 54, 0.6); }
.item.lk2 .st { display: flex; align-items: center; gap: 0.25rem; margin: 0 0.125rem; font-size: 0.6562rem; font-weight: 600; color: var(--tx2); min-width: 0; }
.item.lk2 .st span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.lk2 .st svg { width: 0.6875rem; height: 0.6875rem; flex: none; opacity: 0.8; }
.item.lk2 .st.on { color: var(--champ2, #f3e2b8); }
.item.lk2 .st.lk { color: var(--tx3); font-weight: 500; }
.item.lk2 .st.buy { color: var(--gold1); } .item.lk2 .st.buy .coin { width: 0.6875rem; height: 0.6875rem; }
.item.lk2.on .sw::before { content: "✓"; position: absolute; top: 0.3125rem; inset-inline-end: 0.3125rem; z-index: 2; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: #2a1800; background: linear-gradient(135deg, #fff1c2, #e2b85a); box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.45); }
.item.lk2.lock .sw { filter: saturate(0.35) brightness(0.55); }
.item.lk2 .nw { position: absolute; bottom: 0.3125rem; inset-inline-start: 0.3125rem; z-index: 2; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.125rem 0.375rem; border-radius: 0.3125rem; color: #062a1a; background: #7dffb8; }
html[lang="ar"] .item.lk2 .nw { letter-spacing: 0; font-size: 0.625rem; }
.pats { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.5rem; } .pats .item.lk2 .sw { height: 2.75rem; }
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.5rem; }
.pal { display: flex; height: 2.75rem; border-radius: 0.625rem; overflow: hidden; border: 1px solid var(--line); padding: 0; } .pal i { flex: 1; }
.eyesw { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 120%, #2a6b3c, #10351d 70%) !important; }
.eyeart { width: 78%; height: 78%; } .eyeart.glow { filter: drop-shadow(0 0 0.25rem var(--g)); }
.trsw { background: linear-gradient(90deg, #0d1018, #151a26) !important; }
.trsw i { position: absolute; top: 50%; width: 0.5625rem; height: 0.5625rem; margin-top: -0.2812rem; border-radius: 50%; background: var(--a); box-shadow: 0 0 0.5rem var(--a); opacity: 0.9; }
.trsw i:nth-child(1) { inset-inline-start: 12%; transform: scale(0.45); opacity: 0.4; } .trsw i:nth-child(2) { inset-inline-start: 28%; transform: scale(0.6) translateY(-0.375rem); background: var(--b); box-shadow: 0 0 0.5rem var(--b); }
.trsw i:nth-child(3) { inset-inline-start: 45%; transform: scale(0.75) translateY(0.3125rem); } .trsw i:nth-child(4) { inset-inline-start: 62%; transform: scale(0.9) translateY(-0.1875rem); background: var(--b); box-shadow: 0 0 0.5rem var(--b); } .trsw i:nth-child(5) { inset-inline-start: 78%; }
/* trail1: ground trail cards. Preview = a snake head sliding over a dark ground leaving 4 decals (atlas cells) that fade in
   and out; transform / opacity only. Calm / reduced motion: a still, dim row of decals, no head. */
.gtsw { background: radial-gradient(130% 100% at 50% 65%, #2b303b, #12151d) !important; direction: ltr; }
.gtsw > i { position: absolute; top: 50%; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; background: center / contain no-repeat; opacity: 0; transform: scale(0.5); animation: gtp 2.4s linear infinite; }
.gtsw > i:nth-child(1) { left: 4%; animation-delay: 0.1s; } .gtsw > i:nth-child(2) { left: 26%; animation-delay: 0.5s; } .gtsw > i:nth-child(3) { left: 48%; animation-delay: 0.9s; } .gtsw > i:nth-child(4) { left: 70%; animation-delay: 1.3s; }
.gtsw .hd { position: absolute; inset: 0; transform: translateX(-100%); animation: gth 2.4s linear infinite; pointer-events: none; }
.gtsw .hd i { position: absolute; right: 0; top: 50%; width: 1.9rem; height: 0.5625rem; margin-top: -0.2812rem; border-radius: 0.3125rem; background: linear-gradient(90deg, rgba(61, 220, 132, 0), #3ddc84 70%, #b8ffcf); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4); }
@keyframes gtp { 0% { opacity: 0; transform: scale(0.5); } 8% { opacity: 1; transform: scale(1); } 55% { opacity: 0.85; } 80%, 100% { opacity: 0; transform: scale(1); } }
@keyframes gth { 0% { transform: translateX(-100%); } 75%, 100% { transform: translateX(115%); } }
.gtsw.still > i { animation: none; opacity: 0.45; transform: none; } .gtsw.still .hd { display: none; }
@media (prefers-reduced-motion: reduce) { .gtsw > i { animation: none; opacity: 0.45; transform: none; } .gtsw .hd { display: none; } }
.item.lk2 .st.buy.go { color: #1c1405; background: var(--gold1); border-radius: 0.375rem; padding: 0.125rem 0.375rem; }
.gt-sub { margin: -0.25rem 0 0.5rem; font-size: 0.75rem; color: var(--tx2); }
.ncprev { margin: 0 0 0.625rem; padding: 0.75rem; border-radius: 0.75rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); text-align: center; } .ncprev b { font-size: 1.125rem; text-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.7); }
.namecols { display: grid; grid-template-columns: repeat(auto-fill, 2.75rem); gap: 0.625rem; padding: 0.125rem; } .namecols button { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; }
/* info card */
.lk-info .perks { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem !important; }
.lk-info .perks span { font-size: 0.625rem; color: var(--tx2); padding: 0.1875rem 0.4375rem; border-radius: 0.375rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.lk-info .btn { min-height: 2.75rem; }
/* presets: numbered slot, colour strip, two real buttons */
.presets { gap: 0.625rem; align-items: center; } #c-presets { display: flex; gap: 0.5rem; }
.pre2 { width: 5.75rem; border-radius: 0.75rem; border: 1px solid var(--line); background: rgba(8, 10, 16, 0.6); overflow: hidden; }
.pre2:not(.full) { border-style: dashed; }
.pre-sw { height: 1rem; position: relative; background: rgba(255, 255, 255, 0.04); } .pre-sw span { position: absolute; top: 1px; inset-inline-start: 0.375rem; font-size: 0.625rem; font-weight: 800; color: #fff; text-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.8); }
.pre2 .pre-act { display: flex; position: static; gap: 0; }
.pre2 .pre-act button { flex: 1; height: 2.75rem; font-size: 0.6875rem; font-weight: 700; color: var(--tx); background: transparent; border-radius: 0; padding: 0; }
.pre2 .pre-act button + button { border-inline-start: 1px solid var(--line); }
.pre2 .pre-act button[data-pl] { color: var(--champ2, #f3e2b8); }
.pre2 .pre-act button.only { color: var(--tx3); }
@media (max-height: 460px) { .item.lk2 .sw { height: 3.125rem; } .item.lk2.r-legendary .sw { height: 3.5rem; } #c-content .grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; } .pre2 { width: 5.25rem; } }
/* perf2: steady connection-quality dot in the online leaderboard row (no animation) */
.h-lb .nq { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; margin-inline-end: 0.3125rem; vertical-align: 1px; background: #5fd38a; text-decoration: none; } .h-lb .nq.fair { background: #f2c14e; } .h-lb .nq.poor { background: #ff6b6b; }
/* perf2: purchase animation (transform/opacity only, no blur layers; calm = a fading check) */
.buyfx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.buyfx .flyc { position: absolute; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #ffc845 45%, #b97a10); box-shadow: 0 0 0.375rem rgba(255, 200, 69, 0.55); opacity: 0; will-change: transform, opacity; }
.buyfx .spk { position: absolute; width: 0.5rem; height: 0.5rem; background: #ffe7a3; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; will-change: transform, opacity; }
.buyfx .buyck { position: absolute; transform: translate(-50%, -50%); width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.75rem; font-weight: 900; color: #0a0c18; background: #ffc845; animation: buyCk 0.8s ease both; }
@keyframes buyCk { 0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.item.bought, .ofb.bought { animation: buyGlow 0.8s ease-out both; }
@keyframes buyGlow { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 69, 0); } 35% { box-shadow: 0 0 0 0.1875rem rgba(255, 200, 69, 0.85), 0 0 1.625rem 0.375rem rgba(255, 200, 69, 0.45); } 100% { box-shadow: 0 0 0 0.125rem rgba(255, 200, 69, 0.35), 0 0 0 0 rgba(255, 200, 69, 0); } }
.item.bought-calm, .ofb.bought-calm { box-shadow: 0 0 0 0.125rem rgba(255, 200, 69, 0.7); transition: box-shadow 0.6s ease; }
html.calm .buyfx .flyc, html.calm .buyfx .spk { display: none; }
@media (prefers-reduced-motion: reduce) { .item.bought, .ofb.bought { animation: none; box-shadow: 0 0 0 0.125rem rgba(255, 200, 69, 0.7); } .buyfx .buyck { animation-duration: 0.01s; opacity: 1; } }
/* perf2: shop offers (coins only). Buttons >= 44px; no blur layers; the occasion canvas stops under calm (ui.js) */
.ofgrid .item { position: relative; cursor: default; }
.ofp { display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; } .ofp s { color: var(--tx3); font-size: 0.6875rem; } .ofp b { color: var(--gold1); font-size: 0.875rem; } .ofp .coin { width: 0.6875rem; height: 0.6875rem; }
.ofoff { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; padding: 0.125rem 0.4375rem; border-radius: 6.1875rem; background: #ffc845; color: #1a1200; font-size: 0.6875rem; font-weight: 900; }
.ofbuy { height: 2.75rem; min-height: 2.75rem; width: 100%; padding: 0 0.625rem; font-size: 0.8125rem; }
.ofleft { color: var(--tx2); font-variant-numeric: tabular-nums; font-size: 0.7188rem; margin-inline-start: auto; }
.ofb { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.625rem; padding: 0.625rem; margin-bottom: 0.75rem; border-radius: 0.875rem; background: linear-gradient(120deg, rgba(255, 200, 69, 0.12), rgba(8, 12, 22, 0.6)); border: 1px solid rgba(255, 200, 69, 0.45); }
.ofb .ofoff { top: -0.5rem; } .ofb .ofbuy { width: auto; min-width: 6rem; }
.ofsw { display: flex; } .ofsw .sw { width: 2.875rem; height: 2.875rem; border-radius: 0.625rem; border: 0.125rem solid rgba(8, 12, 22, 0.9); } .ofsw .sw + .sw { margin-inline-start: -0.875rem; }
.ofmeta { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .ofmeta b { font-size: 0.8438rem; } .ofmeta > span { font-size: 0.7188rem; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ { position: relative; height: 5.75rem; margin-bottom: 0.625rem; border-radius: 0.875rem; overflow: hidden; border: 1px solid rgba(255, 231, 163, 0.35); background: linear-gradient(120deg, #141c33, #0a0f1d); }
.occ.th-ramadan, .occ.th-eid { background: linear-gradient(120deg, #1b1640, #0b1a2e 60%, #10283a); } .occ.th-fireworks { background: linear-gradient(120deg, #0b0f24, #1a1038); } .occ.th-hearts { background: linear-gradient(120deg, #3a1024, #1a0b18); }
.occ.th-pumpkins { background: linear-gradient(120deg, #2a1406, #120a14); } .occ.th-snow { background: linear-gradient(120deg, #0e2238, #0a1424); } .occ.th-iraq { background: linear-gradient(180deg, rgba(206, 17, 38, 0.35), rgba(255, 255, 255, 0.06) 50%, rgba(0, 0, 0, 0.5)); } .occ.th-stars { background: linear-gradient(120deg, #101a36, #0a0f1d); }
.occfx { position: absolute; inset: 0; width: 100%; height: 100%; }
.occtx { position: absolute; inset-inline-start: 0.875rem; bottom: 0.625rem; display: flex; flex-direction: column; gap: 0.125rem; } .occtx h4 { margin: 0; font-size: 1.0625rem; color: #fff3cf; text-shadow: 0 1px 0.375rem rgba(0, 0, 0, 0.6); } .occtx .ofleft { margin: 0; }
.ofnote, .ofnone { color: var(--tx3); font-size: 0.7188rem; margin: 0.375rem 0.125rem 0; }

/* ---------- comp1: leagues, trophies, competitions (static: no animation, no flashing, no blur layers) ---------- */
.lgb { position: relative; display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; vertical-align: middle; }
.lgb img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.125rem 0.1875rem rgba(0, 0, 0, 0.45)); pointer-events: none; }
.lgb.sz-s { width: 1.25rem; height: 1.25rem; } .lgb.sz-m { width: 2rem; height: 2rem; } .lgb.sz-l { width: 3.5rem; height: 3.5rem; } .lgb.sz-xl { width: 8rem; height: 8rem; }
.lgb.conq.sz-s { width: 1.625rem; } .lgb.conq.sz-m { width: 2.5rem; } .lgb.conq.sz-l { width: 4.5rem; } .lgb.conq.sz-xl { width: 10.5rem; }
.lgb b { position: absolute; bottom: -0.1875rem; left: 50%; transform: translateX(-50%); min-width: 1rem; padding: 0 0.25rem; border-radius: 0.375rem; font-size: 0.625rem; line-height: 0.8125rem; font-weight: 900; letter-spacing: 0.04em; color: #1d1200; background: linear-gradient(180deg, #fff1bd, var(--gold2)); box-shadow: 0 1px 0.1875rem rgba(0, 0, 0, 0.5); text-align: center; direction: ltr; }
.lgb.sz-l b { font-size: 0.6875rem; line-height: 1rem; bottom: -0.25rem; } .lgb.sz-xl b { font-size: 1rem; line-height: 1.375rem; padding: 0 0.5rem; bottom: -0.125rem; border-radius: 0.5rem; }
.lgb.lg-bronze b { background: linear-gradient(180deg, #ffd2a8, #c47a3f); } .lgb.lg-silver b { background: linear-gradient(180deg, #ffffff, #aab6c8); } .lgb.lg-platinum b { background: linear-gradient(180deg, #e6fffa, #5fc7b4); } .lgb.lg-diamond b { background: linear-gradient(180deg, #eaf6ff, #7fb6ff); } .lgb.lg-crown b { background: linear-gradient(180deg, #f3d8ff, #b06cff); color: #1a0730; }
.tro-ic { display: inline-block; vertical-align: -0.1875rem; object-fit: contain; }
#l-rank .lgb { width: 1.125rem; height: 1.125rem; }
.chip.comp { height: 2.75rem; gap: 0.375rem; padding: 0 0.75rem 0 0.375rem; position: relative; color: var(--ink); cursor: pointer; }
.chip.comp .lc-t { display: flex; flex-direction: column; line-height: 1.05; text-align: start; } .chip.comp .lc-t b { font-size: 0.875rem; color: var(--gold1); font-variant-numeric: tabular-nums; } .chip.comp .lc-t small { font-size: 0.625rem; color: var(--tx2); white-space: nowrap; }
.chip.comp .dot { position: absolute; top: 0.25rem; inset-inline-end: 0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0.125rem rgba(10, 14, 26, 0.9); }
@media (max-width: 760px) { .chip.comp .lc-t small { display: none; } }
.h-lb .lgt { width: 1rem; height: 1rem; flex: none; object-fit: contain; margin-inline-start: -0.125rem; }
.r-who .rp.tro { gap: 0.5rem; } .r-who .rp.tro .lgb { width: 2.125rem; height: 2.125rem; } .r-who .rp.tro span { color: var(--ink); font-weight: 700; line-height: 1.3; }
.tro-d { font-size: 0.9375rem; font-weight: 900; color: var(--tx2); } .tro-d.up { color: var(--green); } .tro-d.dn { color: #ff8a96; } .tro-pend { font-style: normal; font-weight: 600; color: var(--gold1); font-size: 0.6875rem; }
.r-who .rp.tro em.fine { display: block; font-style: normal; font-weight: 600; font-size: 0.6562rem; max-width: 13.75rem; }
.lg-ladder { flex-wrap: wrap; } .lg-ladder .lgb { width: 1.625rem; height: 1.625rem; } .lg-ladder .lgb.conq { width: 2.125rem; }
/* competitions screen */
#cp-content { display: flex; flex-direction: column; gap: 0.625rem; padding-bottom: 1.125rem; } #cp-content > * { flex: none; min-width: 0; }
.cp-hero, .cp-card, .cp-board, .cp-how { border-radius: 1rem; border: 1px solid var(--line2); background: var(--glass2); padding: 0.875rem; }
.cp-hero { display: flex; align-items: center; gap: 1.125rem; } .cp-hi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.cp-ln { font-size: 1.375rem; font-weight: 900; color: #fff; } .cp-tr { display: flex; align-items: center; gap: 0.5rem; } .cp-tr b { font-size: 1.625rem; color: var(--gold1); font-variant-numeric: tabular-nums; }
.cp-hero .xpbar { height: 0.5rem; max-width: 26.25rem; } .cp-hero .xpbar i, .cp-ms .pb i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold3), var(--gold2)); border-radius: 6.1875rem; }
.cp-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; font-size: 0.75rem; color: var(--tx2); } .cp-cd { font-variant-numeric: tabular-nums; color: var(--gold1); font-weight: 700; font-size: 0.75rem; }
.cp-ladder { display: grid; grid-template-columns: repeat(7, minmax(6rem, 1fr)); gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.cp-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; padding: 0.625rem 0.375rem; border-radius: 0.875rem; border: 1px solid var(--line); background: rgba(10, 14, 26, 0.5); }
.cp-step b { font-size: 0.8125rem; color: #fff; } .cp-step small { font-size: 0.6562rem; color: var(--tx2); line-height: 1.25; } .cp-step em { font-style: normal; font-size: 0.6562rem; color: var(--gold1); line-height: 1.25; }
.cp-step.done { border-color: rgba(43, 227, 139, 0.35); } .cp-step.cur { border-color: var(--gold2); box-shadow: inset 0 0 0 1px rgba(255, 200, 69, 0.35); background: rgba(60, 48, 16, 0.35); } .cp-step.conq .lgb { width: 4.75rem; }
.cp-how p { margin: 0.375rem 0 0; font-size: 0.7812rem; color: var(--tx2); line-height: 1.45; } .cp-how b { color: #fff; }
.cp-tabs2 { display: flex; gap: 0.5rem; overflow-x: auto; }
.cp-c { flex: 1 0 auto; display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.375rem 0.875rem 0.375rem 0.5rem; border-radius: 0.875rem; border: 1px solid var(--line); background: rgba(10, 14, 26, 0.55); color: var(--ink); text-align: start; }
.cp-c img { width: 2.25rem; height: 2.25rem; object-fit: contain; } .cp-c b { display: block; font-size: 0.8125rem; } .cp-c small { font-size: 0.6562rem; color: var(--tx2); }
.cp-c.on { border-color: var(--gold2); background: rgba(60, 48, 16, 0.45); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.625rem; align-items: start; }
@media (max-width: 700px) { .cp-grid { grid-template-columns: 1fr; } .cp-ladder { grid-template-columns: repeat(7, 6.25rem); } .lgb.sz-xl { width: 6rem; height: 6rem; } .lgb.conq.sz-xl { width: 8rem; } }
.cp-ch { display: flex; align-items: center; gap: 0.75rem; } .cp-ch img { width: 4rem; height: 4rem; object-fit: contain; } .cp-ch b { display: block; font-size: 1.0625rem; color: #fff; } .cp-ch small { display: block; font-size: 0.7188rem; color: var(--tx2); margin-bottom: 0.125rem; }
.cp-prog { display: flex; align-items: baseline; gap: 0.625rem; margin: 0.625rem 0 0.125rem; } .cp-prog small { font-size: 0.6875rem; color: var(--tx2); } .cp-prog b { font-size: 1.5rem; color: var(--gold1); font-variant-numeric: tabular-nums; } .cp-rk { font-size: 0.75rem; font-weight: 700; color: var(--green); }
.cp-miles { display: grid; gap: 0.375rem; } .cp-ms { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 0.375rem; column-gap: 0.625rem; row-gap: 0.375rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.75rem; border: 1px solid var(--line); background: rgba(10, 14, 26, 0.45); min-height: 2.75rem; }
.cp-ms .pb { grid-column: 1; height: 0.3125rem; border-radius: 6.1875rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .cp-ms .btn.claim, .cp-ms .rw { grid-row: 1 / span 2; grid-column: 2; } .cp-ms .btn.claim { height: 2.75rem; min-width: 5.5rem; }
.cp-ms.got { opacity: 0.7; } .cp-ms.ok { border-color: rgba(255, 200, 69, 0.55); } .cp-ms .rw { font-size: 0.75rem; font-weight: 700; color: var(--green); } .cp-ms .rw.fine { color: var(--tx2); font-weight: 600; }
.cp-mt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; } .cp-mt > b { font-size: 0.875rem; color: #fff; font-variant-numeric: tabular-nums; }
.cp-rw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; font-size: 0.7188rem; font-weight: 700; color: var(--gold1); } .cp-rw em { font-style: normal; font-weight: 600; font-size: 0.6562rem; padding: 1px 0.375rem; border-radius: 0.375rem; color: #e9dcff; background: rgba(150, 90, 255, 0.22); }
.cp-rr { display: grid; gap: 0.25rem; } .cp-rr > div { display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; padding: 0.25rem 0.125rem; } .cp-rr b { min-width: 3.5rem; color: #fff; }
.cp-bh { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.5rem; } .cp-bh b { font-size: 0.875rem; color: #fff; } .cp-ref { height: 2.75rem; padding: 0 0.875rem; }
.cp-list { display: flex; flex-direction: column; gap: 0.1875rem; max-height: 52vh; overflow-y: auto; } .cp-load { padding: 1.125rem 0.25rem; text-align: center; }
.cp-row { display: grid; grid-template-columns: 2.125rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 2.125rem; padding: 0.25rem 0.625rem; border-radius: 0.625rem; background: rgba(10, 14, 26, 0.45); font-size: 0.8125rem; }
.cp-row b { color: var(--tx2); font-variant-numeric: tabular-nums; } .cp-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-align: left; unicode-bidi: plaintext; } html[dir="rtl"] .cp-row span { text-align: right; } .cp-row > em { font-style: normal; font-weight: 800; color: var(--gold1); font-variant-numeric: tabular-nums; } .cp-row span em { font-style: normal; color: var(--green); }
.cp-row.pod b { color: var(--gold2); } .cp-row.me { box-shadow: inset 0 0 0 1px var(--gold2); background: rgba(60, 48, 16, 0.45); }
.cp-off { padding: 0.875rem 0.375rem; text-align: center; }
.cp-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.5rem; }
.cp-bd, .cp-ex { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.625rem 0.375rem; border-radius: 0.875rem; border: 1px solid var(--line); background: rgba(10, 14, 26, 0.45); text-align: center; }
.cp-bd img { width: 4rem; height: 4rem; object-fit: contain; filter: grayscale(1) brightness(0.55); } .cp-bd small, .cp-ex small { font-size: 0.6562rem; color: var(--tx2); }
.cp-bd.own img { filter: none; } .cp-bd.own { border-color: rgba(255, 200, 69, 0.45); } .cp-bd.own small { color: #fff; }
.cp-excl { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.875rem, 1fr)); gap: 0.5rem; } .cp-ex { opacity: 0.55; } .cp-ex.own { opacity: 1; border-color: rgba(255, 200, 69, 0.45); } .cp-ex.ti { justify-content: center; min-height: 4rem; } .cp-ex.ti b { font-size: 0.8125rem; color: var(--gold1); }
/* competition frames (static rings; no motion) */
.fr-conq img, .ava.fr-conq .avf { box-shadow: 0 0 0 var(--fw) #ffcf4a, 0 0 0 calc(var(--fw) * 1.7) #6b1030, 0 0 0 calc(var(--fw) * 2.3) #ffe9a8, 0 0 0.875rem rgba(255, 180, 60, 0.55); }
.fr-champ img, .ava.fr-champ .avf { box-shadow: 0 0 0 var(--fw) #ffd75a, 0 0 0 calc(var(--fw) * 1.7) #5a2ca0, 0 0 0 calc(var(--fw) * 2.2) #ffd75a, 0 0 0.75rem rgba(150, 90, 255, 0.45); }
.fr-podium img, .ava.fr-podium .avf { box-shadow: 0 0 0 var(--fw) #e6edf7, 0 0 0 calc(var(--fw) * 1.7) #7a4dff, 0 0 0.625rem rgba(122, 77, 255, 0.4); }

/* ================= resp1: auto-fit for every device ================= */
/* links styled as buttons get the same 44px hit area as buttons */
a.btn { position: relative; } a.btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); border-radius: inherit; }
/* mouse + keyboard only (no touch at all): no on-screen boost button / joystick; mouse button or Space boosts */
html:not(.touch) #boost, html:not(.touch) #joy { display: none; }
html:not(.touch) #h-emo { inset-inline-end: calc(1.25rem + var(--sr)); }
html.lefty:not(.touch) #h-emo { inset-inline-start: auto; inset-inline-end: calc(1.25rem + var(--sr)); }
/* modals and toasts respect the notch / home bar and never exceed the screen */
.modal { padding: calc(0.625rem + var(--st)) calc(0.625rem + var(--sr)) calc(0.625rem + var(--sb)) calc(0.625rem + var(--sl)); }
.mcard { max-width: 100%; max-height: 100%; }
#toasts { width: max-content; max-width: calc(100vw - 1.5rem - var(--sl) - var(--sr)); }
.toast { max-width: 100%; }
/* Add-to-Home-Screen hint sits in the page flow (its own row under the top bar), so it never covers a button */
.a2hs { position: relative; top: auto; left: auto; transform: none; align-self: center; max-width: min(36rem, 100%); flex: none; }

/* ---------- portrait (phones held upright, iPad / foldable portrait) ---------- */
@media (orientation: portrait) {
  /* auth: hero above the card, scroll if short */
  #s-auth { justify-content: flex-start; overflow-y: auto; }
  .auth-wrap { flex-direction: column; gap: 1rem; flex: 1 0 auto; justify-content: center; }
  .auth-hero { align-items: center; text-align: center; max-width: 100%; }
  .auth-card { width: min(22rem, 100%); }
  /* lobby: top bar on two rows, then modes strip, stage, missions, worlds + Play; the body scrolls when the screen is short */
  #s-lobby { gap: 0.5rem; }
  #s-lobby .topbar { height: auto; flex-wrap: wrap; row-gap: 0.375rem; }
  #s-lobby .topbar .sp { display: none; }
  #l-prof { order: 1; flex: 1 1 0; min-width: 0; max-width: none; }
  #s-lobby .topbar .chip.coins { order: 2; } #s-lobby .topbar .chip.coins b { min-width: 0; }
  #l-bell { order: 3; } #l-settings { order: 4; }
  #l-season { order: 5; flex: 1 1 40%; justify-content: center; }
  #l-comp { order: 6; flex: 1 1 40%; justify-content: center; }
  .lobby-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(8.5rem, 1fr) auto auto; grid-template-areas: "modes" "show" "side" "foot"; gap: 0.5rem; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .col-l .modes { height: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; padding: 0.3125rem; gap: 0.3125rem; }
  .col-l .mode { flex: 0 0 auto; width: 10.5rem; }
  .col-l .mode small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mfade { display: none; }
  .side { max-height: 11rem; }
  /* resp2: stage = skin name on top, snake in the middle, Locker at the foot; the name yields its space to the A2HS hint */
  .lobby-body .show-act { margin-top: auto; }
  #s-lobby:has(#l-a2hs:not(.x-hide)) #l-showtag { display: none; }
  .lobby-body .playbox { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0.5rem; }
  .lobby-body .playbox .pb-opts { justify-self: stretch; justify-items: center; min-width: 0; }
  .lobby-body .playbox .btn.play { width: 100%; }
  #l-worlds { max-width: 100%; overflow-x: auto; padding: 0.25rem; scrollbar-width: none; }
  #l-diff { justify-self: center; }
  /* panels: title row (back · title · coins), tabs on their own row */
  .phead { height: auto; flex-wrap: wrap; row-gap: 0.375rem; }
  .phead h2 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .phead .tabs { order: 5; flex: 1 1 100%; }
  .pbody { flex-direction: column; }
  .lockerbody .pcontent { max-width: none; }
  .lockerbody .lk-show { order: -1; flex: none; height: clamp(14rem, 38vh, 22rem); min-height: 0; justify-content: flex-end; }
  .lockerbody .presets { width: 100%; max-width: 100%; min-width: 0; } .lockerbody .presets > span { display: none; }
  #c-presets { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: center; }
  /* modals */
  .spc { flex-direction: column; }
}
@media (orientation: portrait) and (max-width: 480px) {
  .r-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (orientation: portrait) and (max-height: 720px) {
  .side { max-height: 7.5rem; }
  .lobby-body { grid-template-rows: auto minmax(7rem, 1fr) auto auto; }
}
@media (orientation: portrait) { .lobby-body .col-r { display: flex; } }
/* the loading art keeps no animation running once the loader is gone (it stayed ticking for the whole session) */
#boot.out .ld-art { animation: none; }
/* portrait panels: the content column always takes the screen width (a centred max-width box in a column flex sized itself to its widest row) */
@media (orientation: portrait) { .pbody > .pcontent { width: 100%; align-self: center; } }
/* portrait HUD: the bottom pills (weekly challenge tracker, mission box) sit above the emote / boost row */
@media (orientation: portrait) {
  .h-track { bottom: calc(4.25rem + var(--sb)); max-width: 70vw; }
  .h-mission { bottom: calc(4.25rem + var(--sb)); max-width: 80vw; }
}
/* world thumbnails never spill out of the Play box: they scroll sideways inside it (padding keeps the 44px hit rows) */
#l-worlds { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0.25rem; } #l-worlds::-webkit-scrollbar { display: none; }
.lobby-body .playbox .pb-opts { min-width: 0; max-width: 100%; }
/* small landscape phones (iPhone SE, small Android): daily missions + Daily reward / Lucky spin stay reachable in a narrow right column */
@media (orientation: landscape) and (max-width: 760px) {
  .lobby-body { grid-template-columns: 11.875rem minmax(0, 1fr) 9.5rem; }
  .lobby-body .col-r { display: flex; }
  .col-r .rw-row { flex-direction: column; }
  .col-r .rwb { flex: none; }
}
/* the (unused since calm1) screen wipe rested just off-screen; in portrait its skewed panels poked into the top-left corner */
#wipe:not(.go):not(.fade) { display: none; }

/* resp1 step6: short landscape phones: sign-in card uses the full height, language row sits under the hero (was under the home bar) */
@media (max-height: 500px) and (orientation: landscape) {
  #s-auth.on { display: grid; grid-template-columns: minmax(0, 22.5rem) auto; justify-content: center; grid-template-rows: 1fr auto; column-gap: clamp(1rem, 4vw, 3rem); row-gap: 0.5rem; align-items: center; }
  #s-auth .auth-wrap { display: contents; }
  #s-auth .auth-hero, #s-auth .auth-card { position: relative; z-index: 1; } /* resp2: display:contents dropped the wrap's stacking, the ::after shade covered hero + card */
  #s-auth .auth-hero { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
  #s-auth .auth-hero .logo img { width: min(3.25rem, 6vw); height: min(3.25rem, 6vw); } #s-auth .auth-hero .logo { gap: 0.5rem; } #s-auth .auth-hero .wm { gap: 0.375rem; } #s-auth .auth-hero .wm .w1, #s-auth .auth-hero .wm .w2 { font-size: min(2rem, 3.9vw); }
  #s-auth .auth-card { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-height: 100%; }
  #s-auth #auth-langs { grid-column: 1; grid-row: 2; justify-self: center; flex-wrap: wrap; }
}
/* resp1 step8: the SUPER SNAKE PRO wordmark fits narrow portrait screens (auth hero + title were wider than 375 px) */
@media (orientation: portrait) {
  .auth-hero .logo { max-width: 100%; justify-content: center; gap: min(0.75rem, 2.5vw); }
  .auth-hero .logo img { width: min(4rem, 13vw); height: min(4rem, 13vw); }
  .auth-hero .wm { gap: min(0.5rem, 1.6vw); } .auth-hero .wm .w1, .auth-hero .wm .w2 { font-size: min(2.5rem, 7.4vw); }
  #title .wm.big { gap: min(0.5rem, 1.6vw); } #title .wm.big .w1, #title .wm.big .w2 { font-size: min(3.375rem, 10vw); }
  #title .t-logo { max-width: 94vw; }
}
/* resp1 step8: daily reward on narrow portrait phones: 4 + 3 grid (day 7 two columns wide) so "+ cosmetic" is not cut */
@media (orientation: portrait) and (max-width: 520px) {
  .cal { grid-template-columns: repeat(4, 1fr); } .cal .cd.d7 { grid-column: span 2; }
}
/* resp1 step10: auth language row wraps on narrow portrait (English was cut at 360 px) */
@media (orientation: portrait) { #auth-langs { flex-wrap: wrap; row-gap: 0.25rem; max-width: 100%; } }
/* resp1 step11: portrait lobby top bar always breaks after settings (on wide portrait, e.g. iPad, the Tier chip jumped up and squeezed the profile under the coins) */
@media (orientation: portrait) {
  #s-lobby .topbar::after { content: ""; order: 5; flex: 0 0 100%; height: 0; margin-top: -0.375rem; }
  #l-season { order: 6; } #l-comp { order: 7; }
}

/* resp2 fix1: short landscape (<= 540 px tall, phones and Safari with toolbars): nothing reaches the screen-centre zone
   around the head. Kill feed in the left column under the score / power chips (2 rows, the older one faded); the banner
   right under the mode pill; one compact toast under the banner slot, between the score cluster and the leaderboard. */
@media (orientation: landscape) and (max-height: 540px) {
  #hud .h-feed, html[dir="rtl"] #hud .h-feed { top: var(--feedT, calc(5rem + var(--st))); left: auto; right: auto; inset-inline-start: var(--feedS, calc(0.625rem + var(--sl))); transform: none; align-items: flex-start; max-width: var(--feedW2, 15rem); gap: 0.125rem; }
  #hud .h-feed div:nth-child(n+3) { display: none; }
  #hud .h-feed div:nth-child(2) { opacity: 0.5; }
  #hud .h-banner { top: var(--bannerT, 2.5rem) !important; max-width: var(--bannerW, 50vw); padding: 0.1875rem 0.75rem; font-size: 0.8125rem; line-height: 1.2; }
  body:has(#hud:not(.x-hide)) #toasts { top: var(--toastT, calc(2.5rem + var(--st))); max-width: var(--toastW, 50vw); gap: 0; }
  body:has(#hud:not(.x-hide)) .toast { padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.2; border-radius: 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* bottom band: a one-row mission box and the first-match hint (which hides the mission / tracker while it shows) */
  #hud .h-mission { min-width: 0; max-width: 50vw; padding: 0.25rem 0.75rem 0.3125rem; }
  #hud .h-mission small { display: none; } #hud .h-mission b { grid-row: 1; grid-column: 1; line-height: 1.25; } #hud .h-mission em { grid-row: 1; grid-column: 2; line-height: 1.25; } #hud .h-mission .mbar { grid-row: 2; height: 0.25rem; margin-top: 0.1875rem; }
  #hud .h-hint { bottom: calc(0.625rem + var(--sb)); max-width: 50vw; padding: 0.25rem 0.75rem; font-size: 0.75rem; }
  #hud:has(#h-fps:not(.x-hide)) .h-hint { bottom: calc(1.375rem + var(--sb)); }
  #hud:has(.h-hint.on) .h-mission, #hud:has(.h-hint.on) .h-track { opacity: 0; }
}
/* resp2 fix1: in a match the (single) toast sits under the banner slot, between the score cluster and the leaderboard */
body:has(#hud:not(.x-hide)) #toasts { top: var(--toastT, calc(3.5rem + var(--st))); max-width: var(--toastW, 50vw); }
/* resp2 fix2: with the FPS line on, the bottom pills (challenge tracker, mission box) sit above it */
@media (orientation: landscape) {
  #hud:has(#h-fps:not(.x-hide)) .h-track, #hud:has(#h-fps:not(.x-hide)) .h-mission { bottom: calc(1.375rem + var(--sb)); }
  #hud .h-fps { line-height: 1.15; } /* Arabic (Cairo) line boxes were 19 px tall and reached the lifted pills */
}

/* ---------- srv1: friends, chat, invites, player card, ids, Special IDs (no new blur layers; buttons >= 44px) ---------- */
#fr-back { width: max(44px, 2.75rem); height: max(44px, 2.75rem); }
#l-friends svg { fill: none; stroke-width: 1.8; }
.so-b { min-height: max(44px, 2.75rem); min-width: max(44px, 2.75rem); padding: 0 0.875rem; gap: 0.375rem; white-space: nowrap; }
.so-b svg, .so-i svg, .so-copy svg, .so-rep svg, .so-x svg, #ch-x svg, #pl-x svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.so-b svg path[d^="M8 5v14"] { fill: currentColor; stroke: none; }
.so-i, .so-x, #ch-x, #pl-x { width: max(44px, 2.75rem); height: max(44px, 2.75rem); flex: none; }
.so-copy, .so-rep { display: inline-grid; place-items: center; min-width: max(44px, 2.75rem); min-height: max(44px, 2.75rem); margin: -0.75rem -0.5rem; vertical-align: middle; color: var(--ivory2); background: none; border: 0; }
.so-copy:hover, .so-rep:hover { color: var(--champ1); }
.so-id { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--champ2); unicode-bidi: isolate; }
.so-n { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 1rem; background: var(--red, #ff4d5e); color: #fff; font-size: 0.625rem; font-style: normal; font-weight: 800; margin-inline-start: 0.25rem; }
.so-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); width: 100%; text-align: start; color: inherit; background: none; }
.pv-card .so-row:first-of-type, .so-pls .so-row:first-child { border-top: 0; }
.so-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.so-who b { font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-who small { font-size: 0.75rem; color: var(--tx2); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.so-acts { display: flex; gap: 0.5rem; flex: none; align-items: center; }
.so-st { display: inline-flex; align-items: center; gap: 0.3125rem; color: var(--tx3); }
.so-st i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #5d5a52; }
.so-st.lobby { color: #8fe3a8; } .so-st.lobby i { background: #39d27a; }
.so-st.match { color: #ffd27a; } .so-st.match i { background: #ffb636; }
.so-own { font-style: normal; color: var(--champ2); font-size: 0.75rem; }
.so-me { text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; }
.so-empty { text-align: center; padding: 0.75rem 0; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; }
.so-off, .so-err { color: #ffb4a8; margin: 0 0 0.625rem; }
.so-myid { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; }
.so-myid > b { font-size: 1.75rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--champ1); margin-inline-end: auto; }
.so-find { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.so-find input { flex: 1; min-width: 0; min-height: max(44px, 2.75rem); padding: 0 0.875rem; border-radius: 0.75rem; border: 1px solid var(--line2); background: rgba(5, 7, 12, 0.6); color: var(--ivory); font-size: 1rem; font-variant-numeric: tabular-nums; }
#s-friends .phead .tabs button { min-height: max(44px, 2.75rem); }
/* chat */
.mcard.so-chat { width: min(38rem, 96vw); height: min(40rem, 94vh); padding: 0.75rem; gap: 0.5rem; overflow: hidden; }
.so-ch { display: flex; align-items: center; gap: 0.625rem; }
.so-ch h2 { margin: 0; font-size: 1.0625rem; }
.so-ch .sp { flex: 1; }
.so-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.375rem; padding: 0.375rem 0.25rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.22); overscroll-behavior: contain; }
.so-m { max-width: 80%; display: flex; flex-direction: column; }
.so-m p { margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; font-size: 0.9375rem; }
.so-m small { font-size: 0.625rem; color: var(--tx3); padding: 0.125rem 0.5rem; display: flex; align-items: center; gap: 0.25rem; }
.so-m.me { align-self: flex-end; align-items: flex-end; } .so-m.me p { background: linear-gradient(180deg, #e9cf8d, #c79a4e); color: #1c1405; border-end-end-radius: 0.25rem; }
.so-m.them { align-self: flex-start; } .so-m.them p { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); border-end-start-radius: 0.25rem; }
.so-emo { display: flex; gap: 0.375rem; overflow-x: auto; }
.so-e { min-width: max(44px, 2.75rem); min-height: max(44px, 2.75rem); border-radius: 0.75rem; font-size: 1.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--ivory); }
.so-e.txt { font-size: 0.875rem; font-weight: 800; }
.so-in { display: flex; gap: 0.5rem; align-items: center; }
.so-in input { flex: 1; min-width: 0; min-height: max(44px, 2.75rem); padding: 0 0.875rem; border-radius: 0.75rem; border: 1px solid var(--line2); background: rgba(5, 7, 12, 0.6); color: var(--ivory); font-size: 1rem; }
.so-in small { font-size: 0.625rem; color: var(--tx3); font-variant-numeric: tabular-nums; }
/* invite popup + player card + players list */
.mcard.so-inv, .mcard.so-pc { width: min(26rem, 92vw); gap: 0.75rem; position: relative; }
.so-ivh, .so-pch { display: flex; align-items: center; gap: 0.875rem; }
.so-ivh h2, .so-pch h2 { text-align: start; margin: 0 0 0.25rem; font-size: 1.125rem; letter-spacing: 0.02em; }
.so-ivb, .so-pca { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.so-ivb .btn, .so-pca .btn { flex: 1; }
.so-pca.sec .btn { flex: 0 1 auto; } .so-pca .btn.warn { color: #ffb4a8; }
.so-pc .so-x { position: absolute; top: 0.375rem; inset-inline-end: 0.375rem; }
.so-ai { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-radius: 1rem; background: rgba(120, 170, 255, 0.14); border: 1px solid rgba(120, 170, 255, 0.35); color: #cfe0ff; font-size: 0.8125rem; }
.mcard.so-pl { width: min(28rem, 94vw); max-height: 90vh; }
.so-pls { overflow-y: auto; }
.so-pr { min-height: max(44px, 2.75rem); cursor: pointer; border-radius: 0.5rem; padding-inline: 0.375rem; }
.so-pr:hover { background: rgba(255, 255, 255, 0.04); }
/* Special IDs */
.so-cur { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.so-cur > span { color: var(--tx2); font-size: 0.8125rem; } .so-cur > b { font-size: 1.375rem; letter-spacing: 0.08em; color: var(--champ1); margin-inline-end: auto; }
#c-content .so-find { margin: 0 0 0.75rem; }
.so-idg { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin-bottom: 0.875rem; }
.item.lk2 .sw.so-idsw { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, rgba(255, 236, 190, 0.18), rgba(10, 13, 21, 0.9)); }
.so-idsw b { font-size: 1.375rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--champ1); white-space: nowrap; overflow: visible; }
.so-idc.k-rep .so-idsw { background: radial-gradient(ellipse at 50% 30%, rgba(255, 210, 110, 0.38), rgba(40, 26, 6, 0.92)); } .so-idc.k-rep .so-idsw b { color: #ffe39a; }
.so-idc.k-seq .so-idsw { background: radial-gradient(ellipse at 50% 30%, rgba(170, 140, 255, 0.32), rgba(18, 12, 40, 0.92)); } .so-idc.k-seq .so-idsw b { color: #e2d6ff; }
.so-idc.lock .so-idsw b { text-decoration: line-through; opacity: 0.55; }
.so-info p { margin: 0.375rem 0 0.625rem; } .so-tiers { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; } .so-tiers b { color: var(--champ1); letter-spacing: 0.08em; margin-inline-end: 0.5rem; }
@media (max-height: 460px) { .mcard.so-chat { height: 94vh; } .so-myid > b { font-size: 1.375rem; } .so-row { padding: 0.3125rem 0; } .so-acts .btn span { display: none; } .so-acts .btn.gold span, .so-acts .btn[data-acc] span { display: inline; } }
@media (max-width: 520px) { .so-acts .btn span { display: none; } .so-acts .btn[data-acc] span, .so-acts .btn[data-dec] span, .so-acts .btn[data-unb] span, .so-acts .btn[data-req] span { display: inline; } .so-m { max-width: 88%; } }
/* ---------- srv2: premium ids, sign-in card, owner panel, finding a server (no new blur layers; buttons >= 44px) ---------- */
.pid { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 800; unicode-bidi: isolate; direction: ltr; }
.pid b, .pid > span { background: linear-gradient(100deg, var(--p0), var(--p1) 45%, var(--p2) 55%, var(--p0)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 800; }
.pid .pid-ic { width: 0.95em; height: 0.95em; flex: none; fill: var(--p1); stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.8; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5)); }
.pid-rep { --p0: #fff0a8; --p1: #f2c230; --p2: #d29516; }
.pid-seq { --p0: #e6ccff; --p1: #b07cff; --p2: #8a5cff; }
.pid-std { --p0: #c4fff6; --p1: #3fe0d6; --p2: #2bb4e8; }
.pid-own { --p0: #ff8a6a; --p1: #ffd36a; --p2: #ff5a4a; }
i.pid-own { font-style: normal; font-size: 0.56em; letter-spacing: 0.12em; padding: 0.1em 0.45em; border-radius: 0.4em; background: linear-gradient(135deg, #b3121b, #ff5a3a 55%, #ffcc4d); color: #fff8e6; -webkit-text-fill-color: #fff8e6; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.so-id.pid { padding: 0.05rem 0.4rem; border-radius: 0.5rem; background: rgba(8, 10, 16, 0.55); border: 1px solid color-mix(in srgb, var(--p1) 45%, transparent); }
.pid-big { font-size: 1.75rem; gap: 0.45rem; } .pid-big .pid-ic { width: 1.4rem; height: 1.4rem; }
@keyframes pidSh { from { background-position: 100% 0; } to { background-position: -120% 0; } }
html:not(.calm):not(.rm) .pid b, html:not(.calm):not(.rm) .pid > span { animation: pidSh 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pid b, .pid > span { animation: none !important; } }
.ac-card .ac-sub { margin: 0 0 0.75rem; line-height: 1.45; }
.ac-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; align-items: center; }
.ac-b { min-height: max(44px, 2.75rem); min-width: max(44px, 2.75rem); padding: 0 1rem; gap: 0.5rem; white-space: nowrap; }
.ac-ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ac-ic.fill { fill: currentColor; stroke: none; } .ac-ic.gl { stroke: none; }
.ac-apple { background: #000; border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.ac-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.ac-gbtn { min-height: max(48px, 3rem); display: inline-flex; align-items: center; }
.ac-gbtn > div:not(:empty) { transform: scale(1.2); transform-origin: center; margin: 0 1.6rem; } /* Google's own 40 px button shown at 48 px */
.ac-st { margin: 0 0 0.25rem; } .ac-st b { color: var(--good, #5be38a); }
.ac-row2 { margin-top: 0.75rem; }
.ac-form { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ac-form.col { flex-direction: column; } .ac-form input { flex: 1 1 12rem; min-height: max(44px, 2.75rem); }
.mcard.ac-em, .mcard.ad-act { width: min(26rem, 92vw); position: relative; } .mcard.ac-em .so-x { position: absolute; top: 0.5rem; inset-inline-end: 0.5rem; }
.ad-entry { border-color: rgba(255, 120, 80, 0.4); background: linear-gradient(180deg, rgba(60, 20, 18, 0.9), rgba(16, 10, 12, 0.95)); }
#ad-x { width: max(44px, 2.75rem); height: max(44px, 2.75rem); }
.ad-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.ad-tile { border-radius: 0.875rem; border: 1px solid rgba(226, 192, 120, 0.16); background: linear-gradient(180deg, rgba(23, 28, 42, 0.93), rgba(10, 13, 21, 0.95)); padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ad-tile small { font-size: 0.6875rem; color: var(--ivory3, #8f8878); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ad-tile b { font-size: 1.375rem; font-variant-numeric: tabular-nums; } .ad-tile.bad b { color: #ff7a85; }
.ad-tb { width: 100%; } .ad-tb td, .ad-tb th { padding: 0.4rem 0.5rem; text-align: start; } .ad-tb tr.dim td { opacity: 0.55; }
.ad-sm { min-height: max(44px, 2.75rem); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: none; }
.ad-pr { min-height: max(48px, 3rem); }
.ad-kvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 1rem; margin-top: 0.75rem; } .ad-kv small { display: block; font-size: 0.6875rem; color: var(--ivory3, #8f8878); } .ad-kv b { font-size: 0.9375rem; overflow-wrap: anywhere; }
.ad-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ad-acts .btn { flex: 1 1 9rem; min-height: max(44px, 2.75rem); }
.ad-bad { color: #ff7a85; font-style: normal; font-weight: 700; } .ad-warn { color: #ffc867; font-style: normal; } .ad-good { color: #5be38a; }
.ad-msg { margin: 0.375rem 0; padding: 0.5rem 0.625rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.05); } .ad-msg.res, .ad-rep.res { opacity: 0.65; }
.ad-dev { display: flex; flex-direction: column; padding: 0.375rem 0; border-top: 1px solid var(--line); } .ad-dev:first-of-type { border-top: 0; }
.ad-vh { margin-bottom: 0.5rem; }
.mm-find { position: fixed; top: calc(3.75rem + var(--st, 0px)); left: 50%; transform: translateX(-50%); z-index: 30; pointer-events: none; transition: opacity .35s; }
.mm-find.out { opacity: 0; }
.mmf-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-radius: 1rem; background: rgba(10, 13, 21, 0.88); border: 1px solid rgba(226, 192, 120, 0.32); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); max-width: min(32rem, 92vw); }
.mmf-card b { display: block; font-size: 0.9375rem; } .mmf-card small { display: block; font-size: 0.75rem; color: var(--ivory2, #cfc6b0); }
.mmf-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #5be38a; flex: none; }
.mm-find.busy .mmf-dot { background: var(--champ1, #e2c078); }
@keyframes mmfP { 50% { opacity: 0.45; } }
html:not(.calm):not(.rm) .mm-find.busy .mmf-dot { animation: mmfP 1.6s ease-in-out infinite; }
@media (max-width: 900px), (max-height: 520px) { .ad-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ad-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-find { top: calc(2.75rem + var(--st, 0px)); } }
@media (max-height: 460px) { .ad-tile b { font-size: 1.125rem; } .ad-tile { padding: 0.4rem 0.6rem; } }
.ac-form.col input { flex: none; width: 100%; }
/* coin1: feedback form + legal links (no new backdrop-filter, no motion) */
.fb-card { max-width: 30rem; width: 100%; }
.fb-card h3 { margin: 0 0 0.375rem; }
.fb-card textarea { width: 100%; min-height: 7.5rem; margin: 0.625rem 0; padding: 0.625rem 0.75rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 12, 22, 0.85); color: inherit; font: inherit; resize: vertical; }
.fb-row { display: flex; gap: 0.5rem; justify-content: flex-end; }
.fb-row .btn, .lg-legal .btn, .ac-legal-row .btn { min-height: max(44px, 2.75rem); }
.lg-legal { margin-top: 0.5rem; }
.ac-legal { margin-top: 0.5rem; }
.lg-legal a.btn { text-decoration: none; }

/* fix1: Locker + Profile tab bars: full 44px touch targets */
#c-tabs button, #pr-tabs button { height: max(44px, 2.75rem); min-width: max(44px, 2.75rem); }
#s-custom .icon-btn.back, #s-profile .icon-btn.back { width: max(44px, 2.75rem); height: max(44px, 2.75rem); }
#s-custom .seg button, #s-profile .seg button { min-height: max(44px, 2.75rem); min-width: max(44px, 2.75rem); }
#s-custom #c-useed, #s-profile .ttl { min-height: max(44px, 2.75rem); }
#s-profile .pv-link { min-width: max(44px, 2.75rem); }
/* grow1: challenge result, clip / challenge buttons, room QR */
.results .r-btns { flex-wrap: wrap; } .r-g svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #m-qr .btn { min-height: 2.75rem; }
@media (max-height: 440px) { .results .r-btns { flex-wrap: nowrap; } .results .r-btns .r-g { flex: none; width: 2.75rem; min-width: 2.75rem; padding: 0; } .results .r-g span { display: none; } }
.r-chres { margin: 0.25rem auto 0; padding: 0.375rem 0.875rem; border-radius: 0.75rem; background: rgba(255, 120, 100, 0.14); border: 1px solid rgba(255, 140, 120, 0.35); font-weight: 700; text-align: center; max-width: 30rem; }
.r-chres.win { background: rgba(255, 210, 90, 0.16); border-color: rgba(255, 210, 90, 0.45); }
.room .icon-btn#l-qr, .room .icon-btn#l-share { width: 2.75rem; height: 2.75rem; }
.qr-card { text-align: center; max-width: 22rem; } .qr-card canvas { display: block; width: min(15rem, 52vmin); height: auto; margin: 0.5rem auto; border-radius: 0.5rem; image-rendering: pixelated; }
.qr-url { font-size: 0.75rem; opacity: 0.75; word-break: break-all; margin: 0 0 0.5rem; }
#replay.rp-cap #rp-again { display: none; }
/* admin2: owner tools + announcement banner */
.ann-bar { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(92vw, 640px); display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem 0.35rem 0.75rem; border-radius: 0.875rem; background: linear-gradient(180deg, rgba(40, 32, 12, 0.95), rgba(22, 18, 8, 0.95)); border: 1px solid rgba(255, 205, 96, 0.45); color: #ffe7a8; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.ann-bar p { margin: 0; font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; max-height: 2.6em; overflow: hidden; }
.ann-bar .ann-x { min-width: 44px; min-height: 44px; flex: none; }
.a2-chart { width: 100%; height: auto; max-height: 150px; } .a2-chart rect.a { fill: #f2c14e; } .a2-chart rect.n { fill: #4fd1a5; } .a2-chart text { fill: #aab; font-size: 9px; } .a2-chart text.v { fill: #ffe7a8; font-size: 8px; }
.a2-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: middle; } .a2-leg i.a { background: #f2c14e; } .a2-leg i.n { background: #4fd1a5; }
.a2-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0.5rem; }
.a2-chip { min-height: 44px; min-width: 44px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #dfe; font: inherit; font-size: 0.85rem; cursor: pointer; }
.a2-chip.on { background: rgba(79, 209, 165, .18); border-color: rgba(79, 209, 165, .6); } .a2-chip.off { background: rgba(255, 90, 90, .12); border-color: rgba(255, 90, 90, .5); color: #f99; text-decoration: line-through; }
.a2-room { padding: 0.4rem 0; border-top: 1px solid rgba(255,255,255,.07); } .a2-pl { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; min-height: 44px; }
.a2-sel { width: 100%; min-height: 44px; border-radius: 0.6rem; background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.2); padding: 0 0.6rem; font: inherit; }
.a2-cats { flex-wrap: wrap; } .a2-cats button { min-height: 44px; } .a2-chk { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
#ad-tabs button { min-height: 44px; min-width: 44px; } .ad-sm { min-height: 44px; } .a2-px td, .a2-px th { padding: 0.2rem 0.4rem; }
@media (max-height: 460px) { #ad-tabs button { padding: 0 0.55rem; font-size: 0.8rem; } .ann-bar { top: 4px; } }
/* ---------- play2: weekend rule pill (lobby, centre column), home-screen icon picker, crown bounty, one-thumb ---------- */
.mut-pill { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; max-width: min(22rem, 100%); padding: 0.3rem 0.75rem 0.3rem 0.5rem; border-radius: 0.875rem; border-color: rgba(120, 220, 160, 0.4); color: #e8fff0; }
.mut-pill.live { border-color: rgba(255, 205, 96, 0.6); color: #ffe7a8; }
.mut-pill .mi { font-size: 1.25rem; line-height: 1; flex: none; }
.mut-pill .mt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mut-pill .mt b { font-size: 0.8rem; font-weight: 700; }
.mut-pill .mt small { font-size: 0.68rem; opacity: 0.85; overflow-wrap: anywhere; }
.p2-ics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.p2-icb { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0.5rem 0.25rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: inherit; font: inherit; cursor: pointer; }
.p2-icb img { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; }
.p2-icb b { font-size: 0.8rem; } .p2-icb small { font-size: 0.68rem; opacity: 0.8; text-align: center; }
.p2-icb.on { border-color: rgba(255, 205, 96, 0.8); background: rgba(255, 205, 96, 0.12); }
.p2-icb.lock img { filter: grayscale(1) brightness(0.55); }
#h-lb .bty { font-style: normal; color: #ffd23a; font-weight: 700; }
html.one-thumb.touch #boost { display: none; }