/* ═══════════════════════════════════════════════════════════════════════════ BEFORE MATCHING ANYTHING TO AN EXISTING ELEMENT: MEASURE IT, DO NOT READ ITS RULE. style.css has been re-themed by appending overrides rather than editing the originals, so for 129 selectors the first definition and the one that actually wins disagree — often completely. Three examples met while working on this file: .rfd-card rule says rgba(255,255,255,.03) renders as a dark gradient, gold border .chat-rain rule says a warm gold gradient renders as dark teal, teal border .skin-img rule says nothing about size market.css gives it aspect-ratio 1/1 Reading the rule and copying it produces a look that matches nothing on the page. The reliable method is to load style.css + patch94.css + market.css together (market.css loads LAST and wins), render the element, and read the computed values. The same applies to which stylesheet a fix belongs in: the palette block inside partials.php is the last stylesheet on the page, so a rule here cannot override it no matter how specific. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ RUSTLY — build 94 stability patch (UI/layout) Loaded AFTER style.css so these targeted overrides win the cascade. Every block is tagged with the brief item it addresses. Pure overrides — nothing here changes game logic. ═══════════════════════════════════════════════════════════════════════ */ /* ── #4 PROFILE · BALANCE must stay on ONE line ─────────────────────────── The amount is + (dollars cents). On the profile Stats card the cents were dropping onto a second line ("number slides down"). Force the same inline-flex / nowrap pattern the app already uses for .hero-pool-amt / .prize-amount. */ .pstat-balance b{ display:inline-flex !important; flex-wrap:nowrap; align-items:baseline; gap:.16em; white-space:nowrap; line-height:1.12; max-width:100%; } .pstat-balance b .coin-ico{ align-self:center; flex:0 0 auto; } .pstat-balance b .coin-amt{ display:inline-block; white-space:nowrap; } .pstat-balance b .coin-amt .coin-d, .pstat-balance b .coin-amt .coin-c{ display:inline; white-space:nowrap; } /* ── #4 PROFILE · ALL-HISTORY rows: drop the left icon/photo entirely ────── Cleaner, calmer feed. The row is flexbox so removing the fixed icon column simply lets the body + amount fill the width. */ .hist-item-ico{ display:none !important; } .hist-item{ gap:12px; } /* ── #1 FAIRNESS · "Coming Soon" cards in the SAME design language ───────── Desktop is already a 3-up grid (style.css). These two cards fill the 2 empty slots in row 2 without looking bolted on — same card chrome, just dimmed with a small badge. */ .fair-game-card.soon{ position:relative; opacity:.82; } .fair-game-card.soon .fair-game-ico{ color:var(--t3,#8b93a7); opacity:.85; } .fair-game-card.soon h4{ color:var(--t2,#aab2c5); } .fair-game-card.soon p, .fair-game-card.soon .fg-note{ color:var(--t3,#8b93a7); } .fair-soon-badge{ position:absolute; top:12px; right:12px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3,#8b93a7); background:rgba(255,255,255,.05); border:1px solid var(--ln,rgba(255,255,255,.12)); border-radius:999px; padding:3px 9px; } .fair-game-card.soon .fair-game-ico svg{ width:26px; height:26px; } @media (max-width:900px){ /* Grid stacks on mobile — keep the soon cards a touch more compact. */ .fair-game-card.soon{ padding-top:14px; padding-bottom:14px; } } /* ── #9 RUSTLY ORIGINALS · 2×2 on mobile ────────────────────────────────── Small phones were collapsing the originals to a single column. Keep them a tidy 2×2. Desktop stays 3-up (style.css). */ @media (max-width:560px){ .hm-games{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-width:none !important; } } /* ── #10 RACES · #1 podium avatar was clipped at the top ─────────────────── The taller #1 column (bigger avatar + floating trophy) was being cut by the wrap's overflow:hidden. Give the podium headroom and centre any photo in the full circle instead of top-anchoring it. */ .lb-podium-wrap{ padding-top:22px; } .lb-pod-av img{ object-position:center center; } /* ── #6 FOOTER · art stays on the RIGHT on desktop (no wrap-below), shrunk to fit ── The footer row is flex-wrap; the large art (252px) overflowed onto its own line on desktop ("drops down on desktop"). On desktop we force a single nowrap row so the text columns shrink and the art stays pinned right via margin-left:auto, shrunk so the row never overflows. Mobile keeps the stacked, centred layout. */ .site-footer{ padding-top:46px; padding-bottom:46px; } .ftr-art-photo{ object-fit:contain; } @media (min-width:761px){ .ftr-inner{ flex-wrap:nowrap !important; align-items:center !important; gap:28px 44px !important; } .ftr-brand{ max-width:300px; } .ftr-meta{ max-width:330px; } .ftr-art{ width:132px !important; height:132px !important; margin-left:auto !important; align-self:center; flex:0 0 auto; } .ftr-art-svg{ width:120px !important; height:120px !important; } } @media (max-width:760px){ .ftr-inner{ flex-wrap:wrap !important; } .ftr-art{ width:140px !important; height:140px !important; margin:10px auto 0 !important; align-self:center; } .ftr-art-svg{ width:120px !important; height:120px !important; } } /* ── #2 / #12 RPS · picker icons are now outline SVGs (the 🎲 dice is gone) ── The four move buttons (Random / Rock / Paper / Scissors) in both the create and join modals now use the same line-icon language as the rest of the site instead of coloured emoji. Inherit the button's text colour via currentColor so the active/hover gold state still applies for free. */ /* ── #2 RUSTFLIP · coin animation REVERTED to the original 3D toss ───────────── The earlier "flip in place / no-zoom" override was wrong — the upward, 3D, screen-approaching coinThrowBig animation is the intended one and is restored by removing those overrides. (The split-second red flash is fixed at its real source in style.css, not here — it was never cfWinPulse.) */ /* The red face had `background:#cd412a` behind its coin PNG; on a flip frame / before the texture paints, that solid red showed through, then the coin image covered it again ("a split-second of bright red then the coin image shows again"). coin-face-red.png is the visible coin, so drop the fill → no red flash, texture only. */ .cf-coin .cf-face-red{ background:transparent !important; } /* ── #13 CHAMPION · cinematic-finish colour grade (pairs with the app.js finish cascade) ── A subtle brightness/contrast lift during the kill cascade so the finish reads as an event, not just a bigger hit. No transform → never shifts arena layout. */ .arena.finish-slowmo{ filter:saturate(1.16) contrast(1.05) brightness(1.05); transition:filter .22s ease; } /* ── #3 RUSTPOT · slower, calmer red-zone close (pairs with rustpot.js step/hold tuning) ── The red-zone reveal (rustpot.js) now sets the ring/gas transition INLINE per step (STEP_MOVE), and times its eliminations to that, so we must NOT force a transition here — a !important override would fight the JS (the ring would keep gliding for 1s while the JS already eliminated at ~0.77s, so drops died before the visible ring reached them). The JS owns the transition. */ /* (intentionally no .rp-ring / .rp-gas transition override here — see rustpot.js) */ /* ── CHAT · message actions (Reply / Pin / Delete) appear only on hover ─────── "Reply" was printed on every line because style.css forces `.chat-actions{opacity:1 !important}` unconditionally (3 places). On hover-capable devices we override that with the SAME !important weight + higher specificity so the row only reveals on hover; touch devices keep them visible (no hover). */ @media (hover:hover){ .chat-message .chat-actions{ opacity:0 !important; pointer-events:none; transition:opacity .12s ease; } .chat-message:hover .chat-actions{ opacity:1 !important; pointer-events:auto; } } /* ── HEADER · top-right avatar: square photo was poking out of the round button ── The button is overflow:visible so the level badge can sit at its edge, which let the square image's corners show ("kare ama arka plan yuvarlak"). Round the IMAGE itself → clean circle, badge stays put. */ .profile-avatar-btn img{ border-radius:50% !important; } /* ── #13 CHAMPION · avatar → HP (heart + number, centered) → name ────────────── Final layout: badge → avatar → HP → name → stats. The HP (just a heart + the number, no "HP" word) sits directly under the steam avatar, centered, with the name beneath it. */ .player-panel .char-display{ order:1; } .player-panel .health-section-top{ order:2; margin:6px auto 0; align-items:center; text-align:center; width:100%; } .player-panel .health-section-top .health-label{ justify-content:center; } .player-panel .player-name{ order:3; text-align:center; margin-top:2px; } .player-panel .player-stats{ order:4; } .player-panel .rust-char-name{ display:none !important; } /* belt-and-braces: hide the avatar's baked-in name */ /* ── MODAL · winner text always WHITE (was red/blue by side in Rustflip) ─────── The result line ("X won N") inherited the side colour, so a red win printed in red. Force white for every outcome line regardless of which side won. */ .cf-modal-outcome, .cf-modal-outcome.red, .cf-modal-outcome.blue, .cf-modal-outcome.mine, .qgm-outcome, .qgm-result, .qgm-result.win, .qgm-result.lose, .qg-modal-outcome, .cf-modal-outcome i, .qgm-outcome i, .rps-outcome i{ filter:none; } /* ── QUICKGAME · the modal "You" tag was absolutely positioned and escaped to the bottom of the modal ("'You' label is misaligned"). Make it inline next to the player's name. */ .qgm-col-name .qg-you-tag{ position:static !important; transform:none !important; bottom:auto !important; left:auto !important; display:inline-block; margin:0 4px 0 0; vertical-align:middle; } /* ── #3 RUSTPOT · the ring/gas transition is set INLINE by rustpot.js per step (so the JS can time eliminations to the exact moment the ring settles). No !important override here — see rustpot.js. ── */ /* (intentionally no .rp-ring / .rp-gas transition override) */ /* ── RUSTPOT · recent-winners row now shows win% + GROSS pot (commission hidden) ── */ .rp-recent-pct{ font-size:11px; font-weight:800; color:#ffcf4d; background:rgba(255,207,77,.12); border:1px solid rgba(255,207,77,.28); border-radius:999px; padding:1px 7px; margin:0 6px 0 8px; white-space:nowrap; } /* ── Pagination controls (All History + Referral Activity, 10 per page) ────────── */ .list-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin:14px 0 2px; } .list-pager-btn{ background:rgba(130,150,185,.10); border:1px solid rgba(150,170,205,.22); color:var(--t1,#e8edf5); font-size:13px; font-weight:700; padding:6px 14px; border-radius:9px; cursor:pointer; transition:background .15s, border-color .15s; } .list-pager-btn:hover:not(:disabled){ background:rgba(130,150,185,.18); border-color:rgba(150,170,205,.4); } .list-pager-btn:disabled{ opacity:.4; cursor:default; } .list-pager-info{ font-size:12px; font-weight:700; color:var(--rust3,#9fb0c8); letter-spacing:.3px; min-width:92px; text-align:center; } /* ── CHAMPION · empty "Waiting" seat held STEADY (no radar-ping flicker) ─────── The expanding ping faded to 0 and the label pulsed, which read like the seat was refreshing. Hold them steady so an empty seat just sits there calmly. */ .es-pulse{ animation:none !important; opacity:.16 !important; } .es-label{ animation:none !important; opacity:.9 !important; } .es-q{ animation:none !important; opacity:.55 !important; } /* ── #13b CHAMPION · pull HP + name up so they sit right under the profile image ── char-display is a tall box with the avatar centred; trim it a touch and tuck the HP/name close beneath so the avatar → HP → name read as one grouped block. */ .player-panel .char-display{ min-height:150px; } .player-panel .health-section-top{ margin-top:3px; } .player-panel .player-name{ margin-top:0; } /* ── PROFILE · Level card made COMPACT (clearly shorter) → ALL HISTORY sits higher ── */ .level-card{ padding:10px 14px !important; margin-bottom:10px !important; } .level-head{ margin-bottom:6px !important; gap:10px !important; } .level-badge{ width:38px !important; height:38px !important; font-size:13px !important; border-radius:9px !important; } .level-title{ font-size:13.5px !important; } .level-xp{ font-size:11px !important; margin-top:1px !important; } .level-bar{ height:8px !important; } .level-hint{ margin-top:5px !important; font-size:10.5px !important; } /* ── RUSTFLIP · "LAST 10" strip — clean coin-only chips (winner names removed per request) ── */ .rf-strip-items{ display:flex !important; flex-wrap:wrap !important; gap:7px !important; align-items:center !important; } .rf-strip-chip.rf-strip-chip-img{ width:26px !important; height:26px !important; min-width:26px !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .rf-strip-chip.rf-strip-chip-img::before{ content:none !important; display:none !important; } .rf-strip-chip.rf-strip-chip-img img.cf-coin-ico{ width:24px !important; height:24px !important; object-fit:contain !important; display:block !important; } /* PROFILE · level card now lives in the LEFT (Stats) column so it is no longer full-width */ .prof-left-col{ display:flex !important; flex-direction:column !important; gap:14px !important; min-width:0 !important; } .prof-left-col .level-card{ margin-bottom:0 !important; } /* ── CHAMPION · AWP draw dims the whole site briefly (sniper moment) ─────────── body::after is already used elsewhere, so the dim uses a dedicated fixed layer. */ #awpDimLayer{ position:fixed; inset:0; z-index:9990; background:#000; opacity:0; pointer-events:none; } body.awp-dim #awpDimLayer{ animation:awpDim 1.5s ease forwards; } @keyframes awpDim{ 0%{opacity:0;} 16%{opacity:.34;} 78%{opacity:.34;} 100%{opacity:0;} } /* ── Bottom-right floating "Live Chat" button (mobile) made noticeably BIGGER ── */ @media (max-width: 980px){ .chat-toggle{ padding:15px 22px !important; gap:9px !important; font-size:14.5px !important; letter-spacing:.04em !important; box-shadow:0 12px 30px rgba(130,150,185,.55) !important; right:16px !important; bottom:16px !important; } .chat-toggle .chat-icon{ font-size:24px !important; } } /* ════════ CHAT RULES button — SVG icon + label alignment ════════ */ .chat-rules-btn{ display:inline-flex !important; align-items:center !important; gap:6px !important; } .chat-rules-btn svg{ flex:0 0 auto; } .chat-rules-modal-card h3 .chat-rules-ico{ display:inline-flex; align-items:center; vertical-align:-3px; margin-right:3px; } /* ════════ FOOTER · social icons (X + Discord) ════════ */ .ftr-socials{ display:flex; gap:10px; margin-top:15px; } .ftr-soc{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; color:var(--t2,#aeb6c4); background:rgba(130,150,185,.09); border:1px solid rgba(150,170,205,.18); text-decoration:none; transition:transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease; } .ftr-soc svg{ display:block; } .ftr-soc:hover{ transform:translateY(-2px); color:#1a1205; border-color:transparent; background:linear-gradient(145deg,#fcd87e,#e6a93b); box-shadow:0 8px 22px rgba(230,169,59,.4); } .ftr-soc-dc:hover{ color:#fff; background:linear-gradient(145deg,#7c86f0,#5865F2); box-shadow:0 8px 22px rgba(88,101,242,.45); } /* ════════ FOOTER · corner photo fills its whole space (no empty padding) + polish ════════ */ .site-footer{ background:linear-gradient(180deg, rgba(255,255,255,.015), transparent) !important; } .ftr-brand{ max-width:380px !important; } .ftr-art{ width:clamp(220px,26vw,340px) !important; align-self:stretch !important; min-height:200px !important; max-height:244px !important; } .ftr-art-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; border-radius:14px !important; filter:drop-shadow(0 12px 26px rgba(0,0,0,.5)) !important; } @media (max-width:760px){ .ftr-art{ width:min(88vw,380px) !important; min-height:178px !important; max-height:200px !important; margin:12px auto 0 !important; } } /* staff Clear button — icon + label alignment (cohesive with Chat Rules) */ .chat-clear-btn{ display:inline-flex !important; align-items:center !important; gap:5px !important; } .chat-clear-btn svg{ flex:0 0 auto; } /* ════════ RUSTFLIP · "RECENT FLIPS" strip — bigger coins, single row, fits the screen ════════ */ .rf-strip-items{ flex-wrap:nowrap !important; overflow:hidden !important; gap:9px !important; -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent) !important; mask-image:linear-gradient(90deg,#000 93%,transparent) !important; } .rf-strip-chip.rf-strip-chip-img{ width:38px !important; height:38px !important; min-width:38px !important; flex:0 0 auto !important; } .rf-strip-chip.rf-strip-chip-img img.cf-coin-ico{ width:34px !important; height:34px !important; } .rf-strip-label{ font-size:12px !important; letter-spacing:.1em !important; } /* ════════ RUSTFLIP · recent games — winner NAME left of the winning coin ════════ */ .cf-game-actions{ display:flex !important; align-items:center !important; gap:8px !important; } .cf-row-winner{ font-size:12.5px; font-weight:700; color:var(--t2,#c4ccd8); max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ════════ COIN landing — softer glow + gentler burst (no "whole coin flashes red" frame) ════════ */ /* (old .cf-coin-wrap.landed filter glow removed — a filter on the 3D wrapper flattens the coin for a frame and flashes the red face on a black landing. Glow is done via box-shadow below.) */ .cf-coin.landed-red, .cf-coin.landed-blue{ filter:none !important; } .cf-land-burst{ border-width:2px !important; } @keyframes cfLandBurst{ 0%{opacity:.35;transform:scale(.7)} 100%{opacity:0;transform:scale(1.85)} } /* ════════ FOOTER · let the corner photo grow into the empty right-hand space ════════ */ .ftr-inner{ justify-content:space-between !important; align-items:stretch !important; } .ftr-art{ margin-left:auto !important; flex:1 1 300px !important; min-width:260px !important; max-width:460px !important; align-self:stretch !important; min-height:210px !important; max-height:none !important; } .ftr-art-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; border-radius:14px !important; filter:drop-shadow(0 12px 26px rgba(0,0,0,.5)) !important; } @media (max-width:760px){ .ftr-inner{ align-items:flex-start !important; } .ftr-art{ flex:none !important; width:min(92vw,420px) !important; min-height:180px !important; margin:12px auto 0 !important; } } /* ════════ REWARDS · rakeback-by-level table ════════ */ .rb-table-wrap{ margin-top:20px; } .rb-table-h{ margin:0 0 4px; font-size:15px; color:var(--t1,#e8edf5); } .rb-table-sub{ margin:0 0 12px; font-size:12.5px; color:var(--t3,#8a93a3); line-height:1.55; max-width:640px; } .rb-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:rgba(130,150,185,.05); border:1px solid rgba(150,170,205,.14); border-radius:12px; overflow:hidden; } .rb-table th, .rb-table td{ padding:10px 14px; text-align:left; } .rb-table thead th{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3,#8a93a3); background:rgba(130,150,185,.06); border-bottom:1px solid rgba(150,170,205,.16); } .rb-table tbody tr{ border-top:1px solid rgba(150,170,205,.08); } .rb-table td{ color:var(--t2,#c4ccd8); } .rb-table td:first-child{ font-weight:700; color:var(--t1,#e8edf5); } .rb-tr-you{ background:linear-gradient(90deg, rgba(230,169,59,.12), transparent); } .rb-tr-you td{ color:#fde9bf; } .rb-you-tag{ display:inline-block; margin-left:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#1a1205; background:linear-gradient(145deg,#fcd87e,#e6a93b); padding:1px 7px; border-radius:999px; vertical-align:1px; } @media (max-width:560px){ .rb-table th, .rb-table td{ padding:8px 10px; font-size:12.5px; } } /* ════════════════ FREE RAIN — compact always-on bar above chat (3D, site palette) ════════════════ */ .free-rain{ position:relative; margin:0 0 8px; padding:9px 12px 8px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%), linear-gradient(145deg, rgba(58,74,102,.55), rgba(26,34,50,.88)); border:1px solid rgba(150,170,205,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 22px rgba(0,0,0,.32), 0 8px 22px rgba(0,0,0,.34); } .fr-glow{ position:absolute; inset:-40% -10% auto -10%; height:130%; pointer-events:none; background:radial-gradient(60% 80% at 50% 0%, rgba(120,160,255,.18), transparent 70%); opacity:.7; } .free-rain.fr-active .fr-glow{ background:radial-gradient(60% 92% at 50% 0%, rgba(252,216,126,.22), rgba(120,160,255,.12) 60%, transparent 76%); animation:frPulse 2.4s ease-in-out infinite; } @keyframes frPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } } .fr-row{ position:relative; display:flex; align-items:center; gap:9px; } .fr-title{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fd,inherit); font-weight:800; font-size:13.5px; letter-spacing:.02em; color:#eaf0fb; text-shadow:0 1px 0 rgba(0,0,0,.4); white-space:nowrap; } .fr-drop{ display:inline-flex; color:#7fb0ff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .free-rain.fr-active .fr-drop{ color:#9cc2ff; animation:frBob 1.8s ease-in-out infinite; } @keyframes frBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-1.6px) } } .fr-info{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(150,170,205,.4); background:rgba(130,150,185,.16); color:#cdd6e6; font:italic 700 11px/1 Georgia,serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s; } .fr-info:hover{ background:linear-gradient(145deg,#fcd87e,#e6a93b); color:#1a1205; border-color:transparent; transform:scale(1.08); } .fr-pot{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:800; font-size:14px; color:var(--gold2,#e6a93b); text-shadow:0 1px 2px rgba(0,0,0,.45); } .fr-actions{ display:inline-flex; gap:6px; } .fr-join, .fr-tip{ border:0; cursor:pointer; font-weight:800; font-size:12px; border-radius:9px; padding:6px 12px; color:#1a1205; background:linear-gradient(145deg,#fcd87e,#e6a93b); box-shadow:0 3px 10px rgba(230,169,59,.4), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s, filter .14s; text-decoration:none; } .fr-tip{ padding:6px 10px; } .fr-join:hover, .fr-tip:hover{ transform:translateY(-1px); filter:brightness(1.05); } .fr-join.joined{ background:rgba(120,200,140,.2); color:#bfe9c8; box-shadow:none; cursor:default; } .fr-join:disabled{ cursor:default; transform:none; } .fr-bar{ position:relative; height:15px; margin-top:7px; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.32); border:1px solid rgba(150,170,205,.16); box-shadow:inset 0 1px 3px rgba(0,0,0,.5); } .fr-bar-fill{ position:absolute; inset:0 auto 0 0; width:0%; border-radius:8px; transition:width .6s ease; background:linear-gradient(90deg, rgba(120,160,255,.85), rgba(90,130,235,.95)); box-shadow:0 0 12px rgba(120,160,255,.5); } .free-rain.fr-active .fr-bar-fill{ background:linear-gradient(90deg, #fcd87e, #e6a93b); box-shadow:0 0 14px rgba(252,216,126,.6); } .fr-bar-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; letter-spacing:.03em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.75); white-space:nowrap; } /* rules modal */ .fr-rules-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; } .fr-rules-modal[hidden]{ display:none; } .fr-rules-overlay{ position:absolute; inset:0; background:rgba(6,10,18,.66); backdrop-filter:blur(3px); } .fr-rules-card{ position:relative; max-width:380px; width:calc(100% - 36px); border-radius:16px; padding:20px 20px 16px; background:linear-gradient(160deg, rgba(40,52,74,.98), rgba(22,30,44,.99)); border:1px solid rgba(150,170,205,.22); box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); } .fr-rules-card h3{ margin:0 0 12px; display:flex; align-items:center; gap:8px; font-size:17px; color:#eaf0fb; } .fr-rules-card h3 .fr-drop{ color:#7fb0ff; } .fr-rules-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .fr-rules-card li{ position:relative; padding-left:22px; font-size:13px; line-height:1.5; color:var(--t2,#c4ccd8); } .fr-rules-card li::before{ content:""; position:absolute; left:4px; top:6px; width:7px; height:7px; border-radius:50%; background:linear-gradient(145deg,#fcd87e,#e6a93b); box-shadow:0 0 6px rgba(252,216,126,.5); } .fr-rules-close{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:8px; cursor:pointer; border:1px solid rgba(150,170,205,.2); background:rgba(130,150,185,.12); color:#cdd6e6; font-size:13px; line-height:1; } .fr-rules-close:hover{ background:rgba(150,170,205,.22); color:#fff; } /* ════════ RUSTPOT recent winners — winner NAME immediately left of the won amount ════════ */ .rp-recent-row b{ flex:0 0 auto !important; margin-left:auto !important; } /* push name+amount+watch to the right; name hugs the amount */ .rp-recent-row .rp-recent-amt{ margin-left:0; } /* ════════ FREE RAIN — prominent countdown chip (the timer now stands out) ════════ */ .fr-timer{ display:inline-flex; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:800; font-size:14px; letter-spacing:.5px; line-height:1; color:#1a1205; padding:4px 10px; border-radius:8px; background:linear-gradient(145deg,#fcd87e,#e6a93b); box-shadow:0 2px 8px rgba(230,169,59,.45), inset 0 1px 0 rgba(255,255,255,.5); text-shadow:0 1px 0 rgba(255,255,255,.3); } .free-rain.fr-active .fr-timer{ animation:frTimerPulse 2s ease-in-out infinite; } @keyframes frTimerPulse{ 0%,100%{ box-shadow:0 2px 8px rgba(230,169,59,.45), inset 0 1px 0 rgba(255,255,255,.5); } 50%{ box-shadow:0 2px 16px rgba(252,216,126,.9), inset 0 1px 0 rgba(255,255,255,.6); transform:translateY(-.5px); } } .fr-bar{ height:16px; } .fr-bar-label{ font-size:11px; } /* ════════ FINAL CLEAN FOOTER — overrides all earlier conflicting .ftr-art blocks ════════ */ .ftr-inner{ justify-content:flex-start !important; align-items:center !important; } .ftr-art{ position:relative !important; width:190px !important; height:150px !important; min-width:0 !important; max-width:none !important; min-height:0 !important; max-height:none !important; flex:0 0 auto !important; margin-left:auto !important; align-self:center !important; display:flex !important; align-items:center !important; justify-content:center !important; } .ftr-art-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:contain !important; animation:none !important; } /* contain = never distorted/cropped */ .ftr-art-svg{ width:150px !important; height:150px !important; } @media (max-width:760px){ .ftr-inner{ align-items:flex-start !important; } .ftr-art{ width:150px !important; height:120px !important; margin:10px auto 0 !important; } .ftr-art-svg{ width:112px !important; height:112px !important; } } /* ════════════════ CHAT LEVEL BADGES — tiered colour ramp (rises gray → teal → blue → green → gold → crimson) ════════════════ */ .chat-lvl.lvt1, .chat-msg-head .chat-lvl.lvt1 { background:linear-gradient(135deg,#d3dae6,#8b95a6) !important; color:#0d1018 !important; } .chat-lvl.lvt2, .chat-msg-head .chat-lvl.lvt2 { background:linear-gradient(135deg,#7fc4e8,#3f89b8) !important; color:#04222b !important; } .chat-lvl.lvt3, .chat-msg-head .chat-lvl.lvt3 { background:linear-gradient(135deg,#4fd39a,#2a9668) !important; color:#041a2e !important; } .chat-lvl.lvt4, .chat-msg-head .chat-lvl.lvt4 { background:linear-gradient(135deg,#f4cd63,#cf9a2f) !important; color:#ffffff !important; } .chat-lvl.lvt5, .chat-msg-head .chat-lvl.lvt5 { background:linear-gradient(135deg,#f0973a,#c46516) !important; color:#06230c !important; } .chat-lvl.lvt6, .chat-msg-head .chat-lvl.lvt6 { background:linear-gradient(135deg,#ef6b5c,#c23a2f) !important; color:#1a2606 !important; } .chat-lvl.lvt7, .chat-msg-head .chat-lvl.lvt7 { background:linear-gradient(135deg,#cb5470,#862a41) !important; color:#2a1402 !important; } .chat-lvl.lvt8, .chat-msg-head .chat-lvl.lvt8 { background:linear-gradient(135deg,#4ec987,#278f57) !important; color:#2a1d02 !important; } .chat-lvl.lvt9, .chat-msg-head .chat-lvl.lvt9 { background:linear-gradient(135deg,#3ec9c1,#17928c) !important; color:#ffffff !important; } .chat-lvl.lvt10, .chat-msg-head .chat-lvl.lvt10{ background:linear-gradient(135deg,#55a1f0,#2a6cc9) !important; color:#ffffff !important; } /* ════════════════ CHAT — reply icon + emoji picker ════════════════ */ .chat-reply-btn{ display:inline-flex !important; align-items:center; justify-content:center; } .chat-reply-btn svg{ display:block; } .chat-form{ position:relative; } .chat-emoji-btn{ min-height:34px; width:34px; flex-shrink:0; padding:0; border-radius:7px !important; cursor:pointer; background:rgba(255,255,255,.06) !important; color:var(--t2,#aab2c2) !important; border:1px solid var(--ln) !important; display:grid !important; place-items:center; transition:background .15s, color .15s; } .chat-emoji-btn:hover{ background:rgba(255,255,255,.12) !important; color:var(--gold2,#f3b53f) !important; } .chat-emoji-pop{ position:absolute; bottom:calc(100% + 8px); right:8px; z-index:60; width:min(284px, calc(100vw - 40px)); max-height:206px; overflow-y:auto; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px; background:linear-gradient(160deg, rgba(40,48,66,.99), rgba(22,28,42,.99)); border:1px solid rgba(150,170,205,.22); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.55); } .chat-emoji-pop[hidden]{ display:none; } .emoji-pick{ font-size:18px; line-height:1; padding:4px 0; border-radius:7px; background:transparent; border:0; cursor:pointer; transition:background .12s, transform .12s; } .emoji-pick:hover{ background:rgba(255,255,255,.12); transform:scale(1.18); } /* keep the chat reply icons (quote line + reply bar) vertically centred */ .chat-reply-q-ico svg, .chat-reply-ico svg{ vertical-align:middle; display:inline-block; } .chat-reply-q-ico, .chat-reply-ico{ display:inline-flex; align-items:center; } /* ════════ FREE RAIN bar — left-aligned & tight (fix the right-crammed void) ════════ */ .free-rain .fr-row{ justify-content:flex-start !important; gap:7px; flex-wrap:nowrap; } .fr-pot{ margin-left:0 !important; } /* was auto → caused the big middle gap */ .fr-timer[hidden], .fr-actions[hidden]{ display:none !important; } /* hidden while the pot is still building */ .free-rain.fr-building .fr-bar-fill{ background:linear-gradient(90deg, rgba(120,160,255,.85), rgba(90,130,235,.95)) !important; } /* ════════ RUSTFLIP — kill the red flash on a BLACK landing ════════ The landing glow was a `filter: drop-shadow` on .cf-coin-wrap, but that element is transform-style:preserve-3d. Applying a filter flattens the 3D coin for a frame, which defeats the faces' backface-visibility and flashes the front (red) face before it re-resolves to black. Fix: no filter on the coin OR its wrapper — use box-shadow for the glow (box-shadow does not create a flattening context). */ .cf-coin-wrap.landed-red, .cf-coin-wrap.landed-blue{ filter:none !important; } .cf-coin.landed-red, .cf-coin.landed-blue { filter:none !important; } .cf-coin.landed-red { box-shadow: 0 0 30px 5px rgba(239,68,68,.55), 0 10px 26px rgba(0,0,0,.6) !important; } .cf-coin.landed-blue { box-shadow: 0 0 30px 5px rgba(59,130,246,.55), 0 10px 26px rgba(0,0,0,.6) !important; } /* ════════ FREE RAIN — refined compact bar: fit EVERYTHING, no "+" overflow, tight coin ════════ */ .free-rain{ padding:8px 10px 7px !important; } .free-rain .fr-row{ gap:6px !important; flex-wrap:nowrap !important; justify-content:flex-start !important; min-width:0; } .fr-title{ font-size:12.5px !important; gap:5px !important; flex:0 0 auto; } .fr-info{ width:16px !important; height:16px !important; font-size:10px !important; } .fr-timer{ flex:0 0 auto; } .fr-pot{ margin-left:0 !important; gap:2px !important; font-size:13px !important; flex:0 0 auto; } .fr-pot .coin-ico{ margin-right:0 !important; width:.92em !important; height:.92em !important; } /* kill the icon margin → flex gap alone (was double-spaced) */ .fr-actions{ margin-left:0 !important; gap:5px !important; flex:0 0 auto; } .fr-join{ padding:5px 11px !important; font-size:11.5px !important; border-radius:8px !important; } .fr-tip{ padding:0 !important; width:26px !important; height:26px !important; display:inline-flex !important; align-items:center; justify-content:center; font-size:15px !important; line-height:1 !important; border-radius:8px !important; } /* ════════ RUSTFLIP — bulletproof: only the winning face exists AT REST (no red flash on black) ════════ The 3D CSS keeps BOTH faces rendered during the spin and relies on backface-visibility. On some GPUs the front (red) face can flicker through for a frame the instant the coin lands. At REST we no longer rely on that — we display:none the LOSING face entirely, so red can't show on a black win. */ .cf-coin.landed-blue .cf-face-red { display:none !important; } .cf-coin.landed-red .cf-face-blue{ display:none !important; } /* ════════ FOOTER · make the corner image as large as possible (user request) ════════ */ .ftr-inner{ align-items:stretch !important; } .ftr-art{ flex:2 1 460px !important; min-width:360px !important; max-width:760px !important; min-height:300px !important; max-height:none !important; align-self:stretch !important; } .ftr-art-svg{ width:100% !important; height:auto !important; max-width:560px !important; max-height:320px !important; } .ftr-art-photo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; border-radius:16px !important; } @media (max-width:760px){ .ftr-art{ flex:none !important; width:min(94vw,580px) !important; min-height:240px !important; margin:14px auto 0 !important; } .ftr-art-svg{ max-width:92vw !important; } } /* ════════ FREE RAIN · building bar — subtle living sheen while waiting for the next rain ════════ */ .free-rain.fr-building .fr-bar-fill{ overflow:hidden; animation:frBuildPulse 2.4s ease-in-out infinite; } @keyframes frBuildPulse{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.22) } } .free-rain.fr-building .fr-bar-fill::after{ content:""; position:absolute; inset:0; border-radius:8px; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform:translateX(-100%); animation:frBuildSheen 2.6s ease-in-out infinite; } @keyframes frBuildSheen{ 0%{ transform:translateX(-100%) } 60%,100%{ transform:translateX(220%) } } .free-rain.fr-building .fr-bar-label{ opacity:.92; } /* ════════ FREE RAIN · bigger + beautified; stable button row (the "+" never shifts on JOINED) ════════ The countdown now lives on the progress bar (see tickRain), which frees the top row so the title and pot can be larger without crowding. The Join button gets a FIXED width so "Join" and "✓ Joined" occupy the same space — the + button stays put when you join. */ .free-rain{ padding:11px 13px 10px !important; border-radius:15px !important; } .free-rain .fr-row{ gap:7px !important; min-width:0 !important; } .fr-title{ font-size:14.5px !important; gap:6px !important; flex:0 1 auto !important; min-width:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .fr-drop svg{ width:17px !important; height:17px !important; } .fr-info{ width:18px !important; height:18px !important; font-size:11px !important; } .fr-timer{ display:none !important; } /* countdown moved onto the bar */ .fr-pot{ font-size:15px !important; gap:3px !important; margin-left:auto !important; flex:0 0 auto !important; } .fr-pot .coin-ico{ width:1em !important; height:1em !important; margin-right:0 !important; } .fr-actions{ gap:6px !important; flex:0 0 auto !important; margin-left:0 !important; } .fr-join{ min-width:84px !important; text-align:center !important; padding:7px 12px !important; font-size:13px !important; border-radius:9px !important; } .fr-join.joined{ min-width:84px !important; } .fr-tip{ width:30px !important; height:30px !important; font-size:17px !important; border-radius:9px !important; } .fr-bar{ height:18px !important; margin-top:9px !important; } .fr-bar-label{ font-size:11.5px !important; letter-spacing:.04em !important; } /* ════════ FREE RAIN · live-rain "Join" call-to-action pulse (stops once joined) ════════ */ .free-rain.fr-active .fr-join:not(.joined){ animation:frJoinPulse 1.4s ease-in-out infinite; } @keyframes frJoinPulse{ 0%,100%{ box-shadow:0 3px 10px rgba(230,169,59,.4), inset 0 1px 0 rgba(255,255,255,.5); } 50%{ box-shadow:0 0 17px rgba(252,216,126,.92), inset 0 1px 0 rgba(255,255,255,.6); } } /* ════════ build 94.1 — footer corner art: FULL image (contain) + sway re-enabled (#15) ════════ Two problems: (1) an earlier block forced an oversized absolute image inside an overflow:hidden footer → the image got CUT; (2) the "FINAL CLEAN FOOTER" block above sets animation:none, so it never moved. Fix: keep a DEFINED box (so the image has height), show the whole image (contain, no crop), let the footer overflow so nothing clips, and re-enable the sway with !important so it actually beats the animation:none rule. */ .site-footer{ overflow:visible !important; position:relative !important; } /* #16 — footer character big & bottom-anchored: feet sit on the very bottom edge, never cut off */ .ftr-art{ width:300px !important; height:300px !important; align-self:flex-end !important; margin-bottom:-26px !important; position:relative !important; } .ftr-art-photo, .ftr-art-photo.ftr-art-anim{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:100% !important; height:auto !important; max-height:340px !important; object-fit:contain !important; object-position:bottom center !important; animation:none !important; /* #15 — sway removed */ filter:drop-shadow(0 12px 24px rgba(0,0,0,.6)); } /* the decorative emblem is only a fallback when the photo is missing — keep it behind the photo */ .ftr-art .ftr-art-svg{ opacity:.0 !important; } .ftr-art:has(.ftr-art-photo[src=""]) .ftr-art-svg, .ftr-art:not(:has(.ftr-art-photo)) .ftr-art-svg{ opacity:1 !important; } @media (max-width:760px){ .ftr-art{ width:190px !important; height:210px !important; margin-bottom:-18px !important; } .ftr-art-svg{ width:120px !important; height:120px !important; } } @media (prefers-reduced-motion: reduce){ .ftr-art-photo, .ftr-art-photo.ftr-art-anim{ animation:none !important; } } /* ════════ build 94.1 — Champions center timer: remove the glow background behind it (#16) ════════ */ .timer-section-center .timer-wrap::before{ display:none !important; background:none !important; animation:none !important; } /* ════════ build 94.1 — Champions player cards: wager amount was too small (screenshot) ════════ */ .player-stats .stat-box b{ font-size:24px !important; } .player-stats .stat-box b.bet-amt .coin-ico{ width:.8em !important; height:.8em !important; } @media (max-width:760px){ .player-stats .stat-box b{ font-size:21px !important; } } /* ════════ build 94.1 — profile + homepage level badge use the SAME tier ramp as chat ════════ (overrides the older "always gold" rule via higher specificity + !important) */ .level-badge.lvt1, .hm-promo-lvl-badge.lvt1 { background:linear-gradient(135deg,#d3dae6,#8b95a6) !important; color:#0d1018 !important; box-shadow:0 8px 20px rgba(133,147,173,.35) !important; } .level-badge.lvt2, .hm-promo-lvl-badge.lvt2 { background:linear-gradient(135deg,#7fc4e8,#3f89b8) !important; color:#04222b !important; box-shadow:0 8px 20px rgba(52,217,238,.35) !important; } .level-badge.lvt3, .hm-promo-lvl-badge.lvt3 { background:linear-gradient(135deg,#4fd39a,#2a9668) !important; color:#041a2e !important; box-shadow:0 8px 20px rgba(73,166,246,.35) !important; } .level-badge.lvt4, .hm-promo-lvl-badge.lvt4 { background:linear-gradient(135deg,#f4cd63,#cf9a2f) !important; color:#ffffff !important; box-shadow:0 8px 20px rgba(139,124,242,.4) !important; } .level-badge.lvt5, .hm-promo-lvl-badge.lvt5 { background:linear-gradient(135deg,#f0973a,#c46516) !important; color:#06230c !important; box-shadow:0 8px 20px rgba(90,211,109,.35) !important; } .level-badge.lvt6, .hm-promo-lvl-badge.lvt6 { background:linear-gradient(135deg,#ef6b5c,#c23a2f) !important; color:#1a2606 !important; box-shadow:0 8px 20px rgba(188,230,63,.35) !important; } .level-badge.lvt7, .hm-promo-lvl-badge.lvt7 { background:linear-gradient(135deg,#cb5470,#862a41) !important; color:#2a1402 !important; box-shadow:0 8px 20px rgba(246,173,66,.4) !important; } .level-badge.lvt8, .hm-promo-lvl-badge.lvt8 { background:linear-gradient(135deg,#4ec987,#278f57) !important; color:#2a1d02 !important; box-shadow:0 8px 20px rgba(252,214,77,.4) !important; } .level-badge.lvt9, .hm-promo-lvl-badge.lvt9 { background:linear-gradient(135deg,#3ec9c1,#17928c) !important; color:#ffffff !important; box-shadow:0 8px 20px rgba(244,104,63,.4) !important; } .level-badge.lvt10, .hm-promo-lvl-badge.lvt10{ background:linear-gradient(135deg,#55a1f0,#2a6cc9) !important; color:#ffffff !important; box-shadow:0 8px 20px rgba(232,72,154,.4) !important; } /* ════════ build 94.1 — Games dropdown: kill the hover flicker ════════ .ngm-card:hover used transform:translateY(-4px), which lifted the card out from under the cursor at its bottom edge → :hover toggled on/off → screen "titriyor". Drop the position shift; the shadow + border glow + shine sweep still signal hover clearly. Also pin a consistent frame on every card (not just the first two). */ .nav-games-menu .ngm-card{ border:1px solid rgba(130,150,185,.18) !important; } .nav-games-menu .ngm-card:hover{ transform:none !important; } /* ════════ build 94.4 — homepage banner: match the LEFT card, same look signed-in OR out ════════ The promo row is a grid, so a stretched banner inherits the LEFT card's height. The signed-out card was TALLER (2-line headline + sub + Steam button) than the signed-in card (compact level bar), which over-stretched the slide and cropped it badly — and a fixed-aspect banner instead looked the wrong SIZE next to the left card ("looks out of place"). Fix: keep the banner STRETCHED (so its size always matches the left card) AND normalise the welcome card's height across both states, so the stretched banner keeps a clean ~2:1 crop whether or not you're signed in. */ .hm-promo-welcome{ min-height:225px; display:flex; flex-direction:column; justify-content:center; } .hm-promo-welcome.hm-guest .hm-promo-sub{ display:none; } .hm-promo-welcome.hm-guest .hm-promo-title{ font-size:clamp(22px,2.8vw,30px); line-height:1.07; } .hm-promo-welcome.hm-guest .hm-promo-cta{ margin-top:10px; } .hm-promo-welcome.hm-guest .hm-promo-chips{ margin-top:10px; } /* The old image-banner CSS that used to live here (.hm-banner-slider/.hm-banner-slide/ .hm-banner-track/.hm-banner-dots/.hm-banner-arrow/.hm-banner-dot) has been removed. The home banner is now the self-contained slider defined inline in index.php, which declares its own .hm-banner-track and .hm-banner-dots. Keeping the old copies here duplicated those two class names and left the track carrying height:100% + will-change:transform — a stray compositing layer that could paint blank on some mobile GPUs while the border/dots still drew, i.e. an empty-looking banner. Phone dot-hiding now lives inline next to the dots rule. */ /* ════════ build 94.1 — Rustflip: kill the post-landing tonal flash ════════ After the coin landed, the 1.3s win-pulse (cfWinPulseRed/Blue) ramped through a bright WHITE halo (rgba(255,255,255,.55)) at its 35% mark before settling — which read as the coin briefly shifting TONE then correcting ("shifts to a different tone for ~1s then corrects"). Redefine the keyframes (patch94.css loads last, so these win) to a SAME-HUE glow that only varies in intensity — no white, no tone change. Flip mechanics untouched. */ @keyframes cfWinPulseRed{ 0%{ filter:drop-shadow(0 0 14px rgba(239,68,68,.55)) drop-shadow(0 10px 24px rgba(0,0,0,.55)); } 40%{ filter:drop-shadow(0 0 42px rgba(239,68,68,.95)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); } 100%{ filter:drop-shadow(0 0 30px rgba(239,68,68,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); } } @keyframes cfWinPulseBlue{ 0%{ filter:drop-shadow(0 0 14px rgba(59,130,246,.55)) drop-shadow(0 10px 24px rgba(0,0,0,.55)); } 40%{ filter:drop-shadow(0 0 42px rgba(59,130,246,.95)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); } 100%{ filter:drop-shadow(0 0 30px rgba(59,130,246,.9)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); } } /* ════════ build 94.2 — Free Rain: PRETTIER + TALLER + "TIP" pill (replaces the old compact trim) ════════ The user wanted the rain section bigger and nicer, and the tip control to read "TIP". This block loads last, so it governs the final look across all breakpoints. */ .free-rain{ margin:0 0 12px !important; padding:14px 16px 13px !important; border-radius:16px !important; border:1px solid rgba(150,170,205,.22) !important; background: radial-gradient(120% 150% at 50% -25%, rgba(120,160,255,.14), transparent 62%), linear-gradient(180deg, rgba(33,38,56,.94), rgba(20,24,36,.97)) !important; box-shadow:0 12px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05) !important; } .free-rain.fr-active{ border-color:rgba(252,216,126,.36) !important; background: radial-gradient(120% 160% at 50% -25%, rgba(252,216,126,.20), rgba(120,160,255,.06) 55%, transparent 74%), linear-gradient(180deg, rgba(40,35,27,.95), rgba(23,20,15,.98)) !important; box-shadow:0 14px 36px rgba(0,0,0,.46), 0 0 0 1px rgba(252,216,126,.14), inset 0 1px 0 rgba(255,255,255,.06) !important; } .free-rain .fr-row{ gap:10px !important; align-items:center !important; flex-wrap:nowrap !important; } .free-rain .fr-title{ font-size:13.5px !important; font-weight:800 !important; letter-spacing:.02em !important; color:#eaf0fb !important; } .free-rain .fr-pot{ font-size:14.5px !important; font-weight:800 !important; color:#fcd87e !important; gap:5px !important; } .free-rain .fr-timer{ font-size:13px !important; font-weight:800 !important; } /* the progress / countdown bar — taller and rounder, with a soft glow */ .free-rain .fr-bar{ height:22px !important; margin-top:12px !important; border-radius:11px !important; background:rgba(0,0,0,.36) !important; border:1px solid rgba(150,170,205,.18) !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.6) !important; } .free-rain .fr-bar-fill{ border-radius:11px !important; } .free-rain.fr-building .fr-bar-fill{ background:linear-gradient(90deg, rgba(120,160,255,.85), rgba(90,130,235,.98)) !important; box-shadow:0 0 16px rgba(120,160,255,.55) !important; } .free-rain.fr-active .fr-bar-fill{ background:linear-gradient(90deg, #fcd87e, #e6a93b) !important; box-shadow:0 0 18px rgba(252,216,126,.65) !important; } .free-rain .fr-bar-label{ font-size:12px !important; font-weight:800 !important; letter-spacing:.04em !important; text-shadow:0 1px 3px rgba(0,0,0,.8) !important; } /* TIP button: a gold PILL with the word "TIP" (was a tiny "+" square) — matches the Join button */ .fr-tip{ width:auto !important; height:auto !important; padding:8px 16px !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.07em !important; border-radius:9px !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .fr-join{ padding:8px 16px !important; font-size:12px !important; border-radius:9px !important; } @media (max-width:760px){ .free-rain{ padding:12px 13px 11px !important; } .free-rain .fr-bar{ height:20px !important; } .fr-tip, .fr-join{ padding:7px 13px !important; } } /* ════════ build 94.2 — chat send + emoji buttons: dark-navy #14192d (user request) ════════ Both action buttons share the same dark-navy fill with a gold icon (visible + on-brand) and a subtle frame. The send button is now a paper-plane; the emoji button keeps its smiley. */ .chat-form button[type=submit], .chat-emoji-btn{ background:#14192d !important; color:#f4cd84 !important; /* gold icon — clearly visible on the dark navy */ border:1px solid rgba(150,170,205,.22) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } .chat-form button[type=submit]:hover, .chat-emoji-btn:hover{ background:#1b2238 !important; /* a touch lighter on hover */ color:#ffd98a !important; border-color:rgba(244,205,132,.45) !important; } .chat-form button[type=submit] svg, .chat-emoji-btn svg{ display:block; } /* ── #5 RACES · numbers were gradient-clipped to transparent text, which can vanish against the background. Force solid high-contrast fills so every figure stays readable. ── */ .lb-stat-val{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:#ffd9a0 !important; color:#ffd9a0 !important; } .lb-stat-prize .lb-stat-val{ -webkit-text-fill-color:#4ade80 !important; color:#4ade80 !important; } .lb-stat-empty .lb-stat-val{ -webkit-text-fill-color:var(--t3) !important; color:var(--t3) !important; } .lb-pod-wager{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:#ffe6b0 !important; color:#ffe6b0 !important; } .lb-stat-val .coin-ico, .lb-pod-wager .coin-ico{ -webkit-text-fill-color:initial !important; } /* podium base figures: dark on the bright gold pedestal → engrave them (dark fill + crisp light highlight underneath) so the 1-2-3 stays clearly readable on gold/silver/bronze. */ .lb-pod-rank{ color:#241a06 !important; -webkit-text-fill-color:#241a06 !important; text-shadow:0 1.5px 0 rgba(255,255,255,.62), 0 -1px 1px rgba(0,0,0,.30), 0 3px 6px rgba(0,0,0,.22) !important; } .lb-pod-prize{ color:#fff6e2 !important; -webkit-text-fill-color:#fff6e2 !important; } /* ── #3/#5 @-mention dropdown: FIXED width (never collapses to a sliver), each NAME on ONE line, names stacked vertically. The sliver-collapse was what made names wrap one letter per line. ── */ .chat-mention-pop{ position:fixed; width:262px !important; min-width:262px !important; max-width:calc(100vw - 16px) !important; overflow-x:hidden !important; z-index:4000 !important; } /* The picker row already renders the player's real avatar (.cm-av). A ::before tile printing data-initial sat in front of it, so every row began with a duplicate initial letter. Tile removed; the avatar stands on its own. */ .chat-mention-item{ display:flex !important; align-items:center; gap:9px; width:100% !important; box-sizing:border-box; white-space:nowrap !important; word-break:normal !important; color:#e8eaf0 !important; } .chat-mention-item.sel, .chat-mention-item:hover{ color:#ffe6b0 !important; } .chat-mention-item .cm-name{ flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; word-break:normal !important; max-width:none !important; width:auto !important; color:inherit !important; font:700 14px var(--fu,inherit) !important; } /* ════════ #2 · Tip + Rain chat messages → FLAT (no card); the RAIN / TIP title sits flush with the message text with NO background pill, and the SITE COIN drifts behind the label ═════════════════ */ /* Strip the old loud gold/blue card entirely: no background, border, glow, sheen or rain overlay — the line now reads like a normal message, the title flush-left with the text. */ .chat-message.chat-message-rain .chat-body, .chat-message.chat-message-tip .chat-body{ background:none !important; border:0 !important; box-shadow:none !important; padding:2px 0 2px !important; overflow:visible !important; } .chat-message.chat-message-rain .chat-body::before, .chat-message.chat-message-tip .chat-body::before, .chat-message.chat-message-rain .chat-body::after{ content:none !important; background:none !important; animation:none !important; } .chat-message.chat-message-rain .chat-body p{ color:#ffe7a6 !important; font-weight:600 !important; text-shadow:none !important; } .chat-message.chat-message-tip .chat-body p{ color:#dceaff !important; font-weight:600 !important; text-shadow:none !important; } /* The RAIN / TIP title — NO background fill, just the coloured word with the SITE COIN drifting behind it (a slow horizontal coin stream), aligned flush with the message text. */ .chat-rain-tag, .chat-tip-tag{ position:relative !important; overflow:hidden !important; display:inline-flex !important; align-items:center !important; background:none !important; border:0 !important; padding:1px 8px !important; border-radius:6px !important; font-weight:800 !important; letter-spacing:.05em !important; line-height:1.45 !important; } .chat-rain-tag{ color:#ffe7a6 !important; } .chat-tip-tag{ color:#dceaff !important; } .chat-rain-tag .crt-txt, .chat-tip-tag .crt-txt{ position:relative !important; z-index:1 !important; } /* #18 — a single site-coin on the LEFT and RIGHT of the word only (the old repeat-x stream tiled a coin BEHIND the letters too — the "middle" coin the user wanted gone). Two no-repeat coins pinned to the edges leave the text clean in the middle. */ .chat-rain-tag::before, .chat-tip-tag::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background:url('/assets/coin-3d.svg?v=1532') left center / 13px 13px no-repeat, url('/assets/coin-3d.svg?v=1532') right center / 13px 13px no-repeat !important; opacity:.42 !important; } .chat-tip-tag::before{ opacity:.5 !important; } /* the old raindrops / inline coin chip inside the title are replaced by the coin backdrop */ .chat-rain-tag .crt-drops, .chat-tip-tag .coin-ico{ display:none !important; } @media (prefers-reduced-motion:reduce){ .chat-rain-tag::before, .chat-tip-tag::before{ animation:none !important; } } /* ── Profile wagered: keep the dollar+cent halves on ONE line (was wrapping "1849"/"21") ── */ .pstat b .coin-amt, .profile-stats-grid b .coin-amt{ display:inline-block !important; white-space:nowrap !important; } .pstat b .coin-amt .coin-d, .pstat b .coin-amt .coin-c, .profile-stats-grid b .coin-amt .coin-d, .profile-stats-grid b .coin-amt .coin-c{ display:inline !important; white-space:nowrap !important; } .pstat b{ white-space:nowrap; display:inline-flex; align-items:baseline; gap:4px; flex-wrap:nowrap; } /* ── Copy icon (Rustly ID, fairness fields) ── */ .pstat-id{ display:inline-flex !important; align-items:center; gap:8px; } .copy-ico{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; cursor:pointer; border-radius:7px; background:rgba(238,179,81,.12); color:#f1c869; transition:background .15s ease, color .15s ease, transform .12s ease; flex:0 0 auto; } .copy-ico:hover{ background:rgba(238,179,81,.24); color:#ffe6b0; transform:translateY(-1px); } .copy-ico.copied{ background:rgba(43,185,100,.2); color:#6ee7a8; } .fair-copy-row{ display:inline-flex; align-items:center; gap:6px; } /* #4 — Profile Wagered: make the number as prominent as the coin icon (was rendering small) */ .pstat b .coin-amt{ font-size:19px !important; font-weight:800 !important; line-height:1 !important; } .pstat b .coin-amt .coin-d{ font-size:19px !important; font-weight:800 !important; } .pstat b .coin-amt .coin-c{ font-size:16px !important; font-weight:800 !important; opacity:.78; } .pstat b .coin-ico{ width:19px !important; height:19px !important; flex:0 0 19px !important; } /* ════════ Level badge in the CORNER of the chat avatar (like the reference screenshot) ════════ */ .chat-av{ position:relative !important; overflow:visible !important; } /* keep the avatar art rounded now that the wrapper no longer clips */ .chat-av > img{ border-radius:9px !important; } .chat-av > span:not(.chat-av-lvl){ border-radius:9px !important; } .chat-av-lvl{ position:absolute !important; bottom:-3px !important; right:-3px !important; left:auto !important; transform:none !important; min-width:12px !important; width:auto !important; height:12px !important; padding:0 2px !important; display:inline-flex !important; align-items:center; justify-content:center; font-family:var(--fm); font-weight:800 !important; font-size:7.5px !important; line-height:1 !important; letter-spacing:0 !important; border-radius:6px !important; box-shadow:0 1px 3px rgba(0,0,0,.6) !important; z-index:4; pointer-events:none; background:#0b0d12 !important; color:var(--lvc,#8593ad) !important; border:1px solid var(--lvc,#8593ad) !important; } /* the avatar itself gets a clearly-visible frame in the SAME level colour */ .chat-av.chat-av-lv{ border-color:var(--lvc,#8593ad) !important; box-shadow:0 0 0 2px var(--lvc,#8593ad), 0 0 9px -1px var(--lvc,#8593ad) !important; } .chat-av.lvt1, .chat-av-lvl.lvt1 { --lvc:#8593ad; } .chat-av.lvt2, .chat-av-lvl.lvt2 { --lvc:#34d9ee; } .chat-av.lvt3, .chat-av-lvl.lvt3 { --lvc:#49a6f6; } .chat-av.lvt4, .chat-av-lvl.lvt4 { --lvc:#8b7cf2; } .chat-av.lvt5, .chat-av-lvl.lvt5 { --lvc:#5ad36d; } .chat-av.lvt6, .chat-av-lvl.lvt6 { --lvc:#bce63f; } .chat-av.lvt7, .chat-av-lvl.lvt7 { --lvc:#f6ad42; } .chat-av.lvt8, .chat-av-lvl.lvt8 { --lvc:#fcd64d; } .chat-av.lvt9, .chat-av-lvl.lvt9 { --lvc:#f4683f; } .chat-av.lvt10, .chat-av-lvl.lvt10{ --lvc:#e8489a; } /* Champion "Recent Battles": show the claimed pot's skins inline before the amount (item 5) */ .hist-row .hist-skins{ display:inline-flex; vertical-align:middle; margin-right:6px; } .hist-row .hist-skins .skin-stack{ transform:translateY(1px); } /* ════════ Coin Rain bar → GOLD card by default + coin icon badge (match the Ticket Rain strip and the reference the operator sent, instead of the blue-until-active look). Loaded last → wins the cascade. ════════ */ .free-rain{ border:1px solid rgba(255,206,84,.42) !important; background: radial-gradient(58% 90% at 82% 32%, rgba(255,206,84,.24), transparent 60%), radial-gradient(120% 120% at 10% 118%, rgba(150,96,20,.30), transparent 64%), linear-gradient(160deg, #2a1f0c 0%, #1b1407 48%, #0c0a05 100%) !important; box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,236,180,.14), inset 0 0 40px rgba(120,80,15,.28) !important; } .free-rain.fr-active{ border-color:rgba(255,206,84,.55) !important; box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(252,216,126,.18), inset 0 1px 0 rgba(255,236,180,.16), inset 0 0 44px rgba(120,80,15,.32) !important; } /* coin icon badge (mirrors .tr-strip-ico) */ .free-rain .fr-ico{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(238,179,81,.16); box-shadow:0 0 12px -3px var(--gold2,#f4cd84); } .free-rain .fr-ico .coin-ico{ width:18px !important; height:18px !important; margin:0 !important; } .free-rain .fr-brand{ display:inline-flex; align-items:center; gap:8px; min-width:0; } /* gold title (mirrors .tr-strip-txt b) */ .free-rain .fr-brand-main{ font-family:var(--fu); font-weight:900; font-size:13.5px; letter-spacing:.01em; background:linear-gradient(180deg,#ffe694,#f3a83e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#f3a83e !important; filter:drop-shadow(0 2px 4px rgba(243,168,62,.35)); } .free-rain .fr-title{ color:#ffe7b0 !important; } .free-rain .fr-drop{ color:#f4cd84 !important; } .free-rain .fr-info{ border-color:rgba(255,206,84,.42) !important; background:rgba(238,179,81,.16) !important; color:#f4cd84 !important; } .free-rain .fr-info:hover{ background:linear-gradient(145deg,#fcd87e,#e6a93b) !important; color:#1a1205 !important; border-color:transparent !important; } .free-rain .fr-bar{ border-color:rgba(255,206,84,.20) !important; } /* bar gold even while building (muted) → live (bright), keeping the gold family */ .free-rain.fr-building .fr-bar-fill{ background:linear-gradient(90deg, rgba(230,169,59,.7), rgba(200,140,40,.85)) !important; box-shadow:0 0 14px rgba(230,169,59,.4) !important; } .free-rain .fr-pot{ flex:0 0 auto !important; } /* the reward amount keeps its space (never squeezed off-screen) */ .free-rain .fr-brand-main{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ════════ Coin Rain · prize pool on its OWN line so the reward amount ALWAYS fits (any size, any width) ════════ The pot used to share the crowded top row with the title, info, tip and Join — a large amount got squeezed. It now sits on a dedicated line between the title row and the progress bar. ════════ */ .free-rain .fr-potline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; min-width:0; } .free-rain .fr-pot-lbl{ flex:0 0 auto; font:800 10.5px var(--fu,inherit); letter-spacing:.09em; text-transform:uppercase; color:#c9a86a; opacity:.92; } .free-rain .fr-potline .fr-pot{ flex:1 1 auto; justify-content:flex-end; display:inline-flex !important; align-items:center; gap:5px; margin:0 !important; padding:0 !important; font-weight:900 !important; font-size:19px !important; color:#fcd87e !important; min-width:0; overflow:hidden; } .free-rain .fr-potline .fr-pot .coin-ico{ width:20px !important; height:20px !important; margin:0 !important; flex:0 0 auto; } .free-rain .fr-potline .fr-pot #chatRainPot{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:760px){ .free-rain .fr-potline .fr-pot{ font-size:18px !important; } } /* Coin Rain: sit the "i" info button RIGHT NEXT TO the "Coin Rain" title (it was picking up an extra 8px left margin on top of the flex gap, so the "i" floated too far from the label). */ .free-rain .fr-brand{ gap:5px !important; } .free-rain .fr-brand .fr-info{ margin-left:0 !important; } /* Coin Rain pot icon = the SAME avatar the RAIN chat announcement uses (circled coin/money badge), so the bar matches the coin rain's chat "profile picture" (was a raindrop). Sized to the pot number. */ .free-rain .fr-pot .fr-pot-ava{ display:inline-flex; align-items:center; flex:0 0 auto; margin-right:1px; filter:drop-shadow(0 0 3px rgba(127,180,255,.35)); } .free-rain .fr-pot .fr-pot-ava svg{ width:1.1em !important; height:1.1em !important; } /* Footer: the content columns were packed hard-left (justify-content:flex-start) which read as "shifted left"; centre them as a group so the footer looks balanced. The corner art stays pinned bottom-right and doesn't overlap (content ends ~40px before the art). A touch more vertical room too. */ .site-footer .ftr-inner{ justify-content:center !important; } @media (max-width:820px){ .site-footer .ftr-inner{ justify-content:flex-start !important; } } /* Quick Game: remove the shine/lift that appeared when hovering a player seat — the seat now stays completely still on hover (no upward lift, no border brightening). */ .qg-seat:not(.empty):hover{ transform:none !important; border-color:rgba(255,255,255,.06) !important; } .qg-seat.empty:hover .qg-seat-av{ border-color:rgba(255,255,255,.2) !important; } .qg-seat.empty:hover .qg-seat-plus{ color:#5a626b !important; } /* Races podium: make the WAGERED figure (and the coin amount to its left) noticeably bigger for the top 3 so it reads as the headline stat, not fine print. */ .rc-podium .rc-points{ font-size:13.5px !important; } .rc-podium .rc-points b{ font-size:16.5px !important; } .rc-podium .rc-points b .coin-ico, .rc-podium .rc-points .coin-ico{ width:15px !important; height:15px !important; } .rc-pod-1 .rc-points{ font-size:14.5px !important; } .rc-pod-1 .rc-points b{ font-size:18px !important; } @media (max-width:600px){ .rc-podium .rc-points{ font-size:11.5px !important; } .rc-podium .rc-points b{ font-size:14px !important; } .rc-pod-1 .rc-points b{ font-size:15px !important; } } /* Unified notifications: error variant of the market-style toast (red cross instead of green check). */ .rr-buy-toast.rbt-err .rbt-ico{ background:rgba(248,113,113,.16) !important; color:#f87171 !important; } /* Raffles drawer: when the Guess widget is docked directly above the "Raffles" header, add a divider line ABOVE that header so the Guess section and the Raffles section read as separate blocks (they were running together, looking merged). */ #predWidget.pred-in-raffle + .rfd-head{ border-top:1px solid var(--ln) !important; padding-top:15px !important; margin-top:3px !important; } /* ── Rustly Guess widget — premium polish (safe, additive) ─────────────────── */ #predWidget{ backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); box-shadow:0 16px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(238,179,81,.08), inset 0 1px 0 rgba(255,255,255,.06); } #predWidget .pred-w-head{ position:relative; overflow:hidden; } #predWidget .pred-w-head::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform:skewX(-18deg); animation:predSheen 4.5s ease-in-out infinite; pointer-events:none; } @keyframes predSheen{ 0%,72%{ left:-60%; } 88%,100%{ left:120%; } } #predWidget .pred-opt{ transition:border-color .15s, transform .1s, background .15s, box-shadow .15s; } #predWidget .pred-opt:hover:not(:disabled){ background:rgba(238,179,81,.07); box-shadow:0 4px 14px rgba(238,179,81,.16); transform:translateY(-1px); } #predWidget .pred-opt.picked{ box-shadow:inset 0 0 0 1px rgba(238,179,81,.6), 0 5px 18px rgba(238,179,81,.24); } #predWidget .pred-w-live{ display:inline-flex; align-items:center; gap:5px; font:800 9.5px var(--fd); letter-spacing:.1em; color:#ff6b5a; margin-left:auto; margin-right:8px; } #predWidget .pred-w-live i{ width:6px; height:6px; border-radius:50%; background:#ff5a48; box-shadow:0 0 0 0 rgba(255,90,72,.6); animation:predLivePulse 1.5s ease-out infinite; } @keyframes predLivePulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,72,.6);} 70%{ box-shadow:0 0 0 7px rgba(255,90,72,0);} 100%{ box-shadow:0 0 0 0 rgba(255,90,72,0);} } /* Mobile: give footer nav links a taller tap area (match the care taken elsewhere with tap targets). */ @media (max-width:760px){ .ftr-links a{ padding:4px 0; } .ftr-links-legal a{ padding:3px 0; } } /* deposit method icons: rust.png img + wider crypto (BTC+coins) icon */ .dw-mi-img{ width:26px; height:26px; object-fit:contain; border-radius:6px; display:block; } .dw-mi{ min-width:30px; display:inline-flex; align-items:center; justify-content:center; } .dw-mi-crypto svg{ width:30px; height:22px; } /* ══════════ Rustflip LAST GAMES — column table (SIDE / PLAYERS / ITEMS / VALUE / RESULT / ACTIONS) One tidy strip per game instead of the old free-form row. Kept in patch94.css (70KB) rather than the tail of style.css, which sits past the size where that file has been seen to truncate on upload. ══════════ */ .cf-tbl-head, .rr-tbl-head, .cf-hrow, .rr-trow{ display:grid; grid-template-columns:minmax(130px,168px) minmax(0,1fr) 104px minmax(132px,164px) 96px; align-items:center; gap:14px; /* VALUE and RESULT were reading as one block, so the gap between those two is widened */ column-gap:14px; } .cf-tbl-head{ padding:0 16px 8px; margin-top:10px; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--t3,#8f9bb3); } .cf-tbl-head span:nth-child(3){ text-align:right; } .cf-tbl-head span:last-child{ text-align:center; } .cf-tbl, .rr-tbl{ display:flex; flex-direction:column; gap:10px; } .cf-hrow{ background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012)); border:1px solid rgba(140,160,210,.10); border-radius:14px; padding:12px 16px; cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .cf-hrow:hover, .rr-trow:hover{ transform:translateY(-2px); border-color:rgba(238,179,81,.34); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow:0 12px 28px rgba(0,0,0,.4); } .cf-c-players{ display:flex; align-items:center; gap:9px; min-width:0; } .cf-c-players .cf-p{ display:inline-flex; } .cf-c-players .cf-row-av{ width:30px; height:30px; border-radius:9px; object-fit:cover; } .cf-row-vs{ font-size:10.5px; font-weight:800; letter-spacing:.08em; color:var(--t3,#8f9bb3); } .cf-c-items{ display:flex; align-items:center; min-width:0; overflow:hidden; } /* Rustflip history thumbnails. The stack still carries the old .cf-row-stakedskins wrapper, and style.css has `.cf-row-stakedskins .skin-stack .ss-th{width:28px}` - three classes, so a plain `.cf-c-items .ss-th` (two) lost the cascade and the size never changed. Match the real structure. */ .cf-c-items .ss-th, .cf-c-items .skin-stack .ss-th, .cf-c-items .cf-row-stakedskins .skin-stack .ss-th{ width:42px; height:42px; } /* Below ~1100px the ITEMS column is too narrow for six 42px thumbs (they clipped at 1024px), so the thumbs step down instead of the last one being cut in half. */ @media (max-width:1100px){ .cf-c-items .ss-th, .cf-c-items .skin-stack .ss-th, .cf-c-items .cf-row-stakedskins .skin-stack .ss-th{ width:34px; height:34px; } } @media (max-width:1000px){ .cf-c-items .ss-th, .cf-c-items .skin-stack .ss-th, .cf-c-items .cf-row-stakedskins .skin-stack .ss-th{ width:30px; height:30px; } } .cf-c-empty{ color:var(--t3,#8f9bb3); opacity:.6; } .cf-c-value{ display:flex; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; font-weight:800; color:var(--gold2,#f4cd84); } .cf-c-result{ display:flex; align-items:center; gap:8px; min-width:0; } .cf-c-result .cf-row-av{ width:30px; height:30px; border-radius:9px; object-fit:cover; } .cf-res-coin{ display:inline-flex; } .cf-res-coin .cf-coin, .cf-res-coin img, .cf-res-coin svg{ width:22px; height:22px; } .cf-res-name{ font-size:12.5px; font-weight:700; color:var(--t1,#e8edf7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cf-c-actions{ display:flex; align-items:center; justify-content:center; gap:7px; } .cf-act{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; cursor:pointer; color:var(--t2,#b9c4d8); background:rgba(255,255,255,.05); border:1px solid rgba(140,160,210,.14); transition:background .14s ease, color .14s ease, border-color .14s ease; } .cf-act:hover{ background:rgba(238,179,81,.16); border-color:rgba(238,179,81,.4); color:var(--gold2,#f4cd84); } @media (max-width:950px){ /* Stacked below 950px, not 900: between 900 and 950 the ITEMS column drops to ~210px, which cannot hold six thumbs at any sensible size (the last one clipped). The stacked layout gives ITEMS the full row width instead. Cells are placed explicitly so the strip is three tidy lines (coin+players+amount / items / winner+View) instead of letting VALUE take a line of its own, which made each row needlessly tall. */ .cf-tbl-head{ display:none; } .cf-hrow{ grid-template-columns:minmax(0,1fr) auto; grid-auto-rows:auto; row-gap:9px; } .cf-c-players{ grid-column:1; grid-row:1; } .cf-c-value { grid-column:2; grid-row:1; padding-right:0; } .cf-c-items { grid-column:1 / -1; grid-row:2; } .cf-c-result { grid-column:1; grid-row:3; padding-left:0; border-left:0; } .cf-c-actions{ grid-column:2; grid-row:3; } } @media (prefers-reduced-motion: reduce){ .cf-hrow:hover{ transform:none; } } /* VALUE | RESULT separation + the winner tile (avatar with the winning coin pinned to its top-left) */ .cf-tbl-head span:nth-child(3), .cf-hrow > .cf-c-value{ padding-right:18px; } .cf-tbl-head span:nth-child(4), .cf-hrow > .cf-c-result{ padding-left:20px; border-left:1px solid rgba(140,160,210,.12); } .cf-tbl-head span:nth-child(4){ border-left-color:transparent; } .cf-res-tile{ position:relative; display:inline-flex; } .cf-res-tile .cf-row-av{ width:40px; height:40px; border-radius:11px; object-fit:cover; border:1px solid rgba(238,179,81,.30); } .cf-res-coin{ position:absolute; top:-7px; left:-7px; display:inline-flex; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); } .cf-res-coin .cf-coin, .cf-res-coin img, .cf-res-coin svg{ width:22px; height:22px; } .cf-c-actions .cf-act{ width:auto; min-width:62px; height:32px; padding:0 14px; font-size:12px; font-weight:700; letter-spacing:.02em; } /* ══════════ Shared game-table pieces so Rustpot / Quick Game / Champion can use the same language as the Rustflip table: header strip, one row per game, identical spacing. ══════════ */ .rr-tbl-head{ padding:0 16px 8px; margin-top:10px; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--t3,#8f9bb3); } .rr-tbl{ display:flex; flex-direction:column; gap:10px; } .rr-trow{ background:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012)); border:1px solid rgba(140,160,210,.10); border-radius:14px; padding:12px 16px; cursor:pointer; transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .rr-trow:hover{ transform:translateY(-2px); border-color:rgba(238,179,81,.34); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow:0 12px 28px rgba(0,0,0,.4); } .rr-c-player{ display:flex; align-items:center; gap:9px; min-width:0; } .rr-av{ width:34px; height:34px; border-radius:10px; object-fit:cover; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); font-weight:800; font-size:13px; color:var(--t2,#b9c4d8); } .rr-name{ font-size:12.5px; font-weight:700; color:var(--t1,#e8edf7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rr-c-items{ display:flex; align-items:center; min-width:0; overflow:hidden; } .rr-c-items .ss-th{ width:34px; height:34px; } .rr-c-val{ display:flex; align-items:center; justify-content:flex-end; gap:6px; white-space:nowrap; font-weight:800; color:var(--gold2,#f4cd84); padding-right:18px; } .rr-c-act{ display:flex; align-items:center; justify-content:center; } .rr-c-act .rr-view{ min-width:62px; height:32px; padding:0 14px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:700; color:var(--t2,#b9c4d8); background:rgba(255,255,255,.05); border:1px solid rgba(140,160,210,.14); transition:background .14s ease, color .14s ease, border-color .14s ease; } .rr-c-act .rr-view:hover{ background:rgba(238,179,81,.16); border-color:rgba(238,179,81,.4); color:var(--gold2,#f4cd84); } .rr-c-empty{ color:var(--t3,#8f9bb3); opacity:.6; } .rr-pct{ font-size:11.5px; font-weight:800; color:var(--gold2,#f4cd84); background:rgba(238,179,81,.12); border:1px solid rgba(238,179,81,.22); border-radius:7px; padding:3px 8px; } @media (prefers-reduced-motion: reduce){ .rr-trow:hover{ transform:none; } } /* Rustpot LAST GAMES: WINNER | CHANCE | ITEMS | VALUE | ACTIONS */ .rp-tbl-head, .rp-trow{ /* This card sits in the sidebar (~538px), not full width like the Rustflip table, so the fixed columns are tighter and ITEMS takes whatever is left rather than being squeezed to nothing. */ display:grid; grid-template-columns:minmax(112px,1fr) 58px minmax(96px,1.5fr) 92px 74px; align-items:center; gap:10px; } .rp-tbl-head span:nth-child(4){ text-align:right; padding-right:10px; } .rp-trow .rr-c-val{ padding-right:10px; } .rp-trow .rr-av{ width:30px; height:30px; } .rp-trow .rr-c-items .ss-th{ width:30px; height:30px; } .rp-trow .rr-view{ min-width:56px; padding:0 10px; } .rp-tbl-head span:last-child{ text-align:center; } .rp-c-chance{ display:flex; align-items:center; } /* This card lives in a sidebar, so its width tracks the layout, not the viewport: at 1280px the card is only ~420px and the five columns no longer fit (VALUE and the View button were pushed outside the row). A container query stacks it based on the CARD's own width, which is the thing that actually matters. A viewport fallback covers browsers without container query support. */ .rp-recent-card{ container-type:inline-size; } @container (max-width: 500px){ .rp-tbl-head{ display:none; } .rp-trow{ grid-template-columns:minmax(0,1fr) auto; row-gap:9px; } .rp-trow .rr-c-player{ grid-column:1; grid-row:1; } .rp-trow .rp-c-chance{ grid-column:2; grid-row:1; } .rp-trow .rr-c-items { grid-column:1 / -1; grid-row:2; } .rp-trow .rr-c-val { grid-column:1; grid-row:3; justify-content:flex-start; padding-right:0; } .rp-trow .rr-c-act { grid-column:2; grid-row:3; } } /* Last-resort guard. At 1440px WITH the raffle drawer open the sidebar card is squeezed to ~112px (body.rfd-open reserves 364px of page padding and there is not enough width left). That is a page layout problem, not a table one, but the table should still not push content outside its row. */ @container (max-width: 260px){ .rp-trow{ grid-template-columns:minmax(0,1fr); row-gap:7px; padding:10px 12px; } .rp-trow .rr-c-player, .rp-trow .rp-c-chance, .rp-trow .rr-c-items, .rp-trow .rr-c-val, .rp-trow .rr-c-act{ grid-column:1; justify-content:flex-start; } .rp-trow .rr-view{ width:100%; } } @supports not (container-type: inline-size){ @media (max-width:1340px){ .rp-tbl-head{ display:none; } .rp-trow{ grid-template-columns:minmax(0,1fr) auto; row-gap:9px; } .rp-trow .rr-c-items{ grid-column:1 / -1; } .rp-trow .rr-c-val{ justify-content:flex-start; padding-right:0; } } } @media (max-width:900px){ .rp-tbl-head{ display:none; } .rp-trow{ grid-template-columns:minmax(0,1fr) auto; row-gap:9px; } .rp-trow .rr-c-items{ grid-column:1 / -1; } } /* Quick Game LAST GAMES: GAME | PLAYERS | ITEMS | VALUE | RESULT | ACTIONS */ .qg-tbl-head, .qg-trow{ display:grid; /* RESULT dropped: the winning player is already marked on their avatar. ITEMS keeps the freed width and is given a real minimum so it can never collapse to a sliver again. */ /* Sized against the real container (~586px of content width), not a full-width assumption: the previous columns totalled 630px so ACTIONS was pushed outside the row. PLAYERS gets 154px because three avatars need exactly that, and ITEMS takes whatever is left. */ grid-template-columns:44px minmax(154px,auto) minmax(130px,1fr) 104px 76px; align-items:center; gap:10px; } .qg-tbl-head span:nth-child(4){ text-align:right; padding-right:10px; } .qg-trow .rr-c-val{ padding-right:10px; } .qg-trow .rr-view{ min-width:56px; padding:0 10px; } .qg-trow .rr-c-items{ min-width:0; } .qg-trow .rr-c-items .ss-th{ width:30px; height:30px; } .qg-trow .rr-c-items .skin-stack-more{ font-size:11px; } .qg-tbl-head span:last-child{ text-align:center; } .qg-c-id{ font-size:12px; font-weight:800; color:var(--t3,#8f9bb3); } .qg-c-cells{ display:flex; align-items:center; gap:8px; min-width:0; } .qg-trow .qg-rcell{ position:relative; display:inline-flex; } .qg-trow .qg-rcell-av img, .qg-trow .qg-rcell-av > *{ width:32px; height:32px; border-radius:9px; } .qg-trow .qg-rcell.win .qg-rcell-av img, .qg-trow .qg-rcell.win .qg-rcell-av > *{ border:1px solid rgba(238,179,81,.55); } .qg-trow .qg-rcell-tag{ display:none; } @media (max-width:900px){ .qg-tbl-head{ display:none; } .qg-trow{ grid-template-columns:auto 1fr auto; row-gap:10px; } .qg-trow .rr-c-items{ grid-column:1 / -1; } } /* Champion LAST GAMES: WINNER | RESULT | VALUE | ACTIONS */ .ar-tbl-head, .ar-trow{ display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,1.6fr) 120px 88px; align-items:center; gap:14px; } .ar-tbl-head span:nth-child(3){ text-align:right; padding-right:18px; } .ar-tbl-head span:last-child{ text-align:center; } .ar-c-items{ display:flex; align-items:center; min-width:0; overflow:hidden; } .ar-c-items .ss-th{ width:34px; height:34px; } .ar-trow .bh-ico{ display:none; } /* the grid wrapper this list used to rely on must not fight the new row layout */ .arena-hist-grid.rr-tbl{ display:flex; flex-direction:column; gap:10px; } @media (max-width:900px){ .ar-tbl-head{ display:none; } .ar-trow{ grid-template-columns:1fr auto; row-gap:8px; } .ar-c-items{ grid-column:1 / -1; } } /* Column labels only make sense when there is something under them. If the list next to the header holds no rows (fresh site, or a game with no completed rounds yet) the header hides and the empty state stands alone. Browsers without :has() simply keep showing the header - no harm done. */ .cf-tbl-head:not(:has(+ * .cf-hrow)){ display:none; } .rp-tbl-head:not(:has(+ * .rp-trow)){ display:none; } .qg-tbl-head:not(:has(+ * .qg-trow)){ display:none; } .ar-tbl-head:not(:has(+ * .ar-trow)){ display:none; } /* Admin user-settings: dollar echo next to the coin-denominated deposit field. */ .us-hint{ font-weight:600; font-size:11.5px; color:var(--t3,#8f9bb3); margin-left:6px; } .us-hint-warn{ color:#f5a34a; } /* Admin: explicit "clear this stored secret" toggle under a masked password field. */ .adm-clear{ display:flex; align-items:center; gap:7px; margin-top:7px; font-size:11.5px; font-weight:600; color:var(--t3,#8f9bb3); cursor:pointer; } .adm-clear input{ width:auto; margin:0; } /* Admin: inline format feedback under the payout 2FA secret field. */ .adm-fmt{ display:block; margin-top:6px; font-size:11.5px; font-weight:600; line-height:1.45; } .adm-fmt.good{ color:#4ade80; } .adm-fmt.warn{ color:#f5a34a; } .adm-fmt.bad { color:#f87171; } /* Header logo: no hover animation. style.css scales/rotates it on hover in two places (.brand:hover .brand-icon-rust and .brand:hover .brand-logo); both are neutralised here so the mark stays completely still. The resting drop-shadow is left alone - only the movement goes. */ .brand:hover .brand-logo, .brand:hover .brand-icon-rust, .brand:hover img, .brand:hover svg{ transform:none !important; } .brand:hover .brand-logo{ filter:drop-shadow(0 2px 7px rgba(0,0,0,.55)) !important; } .brand:hover .brand-icon-rust{ filter:drop-shadow(0 3px 12px rgba(196,184,158,.45)) !important; } /* @-mentions. style.css gave the base .chat-mention the same gold pill as .chat-mention.me, so a tag looked identical to everyone - the person who wrote it saw the same highlight as the person tagged. Only the tagged reader should light up; for everyone else the name is just tinted text. */ .chat-mention{ background:none !important; color:var(--gold2,#f4cd84) !important; padding:0 !important; border-radius:0 !important; font-weight:700 !important; } .chat-mention.me{ background:var(--gold,#eeb351) !important; color:#1c1304 !important; padding:1px 6px !important; border-radius:5px !important; font-weight:800 !important; box-shadow:0 0 0 1px rgba(238,179,81,.55), 0 0 10px rgba(238,179,81,.45); } /* Marketplace nav icon (build 839). Iterations that did not work: crossed rifles collapsed into an ambiguous X at nav size; two stacked weapons split the ink into two weak rows; a real Steam item image pulled from the CDN meant an external request plus a DB lookup just to draw a 30px icon. Final mark: a hollow flat-top hexagon frame with a scoped bolt-action rifle drawn across the full diagonal at -42deg, butt and muzzle both breaking past the frame. Drawing it corner to corner is what makes it read as a rifle - the body can then stay thin (2.0 units) against a 12-unit barrel, which is roughly real rifle proportion; a shorter weapon forced a fat body and looked like a blob. Underside is a real trigger group, front to back: magazine, trigger blade, trigger guard bar, pistol grip - the earlier version had the grip and magazine touching with no guard, which is why the trigger area looked wrong. No bolt handle on purpose: every anatomically correct placement collides with the magazine or the scope mounts, and it is invisible at 30px anyway. Pure SVG, currentColor, no network. Kept slightly larger than the other nav icons so the scope and barrel separate. */ /* no hover rule here on purpose: style.css:12516 kills transform/animation/filter on every nav icon hover, so the marketplace icon must stay still like the rest of the nav */ /* ── Per-game minimum entry chip (build 852) ────────────────────────────────── "Min 50" next to the control you act on, generated by game_min_chip() from the admin setting so it cannot drift from what the API enforces. Two things this has to defend against: 1) Headings here use Bebas Neue (--fd), a typeface with NO lowercase — inside a heading the chip rendered as "MIN" and no text-transform could fix it, the glyphs simply do not exist. So the chip sets its own UI font. 2) coin_html() dims the last two digits (.coin-c, opacity .5) because site-wide a coin amount is drawn like dollars.cents. For a two-digit minimum (10, 50) that puts the WHOLE number in the dim half, which on the chip's grey pill was unreadable. Inside the chip the number goes back to full strength. */ .min-chip{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; margin-left:10px; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); font-family:var(--fu, system-ui) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.01em !important; text-transform:none !important; line-height:1.3; white-space:nowrap; color:var(--t3,#9aa6bd); } .min-chip .coin-ico{ width:1.15em; height:1.15em; vertical-align:-2px; } /* the value is what the eye should land on; "Min" stays grey */ .min-chip .coin-amt{ color:#e6ebf5; font-size:1.08em; } .min-chip .coin-c, .min-chip .coin-d{ opacity:1 !important; } /* Champion: sits under the Join button / guest CTA, so it centres. */ .arena-min{ margin-top:8px; } .arena-min .min-chip{ margin-left:0; } @media (max-width: 640px){ .min-chip{ font-size:12px !important; margin-left:6px; padding:2px 8px; } } /* ── Skin withdrawal option in the Withdraw modal ───────────────────────────── Sits first in the coin list. Its icon is an , not an inline SVG like the crypto entries, so it needs object-fit or it stretches inside the 30px box that .wd-coin-ico sets. The hairline under it separates skins from the crypto run below without adding a heading. */ .wd-coin-skins .wd-coin-ico{ object-fit:contain; border-radius:6px; } .wd-coin-skins{ border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:9px; margin-bottom:3px; } /* ── SkinDeck inventory picker (build 864) ──────────────────────────────────── The merchant API needs the player to choose items from their own inventory, so the deposit panel grows a list instead of a redirect button. */ .sd-pick{ margin-top:12px; } .sd-pick-note{ font-size:12.5px; line-height:1.45; color:#aeb6cc; margin-bottom:10px; } .sd-pick-foot span{ font-size:12.5px; color:#aeb6cc; } /* In-flight SkinDeck deposits (build 867). A deposit inside Steam's 7-day hold has no wallet_requests row yet, so this is the only place a player can see it exists. */ .sd-held{ margin-bottom:10px; padding:9px 11px; border-radius:10px; background:rgba(240,201,105,.08); border-left:3px solid #e0a03a; } .sd-held b{ display:block; font-size:12px; color:#f1c869; margin-bottom:3px; } .sd-held span{ display:block; font-size:12px; color:#cdd4e4; } /* The cooldown counter sits inline inside the sentence, so it must override the block .sd-held b rule above; tabular-nums keeps the digits from shifting as it counts down. */ .sd-held span .sd-cd{ display:inline; font-size:inherit; margin:0; color:#f1c869; font-weight:700; font-variant-numeric:tabular-nums; } /* Trade-URL prompt inside the skin panels (build 870). Asked once, then remembered on the account — so this is a rare, one-time field, not part of the normal flow. */ .sd-url{ width:100%; margin:2px 0 4px; font-size:12.5px; } .sd-pick-note a{ color:#f1c869; text-decoration:underline; } /* Below-minimum selection (build 872). Blocked, not swallowed — the site never credits a deposit under the floor, so the picker refuses before a trade is created. */ .sd-held span.sd-nocredit{ color:#e08a8a; } /* Jump-to-Steam link inside the In-progress block: only rendered when an offer is actually sitting in the player's Steam inbox waiting to be accepted, so it always has somewhere useful to go. */ .sd-held .sd-tradelink{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:7px 12px; border-radius:8px; background:rgba(240,201,105,.14); border:1px solid rgba(224,160,58,.5); color:#f1c869; font-size:12px; font-weight:700; text-decoration:none; line-height:1; transition:background .15s ease, border-color .15s ease; } .sd-held .sd-tradelink:hover{ background:rgba(240,201,105,.22); border-color:#e0a03a; } .sd-held .sd-tradelink svg{ flex:0 0 auto; } /* SkinDeck hosted component (build 875). The skins are rendered by SkinDeck inside the wallet modal, which is why there is no local item list any more. */ /* ════════ Deposit / Withdraw modals on mobile (build 879) ════════════════════ Both modals were built as a 320px sidebar + panel grid. Below 720px the grid already stacked, but nothing constrained the HEIGHT: the card carries overflow:hidden, so once the stacked content grew past the screen the bottom was simply CLIPPED with no way to scroll to it. That is survivable with a short crypto form and fatal now that a ~620px SkinDeck iframe sits inside it — the confirm button, the trade list and the frame itself all ended up below the fold. The fix is to make the card a flex column with a real height cap and let the grid scroll inside it. dvh first (so iOS/Android URL bars shrinking do not re-clip it), with vh as the fallback for browsers that lack dvh. */ @media (max-width: 720px){ .dw-modal{ align-items:flex-end; } /* sheet-style: reachable with a thumb */ .dw-modal .dw-card{ width:100vw !important; max-width:100vw !important; max-height:94vh; max-height:94dvh; border-radius:16px 16px 0 0; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom); /* clear of the iOS home bar */ /* MEASURED: the card computed to overflow-y:hidden, and anything that ends up outside .dw-grid was simply clipped. On a 390x844 phone the deposit card ran to y=848 while its own primary button sat at y=1099 — 255px past the clip, with no way to scroll to it. Same in landscape. So the sheet could be opened and read, and the one button that completes a deposit or a withdrawal could not be pressed at all. The inner grid scrolling is still the intended behaviour and still does the work; this is the backstop for anything the grid does not contain, because being unable to finish a payment is not a layout nitpick. */ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .dw-modal .dw-grid{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; /* stop the page behind scrolling too */ } /* The close button has to stay put while the body scrolls under it. */ .dw-modal .app-modal__close{ position:sticky; top:6px; float:right; margin-right:6px; z-index:5; } /* Reclaim vertical space: the sidebar is navigation, not content. */ .dw-side{ padding:12px 12px 14px; gap:10px; } .dw-methods{ gap:6px; } .dw-method{ padding:9px 11px; gap:9px; } .dw-mi{ width:32px; height:32px; } .dw-panel{ padding:14px 14px 18px !important; } .dw-title{ font-size:19px !important; } /* Withdraw: the coin picker was a wide flex row that pushed everything down. */ .wd-coins{ gap:6px; } .wd-coin{ padding:7px 9px !important; } /* The hosted component needs room without dominating: cap it against the viewport rather than a fixed pixel height that is right on exactly one phone. */ } /* Very narrow phones: the two-up method grid becomes a single column, otherwise the labels truncate to the point of being unreadable. */ @media (max-width: 400px){ .dw-mrow{ grid-template-columns:1fr; } .dw-method--sm{ flex-direction:row; text-align:left; padding:9px 11px; } } /* Landscape phones are short, not narrow — the cap above would leave almost nothing for the frame, so give it the room and let the sidebar scroll away. */ /* A phone in landscape is 844px wide, so it misses the 720px sheet rules entirely. Pointer is the honest test for a touch device. */ @media (pointer:coarse), (max-width: 900px) and (orientation: landscape) and (max-height: 520px){ .dw-modal .dw-card{ max-height:100vh; max-height:100dvh; border-radius:0; } } /* ════════ The same clipping bug, in four more dialogs (build 880) ════════════ Auditing every role="dialog" in the build turned up four with no height cap and no scroll of their own — and, unlike the profile / backpack / support modals, they are not wrapped in .app-modal__card, so they never inherited the base cap either. On a phone their content simply runs off the bottom of the screen with nothing to grab: .qgm-box Quick Game result — reels, result line, the whole provably-fair panel and the share row .rr-pform the account-info reward form — five fields plus a submit .fr-rules-card Free Rain rules .tv-card Trivia Capped against dvh (not vh) for the same reason as the wallet modals: a mobile URL bar that shrinks mid-scroll otherwise re-clips what it just revealed. */ @media (max-width: 860px){ .qgm-box, .rr-pform, .fr-rules-card, .tv-card{ max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* The fair-play panel is the tallest thing inside the Quick Game modal and the part players actually open on purpose, so let it scroll rather than push the rest out. */ .qgm-fair-panel{ max-height:38vh; max-height:38dvh; overflow-y:auto; } } /* ════════ The base modal card had no height cap at all (build 880) ═══════════ .app-modal__card sets width, padding and a pop animation — but nothing about height. Every dialog built on it (profile, level-up, support, promo, confirm…) therefore grows as tall as its content and, on a phone, simply extends past the bottom of the screen. The page behind is locked while a modal is open (body:has(.app-modal.open){overflow:hidden}), so there is nothing to scroll: the overflowing part is unreachable. Two dialogs are deliberately excluded because they already solve it their own way, and adding a second scroll container would produce a nested double scrollbar: .dw-card flex column whose .dw-grid scrolls (see the wallet block above) .canta-modal__card same pattern, capped at min(82vh,720px) */ @media (max-width: 860px){ .app-modal__card:not(.dw-card):not(.canta-modal__card){ max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Keep the close button reachable once the body starts scrolling under it. */ .app-modal__card:not(.dw-card):not(.canta-modal__card) .app-modal__close{ position:sticky; top:0; float:right; z-index:5; } } /* ════════ Why hiding an element with .hidden did nothing (build 883) ═════════ The withdraw modal kept showing "You're withdrawing 500 / You'll receive $5.00" for a SKIN withdrawal, where the amount is decided by the skin, not typed. The JS did set `.hidden = true` on that block — but the hidden ATTRIBUTE only works through the browser's default [hidden]{display:none}, and any author rule beats it: .dw-calc.dw-calc--stack{ display:flex !important; } <- unhideable .dw-wd-field{ display:flex; } <- likewise So the field stayed on screen and the panel contradicted itself. This is the standard fix, and it applies to every element on the site that is hidden this way — the same trap was waiting anywhere else `.hidden` met a display rule. */ [hidden]{ display:none !important; } /* Auditing the rest of the build found this was not a one-off. 17 more elements are hidden in JS with .hidden while a bare class rule gives them a visible display, and unlike .chat-ctx / .chat-pinned / .qgm-overlay / .creator-modal / .chat-rules-modal they never got the per-element `.x[hidden]{display:none}` patch that those did — so they could not be hidden at all: #navGamesMenu the games dropdown #mktPager market paginator #tvModal trivia modal #affPager affiliate paginator #rrPformOv account-info overlay #mktRangeClear price-filter clear #chatReplyBar #chatTriviaBanner #chatMessages #csDrops #ctbImgWrap #ctbReward #depRefTimer #affKeyWrap #cantaTools #rfStripItems #rfdcInfoBox #np2faFmt One rule covers all of them, and any future one, instead of an eighteenth patch. */ /* ════════ SkinDeck component frame (build 891) ═══════════════════════════════ The embed session now carries the site's own theme tokens, so the component paints itself on --bg2 (#10131e) with our gold. That means the iframe no longer needs a dark plate behind it to hide a mismatched palette — it needs the opposite: a border and radius that continue the modal's own surfaces so the seam disappears. */ /* ════════ Room for the component inside our own modal (build 892) ════════════ The wallet modal is 920px with a fixed 320px sidebar, leaving the panel about 570px after padding. That is fine for a crypto form but cramped for a grid of skins — the component ends up two narrow columns and a lot of scrolling, which is the sort of thing that makes an embed feel like a foreign object rather than part of the page. When the SkinDeck frame is mounted the card widens and the sidebar narrows, so the skins get roughly 900px. Everything else (crypto, gift card) is untouched. */ /* :has() is unsupported on older Safari/Firefox builds. The JS also tags the modal, so the same widening happens there without relying on it. */ /* Desktop only. Both declarations carry !important, so without the media guard the phone rule below (100vw, stacked) is competing with a 1200px card and a 260px sidebar purely on source order — which is not something to leave to chance in a file this long. */ @media (min-width:721px){ .dw-modal.sd-wide .dw-card{ max-width:1200px !important; width:min(96vw,1200px) !important; } .dw-modal.sd-wide .dw-grid{ grid-template-columns:260px 1fr; } } @media (max-width: 720px){ /* The mobile rules above already stack the grid; keep them in charge. */ } /* Explicit "clear this credential" checkbox (build 903). The secret fields render empty on purpose — the panel must never print a live key — so a blank submit has to mean KEEP. Clearing therefore needs its own deliberate control rather than an empty box. */ .adm-clear{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:11.5px; color:#8b93a7; cursor:pointer; } .adm-clear input{ width:auto; margin:0; } /* Integrations sub-tabs (build 903). Three providers plus a status block and a trades table were stacked in one continuous scroll; each now gets its own sub-page. The hidden panes still hold live inputs that submit with the same single settings form. */ .adm-subtabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid rgba(140,160,210,.13); } .adm-subtab{ padding:7px 14px; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; color:#aeb6cc; background:rgba(255,255,255,.04); border:1px solid rgba(140,160,210,.14); } .adm-subtab:hover{ background:rgba(255,255,255,.07); color:#dfe4f0; } .adm-subtab.is-on{ color:#1a1206; background:linear-gradient(180deg,#ffd873,#eeb351); border-color:transparent; } .adm-set-wide{ grid-column:1 / -1; } .adm-set-wide textarea{ width:100%; min-height:88px; font-family:var(--fm,monospace); font-size:12px; line-height:1.5; } /* ════════ Inline inside admin hints (build 911) ══════════════════════ style.css:930 sets a GLOBAL `code { display: block }` — meant for the provably-fair panels, where a hash really should sit on its own line. In the admin hints the same rule turns every inline mention (`:`, `api-key`, `callbackUrl`, `parentOrigin`) into a full-width bar, which chops one sentence into four stacked fragments. That is the "jumbled" look in the integrations panel: not broken markup this time, just a global rule reaching somewhere it was never intended to. Scoped back to inline here only. */ .admin-tool-hint code, .adm-set small code, .adm-panel p code, .adm-set-divider code{ display:inline !important; padding:1px 6px; margin:0 1px; border-radius:5px; font-size:.82em; line-height:inherit; white-space:nowrap; background:rgba(0,0,0,.35); border:1px solid rgba(182,170,146,.22); color:#f4cd84; } /* ════════ SkinDeck panel, compact (build 934) ══════════════════════════════ Two full-width banners used to sit between the modal title and the component, so on a laptop the actual item grid started below the fold and the first thing a player saw was advice. One line, smaller, and the frame gets the space back. */ .sd-pick-note.sd-compact{ margin:0 0 8px; padding:7px 10px; border-radius:8px; font-size:11.5px; line-height:1.45; background:rgba(238,179,81,.07); border-left:2px solid rgba(238,179,81,.5); color:#cdd4e4; } .sd-pick-note.sd-compact b{ color:#f1c869; } /* ════════ Give the component the panel (build 937) ═════════════════════════ With the explanatory paragraph shortened and the redundant CTA gone, the remaining chrome above the frame is a title and one line. Tighten their spacing too, so the item grid starts near the top of the modal instead of below the fold. */ .dw-modal .dw-panel:has(.sd-native) .dw-np-note, /* Pointer to the component's own Withdraw tab (build 940). SkinDeck always opens on Deposit and exposes no session option to change it, so the only honest fix is to say so where the player is already looking. */ .sd-pick-note.sd-point{ background:rgba(238,179,81,.13); border-left-color:#eeb351; color:#f1e3c6; } .sd-pick-note.sd-point b{ color:#ffd873; } /* Skeleton shimmer. The BOX itself is defined with .sd-tile below so the two can never disagree — the old version set its own height here, and a skeleton one size and a real tile another is exactly what made the grid jump when data arrived. */ @keyframes sdShimmer{ from{ background-position:180% 0; } to{ background-position:-40% 0; } } .sd-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(140,160,210,.13); font-size:12.5px; color:#a7adbe; } .sd-bar .sd-short{ color:#e08a8a; } @media (max-width:640px){ .sd-grid{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); max-height:min(46dvh,320px); } .sd-tile img, .sd-tile-noimg{ width:54px; height:44px; } } /* ════════ Loading state for the skin pickers (build 969) ═══════════════════ Centred column: spinner, title, one line of context. The first version was a left-aligned bar with an accent stripe down one edge — at panel width that put a 16px spinner beside two lines of text with a large empty space to the right, which is what made it look crooked. Symmetry costs nothing and survives any panel size. */ .sd-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; margin:0 0 10px; padding:16px 14px; border-radius:12px; text-align:center; background:linear-gradient(180deg, rgba(238,179,81,.07), rgba(238,179,81,.03)); border:1px solid rgba(238,179,81,.16); } .sd-loading-tx{ display:flex; flex-direction:column; gap:3px; } .sd-loading-tx b{ font-size:13.5px; color:#f1c869; font-weight:800; letter-spacing:.2px; } .sd-loading-tx em{ font-size:11.5px; color:#8a91a3; font-style:normal; line-height:1.45; } .sd-spin{ width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(238,179,81,.18); border-top-color:#eeb351; animation:sdSpin .7s linear infinite; } @keyframes sdSpin{ to{ transform:rotate(360deg); } } /* Guided deposit-in-progress screen (replaces the bare "Checking with SkinDeck…" line). */ .sd-dep-live{ display:flex; flex-direction:column; gap:12px; padding:4px 2px; } /* Error variant of the deposit screen: a red accent + a clear "!" marker, reusing the same layout so a failed deposit reads as clearly as a successful one (not a fleeting toast). */ .sd-dep-err .sd-dep-live-ttl{ color:#f1a0a0 !important; } .sd-dep-err .sd-status{ border-color:rgba(239,68,68,.28) !important; background:rgba(239,68,68,.06) !important; } .sd-err-x{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:800 14px var(--fu); color:#fff; background:rgba(239,68,68,.85); } .sd-dep-link{ font:700 12px var(--fu); color:#f4cd84 !important; text-decoration:none; align-self:center; margin-left:4px; } .sd-dep-link:hover{ text-decoration:underline; } .sd-dep-live-head{ display:flex; align-items:center; gap:11px; } .sd-dep-live-head .sd-spin{ flex:0 0 auto; } .sd-dep-live-ttl{ font:800 15px var(--fu); color:#f1c869; letter-spacing:.2px; } .sd-dep-live-head.is-ok .sd-dep-live-ttl{ color:#7ee0a6; } .sd-dep-live-head.is-warn .sd-dep-live-ttl{ color:#e8b06a; } .sd-dep-live .sd-status{ font-size:12.5px; line-height:1.5; color:#c3cee0; background:rgba(255,255,255,.03); border:1px solid rgba(238,179,81,.14); border-radius:10px; padding:9px 11px; } .sd-dep-live .sd-status a{ color:#f4cd84; font-weight:700; } .sd-dep-live .sd-detail{ display:inline-block; margin-left:4px; font-style:normal; font-size:11px; color:#8a91a3; text-transform:lowercase; } /* Completed-deposit success block: one green check + a single clear line, replacing the old "Completed … COMPLETED" (message plus the raw provider status word). */ .sd-done{ display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:11px; background:rgba(78,214,142,.09); border:1px solid rgba(78,214,142,.30); } .sd-done-check{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0c1b12; background:linear-gradient(180deg,#66e6a2,#37c46e); box-shadow:0 3px 10px rgba(55,196,110,.35); animation:sdDonePop .32s cubic-bezier(.34,1.56,.64,1) both; } .sd-done-text{ font:700 13px var(--fu,system-ui); color:#8ff0bb; line-height:1.4; } @keyframes sdDonePop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } } .sd-dep-steps{ margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:7px; } .sd-dep-steps li{ font-size:12px; line-height:1.5; color:#a7adbe; } .sd-dep-steps li b{ color:#e7ecf6; font-weight:700; } .sd-dep-actions{ display:flex; flex-direction:column; gap:8px; margin-top:2px; } .sd-dep-actions .qg-create-btn{ text-align:center; text-decoration:none; } .sd-dep-steam{ display:block; } .qg-create-btn.sd-ghost{ background:rgba(255,255,255,.05) !important; color:#c3cee0 !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:none !important; } .qg-create-btn.sd-ghost:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; } @media (prefers-reduced-motion: reduce){ .sd-spin{ animation:none; border-top-color:#eeb351; opacity:.7; } .sd-tile.sd-skel{ animation:none; } } /* Unaffordable is now a label, not a lock: still dimmed, still clickable. */ .sd-tile.sd-cant{ opacity:.5; cursor:pointer; } .sd-tile.sd-cant:hover{ background:#1b2132; border-color:#3a4258; } .sd-tile.sd-cant.is-on{ border-color:#e08a8a; background:rgba(224,138,138,.10); box-shadow:0 0 0 1px rgba(224,138,138,.35) inset; } /* Market pager (build 965). Pages rather than one large fetch, so a player can reach the whole catalogue instead of whatever an arbitrary cap happened to include. */ .sd-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; } .sd-pg{ padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; background:#151926; border:1px solid #2f3648; color:#cdd4e4; } .sd-pg:hover:not(:disabled){ background:#1b2132; border-color:#3a4258; } .sd-pg:disabled{ opacity:.35; cursor:default; } .sd-pg-n{ font-size:12px; color:#8a91a3; min-width:60px; text-align:center; } /* ════════ Skin picker, tidied (build 985) ══════════════════════════════════ Three things were wrong rather than ugly: · two .sd-filter blocks from different builds were overriding each other, so the toolbar got whichever set of paddings happened to come last; · the skeleton tile was a fixed 112px while a real tile is sized by its contents, so the grid jumped the moment data arrived — the "kayma" that is visible on every open; · the toolbar was a single flex row, which on a phone squeezed the search box to nothing instead of wrapping. The tile is now a fixed aspect box and the skeleton uses the same one, so nothing moves. */ .sd-grid{ display:grid; gap:10px; padding:2px; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); max-height:min(50dvh, 400px); overflow-y:auto; overscroll-behavior:contain; } .sd-tile, .sd-tile.sd-skel{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:6px; padding:10px 8px 9px; min-height:126px; box-sizing:border-box; border-radius:12px; text-align:center; font:inherit; background:#151926; border:1px solid #242b3a; color:#cdd4e4; transition:border-color .12s ease, background .12s ease, transform .12s ease; } .sd-tile{ cursor:pointer; } /* Shimmer, declared AFTER the shared box above: both set `background`, and this rule used to sit earlier in the file, so the flat colour won and the skeleton never actually shimmered. Ordering was doing the deciding — which is why the duplicate mattered. */ .sd-tile.sd-skel{ cursor:default; border-color:#1d2333; background:linear-gradient(100deg,#151926 30%,#1c2233 50%,#151926 70%); background-size:220% 100%; animation:sdShimmer 1.1s linear infinite; } .sd-tile:hover{ background:#1b2132; border-color:#3a4258; transform:translateY(-1px); } .sd-tile.is-on{ border-color:#eeb351; background:rgba(238,179,81,.10); box-shadow:0 0 0 1px rgba(238,179,81,.35) inset; transform:none; } .sd-tile img, .sd-tile-noimg{ width:100%; height:58px; object-fit:contain; } .sd-tile-noimg{ border-radius:8px; background:rgba(255,255,255,.04); } .sd-tile-nm{ font-size:11px; line-height:1.3; color:#a7adbe; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .sd-tile-v{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:12.5px; font-weight:800; color:#f1c869; } /* ── Not-depositable skins: shown but greyed and stamped with the reason, never selectable. Hiding them (the old behaviour) made chunks of an inventory silently vanish; now the player sees everything they own and simply cannot pick what SkinDeck will not take. ── */ .sd-tile-no{ position:relative; cursor:not-allowed; background:linear-gradient(180deg,#12151f,#0f121b); border-color:#20222e; } .sd-tile-no img{ filter:grayscale(1) brightness(.6); opacity:.72; } .sd-tile-no .sd-tile-nm{ color:#666d80; } .sd-tile-no:hover{ background:linear-gradient(180deg,#12151f,#0f121b); border-color:#20222e; transform:none; box-shadow:none; } .sd-tile-flag{ position:absolute; top:6px; left:50%; transform:translateX(-50%); padding:2.5px 7px; border-radius:6px; font-size:8.5px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; z-index:2; pointer-events:none; color:#ffdede; background:rgba(176,64,64,.94); border:1px solid rgba(230,120,120,.65); box-shadow:0 2px 7px rgba(0,0,0,.45); } .sd-tile-noval{ font-style:normal; color:#6b7285; font-weight:700; } /* ── A little polish on the picker tiles ── */ .sd-tile{ background:linear-gradient(180deg,#171c2b,#131824); } .sd-tile:not(.sd-skel):not(.sd-tile-no):hover{ box-shadow:0 6px 16px rgba(0,0,0,.34); } .sd-tile.is-on{ background:linear-gradient(180deg,rgba(238,179,81,.17),rgba(238,179,81,.05)); box-shadow:0 0 0 1px rgba(238,179,81,.45) inset, 0 5px 16px rgba(238,179,81,.13); } .sd-tile-v{ padding:2px 9px; border-radius:999px; background:rgba(241,200,105,.10); } .sd-tile-no .sd-tile-v{ background:rgba(255,255,255,.03); color:#6b7285; } /* Toolbar: wraps instead of crushing, and the search box always keeps a usable width. */ .sd-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; } .sd-filter input[type="search"]{ flex:1 1 170px; min-width:0; padding:9px 12px; border-radius:10px; background:#0e1119; border:1px solid #2f3648; color:#e8eaf0; font-size:12.5px; } .sd-filter input[type="search"]:focus, .sd-max:focus, .sd-sort:focus{ outline:none; border-color:#4a5570; } .sd-max{ width:104px; flex:0 0 104px; padding:9px 12px; border-radius:10px; background:#0e1119; border:1px solid #2f3648; color:#e8eaf0; font-size:12.5px; } .sd-sort{ flex:0 0 auto; padding:9px 10px; border-radius:10px; background:#0e1119; border:1px solid #2f3648; color:#e8eaf0; font-size:12.5px; } .sd-afford{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#a7adbe; cursor:pointer; white-space:nowrap; user-select:none; } .sd-afford input{ width:auto; margin:0; cursor:pointer; } .sd-refresh{ flex:0 0 auto; min-width:34px; height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; justify-content:center; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; line-height:1; white-space:nowrap; background:#151926; border:1px solid #2f3648; color:#cdd4e4; } .sd-refresh .sd-refresh-tx{ font-size:12.5px; } .sd-refresh:hover{ background:#1b2132; border-color:#3a4258; } .sd-refresh.is-busy{ opacity:.5; cursor:default; } .sd-filter #sdCount, .sd-filter #sdInvCount{ font-size:11.5px; color:#8a91a3; white-space:nowrap; margin-left:auto; } @media (max-width:560px){ .sd-grid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); max-height:min(44dvh,300px); } .sd-tile, .sd-tile.sd-skel{ min-height:112px; } .sd-tile img, .sd-tile-noimg{ height:48px; } .sd-filter input[type="search"]{ flex:1 1 100%; } .sd-filter #sdCount, .sd-filter #sdInvCount{ margin-left:0; } } /* Footer row of the trade-URL prompt — the one place that still uses it after the list picker was replaced by the grid. */ .sd-pick-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; } .sd-pick-foot .sd-short{ color:#e08a8a; } /* ════════ Picker toolbar on small phones (build 987) ═══════════════════════ At 560px the search box already takes a full row, but the second row still carried a fixed-width price box, a select, a checkbox label and a button — around 420px of content in roughly 288px of usable width on a 320px screen. It wrapped rather than overflowed, so nothing was broken, but each control ended up on its own line and the toolbar was taller than the grid it filtered. Two columns instead, with the price box no longer pinned to a fixed width. */ /* The pager and the action bar need the same treatment: three items in a row is fine at tablet width and cramped on a phone, where the button matters more than the label. */ /* An empty message slot must not reserve height (build 995). #wdMsg has to stay in the DOM because failures are written into it, but in the skin flow it is empty on open and its min-height plus margin was part of the gap under the panel title. Collapsed while empty, full height again the moment it carries text. */ .tip-msg.tip-msg--collapse:empty{ min-height:0; margin:0; } .dw-main .dw-panel .dw-title{ margin-bottom:10px; } /* Typable page number (build 1000). Sized for two digits so it does not look like a text field, and the browser's number spinners are hidden — the arrows are the Previous/Next buttons either side of it. */ .sd-pg-n{ display:inline-flex; align-items:center; gap:6px; } .sd-pg-in{ width:52px; padding:5px 6px; border-radius:8px; text-align:center; background:#0e1119; border:1px solid #2f3648; color:#e8eaf0; font-size:12px; font-weight:700; -moz-appearance:textfield; appearance:textfield; } .sd-pg-in::-webkit-outer-spin-button, .sd-pg-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .sd-pg-in:focus{ outline:none; border-color:#eeb351; } /* Total page count beside the page box (build 1004). Only shown when the server actually knows it — with a price band the result is fully counted, without one it is not, and printing a guess there would be worse than printing nothing. */ .sd-pg-of{ font-style:normal; font-size:11.5px; color:#8a91a3; } /* ════════ Picker toolbar rows, made explicit (build 1006) ══════════════════ Five controls now share this bar — search, a min–max band, a sort select, an affordable toggle and a refresh button — and on a phone they were landing wherever the grid put them: the sort ended up beside the toggle and squeezed it. Each control gets a stated row, so adding a sixth later cannot quietly rearrange the other five. */ /* Between phone and desktop the bar has room for two rows rather than six lines. */ @media (min-width:421px) and (max-width:700px){ .sd-filter input[type="search"]{ flex:1 1 100%; } .sd-sort{ flex:1 1 auto; } } /* ════════ Picker toolbar and grid on small phones (build 1006) ══════════════ ONE block, not five. Each build that touched the phone layout appended its own @media (max-width:420px), so five of them ended up overlapping and the result depended on which came last — the same accident that made the toolbar look different depending on which rule won. Merged, with every control given a stated row so adding another later cannot quietly rearrange the rest. */ /* Price band: two narrow boxes joined by a dash so they read as one control rather than two unrelated fields sharing a row. */ .sd-band{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; } .sd-band .sd-max{ width:74px; flex:0 0 74px; } .sd-band em{ font-style:normal; color:#8a91a3; font-size:12px; } /* Total page count beside the page box. Only shown when the server knows it. */ @media (max-width:420px){ .sd-filter{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; } .sd-filter input[type="search"]{ grid-column:1 / -1; } .sd-band{ grid-column:1 / -1; } .sd-band .sd-max{ flex:1 1 auto; width:auto; min-width:0; } .sd-max{ width:auto; flex:initial; min-width:0; } .sd-sort{ grid-column:1 / -1; width:100%; min-width:0; } .sd-afford{ grid-column:1; justify-self:start; } .sd-refresh{ grid-column:2; justify-self:end; } .sd-filter #sdCount, .sd-filter #sdInvCount{ grid-column:1 / -1; text-align:right; margin-left:0; } .sd-pg-in{ width:46px; } .sd-pager{ gap:8px; } .sd-pg{ padding:6px 9px; font-size:11.5px; } .sd-bar{ flex-wrap:wrap; gap:8px; } .sd-bar span{ flex:1 1 100%; } .sd-bar .qg-create-btn{ width:100%; } } /* Between phone and desktop the bar has room for two rows rather than six lines. */ @media (min-width:421px) and (max-width:700px){ .sd-filter input[type="search"]{ flex:1 1 100%; } .sd-sort{ flex:1 1 auto; } } /* Provider detail under a failure message (build 1008). Secondary on purpose: the sentence above it is for the player, this line is what gets screenshotted to us. */ .sd-detail{ display:inline-block; margin-top:5px; font-style:normal; font-size:11px; color:#8a91a3; word-break:break-word; } /* Footer count under the grid (build 1011). Sits below the action bar because that is where you end up after scrolling, and it is information rather than a control. */ .sd-foot{ margin-top:8px; padding-top:8px; text-align:center; font-size:11.5px; color:#8a91a3; border-top:1px solid rgba(140,160,210,.10); } /* Promo bonus in the deposit summary (build 1013). Green because it is money being added, and inline with the running total so the two read as one figure. */ .sd-bonus{ color:#7fd39b; font-weight:700; } /* ════════ Quick Game: the empty bar under the title (build 1014) ═══════════ .qg-top carries a card look — gradient, gold border, radius, padding, shadow — because it used to hold the stake controls. On this page it holds only the legacy coin inputs, which are display:none and exist purely so the game client's element references still resolve. The result was a styled bar with nothing in it sitting directly under the heading. Stripped to nothing visible, and NOT removed from the DOM: the hidden inputs inside it have to stay reachable. */ .qg-page .qg-top.qg-top-info{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; min-height:0 !important; border-radius:0 !important; } /* Market/inventory card sizing lives in assets/market.css, NOT here. A note rather than a rule, because this is where I got it wrong. I measured .skin-img and .skin-skel with style.css and patch94.css loaded, saw no aspect-ratio, concluded the skeleton could not match the card, and "fixed" it with a 16/11 ratio and a padding trick. market.css — loaded after both, and the file that actually owns these classes — already sets .skin-img{aspect-ratio:1/1} and .skin-skel{aspect-ratio:1/1.5}. 1/1 is right: Steam serves these images at 360x360, so a wider box would have left a gap either side of every skin. There was no bug; my measurement was missing a stylesheet. */ /* ════════ Profile: Steam trade URL editor (build 1020) ═════════════════════ */ .pf2-trade{ background:rgba(255,255,255,.02); border:1px solid rgba(140,160,210,.14); border-radius:14px; padding:14px 16px; margin:0 0 22px; } .pf2-trade-note{ margin:0 0 10px; font-size:12.5px; line-height:1.5; color:#8a91a3; } .pf2-trade-note a{ color:#eeb351; } .pf2-trade-row{ display:flex; gap:9px; flex-wrap:wrap; } .pf2-trade-row input{ flex:1 1 320px; min-width:0; padding:10px 12px; border-radius:10px; background:#0e1119; border:1px solid #2f3648; color:#e8eaf0; font:12px/1.4 ui-monospace,Menlo,Consolas,monospace; } .pf2-trade-row input:focus{ outline:none; border-color:#4a5570; } .pf2-trade-save{ flex:0 0 auto; padding:10px 20px; border:0; border-radius:10px; cursor:pointer; background:linear-gradient(180deg,#ffd873,#eeb351); color:#1a1206; font-weight:800; font-size:13px; } .pf2-trade-save:disabled{ opacity:.6; cursor:default; } .pf2-trade-msg{ min-height:0; margin-top:8px; font-size:12px; } .pf2-trade-msg.is-ok{ color:#7fd39b; } .pf2-trade-msg.is-err{ color:#e08a8a; } @media (max-width:560px){ .pf2-trade-save{ width:100%; } } /* Profile level badge: a glow matching whatever tier colour the palette resolved, so the badge sits in its colour rather than wearing a gold shadow from a previous design. */ .pf2-lvl[class*="lvt"]{ box-shadow:0 3px 9px color-mix(in srgb, var(--lvc,#8593ad) 42%, transparent); } /* Leaderboard and affiliate level chips: see partials.php. The override lives in the palette block there, not here — that block is the last stylesheet on the page, so a rule in this file loses to it no matter how specific it is. I put it here first and the leaderboard chip stayed gold, which is how I found out. */ /* Quick Game's minimum chip sits inside the section label, so the label has to be a flex row rather than plain text — otherwise the chip inherits the label's letter-spacing and sits on the baseline instead of centred with it. */ .qg-section-label{ display:inline-flex; align-items:center; gap:9px; } .qg-section-label .stake-bounds{ letter-spacing:0; } /* ════════ Trivia banner (build 1062) ══════════════════════════════════════ Built to match .chat-rain as it actually RENDERS — measured, not copied from its rule. Twice now I have styled something by reading a base rule and been wrong, because both .rfd-card and .chat-rain are overridden further down style.css. Rain's rule says a warm gold gradient; what you see is a dark teal panel with a teal border. Matching the rule would have produced a third look that resembles nothing on the page. Rain is the right thing to match: it sits in this same column, at the same width and margins, and is the same kind of announcement. The violet stays only on the badge so trivia is still tellable from rain at a glance. Layout is unchanged and remains the point: label and prize on one row, question full-width below and wrapping. The original single-row version cut the question with an ellipsis. */ .chat-trivia-banner{ position:relative; overflow:hidden; display:flex !important; flex-direction:column; align-items:stretch; gap:9px; margin:10px 12px 6px; padding:13px 14px; border-radius:14px; border:1px solid var(--vio-line) !important; /* Match the Chat Rules card so trivia reads as part of the same surface family (the user asked for the trivia SECTION background to look like Chat Rules — dark violet, not the old teal). */ background:linear-gradient(180deg, rgba(30,22,58,.98), rgba(18,15,36,.99)) !important; box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); } /* A still highlight, not rain's drifting one: a question stays on screen far longer than a rain announcement, and a moving glow behind text you are trying to read is tiring. */ .chat-trivia-banner::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:140%; pointer-events:none; background:radial-gradient(closest-side, rgba(167,139,250,.12), transparent 70%); } .chat-trivia-banner > *{ position:relative; z-index:1; } .ctb-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } /* The one thing carried over from the old look, so trivia is not mistaken for rain. */ .chat-trivia-banner .ctb-badge{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font:800 10.5px/1 var(--fu); letter-spacing:.7px; text-transform:uppercase; color:#d8c9ff; background:rgba(139,92,246,.20); border:1px solid rgba(167,139,250,.38); padding:4px 9px; border-radius:999px; } /* Rain shows its pot big and white; the prize does the same, at the size rain's title uses. */ .chat-trivia-banner .ctb-reward{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font:800 16px var(--fu); color:#fff; } /* Rain's title colour for the question — the readable gold on this background. */ .chat-trivia-banner .ctb-q{ display:block; width:100%; min-width:0; white-space:normal; overflow:visible; text-overflow:clip; font-size:13px; line-height:1.5; font-weight:600; color:#ffe6a8; overflow-wrap:anywhere; } /* hidden BEATS every display rule above — and must come AFTER them to do it. `display:flex !important` on the banner defeated the HTML hidden attribute, which works by applying display:none. So box.hidden=true did nothing: an answered trivia stayed on screen until someone pressed F5, still inviting answers. On a live gambling site that is not a cosmetic fault. The empty pill in the same report was the same bug on .ctb-reward. Two rules of equal specificity and importance are decided by order, so this sits last. */ .chat-trivia-banner[hidden]{ display:none !important; } .chat-trivia-banner [hidden]{ display:none !important; } /* The daily task, made to look like one (build 1040). Every other task on this page is claimed once and then greys out; this one returns tomorrow, so it gets a warmer border, a faint glow and a badge that stands out rather than blending into the row. */ .rr-task.is-daily{ border-color:rgba(238,179,81,.42) !important; background:linear-gradient(140deg, rgba(238,179,81,.10), rgba(238,179,81,.02)) !important; box-shadow:0 0 0 1px rgba(238,179,81,.10), 0 6px 20px rgba(238,179,81,.08); } .rr-task.is-daily .rr-task-badge{ background:linear-gradient(180deg,#ffd873,#eeb351); color:#1a1206; font-weight:800; letter-spacing:.3px; } .rr-task.is-daily .rr-task-ico{ color:#ffd873; } /* Post-deposit status line (build 1052). Sits under the confirmation and fills in what SkinDeck reports about the trade, because "created" alone does not tell the player whether an offer is coming. */ .sd-status{ margin:8px 0 0; padding:9px 11px; border-radius:10px; font-size:12px; line-height:1.5; color:#a7adbe; background:rgba(255,255,255,.03); border:1px solid rgba(140,160,210,.14); } .sd-status a{ color:#eeb351; font-weight:700; } .sd-status .sd-detail{ display:inline-block; margin-left:4px; font-style:normal; font-size:10.5px; color:#6f7789; letter-spacing:.4px; } /* ════════ Empty avatar slots (build 1056) ═════════════════════════════════ The initial-letter fallbacks are gone from every avatar in the games. Most of those slots were the itself, so removing the image leaves nothing — correct. But a few are WRAPPERS with their own background and border, and an empty one of those is a bordered circle with a hole in it, which is no better than the letter it replaced. A muted silhouette instead: it reads as "a player with no picture" rather than as a rendering fault, and it is the same shape whoever is missing. Applied only when the slot is genuinely empty, so a real picture is never covered. */ .qg-rcell-av:empty, .rp-ban-av:empty, .rr-c-player .rr-av-slot:empty{ background: radial-gradient(circle at 50% 38%, rgba(160,175,205,.30) 0 22%, transparent 23%), radial-gradient(ellipse 46% 34% at 50% 88%, rgba(160,175,205,.30) 0 60%, transparent 61%), #1b2230; } .qg-rcell-av:empty{ border-color:rgba(150,170,210,.28); } .rp-ban-av:empty{ border-color:rgba(238,179,81,.30); } /* Deposit calculator: the bonus chip now sits beside the "You're buying" label (build 1064). It used to sit inside the value row, which centres its contents — so the coin figure was pushed off-centre while the dollar figure above stayed centred, and the two never lined up. Beside the label it costs the value row nothing. */ .dw-calc--stack .dw-calc-lbl{ display:inline-flex; align-items:center; gap:7px; } .dw-calc--stack .dw-calc-lbl .dw-calc-bonus{ font-size:11.5px; font-weight:800; color:#5cf08f; letter-spacing:.2px; background:rgba(92,240,143,.12); border:1px solid rgba(92,240,143,.28); border-radius:999px; padding:2px 8px; } /* hidden must beat the inline-flex above — order decides between equal rules. */ .dw-calc--stack .dw-calc-lbl .dw-calc-bonus[hidden]{ display:none !important; } /* ════════ Open mobile menu hides the floating buttons (build 1073) ═══════ The nav opens at z-index 1400 and can fill the viewport, so the Raffles and Chat pills sat UNDER it: visible, and impossible to press. A control you can see but cannot use is worse than one that is not there, and the chat pill already had this treatment for its own drawer (body.chat-open) — the menu simply never got it. */ body.nav-open .rfd-mtoggle, body.nav-open .chat-toggle{ opacity:0 !important; pointer-events:none !important; } /* ════════ Touch targets on phones (build 1074) ═══════════════════════════ A handful of controls are sized for a mouse pointer: 16–28px squares. That is fine with a cursor and awkward with a thumb — the usual guidance is ~44px, and these are the ones that actually appear on a phone (close buttons and small icon actions), not admin-only chrome. The VISUAL size is left alone; only the hit area grows, via padding plus a negative margin that cancels it. Nothing moves, and the button becomes reachable. */ @media (max-width:820px){ .chat-head #chatClose, .chat-clear-btn.chat-clear-icon, .fr-rules-close, .rfd-info-btn, .rfd-mclose{ position:relative; padding:10px !important; margin:-10px !important; background-clip:content-box; /* keep the painted box the original size */ } /* The pill-shaped toggles are tall enough already; these two just sit tight against the screen edge, where a thumb tends to land slightly outside. */ .rfd-mtoggle, .chat-toggle{ min-height:44px; } } /* ════════ Chat open hides the Raffles pill, up to 1400px (build 1087) ════ Both are fixed to the bottom-right below 1400px: the chat panel is bottom-anchored and the Raffles pill sits at right:14px / bottom:14px. The chat's own close button then lands on top of the pill, so tapping Raffles hits the X instead — the pill is visible and unusable. A rule for exactly this already existed but only up to 980px, which left the 981–1400px band uncovered: wide enough for the chat to be a panel rather than a sheet, narrow enough for the two to share the corner. Same treatment as the mobile sheet, over the whole range where the overlap is possible. */ @media (max-width:1400px){ body.chat-open .rfd-mtoggle{ opacity:0 !important; pointer-events:none !important; } } /* ════════ Withdraw calculator: line the two figures up (build 1101) ══════ The two boxes were laid out differently, so the numbers sat at different positions: · the coin input was centred, the $ input was overridden to text-align:left · the prefixes are different widths — a fixed 19px coin icon vs an auto-width "$" set at 25px — so even matching text-align would start the digits in different places Both now centre, and both prefixes reserve the same width, so "500" and "5.00" sit on the same axis. The ≈ between them is centred on that axis too rather than floating at the box edge, which is what made it look stranded. */ .dw-calc-val input#wdUsd, .dw-calc-val input#dwUsd{ text-align:center !important; } .dw-calc-val > .coin-ico, .dw-calc-val > .dw-pay-cur{ width:22px !important; min-width:22px; height:22px; display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 22px !important; } /* The "$" is a glyph, not an icon: keep it optically the same size as the digits it labels without letting its box grow wider than the coin icon's. */ .dw-calc-val > .dw-pay-cur{ font-size:19px !important; line-height:1; } .dw-calc--stack .dw-calc-eqv{ align-self:center !important; width:100%; text-align:center; margin:0 !important; opacity:.55; } /* ════════ Centred page headers: the sub-line too (build 1104) ════════════ Since build 309 the big

is hidden site-wide and the eyebrow, centred, acts as the page header. The container gets text-align:center — but .page-head-sub carries max-width:560px with margin:7px 0 0, so the 560px block itself stays hard against the left edge and only its text centres inside it. On a wide screen that reads as a centred title with a stray line of text hanging off to the left, which is exactly what the affiliate header looked like. Centre the block as well. Affects the three pages that use a sub-line (activity, affiliate, cases) — all three had the same mismatch. */ .page-head-sub{ margin-left:auto !important; margin-right:auto !important; } /* ════════ page-hero headers get the same treatment as page-head (build 1105) The build-309 rules that centre a page header and enlarge its eyebrow are keyed on `div:has(> h1)`. A
is not a
, so the three pages that wrap their header in
— rewards, admin, raffle — were skipped: their eyebrow stayed at the base 10px while every other page showed 14px, and they were noticeably smaller than the rest. Matching sections too puts every page header on the same footing. */ section:has(> h1){ text-align:center !important; } section:has(> h1) > .eyebrow{ display:inline-flex !important; align-items:center; font-size:14px !important; letter-spacing:.16em; } /* ════════ Integrations: show what is actually set (build 1117) ═══════════ Secret fields render blank on purpose — a stored API key must not end up in the DOM. The side effect was a panel that looked identical whether it was configured or untouched, so there was no way to tell whether the inputs did anything at all. Two signals now: a per-provider badge (computed server-side, see admin.php) and a marker on each secret input that already has a value stored. */ .adm-int-status{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px; padding:11px 13px; border:1px solid var(--ln); border-radius:12px; background:rgba(255,255,255,.02); font-size:12.5px; color:var(--t2); } .adm-int-status > span{ display:inline-flex; align-items:center; gap:7px; } .adm-int-badge{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; } .adm-int-badge.on { color:#4ade80; background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.34); } .adm-int-badge.set { color:var(--gold2); background:rgba(238,179,81,.10); border-color:rgba(238,179,81,.30); } .adm-int-badge.off { color:var(--t3); background:rgba(255,255,255,.04); border-color:var(--ln); } /* A stored secret: the box stays empty (nothing to leak) but says so. */ .adm-set input[data-saved="1"]{ border-color:rgba(74,222,128,.42) !important; background:rgba(74,222,128,.05) !important; } .adm-set input[data-saved="1"]::placeholder{ color:#4ade80; opacity:.85; } /* ════════ Rustpot: replay map is the SAME SIZE as the live one (build 1132) Live and replay showed the same round in different arrangements. Build 1121 blamed the marker size and made the avatars a percentage of the map — that was the wrong fix: it changed how the pictures look, which was never the complaint, and it left the underlying difference in place. The real cause is the container. The map is ~520px in the page column and up to 620px inside the watch modal, and player positions are percentages, so the same coordinates spread further apart on the wider map. Pin the replay map to the live width and both views draw identically — positions AND pictures, with the avatars back at their original fixed size. */ /* The live map is NOT a fixed width — it fills its column above 860px and is capped at 520px below. Pinning the replay to one number would just move the mismatch to the other breakpoint. Match the watch card's width to the map column instead, so the map inside it resolves to the same size the live one does at any viewport. 620px was the card's own figure and is what made the replay map wider than the live one. */ .cf-watch-card{ max-width:520px !important; } .cf-watch-stage .rp-map{ max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } @media (min-width:861px){ /* Above the breakpoint the live map fills a column that is itself wider than 520px, so the card follows it up rather than staying pinned. */ .cf-watch-card{ max-width:700px !important; } } /* ════════ Chat header: the close button stops covering the count (1124) ══ The header is a nowrap flex row: title, online count, then the action buttons. On a narrow panel the row runs out of width and the actions — which are flex:0 0 auto and therefore never shrink — sit on top of the count instead of pushing it aside. Giving the count its own non-shrinking slot and letting the TITLE absorb the squeeze fixes the order of priority: the word "Chat" can be clipped, the number of people online and the close button cannot. */ @media (max-width:900px){ .chat-head{ min-width:0; } .chat-head .chat-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; } .chat-head .chat-online{ flex:0 0 auto !important; margin-right:6px; white-space:nowrap; } .chat-head .chat-head-actions{ flex:0 0 auto; margin-left:0; } } /* ════════ Waiting List panel is hidden until someone is queued (build 1125) It used to show a large "Queue is empty" card — icon, heading and two lines of explanation — which is a lot of furniture for "nothing is happening". The panel now starts hidden and the poll reveals it when the first player joins the queue (app.js). Hidden by default here so it is not visible during the first paint either, before any poll has run. */ .center-waiting[hidden]{ display:none !important; } .center-waiting:not([hidden]){ display:block; } /* ════════ Raffles sort/filter bar (build 1375). A compact chip row under the "Raffles" header letting members reorder the active list: soonest-ending (default), prize high, prize low. Purely client-side reorder (see partials.php render()). Sits between .rfd-head and .rfd-body, sticky so it stays visible while the list scrolls. Wraps cleanly on the narrow mobile drawer. */ .rfd-sortbar{ display:flex; align-items:center; flex-wrap:nowrap; gap:6px; padding:9px 12px; flex:0 0 auto; overflow:hidden; border-bottom:1px solid var(--ln, rgba(238,179,81,.14)); background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)); } .rfd-sort-lbl{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--t3, #8b93b5); margin-right:2px; flex:0 0 auto; white-space:nowrap; } .rfd-sort-chip{ appearance:none; cursor:pointer; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:700; line-height:1; padding:6px 11px; border-radius:999px; color:#c3cee0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition:background .15s, border-color .15s, color .15s, transform .1s; } .rfd-sort-chip:hover{ background:rgba(238,179,81,.10); border-color:rgba(238,179,81,.30); color:#ffe6a8; } .rfd-sort-chip:active{ transform:translateY(1px); } .rfd-sort-chip.is-active{ color:#241704; background:linear-gradient(180deg,#f4cd84,#eab351); border-color:rgba(238,179,81,.55); box-shadow:0 2px 8px rgba(238,179,81,.22); } /* Mobile: tighter so all three chips + label fit the narrow drawer on one line in every language (Turkish/Russian labels are longer — chips shrink with ellipsis rather than wrapping). */ @media(max-width:760px){ .rfd-sortbar{ padding:8px 10px; gap:4px; } .rfd-sort-chip{ font-size:11px; padding:6px 9px; } .rfd-sort-lbl{ font-size:10px; margin-right:1px; } } /* Low-fee coin hint in the crypto deposit panel — steers players to TRX/LTC so a small deposit clears NowPayments' per-coin minimum (USDT TRC20's minimum spiked with Tron fees). */ .dw-coin-hint{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 4px; padding:10px 12px; background:rgba(238,179,81,.08); border:1px solid rgba(238,179,81,.28); border-radius:10px; font-size:12.5px; line-height:1.45; color:var(--t2,#a7adbe); } .dw-coin-hint b{ color:var(--gold2,#f4cd84); font-weight:700; } .dw-coin-hint-ico{ flex:0 0 auto; font-size:14px; color:var(--gold,#eeb351); line-height:1.3; } /* Build 1531 — compact Steam anti-alt requirement next to the Bonus Rewards lead. */ .rw-bonus-lead{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rw-steam-req{display:inline-flex;align-items:center;white-space:nowrap;padding:2px 8px;border-radius:999px;border:1px solid rgba(238,179,81,.28);background:rgba(238,179,81,.08);color:var(--gold2,#eeb351);font-size:11px;font-weight:800;line-height:1.45;letter-spacing:.02em} @media(max-width:560px){.rw-steam-req{font-size:10.5px;padding:2px 7px}}