/* app.css — the whole shell's styling. * * Lifted out of index.html, where it was 1,566 of the file's 2,190 lines and * made the markup impossible to read. Two practical wins beyond that: * * • index.html is served with max-age=0 so a deploy reaches players * immediately — which meant every deploy re-sent all of this CSS even * when not one rule had changed. Now it revalidates to a 304. * • The markup is now findable. Adding a panel means reading ~600 lines of * HTML, not scrolling past a stylesheet to reach it. * * Load order matters: this is render-blocking in , exactly as the inline * block was, so there is no flash of unstyled content. */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: #0f1220; font-family: system-ui, sans-serif; overscroll-behavior: none; /* no pull-to-refresh / bounce on mobile */ } canvas { display: block; touch-action: none; } /* touches drive the game, not scroll */ /* ===================== App shell ============================================ Three zones that never move: a persistent top bar (wallet), a nav rail, and a swappable stage. The top bar lives at the body level so Gems + Trophies stay visible in the menu AND in-game; the nav rail + stage live in the menu overlay and only swap the active "view" in place — nothing else shifts. */ /* --- Persistent top bar: brand · wallet · account. Always on; only the Loot reveal (z 60) covers it (and we also hide it outright while a bubble opens). */ #topBar { position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, rgba(16,20,36,0.97), rgba(16,20,36,0.85)); border-bottom: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } #topBar.hidden-reveal { display: none; } /* hidden only while a Loot Bubble is opening */ .tb-brand { display: flex; align-items: center; gap: 8px; font: inherit; cursor: pointer; background: none; border: none; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: 0.3px; padding: 6px 8px; border-radius: 10px; } .tb-brand:hover { background: rgba(255,255,255,0.06); } .tb-brand .ba-mark { font-size: 20px; } @media (max-width: 560px) { .tb-brand .ba-word { display: none; } } /* --- Wallet: Gems (cool crystal) + Trophies (warm amber) + Account. --- */ #wallet { display: flex; align-items: center; gap: 8px; } #wallet[hidden] { display: none; } .chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; cursor: pointer; white-space: nowrap; padding: 7px 12px; border-radius: 999px; line-height: 1; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: #eaf1ff; transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .chip:hover { transform: translateY(-1px); } .chip .chip-ico { font-size: 16px; } .chip .chip-amt { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .chip .chip-plus { font-size: 13px; font-weight: 900; opacity: 0.7; margin-left: 1px; } /* Gems — cool crystalline (deliberately NOT a gold pill). */ .chip-gems { background: linear-gradient(180deg, rgba(88,158,255,0.18), rgba(88,158,255,0.05)); border-color: rgba(132,190,255,0.44); box-shadow: inset 0 0 12px rgba(120,180,255,0.10); } .chip-gems:hover { border-color: rgba(155,205,255,0.72); box-shadow: inset 0 0 14px rgba(120,180,255,0.18), 0 4px 14px rgba(60,120,220,0.25); } .chip-gems .chip-amt { color: #dcebff; } /* Trophies — warm amber/bronze. */ .chip-trophies { background: linear-gradient(180deg, rgba(255,170,70,0.17), rgba(255,150,60,0.05)); border-color: rgba(255,186,96,0.46); } .chip-trophies:hover { border-color: rgba(255,206,132,0.78); box-shadow: 0 4px 14px rgba(210,130,40,0.28); } .chip-trophies .chip-amt { color: #ffdca6; } .chip-account { padding: 7px 11px; font-size: 16px; } #signInChip[hidden] { display: none; } /* --- Menu overlay = nav rail + stage, docked under the top bar. --- */ #overlay { position: fixed; inset: 54px 0 0 0; display: flex; flex-direction: row; background: radial-gradient(1100px 640px at 22% -12%, rgba(70,90,190,0.12), transparent 60%), rgba(13,16,28,0.97); color: #fff; z-index: 10; } #navRail { flex: 0 0 218px; display: flex; flex-direction: column; gap: 3px; padding: 18px 12px calc(18px + env(safe-area-inset-bottom, 0px)); border-right: 1px solid rgba(255,255,255,0.06); overflow: hidden; } .nav-item { display: flex; align-items: center; gap: 11px; width: 100%; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; color: #b7c2e0; background: none; border: none; border-radius: 12px; padding: 11px 13px; border-left: 3px solid transparent; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; } .nav-item .nav-ico { font-size: 18px; width: 22px; text-align: center; flex: 0 0 auto; } .nav-item:hover { background: rgba(255,255,255,0.05); color: #eaf1ff; } .nav-item.active { background: rgba(92,155,255,0.14); color: #fff; border-left-color: #5c9bff; } .nav-item.nav-tip { margin-top: auto; color: #c8b6ff; } /* Tip Jar rests at the bottom */ .nav-item.nav-play { color: #7dffa6; font-weight: 800; } .nav-item.nav-play.active { background: rgba(124,255,166,0.14); border-left-color: #5cff8f; color: #eafff2; } #stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; } /* A stage view — only the active one shows; centered, sized to the stage. */ .view { width: 100%; max-width: 520px; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .view[hidden] { display: none; } .view.wide { max-width: 760px; } #overlay h1 { font-size: 42px; letter-spacing: 1px; } #overlay .tagline { color: #9aa3c7; font-size: 16px; } #overlay p { color: #9aa3c7; } #name, #joinCode { padding: 12px 16px; font-size: 18px; border-radius: 10px; border: none; text-align: center; } #name { width: 260px; } #joinCode { width: 140px; text-transform: uppercase; letter-spacing: 3px; } .primary { padding: 12px 28px; font-size: 18px; border: none; border-radius: 10px; background: #5c9bff; color: #fff; cursor: pointer; font-weight: 600; } .primary:hover { background: #4a86e8; } .primary.small { padding: 10px 22px; font-size: 15px; } button.small { padding: 12px 18px; font-size: 15px; border: none; border-radius: 10px; background: #3a4266; color: #fff; cursor: pointer; } button.small:hover { background: #49527a; } /* Panels are now stage views (sized by .view / .view.wide); keep the card look. */ .panel { background: rgba(26,30,52,0.98); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto; box-shadow: 0 14px 44px rgba(0,0,0,0.5); } /* No visible scrollbars anywhere — they read as cheap. Menus are designed to fit; any overflow still scrolls, just without the bar chrome. */ .panel, #overlay { scrollbar-width: none; -ms-overflow-style: none; } .panel::-webkit-scrollbar, #overlay::-webkit-scrollbar { width: 0; height: 0; display: none; } .panel[hidden] { display: none; } /* Mobile reflow: same desktop language, shrunk. The nav rail becomes a slim horizontal strip under the top bar (a scrollable tab row — NOT a bottom tab bar); the stage goes single-column and fills the width. */ @media (max-width: 760px) { #overlay { flex-direction: column; } #navRail { flex: 0 0 auto; flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); scrollbar-width: none; -ms-overflow-style: none; } #navRail::-webkit-scrollbar { display: none; } .nav-item { width: auto; flex: 0 0 auto; padding: 9px 12px; border-left: none; border-bottom: 3px solid transparent; border-radius: 10px; } .nav-item.active { border-left: none; border-bottom-color: #5c9bff; } .nav-item.nav-play.active { border-left: none; border-bottom-color: #5cff8f; } .nav-item.nav-tip { margin-top: 0; } #stage { padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px)); } .view, .view.wide { max-width: 100%; } } .panel .or { color: #6b769c; font-size: 13px; } .panel .msg { color: #9aa3c7; font-size: 13px; min-height: 16px; text-align: center; } .panel .msg.error { color: #ff8f9a; } /* The results screen and the account panel reuse .msg outside .panel. */ .msg { font-size: 13px; text-align: center; color: #9aa3c7; } .msg.error { color: #ff8f9a; } .msg[hidden] { display: none; } #runItBackMsg { margin: 6px 0 0; flex-basis: 100%; } #accSignOutMsg { margin: 6px 0 0; } /* "All sales final" notice shown at every point money/Gems are spent */ .final-note { font-size: 11.5px; color: #ff9aa5; line-height: 1.45; text-align: center; margin-top: 2px; } .final-note b { color: #ffd0d5; } .final-note a { color: #ffb3bc; } #menuFooter { font-size: 12px; color: #6b769c; text-align: center; } #menuFooter a { color: #8ea0d0; text-decoration: none; } #menuFooter a:hover { color: #cfe0ff; } .join-row { display: flex; gap: 8px; } .skins-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; width: 100%; } .skins-head { font-size: 13px; font-weight: 700; color: #cfe0ff; text-align: left; } .skins-head .skins-hint { font-weight: 400; color: #8ea0d0; font-size: 12px; } .skins-empty { color: #8ea0d0; font-size: 12px; padding: 6px 2px; } .skins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; } /* Skin cards — same polish tier as the Alpha cards */ .skin-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 25px 8px 11px; text-align: center; font: inherit; color: #fff; cursor: pointer; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .skin-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.24); box-shadow: 0 8px 20px rgba(0,0,0,0.35); } .skin-card.equipped { border-color: rgba(124,255,166,0.55); background: linear-gradient(180deg, rgba(124,255,166,0.12), rgba(124,255,166,0.03)); } .skin-card.confirming { border-color: #ffe27a; box-shadow: 0 0 0 1px #ffe27a, 0 8px 20px rgba(0,0,0,0.35); } /* Owned in the Shop: greyed + unselectable (keeps its slot so pages don't reflow) */ /* Owned cards stay dimmed (nothing to buy) but remain CLICKABLE — a tap opens the preview, where you can equip. They used to swallow clicks entirely. */ .skin-card.owned { opacity: 0.5; filter: grayscale(0.35); } .skin-card-sub.owned { color: #7dffa6; } /* ---- Rarity: an opaque hue on the box behind the skin + a prism shimmer sweep. Red = Common, Purple = Uncommon, Gold = Rare, Green = Extremely Rare. Rarer = richer hue + stronger sweep, so you read the tier at a glance. */ /* Non-green rarities: FLAT, toned-down tints (no gradient sheen, no shine). */ .skin-card.rar-red { border-color: rgba(214,120,120,0.30); background: rgba(180,86,86,0.08); } .skin-card.rar-purple { border-color: rgba(168,132,224,0.32); background: rgba(140,96,214,0.09); } .skin-card.rar-gold { border-color: rgba(216,184,110,0.32); background: rgba(196,164,80,0.08); } /* Green (rarest) + Alpha keep a green box + the prism shine, gently toned. */ .skin-card.rar-green { border-color: rgba(88,208,140,0.42); background: linear-gradient(180deg, rgba(52,214,110,0.16), rgba(52,214,110,0.04)); } .skin-card.rar-red:hover { border-color: rgba(224,140,140,0.5); } .skin-card.rar-purple:hover { border-color: rgba(184,150,236,0.55); } .skin-card.rar-gold:hover { border-color: rgba(228,198,130,0.55); } .skin-card.rar-green:hover { border-color: rgba(100,220,150,0.7); } /* Prism shimmer overlay — the same iridescent sweep as the Alpha wordmark. */ .skin-card.shimmer { overflow: hidden; } /* Only Green-rarity + Alpha cards carry `.shimmer` (set in skinCardHTML). */ .skin-card.shimmer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 1; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.12) 40%, rgba(190,140,255,0.20) 47%, rgba(120,220,255,0.20) 53%, rgba(255,255,255,0.12) 60%, transparent 78%); background-size: 250% 100%; mix-blend-mode: screen; animation: prismSheen 3.6s ease-in-out infinite; } /* The sheen uses `screen` blend, so it lightens content rather than hiding it — no need to re-layer children (which would break the absolute kind pill). */ @keyframes prismSheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .skin-card.shimmer::before { animation: none; } } /* Rarity pill (kind tag) tint so the label matches the box hue. */ .skin-card-kind.rk-red { color: #ffbcbc; background: rgba(255,90,90,0.16); border-color: rgba(255,107,107,0.34); } .skin-card-kind.rk-purple { color: #d9c2ff; background: rgba(150,90,255,0.16); border-color: rgba(181,129,255,0.36); } .skin-card-kind.rk-gold { color: #ffe6a3; background: rgba(244,180,50,0.16); border-color: rgba(244,195,67,0.4); } .skin-card-kind.rk-green { color: #b6f5cd; background: rgba(52,214,110,0.16); border-color: rgba(74,222,128,0.42); } /* ---- Shop sections (Featured / Available Today / New Releases) ---- */ #shopPanel { max-height: 100%; overflow-y: auto; scrollbar-width: none; } #shopPanel::-webkit-scrollbar { width: 0; height: 0; display: none; } .shop-section { margin-top: 14px; } .shop-section:first-of-type { margin-top: 4px; } .shop-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: #eaf1ff; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,0.08); } .shop-section-head .sec-name { display: flex; align-items: center; gap: 6px; } .shop-timer { font-size: 10.5px; font-weight: 700; color: #9fb0dd; background: rgba(120,150,255,0.10); border: 1px solid rgba(150,180,255,0.18); border-radius: 999px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .shop-empty { font-size: 12px; color: #8ea0d0; text-align: center; padding: 14px 8px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 10px; } /* Loot hero — the shop's main attraction, up top */ .loot-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .loot-hero-title { font-size: 14px; font-weight: 800; color: #eaf1ff; } .loot-hero-sub { font-size: 10.5px; color: #9aa8cf; } .loot-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .loot-crate-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; text-align: center; font: inherit; color: #fff; cursor: pointer; overflow: hidden; border: 1px solid rgba(130,170,255,0.32); border-radius: 12px; background: linear-gradient(180deg, rgba(90,140,255,0.18), rgba(90,140,255,0.05)); transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .loot-crate-card:hover { transform: translateY(-2px); border-color: rgba(150,190,255,0.6); box-shadow: 0 8px 20px rgba(40,70,160,0.4); } .loot-crate-card .lc-bubble { font-size: 26px; line-height: 1; } .loot-crate-card .lc-name { font-size: 11.5px; font-weight: 700; line-height: 1.1; } .loot-crate-card .lc-price { font-size: 12px; font-weight: 800; color: #ffe27a; } .loot-crate-card .lc-open { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #bcd0ff; } /* Shop page tabs (‹ • • • ›) — paginate so the Shop never scrolls */ .shop-pages { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 14px; } .shop-nav { font-size: 18px; line-height: 1; color: #9aa3c7; background: none; border: none; cursor: pointer; padding: 0 4px; } .shop-nav:hover { color: #eaf1ff; } .shop-nav:disabled { opacity: 0.25; cursor: default; } .shop-page-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); cursor: pointer; border: none; padding: 0; transition: background 0.15s ease, transform 0.1s ease; } .shop-page-dot:hover { background: rgba(255,255,255,0.35); } .shop-page-dot.active { background: #5c9bff; transform: scale(1.2); } .skin-card.locked:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,0.10); } .skin-card.locked .swatch { filter: grayscale(0.55); opacity: 0.5; } /* Kind tag (Prestige / Gem / Alpha) — a pill centered on the top edge */ .skin-card-kind { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; line-height: 1; color: #9aa3c7; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 2.5px 8px; border-radius: 999px; white-space: nowrap; } .skin-card-kind.metal { color: #dbe7ff; background: rgba(150,180,255,0.12); border-color: rgba(150,180,255,0.28); } .skin-card-name { font-size: 13px; font-weight: 700; color: #eef1fa; line-height: 1.15; } .skin-card-sub { font-size: 11px; font-weight: 600; color: #8ea0d0; line-height: 1; } .skin-card.equipped .skin-card-sub { color: #7dffa6; } .skin-card-sub.price { color: #ffe27a; font-weight: 800; font-size: 12.5px; } .skin-card-sub.confirm { color: #ffe27a; font-weight: 800; } /* Swatch: the colored disc inside a card (non-interactive; the card handles clicks) */ .skins-grid .swatch { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); pointer-events: none; display: flex; align-items: center; justify-content: center; } .skins-grid .swatch.metal { border-color: rgba(255,255,255,0.6); box-shadow: inset 0 2px 5px rgba(255,255,255,0.45), inset 0 -3px 7px rgba(0,0,0,0.4); } .skins-grid .swatch.metal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 42%, rgba(0,0,0,0.28)); } /* Store: Gem packs */ .store-head { font-weight: 700; font-size: 15px; color: #ffe27a; } .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .gem-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid rgba(255,215,0,0.35); border-radius: 12px; background: rgba(255,215,0,0.06); color: #fff; cursor: pointer; transition: transform 0.1s, background 0.15s; } .gem-pack:hover { transform: translateY(-2px); background: rgba(255,215,0,0.14); } .gem-pack:disabled { opacity: 0.5; cursor: default; transform: none; } .gem-pack .amt { font-size: 18px; font-weight: 800; color: #ffe27a; } .gem-pack .price { font-size: 14px; color: #cfe0ff; } .gem-pack .bonus { font-size: 11px; font-weight: 700; color: #7fe3b0; letter-spacing: 0.2px; } .gem-pack .perk { font-size: 11px; font-weight: 700; color: #d9c4ff; text-align: center; line-height: 1.35; } /* The $500 Whale tier — spans the row, gets a premium violet/gold identity. */ .gem-pack.whale { grid-column: 1 / -1; border-color: rgba(215,139,255,0.55); background: linear-gradient(120deg, rgba(255,215,94,0.10), rgba(215,139,255,0.14)); } .gem-pack.whale:hover { background: linear-gradient(120deg, rgba(255,215,94,0.18), rgba(215,139,255,0.22)); } /* Offer of the Day card */ .offer-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,215,94,0.35); background: linear-gradient(120deg, rgba(255,215,94,0.08), rgba(215,139,255,0.08)); } .offer-card.free { border-color: rgba(124,222,160,0.4); background: linear-gradient(120deg, rgba(52,214,110,0.10), rgba(74,163,255,0.08)); } .offer-swatch { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #10131f; } /* The offer art is a standard `.swatch.loot` (so it gets the shared per-skin crop); this just sizes it to fill the 60px disc. */ .offer-swatch .offer-art { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .offer-info { flex: 1 1 auto; min-width: 0; } .offer-name { font-size: 15px; font-weight: 800; color: #fff; } .offer-plus { color: #7fe3b0; font-size: 13px; font-weight: 700; } .offer-tag { font-size: 12px; color: #a9b2d6; margin-top: 2px; } /* "Just for you" — marks the per-player daily rotation. */ .just-for-you { font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #1a1330; background: linear-gradient(100deg, #ffd75e, #d78bff); padding: 2px 7px; border-radius: 999px; } .offer-rarity { margin: 4px 0 2px; } .offer-rarity .sp-tag { font-size: 9.5px; padding: 3px 9px; } .offer-btn { flex: 0 0 auto; padding: 10px 18px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; color: #1a1330; border: none; border-radius: 10px; background: linear-gradient(180deg, #ffe27a, #f4c343); } .offer-btn:hover { filter: brightness(1.05); } .offer-btn:disabled { opacity: 0.5; cursor: default; filter: none; } /* The paid Offer of the Day wears the RARITY of the skin it's selling — a gold card around a red skin reads as a Gold and misprices the offer (Kenny). */ .offer-card.rar-red { border-color: rgba(224,120,120,0.45); background: linear-gradient(120deg, rgba(255,90,90,0.10), rgba(180,86,86,0.06)); } .offer-card.rar-purple { border-color: rgba(184,150,236,0.5); background: linear-gradient(120deg, rgba(150,90,255,0.12), rgba(140,96,214,0.06)); } .offer-card.rar-gold { border-color: rgba(228,198,130,0.5); background: linear-gradient(120deg, rgba(244,180,50,0.12), rgba(196,164,80,0.06)); } .offer-card.rar-green { border-color: rgba(104,224,152,0.5); background: linear-gradient(120deg, rgba(52,214,110,0.12), rgba(74,222,128,0.06)); } .offer-btn.rar-red { color: #2a0d0d; background: linear-gradient(180deg, #ff9a9a, #e35d5d); } .offer-btn.rar-purple { color: #1e0f33; background: linear-gradient(180deg, #d9b6ff, #a86bf0); } .offer-btn.rar-gold { color: #2a1f06; background: linear-gradient(180deg, #ffe27a, #f4c343); } .offer-btn.rar-green { color: #06240f; background: linear-gradient(180deg, #8affc0, #35d67d); } /* Titles locker section */ #titlesSection { margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; } .titles-hint { font-size: 12.5px; color: #a9b2d6; margin: 4px 0 10px; } .titles-row { display: flex; flex-wrap: wrap; gap: 8px; } .title-chip { padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: #d9d3ff; background: rgba(150,110,255,0.08); border: 1px solid rgba(178,150,255,0.25); border-radius: 999px; transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease; } .title-chip:hover { transform: translateY(-1px); border-color: rgba(184,150,255,0.55); } .title-chip.on { color: #1a1330; background: linear-gradient(100deg, #ffd75e, #d78bff); border-color: transparent; } /* "Alpha" is special — a shimmering gold→violet gradient wordmark used everywhere the word appears (menu link, store title, skin names). */ .alpha-word { font-weight: 900; letter-spacing: 0.3px; background: linear-gradient(100deg, #ffd75e, #ff8a5c, #d78bff, #7db4ff, #ffd75e); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 6px rgba(215,139,255,0.35)); animation: alphaShimmer 4.5s linear infinite; } @keyframes alphaShimmer { to { background-position: 200% center; } } @media (prefers-reduced-motion: reduce) { .alpha-word { animation: none; } } /* The ALPHA kind pill on a skin card gets the premium gold/violet treatment. */ .skin-card-kind.alpha { color: #1a1330; border: none; font-weight: 900; background: linear-gradient(100deg, #ffd75e, #ff8a5c, #d78bff, #7db4ff); box-shadow: 0 0 10px rgba(215,139,255,0.35); } /* Donate panel — its own cohesive violet identity, separate from the gold store */ .donate-head { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 800; font-size: 18px; color: #efeaff; letter-spacing: 0.2px; } .donate-head .donate-heart { filter: drop-shadow(0 0 8px rgba(176,107,255,0.6)); } .donate-intro { font-size: 12.5px; color: #a9b2d6; line-height: 1.5; margin: 0; text-align: center; max-width: 300px; } /* Quick-pick amount chips */ .donate-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; } .donate-chip { padding: 10px 0; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #d9d3ff; background: rgba(150,110,255,0.08); border: 1px solid rgba(178,150,255,0.25); border-radius: 10px; transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease; } .donate-chip:hover { transform: translateY(-1px); border-color: rgba(178,150,255,0.5); background: rgba(150,110,255,0.16); } .donate-chip.selected { color: #fff; border-color: transparent; background: linear-gradient(180deg, #b06bff, #7c46ff); box-shadow: 0 4px 14px rgba(124,70,255,0.4); } /* Custom amount field: $ prefix sits INSIDE a single bordered box; no spinner */ .donate-amount-wrap { display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; padding: 0 14px; border: 1px solid rgba(178,150,255,0.30); border-radius: 12px; background: rgba(150,110,255,0.06); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .donate-amount-wrap:focus-within { border-color: rgba(178,150,255,0.7); box-shadow: 0 0 0 3px rgba(124,70,255,0.18); } .donate-dollar { font-size: 22px; font-weight: 800; color: #b9a6ff; } #donateAmount { flex: 1; width: 100%; font: inherit; font-size: 24px; font-weight: 800; text-align: left; padding: 12px 0; border: none; outline: none; background: none; color: #fff; -moz-appearance: textfield; } #donateAmount::-webkit-outer-spin-button, #donateAmount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #donateNote { width: 100%; box-sizing: border-box; resize: vertical; min-height: 46px; font: inherit; font-size: 13.5px; padding: 11px 13px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.04); color: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #donateNote::placeholder { color: #7f88ad; } #donateNote:focus { outline: none; border-color: rgba(178,150,255,0.55); box-shadow: 0 0 0 3px rgba(124,70,255,0.15); } .donate-submit { width: 100%; background: linear-gradient(180deg, #b06bff, #7c46ff); box-shadow: 0 8px 22px rgba(124,70,255,0.4); letter-spacing: 0.3px; } .donate-submit:hover { background: linear-gradient(180deg, #bd7dff, #8a56ff); } .donate-fine { font-size: 11px; color: #7f88ad; line-height: 1.45; text-align: center; } /* ---- Gratitude reveal: the thank-you + gift shown after a donation -------- A full-screen dim with one card. The skin plays live in the card (the same looping video the blob wears) so the first time you see it animate is here. */ #thanksOverlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(60,30,120,0.55), rgba(4,6,18,0.9) 70%); backdrop-filter: blur(3px); padding: 20px; } #thanksOverlay[hidden] { display: none; } .thanks-card { position: relative; max-width: 420px; width: 100%; box-sizing: border-box; text-align: center; padding: 26px 24px 22px; border-radius: 20px; color: #fff; background: linear-gradient(180deg, rgba(28,24,58,0.98), rgba(16,14,36,0.98)); border: 1px solid rgba(178,150,255,0.45); box-shadow: 0 20px 70px rgba(0,0,0,0.65), 0 0 60px rgba(124,70,255,0.25); animation: thanksIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes thanksIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } } .thanks-title { font-size: 21px; font-weight: 800; color: #efeaff; margin-bottom: 4px; } .thanks-from { font-size: 12px; color: #9b93c9; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 14px; } .thanks-body { font-size: 13.5px; line-height: 1.65; color: #cdd3ee; margin: 0 0 18px; } .thanks-body em { color: #d9c9ff; font-style: normal; font-weight: 700; } /* The gift itself: a big round live preview with the aura a Green-rarity skin earns in the arena, so the card previews how it will actually look. */ .thanks-gift { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; } .thanks-orb { position: relative; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(190,160,255,0.7); box-shadow: 0 0 34px rgba(140,90,255,0.55), inset 0 0 20px rgba(0,0,0,0.5); animation: thanksPulse 3.2s ease-in-out infinite; } @keyframes thanksPulse { 0%, 100% { box-shadow: 0 0 28px rgba(140,90,255,0.45), inset 0 0 20px rgba(0,0,0,0.5); } 50% { box-shadow: 0 0 52px rgba(160,110,255,0.75), inset 0 0 20px rgba(0,0,0,0.5); } } .thanks-orb video, .thanks-orb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.28) contrast(1.08); } .thanks-gift-name { font-size: 17px; font-weight: 800; background: linear-gradient(100deg, #ffd75e, #ff8a5c, #d78bff, #7db4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .thanks-gift-tag { font-size: 11.5px; color: #9b93c9; letter-spacing: 0.3px; } .thanks-actions { display: flex; flex-direction: column; gap: 8px; } #thanksPrimary { width: 100%; background: linear-gradient(180deg, #b06bff, #7c46ff); box-shadow: 0 8px 22px rgba(124,70,255,0.4); } #thanksClose { background: none; border: none; color: #8b93b8; font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px; } #thanksClose:hover { color: #c9cfea; } /* Alpha watermark "A" on skin swatches */ .swatch .alpha-a { position: absolute; font-style: italic; font-family: "Brush Script MT","Segoe Script",Georgia,cursive; font-size: 30px; line-height: 1; opacity: 0.9; pointer-events: none; } /* Recolor picker row */ #recolorRow { display: flex; align-items: center; gap: 10px; justify-content: center; } #recolorRow[hidden] { display: none; } .recolor-label { font-size: 13px; color: #cfe0ff; } #recolorInput { width: 40px; height: 28px; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; background: none; cursor: pointer; padding: 0; } /* ---- Loot Bubbles (paid crates) ---- */ .loot-head { font-weight: 800; font-size: 17px; color: #eaf1ff; text-align: center; margin-bottom: 2px; } .loot-sub { font-size: 12px; color: #8b97bd; text-align: center; margin: 0 0 10px; line-height: 1.5; } /* Crate tabs — page selectors across the top */ .loot-crate-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; } .loot-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; padding: 8px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); transition: border-color 0.15s ease, background 0.15s ease; } .loot-tab:hover { border-color: rgba(255,255,255,0.22); } .loot-tab.active { border-color: rgba(150,180,255,0.55); background: rgba(92,155,255,0.12); box-shadow: 0 4px 14px rgba(40,70,160,0.30); } .loot-tab-name { font-size: 13px; font-weight: 700; color: #eef1fa; } .loot-tab-price { font-size: 11.5px; font-weight: 800; color: #ffe27a; } /* Stage — fixed size so the board never changes as you rotate the wheel. */ .loot-stage { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; box-sizing: border-box; border-radius: 16px; padding: 12px 12px 15px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.02); } .loot-stage-tag { font-size: 8px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #dbe7ff; background: rgba(150,180,255,0.12); border: 1px solid rgba(150,180,255,0.28); padding: 3px 10px; border-radius: 999px; } /* Selection wheel: rarest front-and-center, the rest fanned behind */ .loot-wheel { position: relative; width: 100%; height: 128px; margin: 6px 0 2px; } .loot-wheel-track { position: absolute; inset: 0; } .loot-wheel-item { position: absolute; top: 50%; left: 50%; background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.38s cubic-bezier(.2,.7,.25,1), opacity 0.38s ease; } .loot-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: #cdd8f5; border: 1px solid rgba(255,255,255,0.14); background: rgba(20,26,50,0.6); display: flex; align-items: center; justify-content: center; } .loot-nav:hover { color: #fff; border-color: rgba(255,255,255,0.30); } .loot-nav.prev { left: 0; } .loot-nav.next { right: 0; } /* The skin orb (reused for the wheel) */ .loot-orb { display: block; position: relative; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.42), rgba(255,255,255,0.03) 46%, transparent 62%), var(--skin, #888); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22), 0 3px 8px rgba(0,0,0,0.30); } .loot-orb .loot-orb-motif { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; } /* SOLID art (mosaic medallions): opaque, filling the orb — NOT screen-blended (screen over the orb's pale gradient washed them out). A touch of saturation + contrast so the stained glass reads vibrant, not milky. */ .loot-orb .loot-orb-motif.solid { mix-blend-mode: normal; object-fit: cover; filter: saturate(1.28) contrast(1.08); } /* Centered skin detail — fixed height (fits name + up to a 2-line flair) so the board doesn't grow/shrink between skins. */ .loot-cur { text-align: center; margin-top: 2px; height: 54px; display: flex; flex-direction: column; justify-content: center; } .loot-cur-name { font-size: 17px; font-weight: 800; color: #fff; } .loot-cur-meta { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 11px; margin-top: 2px; } .loot-cur-rarity { font-weight: 700; } .loot-cur-pct { color: #eaf1ff; font-weight: 800; } /* Buy (gold, tap-to-confirm) */ .loot-buy { margin-top: 11px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; color: #10203f; padding: 10px 26px; border: none; border-radius: 11px; background: linear-gradient(180deg, #ffe27a, #ffb43a); box-shadow: 0 6px 16px rgba(255,170,40,0.32); transition: filter 0.15s ease; } .loot-buy:hover { filter: brightness(1.05); } .loot-buy.armed { background: linear-gradient(180deg, #fff0b0, #ffd042); box-shadow: 0 0 0 2px rgba(255,226,122,0.6), 0 6px 16px rgba(255,170,40,0.4); } /* Owned + Open */ .loot-owned { display: flex; align-items: center; gap: 10px; margin-top: 11px; } .loot-owned-count { font-size: 12.5px; color: #cdd8f5; } .loot-owned-count b { color: #fff; } .loot-open { font: inherit; font-weight: 800; font-size: 12.5px; cursor: pointer; color: #10203f; padding: 7px 15px; border: none; border-radius: 9px; background: #eaf1ff; } .loot-open:hover { background: #fff; } /* Ticket bar */ .loot-tickets { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 270px; margin-top: 11px; } .loot-ticket-bar { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; } .loot-ticket-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5c9bff, #b98bff); transition: width 0.4s ease; } .loot-ticket-label { font-size: 10.5px; color: #8b97bd; white-space: nowrap; } .loot-redeem { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: #6fe0a0; background: none; border: none; padding: 0; white-space: nowrap; } .loot-odds-orb { width: 30px; height: 30px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4); } .loot-odds-orb img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; } /* ---- Reusable rarity flair on a preview orb — matches the in-game/reveal effects ---- Shine = a glare sweep (Purple/Gold/Green); Aura = a pulsing glow (GREEN ONLY); Sparkle = twinkling dots (Gold/Green); Ring = an orbiting comet (GREEN ONLY). */ .fx-shine::after { content: ""; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.6) 50%, transparent 62%); background-size: 260% 260%; animation: fxSheen 2.8s ease-in-out infinite; } @keyframes fxSheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -70% 0; } } .fx-aura { animation: fxAura 2.1s ease-in-out infinite; } @keyframes fxAura { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 5px 1px var(--fx, #4ade80); } 50% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 14px 4px var(--fx, #4ade80); } } /* Event Horizon — the photon ring breathes warm cream/rose around the void. */ .fx-horizon { animation: fxHorizon 3.2s ease-in-out infinite; } @keyframes fxHorizon { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,235,215,0.5), 0 0 14px 4px rgba(255,217,184,0.55), 0 0 26px 8px rgba(201,106,106,0.25); } 50% { box-shadow: inset 0 0 0 1.5px rgba(255,235,215,0.5), 0 0 7px 2px rgba(255,217,184,0.35), 0 0 16px 5px rgba(201,106,106,0.35); } } /* Bastet — her aura is her own: smoky gold, ink, and moonlight taking turns breathing around the black orb (mirrors the in-game tendril palette). */ .fx-bastet { animation: fxBastet 3.6s ease-in-out infinite; } @keyframes fxBastet { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 15px 4px rgba(240,199,90,0.60), 0 0 4px 1px rgba(255,255,255,0.25); } 33% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 6px 2px rgba(240,199,90,0.30), 0 0 17px 5px rgba(245,242,234,0.55); } 66% { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45), 0 0 9px 5px rgba(6,4,10,0.90), 0 0 20px 7px rgba(240,199,90,0.42); } } .fx-sparkle::before { content: ""; position: absolute; z-index: 3; top: -2px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff; pointer-events: none; box-shadow: 0 0 3px 1px rgba(255,255,255,0.9), -16px 8px 0 -0.5px #fff, 14px 5px 0 -1px #fff, -10px 26px 0 -1px #fff, 12px 24px 0 -1px #fff; animation: fxSpark 1.6s ease-in-out infinite; } @keyframes fxSpark { 0%, 100% { opacity: 0.12; } 50% { opacity: 1; } } .fx-ring { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.16); pointer-events: none; animation: fxRingSpin 6.5s linear infinite; } .fx-ring::before { content: ""; position: absolute; top: -2px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px 1px rgba(255,255,255,0.75); } /* Twin meteors: a second comet directly opposite the first (same path + direction). */ .fx-ring.dbl::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px 1px rgba(255,255,255,0.75); } @keyframes fxRingSpin { to { transform: rotate(360deg); } } .loot-odds-mid { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .loot-odds-name { font-size: 13px; color: #eaf1ff; font-weight: 600; } .loot-odds-meta { font-size: 10.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.2; } .loot-odds-fx { color: #b9c4e6; } .loot-odds-pct { font-size: 13px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } /* Loot skin in the locker: the motif glows over the tinted swatch (screen blend) */ .swatch.loot { position: relative; overflow: hidden; } .swatch.loot .swatch-motif { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; } /* Solid image skins (prestige gems): the art IS the skin — opaque, filling the disc */ .swatch.loot .swatch-motif.solid { mix-blend-mode: normal; object-fit: cover; filter: saturate(1.28) contrast(1.08); } /* Accent motif preview: the design shape (PNG alpha, used as a mask) filled with the skin's accent color — shown on odds orbs + locker swatches. */ .motif-accent { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; mix-blend-mode: normal; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* ---- Loot Bubble opening / reveal overlay ---- */ #crateReveal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, rgba(20,26,55,0.86), rgba(4,6,16,0.96)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* The `hidden` attribute must win over the ID rule above (ID specificity would otherwise keep the overlay permanently displayed and block the whole menu). */ #crateReveal[hidden] { display: none; } #crateCanvas { display: block; width: 100%; height: 100%; } #crateRevealUi { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; } #crateRarityLabel { font-weight: 800; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } #crateSkinName { font-weight: 800; font-size: 30px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.6); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; } #crateDupNote { font-weight: 700; font-size: 15px; color: #cfe0ff; opacity: 0; transition: opacity 0.5s ease 0.2s; display: flex; align-items: center; gap: 8px; } #crateDupNote[hidden] { display: none; } /* hidden attr must beat the ID rule above */ #crateReveal.revealed #crateRarityLabel, #crateReveal.revealed #crateSkinName, #crateReveal.revealed #crateDupNote { opacity: 1; transform: none; } #crateRevealBtns { display: flex; gap: 12px; opacity: 0; transition: opacity 0.4s ease 0.5s; pointer-events: none; } #crateReveal.revealed #crateRevealBtns { opacity: 1; pointer-events: auto; } #crateRevealBtns button { font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; padding: 12px 26px; border-radius: 12px; border: none; } #crateEquipBtn { color: #08122e; background: linear-gradient(180deg, #ffe27a, #ffb43a); box-shadow: 0 8px 22px rgba(255,170,40,0.4); } #crateContinueBtn { color: #eaf1ff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.2); } #crateHint { position: absolute; top: 9%; left: 0; right: 0; text-align: center; color: #9fb0d8; font-size: 13px; letter-spacing: 1px; opacity: 0.85; } /* ---- Bastet showcase: a scripted in-engine demo of the Green skin (opened from the loot wheel). Valorant-style: staged scenes with captions. ---- */ /* Fully OPAQUE: at 0.95 the shop wheel's orbs showed through behind the skin and read as stray "bubbles" floating around it. */ #bastetDemo { position: fixed; inset: 0; z-index: 62; background: radial-gradient(circle at 50% 42%, #100d1a, #030208); } #bastetDemo[hidden] { display: none; } /* hidden attr must beat the ID rule */ #bastetDemoCanvas { display: block; width: 100%; height: 100%; cursor: pointer; } #bastetDemoTag { position: absolute; top: 7%; left: 0; right: 0; text-align: center; color: #f0c75a; font-weight: 800; font-size: 13px; letter-spacing: 3px; text-shadow: 0 0 16px rgba(240,199,90,0.5); pointer-events: none; } #bastetDemoCaption { position: absolute; left: 24px; right: 24px; bottom: 12%; text-align: center; color: #efece2; font-weight: 800; font-size: clamp(18px, 3.2vw, 26px); letter-spacing: 0.5px; pointer-events: none; text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 26px rgba(240,199,90,0.25); opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; } #bastetDemoCaption.show { opacity: 1; transform: none; } #bastetDemoClose { position: absolute; top: 16px; right: 18px; font: inherit; font-weight: 800; font-size: 14px; color: #eaf1ff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; padding: 8px 14px; cursor: pointer; } #bastetDemoClose:hover { background: rgba(255,255,255,0.16); } /* The little gold pill on Bastet's wheel card that opens the showcase. */ .loot-demo-btn { font: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; color: #10203f; background: linear-gradient(180deg, #ffe9b0, #f0c75a); border: none; border-radius: 8px; padding: 3px 9px; letter-spacing: 0.3px; box-shadow: 0 0 10px rgba(240,199,90,0.35); } .loot-demo-btn:hover { filter: brightness(1.08); } /* Alpha premium skins (own "Alpha" tab) */ .alpha-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 4px; text-align: center; } .alpha-title { font-weight: 800; font-size: 19px; color: #ffe27a; text-shadow: 0 0 14px rgba(245,179,1,0.35); } .alpha-sub { font-weight: 700; font-size: 13px; color: #ff9a5c; letter-spacing: 0.5px; } /* Countdown to the Alpha archive — a clear, ticking deadline. */ .alpha-countdown { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 2px 0 10px; padding: 9px 14px; width: 100%; border: 1px solid rgba(255,170,90,0.30); border-radius: 12px; background: linear-gradient(180deg, rgba(255,150,80,0.12), rgba(150,110,255,0.06)); } .alpha-countdown-label { font-size: 11px; font-weight: 700; color: #ffc59a; letter-spacing: 0.4px; text-transform: uppercase; } .alpha-countdown-clock { font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 1px; text-shadow: 0 0 12px rgba(255,170,90,0.35); } .alpha-countdown-date { font-size: 11px; color: #b9a7ff; } .alpha-countdown.ended { border-color: rgba(255,120,120,0.4); background: rgba(255,90,90,0.08); } .alpha-countdown.ended .alpha-countdown-clock { font-size: 15px; color: #ff9a9a; letter-spacing: 0.3px; } .alpha-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; } .alpha-archived-note { grid-column: 1 / -1; text-align: center; font-size: 13px; line-height: 1.5; color: #cdbcff; padding: 18px 10px; } .alpha-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 12px 16px; text-align: center; border: 1px solid rgba(178,150,255,0.22); border-radius: 14px; background: linear-gradient(180deg, rgba(150,110,255,0.10), rgba(150,110,255,0.03)); color: #fff; cursor: pointer; transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .alpha-item:hover { transform: translateY(-3px); border-color: rgba(178,150,255,0.55); box-shadow: 0 10px 26px rgba(70,35,140,0.40); } .alpha-item:disabled { cursor: default; transform: none; box-shadow: none; } .alpha-item.leaving { border-color: rgba(255,150,80,0.40); background: linear-gradient(180deg, rgba(255,140,60,0.10), rgba(255,140,60,0.03)); } /* Badge: a clean uppercase pill centered along the top edge */ .alpha-badge { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 7.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; line-height: 1; color: #cdbcff; background: rgba(150,110,255,0.16); border: 1px solid rgba(178,150,255,0.28); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } /* Limited stock: slightly larger, warm amber, with a gentle pulse — draws the eye without dominating. The x/x count is emphasized so scarcity reads instantly. */ .alpha-badge.stock { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; padding: 4px 10px; letter-spacing: 0.5px; color: #ffdf9a; background: rgba(255,168,54,0.16); border-color: rgba(255,180,70,0.5); box-shadow: 0 0 9px rgba(255,168,54,0.22); animation: stockPulse 2.4s ease-in-out infinite; } .alpha-badge.stock .stock-count { font-size: 12.5px; font-weight: 900; color: #fff; } @keyframes stockPulse { 0%, 100% { box-shadow: 0 0 7px rgba(255,168,54,0.16); border-color: rgba(255,180,70,0.42); } 50% { box-shadow: 0 0 14px rgba(255,168,54,0.42); border-color: rgba(255,196,96,0.72); } } @media (prefers-reduced-motion: reduce) { .alpha-badge.stock { animation: none; } } .alpha-item.leaving .alpha-badge { color: #ffc38a; background: rgba(255,150,80,0.12); border-color: rgba(255,150,80,0.30); } .alpha-swatch { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 3px 6px rgba(255,255,255,0.15), inset 0 -3px 8px rgba(0,0,0,0.30); /* Magical premium glow: pulses in the skin's own color (--glow set inline). */ animation: alphaGlow 2.4s ease-in-out infinite; } @keyframes alphaGlow { 0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 3px 6px rgba(255,255,255,0.15), inset 0 -3px 8px rgba(0,0,0,0.30), 0 0 6px 1px var(--glow, #fff); } 50% { box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 3px 6px rgba(255,255,255,0.15), inset 0 -3px 8px rgba(0,0,0,0.30), 0 0 16px 4px var(--glow, #fff); } } /* A slow sparkle sheen sweeping across the swatch. */ .alpha-swatch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; overflow: hidden; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.55) 48%, transparent 60%); background-size: 250% 250%; animation: alphaSheen 3.2s ease-in-out infinite; } @keyframes alphaSheen { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } } /* Twinkling sparkles around the swatch — the same premium flair the blob wears in-game, advertised on the store preview (multiple dots via box-shadow). */ .alpha-swatch::before { content: ""; position: absolute; z-index: 2; top: 1px; left: 50%; width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff; pointer-events: none; box-shadow: 0 0 4px 1px rgba(255,255,255,0.9), -22px 9px 0 -0.5px #fff, 19px 5px 0 -1px #fff, -13px 32px 0 -1px #fff, 15px 30px 0 -1px #fff, 26px 20px 0 -1.5px #fff; animation: alphaSpark 1.7s ease-in-out infinite; } @keyframes alphaSpark { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } } /* Same script "A" watermark the blob wears in-game and the Your-skins swatch shows — so the store preview matches exactly what you get. */ .alpha-swatch .alpha-a { position: static; font-style: italic; font-family: "Brush Script MT","Segoe Script",Georgia,cursive; font-size: 34px; line-height: 1; opacity: 0.9; } .alpha-name { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; color: #f3f0ff; } .alpha-price { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; margin-top: 1px; } .alpha-back { font-size: 10.5px; font-weight: 700; color: #ffe27a; line-height: 1; background: rgba(255,215,0,0.10); border: 1px solid rgba(255,215,0,0.22); padding: 3px 9px; border-radius: 999px; } /* Sold out: gray the card + diagonal red stamp */ .alpha-item.sold-out { cursor: default; filter: grayscale(0.45); opacity: 0.85; } .alpha-item.sold-out:hover { transform: none; box-shadow: none; border-color: rgba(178,150,255,0.22); } /* Owned already: grey it out + not purchasable — same treatment as the Shop. */ .alpha-item.owned { pointer-events: none; opacity: 0.5; filter: grayscale(0.4); } .alpha-owned-tag { font-size: 14px; font-weight: 800; color: #7dffa6; line-height: 1; margin-top: 1px; } .sold-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); font-weight: 900; font-size: 18px; letter-spacing: 2px; color: #ff3b4e; border: 3px solid #ff3b4e; border-radius: 6px; padding: 3px 11px; background: rgba(20,6,10,0.45); text-shadow: 0 1px 2px rgba(0,0,0,0.6); pointer-events: none; white-space: nowrap; text-transform: uppercase; } #howPanel .mobile-only { display: none; } body.touch-device #howPanel .mobile-only { display: block; } /* Cursor lock is desktop-only — there's no pointer to capture on a phone. */ body.touch-device #howPanel .desktop-only { display: none; } .how-setting { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .how-setting .gate-note { max-width: 560px; } /* Signed-in card: identity + prominent Gems + on-brand Sign out */ #authStatus { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 18px; border-radius: 14px; background: rgba(124,255,166,0.06); border: 1px solid rgba(124,255,166,0.18); } #authStatus .si-who { color: #7dffa6; font-size: 14px; } #authStatus .si-who b { color: #d6ffe4; } #authStatus .si-row { display: flex; align-items: center; gap: 14px; } .si-gems { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,215,0,0.10); border: 1px solid rgba(255,215,0,0.35); } .si-gems .gem-ico { font-size: 20px; } .si-gems .gem-amt { font-size: 24px; font-weight: 800; color: #ffe27a; letter-spacing: 0.5px; display: inline-block; } .btn-signout { padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; color: #cfd6e6; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-signout:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35); } /* Gem count "slam" when Gems change (bigger for purchases) */ @keyframes gemSlam { 0% { transform: scale(2.1); color: #fff; text-shadow: 0 0 22px #ffe27a; } 60% { transform: scale(0.92); } 100% { transform: scale(1); } } .chip-amt.slam, .gem-amt.slam { animation: gemSlam 0.5s cubic-bezier(.2,1.4,.3,1); display: inline-block; } @keyframes gemSlamBig { 0% { transform: scale(3); color: #fff; text-shadow: 0 0 40px #ffe27a, 0 0 12px #fff; } 15% { transform: scale(3); } 55% { transform: scale(0.85); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } .chip-amt.slam-big, .gem-amt.slam-big { animation: gemSlamBig 0.95s cubic-bezier(.2,1.3,.3,1); display: inline-block; } /* Post-purchase thank-you celebration */ #purchaseHype { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; pointer-events: none; background: radial-gradient(circle at center, rgba(60,45,0,0.55), rgba(5,5,12,0.86)); backdrop-filter: blur(2px); } #purchaseHype.show { display: flex; animation: hypeIn 0.4s ease-out; } @keyframes hypeIn { from { opacity: 0; } to { opacity: 1; } } #purchaseHype .hype-emoji { font-size: 72px; animation: hypePop 0.7s cubic-bezier(.2,1.5,.3,1); } @keyframes hypePop { 0% { transform: scale(0) rotate(-20deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } #purchaseHype .hype-title { font-size: clamp(22px, 4vw, 34px); font-weight: 800; color: #ffe27a; text-shadow: 0 0 20px rgba(245,179,1,0.6); } #purchaseHype .hype-sub { font-size: 16px; color: #d9dcff; max-width: 460px; } #purchaseHype .hype-close { pointer-events: auto; margin-top: 10px; } #authEmail { width: 190px; padding: 12px 14px; font-size: 15px; border-radius: 10px; border: none; text-align: center; } .primary.discord { background: #5865F2; } .primary.discord:hover { background: #4752c4; } #hud { position: fixed; top: calc(66px + env(safe-area-inset-top, 0px)); left: 12px; color: #fff; z-index: 5; background: rgba(0,0,0,0.35); padding: 10px 14px; border-radius: 10px; font-size: 14px; min-width: 160px; } #hud b { color: #ffd15c; } .row { display: flex; justify-content: space-between; gap: 12px; } .row.me span, .row.me b { color: #7fe3ff; } .tier { color: #ffd15c; font-size: 11px; } /* Round timer (top-center) */ #timer { position: fixed; top: calc(66px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(0,0,0,0.42); color: #fff; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; letter-spacing: 1px; padding: 6px 18px; border-radius: 10px; min-width: 96px; text-align: center; } #timer.intermission { color: #7dffa6; font-size: 16px; } /* In-game room-code chip (private games only) */ #roomChip { position: fixed; top: calc(108px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(92,155,255,0.22); border: 1px solid rgba(92,155,255,0.5); color: #cfe0ff; font-size: 13px; padding: 4px 12px; border-radius: 8px; cursor: pointer; display: none; } #roomChip:hover { background: rgba(92,155,255,0.32); } #quitBtn { position: fixed; left: 12px; bottom: 12px; z-index: 7; display: none; padding: 8px 14px; border: none; border-radius: 8px; background: rgba(0,0,0,0.45); color: #cfd6e6; font-size: 13px; cursor: pointer; } #quitBtn:hover { background: rgba(0,0,0,0.7); color: #fff; } body.playing:not(.touch-device) #quitBtn { display: block; } /* Match standings (top-right) */ #scoreboard { position: fixed; top: calc(66px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 5; color: #fff; background: rgba(0,0,0,0.35); padding: 10px 14px; border-radius: 10px; font-size: 14px; min-width: 190px; } #scoreboard .hud-title { font-weight: 700; color: #ffd15c; margin-bottom: 6px; letter-spacing: 0.5px; } #scoreboard b { color: #ffd15c; } #scoreboard .sb-empty { color: #8b93b2; font-size: 12px; line-height: 1.4; max-width: 180px; } #scoreboard .sb-empty b { color: #ffd15c; } /* End-of-match results overlay */ #results { position: fixed; inset: 0; z-index: 18; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(circle at center, rgba(20,24,48,0.92), rgba(5,6,14,0.96)); color: #fff; text-align: center; padding: 20px; } #results.show { display: flex; } /* End screen: a cohesive card matching the menu aesthetic. */ .results-card { display: flex; flex-direction: column; align-items: center; gap: 13px; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 26px 30px 24px; border-radius: 20px; background: linear-gradient(180deg, rgba(30,34,58,0.78), rgba(16,18,32,0.72)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 22px 64px rgba(0,0,0,0.55); } .results-card::-webkit-scrollbar { width: 0; height: 0; display: none; } .results-crown { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 16px rgba(255,200,80,0.45)); } #results h2 { font-size: 28px; font-weight: 800; color: #ffd15c; letter-spacing: 0.4px; margin-top: -4px; } #podium { display: flex; align-items: flex-end; gap: 14px; margin: 6px 0; flex-wrap: wrap; justify-content: center; } .podium-slot { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; padding: 14px 18px; min-width: 126px; } .podium-slot .medal { font-size: 38px; } .podium-slot .pname { font-weight: 700; margin-top: 5px; font-size: 14px; } .podium-slot .ppts { color: #7dffa6; font-size: 13px; margin-top: 2px; } .podium-slot .preward { color: #ffd15c; font-weight: 700; margin-top: 4px; font-size: 13px; } .podium-slot.p1 { transform: translateY(-14px); background: linear-gradient(180deg, rgba(255,215,92,0.17), rgba(255,215,92,0.04)); box-shadow: 0 0 28px rgba(255,215,92,0.32); border-color: rgba(255,215,92,0.55); } .podium-empty { color: #cdd6ef; font-size: 15px; line-height: 1.55; padding: 20px 12px; max-width: 400px; } #resultsPanel { width: 100%; background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 14px 18px; font-size: 14px; } #resultsPanel .hud-title { color: #ffd15c; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.3px; } #resultsNext { color: #9aa3c7; font-size: 14px; } #resultsActions { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; justify-content: center; } .sb-row { display: grid; grid-template-columns: 26px 1fr 56px 34px 34px; gap: 6px; align-items: center; padding: 3px 0; font-size: 14px; } .sb-row span { text-align: right; } .sb-row .sb-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-row.sb-head { color: #9aa3c7; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 4px; } .sb-row.me { color: #7fe3ff; } /* Reward toast (top-3 payouts + guest "sign in to claim") */ #rewardToast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 25; background: rgba(20,24,48,0.96); border: 1px solid rgba(255,215,92,0.6); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 6px 30px rgba(0,0,0,0.55); max-width: 92vw; text-align: center; } #rewardToast[hidden] { display: none; } #rewardText b { color: #ffd15c; } .stamina-label { color: #9aa3c7; font-size: 12px; margin: 8px 0 4px; } #dashCharges { display: flex; gap: 6px; } .dashPip { flex: 1; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.12); overflow: hidden; position: relative; } .dashPip .pipFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #5cff8f; border-radius: 6px; transition: width 0.1s linear, background 0.15s linear, opacity 0.15s linear; } /* Dramatic "you were consumed" screen */ #death { position: fixed; inset: 0; z-index: 9; display: none; /* below #overlay (10): menus always cover the death screen */ flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #e8e8f0; background: radial-gradient(circle at center, rgba(60,10,20,0.65), rgba(5,5,12,0.92)); backdrop-filter: grayscale(1) blur(1px); animation: deathIn 0.5s ease-out; } #death.show { display: flex; } @keyframes deathIn { from { opacity: 0; } to { opacity: 1; } } #death .skull { font-size: 72px; animation: sink 2.6s ease-in-out infinite; } @keyframes sink { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } } #death h2 { font-size: 34px; font-weight: 700; letter-spacing: 1px; color: #ff6b81; } #death .eulogy { color: #aab0cf; font-size: 17px; font-style: italic; max-width: 460px; } #death .lost { color: #ffd15c; font-size: 15px; } #death .survived { color: #9fe8ff; font-size: 15px; font-weight: 600; } #death .survived .best { color: #ffd15c; } #death .respawn { margin-top: 8px; color: #7f88ad; font-size: 14px; } /* Price/scope note under "Create private game". */ .gate-note { font-size: 12px; color: #8e99bd; margin: 2px 0 0; max-width: 380px; line-height: 1.5; } .gate-note b { color: #cdd8f5; } #joinGateAction { margin-top: 6px; } #joinGateAction[hidden] { display: none; } /* ---- Prestige moment ---- Sits high on screen and is pointer-events:none throughout: you are still in a live arena while this plays, so it must never eat a click or block a dodge. */ #prestige { position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 8; pointer-events: none; text-align: center; opacity: 0; --pr: #ffd15c; } #prestige.show { animation: prIn 2600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes prIn { 0% { opacity: 0; transform: translateX(-50%) scale(0.72); } 9% { opacity: 1; transform: translateX(-50%) scale(1.06); } 16% { transform: translateX(-50%) scale(1); } 72% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-26px); } } .pr-rank { display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; } .pr-star { font-size: 40px; color: var(--pr); filter: drop-shadow(0 0 18px var(--pr)); animation: prSpin 2600ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes prSpin { 0% { transform: rotate(-140deg) scale(0.4); } 30% { transform: rotate(0) scale(1); } } .pr-num { font-size: 68px; font-weight: 900; letter-spacing: -2px; color: #fff; text-shadow: 0 0 26px var(--pr), 0 0 60px var(--pr); } .pr-tier { font-size: 25px; font-weight: 800; letter-spacing: 7px; text-transform: uppercase; color: var(--pr); margin-top: 2px; text-shadow: 0 0 20px var(--pr); } /* The whole point: name what was made PERMANENT, not what reset. */ .pr-line { margin-top: 9px; font-size: 14px; font-weight: 700; color: #dfe6ff; } .pr-line b { color: var(--pr); } .pr-keep { margin-top: 3px; font-size: 12.5px; color: #9aa3c7; } .pr-keep b { color: #cdd8f5; } @media (max-width: 620px) { #prestige { top: 12%; } .pr-num { font-size: 48px; } .pr-tier { font-size: 18px; letter-spacing: 5px; } .pr-star { font-size: 30px; } } /* ---- Pointer-lock hint ---- */ #lockHint { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 7; background: rgba(12,14,26,0.78); border: 1px solid rgba(150,170,255,0.22); border-radius: 999px; padding: 8px 18px; font-size: 13px; color: #cdd8f5; pointer-events: none; animation: kfIn 0.2s ease-out; } #lockHint[hidden] { display: none; } #lockHint b { color: #ffd15c; } /* ---- Private-game lobby ---- */ #lobby { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(8,10,20,0.82); backdrop-filter: blur(3px); } #lobby.show { display: flex; } .lobby-card { display: flex; flex-direction: column; align-items: center; gap: 12px; background: #171b30; border: 1px solid rgba(150,170,255,0.18); border-radius: 16px; padding: 26px 30px; max-width: 440px; width: min(92vw, 440px); text-align: center; } .lobby-title { font-size: 24px; font-weight: 700; } .lobby-sub { color: #9aa3c7; font-size: 13px; margin: 0; } .lobby-code { font-size: 30px; font-weight: 800; letter-spacing: 6px; color: #ffd15c; background: rgba(255,209,92,0.09); border: 1px dashed rgba(255,209,92,0.4); border-radius: 12px; padding: 10px 20px; cursor: pointer; font-family: inherit; } .lobby-code:hover { background: rgba(255,209,92,0.16); } .lobby-players { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .lobby-player { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: rgba(120,150,255,0.10); border: 1px solid rgba(150,180,255,0.22); border-radius: 999px; padding: 5px 12px; color: #cdd8f5; } .lobby-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .lobby-count { color: #8e99bd; font-size: 12px; } .lobby-countdown { font-size: 56px; font-weight: 800; color: #5cff8f; line-height: 1; } .lobby-countdown[hidden] { display: none; } #lobbyStartBtn[disabled] { opacity: 0.5; cursor: default; } /* ---- "Your games": rejoin a private room you're hosting ---- */ .mygames { width: 100%; margin-top: 14px; } .mygames-head { font-size: 13px; font-weight: 700; color: #cdd8f5; margin-bottom: 6px; } .mygame { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: rgba(120,150,255,0.07); border: 1px solid rgba(150,180,255,0.18); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; text-align: left; } .mygame-code { font-weight: 800; letter-spacing: 3px; color: #ffd15c; font-size: 15px; } .mygame-meta { font-size: 11.5px; color: #8e99bd; } .mygame button { flex: none; } .mygames-empty { font-size: 12px; color: #6b769c; } /* ---- Kill feed (bottom-right, in-game only) ---- */ #killFeed { position: fixed; right: 14px; bottom: 14px; z-index: 6; display: none; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; max-width: min(46vw, 340px); } body.playing #killFeed { display: flex; } .kf-row { background: rgba(12,14,26,0.62); border: 1px solid rgba(150,170,255,0.16); border-radius: 8px; padding: 5px 10px; font-size: 13px; line-height: 1.35; color: #c3cbe8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; animation: kfIn 0.18s ease-out; } @keyframes kfIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } .kf-row.fading { opacity: 0; transition: opacity 0.5s ease; } .kf-killer { color: #ffd15c; font-weight: 700; } .kf-victim { color: #ff8fa0; font-weight: 700; } .kf-verb { opacity: 0.75; margin: 0 4px; } /* Your own kills/deaths stand out from the crowd's. */ .kf-row.kf-mine { border-color: rgba(92,155,255,0.55); background: rgba(30,44,84,0.72); } @media (max-width: 620px) { #killFeed { right: 8px; bottom: 92px; max-width: 60vw; } .kf-row { font-size: 11.5px; padding: 4px 8px; } } #respawnBtn { margin-top: 16px; padding: 14px 40px; font-size: 20px; font-weight: 700; border: none; border-radius: 12px; background: #5cff8f; color: #0f1220; cursor: pointer; transition: transform 0.1s, background 0.15s; } #respawnBtn:hover { background: #7dffa6; transform: scale(1.05); } /* Red pain vignette that flashes on death */ #vignette { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; box-shadow: inset 0 0 220px 60px rgba(255, 30, 60, 0.75); transition: opacity 0.6s ease-out; } #vignette.flash { opacity: 1; } /* Screen-shake applied to the canvas */ @keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-8px, 6px); } 40% { transform: translate(7px, -7px); } 60% { transform: translate(-6px, -5px); } 80% { transform: translate(6px, 7px); } } .shake { animation: shake 0.5s ease-in-out; } /* Harder shake for the Gold-250 mega-spike cataclysm (whole room feels it) */ @keyframes shakeHard { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-14px, 10px); } 30% { transform: translate(13px, -12px); } 45% { transform: translate(-12px, -10px); } 60% { transform: translate(12px, 12px); } 75% { transform: translate(-9px, 8px); } } .shake-hard { animation: shakeHard 0.8s ease-in-out; } /* Gold flash when a mega-spike forms. Kept translucent (max ~0.5 at center) and short so it punches without curtaining over the canvas chain-lightning, which lives longer and must stay visible. */ #megaFlash { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, rgba(255,228,150,0.5), rgba(245,179,1,0.2) 48%, rgba(245,179,1,0) 70%); } #megaFlash.show { animation: megaFlash 0.55s ease-out; } @keyframes megaFlash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } /* Arena-wide banner when a mega-spike forms */ #megaBanner { position: fixed; top: 18%; left: 50%; transform: translate(-50%, 0); z-index: 8; pointer-events: none; opacity: 0; white-space: nowrap; font-weight: 800; font-size: clamp(20px, 4vw, 42px); letter-spacing: 2px; color: #ffcf3a; text-shadow: 0 0 20px rgba(245,179,1,0.9), 0 2px 6px rgba(0,0,0,0.7); } #megaBanner.show { animation: megaBanner 2.6s ease-out; } @keyframes megaBanner { 0% { opacity: 0; transform: translate(-50%, 12px) scale(0.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.06); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } } /* ---- Touch controls: hidden unless on a touch device AND in-game ---- */ #touch { display: none; } body.touch-device.playing #touch { display: block; } #touch * { touch-action: none; user-select: none; -webkit-user-select: none; } /* Joystick bottom-left, action buttons bottom-right — both safe-area aware and laid out so they NEVER overlap in portrait OR landscape. Portrait: the actions stack vertically (one-button-wide, clear of the joystick even at 320px wide). Landscape: they sit in a row (there's ample width, so no collision). */ #stick { position: fixed; z-index: 8; width: 122px; height: 122px; border-radius: 50%; left: max(20px, env(safe-area-inset-left, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.18); } #stickKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(92,155,255,0.8); box-shadow: 0 0 12px rgba(92,155,255,0.6); } #touchBtns { position: fixed; z-index: 8; display: flex; flex-direction: column; gap: 14px; align-items: center; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); } @media (orientation: landscape) { #touchBtns { flex-direction: row; align-items: flex-end; } } #touchBtns button { position: relative; overflow: hidden; width: 76px; height: 76px; border-radius: 50%; border: none; font-size: 30px; color: #fff; cursor: pointer; } /* Weapon-button cooldown sweep: a shrinking dark pie (--cd = fraction of the cooldown remaining, set from JS). Empty = ready; a ring flags the moment it's usable again so touch players can time strikes/shots too. */ #swingBtn::after, #gunBtn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(6,10,20,0.62) calc(var(--cd, 0) * 360deg), rgba(0,0,0,0) 0); transition: opacity 0.12s ease; } #swingBtn.cd-ready, #gunBtn.cd-ready { box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.3); } #swingBtn { background: rgba(232,236,245,0.22); border: 2px solid rgba(232,236,245,0.5); } #dashBtn { background: rgba(92,255,143,0.22); border: 2px solid rgba(92,255,143,0.6); } #gunBtn { background: rgba(255,59,59,0.22); border: 2px solid rgba(255,59,59,0.6); } #touchBtns button:active { filter: brightness(1.4); } /* ---- In-game weapon-ready meters (sword + gun), beside the dash pips. Fill = cooldown recharge (0->100%); glows + "ready" when usable. Timings come from the server's combat config, so they always match the real mechanic. ---- */ .wpn-meters { display: flex; gap: 10px; margin-top: 4px; } .wpn { flex: 1; display: flex; align-items: center; gap: 7px; } .wpn-ico { font-size: 14px; line-height: 1; width: 16px; text-align: center; } .wpn-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.12); overflow: hidden; position: relative; } .wpn-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 5px; transition: width 0.08s linear, box-shadow 0.15s linear, opacity 0.15s linear; opacity: 0.85; } .wpn.sword .wpn-fill { background: #e6ecf7; } .wpn.gun .wpn-fill { background: #ff7a7a; } .wpn.ready .wpn-fill { opacity: 1; box-shadow: 0 0 8px rgba(255,255,255,0.55); } .wpn.ready .wpn-ico { filter: drop-shadow(0 0 5px rgba(255,255,255,0.6)); } /* ---- Winners' Circle (Trophy store) ---- */ .winners-blurb { display: flex; align-items: flex-start; gap: 9px; width: 100%; font-size: 12.5px; line-height: 1.5; color: #ffe6c2; text-align: left; background: linear-gradient(180deg, rgba(255,170,70,0.12), rgba(255,150,60,0.04)); border: 1px solid rgba(255,186,96,0.30); border-radius: 12px; padding: 11px 13px; } .winners-blurb .wb-ico { font-size: 17px; line-height: 1.2; } .winners-blurb b { color: #ffd8a0; } /* Trophy price on a winner card (amber, matches the Trophy chip). */ .skin-card-sub.trophy { color: #ffd8a0; font-weight: 800; font-size: 12.5px; } .skin-card.winner { border-color: rgba(255,186,96,0.34); background: linear-gradient(180deg, rgba(255,170,70,0.12), rgba(255,150,60,0.03)); } .skin-card.winner:hover { border-color: rgba(255,206,132,0.6); } /* ---- Account view (minimal + honest — mirrors the Legal Bits voice) ---- */ .account-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; border-radius: 14px; background: rgba(124,255,166,0.06); border: 1px solid rgba(124,255,166,0.18); } .account-who { font-size: 16px; color: #d6ffe4; } .account-who b { color: #7dffa6; } .account-field { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #b7c2e0; } .account-field b { color: #eaf1ff; font-weight: 600; } .account-wallet { display: flex; gap: 10px; } .account-note { font-size: 12px; color: #8ea0d0; line-height: 1.5; text-align: center; max-width: 340px; } .account-note a { color: #8ea0d0; } /* Referral code: monospace + tracked out, because it gets read aloud on stream and typed by hand from a video. */ .ref-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 2px; font-size: 17px; color: #7dffa6; } .ref-optional { color: #8ea0d0; font-weight: 400; } #referralCard .join-row input { text-transform: uppercase; } #referralCard #refAlias { text-transform: none; } .account-legal { font-size: 12px; color: #6b769c; } .account-legal a { color: #8ea0d0; text-decoration: none; } .account-legal a:hover { color: #cfe0ff; } /* ---- Play home view ---- */ .play-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .play-logo { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 22px rgba(124,120,255,0.45)); } #playView h1 { font-size: 46px; letter-spacing: 0.5px; } #playView .tagline { color: #9aa3c7; font-size: 15px; max-width: 430px; line-height: 1.55; } #playView #name { margin-top: 0; } /* Name + "remember me" toggle sit on one row; the input stays centred. */ .name-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .remember-toggle { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #8e99bd; background: none; border: none; padding: 6px 4px; } .remember-toggle:hover { color: #cdd8f5; } .remember-track { width: 32px; height: 18px; border-radius: 9px; background: #3a4266; position: relative; transition: background 0.15s ease; flex: none; } .remember-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #cdd8f5; transition: transform 0.15s ease; } .remember-toggle[aria-checked="true"] { color: #cfe0ff; } .remember-toggle[aria-checked="true"] .remember-track { background: #5c9bff; } .remember-toggle[aria-checked="true"] .remember-knob { transform: translateX(14px); background: #fff; } /* Scope note under the name row — only shown while "Remember me" is on. */ .remember-hint { font-size: 11.5px; color: #6b769c; margin: -8px 0 0; max-width: 340px; line-height: 1.45; } .remember-hint[hidden] { display: none; } @media (max-width: 560px) { .name-row { flex-direction: column; gap: 6px; } .remember-hint { margin-top: -4px; } } .play-actions { display: flex; flex-direction: column; gap: 11px; align-items: center; width: 100%; margin-top: 2px; } .primary.play-big { font-size: 20px; font-weight: 700; padding: 15px 46px; border-radius: 13px; box-shadow: 0 8px 26px rgba(92,155,255,0.38); } .play-friends-btn { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: #cdd8f5; padding: 12px 26px; border-radius: 13px; border: 1px solid rgba(150,180,255,0.30); background: rgba(120,150,255,0.09); transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .play-friends-btn:hover { transform: translateY(-1px); border-color: rgba(150,180,255,0.6); background: rgba(120,150,255,0.18); color: #fff; } .play-friends-btn .pf-ico { font-size: 17px; } #playView .account-legal { margin-top: 6px; } /* Top-bar left group + "Back to game" resume chip (shown when the menu is over a game). */ .tb-left { display: flex; align-items: center; gap: 10px; } .chip-resume { background: linear-gradient(180deg, rgba(124,255,166,0.18), rgba(124,255,166,0.05)); border-color: rgba(124,255,166,0.42); color: #d6ffe4; font-weight: 700; } .chip-resume:hover { border-color: rgba(124,255,166,0.72); box-shadow: 0 4px 14px rgba(60,200,120,0.28); } .chip-resume[hidden] { display: none; } /* Menu opened OVER a live game: let the game glow through behind the overlay. */ body.menu-over-game #overlay { background: linear-gradient(rgba(9,11,20,0.70), rgba(9,11,20,0.82)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ================= Tab redesign: full-width content views ================= */ .view.full { max-width: 1080px; max-height: 100%; align-items: stretch; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .view.full::-webkit-scrollbar { width: 0; height: 0; display: none; } .tab-head { width: 100%; text-align: left; margin-bottom: 4px; } .tab-head h2 { font-size: 25px; font-weight: 800; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; } .tab-head p { font-size: 13.5px; color: #9aa3c7; margin-top: 4px; } .tab-head .tab-head-actions { margin-top: 2px; } /* Skin grids fill the width instead of a fixed 2 columns. */ .skins-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; } .loot-hero-grid { grid-template-columns: repeat(auto-fill, minmax(162px, 1fr)); } .store-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* ---- Mailbox ---- */ /* The rail badge counts messages that still want something from you: unread, or read but with a gift left unclaimed. */ .nav-badge { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #ff5c7a; color: #fff; font-size: 11px; font-weight: 800; text-align: center; } .nav-badge[hidden] { display: none; } .mail-redeem { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.03); } .mail-redeem label { font-size: 13px; color: #9aa3c7; } .mail-redeem input { width: 190px; text-transform: uppercase; letter-spacing: 1px; } .mail-redeem .msg { flex: 1 1 100%; text-align: left; min-height: 0; } .mail-list { width: 100%; display: flex; flex-direction: column; gap: 10px; } .mail-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.03); padding: 12px 14px; } .mail-item.unread { border-color: rgba(92,155,255,0.5); background: rgba(92,155,255,0.07); } .mail-item.claimable { border-color: rgba(124,255,166,0.55); background: rgba(124,255,166,0.07); } .mail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .mail-subject { font-size: 15px; font-weight: 800; color: #eaf1ff; } .mail-from { font-size: 12px; color: #8ea0d0; } .mail-date { margin-left: auto; font-size: 12px; color: #6f7ba3; } .mail-body { font-size: 13.5px; color: #c3cbe6; margin-top: 6px; white-space: pre-wrap; } .mail-gifts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .mail-gift { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(124,255,166,0.14); color: #b7ffd0; } .mail-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; } .mail-claimed { font-size: 12.5px; color: #7dffa6; font-weight: 700; } .mail-empty { text-align: center; color: #9aa3c7; font-size: 14px; padding: 34px 0; } /* Shop sections */ .shop-body { width: 100%; display: flex; flex-direction: column; } .shop-block { width: 100%; margin-top: 24px; } .shop-block:first-child { margin-top: 8px; } .shop-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .shop-block-head .sbh-name { font-size: 16px; font-weight: 800; letter-spacing: 0.2px; color: #eaf1ff; display: flex; align-items: center; gap: 8px; } .shop-block-head .sbh-sub { font-size: 12px; color: #8ea0d0; } /* ---- Shop dashboard: compact, fits on ONE screen (no scroll) ---- */ #shopPanel.view.full { max-width: 1340px; overflow: hidden; } #shopPanel .tab-head { margin-bottom: 4px; } #shopPanel .tab-head p { display: none; } /* reclaim vertical space; title is enough */ .shop-dash { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .shop-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; /* Loot Bubbles spans the FULL bottom width (Kenny) — the spotlight, week and today share the top row, so every column reads as one clean band. */ grid-template-areas: "spot week today" "loot loot loot"; gap: 12px; } .shop-grid > * { min-width: 0; min-height: 0; } #spotlightCol { grid-area: spot; } #weekSection { grid-area: week; } .right-col { grid-area: today; display: flex; flex-direction: column; gap: 12px; min-height: 0; } #shopLootSection { grid-area: loot; } .shop-dash .shop-block { margin-top: 0; } /* Panelled card frame (compact) */ .shop-block.panelled { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; min-height: 0; } .shop-dash .shop-block-head { margin-bottom: 8px; padding-bottom: 6px; } .shop-dash .shop-block-head .sbh-name { font-size: 13.5px; } .shop-dash .shop-block-head .sbh-sub { font-size: 10px; } .shop-dash .skins-grid { grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; align-content: start; } /* Available This Week (6): a clean 3x2 that fills + centers in its panel. */ #weekSection .skins-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1 1 auto; align-content: center; } /* Available Today (3): one centered row of three. */ #availableTodaySection .skins-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Let the right column fill: Today sits snug, the Offer stretches to fill the rest. */ .right-col #offerSection { flex: 1 1 auto; } .right-col #offerSection #offerBody { flex: 1 1 auto; display: flex; align-items: center; } .right-col #offerSection .offer-card { width: 100%; } /* Spotlight carousel (left column): 3 auto-cycling pages + dots + progress bar. */ .spotlight { display: flex; flex-direction: column; min-height: 0; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 9px 12px 12px; } .spot-head { display: flex; align-items: center; justify-content: center; gap: 14px; } .spot-arrow { background: none; border: none; color: #9aa3c7; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .spot-arrow:hover { color: #fff; } .spot-dots { display: flex; gap: 8px; } .spot-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.22); border: none; padding: 0; cursor: pointer; transition: background 0.15s, transform 0.1s; } .spot-dot:hover { background: rgba(255,255,255,0.4); } .spot-dot.active { background: #ffd75e; transform: scale(1.25); } .spot-progress { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin: 8px 0 10px; overflow: hidden; } .spot-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd75e, #d78bff); border-radius: 2px; } .spot-progress.run > span { animation: spotFill var(--spot-dur, 7000ms) linear forwards; } @keyframes spotFill { from { width: 0; } to { width: 100%; } } .spot-pages { flex: 1 1 auto; min-height: 0; } .spot-page { display: none; height: 100%; } .spot-page.active { display: block; animation: spotFade 0.35s ease; } @keyframes spotFade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } .spot-page .shop-block { height: 100%; display: flex; flex-direction: column; } /* The Alpha grid grows + vertically centers its hero/mini rows in the page. */ .spotlight .alpha-grid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } /* Spotlight skin grids (This Month up to 8, New Releases up to 8): the cards auto-fit and the row-block centers both axes so 3 or 8 both look intentional and fill the panel — no dead corners, no left-clinging. */ .spotlight .skins-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 11px; flex: 1 1 auto; align-content: center; justify-content: center; } /* --- Alpha Featured page: de-cluttered + overlap fixed --- */ /* Compact countdown so the whole drop breathes inside the spotlight. */ .spotlight .alpha-countdown { margin: 0 0 9px; padding: 7px 12px; gap: 1px; } .spotlight .alpha-countdown-clock { font-size: 17px; letter-spacing: 0.6px; } .spotlight .alpha-countdown-label, .spotlight .alpha-countdown-date { font-size: 10px; } .spotlight .alpha-hero-row { margin-bottom: 9px; } .spotlight .alpha-mini-row { gap: 9px; } /* Hero card: roomy top padding + the stock badge pinned TOP-RIGHT (not centered) so it can never collide with the left-aligned "Alpha Recolorable" name. */ .spotlight .alpha-item.big { gap: 15px; padding: 16px 16px 15px; align-items: center; } .spotlight .alpha-item.big .alpha-swatch { width: 56px; height: 56px; } .spotlight .alpha-item.big .alpha-swatch .alpha-a { font-size: 33px; } .spotlight .alpha-item.big .alpha-info { gap: 5px; padding-right: 4px; } .spotlight .alpha-item.big .alpha-name { font-size: 18px; line-height: 1.15; } .spotlight .alpha-item.big .alpha-desc { font-size: 11px; max-width: none; line-height: 1.4; } .spotlight .alpha-item.big .alpha-price { font-size: 20px; } .spotlight .alpha-item.big .alpha-badge { top: 11px; left: auto; right: 12px; transform: none; } /* Mini cards: tighter top room for their centered badge, snug + even. */ .spotlight .alpha-mini-row .alpha-item { padding: 29px 10px 13px; gap: 5px; } .spotlight .alpha-mini-row .alpha-swatch { width: 46px; height: 46px; } .spotlight .alpha-mini-row .alpha-swatch .alpha-a { font-size: 28px; } .spotlight .alpha-mini-row .alpha-name { font-size: 12.5px; } .spotlight .alpha-mini-row .alpha-price { font-size: 16px; } /* ---- Special Event Bundles (their own carousel page, so they can breathe) ---- */ #bundlesSection { display: flex; flex-direction: column; min-height: 0; } .spot-bundles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1 1 auto; min-height: 0; align-content: center; } .bundle-slot { position: relative; display: flex; flex-direction: column; gap: 5px; justify-content: flex-start; min-height: 92px; padding: 13px 15px; border-radius: 13px; overflow: hidden; border: 1px solid rgba(215,139,255,0.4); background: linear-gradient(135deg, rgba(255,215,94,0.06), rgba(215,139,255,0.09)); } .bundle-slot.true-alpha { border-color: rgba(255,190,90,0.5); background: linear-gradient(135deg, rgba(255,190,90,0.10), rgba(215,139,255,0.10)); } .bundle-slot.sold { opacity: 0.6; filter: grayscale(0.3); } .bundle-ribbon { position: absolute; top: 9px; right: 10px; z-index: 1; font-size: 8px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #1a1330; background: linear-gradient(100deg, #ffd75e, #d78bff); padding: 3px 7px; border-radius: 999px; } .bundle-name { position: relative; z-index: 1; font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 0.2px; padding-right: 60px; } .bundle-desc { position: relative; z-index: 1; font-size: 10.5px; line-height: 1.4; color: #c8cfe8; } .bundle-foot { position: relative; z-index: 1; margin-top: 3px; font-size: 10.5px; font-weight: 800; color: #ffe27a; } /* Auction internals */ .ba-head { position: relative; z-index: 1; margin-top: 5px; font-size: 11px; font-weight: 900; color: #ffd08a; letter-spacing: 0.2px; } .ba-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 3px; } .ba-line { font-size: 11px; color: #eaf1ff; } .ba-line b { color: #fff; } .ba-count { font-size: 11px; color: #cfe0ff; font-variant-numeric: tabular-nums; } .ba-count b { color: #fff; } .ba-min { font-size: 9.5px; color: #a9b2d6; } .ba-date { color: #cbb6ff; } .ba-bid { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .ba-bid .ba-cur { font-weight: 800; color: #ffe27a; } .ba-bid input { width: 62px; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; } .bundle-btn { padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #1a1330; border: none; border-radius: 9px; background: linear-gradient(180deg, #ffe27a, #f4c343); } .bundle-btn.sm { padding: 6px 11px; } .bundle-btn.win { width: 100%; background: linear-gradient(180deg, #8affc0, #35d67d); } .bundle-btn:hover { filter: brightness(1.06); } .bundle-btn:disabled { opacity: 0.5; cursor: default; filter: none; } /* Alpha Founder free-skin add-ons */ .founder-adds { position: relative; z-index: 1; margin-top: 4px; } .fa-label { font-size: 9.5px; font-weight: 700; color: #b6f5cd; } .fa-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .founder-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font: inherit; font-size: 10px; font-weight: 700; color: #d9d3ff; background: rgba(150,110,255,0.1); border: 1px solid rgba(178,150,255,0.3); border-radius: 999px; cursor: pointer; } .founder-add:hover { border-color: rgba(184,150,255,0.6); } .founder-add.on { color: #1a1330; background: linear-gradient(100deg, #ffd75e, #d78bff); border-color: transparent; } .founder-add .fa-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); } /* Site-wide auction banner (under the top bar) */ #auctionBanner { position: relative; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 8px 18px; font-size: 13px; color: #fff; background: linear-gradient(100deg, rgba(255,140,60,0.22), rgba(215,139,255,0.22)); border-bottom: 1px solid rgba(255,190,90,0.35); box-shadow: 0 4px 18px rgba(0,0,0,0.25); } #auctionBanner[hidden] { display: none; } #auctionBanner .ab-msg { flex: 1 1 auto; font-variant-numeric: tabular-nums; } #auctionBanner .ab-msg b { color: #ffe6b0; } #auctionBanner .ab-view { flex: 0 0 auto; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; color: #1a1330; border: none; border-radius: 8px; background: linear-gradient(180deg, #ffe27a, #f4c343); } #auctionBanner .ab-close { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; line-height: 1; color: #e7ecff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 12px; } #auctionBanner .ab-close:hover { background: rgba(255,255,255,0.2); } @media (max-width: 620px) { #auctionBanner .ab-view { display: none; } } /* Compact Loot Bubbles row for the bottom band. */ #shopLootSection .loot-hero-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; } /* Stack the dashboard on narrow screens (still no page scroll — the columns just flow). */ @media (max-width: 900px) { #shopPanel.view.full { overflow-y: auto; } .shop-grid { grid-template-columns: 1fr; grid-template-areas: "spot" "week" "today" "loot"; } } /* ---- Skin preview modal: click a Shop skin -> see it 5x, buy/equip or dismiss ---- */ .sp-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,8,16,0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s ease; } .sp-backdrop.show { opacity: 1; } .sp-backdrop[hidden] { display: none; } .sp-card { position: relative; width: 100%; max-width: 358px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 30px 26px 24px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, rgba(40,46,72,0.55), rgba(15,18,29,0.97)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: scale(0.92) translateY(10px); opacity: 0; transition: transform 0.24s cubic-bezier(.2,1.4,.35,1), opacity 0.2s ease; } .sp-backdrop.show .sp-card { transform: none; opacity: 1; } .sp-card.rar-red { border-color: rgba(224,120,120,0.5); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 42px rgba(255,90,90,0.18); } .sp-card.rar-purple { border-color: rgba(184,150,236,0.55); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 42px rgba(150,90,255,0.2); } .sp-card.rar-gold { border-color: rgba(228,198,130,0.55); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 42px rgba(244,180,50,0.2); } .sp-card.rar-green { border-color: rgba(104,224,152,0.55); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 46px rgba(52,214,110,0.22); } .sp-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #cfd6ea; font-size: 14px; line-height: 1; cursor: pointer; } .sp-close:hover { background: rgba(255,255,255,0.14); color: #fff; } .sp-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 13px; border-radius: 999px; border: 1px solid transparent; } /* Rarity colors for the preview tag (the card's .skin-card-kind rules don't apply here). */ .sp-tag.rk-red { color: #ffbcbc; background: rgba(255,90,90,0.18); border-color: rgba(255,107,107,0.45); } .sp-tag.rk-purple { color: #d9c2ff; background: rgba(150,90,255,0.18); border-color: rgba(181,129,255,0.5); } .sp-tag.rk-gold { color: #ffe6a3; background: rgba(244,180,50,0.18); border-color: rgba(244,195,67,0.55); } .sp-tag.rk-green { color: #b6f5cd; background: rgba(52,214,110,0.18); border-color: rgba(74,222,128,0.55); } .sp-stage { display: flex; align-items: center; justify-content: center; padding: 4px 0 2px; } .sp-swatch { position: relative; width: 216px; height: 216px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 4px 12px rgba(255,255,255,0.12), inset 0 -6px 16px rgba(0,0,0,0.3); } .sp-swatch.metal { border-color: rgba(255,255,255,0.65); box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 4px 12px rgba(255,255,255,0.45), inset 0 -8px 18px rgba(0,0,0,0.4); } .sp-swatch .alpha-a { font-style: italic; font-family: "Brush Script MT","Segoe Script",Georgia,cursive; font-size: 150px; line-height: 1; opacity: 0.9; } /* Per-skin framing, set inline from public/skins/skin-art.json — the SAME crop the arena renders the blob with, so a shop card and the blob in the match can never disagree. `--zoom` scales the crop up to fill the swatch and `--zx`/`--zy` slide the crop's centre onto the swatch's centre, which is what lets off-centre art (a marble sitting above its own floor) frame correctly rather than just being magnified in place. `--zoom-origin` is the older hand-set path, kept for art with no crop yet. */ .swatch-motif { transform: translate(var(--zx, 0px), var(--zy, 0px)) scale(var(--zoom, 1)); transform-origin: var(--zoom-origin, center); } .sp-name { font-size: 23px; font-weight: 900; color: #fff; letter-spacing: 0.2px; text-align: center; line-height: 1.15; } .sp-price { font-size: 18px; font-weight: 800; color: #eaf1ff; } .sp-price .sp-owned { color: #7dffa6; } .sp-price .sp-locked { color: #cbb6ff; font-size: 15px; } .sp-actions { display: flex; gap: 10px; width: 100%; margin-top: 4px; } .sp-buy { flex: 1 1 auto; padding: 13px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #101423; border: none; border-radius: 12px; background: linear-gradient(180deg, #ffe27a, #f4c343); } .sp-buy:hover { filter: brightness(1.06); } .sp-buy:disabled { opacity: 0.55; cursor: default; filter: none; } .sp-cancel { flex: 0 0 auto; padding: 13px 18px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: #b9c2df; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; } .sp-cancel:hover { color: #fff; background: rgba(255,255,255,0.1); } .sp-msg { font-size: 12.5px; min-height: 15px; color: #9fb0dd; text-align: center; } .sp-msg.error { color: #ff9aa5; } /* Alpha featured: the $50 recolorable hero (full width) above the three $5 skins. */ .alpha-grid { display: block; } .alpha-hero-row { width: 100%; margin-bottom: 13px; } .alpha-mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } /* Alpha cards are GREEN rarity (the elite founder tier). */ .alpha-item { border-color: rgba(88,208,140,0.32); background: linear-gradient(180deg, rgba(52,214,110,0.12), rgba(52,214,110,0.03)); } .alpha-item:hover { border-color: rgba(104,224,152,0.62); box-shadow: 0 10px 26px rgba(24,130,74,0.34); } .alpha-info { display: flex; flex-direction: column; align-items: center; gap: 4px; } .alpha-buy { display: flex; align-items: center; gap: 8px; } .alpha-desc { display: none; } /* The hero card: horizontal + roomy, so its importance reads at a glance. */ .alpha-item.big { width: 100%; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; padding: 26px 30px; text-align: left; } .alpha-item.big .alpha-swatch { width: 80px; height: 80px; flex: 0 0 auto; } .alpha-item.big .alpha-swatch .alpha-a { font-size: 52px; } .alpha-item.big .alpha-info { align-items: flex-start; gap: 7px; } .alpha-item.big .alpha-name { font-size: 23px; } .alpha-item.big .alpha-desc { display: block; font-size: 13px; color: #a9c2b3; max-width: 430px; line-height: 1.45; } .alpha-item.big .alpha-price { font-size: 25px; } .alpha-item.big .alpha-badge { top: 12px; } /* Alpha badge in green tones to match the box. */ .alpha-badge { color: #b6f2cd; background: rgba(52,214,110,0.14); border-color: rgba(88,208,140,0.30); } /* Back link (Loot wheel -> Shop, etc.) */ .back-link { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 600; color: #9fb0dd; background: none; border: none; cursor: pointer; padding: 4px 2px; } .back-link:hover { color: #eaf1ff; } /* How to Play: a scannable card grid (icon + title + one line each). */ .how-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 13px; width: 100%; } .how-card { display: flex; flex-direction: column; gap: 6px; padding: 17px 17px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); } .how-ico { font-size: 30px; line-height: 1; } .how-title { font-size: 15.5px; font-weight: 800; color: #eaf1ff; } .how-text { font-size: 13px; color: #b7c2e0; line-height: 1.55; } .how-card.danger { border-color: rgba(255,120,120,0.26); background: linear-gradient(180deg, rgba(255,90,90,0.08), rgba(255,90,90,0.02)); } .how-card.win { border-color: rgba(124,255,166,0.26); background: linear-gradient(180deg, rgba(124,255,166,0.08), rgba(124,255,166,0.02)); } .hc-red { color: #ff8a8a; font-weight: 700; } .hc-purple { color: #c9a6ff; font-weight: 700; } .hc-gold { color: #ffd15c; font-weight: 700; } .how-mobile { font-size: 13px; color: #9aa3c7; margin-top: 14px; text-align: center; }