/* ===================================================================================================== PIT STOP ARCADE — design system (SPEC §11). Owned by UI-A; every UI file builds on it. Landscape phones first (heights 330–430 CSS px): the root font size follows the viewport height, so everything sized in rem scales together. Logical properties everywhere so Arabic (RTL) mirrors. Motion uses transform/opacity only. ===================================================================================================== */ /* ---- Fonts: Changa (vendored woff2, Arabic + Latin subsets) ---------------------------------------- */ @font-face { font-family: 'Changa'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/changa-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/changa-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/changa-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 700; font-display: swap; src: url(../vendor/fonts/changa-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 800; font-display: swap; src: url(../vendor/fonts/changa-arabic-800-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 400; font-display: swap; src: url(../vendor/fonts/changa-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 500; font-display: swap; src: url(../vendor/fonts/changa-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/changa-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 700; font-display: swap; src: url(../vendor/fonts/changa-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Changa'; font-style: normal; font-weight: 800; font-display: swap; src: url(../vendor/fonts/changa-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tokens ------------------------------------------------------------------------------------- */ :root { --brand: #ff6a00; --brand-hot: #ff8a1f; --brand-deep: #c24a00; --bg: #0b0b0f; --panel: rgba(14, 14, 20, .74); --panel-solid: #15151c; --panel-2: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .10); --text: #f5f5f7; --muted: #a2a3ad; --ok: #35d07f; --warn: #ffd21f; --bad: #ff3d5a; --blue: #2f7bff; --pink: #ff3d9a; --radius: 14px; --radius-s: 9px; --gap: 10px; --font: 'Changa', system-ui, sans-serif; --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --ease: cubic-bezier(.2, .8, .2, 1); /* extensions (shared with UI-B) */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --skew: -8deg; /* sporty forward lean; mirrored in RTL */ --unskew: 8deg; --line-2: rgba(255, 255, 255, .16); --panel-3: rgba(255, 255, 255, .10); --glass-bg: linear-gradient(180deg, rgba(30, 30, 42, .80) 0%, rgba(12, 12, 18, .76) 100%); --glass-blur: 12px; --hi: inset 0 1px 0 rgba(255, 255, 255, .09); --shadow-1: 0 6px 18px rgba(0, 0, 0, .34); --shadow-2: 0 18px 44px rgba(0, 0, 0, .46); --glow: 0 0 0 1px rgba(255, 106, 0, .6), 0 8px 26px rgba(255, 106, 0, .32); --grad-brand: linear-gradient(180deg, #ff9a3c 0%, #ff6a00 50%, #e05300 100%); --pad-x: clamp(10px, 2.4vw, 26px); --pad-y: clamp(7px, 2.4vh, 16px); --tap: max(44px, 3.05rem); --z-game: 0; --z-hud: 10; --z-touch: 15; --z-ui: 30; --z-modal: 40; --z-toasts: 60; --z-rotate: 90; --z-boot: 100; /* 14.4px at 390 px tall; 13.3px at 360; 15.9px at 430 */ font-size: clamp(12.5px, 3.7vh, 16px); color-scheme: dark; } html[dir="rtl"] { --skew: 8deg; --unskew: -8deg; } /* ---- Reset -------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; line-height: 1.35; overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { position: fixed; inset: 0; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } button, input, select, textarea { font: inherit; color: inherit; } button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--brand-hot); outline-offset: 2px; } [hidden] { display: none !important; } ::selection { background: rgba(255, 106, 0, .45); } /* ---- App layers --------------------------------------------------------------------------------- */ #game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: var(--z-game); background: var(--bg); touch-action: none; } #hud { position: fixed; inset: 0; z-index: var(--z-hud); pointer-events: none; } #touch { position: fixed; inset: 0; z-index: var(--z-touch); pointer-events: none; } #ui { position: fixed; inset: 0; z-index: var(--z-ui); pointer-events: none; overflow: hidden; } #ui > .screen, #ui > .modal-layer { pointer-events: auto; } /* Toasts: the one layer above every screen, HUD and modal (only the rotate prompt and boot cover sit higher). widgets.js placeToasts() moves the column off any top-row item it would cover (header title and buttons, player card, chips, HUD plates): into the widest free gap of the top row, else just below. */ #toasts { position: fixed; z-index: var(--z-toasts); top: calc(var(--safe-t) + .55rem); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; width: max-content; max-width: min(92vw, 34rem); } /* ---- Typography --------------------------------------------------------------------------------- */ .title-xl { font-size: clamp(2rem, 8vh, 3.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; } .title-l { font-size: 1.55rem; font-weight: 800; line-height: 1.08; } .title-m { font-size: 1.15rem; font-weight: 700; line-height: 1.18; } .kicker { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-hot); line-height: 1.25; } html[lang="ar"] .kicker, [dir="rtl"] .kicker { letter-spacing: 0; font-size: .8rem; } html[lang="ar"] .title-xl { letter-spacing: 0; } .muted { color: var(--muted); } .small-text { font-size: .8rem; } .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ico { display: inline-flex; flex: none; width: 1em; height: 1em; line-height: 0; vertical-align: -.14em; } .ico svg, .ico > svg { width: 100%; height: 100%; } [dir="rtl"] [data-flip] { transform: scaleX(-1); } /* ---- Layout helpers ------------------------------------------------------------------------------ */ .row { display: flex; flex-direction: row; gap: var(--gap); } .col { display: flex; flex-direction: column; gap: var(--gap); } .grow { flex: 1 1 0; min-width: 0; min-height: 0; } .center { display: flex; align-items: center; justify-content: center; text-align: center; } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } .wrap { flex-wrap: wrap; } .mid { align-items: center; } .scroll { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 .6rem, #000 calc(100% - .8rem), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 .6rem, #000 calc(100% - .8rem), transparent 100%); } .scroll::-webkit-scrollbar { display: none; } .scroll-x { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .7rem, #000 calc(100% - .7rem), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 .7rem, #000 calc(100% - .7rem), transparent 100%); } .scroll-x::-webkit-scrollbar { display: none; } .scroll-x > * { scroll-snap-align: start; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- Screens ------------------------------------------------------------------------------------ */ .screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--gap); overflow: hidden; padding: calc(var(--safe-t) + var(--pad-y)) calc(var(--safe-r) + var(--pad-x)) calc(var(--safe-b) + var(--pad-y)) calc(var(--safe-l) + var(--pad-x)); /* fill 'backwards' + no will-change: once entered, a screen must not stay a backdrop root, or the glass panels inside it would stop blurring the 3D canvas behind */ animation: scr-in .34s var(--ease-out) backwards; } .screen[data-enter="back"] { animation-name: scr-in-back; } .screen[data-enter="fade"] { animation: scr-fade .26s var(--ease) backwards; } .screen[data-enter="zoom"] { animation: scr-zoom .42s var(--ease-out) backwards; } .screen[data-enter="none"] { animation: none; } .screen.leaving { pointer-events: none !important; z-index: 0; } @keyframes scr-in { from { opacity: 0; transform: translateX(2.2rem); } to { opacity: 1; transform: none; } } @keyframes scr-in-back { from { opacity: 0; transform: translateX(-2.2rem); } to { opacity: 1; transform: none; } } [dir="rtl"] .screen { animation-name: scr-in-rtl; } [dir="rtl"] .screen[data-enter="back"] { animation-name: scr-in-back-rtl; } @keyframes scr-in-rtl { from { opacity: 0; transform: translateX(-2.2rem); } to { opacity: 1; transform: none; } } @keyframes scr-in-back-rtl { from { opacity: 0; transform: translateX(2.2rem); } to { opacity: 1; transform: none; } } @keyframes scr-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes scr-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } .screen-header { display: flex; align-items: center; gap: .7rem; min-height: var(--tap); flex: none; } .screen-header .title-l, .screen-header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .screen-header > .grow { display: flex; flex-direction: column; justify-content: center; } /* staggered entrance for direct children */ .stagger > * { animation: rise-in .46s var(--ease-out) backwards; } .stagger > :nth-child(1) { animation-delay: .04s; } .stagger > :nth-child(2) { animation-delay: .09s; } .stagger > :nth-child(3) { animation-delay: .14s; } .stagger > :nth-child(4) { animation-delay: .19s; } .stagger > :nth-child(5) { animation-delay: .24s; } .stagger > :nth-child(6) { animation-delay: .29s; } .stagger > :nth-child(n+7) { animation-delay: .33s; } /* Individual translate/scale compose with an element's own transform (skewed buttons keep their skew). */ @keyframes rise-in { from { opacity: 0; translate: 0 .8rem; } to { opacity: 1; translate: 0 0; } } @keyframes pop-in { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } } @keyframes pulse-soft { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } } /* ---- Surfaces ----------------------------------------------------------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .glass { position: relative; isolation: isolate; background: var(--glass-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--hi); } /* The blur lives on a childless pseudo-element: a backdrop-filter element whose descendants make their own compositing layers (masked .scroll lists) renders those regions with a doubled backdrop in Chromium. */ .glass::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25); backdrop-filter: blur(var(--glass-blur)) saturate(1.25); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass { background: linear-gradient(180deg, rgba(26, 26, 36, .96), rgba(16, 16, 23, .95)); } } /* Medium quality: a smaller blur kernel (fewer taps per frame over the live canvas), slightly denser glass. Low quality / weak GPUs: no live blur at all. ui.js sets these classes from the resolved quality preset. */ html.midfx { --glass-blur: 7px; --glass-bg: linear-gradient(180deg, rgba(30, 30, 42, .84) 0%, rgba(12, 12, 18, .80) 100%); } html.lowfx .glass::after { -webkit-backdrop-filter: none; backdrop-filter: none; } html.lowfx .glass { background: linear-gradient(180deg, rgba(26, 26, 36, .95), rgba(15, 15, 22, .93)); } .pad { padding: .8rem .9rem; } .notch { position: relative; } .notch::before { content: ''; position: absolute; top: -1px; inset-inline-start: 1.1rem; width: 2.6rem; height: 3px; background: var(--brand); border-radius: 0 0 3px 3px; box-shadow: 0 0 12px rgba(255, 106, 0, .7); } .divider { height: 1px; background: var(--line); flex: none; } /* Full-screen gradient shades/scrims get their own compositing layer: painted into a shared layer next to animated content, Chromium re-rasterizes them tile by tile and leaves hard-edged double-darkened rectangles. */ .mn-shade, .lb-shade, .ld-scrim, .ti-bg, .scrim-layer { will-change: transform; } /* ---- Buttons ------------------------------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--tap); padding: 0 1.15rem; margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .045)); color: var(--text); font: 700 1rem/1.1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; isolation: isolate; overflow: hidden; vertical-align: middle; transform: skewX(var(--skew)); box-shadow: var(--hi), 0 4px 12px rgba(0, 0, 0, .22); transition: transform .14s var(--ease), box-shadow .2s var(--ease), border-color .2s, background-color .2s, color .2s, opacity .2s; } .btn > * { display: inline-flex; align-items: center; transform: skewX(var(--unskew)); } .btn > .lbl { display: inline-block; } .btn::before { content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0)); transition: opacity .2s; } .btn .ico { font-size: 1.28em; } .btn .sub { display: block; font-size: .72em; font-weight: 600; opacity: .8; line-height: 1.15; } @media (hover: hover) { .btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, .3); } .btn.primary:hover:not(:disabled) { border-color: rgba(255, 214, 180, .8); } } .btn:active:not(:disabled) { transform: skewX(var(--skew)) translateY(1px) scale(.965); } .btn:active:not(:disabled)::before { opacity: .45; } .btn:focus-visible { outline: 2px solid var(--brand-hot); outline-offset: 3px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .42; cursor: default; box-shadow: none; } .btn.primary { color: #fff; border-color: rgba(255, 190, 140, .6); background: var(--grad-brand); text-shadow: 0 1px 1px rgba(110, 30, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(120, 30, 0, .35), 0 6px 18px rgba(255, 106, 0, .36); } .btn.primary::before { background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); } .btn.primary.big::after, .btn.shine::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 35%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); animation: btn-shine 3.8s var(--ease) infinite; } .btn.primary:disabled::after { animation: none; opacity: 0; } @keyframes btn-shine { 0%, 60% { transform: translateX(0); } 100% { transform: translateX(520%); } } .btn.ghost { background: rgba(255, 255, 255, .02); border-color: var(--line); box-shadow: none; } .btn.ghost::before { opacity: .35; } .btn.danger { color: #fff; border-color: rgba(255, 170, 180, .5); background: linear-gradient(180deg, #ff6d82, #ff3d5a 55%, #d8203f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(255, 61, 90, .3); } .btn.ok { color: #04210f; border-color: rgba(190, 255, 215, .7); background: linear-gradient(180deg, #6ff0a6, #35d07f 55%, #1fae62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px rgba(53, 208, 127, .3); text-shadow: none; } .btn.big { min-height: max(50px, 3.7rem); padding: 0 1.6rem; font-size: 1.22rem; font-weight: 800; border-radius: 11px; } .btn.small { min-height: max(36px, 2.5rem); padding: 0 .8rem; font-size: .86rem; gap: .38em; } .btn.icon { width: var(--tap); padding: 0; flex: none; } .btn.icon.small { width: max(36px, 2.5rem); } .btn.icon.big { width: max(50px, 3.7rem); } .btn.icon .ico { font-size: 1.35em; } .btn.active { color: var(--brand-hot); border-color: var(--brand); background: linear-gradient(180deg, rgba(255, 106, 0, .26), rgba(255, 106, 0, .10)); box-shadow: var(--glow); } .btn.primary.active { color: #fff; } .btn.block { display: flex; width: 100%; } .btn .spinner { width: 1.1em; height: 1.1em; } /* ---- Chips, badges, dots -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: .35em; min-height: 1.85rem; padding: 0 .72rem; border-radius: 999px; background: rgba(10, 10, 16, .55); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--text); white-space: nowrap; line-height: 1; } .chip .ico { font-size: 1.1em; } .chip.accent { border-color: rgba(255, 106, 0, .5); color: var(--brand-hot); background: rgba(255, 106, 0, .1); } button.chip { cursor: pointer; } .badge { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .25em; min-height: 1.3rem; padding: 0 .5rem; font-size: .66rem; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; } .badge::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--bc, var(--brand)); transform: skewX(var(--skew)); } [dir="rtl"] .badge, html[lang="ar"] .badge { letter-spacing: 0; font-size: .72rem; } .badge.ok { --bc: var(--ok); color: #04210f; } .badge.warn { --bc: var(--warn); color: #231a00; } .badge.bad { --bc: var(--bad); } .badge.blue { --bc: var(--blue); } .badge.pink { --bc: var(--pink); } .badge.dim { --bc: rgba(255, 255, 255, .14); color: var(--text); } .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--dc, var(--muted)); flex: none; } .dot.live { position: relative; } .dot.live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--dc); animation: dot-live 1.8s ease-out infinite; } @keyframes dot-live { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } } .spinner { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: currentColor; animation: spin .8s linear infinite; flex: none; } /* ---- Tabs / segmented ------------------------------------------------------------------------------ */ .tabs { display: flex; gap: .25rem; padding: .2rem; border-radius: var(--radius-s); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: max(36px, 2.5rem); padding: 0 .9rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; font-size: .9rem; cursor: pointer; transition: color .2s, background-color .2s; } .tab.active { color: #fff; background: var(--panel-3); border-color: var(--line); } .tab.active::after { content: ''; position: absolute; inset-inline: .7rem; bottom: .16rem; height: 3px; border-radius: 3px; background: var(--brand); box-shadow: 0 0 10px rgba(255, 106, 0, .8); } .seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-s); background: rgba(0, 0, 0, .34); border: 1px solid var(--line); max-width: 100%; } .seg > button { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: max(34px, 2.35rem); min-width: 2.5rem; padding: 0 .75rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: color .2s, background-color .2s, transform .12s var(--ease); } .seg > button:active { transform: scale(.95); } .seg > button.active { color: #fff; background: linear-gradient(180deg, #ff8f33, #e85a00); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(255, 106, 0, .3); text-shadow: 0 1px 1px rgba(100, 30, 0, .4); } .seg.small > button { min-height: max(30px, 2.05rem); padding: 0 .6rem; font-size: .8rem; min-width: 2.2rem; } .seg:has(> button:disabled) { opacity: .8; } /* ---- Toggle: label.toggle > input[type=checkbox] + span --------------------------------------------- */ .toggle { position: relative; display: inline-block; flex: none; width: 3.1rem; height: 1.8rem; cursor: pointer; } .toggle > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .toggle > span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid var(--line-2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); transition: background-color .22s, border-color .22s; } .toggle > span::after { content: ''; position: absolute; top: 50%; inset-inline-start: .2rem; width: 1.32rem; height: 1.32rem; margin-top: -.66rem; border-radius: 50%; background: linear-gradient(180deg, #fff, #dcdce2); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .26s var(--ease-back); } .toggle > input:checked + span { background: linear-gradient(180deg, #ff8f33, #e85a00); border-color: rgba(255, 190, 140, .55); } .toggle > input:checked + span::after { transform: translateX(1.28rem); } [dir="rtl"] .toggle > input:checked + span::after { transform: translateX(-1.28rem); } .toggle > input:focus-visible + span { outline: 2px solid var(--brand-hot); outline-offset: 2px; } .toggle > input:disabled + span { opacity: .45; } /* ---- Slider: input[type=range].slider (fill via --fill or --p) ------------------------------------ */ input[type="range"].slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; } input[type="range"].slider::-webkit-slider-runnable-track { height: .42rem; border-radius: 999px; background: linear-gradient(90deg, var(--brand) 0, var(--brand-hot) var(--fill, var(--p, 50%)), rgba(255, 255, 255, .14) var(--fill, var(--p, 50%))); } [dir="rtl"] input[type="range"].slider::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--brand) 0, var(--brand-hot) var(--fill, var(--p, 50%)), rgba(255, 255, 255, .14) var(--fill, var(--p, 50%))); } input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.4rem; height: 1.4rem; margin-top: -.49rem; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); transition: transform .15s var(--ease-back); } input[type="range"].slider:active::-webkit-slider-thumb { transform: scale(1.18); } input[type="range"].slider::-moz-range-track { height: .42rem; border-radius: 999px; background: rgba(255, 255, 255, .14); } input[type="range"].slider::-moz-range-progress { height: .42rem; border-radius: 999px; background: var(--brand); } input[type="range"].slider::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; border: 3px solid var(--brand); } /* ---- Swatches ---------------------------------------------------------------------------------- */ .swatch-row { display: flex; flex-wrap: wrap; gap: .42rem; } .swatch { position: relative; width: 2.1rem; height: 2.1rem; flex: none; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, .2); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .28); transition: transform .18s var(--ease-back), box-shadow .2s, border-color .2s; } .swatch:active { transform: scale(.9); } .swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--brand), 0 4px 12px rgba(0, 0, 0, .45); transform: scale(1.08); } .swatch.custom { background: conic-gradient(from 90deg, #ff3d3d, #ffd21f, #35d07f, #1ee3e3, #2f7bff, #b44dff, #ff3d9a, #ff3d3d); display: grid; place-items: center; color: #fff; } .swatch.custom .ico { font-size: 1.05rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); } .swatch.custom > input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; } /* ---- Cards ------------------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .25rem; padding: .55rem .65rem; margin: 0; border-radius: var(--radius-s); border: 1px solid var(--line); color: var(--text); text-align: start; font: inherit; cursor: pointer; background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03)); box-shadow: var(--hi); isolation: isolate; overflow: hidden; transition: transform .16s var(--ease), border-color .2s, box-shadow .25s, background-color .2s; } button.card { -webkit-appearance: none; appearance: none; } @media (hover: hover) { .card:hover { border-color: rgba(255, 255, 255, .24); } } .card:active { transform: scale(.972); } .card.active { border-color: var(--brand); background: linear-gradient(180deg, rgba(255, 106, 0, .24), rgba(255, 106, 0, .07)); box-shadow: inset 0 0 0 1px var(--brand), 0 6px 20px rgba(255, 106, 0, .26); } .card:disabled { cursor: default; opacity: .6; } .card.checkable.active::after { content: ''; position: absolute; top: .3rem; inset-inline-end: .3rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); animation: pop-in .28s var(--ease-back) backwards; } /* ---- Stepper (widgets.stepper) -------------------------------------------------------------------- */ .stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-s); background: rgba(0, 0, 0, .34); border: 1px solid var(--line); } .stepper > button { width: max(34px, 2.35rem); height: max(34px, 2.35rem); display: grid; place-items: center; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .08); color: var(--text); cursor: pointer; transition: transform .12s var(--ease), background-color .2s; } .stepper > button:active:not(:disabled) { transform: scale(.9); background: rgba(255, 106, 0, .35); } .stepper > button:disabled { opacity: .3; cursor: default; } .stepper > button .ico { font-size: 1.05rem; } .stepper > output { min-width: 2.6rem; text-align: center; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; } /* ---- Modal / dialog ------------------------------------------------------------------------------ */ .modal-layer { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: calc(var(--safe-t) + .8rem) calc(var(--safe-r) + 1rem) calc(var(--safe-b) + .8rem) calc(var(--safe-l) + 1rem); background: radial-gradient(90% 90% at 50% 50%, rgba(8, 8, 12, .55), rgba(4, 4, 7, .78)); pointer-events: auto; animation: fade-in .2s var(--ease) both; } .modal { position: relative; width: min(27rem, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .55rem; padding: 1.05rem 1.2rem 1rem; border-radius: 18px; overflow: auto; scrollbar-width: none; background: linear-gradient(180deg, rgba(34, 34, 46, .96), rgba(16, 16, 23, .97)); border: 1px solid var(--line-2); box-shadow: var(--shadow-2), var(--hi); animation: modal-in .34s var(--ease-back) both; } .modal::before { content: ''; position: absolute; top: 0; inset-inline-start: 1.2rem; width: 3.2rem; height: 3px; background: var(--brand); border-radius: 0 0 3px 3px; box-shadow: 0 0 14px rgba(255, 106, 0, .8); } .modal.wide { width: min(36rem, 100%); } .modal-head { display: flex; align-items: center; gap: .6rem; } .modal-head .ico-badge { flex: none; } .modal-title { font-size: 1.28rem; font-weight: 800; line-height: 1.15; } .modal-text { color: #c9cad3; font-size: .95rem; line-height: 1.5; } .modal-body { min-height: 0; } .modal-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; margin-top: .35rem; } .modal-actions .btn { min-width: 6.5rem; } .modal-x { position: absolute; top: .45rem; inset-inline-end: .45rem; } .modal-layer.closing { animation: fade-out .18s var(--ease) both; pointer-events: none; } .modal-layer.closing .modal { animation: modal-out .18s var(--ease) both; } @keyframes modal-in { from { opacity: 0; transform: translateY(1rem) scale(.94); } to { opacity: 1; transform: none; } } @keyframes modal-out { to { opacity: 0; transform: scale(.96); } } .ico-badge { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 9px; font-size: 1.25rem; color: #fff; background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 12px rgba(255, 106, 0, .35); transform: skewX(var(--skew)); } .ico-badge > * { transform: skewX(var(--unskew)); } .ico-badge.dim { background: rgba(255, 255, 255, .1); box-shadow: var(--hi); color: var(--brand-hot); } .ico-badge.bad { background: linear-gradient(180deg, #ff6d82, #d8203f); box-shadow: 0 4px 12px rgba(255, 61, 90, .35); } /* ---- Toasts (#toasts) ---------------------------------------------------------------------------- */ .toast { display: flex; align-items: center; gap: .5rem; max-width: 100%; padding: .42rem 1rem .42rem .55rem; border-radius: 999px; background: linear-gradient(180deg, rgba(34, 34, 46, .95), rgba(18, 18, 26, .95)); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); font-weight: 700; font-size: .9rem; line-height: 1.2; animation: toast-in .38s var(--ease-back) both; } .toast .ico { font-size: 1.15rem; color: var(--tc, var(--brand-hot)); } .toast .toast-ico { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: color-mix(in srgb, var(--tc, #ff6a00) 22%, transparent); flex: none; } .toast.out { animation: toast-out .24s var(--ease) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(-.8rem) scale(.9); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(-.5rem) scale(.96); } } /* ---- Code input (4 boxes) ------------------------------------------------------------------------ */ .code-input { position: relative; display: inline-flex; gap: .45rem; direction: ltr; } .code-input > input.code-real { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent; cursor: text; -webkit-user-select: none; user-select: none; text-transform: uppercase; } .code-box { position: relative; display: grid; place-items: center; width: clamp(2.7rem, 6.2vw, 3.5rem); height: clamp(3.2rem, 7.6vw, 4.1rem); border-radius: 11px; border: 2px solid rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25)); font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); transition: border-color .18s, background-color .18s, transform .18s var(--ease-back); } .code-box.filled { border-color: rgba(255, 138, 31, .55); background: linear-gradient(180deg, rgba(255, 106, 0, .16), rgba(255, 106, 0, .05)); animation: pop-in .22s var(--ease-back) backwards; } .code-input.focus .code-box.cur { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 106, 0, .22), inset 0 2px 6px rgba(0, 0, 0, .4); } .code-input.focus .code-box.cur::after { content: ''; position: absolute; bottom: .6rem; width: 1.1rem; height: 3px; border-radius: 2px; background: var(--brand-hot); animation: caret 1s steps(2) infinite; } .code-input.ok .code-box { border-color: rgba(53, 208, 127, .75); } .code-input.error .code-box { border-color: var(--bad); background: linear-gradient(180deg, rgba(255, 61, 90, .16), rgba(255, 61, 90, .05)); } .code-input.shake { animation: shake .42s var(--ease) both; } @keyframes caret { 50% { opacity: 0; } } /* ---- QR ---------------------------------------------------------------------------------------- */ .qr { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 6%; line-height: 0; } .qr svg { width: 100%; height: 100%; } /* ---- Player chip --------------------------------------------------------------------------------- */ .player-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.9rem; padding: 0 .65rem 0 .3rem; border-radius: 999px; background: rgba(10, 10, 16, .6); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; max-width: 11rem; } .player-chip .pc-dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--pc, var(--brand)); display: grid; place-items: center; color: rgba(0, 0, 0, .7); font-size: .8rem; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); } .player-chip .pc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-chip .pc-lv { color: var(--muted); font-size: .7rem; font-weight: 600; } .player-chip.me { border-color: rgba(255, 106, 0, .6); background: rgba(255, 106, 0, .14); } /* ---- Level badge + XP bar ------------------------------------------------------------------------ */ .lvl { display: inline-grid; place-items: center; min-width: 2.7rem; height: 1.45rem; padding: 0 .4rem; position: relative; z-index: 0; font-weight: 800; font-size: .78rem; color: #fff; line-height: 1; white-space: nowrap; } .lvl::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 5px; background: var(--grad-brand); transform: skewX(var(--skew)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } .xpbar { position: relative; height: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; transform: skewX(var(--skew)); } .xpbar > i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--x, 0)); background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-hot)); border-radius: inherit; transition: transform .8s var(--ease-out); } [dir="rtl"] .xpbar > i { transform-origin: right center; } /* ---- Net status chip ------------------------------------------------------------------------------ */ .net-chip { --dc: var(--muted); gap: .45em; } .net-chip[data-state="online"] { --dc: var(--ok); } .net-chip[data-state="offline"] { --dc: var(--bad); color: #ffc2cc; } .net-chip[data-state="connecting"] { --dc: var(--warn); } .net-chip[data-state="connecting"] .dot { animation: pulse-soft 1s ease-in-out infinite; } /* ---- Map art (theme gradient + silhouette + optional track outline) --------------------------------- */ .map-art { position: relative; overflow: hidden; background: #222 var(--art, none); background-size: cover; isolation: isolate; } .map-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map-art .ma-track { position: absolute; inset: 8% 10% 22% 10%; width: auto; height: auto; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); } .map-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 35%, rgba(0, 0, 0, .12)); pointer-events: none; } /* ---- Empty states --------------------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; color: var(--muted); padding: .8rem; } .empty .ico { font-size: 1.9rem; color: rgba(255, 255, 255, .28); } .empty b { color: var(--text); font-weight: 700; font-size: .95rem; line-height: 1.3; } .empty > span:not(.ico):not(.spinner) { font-size: .8rem; line-height: 1.4; max-width: 18rem; } /* ===================================================================================================== Rotate overlay (portrait phones) + boot splash extras ===================================================================================================== */ #rotate { position: fixed; inset: 0; z-index: var(--z-rotate); display: none; place-items: center; text-align: center; padding: 24px; color: var(--text); font-family: var(--font); background: radial-gradient(110% 60% at 50% 46%, #2a1406 0%, #0b0b0f 62%); } @media (orientation: portrait) and (max-width: 900px) { #rotate { display: grid; } } #rotate .rot-in { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px; } #rotate .rot-phone svg { width: 128px; height: 128px; overflow: visible; } #rotate .rot-device { transform-origin: 60px 60px; animation: rot-turn 2.8s var(--ease) infinite; } #rotate .rot-arc { animation: rot-arc 2.8s var(--ease) infinite; } #rotate .rot-title { font-size: 22px; font-weight: 800; line-height: 1.2; } #rotate .rot-text { font-size: 15px; color: var(--muted); } #rotate .rot-alt { font-size: 13px; color: rgba(255, 255, 255, .38); margin-top: 6px; } @keyframes rot-turn { 0%, 18% { transform: rotate(0deg); } 50%, 78% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } @keyframes rot-arc { 0%, 18% { opacity: .2; } 40%, 60% { opacity: 1; } 100% { opacity: .2; } } /* ===================================================================================================== UI-A screens: title (.ti-), menu (.mn-), friends (.fr-), lobby (.lb-), loading (.ld-) ===================================================================================================== */ /* ---- Brand lockup (shared by title + menu) --------------------------------------------------------- */ .logo { direction: ltr; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; } .logo-mark { display: block; flex: none; } .logo-word { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; white-space: nowrap; transform: skewX(-10deg); } .logo-word b { font-weight: 800; color: var(--brand); } .logo-ar { direction: rtl; font-weight: 800; color: var(--brand-hot); white-space: nowrap; } /* ---- Title ---------------------------------------------------------------------------------------- */ .ti { cursor: pointer; gap: 0; } .ti:focus, .ti:focus-visible { outline: none; } /* The logo column owns the reading-start side; the showroom kart turns on the other side (setSide). */ .ti-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(36% 60% at 27% 47%, rgba(255, 106, 0, .24), rgba(255, 106, 0, 0) 72%), linear-gradient(90deg, rgba(8, 8, 12, .84) 0%, rgba(8, 8, 12, .62) 36%, rgba(8, 8, 12, .1) 70%, rgba(8, 8, 12, 0) 100%), linear-gradient(0deg, rgba(8, 8, 12, .72), rgba(8, 8, 12, 0) 32%), linear-gradient(180deg, rgba(8, 8, 12, .6), rgba(8, 8, 12, 0) 24%); } [dir="rtl"] .ti-bg { background: radial-gradient(36% 60% at 73% 47%, rgba(255, 106, 0, .24), rgba(255, 106, 0, 0) 72%), linear-gradient(270deg, rgba(8, 8, 12, .84) 0%, rgba(8, 8, 12, .62) 36%, rgba(8, 8, 12, .1) 70%, rgba(8, 8, 12, 0) 100%), linear-gradient(0deg, rgba(8, 8, 12, .72), rgba(8, 8, 12, 0) 32%), linear-gradient(180deg, rgba(8, 8, 12, .6), rgba(8, 8, 12, 0) 24%); } .ti-glow { position: absolute; top: 47%; inset-inline-start: 27.5%; width: 74vh; height: 46vh; margin-top: -23vh; margin-inline-start: -37vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 120, 20, .42), rgba(255, 106, 0, 0)); animation: ti-glow 3.2s ease-in-out infinite; } @keyframes ti-glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } } .ti-streaks { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 70%); } [dir="rtl"] .ti-streaks { -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 70%); mask-image: linear-gradient(270deg, #000 0%, #000 42%, transparent 70%); } .ti-streaks i { position: absolute; left: 0; top: var(--y); width: var(--w, 34vw); height: var(--h, 2px); border-radius: 2px; opacity: var(--o, .8); background: linear-gradient(90deg, rgba(255, 138, 31, 0), rgba(255, 138, 31, .95) 70%, #fff); transform: translateX(115vw); animation: ti-streak var(--d, 1.4s) linear var(--dl, 0s) infinite; } @keyframes ti-streak { from { transform: translateX(115vw); } to { transform: translateX(-45vw); } } .ti-top { position: absolute; top: calc(var(--safe-t) + var(--pad-y)); inset-inline: calc(var(--safe-l) + var(--pad-x)) calc(var(--safe-r) + var(--pad-x)); display: flex; align-items: center; justify-content: space-between; gap: .6rem; z-index: 2; } .ti-col { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1; width: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4.2vh; padding: calc(var(--safe-t) + 10vh) 0 calc(var(--safe-b) + 3vh); padding-inline-start: calc(max(var(--safe-l), var(--safe-r)) + var(--pad-x)); } .ti-center { display: flex; flex-direction: column; align-items: center; gap: .2rem; } .ti-logo { gap: .2rem; } .ti-row1 { display: flex; align-items: center; gap: 1.8vh; } .ti-mark { width: 15vh; height: 15vh; filter: drop-shadow(0 .6vh 1.6vh rgba(255, 106, 0, .45)); animation: ti-drop .7s var(--ease-back) .05s both; } .ti-pit { font-size: 17vh; font-weight: 800; line-height: .9; letter-spacing: -.01em; white-space: nowrap; transform: skewX(-10deg); background: linear-gradient(180deg, #ffffff 0%, #fff2e6 44%, #ffb06a 50%, #ff7a12 78%, #e45800 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .5vh 0 #6b2500) drop-shadow(0 1.4vh 2.6vh rgba(255, 106, 0, .38)); animation: ti-slide .7s var(--ease-out) .12s both; } .ti-row2 { position: relative; display: flex; align-items: center; gap: 1.6vh; margin-top: .2vh; animation: pop-in .6s var(--ease-back) .32s backwards; } .ti-arena { position: relative; z-index: 0; padding: .3vh 3.2vh .6vh; font-size: 8.4vh; font-weight: 800; line-height: 1; color: #fff; letter-spacing: .14em; overflow: hidden; text-shadow: 0 .3vh 0 rgba(110, 30, 0, .55); } .ti-arena::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: 1vh; background: var(--grad-brand); box-shadow: inset 0 .3vh 0 rgba(255, 255, 255, .45), 0 1vh 3vh rgba(255, 106, 0, .45); } .ti-arena::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-14deg); animation: ti-sweep 3.6s var(--ease) 1.2s infinite; } @keyframes ti-sweep { 0% { transform: translateX(0) skewX(-14deg); } 40%, 100% { transform: translateX(560%) skewX(-14deg); } } .ti-check { width: 12vh; height: 3.2vh; transform: skewX(-14deg); opacity: .9; border-radius: .4vh; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 1.6vh 1.6vh; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); } .ti-check.r { -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); } .ti-check.l { -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); } .ti-ar { font-size: 6.4vh; margin-top: .6vh; text-shadow: 0 .4vh 1.6vh rgba(255, 106, 0, .35); animation: rise-in .6s var(--ease-out) .5s backwards; } .ti-tag { font-size: max(13px, 3.7vh); color: #d8d9e0; font-weight: 600; margin-top: 1vh; text-align: center; animation: fade-in .6s var(--ease) .7s both; } .ti-bottom { display: flex; flex-direction: column; align-items: center; gap: .55rem; animation: fade-in .6s var(--ease) .9s both; } .ti-tap { position: relative; display: inline-flex; align-items: center; gap: .7rem; padding: .5rem 1.4rem .5rem .6rem; border-radius: 999px; background: rgba(12, 12, 18, .7); border: 1px solid rgba(255, 138, 31, .5); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 1.2rem; font-weight: 800; animation: ti-tap 1.8s ease-in-out infinite; } .ti-tap::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid rgba(255, 106, 0, .7); pointer-events: none; animation: ti-ring 1.8s ease-out infinite; } @keyframes ti-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.12, 1.5); opacity: 0; } } .ti-tap .ti-play { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--grad-brand); color: #fff; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } [dir="rtl"] .ti-tap { padding: .5rem .6rem .5rem 1.4rem; } @keyframes ti-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } .ti-hint { font-size: .78rem; color: rgba(255, 255, 255, .5); display: flex; align-items: center; gap: .35rem; } .ti-join { font-size: .9rem; color: var(--brand-hot); font-weight: 700; display: flex; align-items: center; gap: .4rem; } .ti.go .ti-center { animation: ti-out .45s var(--ease) both; } .ti.go .ti-tap { animation: none; transform: scale(.96); opacity: .6; } .ti.go .ti-tap::after { animation: none; opacity: 0; } @keyframes ti-drop { from { opacity: 0; transform: translateY(-4vh) rotate(-12deg) scale(.7); } to { opacity: 1; transform: none; } } @keyframes ti-slide { from { opacity: 0; transform: translateX(-8vh) skewX(-24deg); } to { opacity: 1; transform: skewX(-10deg); } } @keyframes ti-out { to { opacity: 0; transform: scale(1.08); } } /* ---- Menu ----------------------------------------------------------------------------------------- */ .mn { flex-direction: row; gap: 1rem; } .mn-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 7, 11, .86) 0%, rgba(7, 7, 11, .58) 36%, rgba(7, 7, 11, 0) 64%), linear-gradient(0deg, rgba(7, 7, 11, .55), rgba(7, 7, 11, 0) 30%); } [dir="rtl"] .mn-shade { background: linear-gradient(270deg, rgba(7, 7, 11, .86) 0%, rgba(7, 7, 11, .58) 36%, rgba(7, 7, 11, 0) 64%), linear-gradient(0deg, rgba(7, 7, 11, .55), rgba(7, 7, 11, 0) 30%); } .mn-stage { position: absolute; top: 0; bottom: 0; inset-inline-start: 42%; inset-inline-end: 0; z-index: 0; touch-action: none; cursor: grab; } .mn-left { position: relative; z-index: 1; width: min(27.5rem, 50vw); flex: none; display: flex; flex-direction: column; gap: .7rem; justify-content: flex-start; } .mn-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; } /* own paint layer: works around a Chromium raster glitch that dropped it in RTL */ .mn-brand .logo-mark { width: 2.6rem; height: 2.6rem; } .mn-brand .logo { align-items: flex-start; } [dir="rtl"] .mn-brand .logo { align-items: flex-end; } .mn-brand .logo-word { font-size: 1.35rem; } .mn-brand .logo-ar { font-size: .85rem; margin-top: .15rem; } /* position/z-index: headless SwiftShader GPU raster dropped these glyph runs otherwise (CPU raster was fine) */ .mn-hero { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .12rem; margin-top: auto; padding-inline-start: .1rem; min-width: 0; } .mn-hello { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; text-align: start; } .mn-hero-t { font-size: clamp(1.45rem, 7.4vh, 2.35rem); font-weight: 800; line-height: 1.04; letter-spacing: -.005em; text-shadow: 0 3px 18px rgba(0, 0, 0, .65); } html[lang="ar"] .mn-hero-t { letter-spacing: 0; line-height: 1.15; } .mn-hero-sub { display: flex; align-items: center; gap: .35rem; margin-top: .1rem; font-size: .78rem; font-weight: 600; color: #c8c9d2; } .mn-hero-sub .ico { color: var(--brand-hot); font-size: .95rem; } .mn-actions { display: flex; flex-direction: column; gap: .55rem; } .mn-quick { justify-content: flex-start; gap: .85rem; min-height: max(58px, 5.3rem); padding: 0 1.1rem 0 .75rem; width: 100%; border-radius: 13px; } .mn-quick .mn-q-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--brand); font-size: 1.35rem; box-shadow: 0 3px 10px rgba(120, 30, 0, .35); flex: none; } .mn-quick .mn-q-ico .ico { transform: translateX(.08em); } .mn-quick .mn-q-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; text-align: start; } .mn-quick .mn-q-title { font-size: 1.7rem; font-weight: 800; line-height: 1; } .mn-quick .mn-q-sub { font-size: .78rem; font-weight: 600; opacity: .9; white-space: normal; line-height: 1.2; } .mn-quick .mn-q-go { font-size: 1.5rem; opacity: .9; } .mn-quick.busy .mn-q-ico .ico { display: none; } .mn-quick.busy .mn-q-ico::after { content: ''; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 3px solid rgba(255, 106, 0, .25); border-top-color: var(--brand); animation: spin .8s linear infinite; } .mn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .mn-tile { flex-direction: row; align-items: center; gap: .6rem; min-height: max(52px, 4.2rem); padding: .45rem .6rem; border-radius: 12px; background: linear-gradient(180deg, rgba(34, 34, 46, .82), rgba(16, 16, 23, .8)); } .mn-tile .ico-badge { width: 2.35rem; height: 2.35rem; font-size: 1.25rem; } .mn-tile .mn-t-txt { display: flex; flex-direction: column; min-width: 0; gap: .05rem; } .mn-tile .mn-t-title { font-weight: 800; font-size: .98rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-tile .mn-t-sub { font-size: .7rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .mn-minis .btn { min-height: max(40px, 2.75rem); padding: 0 .5rem; font-size: .84rem; background: linear-gradient(180deg, rgba(40, 40, 54, .78), rgba(18, 18, 26, .78)); } .mn-minis .btn .ico { color: var(--brand-hot); } .mn-right { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .5rem; pointer-events: none; } .mn-right > * { pointer-events: auto; } .mn-top { display: flex; align-items: flex-start; justify-content: flex-end; gap: .45rem; max-width: 100%; } .mn-topbar { display: flex; align-items: center; gap: .45rem; flex: none; } .mn-player { flex: 0 1 19rem; min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem .55rem .6rem; border-radius: 14px; } [dir="rtl"] .mn-player { padding: .5rem .6rem .55rem .75rem; } .mn-av { position: relative; width: 3.1rem; height: 3.1rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: var(--hc, #fff); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%), var(--pc, var(--brand)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 4px rgba(255, 106, 0, .55), 0 6px 16px rgba(0, 0, 0, .45); } .mn-av .ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); } .mn-av .mn-num { position: absolute; bottom: -.3rem; inset-inline-end: -.4rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .2rem; border-radius: 6px; background: #0b0b0f; border: 1.5px solid var(--brand); font-size: .66rem; font-weight: 800; display: grid; place-items: center; } .mn-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .22rem; } .mn-name-row { display: flex; align-items: center; gap: .35rem; min-width: 0; } .mn-name { font-size: 1.12rem; font-weight: 800; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; unicode-bidi: plaintext; } .mn-edit { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--brand-hot); cursor: pointer; font-size: .95rem; } .mn-edit:active { transform: scale(.9); } .mn-name-input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 106, 0, .25); } .mn-name-input { flex: 1; min-width: 0; height: 2rem; padding: 0 .55rem; border-radius: 8px; border: 1.5px solid var(--brand); background: rgba(0, 0, 0, .45); font-size: 1rem; font-weight: 700; color: #fff; unicode-bidi: plaintext; } .lvl-row { display: flex; align-items: center; gap: .5rem; } .lvl-row .xpbar { flex: 1; } .mn-xp-note { font-size: .68rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mn-bottom { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; } .mn-kart { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .mn-kart .chip { min-height: 2.1rem; font-size: .82rem; } .mn-kart .chip .ico { color: var(--brand-hot); } .mn-hint { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: rgba(255, 255, 255, .55); animation: fade-in .6s 1s both; } .mn-hint .ico { font-size: 1rem; animation: mn-swipe 2.4s ease-in-out infinite; } @keyframes mn-swipe { 0%, 100% { transform: translateX(-.25rem); } 50% { transform: translateX(.25rem); } } .mn-left.stagger > .mn-actions > * { animation: rise-in .5s var(--ease-out) backwards; } .mn-left.stagger > .mn-actions > :nth-child(1) { animation-delay: .06s; } .mn-left.stagger > .mn-actions > :nth-child(2) { animation-delay: .13s; } .mn-left.stagger > .mn-actions > :nth-child(3) { animation-delay: .2s; } /* ---- Common header bits ---------------------------------------------------------------------------- */ .hdr-title { display: flex; flex-direction: column; min-width: 0; } .hdr-title .title-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr-end { display: flex; align-items: center; gap: .45rem; margin-inline-start: auto; flex: none; } .back-btn .ico { font-size: 1.4em; } /* ---- Friends --------------------------------------------------------------------------------------- */ .fr-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.12fr); gap: .7rem; } .fr-card { position: relative; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding: .85rem .95rem .9rem; } .fr-head { display: flex; align-items: center; gap: .6rem; min-width: 0; } .fr-head .title-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-sub { font-size: .8rem; color: var(--muted); line-height: 1.35; } .fr-card .fr-cta { margin-top: auto; width: 100%; } .fr-opt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); cursor: pointer; } .fr-opt-t { display: flex; flex-direction: column; min-width: 0; } .fr-opt-t b { font-size: .88rem; font-weight: 700; } .fr-opt-t small { font-size: .68rem; color: var(--muted); line-height: 1.2; } .fr-join-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; } .fr-err { min-height: 1.15rem; font-size: .78rem; font-weight: 700; color: var(--bad); text-align: center; display: flex; align-items: center; justify-content: center; gap: .3rem; line-height: 1.2; } .fr-err:empty { visibility: hidden; } .fr-err.hint { color: var(--muted); font-weight: 600; font-size: .72rem; } .fr-err.hint .ico { color: var(--brand-hot); } .fr-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: .2rem; padding: .45rem .2rem .1rem; } .fr-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; font-size: .7rem; font-weight: 700; color: #c8c9d2; line-height: 1.15; } .fr-step-ico { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); color: var(--brand-hot); font-size: 1.05rem; } .fr-step-ico b { position: absolute; top: -.3rem; inset-inline-end: -.35rem; min-width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .62rem; display: grid; place-items: center; } .fr-step-arrow { margin-top: .65rem; color: rgba(255, 255, 255, .25); font-size: .9rem; } .fr-rooms-h { display: flex; align-items: center; gap: .5rem; } .fr-rooms-h .title-m { flex: 1; min-width: 0; } .fr-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; padding-block: .3rem; margin-inline: -.2rem; padding-inline: .2rem; } .fr-room { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: max(44px, 3rem); padding: .3rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); cursor: pointer; text-align: start; font: inherit; animation: rise-in .4s var(--ease-out) backwards; transition: transform .14s var(--ease), border-color .2s; } .fr-room:active { transform: scale(.97); } .fr-room:disabled { opacity: .5; cursor: default; } .fr-room .fr-code { font-size: 1.15rem; font-weight: 800; letter-spacing: .08em; direction: ltr; min-width: 3.6rem; } .fr-room .fr-cnt { display: flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); font-weight: 700; } .fr-room .fr-go { margin-inline-start: auto; color: var(--brand-hot); font-size: 1.1rem; } .fr-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: .9rem; } .fr-bars i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .18); } .fr-bars i.on { background: var(--ok); } .fr-list .empty { flex: 1; } .fr-busy { position: absolute; inset: 0; z-index: 3; border-radius: inherit; display: grid; place-items: center; background: rgba(10, 10, 16, .78); animation: fade-in .2s both; } .fr-busy > div { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; } .fr-busy .spinner { width: 1.8rem; height: 1.8rem; color: var(--brand); } /* ---- Lobby ----------------------------------------------------------------------------------------- */ .lb { gap: .5rem; } .lb-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 7, 11, .55), rgba(7, 7, 11, .35) 40%, rgba(7, 7, 11, .7)); } .lb .screen-header { min-height: max(40px, 2.8rem); gap: .6rem; } .lb-mode-ttl { display: flex; align-items: center; gap: .45rem; min-width: 0; } .lb-mode-ttl .ico { color: var(--brand-hot); font-size: 1.3rem; } .lb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(9.5rem, 11.2rem) minmax(0, 1fr) minmax(0, 1.28fr); gap: .55rem; } .lb.solo .lb-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); } .lb-col { min-height: 0; display: flex; flex-direction: column; } .lb-invite { align-items: stretch; gap: .35rem; padding: .55rem .6rem .6rem; } .lb-codebtn { display: flex; flex-direction: column; align-items: center; gap: 0; padding: .1rem 0 .15rem; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; border-radius: 10px; transition: transform .14s var(--ease); } .lb-codebtn:active { transform: scale(.96); } .lb-codebtn .kicker { font-size: .66rem; } .lb-code { direction: ltr; font-size: 2.55rem; font-weight: 800; line-height: 1; letter-spacing: .1em; margin-inline-end: -.1em; color: #fff; text-shadow: 0 0 18px rgba(255, 106, 0, .55), 0 2px 0 rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; } .lb-codehint { display: flex; align-items: center; gap: .25rem; font-size: .66rem; color: var(--muted); font-weight: 600; } .lb-codehint .ico { font-size: .9rem; } .lb-qrbtn { flex: 1 1 0; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; } .lb-qrbtn .qr { height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 1; box-shadow: 0 0 0 3px rgba(255, 106, 0, .55), 0 8px 20px rgba(0, 0, 0, .5); } .lb-invite .btn { min-height: max(36px, 2.45rem); font-size: .84rem; } .lb-players { padding: .5rem .5rem .45rem; gap: .35rem; } .lb-sec-h { display: flex; align-items: center; gap: .45rem; min-height: 1.6rem; padding-inline: .15rem; } .lb-sec-h .kicker { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-count { font-size: .78rem; font-weight: 800; color: var(--muted); } .lb-plist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .3rem; padding-block: .25rem .4rem; } .lb-p { --pc: #ff6a00; position: relative; display: flex; align-items: center; gap: .45rem; flex: none; min-height: max(38px, 2.6rem); padding: .2rem .5rem .2rem .55rem; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); animation: rise-in .38s var(--ease-out) backwards; transition: background-color .25s, border-color .25s, transform .14s var(--ease); } .lb-p::before { content: ''; position: absolute; inset-block: .32rem; inset-inline-start: .18rem; width: 4px; border-radius: 4px; background: var(--pc); box-shadow: 0 0 8px var(--pc); } .lb-p.me { background: linear-gradient(90deg, rgba(255, 106, 0, .2), rgba(255, 106, 0, .06)); border-color: rgba(255, 106, 0, .38); } [dir="rtl"] .lb-p.me { background: linear-gradient(270deg, rgba(255, 106, 0, .2), rgba(255, 106, 0, .06)); } .lb-p.tap { cursor: pointer; } .lb-p.tap:active { transform: scale(.975); } .lb-p[data-team="0"] { background: linear-gradient(90deg, rgba(47, 123, 255, .3), rgba(47, 123, 255, .07)); border-color: rgba(47, 123, 255, .4); } .lb-p[data-team="1"] { background: linear-gradient(90deg, rgba(255, 61, 154, .3), rgba(255, 61, 154, .07)); border-color: rgba(255, 61, 154, .4); } [dir="rtl"] .lb-p[data-team="0"] { background: linear-gradient(270deg, rgba(47, 123, 255, .3), rgba(47, 123, 255, .07)); } [dir="rtl"] .lb-p[data-team="1"] { background: linear-gradient(270deg, rgba(255, 61, 154, .3), rgba(255, 61, 154, .07)); } .lb-av { position: relative; width: 1.95rem; height: 1.95rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.12rem; color: var(--hc, #fff); background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 48%), var(--kc, var(--pc)); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); margin-inline-start: .2rem; } .lb-av .ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); } .lb-pn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .02rem; } .lb-pname { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .9rem; font-weight: 700; line-height: 1.15; } .lb-pname > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; unicode-bidi: plaintext; } .lb-pname .crown { color: #ffc93a; font-size: .95rem; filter: drop-shadow(0 0 4px rgba(255, 201, 58, .6)); } .lb-psub { display: flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--muted); line-height: 1.15; white-space: nowrap; overflow: hidden; } .lb-psub .you { color: var(--brand-hot); font-weight: 800; } .lb-pend { display: flex; align-items: center; gap: .35rem; flex: none; } .lb-ping { font-size: .64rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: .15rem; } .lb-ping.good { color: #7be3a8; } .lb-ping.mid { color: #ffd76a; } .lb-ping.bad { color: #ff8a9b; } .lb-ready { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .25); color: transparent; font-size: .85rem; transition: background-color .25s, border-color .25s, transform .3s var(--ease-back); } .lb-ready.on { border: 0; background: var(--ok); color: #04210f; box-shadow: 0 0 10px rgba(53, 208, 127, .55); transform: scale(1.05); } .lb-ready.host { border: 0; background: rgba(255, 201, 58, .16); color: #ffc93a; } .lb-ready.bot { border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); } .lb-p.seat { width: 100%; gap: .35rem; background: transparent; border: 1px dashed rgba(255, 255, 255, .12); min-height: max(30px, 2.1rem); color: rgba(255, 255, 255, .35); font: 600 .76rem/1.2 var(--font); justify-content: center; animation: none; cursor: default; } .lb-p.seat::before { display: none; } .lb-p.seat.add { color: var(--brand-hot); border-color: rgba(255, 138, 31, .35); cursor: pointer; } .lb-p.seat.add:active { transform: scale(.97); background: rgba(255, 106, 0, .12); } .lb-p.seat .ico { font-size: .95rem; } .lb-bubble { position: absolute; top: 50%; inset-inline-end: 2.3rem; z-index: 3; padding: .1rem .55rem; border-radius: 999px; background: #fff; color: #111; font-size: 1.1rem; font-weight: 800; line-height: 1.5; white-space: nowrap; box-shadow: 0 0 0 2px var(--pc, var(--brand)), 0 4px 14px rgba(0, 0, 0, .45); pointer-events: none; transform: translateY(-50%); animation: bub-in .4s var(--ease-back) both, bub-out .3s var(--ease) 2.3s both; } .lb-bubble::after { content: ''; position: absolute; top: 50%; inset-inline-end: -.3rem; margin-top: -.3rem; border: .3rem solid transparent; border-inline-start-color: #fff; border-inline-end: 0; } @keyframes bub-in { from { opacity: 0; transform: translateY(-50%) scale(.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } } @keyframes bub-out { to { opacity: 0; transform: translateY(-110%) scale(.9); } } .lb-teamhint { font-size: .68rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; padding-inline: .2rem; } .lb-teamhint .ico { color: var(--brand-hot); } .lb-set { padding: .5rem .55rem .2rem; gap: 0; } .lb-setscroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; padding-block: .2rem .6rem; } .lb-sec { display: flex; flex-direction: column; gap: .35rem; } /* capped tiles: a registry with only one or two modes must not stretch them across the column */ .lb-modes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.9rem, 6.8rem); justify-content: start; gap: .4rem; padding: .15rem .1rem .2rem; } .lb-mode { align-items: center; justify-content: center; gap: .2rem; min-height: max(56px, 4.1rem); padding: .4rem .25rem .35rem; text-align: center; border-radius: 11px; } .lb-mode .lb-mico { display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 1.2rem; color: var(--brand-hot); transition: transform .3s var(--ease-back), background-color .25s, color .25s; } .lb-mode.active .lb-mico { background: var(--grad-brand); color: #fff; transform: scale(1.08); box-shadow: 0 4px 12px rgba(255, 106, 0, .45); } /* Two-word mode names ("Battle Snake", "سباق المعركة") wrap to a second line instead of being cut off. */ .lb-mode .lb-mname { font-size: .72rem; font-weight: 800; line-height: 1.05; max-width: 100%; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .lb-minfo { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .5rem; border-radius: 9px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); animation: fade-in .3s both; } .lb-minfo p { flex: 1; min-width: 0; font-size: .74rem; color: #c8c9d2; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lb-minfo .badges { display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; flex: none; } .lb-maps { display: grid; grid-auto-flow: column; grid-auto-columns: 7.4rem; gap: .4rem; padding: .15rem .1rem .2rem; } .lb-map { padding: 0; min-height: 0; height: 4.35rem; border-radius: 11px; overflow: hidden; } .lb-map .map-art { position: absolute; inset: 0; } .lb-map .lb-mapname { position: relative; z-index: 1; margin-top: auto; padding: 1rem .45rem .28rem; font-size: .74rem; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-map.active { box-shadow: inset 0 0 0 2px var(--brand), 0 6px 18px rgba(255, 106, 0, .35); } .lb-rules { display: flex; flex-direction: column; gap: .3rem; } .lb-rule { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: max(38px, 2.6rem); padding: .15rem .15rem .15rem .5rem; border-radius: 9px; background: rgba(255, 255, 255, .035); } [dir="rtl"] .lb-rule { padding: .15rem .5rem .15rem .15rem; } .lb-rule > label, .lb-rule > .lb-rl { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-rule > .lb-rl .ico { color: var(--brand-hot); font-size: 1.05rem; } .lb-rule .seg { flex: none; } .lb-rule .lb-rv { font-weight: 800; font-size: .88rem; color: #fff; padding-inline: .5rem; } .lb-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; } .lb-pickmode { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .6rem; border-radius: 11px; background: rgba(255, 106, 0, .12); border: 1px solid rgba(255, 106, 0, .4); min-width: 0; } .lb-pickmode .row { align-items: center; gap: .45rem; } .lb-pickmode .lb-mico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--grad-brand); color: #fff; font-size: 1.2rem; flex: none; } .lb-pickmode b { font-size: 1.02rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-pickmode p { font-size: .72rem; color: #c8c9d2; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lb-pickmap { position: relative; min-height: 5.6rem; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-2); display: flex; flex-direction: column; justify-content: flex-end; } .lb-pickmap .map-art { position: absolute; inset: 0; } .lb-pickmap .lb-mapname { position: relative; z-index: 1; padding: 1.2rem .55rem .35rem; font-weight: 800; font-size: .9rem; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .lb-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .lb-chips .chip b { color: #fff; font-weight: 800; } .lb-chips .chip { color: var(--muted); } .lb-foot { flex: none; display: flex; align-items: center; gap: .55rem; min-height: max(48px, 3.4rem); } .lb-emotes { display: flex; align-items: center; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(10, 10, 16, .6); border: 1px solid var(--line); flex: none; } .lb-emo { width: max(36px, 2.45rem); height: max(36px, 2.45rem); display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: transform .16s var(--ease-back), background-color .2s; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', var(--font); } .lb-emo.txt { font-family: var(--font); font-weight: 800; font-size: .82rem; color: var(--brand-hot); } .lb-emo:active { transform: scale(.82); background: rgba(255, 106, 0, .3); } .lb-status { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; color: #c8c9d2; line-height: 1.25; } .lb-status .ico { color: var(--brand-hot); font-size: 1.15rem; } .lb-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lb-status .dot { --dc: var(--warn); } .lb-start { min-width: 11.5rem; } .lb-start .ico { font-size: 1.2em; } .lb-readybtn { min-width: 10.5rem; } .modal.lb-qrmodal { width: min(36rem, 100%); padding: 1rem; } .lb-qrwrap { display: flex; align-items: center; gap: 1.1rem; } .lb-qrwrap .qr { flex: none; width: min(calc(100vh - 7rem), 15rem); box-shadow: 0 0 0 4px rgba(255, 106, 0, .6); } .lb-qrside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; } .lb-qrside .lb-code { font-size: 3rem; } .lb-qrside .btn { align-self: stretch; } /* ---- Loading --------------------------------------------------------------------------------------- */ .ld { padding: 0; } .ld-art { position: absolute; inset: 0; z-index: -2; } .ld-art .map-art { position: absolute; inset: 0; animation: ld-kb 14s ease-out both; } @keyframes ld-kb { from { transform: scale(1.12); } to { transform: scale(1); } } .ld-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 6, 10, .88) 0%, rgba(6, 6, 10, .6) 42%, rgba(6, 6, 10, .08) 78%), linear-gradient(0deg, rgba(6, 6, 10, .92) 0%, rgba(6, 6, 10, 0) 42%); } [dir="rtl"] .ld-scrim { background: linear-gradient(270deg, rgba(6, 6, 10, .88) 0%, rgba(6, 6, 10, .6) 42%, rgba(6, 6, 10, .08) 78%), linear-gradient(0deg, rgba(6, 6, 10, .92) 0%, rgba(6, 6, 10, 0) 42%); } .ld-streaks { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .6; } .ld-track { position: absolute; top: 9%; bottom: 30%; inset-inline-end: 5%; width: 40%; z-index: -1; opacity: .95; } .ld-track svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); } .ld-track circle { animation: fade-in .4s var(--ease) 2.4s both; } .ld-track .ld-path, .ld-track .ld-path-glow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-draw 2.4s var(--ease) .3s forwards; } @keyframes ld-draw { to { stroke-dashoffset: 0; } } .ld-main { position: absolute; top: calc(var(--safe-t) + 7vh); inset-inline-start: calc(var(--safe-l) + 5.5vw); max-width: min(56vw, 32rem); display: flex; flex-direction: column; gap: .35rem; } .ld-kicker { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .ld-kicker .ld-mico { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--grad-brand); color: #fff; font-size: 1.2rem; transform: skewX(var(--skew)); box-shadow: 0 4px 14px rgba(255, 106, 0, .45); } .ld-kicker .ld-mico > * { transform: skewX(var(--unskew)); } .ld-kicker .ld-mname { font-size: 1.05rem; font-weight: 800; color: var(--brand-hot); letter-spacing: .06em; text-transform: uppercase; } [dir="rtl"] .ld-kicker .ld-mname { letter-spacing: 0; } .ld-title { font-size: clamp(2rem, 11vh, 3.6rem); font-weight: 800; line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); animation: ld-title .7s var(--ease-out) .1s both; } @keyframes ld-title { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: none; } } [dir="rtl"] .ld-title { animation-name: ld-title-rtl; } @keyframes ld-title-rtl { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } } .ld-desc { font-size: .92rem; color: #d7d8df; line-height: 1.4; max-width: 26rem; animation: fade-in .6s .35s both; } .ld-roster { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; max-width: 30rem; } .ld-roster .player-chip { animation: pop-in .35s var(--ease-back) backwards; } .ld-bottom { position: absolute; bottom: calc(var(--safe-b) + 4.5vh); inset-inline: calc(var(--safe-l) + 5.5vw) calc(var(--safe-r) + 5.5vw); display: flex; flex-direction: column; gap: .6rem; } .ld-tip { display: flex; align-items: center; gap: .65rem; max-width: 34rem; padding: .5rem .8rem .5rem .55rem; border-radius: 12px; } .ld-tip .ico-badge { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; } .ld-tip-body { min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .ld-tip-text { font-size: .86rem; font-weight: 600; line-height: 1.35; color: #eceef3; } .ld-tip-text.swap { animation: ld-tip .5s var(--ease-out) both; } @keyframes ld-tip { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } .ld-barrow { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; } .ld-stage { font-size: .84rem; font-weight: 700; color: #d7d8df; display: flex; align-items: center; gap: .4rem; } .ld-stage .spinner { width: .95rem; height: .95rem; color: var(--brand); border-width: 2px; } .ld-pct { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; direction: ltr; } .ld-pct small { font-size: .55em; color: var(--brand-hot); margin-inline-start: .1em; } .ld-bar { position: relative; height: .7rem; border-radius: 4px; background: rgba(255, 255, 255, .1); transform: skewX(var(--skew)); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); } .ld-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .45s var(--ease-out); background: linear-gradient(90deg, var(--brand-deep), var(--brand) 60%, #ffb36b); overflow: hidden; } [dir="rtl"] .ld-fill { transform-origin: right center; background: linear-gradient(270deg, var(--brand-deep), var(--brand) 60%, #ffb36b); } .ld-fill::after { content: ''; position: absolute; top: 0; bottom: 0; left: -100%; width: 200%; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 .6rem, rgba(255, 255, 255, .22) .6rem 1.2rem); animation: ld-stripes 1s linear infinite; } @keyframes ld-stripes { from { transform: translateX(0); } to { transform: translateX(2.6rem); } } .ld-runner { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--p, 0) * 100%)); transition: transform .45s var(--ease-out); } [dir="rtl"] .ld-runner { transform: translateX(calc(var(--p, 0) * -100%)); } .ld-runner i { position: absolute; top: 50%; left: 0; width: 1.4rem; height: 1.4rem; margin: -.7rem 0 0 -.7rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 180, .95), rgba(255, 106, 0, .0)); } [dir="rtl"] .ld-runner i { left: auto; right: 0; margin: -.7rem -.7rem 0 0; } .ld-barwrap { position: relative; } /* ===================================================================================================== Responsive tuning ===================================================================================================== */ @media (max-height: 340px) { .mn-hero-sub { display: none; } } @media (max-height: 370px) { .mn-quick { min-height: max(52px, 4.1rem); } .mn-quick .mn-q-sub { display: none; } .mn-tile { min-height: max(48px, 3.5rem); } .fr-card { padding: .65rem .75rem .75rem; gap: .4rem; } .fr-sub { font-size: .74rem; } .lb-code { font-size: 2.2rem; } .ld-desc { display: none; } } @media (max-width: 780px) { .mn-left { width: min(26rem, 52vw); } .lb-body { grid-template-columns: minmax(8.6rem, 9.6rem) minmax(0, 1fr) minmax(0, 1.22fr); } .lb-code { font-size: 2.2rem; } .lb-start { min-width: 9.5rem; } .lb-readybtn { min-width: 9rem; } .fr-grid { gap: .5rem; } .lb-emo { width: max(34px, 2.25rem); height: max(34px, 2.25rem); } } @media (max-width: 700px) { .lb-emotes .lb-emo:nth-child(n+5) { display: none; } } @media (min-height: 520px) { .lb-body { grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr) minmax(0, 1.28fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .ti-streaks { display: none; } }