/* BingoX — viewer flair: ONE stylesheet, loaded by every surface that can show a flair (the shop, /cards, and the overlay's spotlight and win banner). Keeping it in one file is what stops a flair looking like three different things depending on where you see it. THE CONTRACT: a flair is a class `fl-` where is the catalog id in lib/flair.js. It paints two things and nothing else: · a MARKED cell .lc-c.on.fl-x / .clcell.on1.fl-x (overlay) · a NAMEPLATE .fl-name.fl-x Everything is expressed through the --fl-* variables below, so a new flair is usually four lines and no new rules. An unknown class paints nothing, which is exactly how BingoX looked before flair existed. */ /* Default: no flair. The stock teal daub, restated here so a flair rule and the plain rule can never drift apart. */ :root{ --fl-a:#96f5e4; /* daub highlight */ --fl-b:#22e0c8; /* daub body */ --fl-ink:#06121a; /* the number sitting on the daub */ --fl-name:#e8ecf4; /* nameplate text */ --fl-glow:transparent; /* optional bloom around a daub */ } .fl-rookie { --fl-a:#ffb46b; --fl-b:#ff7828; --fl-ink:#1a0c02; --fl-name:#ffb46b; --fl-glow:rgba(255,120,40,.5) } .fl-neon { --fl-a:#b8ffcf; --fl-b:#25f58a; --fl-ink:#032611; --fl-name:#5cffa8; --fl-glow:rgba(37,245,138,.75) } .fl-frost { --fl-a:#dff3ff; --fl-b:#5cc8ff; --fl-ink:#04223a; --fl-name:#9adcff; --fl-glow:rgba(92,200,255,.6) } .fl-gold { --fl-a:#ffe9a8; --fl-b:#f0b429; --fl-ink:#2a1a00; --fl-name:#ffd76a; --fl-glow:rgba(240,180,41,.7) } .fl-vhs { --fl-a:#ff9ce6; --fl-b:#8f7bff; --fl-ink:#180a2a; --fl-name:#d8a8ff; --fl-glow:rgba(143,123,255,.65) } .fl-void { --fl-a:#6b4fd8; --fl-b:#160d2e; --fl-ink:#efe6ff; --fl-name:#b39aff; --fl-glow:rgba(122,80,230,.8) } /* Champion is iridescent rather than "gold but brighter": at 400 credits it sits beside Gold Rush in the shop, and two premium flairs that read the same at a glance is a shop that sells neither. Its gradient is overridden below. */ .fl-champion{ --fl-a:#fff0fb; --fl-b:#ffd76a; --fl-ink:#25102b; --fl-name:#ffd76a; --fl-glow:rgba(255,180,220,.85) } /* ── the upper ladder (2026-08-20) ─────────────────────────────────────────── 550 up to 1500. The rule that keeps this cheap: a rung may spend as much as it likes on STATIC paint (gradients, rings, insets all composite for free), but anything that MOVES is gated to `.lc-card.hot` / `.clgrid.lead` the way Champion already is. 25 cells x every player in a lobby x a repaint every couple of seconds is the budget, and a cosmetic must never be why a stream drops frames. */ .fl-ember { --fl-a:#ff8c3a; --fl-b:#2b0f08; --fl-ink:#ffd9b8; --fl-name:#ff9b52; --fl-glow:rgba(255,110,40,.75) } .fl-toxic { --fl-a:#e8ff6b; --fl-b:#4faa10; --fl-ink:#14240a; --fl-name:#cdff5c; --fl-glow:rgba(180,255,60,.8) } .fl-circuit { --fl-a:#7fffd4; --fl-b:#05312c; --fl-ink:#d6fff4; --fl-name:#5fe6c4; --fl-glow:rgba(60,240,200,.7) } .fl-sakura { --fl-a:#ffe3ef; --fl-b:#ff8fb8; --fl-ink:#3d0f22; --fl-name:#ffb3cd; --fl-glow:rgba(255,150,190,.7) } .fl-prism { --fl-a:#ffffff; --fl-b:#7ad3ff; --fl-ink:#101a2e; --fl-name:#9fe0ff; --fl-glow:rgba(150,210,255,.85) } .fl-abyss { --fl-a:#2ff0e0; --fl-b:#03151f; --fl-ink:#d8ffff; --fl-name:#4fe8dc; --fl-glow:rgba(40,230,220,.8) } .fl-chrome { --fl-a:#ffffff; --fl-b:#8e9bb0; --fl-ink:#0d1218; --fl-name:#cfd8e6; --fl-glow:rgba(220,235,255,.9) } .fl-supernova{ --fl-a:#fffbe6; --fl-b:#ff5e3a; --fl-ink:#2a0a04; --fl-name:#ffb057; --fl-glow:rgba(255,140,60,.95) } .fl-mythic { --fl-a:#ffffff; --fl-b:#a06bff; --fl-ink:#16072e; --fl-name:#c8a6ff; --fl-glow:rgba(180,120,255,.95) } /* ── stamp flairs: a SHAPE layer that composes ON TOP of a colour (v0.14.0) ──── A stamp is its OWN slot. Its class is `st-` (NOT `fl-`), it carries its own palette in the `--st-*` namespace, and it renders on ::before OVER whatever the colour slot painted (or a plain tile when no colour is worn). Separate namespace on purpose: a cell can wear a colour AND a stamp, and the two must never fight over one variable. `--st-shape` names the silhouette in public/marks/. Prefix note: `st-` is collision-free on cells and nameplates (no game class contains it) and distinct from the shop's own `fs-` classes. To add a stamp: add its vars here, drop its svg in public/marks/, add its id to the grouped selectors below, and set kind:'stamp' in lib/flair.js. */ .st-heart { --st-a:#ffd0dd; --st-b:#ff5e86; --st-name:#ff9bb4; --st-glow:rgba(255,94,134,.7); --st-shape:url(/marks/heart.svg) } .st-star { --st-a:#fff1ad; --st-b:#ffc531; --st-name:#ffd76a; --st-glow:rgba(255,197,49,.75); --st-shape:url(/marks/star.svg) } .st-clover { --st-a:#d8ffcf; --st-b:#4fd06a; --st-name:#8fe89a; --st-glow:rgba(79,208,106,.7); --st-shape:url(/marks/clover.svg) } .st-flower { --st-a:#ffe4cf; --st-b:#ff9a6b; --st-name:#ffb894; --st-glow:rgba(255,154,107,.68);--st-shape:url(/marks/flower.svg) } .st-paw { --st-a:#ffdcae; --st-b:#d98b3f; --st-name:#f0b46a; --st-glow:rgba(217,139,63,.65); --st-shape:url(/marks/paw.svg) } .st-gem { --st-a:#d4fff4; --st-b:#22e0c8; --st-name:#6fe8d6; --st-glow:rgba(34,224,200,.75); --st-shape:url(/marks/gem.svg) } .st-crown { --st-a:#e7d7ff; --st-b:#8b5cf6; --st-name:#c4a6ff; --st-glow:rgba(139,92,246,.72); --st-shape:url(/marks/crown.svg) } .st-bolt { --st-a:#d6fbff; --st-b:#29d3ff; --st-name:#7fe9ff; --st-glow:rgba(41,211,255,.8); --st-shape:url(/marks/bolt.svg) } .st-skull { --st-a:#f2f4ef; --st-b:#b3bdb0; --st-name:#d8e0d0; --st-glow:rgba(200,210,190,.6); --st-shape:url(/marks/skull.svg) } /* ── the marked cell ───────────────────────────────────────────────────────── Scoped to `.on` / `.on1` so an UNMARKED cell is never touched: a flair must never change which numbers look daubed, only how a daub looks. */ .lc-c.on[class*="fl-"], .clcell.on1[class*="fl-"], .wcell.marked[class*="fl-"]{ color:var(--fl-ink); background:radial-gradient(circle at 38% 32%, var(--fl-a), var(--fl-b)); box-shadow:0 0 12px -2px var(--fl-glow), inset 0 0 0 1px rgba(255,255,255,.14); } /* ── IMAGE SQUARE COLOURS: a real picture fills the marked cell (v0.18.0) ─────── Joey's sourced square art. The gradient colours above paint --fl-a/--fl-b; an image colour instead fills the MARKED square with a picture (public/squares/). Equal specificity to the base rule and placed after, so it wins. The number is forced dark with a light halo so it reads on a bright wash. Add one: drop the png in public/squares/, add its rule here, and a kind-less (colour) entry in lib/flair.js. */ .lc-c.on.fl-rainbow-wash, .clcell.on1.fl-rainbow-wash, .wcell.marked.fl-rainbow-wash{ background:url(/squares/rainbow-wash.png) center / cover no-repeat; color:#2a1330; text-shadow:0 1px 2px rgba(255,255,255,.65); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 12px -3px rgba(255,255,255,.45); } /* The overlay wraps its number in .chip; keep it dark on the light wash. */ .clcell.on1.fl-rainbow-wash .chip{ color:#2a1330; background:none; box-shadow:none; text-shadow:0 1px 2px rgba(255,255,255,.6) } .fl-name.fl-rainbow-wash{ color:#c9a6ff } /* Frost: a slow sheen crossing the daub. */ .lc-c.on.fl-frost::after, .clcell.on1.fl-frost::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%); background-size:280% 100%;animation:flSheen 3.4s ease-in-out infinite; } .lc-c.on.fl-frost,.clcell.on1.fl-frost{position:relative;overflow:hidden} @keyframes flSheen{0%{background-position:130% 0}55%,100%{background-position:-130% 0}} /* VHS: a chromatic edge and tape lines. Cheap enough to sit on 25 cells. */ .lc-c.on.fl-vhs,.clcell.on1.fl-vhs{ position:relative;overflow:hidden; text-shadow:1px 0 rgba(255,60,160,.85),-1px 0 rgba(60,230,255,.85); } .lc-c.on.fl-vhs::after,.clcell.on1.fl-vhs::after{ content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); } /* Void: an event horizon ring instead of a bloom. */ .lc-c.on.fl-void,.clcell.on1.fl-void{ box-shadow:0 0 0 2px rgba(150,110,255,.85),0 0 18px -1px var(--fl-glow),inset 0 0 14px -2px #000; } /* Champion: an iridescent daub, and it BREATHES when a win is one cell away. The pulse is held to that moment (the .lc-card.hot / .clgrid.lead parent) so a full board is never 25 animating cells on somebody's stream. */ .lc-c.on.fl-champion, .clcell.on1.fl-champion, .wcell.marked.fl-champion{ background:linear-gradient(135deg,#ffd0f2 0%,#ffe9a8 28%,#ffc02e 52%,#a8ffe6 78%,#c7b3ff 100%); } .lc-card.hot .lc-c.on.fl-champion, .clgrid.lead .clcell.on1.fl-champion{ animation:flPulse 1.5s ease-in-out infinite } @keyframes flPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}} /* ── the upper ladder's own paint ──────────────────────────────────────────── Read top to bottom, this is the ladder: each rung adds one more layer than the one below it, so "more expensive" is something you can see rather than a number on a card. */ /* Ember 550: dark coal, hot cracks. Static. */ .lc-c.on.fl-ember,.clcell.on1.fl-ember{ background:radial-gradient(circle at 38% 32%,#ff8c3a 0%,#a33208 34%,#2b0f08 78%); box-shadow:0 0 14px -3px var(--fl-glow),inset 0 0 10px -2px rgba(255,120,40,.75); } /* Toxic 550: hazard ring around an acid daub. Static. */ .lc-c.on.fl-toxic,.clcell.on1.fl-toxic{ box-shadow:0 0 0 2px rgba(200,255,80,.9),0 0 16px -2px var(--fl-glow),inset 0 0 0 1px rgba(0,0,0,.35); } /* Circuit 700: etched traces. One repeating gradient, no animation. */ .lc-c.on.fl-circuit,.clcell.on1.fl-circuit{position:relative;overflow:hidden} .lc-c.on.fl-circuit::after,.clcell.on1.fl-circuit::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background: repeating-linear-gradient(90deg,transparent 0 6px,rgba(127,255,212,.5) 6px 7px), repeating-linear-gradient(0deg,transparent 0 6px,rgba(127,255,212,.32) 6px 7px); } /* Sakura 700: blossom wash with petals caught in the corner. Static. */ .lc-c.on.fl-sakura,.clcell.on1.fl-sakura{ background: radial-gradient(circle at 78% 18%,rgba(255,255,255,.85) 0 12%,transparent 13%), radial-gradient(circle at 22% 76%,rgba(255,255,255,.6) 0 9%,transparent 10%), radial-gradient(circle at 38% 32%,var(--fl-a),var(--fl-b)); } /* Prism 900: the light splits. A five-stop spectrum, still static. */ .lc-c.on.fl-prism,.clcell.on1.fl-prism{ background:linear-gradient(118deg,#ff6b9d 0%,#ffd76a 24%,#7dffb0 48%,#7ad3ff 72%,#c9a4ff 100%); box-shadow:0 0 18px -3px var(--fl-glow),inset 0 0 0 1px rgba(255,255,255,.35); } /* Abyss 900: lit from inside, and it BREATHES only when a win is one cell away. */ .lc-c.on.fl-abyss,.clcell.on1.fl-abyss{ background:radial-gradient(circle at 50% 62%,#2ff0e0 0%,#0a5a63 38%,#03151f 82%); box-shadow:0 0 0 1px rgba(47,240,224,.55),0 0 20px -2px var(--fl-glow),inset 0 0 16px -3px #000; } .lc-card.hot .lc-c.on.fl-abyss, .clgrid.lead .clcell.on1.fl-abyss{ animation:flBreathe 2.6s ease-in-out infinite } @keyframes flBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4) saturate(1.2)}} /* Chrome 1200: liquid mirror. Banded metal, with the highlight rolling only when hot. */ .lc-c.on.fl-chrome,.clcell.on1.fl-chrome{ position:relative;overflow:hidden; background:linear-gradient(146deg,#ffffff 0%,#9fb0c6 18%,#4c5769 38%,#dfe8f5 56%,#7d8ca3 74%,#ffffff 100%); box-shadow:0 0 16px -4px var(--fl-glow),inset 0 0 0 1px rgba(255,255,255,.5); } .lc-card.hot .lc-c.on.fl-chrome::after, .clgrid.lead .clcell.on1.fl-chrome::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 64%); background-size:300% 100%;animation:flSheen 2.2s ease-in-out infinite; } /* Supernova 1200: a star going off. Layered radials, biggest bloom on the board. */ .lc-c.on.fl-supernova,.clcell.on1.fl-supernova{ background: radial-gradient(circle at 50% 50%,#fffbe6 0 14%,transparent 15%), radial-gradient(circle at 50% 50%,#ffd76a 0 26%,transparent 27%), radial-gradient(circle at 42% 38%,#ff8c3a,#ff5e3a 62%,#7a1503 100%); box-shadow:0 0 24px -2px var(--fl-glow),inset 0 0 0 1px rgba(255,220,150,.6); } .lc-card.hot .lc-c.on.fl-supernova, .clgrid.lead .clcell.on1.fl-supernova{ animation:flPulse 1.1s ease-in-out infinite } /* Mythic 1500: the apex. Aurora across the daub, a rarity ring, and the only flair that moves its own gradient - gated, like everything else up here. */ .lc-c.on.fl-mythic,.clcell.on1.fl-mythic{ position:relative; background:linear-gradient(120deg,#a06bff 0%,#5ce1ff 22%,#7dffb0 44%,#ffd76a 66%,#ff7ad0 86%,#a06bff 100%); background-size:220% 100%; box-shadow:0 0 0 2px rgba(200,166,255,.9),0 0 26px -2px var(--fl-glow),inset 0 0 0 1px rgba(255,255,255,.45); } .lc-card.hot .lc-c.on.fl-mythic, .clgrid.lead .clcell.on1.fl-mythic{ animation:flAurora 4s linear infinite } @keyframes flAurora{0%{background-position:0 0}100%{background-position:220% 0}} /* ── stamp flairs: the SHAPE layer, composed on top of the colour (v0.14.0) ──── A stamp is `st-` and paints on ::before OVER the cell's own background, which is the colour slot's square when a colour is worn, or a plain tile when not. It keeps its own `--st-*` palette so the two slots never collide. The number is forced light + outlined whenever a stamp is present, so it reads on the shape AND on whatever is behind it (the "never make the win harder to read" rule). `[class*="st-"]` is safe: no cell or nameplate class contains "st-". */ .lc-c.on[class*="st-"], .clcell.on1[class*="st-"], .wcell.marked[class*="st-"]{ position:relative;isolation:isolate; color:#eef3f8; text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.55); } /* Stamp with NO colour: drop the default teal square to a clean tile so the shape reads on its own. When a colour IS worn ([class*="fl-"]) its square stays. */ .lc-c.on[class*="st-"]:not([class*="fl-"]), .clcell.on1[class*="st-"]:not([class*="fl-"]), .wcell.marked[class*="st-"]:not([class*="fl-"]){ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); } /* The shape: the stamp gradient through the mark's mask, dropped just behind the number (z-index:-1 inside the cell's own stacking context via isolate). */ .lc-c.on[class*="st-"]::before, .clcell.on1[class*="st-"]::before, .wcell.marked[class*="st-"]::before{ content:"";position:absolute;inset:11%;z-index:-1;pointer-events:none; background:radial-gradient(circle at 38% 32%,var(--st-a),var(--st-b)); -webkit-mask:var(--st-shape) center / contain no-repeat; mask:var(--st-shape) center / contain no-repeat; filter:drop-shadow(0 1px 3px var(--st-glow)); } /* The overlay wraps its number in .chip, which .clcell.on1 paints dark for the bright daub; with a stamp on the cell the number goes light like the rest. */ .clcell.on1[class*="st-"] .chip{ color:#eef3f8;background:none;box-shadow:none; text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.5); } /* ── ART STAMPS: finished full-colour PNGs, not a masked silhouette (v0.18.0) ── A SECOND kind of stamp. The vector stamps above paint one shape in the wearer's gradient through a MASK; an art stamp is a sourced full-colour image drawn AS-IS. It reuses the whole stamp slot (kind:'stamp', the st- class the cards/overlay already emit, the number-goes-light rule) and only swaps how ::before paints: the PNG as a background-image, mask off, no gradient. Each id points --st-img at its file in /marks-art/. Add one: drop the png in public/marks-art/, add its --st-img line here + its id to the draw group below, and a kind:'stamp' entry in lib/flair.js. The draw rule sits AFTER the masked ::before so it wins on equal specificity; content/inset/z-index/pointer-events carry over from that rule. */ .st-bat-cute{--st-img:url(/marks-art/bat-cute.png)} .st-bubble-cat-mint{--st-img:url(/marks-art/bubble-cat-mint.png)} .st-candy-corn{--st-img:url(/marks-art/candy-corn.png)} .st-ghost{--st-img:url(/marks-art/ghost.png)} .st-ghost-cute{--st-img:url(/marks-art/ghost-cute.png)} .st-ghost-girl{--st-img:url(/marks-art/ghost-girl.png)} .st-hotdog{--st-img:url(/marks-art/hotdog.png)} .st-kiss{--st-img:url(/marks-art/kiss.png)} .st-kiss-red{--st-img:url(/marks-art/kiss-red.png)} .st-kitty{--st-img:url(/marks-art/kitty.png)} .st-kitty-pink{--st-img:url(/marks-art/kitty-pink.png)} .st-paw-pink{--st-img:url(/marks-art/paw-pink.png)} .st-paw-purple{--st-img:url(/marks-art/paw-purple.png)} .st-pumpkin{--st-img:url(/marks-art/pumpkin.png)} .st-pumpkin-duck{--st-img:url(/marks-art/pumpkin-duck.png)} .st-pumpkin-pink{--st-img:url(/marks-art/pumpkin-pink.png)} .st-rainbow{--st-img:url(/marks-art/rainbow.png)} .st-rainbow-bright{--st-img:url(/marks-art/rainbow-bright.png)} .st-rainbow-lamb{--st-img:url(/marks-art/rainbow-lamb.png)} .st-spider-dangle{--st-img:url(/marks-art/spider-dangle.png)} .st-sun{--st-img:url(/marks-art/sun.png)} .st-sun-cool{--st-img:url(/marks-art/sun-cool.png)} .st-taco{--st-img:url(/marks-art/taco.png)} .st-witch-hat{--st-img:url(/marks-art/witch-hat.png)} /* Draw the PNG as-is for every art stamp, on all three surfaces. */ .lc-c.on.st-bat-cute::before, .clcell.on1.st-bat-cute::before, .wcell.marked.st-bat-cute::before, .lc-c.on.st-bubble-cat-mint::before, .clcell.on1.st-bubble-cat-mint::before, .wcell.marked.st-bubble-cat-mint::before, .lc-c.on.st-candy-corn::before, .clcell.on1.st-candy-corn::before, .wcell.marked.st-candy-corn::before, .lc-c.on.st-ghost::before, .clcell.on1.st-ghost::before, .wcell.marked.st-ghost::before, .lc-c.on.st-ghost-cute::before, .clcell.on1.st-ghost-cute::before, .wcell.marked.st-ghost-cute::before, .lc-c.on.st-ghost-girl::before, .clcell.on1.st-ghost-girl::before, .wcell.marked.st-ghost-girl::before, .lc-c.on.st-hotdog::before, .clcell.on1.st-hotdog::before, .wcell.marked.st-hotdog::before, .lc-c.on.st-kiss::before, .clcell.on1.st-kiss::before, .wcell.marked.st-kiss::before, .lc-c.on.st-kiss-red::before, .clcell.on1.st-kiss-red::before, .wcell.marked.st-kiss-red::before, .lc-c.on.st-kitty::before, .clcell.on1.st-kitty::before, .wcell.marked.st-kitty::before, .lc-c.on.st-kitty-pink::before, .clcell.on1.st-kitty-pink::before, .wcell.marked.st-kitty-pink::before, .lc-c.on.st-paw-pink::before, .clcell.on1.st-paw-pink::before, .wcell.marked.st-paw-pink::before, .lc-c.on.st-paw-purple::before, .clcell.on1.st-paw-purple::before, .wcell.marked.st-paw-purple::before, .lc-c.on.st-pumpkin::before, .clcell.on1.st-pumpkin::before, .wcell.marked.st-pumpkin::before, .lc-c.on.st-pumpkin-duck::before, .clcell.on1.st-pumpkin-duck::before, .wcell.marked.st-pumpkin-duck::before, .lc-c.on.st-pumpkin-pink::before, .clcell.on1.st-pumpkin-pink::before, .wcell.marked.st-pumpkin-pink::before, .lc-c.on.st-rainbow::before, .clcell.on1.st-rainbow::before, .wcell.marked.st-rainbow::before, .lc-c.on.st-rainbow-bright::before, .clcell.on1.st-rainbow-bright::before, .wcell.marked.st-rainbow-bright::before, .lc-c.on.st-rainbow-lamb::before, .clcell.on1.st-rainbow-lamb::before, .wcell.marked.st-rainbow-lamb::before, .lc-c.on.st-spider-dangle::before, .clcell.on1.st-spider-dangle::before, .wcell.marked.st-spider-dangle::before, .lc-c.on.st-sun::before, .clcell.on1.st-sun::before, .wcell.marked.st-sun::before, .lc-c.on.st-sun-cool::before, .clcell.on1.st-sun-cool::before, .wcell.marked.st-sun-cool::before, .lc-c.on.st-taco::before, .clcell.on1.st-taco::before, .wcell.marked.st-taco::before, .lc-c.on.st-witch-hat::before, .clcell.on1.st-witch-hat::before, .wcell.marked.st-witch-hat::before { background:var(--st-img) center / contain no-repeat; -webkit-mask:none; mask:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); } /* ── SILHOUETTE STAMPS: the six solid shapes ride the RECOLOR path (v0.18.0) ──── bat / spider / cat-black / kiss-black / pumpkin-noir / bubble-cat are flat silhouettes, so they DON'T get an --st-img: they keep --st-shape and let the masked ::before above paint them in a fixed palette (their alpha is the mask). bat + spider take readable tints so they pop on the dark tile; the three named "black/noir" stamps stay BLACK with a light rim so they never vanish and shine on a light square-colour. Cutouts (cat eyes, jack-o face) show the tile through. */ .st-bat { --st-a:#c9b3ff; --st-b:#7a50e6; --st-name:#b39aff; --st-glow:rgba(122,80,230,.7); --st-shape:url(/marks-art/bat.png) } .st-spider { --st-a:#e6ecf3; --st-b:#8a94a5; --st-name:#c3ccd8; --st-glow:rgba(190,205,225,.6); --st-shape:url(/marks-art/spider.png) } .st-cat-black { --st-a:#42454c; --st-b:#0c0d10; --st-name:#c9cdd6; --st-glow:rgba(232,238,248,.6); --st-shape:url(/marks-art/cat-black.png) } .st-kiss-black { --st-a:#40383e; --st-b:#0b0a0c; --st-name:#d8ccd2; --st-glow:rgba(255,255,255,.55); --st-shape:url(/marks-art/kiss-black.png) } .st-pumpkin-noir{--st-a:#3d322c; --st-b:#0c0908; --st-name:#e6cbb6; --st-glow:rgba(255,176,110,.55); --st-shape:url(/marks-art/pumpkin-noir.png) } .st-bubble-cat { --st-a:#e0ecff; --st-b:#8fb3ff; --st-name:#bcd2ff; --st-glow:rgba(143,179,255,.6); --st-shape:url(/marks-art/bubble-cat.png) } /* ── the nameplate ───────────────────────────────────────────────────────── */ .fl-name{ color:var(--fl-name) } .fl-name.fl-champion::before{ content:"♛ ";font-size:.92em;opacity:.95 } .fl-name.fl-void::before{ content:"◍ ";font-size:.86em;opacity:.9 } .fl-name.fl-supernova::before{ content:"✦ ";font-size:.9em;opacity:.95 } .fl-name.fl-mythic::before{ content:"✧ ";font-size:.9em;opacity:.95 } .fl-name.fl-abyss::before{ content:"≈ ";font-size:.86em;opacity:.9 } /* Stamp glyphs sit AFTER the name (colour glyphs, if any, sit before), so a name can wear a colour badge and a stamp badge at the same time. */ .fl-name.st-heart::after{ content:" \2665";opacity:.95 } .fl-name.st-star::after{ content:" \2605";opacity:.95 } .fl-name.st-clover::after{ content:" \2663";opacity:.95 } .fl-name.st-crown::after{ content:" \2654";opacity:.95 } .fl-name.st-gem::after{ content:" \25C6";opacity:.9 } .fl-name.st-flower::after{ content:" \2740";opacity:.95 } /* ── board frames: the card's own edge + glow (v0.15.0, Phase 2) ─────────────── The THIRD slot. A frame is `fr-` on the card CONTAINER (.lc-card on /cards, .clcard on the overlay spotlight, .wcard on the win banner) and themes the whole board's border through its own `--fr-*` palette. Static paint only (a ring, a glow, a hairline) so 25 cells x every player never turns a border into a dropped frame on stream. `:not(.bingo)` yields to the win glow, and the raised specificity (container + attribute) also wins over the .paid "extra cards" ring, so a bought frame reliably shows. Prefix `fr-` is collision-free on cards. */ .fr-gold_edge { --fr-line:#f0b429; --fr-glow:rgba(240,180,41,.55); --fr-hi:rgba(255,233,168,.5) } .fr-neon_edge { --fr-line:#25f58a; --fr-glow:rgba(37,245,138,.6); --fr-hi:rgba(184,255,207,.5) } .fr-rose_edge { --fr-line:#ff8fb8; --fr-glow:rgba(255,143,184,.55);--fr-hi:rgba(255,227,239,.5) } .fr-frost_edge { --fr-line:#5cc8ff; --fr-glow:rgba(92,200,255,.55); --fr-hi:rgba(223,243,255,.5) } .fr-void_edge { --fr-line:#7a50e6; --fr-glow:rgba(122,80,230,.6); --fr-hi:rgba(179,154,255,.45) } .fr-ember_edge { --fr-line:#ff7828; --fr-glow:rgba(255,110,40,.6); --fr-hi:rgba(255,180,107,.45) } .lc-card[class*="fr-"]:not(.bingo), .clcard[class*="fr-"]:not(.bingo), .wcard[class*="fr-"]{ box-shadow: inset 0 0 0 1.5px var(--fr-hi), 0 0 0 2px var(--fr-line), 0 0 22px -5px var(--fr-glow), 0 16px 40px -20px #000; } /* ── empty-square tints: the UNMARKED cell (v0.15.0, Phase 2) ────────────────── The FOURTH slot. `ce-` rides the GRID (.lc-g / .clgrid / .wgrid) and washes only the squares NOT yet marked (and never the free centre) through its own `--ce-*` colour. BACKGROUND ONLY on purpose: it must never read as "marked", and leaving box-shadow alone means the assist-mode hint glow, the tap-hover ring and the base cell border all still show through. `ce-` is collision-free. */ /* Reworked 2026-08-27 (Joey: the flat veils were "NOT pretty"). Each tint is now a JEWEL-TONE wash, not a film: a saturated duotone (a pure hue falling to a deeper sister hue) under an edge vignette that leaves the CENTRE quietest — the exact inverse of a marked cell's bright-centred radial, so it can never read as marked, and the light numbers keep their contrast (a marked cell's number is dark, another thing keeping the two apart). The lesson from three render rounds: translucent pastels over the dark tile blend to olive/brown mud, so pretty means PURE hues at ~.5-.6 strength, richness over brightness. Still background-only, so the assist hint glow, tap ring and base border all show through untouched. */ .ce-gold_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(150,84,0,.35) 100%), linear-gradient(160deg, rgba(255,178,8,.60), rgba(210,124,0,.50) 70%) } .ce-neon_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(0,140,70,.32) 100%), linear-gradient(160deg, rgba(0,255,128,.50), rgba(0,200,90,.42) 70%) } .ce-rose_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(150,0,80,.35) 100%), linear-gradient(160deg, rgba(255,64,150,.55), rgba(200,20,110,.48) 70%) } .ce-frost_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(0,90,190,.32) 100%), linear-gradient(160deg, rgba(40,180,255,.55), rgba(0,130,230,.45) 70%) } .ce-void_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(80,20,200,.35) 100%), linear-gradient(160deg, rgba(150,90,255,.58), rgba(110,50,230,.50) 70%) } .ce-ember_tint { --ce-bg: radial-gradient(135% 135% at 50% 42%, transparent 40%, rgba(160,30,0,.35) 100%), linear-gradient(160deg, rgba(255,96,28,.60), rgba(210,50,10,.50) 70%) } .lc-g[class*="ce-"] .lc-c:not(.on):not(.free), .clgrid[class*="ce-"] .clcell:not(.on1):not(.free):not(.txt), .wgrid[class*="ce-"] .wcell:not(.marked):not(.free):not(.wtxt){ background:var(--ce-bg); } /* ── the shop ──────────────────────────────────────────────────────────────── 2026-08-20 visual pass (family store standard: per-app branded store pages). The shop reads as a LADDER: five priced rungs, each its own shelf with its own sentence, and a credits card on top so the road to more credits is always one glance away. */ /* ── the mix-and-match hero (v0.14.0) ───────────────────────────────────────── Teaches the whole idea before the shop: a colour + a stamp = your look, drawn with the REAL cell CSS so it is always honest, plus a plain-card comparison so the upgrade is obvious. Joey's ask: make customising read as FUN. */ .fs-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center; margin:18px 0 6px;padding:22px 26px;border-radius:20px; background:linear-gradient(150deg,rgba(20,24,44,.82),rgba(10,12,24,.86)); box-shadow:0 18px 50px -22px #000,inset 0 0 0 1.5px rgba(255,255,255,.09)} .fs-hero-copy h2{margin:0 0 8px;font-size:23px} .fs-hero-copy p{margin:0;color:#8b93a5;font-size:14px;line-height:1.6;max-width:48ch} .fs-hero-copy b{color:#eef3f8;font-weight:800} .fs-hero-vs{margin-top:12px !important;font-size:13px;color:#7b8496} .fs-eq{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .fs-eq figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px} .fs-eq figcaption{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6f7688} .fs-plus,.fs-eqs{font-size:24px;font-weight:800;color:#5f6b7e;line-height:1} .fs-eq-out .fs-demo{transform:scale(1.08)} .fs-demo{width:58px;height:58px;border-radius:13px;display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',monospace;font-weight:800;font-size:20px; color:#cfd3df;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .fs-demo.sm{width:26px;height:26px;border-radius:7px;font-size:12px;display:inline-flex;vertical-align:middle;margin:0 3px} .fs-demo.teal{background:radial-gradient(circle at 38% 32%,#96f5e4,#22e0c8);color:#06121a;box-shadow:0 0 10px -2px rgba(34,224,200,.5)} @media(max-width:640px){.fs-hero{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.fs-eq-out .fs-demo{transform:none}} /* The board-builder before/after: a plain mini card → a fully themed one, so the whole-card idea reads at a glance (v0.15.0). */ .fs-builder{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .fs-builder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px} .fs-builder figcaption{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6f7688} .fs-builder .fs-eq-out{transform:scale(1.04)} .fs-builder .fs-prev-card{width:150px} @media(prefers-reduced-motion:reduce){.fs-builder .fs-eq-out{transform:none}} /* The mini card the preview + hero draw: a real .lc-card wrapping a real .lc-g grid, so a frame (on the card) and a cell tint (on the grid) both render honestly. When no frame is worn the card carries its own quiet border; a frame class overrides that with its ring (higher-specificity rule above). */ .fs-prev-card{padding:8px;border-radius:12px; background:linear-gradient(150deg,rgba(20,24,44,.55),rgba(10,12,24,.7)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} /* A themed pack card: the hero sell of the shop, so it reads a touch richer than a single-item card and carries a discount badge. */ .fs-pack-card{--fs-accent:#ffd76a;--fs-glow:rgba(240,180,41,.5); background:linear-gradient(150deg,rgba(30,26,44,.9),rgba(14,12,26,.92))} .fs-pack-card .fs-name{font-size:17px} .fs-save{align-self:flex-start;font-size:11.5px;font-weight:900;letter-spacing:.02em; padding:4px 11px;border-radius:999px;color:#0a0b14; background:linear-gradient(135deg,#ffe9a8,#f0b429);box-shadow:0 6px 18px -8px rgba(240,180,41,.8)} /* Worn frame/cell names in the credits chip: they do not tint the nameplate, so they name themselves in their slot's own accent instead. */ .fs-wname.fr{color:#ffd76a} .fs-wname.ce{color:#9adcff} /* padding:0 kills style.css's landing `section{padding:64px 0}`, which would otherwise open a huge dead band between every rung. */ .fs-sec{margin-top:38px;padding:0} .fs-sec-head h2{margin:0;font-size:22px} .fs-sec-sub{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:#8b93a5;max-width:64ch} .fs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:14px} /* Card accent: colour cards read it from the colour slot, stamp cards from the stamp slot. One indirection so the chrome below never has to know which it is. `[class*="st-"]` matches a card wearing an st- class; "fs-item" itself does NOT contain "st-", so a colour card keeps the --fl-* accent. */ .fs-item{--fs-accent:var(--fl-b,#22e0c8);--fs-glow:var(--fl-glow,transparent); padding:16px;border-radius:18px;display:flex;flex-direction:column;gap:12px; background:linear-gradient(150deg,rgba(20,24,44,.82),rgba(10,12,24,.86)); box-shadow:0 18px 50px -22px #000,inset 0 0 0 1.5px rgba(255,255,255,.08); transition:transform .24s var(--sx-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .24s ease-out} .fs-item[class*="st-"]{--fs-accent:var(--st-b,#22e0c8);--fs-glow:var(--st-glow,transparent)} .fs-item:hover{transform:translateY(-4px); box-shadow:0 26px 60px -24px #000,inset 0 0 0 1.5px rgba(255,255,255,.14),0 0 34px -14px var(--fs-glow)} .fs-item.worn{box-shadow:0 18px 50px -22px #000,inset 0 0 0 2px var(--fs-accent),0 0 30px -12px var(--fs-glow)} .fs-item.worn:hover{box-shadow:0 26px 60px -24px #000,inset 0 0 0 2px var(--fs-accent),0 0 34px -10px var(--fs-glow)} .fs-top{display:flex;align-items:baseline;gap:10px} /* Item names wrap rather than cut ("Mint Bubble Cat Stamp" lost half its name at 127px, 2026-10-10). */ .fs-name{font-weight:900;font-size:16px;line-height:1.25;flex:1;min-width:0;overflow-wrap:anywhere} /* A stamp card's title wears the STAMP's colour (in-game the colour slot owns the name tint; here each card is one item, so the stamp names itself). */ .fs-name[class*="st-"]{color:var(--st-name)} .fs-cost{font-size:13px;font-weight:800;color:#aeb6c6;white-space:nowrap;font-family:'JetBrains Mono',monospace} .fs-cost.free{color:#5cffa8} .fs-blurb{font-size:13px;line-height:1.5;color:#8b93a5;margin:0;flex:1} /* The credits card: balance, top-up packs, the honest tier line. */ .fs-credits{display:flex;flex-direction:column;gap:12px;margin:18px 0 4px;padding:18px 22px;border-radius:18px; background:linear-gradient(150deg,rgba(20,24,44,.82),rgba(10,12,24,.86)); box-shadow:0 18px 50px -22px #000,inset 0 0 0 1.5px rgba(255,255,255,.08)} .fs-cred-bal{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fs-balnum{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;line-height:1;color:var(--accent,#22e0c8)} .fs-balnum.quiet{color:#8b93a5} .fs-bal-lab{font-size:13px;font-weight:700;color:#8b93a5} .fs-bal-split{font-size:12px;font-weight:700;color:#6f8079} .fs-worn-chip{margin-left:auto;font-size:12.5px;font-weight:700;color:#8b93a5;padding:7px 14px;border-radius:999px; background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);white-space:nowrap} .fs-worn-chip b{font-weight:900} .fs-worn-chip.dim{opacity:.75} .fs-cred-packs{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .fs-cred-title{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:#8b93a5} .fs-pack{padding:8px 16px;border-radius:999px;font-weight:800;font-size:13.5px;text-decoration:none; color:var(--accent,#22e0c8);background:rgba(34,224,200,.09);box-shadow:inset 0 0 0 1.5px rgba(34,224,200,.35); transition:background .18s ease-out,color .18s ease-out,transform .18s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .fs-pack:hover{background:var(--accent,#22e0c8);color:var(--accent-ink,#04201c);transform:translateY(-1px)} .fs-pack:active{transform:scale(.96)} .fs-cred-foot{font-size:13px;line-height:1.55;color:#8b93a5;margin:0} .fs-cred-foot a{color:var(--accent,#22e0c8);font-weight:800} /* The preview IS the product, so it is a real bingo row using the real rules above. A picture of a daub would eventually stop matching the daub. */ .fs-prev{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} .fs-prev .lc-c,.fs-spot .lc-c{aspect-ratio:1/1;border-radius:7px;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:14px;color:#cfd3df;background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} /* The FULL 5×5 board (the "trying this look" preview): 25 smaller cells, so the digits and radius scale down to keep it a tidy, honest card (Joey, Aug 28). */ .fs-prev-full .lc-c{font-size:11px;border-radius:5px} /* The FREE square, restated from the cards page. Without this the preview's centre cell would fall through to the plain-cell look on /flair and show a card that does not exist. */ .fs-prev .lc-c.free{background:linear-gradient(135deg,#9146ff,#6d28d9);color:#fff} /* The CLASSIC mark, restated from the cards page (cards.html .lc-c.on) for the same reason: a marked cell wearing no colour and no stamp is the game's teal daub, and the locker's Default swatch + the trial board must show THAT, not a bare dark tile (Joey, Aug 27). Scoped off fl-/st- cells so every flair still paints exactly as before. Pinned against cards.html drift in flair-harness. */ .fs-prev .lc-c.on:not([class*="fl-"]):not([class*="st-"]), .fs-spot .lc-c.on:not([class*="fl-"]):not([class*="st-"]), .lk-mini .lc-c.on:not([class*="fl-"]):not([class*="st-"]){ color:#06121a;background:radial-gradient(circle at 38% 32%,rgba(150,245,228,.97),rgba(34,224,200,.78))} .fs-act{display:flex;gap:8px;align-items:center} .fs-act .btn{flex:1;justify-content:center} .fs-tag{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap; color:#0a0b14;background:linear-gradient(135deg,var(--fl-a,var(--st-a,#96f5e4)),var(--fl-b,var(--st-b,#22e0c8)))} .fs-note{font-size:12px;color:#8b93a5;margin:6px 0 0} @media (prefers-reduced-motion:reduce){ .fs-item,.fs-item:hover{transform:none} .fs-pack,.fs-pack:hover,.fs-pack:active{transform:none} .lc-c.on.fl-frost::after,.clcell.on1.fl-frost::after{animation:none;opacity:.25} .lc-card.hot .lc-c.on.fl-champion,.clgrid.lead .clcell.on1.fl-champion{animation:none} /* The upper ladder's four moving rungs. Each one still reads as itself with the motion off - the paint is what was bought, the movement is the flourish. */ .lc-card.hot .lc-c.on.fl-abyss,.clgrid.lead .clcell.on1.fl-abyss{animation:none} .lc-card.hot .lc-c.on.fl-supernova,.clgrid.lead .clcell.on1.fl-supernova{animation:none} .lc-card.hot .lc-c.on.fl-mythic,.clgrid.lead .clcell.on1.fl-mythic{animation:none} .lc-card.hot .lc-c.on.fl-chrome::after,.clgrid.lead .clcell.on1.fl-chrome::after{animation:none;opacity:.3} } /* ── The card visual: spotlight + clean strip, and the tap-to-zoom affordance ── (Joey, Sep 27) A stamp/colour now leads with ONE big marked cell so the shape reads instantly, with a short clean strip beneath for the on-a-row context and NO purple FREE square stealing the eye. The whole visual is a button that opens the enlarge popup, hinted by a corner glyph that lifts in on hover. */ .fs-vis{position:relative;cursor:pointer;border-radius:12px; transition:transform .2s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .fs-vis:hover{transform:scale(1.015)} .fs-vis:active{transform:scale(.99)} .fs-vis:focus-visible{outline:2px solid var(--fs-accent,#22e0c8);outline-offset:3px} .fs-zoom-hint{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:8px; display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;line-height:1; color:#dfe6ee;background:rgba(10,12,22,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); opacity:0;transform:scale(.8) translateY(-2px);pointer-events:none; transition:opacity .18s ease-out,transform .2s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .fs-vis:hover .fs-zoom-hint,.fs-vis:focus-visible .fs-zoom-hint{opacity:1;transform:scale(1) translateY(0)} /* The spotlight cell: the item, big, on a lit pad so it feels like the hero. */ .fs-vis-spot{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 0 2px} .fs-spot{position:relative;display:grid;place-items:center;padding:12px 0 6px} .fs-spot::before{content:"";position:absolute;width:104px;height:104px;border-radius:50%; background:radial-gradient(circle,var(--fs-glow,transparent),transparent 68%); opacity:.9;filter:blur(3px);pointer-events:none;z-index:0} .fs-spot .lc-c{position:relative;z-index:1;width:92px;height:92px;aspect-ratio:auto; font-size:27px;border-radius:18px} .fs-strip{width:100%;max-width:210px} .fs-strip .lc-c{border-radius:6px} /* Stamp family rows: the stamps shelf split into themed groups so it reads as a curated shop instead of one endless wall. Each row gets a quiet sub-head. */ .fs-fam{margin-top:22px} .fs-fam:first-of-type{margin-top:16px} .fs-fam-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding-bottom:9px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.07)} .fs-fam-head h3{margin:0;font-size:16px;font-weight:900;color:#eef3f8;letter-spacing:.01em} .fs-fam-head p{margin:0;font-size:12.5px;color:#8b93a5;line-height:1.5} .fs-fam .fs-grid{margin-top:14px} /* ── The enlarge popup ───────────────────────────────────────────────────────── A big honest board of one item, with the same buy/wear action the card carries. Origin-aware feel: scales up from a hair under full and settles (sx motion). */ .fl-zoom-back{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(6,8,16,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity .2s ease-out} .fl-zoom-back.in{opacity:1} .fl-zoom-card{position:relative;width:min(560px,100%);display:grid;grid-template-columns:1fr 1fr;gap:22px; align-items:center;padding:26px;border-radius:22px; background:linear-gradient(150deg,rgba(22,27,48,.97),rgba(12,15,27,.98)); box-shadow:0 40px 90px -30px #000,inset 0 0 0 1.5px rgba(255,255,255,.09); transform:scale(.94);opacity:0; transition:transform .32s var(--sx-spring,cubic-bezier(.34,1.56,.64,1)),opacity .24s ease-out} .fl-zoom-back.in .fl-zoom-card{transform:scale(1);opacity:1} .fl-zoom-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;cursor:pointer; border-radius:10px;font-size:22px;line-height:1;color:#cdd4e2;background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .16s ease,transform .16s ease} .fl-zoom-x:hover{background:rgba(255,255,255,.13)} .fl-zoom-x:active{transform:scale(.92)} .fl-zoom-board{display:flex;justify-content:center} .fl-zoom-board .fs-prev-card{width:100%;max-width:230px} .fl-zoom-board .fs-prev-full .lc-c{font-size:13px;border-radius:7px} .fl-zoom-info{display:flex;flex-direction:column;gap:8px;min-width:0} .fl-zoom-kind{font:800 10.5px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a93a6} .fl-zoom-name{margin:0;font-size:22px;font-weight:900;line-height:1.15} .fl-zoom-blurb{margin:0;font-size:13.5px;line-height:1.55;color:#9aa2b3} .fl-zoom-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px} .fl-zoom-act .btn{flex:none} .fl-zoom-act .btn-primary{background:linear-gradient(135deg,#7bf5df,#22e0c8);color:#04201b} @media(max-width:540px){ .fl-zoom-card{grid-template-columns:1fr;gap:16px;padding:22px 20px} .fl-zoom-board .fs-prev-card{max-width:190px} .fl-zoom-name{font-size:20px} } @media(prefers-reduced-motion:reduce){ .fs-vis,.fs-vis:hover,.fs-vis:active,.fs-zoom-hint{transition:none;transform:none} .fs-vis:hover .fs-zoom-hint,.fs-vis:focus-visible .fs-zoom-hint{transform:none} .fl-zoom-back{transition:opacity .12s ease} .fl-zoom-card,.fl-zoom-back.in .fl-zoom-card{transition:opacity .12s ease;transform:none} } /* ── Gifting a flair to a friend (v0.34.0) ──────────────────────────────────── The gift button rides every buyable card next to the buy/wear action; it is a quiet ghost so it never outshouts the primary action, with a warm gift tint. */ .fs-giftbtn{flex:none;white-space:nowrap;color:#ffcf8f; background:rgba(255,180,90,.10);box-shadow:inset 0 0 0 1.5px rgba(255,180,90,.34)} .fs-giftbtn:hover{background:rgba(255,180,90,.20);color:#ffe0b3} .fl-zoom-gift{width:100%;justify-content:center;margin-top:2px} /* The gift modal reuses the enlarge-popup shell (.fl-zoom-back/.fl-zoom-card), with a recipient picker in the info column. */ .fl-gift-card{align-items:start} .fl-gift-vis{display:flex;justify-content:center} .fl-gift-vis .fs-prev-card{width:100%;max-width:190px} .fl-gift-body{display:flex;flex-direction:column;gap:9px;min-width:0} .fl-gift-lead{margin:0;font-size:13px;line-height:1.5;color:#9aa2b3} .fl-gift-pick{position:relative;margin-top:2px} .fl-gift-in{width:100%;min-width:0;padding:10px 13px;border-radius:11px;border:0; font:700 14px/1 system-ui;color:#eef3f8;background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);outline:none} .fl-gift-in:focus{box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.6)} /* The typeahead list drops from the input, capped and scrollable so a big match set never runs off the card (Joey, Sep 27: faces + names give confidence). */ .fl-gift-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5; max-height:236px;overflow-y:auto;padding:5px;border-radius:13px; background:linear-gradient(150deg,rgba(26,31,52,.99),rgba(15,18,32,.99)); box-shadow:0 24px 50px -18px #000,inset 0 0 0 1.5px rgba(255,255,255,.1)} .fl-gift-results[hidden]{display:none} .fl-gift-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:8px 9px;border:0;border-radius:10px;cursor:pointer;background:transparent; color:#eef3f8;transition:background .12s ease} .fl-gift-opt:hover,.fl-gift-opt:focus-visible{background:rgba(46,230,207,.13);outline:none} .fl-gift-opt.has{opacity:.72} .fl-gift-opt-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .fl-gift-opt-txt b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fl-gift-opt-txt small{font-size:11.5px;color:#8b93a5;font-family:'JetBrains Mono',monospace} /* The avatar chip, in the list and in the confirmed status line. */ .fl-gift-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)} .fl-gift-av-ph{display:flex;align-items:center;justify-content:center; font:900 14px/1 system-ui;color:#06121a; background:linear-gradient(135deg,#96f5e4,#22e0c8)} .fl-gift-status{min-height:20px;margin-top:2px} .fl-gift-found{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;color:#9aa2b3} .fl-gift-found .fl-gift-av{width:26px;height:26px} .fl-gift-found-txt i{font-style:normal;color:#8b93a5;font-family:'JetBrains Mono',monospace;font-size:11.5px} .fl-gift-found.ok{color:#9fe0d6} .fl-gift-found.ok b{color:#eef3f8;font-weight:900} .fl-gift-found.bad{color:#ff9db0} .fl-gift-act{margin-top:4px} .fl-gift-act .btn{width:100%;justify-content:center; background:linear-gradient(135deg,#ffd9a8,#ffb44f);color:#2a1400} .fl-gift-act .btn:disabled{opacity:.5;filter:saturate(.6)} /* ── Shop / Locker tabs + the Locker wardrobe (v0.18.1) ──────────────────────── The Locker is a viewer's own dressing room: what they OWN, by slot, mixed with a live board preview and no buy noise. Same card CSS as the shop, so a look is always honest. */ .fl-tabs{display:inline-flex;gap:4px;margin:6px 0 22px;padding:4px;border-radius:999px; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .fl-tab{appearance:none;border:0;cursor:pointer;padding:9px 22px;border-radius:999px; font:800 14px/1 system-ui;color:#8b93a5;background:transparent; transition:color .16s ease,background .22s var(--sx-spring,cubic-bezier(.34,1.56,.64,1)),transform .12s ease-out} .fl-tab:hover{color:#eef3f8} .fl-tab:active{transform:scale(.97)} .fl-tab.on{color:#04201b;background:linear-gradient(135deg,#7bf5df,#22e0c8);box-shadow:0 8px 20px -10px rgba(34,224,200,.8)} /* The dressing room: a header row (copy left, try-on toggle right) over a spotlit STAGE that holds the card. The old layout marooned the board on one side with a paragraph on the other; this puts the card centre-stage, lit, as the hero. */ .lk-room{position:relative;overflow:hidden;margin:6px 0 16px;padding:24px 26px 28px;border-radius:22px; background:linear-gradient(150deg,rgba(22,26,48,.86),rgba(10,12,24,.9)); box-shadow:0 26px 72px -30px #000,inset 0 0 0 1.5px rgba(255,255,255,.09)} /* a soft teal aurora behind the pedestal, so the card sits in light not a flat box */ .lk-room::before{content:"";position:absolute;left:50%;top:60%;width:min(560px,82%);height:360px; transform:translate(-50%,-50%);pointer-events:none;z-index:0; background:radial-gradient(closest-side,rgba(34,224,200,.15),transparent 72%)} .lk-room>*{position:relative;z-index:1} .lk-room-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px} .lk-room-eyebrow{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9fe0d6} .lk-room-copy h2{margin:7px 0 6px;font-size:26px} .lk-room-copy p{margin:0;color:#8b93a5;font-size:14px;line-height:1.6;max-width:52ch} .lk-room-copy b{color:#eef3f8;font-weight:800} .lk-room-head .lk-toggle{margin-top:2px;flex:none} /* the stage + pedestal */ .lk-stage{display:flex;flex-direction:column;align-items:center;gap:13px} .lk-board-lab{font:800 10.5px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a93a6} .lk-stage-card{position:relative;padding:16px 24px 20px;border-radius:20px; background:radial-gradient(120% 92% at 50% 16%,rgba(255,255,255,.06),transparent 68%)} /* a soft glow puddle under the card, so it reads as lifted onto a platform */ .lk-stage-card::after{content:"";position:absolute;left:16%;right:16%;bottom:7px;height:15px;border-radius:50%; background:radial-gradient(closest-side,rgba(34,224,200,.4),transparent 76%);filter:blur(4px)} .lk-stage .fs-prev-card{width:300px} .lk-stage .fs-prev-full .lc-c{font-size:13px;border-radius:7px} .lk-empty{color:#8b93a5;font-size:14px;margin:8px 0 0} .lk-empty a{color:#5ff0dc;font-weight:700} /* ── The wardrobe: the four slots as shelves in ONE panel ────────────────────── Was four rows of swatches floating in dead space (each
also inherited style.css's landing `section{padding:64px 0}`, which opened the huge gaps). Now they live in one closet panel, each shelf a row of swatches spread across the full width, so it reads as an organised wardrobe. Swatches render from the REAL card CSS so a try-on is always honest. */ .lk-drawers{margin:0 0 6px;padding:4px 24px;border-radius:22px; background:linear-gradient(150deg,rgba(20,24,44,.8),rgba(10,12,24,.87)); box-shadow:0 20px 56px -26px #000,inset 0 0 0 1.5px rgba(255,255,255,.07)} .lk-drawers .lk-picker{margin:0;padding:22px 0} .lk-drawers .lk-picker + .lk-picker{border-top:1px solid rgba(255,255,255,.06)} .lk-drawers .lk-sec-head{margin-bottom:2px} .lk-drawers .lk-picker h2{font-size:17px;margin:0} .lk-foot-btns{display:flex;flex-wrap:wrap;gap:8px} /* swatches spread across the shelf instead of hugging the left edge */ .lk-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:12px;padding:14px 0 2px} .lk-sw{display:flex;flex-direction:column;align-items:center;gap:9px;cursor:pointer; padding:13px 8px;border:0;border-radius:16px;background:rgba(255,255,255,.035);color:#c5cdda; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); transition:transform .16s var(--sx-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .18s ease,background .18s ease} .lk-sw:hover{transform:translateY(-3px);background:rgba(255,255,255,.07);color:#eef3f8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 12px 28px -14px #000} .lk-sw:active{transform:scale(.96)} .lk-sw.sel{box-shadow:inset 0 0 0 2px #22e0c8,0 0 28px -6px rgba(34,224,200,.6);color:#eef3f8;background:rgba(34,224,200,.09)} .lk-sw.locked{opacity:.92} .lk-mini{width:60px;height:60px;border-radius:12px;display:block} .lk-mini.lc-card{padding:4px} .lk-mini.lc-g{display:grid;grid-template-columns:1fr} .lk-mini .lc-c{aspect-ratio:1/1;border-radius:10px;display:flex;align-items:center;justify-content:center; font:800 19px/1 ui-monospace,monospace;color:#aeb8c8;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} .lk-sw-name{font:700 11.5px/1.2 system-ui;text-align:center;width:100%;overflow-wrap:anywhere} /* wraps, never cut */ .lk-tag{font:800 9px/1 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px; color:#8b93a5;background:rgba(255,255,255,.06)} .lk-tag.own{color:#9fe0d6;background:rgba(34,224,200,.14)} .lk-tag.price{color:#ffd76a;background:rgba(240,180,41,.14)} /* Narrow screens: trim the panel padding, tighten the swatch grid and cap the stage card so nothing ever spills past the viewport (no horizontal scroll). */ @media(max-width:560px){ .lk-room{padding-left:18px;padding-right:18px} .lk-drawers,.lk-screens{padding-left:16px;padding-right:16px} .lk-row{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px} .lk-stage-card{padding-left:12px;padding-right:12px} .lk-stage .fs-prev-card{width:min(280px,74vw)} .lk-room-copy h2{font-size:23px} } /* Game Screens section in the shop: a host-only badge + a taller skin preview. */ .fs-hosts{display:inline-block;margin-left:8px;font:800 10px/1 ui-monospace,monospace;letter-spacing:.06em; text-transform:uppercase;color:#ffd76a;padding:3px 9px;border-radius:999px;background:rgba(240,180,41,.14); box-shadow:inset 0 0 0 1px rgba(240,180,41,.35);vertical-align:middle} .sk-shop .skinprev{height:112px;margin-bottom:4px;cursor:zoom-in} /* The always-on "only works while you host a game" line on every screen card, so a viewer never buys one expecting it on their own bingo card. */ .sk-only{margin:8px 0 0;font:800 11.5px/1.35 system-ui;color:#ffd76a; display:flex;align-items:center;gap:6px} /* Locker toggle (My stuff / Show shop items) + the shop's head links row. */ .fl-head-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .fl-head-links .fl-gift{margin-top:0} .lk-toggle{display:inline-flex;gap:4px;margin-top:14px;padding:4px;border-radius:999px; background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .lk-tg{appearance:none;border:0;cursor:pointer;padding:8px 16px;border-radius:999px; font:800 13px/1 system-ui;color:#8b93a5;background:transparent; transition:color .16s ease,background .22s var(--sx-spring,cubic-bezier(.34,1.56,.64,1)),transform .12s ease-out} .lk-tg:hover{color:#eef3f8} .lk-tg:active{transform:scale(.97)} .lk-tg.on{color:#04201b;background:linear-gradient(135deg,#7bf5df,#22e0c8);box-shadow:0 8px 20px -10px rgba(34,224,200,.8)} /* ── Featured find: the rotating header at the top of the locker (v0.27.0) ──────── A small spotlight that cycles shop items so there is always something new to want without leaving the page. */ .lk-feat-wrap{margin:6px 0 22px} .lk-feat-eyebrow{display:flex;align-items:center;gap:7px;margin:0 0 10px 2px; font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9fe0d6} .lk-feat-spark{color:#ffd76a;font-size:13px} .lk-feat{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center; padding:20px 24px;border-radius:20px; background:linear-gradient(135deg,rgba(34,224,200,.10),rgba(20,24,44,.85) 42%,rgba(10,12,24,.9)); box-shadow:0 22px 60px -26px #000,inset 0 0 0 1.5px rgba(34,224,200,.28)} .lk-feat-in{animation:lkFeatIn .5s var(--sx-ease-out,cubic-bezier(.2,.8,.2,1))} @keyframes lkFeatIn{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}} .lk-feat-vis .fs-prev-card{width:150px} .lk-feat-info{min-width:0} .lk-feat-kind{font:800 10px/1 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:#7f8798} .lk-feat-name{margin:6px 0 4px;font-size:22px;line-height:1.1;overflow:hidden;text-overflow:ellipsis} .lk-feat-blurb{margin:0 0 12px;color:#a7afbe;font-size:13.5px;line-height:1.55;max-width:52ch; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lk-feat-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .lk-feat-price{font:800 14px/1 ui-monospace,monospace;color:#ffd76a} .lk-feat .btn-primary{background:linear-gradient(135deg,#7bf5df,#22e0c8);color:#04201b} .lk-feat-dots{display:flex;justify-content:center;gap:7px;margin-top:12px} .lk-feat-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.18);transition:background .2s ease,transform .2s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .lk-feat-dot:hover{background:rgba(255,255,255,.4)} .lk-feat-dot.on{background:linear-gradient(135deg,#7bf5df,#22e0c8);transform:scale(1.25)} @media(max-width:560px){.lk-feat{grid-template-columns:1fr;justify-items:center;text-align:center} .lk-feat-blurb{max-width:none}.lk-feat-act{justify-content:center}} /* The board's own CTA: sits directly under the trial card with an arrow pointing up at it, so "wear this look" is unmistakably about THAT board. */ .lk-cta{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:12px;text-align:center} .lk-cta-arrow{font-size:20px;line-height:1;color:#22e0c8;animation:lkArrow 1.8s ease-in-out infinite} @keyframes lkArrow{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-3px);opacity:1}} .lk-cta .btn-primary{background:linear-gradient(135deg,#7bf5df,#22e0c8);color:#04201b} .lk-cta-status{margin:0;font-weight:800;font-size:14px;color:#9fe0d6} .lk-cta-note{margin:0;font-weight:700;font-size:13px;color:#cdd4e2;max-width:26ch} .lk-cta .lk-foot-btns{justify-content:center} .btn-xs{padding:5px 12px;font-size:11.5px;border-radius:999px} @media(prefers-reduced-motion:reduce){.lk-cta-arrow,.lk-feat-in{animation:none}} /* The sticky save bar (v0.33.0). The in-board CTA leaves the screen the moment a viewer scrolls into the swatch rows to build a look, so an unsaved, wearable change rides the bottom of the screen until they wear it or start over. The outer element is a full-width flex row so the pill centres with no translateX, leaving the transform free for a springy enter / feathered exit. */ .lk-savebar{position:fixed;left:0;right:0;bottom:22px;z-index:70; display:flex;justify-content:center;padding:0 16px;pointer-events:none; opacity:0;transform:translateY(20px); transition:opacity .34s var(--sx-ease-in,cubic-bezier(.4,0,.6,1)), transform .34s var(--sx-ease-in,cubic-bezier(.4,0,.6,1))} .lk-savebar.show{opacity:1;transform:translateY(0); transition:opacity .3s var(--sx-ease-out,cubic-bezier(.2,.8,.2,1)), transform .42s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .lk-savebar.show .lk-savebar-in{pointer-events:auto} .lk-savebar-in{display:flex;align-items:center;gap:16px; padding:11px 13px 11px 21px;border-radius:999px; background:linear-gradient(150deg,rgba(21,27,48,.94),rgba(11,14,26,.97)); box-shadow:0 24px 60px -22px #000,0 0 0 1.5px rgba(46,230,207,.30), inset 0 0 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .lk-savebar-lab{font-weight:800;font-size:13.5px;color:#cdd4e2;white-space:nowrap} .lk-savebar-btns{display:flex;align-items:center;gap:8px;flex:none} .lk-savebar .btn-primary{background:linear-gradient(135deg,#7bf5df,#22e0c8);color:#04201b} /* Give the page room so the bar never covers the last swatch row or the footer. */ body.lk-savebar-on{padding-bottom:86px} @media(max-width:560px){ .lk-savebar{bottom:14px;padding:0 12px} .lk-savebar-in{flex:1;justify-content:space-between;gap:10px;padding:10px 11px 10px 17px} .lk-savebar-lab{font-size:12.5px} body.lk-savebar-on{padding-bottom:78px} } @media(prefers-reduced-motion:reduce){ .lk-savebar,.lk-savebar.show{transform:none;transition:opacity .2s ease} } /* Per-section "Get more…" door. Joey (Aug 28): it lives at the END of each section's list, as a box the SAME size/type as that section's items, with a teal glow so it stands out. Two shapes: a swatch-sized tile for the slot rows, a screen-card-sized card for the Game Screens grid. */ .lk-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .lk-sec-copy{min-width:0} .lk-more{flex:none;align-self:center;text-decoration:none;white-space:nowrap; padding:8px 15px;border-radius:999px;font:800 12.5px/1 system-ui;color:#bfeee2; background:rgba(46,230,207,.12);box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.42); transition:background .18s ease,transform .16s var(--sx-spring,cubic-bezier(.34,1.56,.64,1))} .lk-more:hover{background:rgba(46,230,207,.22);transform:translateY(-1px)} .lk-more:active{transform:scale(.97)} .lk-empty-wrap{display:flex;flex-direction:column;gap:8px} /* Game Screens sits OUTSIDE the wardrobe panel (a screen is host-owned, not a card piece), so it gets its own matching panel + spacing instead of the bare inherited section padding. */ .lk-screens{margin:16px 0 6px;padding:22px 24px 24px;border-radius:22px; background:linear-gradient(150deg,rgba(20,24,44,.8),rgba(10,12,24,.87)); box-shadow:0 20px 56px -26px #000,inset 0 0 0 1.5px rgba(255,255,255,.07)} .lk-screens .fs-grid{margin-top:16px} /* Swatch-row slots (colour/stamp/frame/tint): a tile the size of a swatch. */ .lk-getmore{justify-content:center;text-decoration:none;color:#bfeee2; background:linear-gradient(160deg,rgba(46,230,207,.18),rgba(34,224,200,.05)); box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.55),0 0 22px -6px rgba(34,224,200,.6)} .lk-getmore:hover{color:#eafff9;background:linear-gradient(160deg,rgba(46,230,207,.3),rgba(34,224,200,.12)); box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.85),0 10px 30px -8px rgba(34,224,200,.85)} .lk-getmore-ic{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:12px; font:800 30px/1 system-ui;color:#04201b;background:linear-gradient(135deg,#7bf5df,#22e0c8); box-shadow:0 6px 16px -6px rgba(34,224,200,.8)} .lk-getmore-go{font:800 8.5px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#9fe0d6} /* Game Screens: a card the size and type of a screen card, glowing. It stretches to the grid row height on its own row via the fs-grid stretch, min-height keeps it card-like when it lands alone. */ .sk-getmore{align-items:center;justify-content:center;text-align:center;gap:14px;min-height:240px; text-decoration:none;color:#bfeee2; background:linear-gradient(160deg,rgba(46,230,207,.16),rgba(20,24,44,.85) 55%,rgba(10,12,24,.9)); box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.5),0 0 30px -10px rgba(34,224,200,.55),0 18px 50px -22px #000} .sk-getmore:hover{color:#eafff9;transform:translateY(-4px); box-shadow:inset 0 0 0 1.5px rgba(46,230,207,.85),0 0 40px -10px rgba(34,224,200,.85),0 26px 60px -24px #000} .sk-getmore-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px; font:800 34px/1 system-ui;color:#04201b;background:linear-gradient(135deg,#7bf5df,#22e0c8); box-shadow:0 10px 24px -8px rgba(34,224,200,.85)} .sk-getmore-t{font:800 16px/1.2 system-ui} .sk-getmore-go{font:800 10px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#9fe0d6} /* ── A worn game screen the streamer's OBS source is hiding ─────────────────── The painted background rides the overlay's #bglayer, whose OBS opacity IS the backdrop slider, and that defaults to 0 ("see-through over your gameplay"). So a screen can be ON, look perfect in a browser tab, and show nothing on stream. mickixii hit this on 2026-09-11 with two gifted screens. Loud on purpose: the alternative is a streamer concluding the thing they were given is broken. */ .sk-bgwarn{ margin:0 0 18px; padding:16px 18px; border-radius:14px; font-size:14px; line-height:1.55; color:#ffd79a; background:linear-gradient(160deg,rgba(245,165,36,.16),rgba(245,165,36,.09)); border:1px solid rgba(245,165,36,.42); } .sk-bgwarn b{ color:#fff; } .sk-bgwarn .sk-bgfix{ display:block; margin-top:12px; font:inherit; font-weight:800; font-size:14px; color:#1b1205; background:#f5a524; border:none; border-radius:10px; padding:11px 18px; cursor:pointer; transition:.15s; } .sk-bgwarn .sk-bgfix:hover{ background:#ffb63f; transform:translateY(-1px); } .sk-bgwarn .sk-bgfix:disabled{ opacity:.6; cursor:default; transform:none; } @media (max-width:560px){ .sk-bgwarn .sk-bgfix{ width:100%; } } /* Folded shop shelves (v0.39.7): one row per shelf until "See all (n)". flair.js foldRows() marks every card past the first row. */ .fs-grid .fs-foldhide{display:none} .fs-seeall{margin-top:12px;min-height:44px}