/* Vibrant: the bright game-night style (Settings on the home page). Loaded last on the table and phone pages; everything here is scoped to html[data-style="vibrant"], so Classic is untouched. One purple room: glassy panels, chunky rounded type, green go-buttons, sunshine highlights. */ html[data-style="vibrant"] { --baize-hi: #4c3ee0; --baize: #3326b4; --baize-deep: #1c157a; --walnut: #6a5cf0; --walnut-dark: #1a136e; --leather: #221a8c; --brass: #ffd84a; --brass-hi: #ffe98c; --ivory: #ffffff; --ink: #ffffff; --ink-dim: rgba(232, 230, 255, .72); --gold-ink: rgba(232, 230, 255, .82); --gold-faint: rgba(255, 255, 255, .22); --onyx: #231a86; --onyx-2: #2c2196; --onyx-3: #3a2bb0; --champagne: #2fd08f; --champagne-hi: #6ff2bd; --hairline: rgba(255, 255, 255, .14); --hairline-hi: rgba(255, 255, 255, .3); --mute: rgba(232, 230, 255, .72); --display: 'Lilita One', 'Nunito', system-ui, sans-serif; --serif: 'Nunito', system-ui, sans-serif; --num: 'Lilita One', 'Nunito', system-ui, sans-serif; --ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --seat-0: #4a95ff; --seat-1: #ff9d3c; --seat-2: #a066ff; --seat-3: #33d18f; --seat-4: #ff5f52; --seat-5: #26c6da; --seat-6: #ffd84a; --seat-7: #ff5fae; /* the glass the panels are made of */ --v-glass: rgba(18, 12, 88, .5); --v-glass-hi: rgba(255, 255, 255, .1); --v-line: rgba(255, 255, 255, .16); --v-go: #3ae6a0; --v-go2: #1fc283; --v-go-edge: #11885a; --v-sun: #ffd84a; --v-lav: #8f86ff; /* @tex — generated textures (tools/vibrant-textures.cjs) */ --v-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27180%27%20height%3D%27180%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%271%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%200%200%200%20.4%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27180%27%20height%3D%27180%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); --v-speck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.75%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%27.0%20.0%20.18%20.0%20.0%20.22%200%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); --v-mottle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27700%27%20height%3D%27700%27%3E%3Cfilter%20id%3D%27m%27%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.005714286%27%20numOctaves%3D%274%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.55%200%200%200%200%20.5%200%200%200%200%201%200%200%20.85%200%20-.47%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27700%27%20height%3D%27700%27%20filter%3D%27url%28%23m%29%27%2F%3E%3C%2Fsvg%3E"); --v-mottle-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27800%27%3E%3Cfilter%20id%3D%27m%27%20x%3D%270%27%20y%3D%270%27%20width%3D%271%27%20height%3D%271%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.00375%27%20numOctaves%3D%273%27%20seed%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%20.02%200%200%200%200%20.01%200%200%200%200%20.12%201.2%200%200%200%20-.5%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20filter%3D%27url%28%23m%29%27%2F%3E%3C%2Fsvg%3E"); --v-doodles: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27520%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20opacity%3D%27.06%27%3E%20%3Cg%20transform%3D%27rotate%28-16%2090%20110%29%27%3E%3Crect%20x%3D%2745%27%20y%3D%2750%27%20width%3D%2790%27%20height%3D%27124%27%20rx%3D%2712%27%2F%3E%3Cpath%20d%3D%27M90%2095l12%2017-12%2017-12-17z%27%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27rotate%2820%20380%20120%29%27%3E%3Crect%20x%3D%27330%27%20y%3D%2770%27%20width%3D%27100%27%20height%3D%27100%27%20rx%3D%2720%27%2F%3E%3Ccircle%20cx%3D%27355%27%20cy%3D%2795%27%20r%3D%278%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27380%27%20cy%3D%27120%27%20r%3D%278%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27405%27%20cy%3D%27145%27%20r%3D%278%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27rotate%2812%20400%20400%29%27%3E%3Crect%20x%3D%27355%27%20y%3D%27338%27%20width%3D%2790%27%20height%3D%27124%27%20rx%3D%2712%27%2F%3E%3Cpath%20d%3D%27M400%20384c-13-15-30%203-16%2015l16%2015%2016-15c14-12-3-30-16-15z%27%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%27rotate%28-24%20120%20400%29%27%3E%3Crect%20x%3D%2775%27%20y%3D%27355%27%20width%3D%2792%27%20height%3D%2792%27%20rx%3D%2718%27%2F%3E%3Ccircle%20cx%3D%2797%27%20cy%3D%27377%27%20r%3D%277.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27145%27%20cy%3D%27377%27%20r%3D%277.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2797%27%20cy%3D%27425%27%20r%3D%277.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%27145%27%20cy%3D%27425%27%20r%3D%277.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%27M250%20250l9%2019%2021%203-15%2015%204%2021-19-10-19%2010%204-21-15-15%2021-3z%27%2F%3E%20%3Cpath%20d%3D%27M230%20470l14-14m-14%200l14%2014M470%20260l14-14m-14%200l14%2014%27%20stroke-linecap%3D%27round%27%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); --v-facet-0: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20%3E%3Cpolygon%20points%3D%270%2C0%20210%2C0%2070%2C170%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27210%2C0%20420%2C0%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27420%2C0%20600%2C0%20600%2C180%20520%2C90%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%2770%2C170%20300%2C140%20170%2C400%200%2C400%200%2C240%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%27300%2C140%20600%2C180%20500%2C400%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpolygon%20points%3D%27170%2C400%20300%2C140%20500%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.05%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C170%200%2C240%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27520%2C90%20600%2C180%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27500%2C400%20600%2C180%20600%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.07%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-facet-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20transform%3D%27translate%28600%200%29%20scale%28-1%201%29%27%3E%3Cpolygon%20points%3D%270%2C0%20210%2C0%2070%2C170%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27210%2C0%20420%2C0%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27420%2C0%20600%2C0%20600%2C180%20520%2C90%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%2770%2C170%20300%2C140%20170%2C400%200%2C400%200%2C240%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%27300%2C140%20600%2C180%20500%2C400%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpolygon%20points%3D%27170%2C400%20300%2C140%20500%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.05%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C170%200%2C240%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27520%2C90%20600%2C180%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27500%2C400%20600%2C180%20600%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.07%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-facet-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20transform%3D%27translate%280%20400%29%20scale%281%20-1%29%27%3E%3Cpolygon%20points%3D%270%2C0%20210%2C0%2070%2C170%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27210%2C0%20420%2C0%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.08%27%2F%3E%3Cpolygon%20points%3D%27420%2C0%20600%2C0%20600%2C180%20520%2C90%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%2770%2C170%20300%2C140%20170%2C400%200%2C400%200%2C240%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.06%27%2F%3E%3Cpolygon%20points%3D%27300%2C140%20600%2C180%20500%2C400%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpolygon%20points%3D%27170%2C400%20300%2C140%20500%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.05%27%2F%3E%3Cpolygon%20points%3D%270%2C0%2070%2C170%200%2C240%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27520%2C90%20600%2C180%20300%2C140%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27500%2C400%20600%2C180%20600%2C400%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.07%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-confetti: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27600%27%20height%3D%27400%27%20opacity%3D%27.8%27%3E%3Crect%20x%3D%27390%27%20y%3D%27362%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ffd84a%27%20transform%3D%27rotate%28107%20390%20362%29%27%2F%3E%3Crect%20x%3D%27137%27%20y%3D%27304%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ff5fae%27%20transform%3D%27rotate%2870%20137%20304%29%27%2F%3E%3Ccircle%20cx%3D%27481%27%20cy%3D%27136%27%20r%3D%274%27%20fill%3D%27%234ad6ff%27%2F%3E%3Cpath%20d%3D%27M572%20208%20l9%20-15%20l9%2015z%27%20fill%3D%27%237cf5b8%27%20transform%3D%27rotate%28107%20572%20208%29%27%2F%3E%3Ccircle%20cx%3D%27267%27%20cy%3D%27234%27%20r%3D%274%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%2771%27%20y%3D%27312%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ff9d3c%27%20transform%3D%27rotate%2814%2071%20312%29%27%2F%3E%3Cpath%20d%3D%27M264%20216%20l9%20-15%20l9%2015z%27%20fill%3D%27%23ffd84a%27%20transform%3D%27rotate%28214%20264%20216%29%27%2F%3E%3Crect%20x%3D%27441%27%20y%3D%27149%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ff5fae%27%20transform%3D%27rotate%28302%20441%20149%29%27%2F%3E%3Crect%20x%3D%2737%27%20y%3D%27163%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%234ad6ff%27%20transform%3D%27rotate%28312%2037%20163%29%27%2F%3E%3Crect%20x%3D%27468%27%20y%3D%27255%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%237cf5b8%27%20transform%3D%27rotate%28308%20468%20255%29%27%2F%3E%3Cpath%20d%3D%27M460%20315%20l9%20-15%20l9%2015z%27%20fill%3D%27%23ffffff%27%20transform%3D%27rotate%28217%20460%20315%29%27%2F%3E%3Ccircle%20cx%3D%27182%27%20cy%3D%27354%27%20r%3D%274%27%20fill%3D%27%23ff9d3c%27%2F%3E%3Crect%20x%3D%27383%27%20y%3D%27190%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ffd84a%27%20transform%3D%27rotate%28268%20383%20190%29%27%2F%3E%3Crect%20x%3D%27123%27%20y%3D%27201%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ff5fae%27%20transform%3D%27rotate%2880%20123%20201%29%27%2F%3E%3Crect%20x%3D%27305%27%20y%3D%27353%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%234ad6ff%27%20transform%3D%27rotate%28148%20305%20353%29%27%2F%3E%3Crect%20x%3D%27410%27%20y%3D%27287%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%237cf5b8%27%20transform%3D%27rotate%28334%20410%20287%29%27%2F%3E%3Ccircle%20cx%3D%27431%27%20cy%3D%2771%27%20r%3D%274%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27205%27%20cy%3D%2726%27%20r%3D%274%27%20fill%3D%27%23ff9d3c%27%2F%3E%3Crect%20x%3D%27347%27%20y%3D%2714%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ffd84a%27%20transform%3D%27rotate%2828%20347%2014%29%27%2F%3E%3Cpath%20d%3D%27M583%20194%20l9%20-15%20l9%2015z%27%20fill%3D%27%23ff5fae%27%20transform%3D%27rotate%28244%20583%20194%29%27%2F%3E%3Cpath%20d%3D%27M283%2040%20l9%20-15%20l9%2015z%27%20fill%3D%27%234ad6ff%27%20transform%3D%27rotate%28210%20283%2040%29%27%2F%3E%3Cpath%20d%3D%27M595%2038%20l9%20-15%20l9%2015z%27%20fill%3D%27%237cf5b8%27%20transform%3D%27rotate%28308%20595%2038%29%27%2F%3E%3Cpath%20d%3D%27M379%2034%20l9%20-15%20l9%2015z%27%20fill%3D%27%23ffffff%27%20transform%3D%27rotate%28307%20379%2034%29%27%2F%3E%3Cpath%20d%3D%27M339%20261%20l9%20-15%20l9%2015z%27%20fill%3D%27%23ff9d3c%27%20transform%3D%27rotate%28161%20339%20261%29%27%2F%3E%3Crect%20x%3D%27355%27%20y%3D%27225%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ffd84a%27%20transform%3D%27rotate%28335%20355%20225%29%27%2F%3E%3Crect%20x%3D%27220%27%20y%3D%27261%27%20width%3D%2714%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27%23ff5fae%27%20transform%3D%27rotate%28196%20220%20261%29%27%2F%3E%3C%2Fsvg%3E"); --v-waves-0: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20%3E%3Cpath%20d%3D%27M-30%2070%20C170%20-32.1%20400%203.799999999999997%20630%20-100%20L630%20-54%20C400%2061.3%20170%204.700000000000003%20-30%20116%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20150%20C170%2047.9%20400%2083.8%20630%20-20%20L630%2050%20C400%20171.3%20170%20103.9%20-30%20220%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.15%27%2F%3E%3Cpath%20d%3D%27M-30%20250%20C170%20147.9%20400%20183.8%20630%2080%20L630%20114%20C400%20226.3%20170%20175.10000000000002%20-30%20284%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20330%20C170%20227.9%20400%20263.8%20630%20160%20L630%20256%20C400%20383.8%20170%20304.70000000000005%20-30%20426%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.11%27%2F%3E%3Cpath%20d%3D%27M-30%20440%20C170%20337.9%20400%20373.8%20630%20270%20L630%20330%20C400%20448.8%20170%20385.9%20-30%20500%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpath%20d%3D%27M-30%20560%20C170%20457.9%20400%20493.8%20630%20390%20L630%20470%20C400%20593.8%20170%20521.9%20-30%20640%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20205%20C170%20102.9%20400%20138.8%20630%2035%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M-30%20400%20C170%20297.9%20400%20333.8%20630%20230%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.1%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-waves-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20transform%3D%27translate%28600%200%29%20scale%28-1%201%29%27%3E%3Cpath%20d%3D%27M-30%2070%20C170%20-32.1%20400%203.799999999999997%20630%20-100%20L630%20-54%20C400%2061.3%20170%204.700000000000003%20-30%20116%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20150%20C170%2047.9%20400%2083.8%20630%20-20%20L630%2050%20C400%20171.3%20170%20103.9%20-30%20220%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.15%27%2F%3E%3Cpath%20d%3D%27M-30%20250%20C170%20147.9%20400%20183.8%20630%2080%20L630%20114%20C400%20226.3%20170%20175.10000000000002%20-30%20284%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20330%20C170%20227.9%20400%20263.8%20630%20160%20L630%20256%20C400%20383.8%20170%20304.70000000000005%20-30%20426%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.11%27%2F%3E%3Cpath%20d%3D%27M-30%20440%20C170%20337.9%20400%20373.8%20630%20270%20L630%20330%20C400%20448.8%20170%20385.9%20-30%20500%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpath%20d%3D%27M-30%20560%20C170%20457.9%20400%20493.8%20630%20390%20L630%20470%20C400%20593.8%20170%20521.9%20-30%20640%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20205%20C170%20102.9%20400%20138.8%20630%2035%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M-30%20400%20C170%20297.9%20400%20333.8%20630%20230%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.1%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-waves-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20transform%3D%27translate%280%2060%29%27%3E%3Cpath%20d%3D%27M-30%2070%20C170%20-32.1%20400%203.799999999999997%20630%20-100%20L630%20-54%20C400%2061.3%20170%204.700000000000003%20-30%20116%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20150%20C170%2047.9%20400%2083.8%20630%20-20%20L630%2050%20C400%20171.3%20170%20103.9%20-30%20220%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.15%27%2F%3E%3Cpath%20d%3D%27M-30%20250%20C170%20147.9%20400%20183.8%20630%2080%20L630%20114%20C400%20226.3%20170%20175.10000000000002%20-30%20284%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20330%20C170%20227.9%20400%20263.8%20630%20160%20L630%20256%20C400%20383.8%20170%20304.70000000000005%20-30%20426%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.11%27%2F%3E%3Cpath%20d%3D%27M-30%20440%20C170%20337.9%20400%20373.8%20630%20270%20L630%20330%20C400%20448.8%20170%20385.9%20-30%20500%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%270.09%27%2F%3E%3Cpath%20d%3D%27M-30%20560%20C170%20457.9%20400%20493.8%20630%20390%20L630%20470%20C400%20593.8%20170%20521.9%20-30%20640%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%270.1%27%2F%3E%3Cpath%20d%3D%27M-30%20205%20C170%20102.9%20400%20138.8%20630%2035%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M-30%20400%20C170%20297.9%20400%20333.8%20630%20230%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.1%27%20stroke-width%3D%272%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --v-waves-spot: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20400%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cpath%20d%3D%27M-30%2040%20C170%20-86%20400%20-32%20630%20-160%20L630%20-40%20C400%20118%20170%2010%20-30%20160%20Z%27%20fill%3D%27%237a1a6a%27%20fill-opacity%3D%27.6%27%2F%3E%20%3Cpath%20d%3D%27M-30%20200%20C170%2074%20400%20128%20630%200%20L630%2070%20C400%20215.5%20170%20130%20-30%20270%20Z%27%20fill%3D%27%23ff6a2e%27%20fill-opacity%3D%27.7%27%2F%3E%20%3Cpath%20d%3D%27M-30%20290%20C170%20164%20400%20218%20630%2090%20L630%20136%20C400%20275.5%20170%20200.8%20-30%20336%20Z%27%20fill%3D%27%23ffad2e%27%20fill-opacity%3D%27.55%27%2F%3E%20%3Cpath%20d%3D%27M-30%20360%20C170%20234%20400%20288%20630%20160%20L630%20220%20C400%20363%20170%20282%20-30%20420%20Z%27%20fill%3D%27%23ff6a2e%27%20fill-opacity%3D%27.45%27%2F%3E%20%3Cpath%20d%3D%27M-30%20470%20C170%20344%20400%20398%20630%20270%20L630%20410%20C400%20573%20170%20456%20-30%20610%20Z%27%20fill%3D%27%23a3164a%27%20fill-opacity%3D%27.55%27%2F%3E%20%3Cpath%20d%3D%27M-30%20180%20C170%2054%20400%20108%20630%20-20%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.25%27%20stroke-width%3D%273%27%2F%3E%20%3Cpath%20d%3D%27M-30%20345%20C170%20219%20400%20273%20630%20145%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%272%27%2F%3E%20%3C%2Fsvg%3E"); --v-fire-spot: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%20360%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%27base%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%27.15%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2333103f%27%2F%3E%3Cstop%20offset%3D%27.2%27%20stop-color%3D%27%234a1243%27%2F%3E%3Cstop%20offset%3D%27.38%27%20stop-color%3D%27%238c1640%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23d01e34%27%2F%3E%3Cstop%20offset%3D%27.75%27%20stop-color%3D%27%23ec3a26%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff7a24%27%2F%3E%3C%2FlinearGradient%3E%20%3CradialGradient%20id%3D%27glowTR%27%20cx%3D%27.95%27%20cy%3D%27.02%27%20r%3D%27.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff9a7a%27%20stop-opacity%3D%27.85%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ff6a4a%27%20stop-opacity%3D%27.35%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff5a3a%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27glowBR%27%20cx%3D%27.98%27%20cy%3D%271%27%20r%3D%27.45%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd04a%27%20stop-opacity%3D%27.95%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffa02a%27%20stop-opacity%3D%27.45%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff8a2a%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27plum%27%20cx%3D%27.1%27%20cy%3D%27.5%27%20r%3D%27.55%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23260a36%27%20stop-opacity%3D%27.65%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23260a36%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27glow%27%20x%3D%27-20%25%27%20y%3D%27-20%25%27%20width%3D%27140%25%27%20height%3D%27140%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2714%27%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%271200%27%20height%3D%27360%27%20fill%3D%27url%28%23base%29%27%2F%3E%20%3Crect%20width%3D%271200%27%20height%3D%27360%27%20fill%3D%27url%28%23plum%29%27%2F%3E%20%3Cpath%20d%3D%27M150%20-10%20L235%20-10%20L85%20370%20L0%20370%20Z%27%20fill%3D%27%23b06cd8%27%20opacity%3D%27.1%27%2F%3E%20%3Cpath%20d%3D%27M300%20-10%20L340%20-10%20L210%20370%20L170%20370%20Z%27%20fill%3D%27%23b06cd8%27%20opacity%3D%27.06%27%2F%3E%20%3Cg%20filter%3D%27url%28%23glow%29%27%20opacity%3D%27.8%27%3E%3Cpath%20d%3D%27M360%20400%20C668%20330%20976%20-1.5%201240%20-40%20L1240%20-24%20C976%2020.1%20678%20355.6%20374.4%20400%20Z%27%20fill%3D%27%23c0142e%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M422%20400%20C708.3%20300%20994.5999999999999%2049.00000000000001%201240%20-6%20L1240%2028%20C994.5999999999999%2094.9%20718.3%20354.4%20452.6%20400%20Z%27%20fill%3D%27%23ff4421%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M484%20400%20C748.5999999999999%20270%201013.1999999999999%2099.5%201240%2028%20L1240%2080%20C1013.1999999999999%20169.7%20758.5999999999999%20353.2%20530.8%20400%20Z%27%20fill%3D%27%23ff7a1c%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M546%20400%20C788.9%20330%201031.8%20100.5%201240%2062%20L1240%2087%20C1031.8%20134.25%20798.9%20370%20568.5%20400%20Z%27%20fill%3D%27%23ffb22a%27%20opacity%3D%270.92%27%2F%3E%3Cpath%20d%3D%27M608%20400%20C829.2%20300%201050.4%20151%201240%2096%20L1240%20139%20C1050.4%20209.05%20839.2%20368.8%20646.7%20400%20Z%27%20fill%3D%27%23e8222c%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M670%20400%20C869.5%20270%201069%20201.5%201240%20130%20L1240%20146%20C1069%20223.1%20879.5%20295.6%20684.4%20400%20Z%27%20fill%3D%27%23ff9a24%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M732%20400%20C909.8%20330%201087.6%20202.5%201240%20164%20L1240%20198%20C1087.6%20248.4%20919.8%20384.4%20762.6%20400%20Z%27%20fill%3D%27%23ffd04a%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M794%20400%20C950.1%20300%201106.2%20253%201240%20198%20L1240%20250%20C1106.2%20323.2%20960.1%20383.2%20840.8%20400%20Z%27%20fill%3D%27%23d81c2c%27%20opacity%3D%270.92%27%2F%3E%3Cpath%20d%3D%27M856%20400%20C990.4%20270%201124.8%20303.5%201240%20232%20L1240%20257%20C1124.8%20337.25%201000.4%20310%20878.5%20400%20Z%27%20fill%3D%27%23ff6a1e%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M918%20400%20C1030.7%20330%201143.4%20304.5%201240%20266%20L1240%20309%20C1143.4%20362.55%201040.7%20398.8%20956.7%20400%20Z%27%20fill%3D%27%23ffc23a%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M980%20400%20C1071%20300%201162%20355%201240%20300%20L1240%20316%20C1162%20376.6%201081%20325.6%20994.4%20400%20Z%27%20fill%3D%27%23ff5420%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M1042%20400%20C1111.3%20270%201180.6%20405.5%201240%20334%20L1240%20368%20C1180.6%20451.4%201121.3%20324.4%201072.6%20400%20Z%27%20fill%3D%27%23ffe27a%27%20opacity%3D%270.92%27%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D%27M360%20400%20C668%20330%20976%20-1.5%201240%20-40%20L1240%20-24%20C976%2020.1%20678%20355.6%20374.4%20400%20Z%27%20fill%3D%27%23c0142e%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M422%20400%20C708.3%20300%20994.5999999999999%2049.00000000000001%201240%20-6%20L1240%2028%20C994.5999999999999%2094.9%20718.3%20354.4%20452.6%20400%20Z%27%20fill%3D%27%23ff4421%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M484%20400%20C748.5999999999999%20270%201013.1999999999999%2099.5%201240%2028%20L1240%2080%20C1013.1999999999999%20169.7%20758.5999999999999%20353.2%20530.8%20400%20Z%27%20fill%3D%27%23ff7a1c%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M546%20400%20C788.9%20330%201031.8%20100.5%201240%2062%20L1240%2087%20C1031.8%20134.25%20798.9%20370%20568.5%20400%20Z%27%20fill%3D%27%23ffb22a%27%20opacity%3D%270.92%27%2F%3E%3Cpath%20d%3D%27M608%20400%20C829.2%20300%201050.4%20151%201240%2096%20L1240%20139%20C1050.4%20209.05%20839.2%20368.8%20646.7%20400%20Z%27%20fill%3D%27%23e8222c%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M670%20400%20C869.5%20270%201069%20201.5%201240%20130%20L1240%20146%20C1069%20223.1%20879.5%20295.6%20684.4%20400%20Z%27%20fill%3D%27%23ff9a24%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M732%20400%20C909.8%20330%201087.6%20202.5%201240%20164%20L1240%20198%20C1087.6%20248.4%20919.8%20384.4%20762.6%20400%20Z%27%20fill%3D%27%23ffd04a%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M794%20400%20C950.1%20300%201106.2%20253%201240%20198%20L1240%20250%20C1106.2%20323.2%20960.1%20383.2%20840.8%20400%20Z%27%20fill%3D%27%23d81c2c%27%20opacity%3D%270.92%27%2F%3E%3Cpath%20d%3D%27M856%20400%20C990.4%20270%201124.8%20303.5%201240%20232%20L1240%20257%20C1124.8%20337.25%201000.4%20310%20878.5%20400%20Z%27%20fill%3D%27%23ff6a1e%27%20opacity%3D%270.62%27%2F%3E%3Cpath%20d%3D%27M918%20400%20C1030.7%20330%201143.4%20304.5%201240%20266%20L1240%20309%20C1143.4%20362.55%201040.7%20398.8%20956.7%20400%20Z%27%20fill%3D%27%23ffc23a%27%20opacity%3D%270.72%27%2F%3E%3Cpath%20d%3D%27M980%20400%20C1071%20300%201162%20355%201240%20300%20L1240%20316%20C1162%20376.6%201081%20325.6%20994.4%20400%20Z%27%20fill%3D%27%23ff5420%27%20opacity%3D%270.82%27%2F%3E%3Cpath%20d%3D%27M1042%20400%20C1111.3%20270%201180.6%20405.5%201240%20334%20L1240%20368%20C1180.6%20451.4%201121.3%20324.4%201072.6%20400%20Z%27%20fill%3D%27%23ffe27a%27%20opacity%3D%270.92%27%2F%3E%20%3Crect%20width%3D%271200%27%20height%3D%27360%27%20fill%3D%27url%28%23glowTR%29%27%2F%3E%20%3Crect%20width%3D%271200%27%20height%3D%27360%27%20fill%3D%27url%28%23glowBR%29%27%2F%3E%20%3Cpath%20d%3D%27M520%20400%20C700%20300%20900%20230%201240%2060%27%20fill%3D%27none%27%20stroke%3D%27%23fff3c4%27%20stroke-opacity%3D%27.5%27%20stroke-width%3D%273%27%2F%3E%20%3Cpath%20d%3D%27M700%20400%20C840%20330%201000%20270%201240%20200%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.3%27%20stroke-width%3D%272%27%2F%3E%20%3Cpath%20d%3D%27M1110%2022%20L1160%2072%20L1110%20122%20L1060%2072%20Z%27%20fill%3D%27%239a6ae0%27%20fill-opacity%3D%27.35%27%20stroke%3D%27%23c9a0ff%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%277%27%20stroke-linejoin%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M478%2066%20l30%20-10%20-8%2034%20z%27%20fill%3D%27%23ffb02a%27%2F%3E%20%3Cpath%20d%3D%27M440%20262%20l44%20-18%20-10%2052%20z%27%20fill%3D%27%23ffa62a%27%2F%3E%20%3Cpath%20d%3D%27M1092%20300%20l52%20-22%20-14%2060%20z%27%20fill%3D%27%23ffbf2e%27%2F%3E%20%3Cpath%20d%3D%27M1040%20250%20l26%20-10%20-6%2028%20z%27%20fill%3D%27%23ffcf4a%27%20opacity%3D%27.9%27%2F%3E%20%3Crect%20x%3D%27410%27%20y%3D%27190%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%23e2242e%27%20transform%3D%27rotate%2822%20418%20198%29%27%2F%3E%20%3Crect%20x%3D%271000%27%20y%3D%2764%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%272%27%20fill%3D%27%23e2242e%27%20transform%3D%27rotate%28-14%201007%2071%29%27%2F%3E%20%3Crect%20x%3D%27760%27%20y%3D%2734%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%23ff8a2a%27%20transform%3D%27rotate%2830%20765%2039%29%27%2F%3E%20%3Cpath%20d%3D%27M610%20330%20l20%20-6%20-4%2022%20z%27%20fill%3D%27%23ffd24a%27%20opacity%3D%27.85%27%2F%3E%20%3C%2Fsvg%3E"); --v-waves-bar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20600%20100%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cpath%20d%3D%27M-10%2070%20C150%2030%20300%20100%20610%2020%20V-10%20H-10%20Z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.05%27%2F%3E%20%3Cpath%20d%3D%27M-10%20100%20C200%2060%20380%20110%20610%2050%20V110%20H-10%20Z%27%20fill%3D%27%23000%27%20fill-opacity%3D%27.18%27%2F%3E%20%3Cpath%20d%3D%27M-10%2062%20C160%2024%20310%2092%20610%2014%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-opacity%3D%27.1%27%20stroke-width%3D%271.5%27%2F%3E%20%3C%2Fsvg%3E"); /* @tex-end */ } html[data-style="vibrant"] body { font-family: var(--ui); } /* playing cards keep their printed faces */ html[data-style="vibrant"] .card { --display: 'Cormorant Garamond', Georgia, serif; --num: 'DM Serif Display', Georgia, serif; --serif: 'Cormorant Garamond', Georgia, serif; --ivory: #efe9dc; } /* ================================================================ TABLE SCREEN */ html[data-style="vibrant"] #felt { background: #25279a !important; } /* the play area: the same textured room, with a lighter printed oval where the cards land. It sits on its own layer (painted once), so cards moving over it don't make it repaint. */ html[data-style="vibrant"] #felt::before { content: ''; display: block; position: absolute; inset: 0; opacity: 1; mix-blend-mode: normal; pointer-events: none; transform: translateZ(0); will-change: transform; background: var(--v-grain) 0 0 / 180px, radial-gradient(ellipse 50% 44% at 50% 51%, rgba(150, 140, 255, .1) 0 97%, rgba(255, 255, 255, .12) 97.5% 98.6%, transparent 99%), var(--v-doodles) 0 0 / 520px, radial-gradient(ellipse 70% 55% at 50% 0%, rgba(96, 104, 255, .4), transparent 70%), radial-gradient(ellipse 60% 60% at 12% 75%, rgba(120, 70, 230, .22), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 30%, transparent 45%, rgba(6, 3, 34, .55)), #25279a !important; background-blend-mode: overlay, normal, normal, normal, normal, normal, normal !important; } /* the rail: a clean rounded frame instead of leather and brass */ html[data-style="vibrant"] #rail::before { display: none; } html[data-style="vibrant"] #rail::after { border: 0; box-shadow: none; } html[data-style="vibrant"] #rail .stitch { display: none; } html[data-style="vibrant"] #rail .brass { border: .35vmin solid rgba(255, 255, 255, .16); border-radius: 3vmin; box-shadow: none; } html[data-style="vibrant"] #print { color: rgba(255, 255, 255, .5); } html[data-style="vibrant"] #print text { font-family: 'Nunito', sans-serif !important; font-weight: 900; } /* seats: glassy name cards */ html[data-style="vibrant"] .plate { background: var(--v-glass); border: .22vmin solid var(--v-line); outline: 0; border-radius: 2.2vmin; box-shadow: 0 .8vmin 0 -.2vmin rgba(10, 6, 60, .35), 0 1.4vmin 3vmin rgba(10, 6, 60, .3); backdrop-filter: blur(6px); } html[data-style="vibrant"] .seat.turn .plate { border-color: var(--v-sun); box-shadow: 0 0 0 .3vmin rgba(255, 216, 74, .35), 0 0 4vmin rgba(255, 216, 74, .35); } html[data-style="vibrant"] .who .name { letter-spacing: .01em; text-shadow: 0 .35vmin 0 rgba(10, 6, 60, .45); } html[data-style="vibrant"] .seat.turn .who .name { color: #fff; text-shadow: 0 .35vmin 0 rgba(10, 6, 60, .45), 0 0 2.4vmin rgba(255, 216, 74, .6); } html[data-style="vibrant"] .who .dot { width: 2.8vmin; height: 2.8vmin; background: var(--seat-color); box-shadow: inset 0 -.35vmin 0 rgba(0, 0, 0, .25), 0 0 0 .3vmin rgba(255, 255, 255, .85); } html[data-style="vibrant"] .seat.empty .who .name { font-style: normal; font-weight: 800; color: var(--mute); text-shadow: none; } html[data-style="vibrant"] .seat.empty .who .dot { border-color: rgba(255, 255, 255, .4); box-shadow: none; background: transparent; } html[data-style="vibrant"] .badge { border-radius: 99px; font-weight: 900; letter-spacing: .08em; } html[data-style="vibrant"] .badge.dealer { color: #3a2400; background: linear-gradient(180deg, #ffe680, var(--v-sun)); box-shadow: 0 .3vmin 0 #c99a10; } html[data-style="vibrant"] .meta { font-weight: 800; } html[data-style="vibrant"] .seat-actions button, html[data-style="vibrant"] .tool { border-radius: 99px; font-weight: 800; letter-spacing: .08em; color: #fff; background: var(--v-glass-hi); border-color: var(--v-line); } html[data-style="vibrant"] .seat-actions button:hover, html[data-style="vibrant"] .tool:hover { color: #fff; border-color: var(--v-lav); background: rgba(143, 134, 255, .3); } html[data-style="vibrant"] .bubble { font-family: var(--ui); font-style: normal; font-weight: 900; color: #241a7a; border-radius: 99px; background: linear-gradient(180deg, #fff, #eeeaff); box-shadow: 0 .4vmin 0 #c9c2ff, 0 1vmin 2.4vmin rgba(10, 6, 60, .4); } html[data-style="vibrant"] #watermark { color: #ff5fae; opacity: .14; } html[data-style="vibrant"] #felt .card.win { box-shadow: 0 0 0 .4vmin var(--v-sun), 0 0 4.5vmin rgba(255, 216, 74, .7); } /* lobby: a white join card and a glass panel of game info */ html[data-style="vibrant"] .tent { border-radius: 2.6vmin; color: #241a7a; transform: rotate(-1.5deg); background: linear-gradient(180deg, #ffffff, #eeeaff); box-shadow: 0 1vmin 0 -.2vmin #c9c2ff, 0 2.4vmin 5vmin rgba(10, 6, 60, .5); } html[data-style="vibrant"] #qr svg path, html[data-style="vibrant"] #qr svg rect[fill="black"] { fill: #241a7a; } html[data-style="vibrant"] .tent-cap { font-family: var(--display); font-weight: 400; } html[data-style="vibrant"] .tent-room, html[data-style="vibrant"] .tent-note { color: #6a64a8; font-style: normal; font-weight: 800; } html[data-style="vibrant"] .tent-room b { color: #241a7a; } html[data-style="vibrant"] .lobby-info { padding: 3vmin 3.4vmin; border-radius: 3vmin; background: var(--v-glass); border: .22vmin solid var(--v-line); box-shadow: 0 1vmin 0 -.2vmin rgba(10, 6, 60, .4), 0 2.4vmin 5vmin rgba(10, 6, 60, .4); backdrop-filter: blur(8px); } html[data-style="vibrant"] .game-title { font-weight: 400; letter-spacing: .01em; text-shadow: 0 .6vmin 0 rgba(10, 6, 60, .5); } html[data-style="vibrant"] .game-blurb { font-style: normal; font-weight: 700; color: var(--mute); } html[data-style="vibrant"] .back { font-weight: 800; color: var(--mute); } html[data-style="vibrant"] .eyebrow { font-weight: 900; color: var(--v-sun); letter-spacing: .2em; } html[data-style="vibrant"] .gp::before { content: ''; width: 1.6vmin; height: 1.6vmin; border-radius: 50%; border: .25vmin solid rgba(255, 255, 255, .4); align-self: center; } html[data-style="vibrant"] .gp.on::before { content: ''; background: var(--v-sun); border-color: var(--v-sun); } html[data-style="vibrant"] .gp b { font-weight: 400; } html[data-style="vibrant"] .settings { font-weight: 700; color: #fff; } html[data-style="vibrant"] .settings select { color: #fff; background: var(--v-glass-hi); border: .15vmin solid var(--v-line); border-radius: 99px; padding: .4vmin 1.4vmin; } html[data-style="vibrant"] .settings input { accent-color: var(--v-go2); } html[data-style="vibrant"] .url { color: var(--mute); } html[data-style="vibrant"] .mirror { font-weight: 900; color: rgba(255, 255, 255, .6); } /* the big go-button */ html[data-style="vibrant"] button.big { font-family: var(--ui); font-weight: 900; letter-spacing: .08em; border-radius: 1.8vmin; color: #08321f; background: linear-gradient(180deg, var(--v-go), var(--v-go2)); box-shadow: 0 .6vmin 0 var(--v-go-edge), 0 1.6vmin 3vmin rgba(10, 6, 60, .35); } html[data-style="vibrant"] button.big:active { transform: translateY(.5vmin); box-shadow: 0 .1vmin 0 var(--v-go-edge); } html[data-style="vibrant"] button.big:disabled { color: rgba(255, 255, 255, .75); background: var(--v-glass-hi); border: .2vmin solid var(--v-line); box-shadow: none; } html[data-style="vibrant"] button.big.ghost { color: #fff; background: var(--v-glass-hi); border: .2vmin solid var(--v-line); box-shadow: none; opacity: 1; } /* end of hand / winner: a bright card instead of a paper slip */ html[data-style="vibrant"] #overlay { color: #fff; border-radius: 3.4vmin; transform: translate(-50%, -50%); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 216, 74, .22), transparent 70%), linear-gradient(165deg, #5141e6, #2f229e); border: .3vmin solid rgba(255, 255, 255, .2); box-shadow: 0 1.2vmin 0 -.3vmin rgba(10, 6, 60, .5), 0 3vmin 7vmin rgba(10, 6, 60, .6); animation: vPop .5s cubic-bezier(.2, 1.4, .4, 1); } @keyframes vPop { from { transform: translate(-50%, -50%) scale(.85); opacity: 0; } } html[data-style="vibrant"] #overlay h2 { color: #fff; font-weight: 400; font-size: 6.4vmin; text-shadow: 0 .6vmin 0 rgba(10, 6, 60, .5); } html[data-style="vibrant"] #overlay p { font-weight: 700; } html[data-style="vibrant"] #overlay .scoreline, html[data-style="vibrant"] #overlay .scores { border-top-color: rgba(255, 255, 255, .2); font-weight: 800; } html[data-style="vibrant"] #overlay .scores li { padding: .7vmin 1.4vmin; margin-bottom: .6vmin; border-radius: 1.4vmin; background: rgba(255, 255, 255, .1); } html[data-style="vibrant"] #overlay .scores li:first-child { background: rgba(255, 216, 74, .22); box-shadow: inset 0 0 0 .2vmin rgba(255, 216, 74, .6); } html[data-style="vibrant"] #overlay .scores li::after { border-bottom-color: rgba(255, 255, 255, .25); } html[data-style="vibrant"] #overlay .scores li b { color: var(--v-sun); } html[data-style="vibrant"] #overlay .hint { color: var(--mute); font-weight: 700; } html[data-style="vibrant"] #overlay .tool { color: #fff; border-color: var(--v-line); } html[data-style="vibrant"] .pill { font-weight: 900; color: var(--mute); } /* ================================================================ PHONE */ /* The room behind the home page and the phone: one fixed layer, painted once and kept on the GPU, so scrolling only moves the page over it (instead of repainting a fixed background every frame). */ html[data-style="vibrant"] body.home, html[data-style="vibrant"] body.phone { color: #fff; background: transparent; } html[data-style="vibrant"] body.home::before, html[data-style="vibrant"] body.phone::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1; mix-blend-mode: normal; transform: translateZ(0); will-change: transform; background: var(--v-grain) 0 0 / 180px, var(--v-doodles) 0 0 / 520px, radial-gradient(ellipse 70% 55% at 50% 0%, rgba(96, 104, 255, .4), transparent 70%), radial-gradient(ellipse 60% 60% at 12% 75%, rgba(120, 70, 230, .22), transparent 70%), radial-gradient(ellipse 120% 90% at 50% 30%, transparent 45%, rgba(6, 3, 34, .55)), #25279a; background-blend-mode: overlay, normal, normal, normal, normal, normal; } html[data-style="vibrant"] #app h1, html[data-style="vibrant"] #app h2 { font-weight: 400; text-shadow: 0 4px 0 rgba(10, 6, 60, .45); } html[data-style="vibrant"] #app .sub, html[data-style="vibrant"] #waitMsg { font-style: normal; font-weight: 700; color: var(--mute); } html[data-style="vibrant"] #app .eyebrow { font-weight: 900; color: var(--v-sun); letter-spacing: .18em; } html[data-style="vibrant"] .field { font-weight: 900; letter-spacing: .14em; color: var(--mute); } html[data-style="vibrant"] .field input { font-family: var(--ui); font-weight: 800; font-size: 22px; color: #fff; padding: 12px 16px; background: var(--v-glass); border: 2px solid var(--v-line); border-radius: 16px; } html[data-style="vibrant"] .field input::placeholder { color: rgba(232, 230, 255, .4); } html[data-style="vibrant"] .field input:focus { border-color: var(--v-lav); } html[data-style="vibrant"] #room { font-family: var(--num); letter-spacing: .3em; } html[data-style="vibrant"] button.primary, html[data-style="vibrant"] .panel-btn.go { font-family: var(--ui); font-weight: 900; letter-spacing: .08em; color: #08321f; border-radius: 16px; background: linear-gradient(180deg, var(--v-go), var(--v-go2)); box-shadow: 0 5px 0 var(--v-go-edge), 0 12px 24px rgba(10, 6, 60, .35); } html[data-style="vibrant"] button.primary { font-size: 16px; } html[data-style="vibrant"] button.primary:active, html[data-style="vibrant"] .panel-btn.go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--v-go-edge); } html[data-style="vibrant"] button.ghost, html[data-style="vibrant"] .panel-btn { font-family: var(--ui); font-weight: 800; color: #fff; border-radius: 14px; background: var(--v-glass); border: 2px solid var(--v-line); box-shadow: 0 4px 0 rgba(10, 6, 60, .35); } html[data-style="vibrant"] .panel-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(10, 6, 60, .35); } html[data-style="vibrant"] .panel-btn.on, html[data-style="vibrant"] .panel-btn.rank.on, html[data-style="vibrant"] .panel-btn.who.on { color: #fff; background: linear-gradient(180deg, #a49cff, #7d72ff); border-color: transparent; box-shadow: 0 4px 0 #5247d6; } html[data-style="vibrant"] .spinner { border-color: rgba(255, 255, 255, .2); border-top-color: var(--v-sun); border-width: 4px; } html[data-style="vibrant"] .mt-felt { font-family: var(--display); letter-spacing: .12em; color: rgba(255, 255, 255, .7); border-radius: 22px; background: radial-gradient(ellipse at center, #5a4cf0, #3428b8); border: 4px solid rgba(255, 255, 255, .2); box-shadow: 0 6px 0 rgba(10, 6, 60, .4), 0 14px 30px rgba(10, 6, 60, .4); } html[data-style="vibrant"] .seatbtn { font-family: var(--ui); font-weight: 900; border-radius: 16px; } html[data-style="vibrant"] #statusMain { font-family: var(--display); font-weight: 400; text-shadow: 0 3px 0 rgba(10, 6, 60, .4); } html[data-style="vibrant"] #statusSub, html[data-style="vibrant"] #handHint { font-style: normal; font-weight: 700; color: var(--mute); } html[data-style="vibrant"] .hud .team, html[data-style="vibrant"] .hud .trump { font-weight: 800; } html[data-style="vibrant"] #toast { font-family: var(--ui); font-weight: 800; border-radius: 16px; } /* ================================================================ HOME PAGE */ html[data-style="vibrant"] { background: #25279a; } html[data-style="vibrant"] .caps { font-family: var(--ui); font-weight: 800; letter-spacing: .12em; } html[data-style="vibrant"] .bar { background: var(--v-grain) 0 0 / 180px, var(--v-waves-bar) 0 0 / 100% 100%, #160f5c; background-blend-mode: overlay, normal, normal; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 0 rgba(6, 3, 34, .35); } html[data-style="vibrant"] .brand span { font-family: var(--display); font-weight: 400; font-size: 23px; letter-spacing: .02em; text-transform: none; color: #fff; text-shadow: 0 3px 0 #120c4a; } html[data-style="vibrant"] .join, html[data-style="vibrant"] .gear { background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .1); } html[data-style="vibrant"] .join label, html[data-style="vibrant"] .gear { font-family: var(--ui); font-weight: 800; letter-spacing: .08em; color: var(--mute); } html[data-style="vibrant"] .gear:hover { color: #fff; border-color: var(--v-lav); } html[data-style="vibrant"] .join input { color: #fff; font-family: var(--num); } html[data-style="vibrant"] .join button, html[data-style="vibrant"] .play-btn, html[data-style="vibrant"] .hover-play { font-family: var(--ui); font-weight: 900; letter-spacing: .06em; color: #06301c; background: var(--v-grain) 0 0 / 180px, var(--v-go); background-blend-mode: overlay, normal; box-shadow: 0 4px 0 var(--v-go-edge), 0 10px 22px rgba(6, 3, 34, .4); } html[data-style="vibrant"] .play-btn { font-size: 18px; letter-spacing: .03em; text-transform: none; border-radius: 16px; padding: 15px 42px; } html[data-style="vibrant"] a.spot:hover .play-btn { transform: translateY(-2px); box-shadow: 0 6px 0 var(--v-go-edge), 0 14px 28px rgba(6, 3, 34, .45); } /* spotlight: the banner from the reference — warm swooshes, a big title, a wide green Play pill, players and time underneath, round arrows either side and a tab of dots at the bottom. The game's props sit straight on the banner (no picture frame), fading in from the left. */ html[data-style="vibrant"] .spot { grid-template-columns: minmax(0, 1fr); min-height: 360px; border-radius: 26px; background: var(--v-grain) 0 0 / 180px, var(--v-fire-spot) center / cover, #b81c3e; background-blend-mode: soft-light, normal, normal; box-shadow: inset 0 0 0 3px rgba(255, 170, 190, .35), 0 8px 0 rgba(6, 3, 34, .45), 0 26px 50px rgba(6, 3, 34, .5); } html[data-style="vibrant"] .spot .pic { inset: -9% 3% -9% 36%; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); } html[data-style="vibrant"] .spot .pic::before, html[data-style="vibrant"] .spot .pic::after { display: none; } html[data-style="vibrant"] .spot .stage { position: absolute; left: 39%; bottom: 36px; padding: 0; --s: 168px; z-index: 2; } html[data-style="vibrant"] .spot .info { padding: 44px 30px 60px 96px; max-width: 560px; text-shadow: none; } html[data-style="vibrant"] .spot .kicker, html[data-style="vibrant"] .spot .tags { display: none; } html[data-style="vibrant"] .spot h1 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; font-size: clamp(52px, 5.6vw, 84px); line-height: .95; margin: 0 0 14px; text-shadow: 3px 0 0 #4a0f3e, -3px 0 0 #4a0f3e, 0 3px 0 #4a0f3e, 0 -3px 0 #4a0f3e, 2px 2px 0 #4a0f3e, -2px -2px 0 #4a0f3e, 2px -2px 0 #4a0f3e, -2px 2px 0 #4a0f3e, 0 7px 0 #3a0a30; } html[data-style="vibrant"] .spot p { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.4; max-width: 320px; margin: 0 0 24px; text-shadow: 0 2px 0 rgba(40, 6, 50, .45); } html[data-style="vibrant"] .spot .play-btn { width: 250px; justify-content: center; padding: 16px 0; border-radius: 999px; font-size: 22px; letter-spacing: .02em; } html[data-style="vibrant"] .spot .play-btn::before { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; } html[data-style="vibrant"] .spot-meta { display: flex; gap: 30px; margin-top: 24px; font-family: var(--ui); font-weight: 700; font-size: 16px; color: #fff; text-shadow: 0 2px 0 rgba(40, 6, 50, .4); } html[data-style="vibrant"] .spot-meta span { display: inline-flex; align-items: center; gap: 10px; } html[data-style="vibrant"] .spot-meta svg { width: 22px; height: 22px; color: #fff; } html[data-style="vibrant"] .spot.swap .info, html[data-style="vibrant"] .spot.swap .pic, html[data-style="vibrant"] .spot.swap .stage { animation: spotIn .55s cubic-bezier(.2, .8, .2, 1); } @keyframes spotIn { from { opacity: 0; transform: translateX(16px); } } html[data-style="vibrant"] .spot-nav { display: grid; place-items: center; position: absolute; top: 50%; z-index: 3; width: 50px; height: 50px; margin-top: -25px; padding: 0; cursor: pointer; border-radius: 50%; color: #fff; background: rgba(34, 14, 74, .6); border: 2px solid rgba(255, 255, 255, .16); box-shadow: 0 4px 0 rgba(20, 4, 40, .35); transition: background .2s, transform .15s; } html[data-style="vibrant"] .spot-nav svg { width: 22px; height: 22px; } html[data-style="vibrant"] .spot-nav:hover { background: rgba(60, 26, 120, .8); } html[data-style="vibrant"] .spot-nav:active { transform: translateY(2px); } html[data-style="vibrant"] .spot-nav.prev { left: 18px; } html[data-style="vibrant"] .spot-nav.next { right: 18px; } html[data-style="vibrant"] .spot-dots { display: flex; gap: 11px; position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); padding: 12px 22px 10px; border-radius: 18px 18px 0 0; background: #1e1564; } html[data-style="vibrant"] .spot-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .32); transition: background .2s, transform .2s; } html[data-style="vibrant"] .spot-dots button:hover { background: rgba(255, 255, 255, .6); } html[data-style="vibrant"] .spot-dots button.on { background: #fff; transform: scale(1.15); } html[data-style="vibrant"] .tag { font-family: var(--ui); font-weight: 800; letter-spacing: .06em; background: rgba(40, 6, 50, .4); color: #fff; border: 2px solid rgba(255, 255, 255, .16); } /* filters: dark chips, a light lavender one when picked */ html[data-style="vibrant"] .chip, html[data-style="vibrant"] .seg { font-family: var(--ui); font-weight: 800; font-size: 14px; color: #dcd9ff; background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .08); } html[data-style="vibrant"] .chip { padding: 10px 20px; border-radius: 14px; } html[data-style="vibrant"] .seg { border-radius: 14px; } html[data-style="vibrant"] .seg button { font-family: var(--ui); font-weight: 800; color: #dcd9ff; border-radius: 10px; } html[data-style="vibrant"] .chip:hover { color: #fff; border-color: rgba(255, 255, 255, .3); } html[data-style="vibrant"] .chip.on, html[data-style="vibrant"] .seg button.on { color: #17104d; background: #aea7ff; border-color: transparent; box-shadow: 0 3px 0 #6a60e0; } html[data-style="vibrant"] .chip.fav-chip::before { color: var(--v-sun); } html[data-style="vibrant"] .chip.fav-chip.on::before { color: #17104d; } html[data-style="vibrant"] .search input { font-family: var(--ui); font-weight: 700; color: #fff; background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .08); border-radius: 14px; } html[data-style="vibrant"] .search input:focus { border-color: var(--v-lav); background: rgba(8, 5, 44, .7); } html[data-style="vibrant"] .search input::placeholder, html[data-style="vibrant"] .search svg { color: var(--mute); } html[data-style="vibrant"] .count .caps, html[data-style="vibrant"] .section-head span { color: var(--mute); } html[data-style="vibrant"] .section-head h2 { font-family: var(--display); font-weight: 400; font-size: 36px; text-shadow: 0 4px 0 #120c4a; } /* game tiles: solid printed colour with facets and grain, the picture in a rimmed window */ html[data-style="vibrant"] .shelf { gap: 20px; } html[data-style="vibrant"] .box { border-radius: 20px; color: #fff; background: var(--v-grain) 0 0 / 180px, var(--vw, var(--v-waves-0)) 0 0 / 100% 100%, var(--vf, var(--v-facet-0)) 0 0 / 100% 100%, var(--va, #3f7df0); background-blend-mode: overlay, normal, normal, normal; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 7px 0 var(--vb, #1f4fd6), 0 16px 26px rgba(6, 3, 34, .45); } html[data-style="vibrant"] a.box:hover, html[data-style="vibrant"] a.box:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 3px #fff, 0 7px 0 var(--vb, #1f4fd6), 0 24px 40px rgba(6, 3, 34, .55); } html[data-style="vibrant"] .art { margin: 10px 10px 0; border-radius: 14px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85), 0 5px 0 rgba(6, 3, 34, .28); } html[data-style="vibrant"] .art .cover { border-radius: 14px; } html[data-style="vibrant"] .art::after { content: ''; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9); pointer-events: none; z-index: 1; } html[data-style="vibrant"] .box h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .01em; text-shadow: 0 3px 0 var(--vb, #1b1352); } html[data-style="vibrant"] .meta .who, html[data-style="vibrant"] .meta .kind { font-family: var(--ui); font-weight: 800; color: rgba(255, 255, 255, .95); } html[data-style="vibrant"] .meta .dot { background: rgba(255, 255, 255, .7); } html[data-style="vibrant"] .new { font-family: var(--ui); font-weight: 900; color: #3a2400; background: var(--v-sun); box-shadow: 0 2px 0 #c99a10; } html[data-style="vibrant"] .fav { background: rgba(8, 5, 44, .5); } html[data-style="vibrant"] .empty { font-family: var(--display); font-style: normal; color: var(--mute); } html[data-style="vibrant"] footer { border-top: 2px solid rgba(255, 255, 255, .08); } html[data-style="vibrant"] footer .wrap { font-family: var(--ui); font-weight: 700; color: var(--mute); } html[data-style="vibrant"] footer a { color: var(--v-sun); } /* the settings window */ html[data-style="vibrant"] .settings { color: #fff; background: var(--v-grain) 0 0 / 180px, #2a1f9e; background-blend-mode: overlay, normal; border: 2px solid rgba(255, 255, 255, .14); border-radius: 24px; box-shadow: 0 10px 0 #120c4a, 0 40px 80px rgba(6, 3, 34, .6); } html[data-style="vibrant"] .settings::backdrop { background: rgba(8, 5, 44, .6); } html[data-style="vibrant"] .set-head h2 { font-family: var(--display); font-weight: 400; text-shadow: 0 4px 0 #120c4a; } html[data-style="vibrant"] .set-x { color: #fff; border-color: rgba(255, 255, 255, .16); } html[data-style="vibrant"] .set-label, html[data-style="vibrant"] .style-opt small, html[data-style="vibrant"] .set-note { color: var(--mute); } html[data-style="vibrant"] .style-opt { color: #fff; background: rgba(8, 5, 44, .45); border-color: rgba(255, 255, 255, .1); } html[data-style="vibrant"] .style-opt strong { font-weight: 900; } html[data-style="vibrant"] .style-opt[aria-checked="true"] { border-color: var(--v-sun); background: rgba(255, 216, 74, .1); } html[data-style="vibrant"] .style-opt[aria-checked="true"] strong::after { color: var(--v-sun); } @media (max-width: 860px) { html[data-style="vibrant"] .spot { min-height: 560px; } html[data-style="vibrant"] .spot .pic { inset: -2% -8% 40% -8%; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); } html[data-style="vibrant"] .spot .info { align-self: end; padding: 0 26px 62px; } html[data-style="vibrant"] .spot .stage { left: 20px; top: 20px; bottom: auto; --s: 112px; } html[data-style="vibrant"] .spot-nav { top: 30%; width: 40px; height: 40px; margin-top: -20px; } html[data-style="vibrant"] .spot-nav.prev { left: 10px; } html[data-style="vibrant"] .spot-nav.next { right: 10px; } html[data-style="vibrant"] .spot .play-btn { width: 100%; max-width: 280px; } } @media (max-width: 600px) { html[data-style="vibrant"] .shelf { gap: 12px; } html[data-style="vibrant"] .art { margin: 7px 7px 0; border-radius: 12px; } html[data-style="vibrant"] .box { border-radius: 16px; } html[data-style="vibrant"] .box h3 { font-size: 19px; } html[data-style="vibrant"] .brand span { font-size: 18px; } } /* ================================================================ LOGOS */ img.logo-v { display: none; } html[data-style="vibrant"] img.logo-c { display: none; } html[data-style="vibrant"] img.logo-v { display: block; } html[data-style="vibrant"] .brand img.logo-v { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 #0c0840); } html[data-style="vibrant"] img.mark.logo-v { width: 78px; height: 78px; filter: drop-shadow(0 5px 0 #0c0840); } /* the wordmark: chunky white letters with a dark outline, like the box titles */ html[data-style="vibrant"] .brand span { color: #fff; -webkit-text-stroke: 0; paint-order: stroke fill; text-shadow: 2px 0 0 #1b1352, -2px 0 0 #1b1352, 0 2px 0 #1b1352, 0 -2px 0 #1b1352, 1.5px 1.5px 0 #1b1352, -1.5px -1.5px 0 #1b1352, 1.5px -1.5px 0 #1b1352, -1.5px 1.5px 0 #1b1352, 0 5px 0 #0c0840; } html[data-style="vibrant"] #app h1 { text-shadow: 2.5px 0 0 #1b1352, -2.5px 0 0 #1b1352, 0 2.5px 0 #1b1352, 0 -2.5px 0 #1b1352, 2px 2px 0 #1b1352, -2px -2px 0 #1b1352, 2px -2px 0 #1b1352, -2px 2px 0 #1b1352, 0 6px 0 #0c0840; } html[data-style="vibrant"] { background: #25279a; } /* the game pictures: printed grain over the bright set, same as the tiles and boxes */ html[data-style="vibrant"] .art::before, html[data-style="vibrant"] .spot .pic::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: var(--v-grain) 0 0 / 180px; mix-blend-mode: overlay; } /* ================================================================ SPEED (looks identical) */ /* Tiles far off screen are skipped entirely (no layout or painting) until they scroll near. */ .shelf > .box { content-visibility: auto; contain-intrinsic-size: auto 300px; } /* ================================================================ TILES LIKE THE REFERENCE */ /* The picture fills the whole tile; the name, players and time are printed over it, bottom left. The game's box stands in the bottom-right corner. */ html[data-style="vibrant"] .box { overflow: hidden; } html[data-style="vibrant"] .art { margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; box-shadow: none; } html[data-style="vibrant"] .art .cover { border-radius: 0; } html[data-style="vibrant"] .art::after { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); border-radius: 20px; } html[data-style="vibrant"] .info-row { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 0; padding: 0 96px 14px 16px; pointer-events: none; } html[data-style="vibrant"] .info-row .box-stage { left: auto; right: 14px; bottom: 14px; --s: 70px; } html[data-style="vibrant"] .box h3 { font-size: 27px; margin: 0 0 6px; text-shadow: 2px 0 0 #1b1352, -2px 0 0 #1b1352, 0 2px 0 #1b1352, 0 -2px 0 #1b1352, 1.5px 1.5px 0 #1b1352, -1.5px -1.5px 0 #1b1352, 1.5px -1.5px 0 #1b1352, -1.5px 1.5px 0 #1b1352, 0 4px 0 #1b1352; } html[data-style="vibrant"] .meta { gap: 18px; } html[data-style="vibrant"] .meta .kind, html[data-style="vibrant"] .meta .dot { display: none; } html[data-style="vibrant"] .meta .who, html[data-style="vibrant"] .meta .time { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ui); font-weight: 800; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #1b1352, -1px -1px 0 #1b1352, 1px -1px 0 #1b1352, -1px 1px 0 #1b1352, 0 2px 0 #1b1352; } html[data-style="vibrant"] .meta .who svg, html[data-style="vibrant"] .meta .time svg { width: 17px; height: 17px; opacity: 1; filter: drop-shadow(0 1px 0 #1b1352); } html[data-style="vibrant"] a.box:hover .art .cover { will-change: transform; } @media (max-width: 600px) { html[data-style="vibrant"] .info-row { padding: 0 60px 10px 10px; } html[data-style="vibrant"] .info-row .box-stage { right: 8px; bottom: 10px; --s: 46px; } html[data-style="vibrant"] .box h3 { font-size: 19px; } html[data-style="vibrant"] .meta { gap: 10px; } html[data-style="vibrant"] .meta .who, html[data-style="vibrant"] .meta .time { font-size: 12px; } html[data-style="vibrant"] .meta .kind { display: none; } } /* ================================================================ ACCOUNT (sign in) */ html[data-style="vibrant"] .acct-init { color: #17104d; background: #aea7ff; } html[data-style="vibrant"] .acct-field input { font-family: var(--ui); font-weight: 700; color: #fff; background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .1); } html[data-style="vibrant"] .acct-field input:focus { border-color: var(--v-lav); } html[data-style="vibrant"] .acct-field, html[data-style="vibrant"] .acct-or, html[data-style="vibrant"] .acct-me small { color: var(--mute); } html[data-style="vibrant"] .acct-or::before, html[data-style="vibrant"] .acct-or::after { background: rgba(255, 255, 255, .15); } html[data-style="vibrant"] .acct-go { font-family: var(--ui); font-weight: 900; letter-spacing: .06em; color: #06301c; background: var(--v-go); box-shadow: 0 4px 0 var(--v-go-edge); } html[data-style="vibrant"] .acct-go.ghost { color: #fff; background: rgba(8, 5, 44, .45); border: 2px solid rgba(255, 255, 255, .14); box-shadow: none; } html[data-style="vibrant"] .acct-links button { color: var(--v-sun); } html[data-style="vibrant"] .acct-google { border: 0; box-shadow: 0 4px 0 rgba(6, 3, 34, .35); } html[data-style="vibrant"] .style-price { font-family: var(--ui); color: #fff; background: rgba(8, 5, 44, .45); border-color: rgba(255, 255, 255, .12); } html[data-style="vibrant"] .style-price.owned { color: #3a2400; background: var(--v-sun); } html[data-style="vibrant"] .shop-msg { font-family: var(--ui); background: rgba(8, 5, 44, .45); border: 2px solid rgba(255, 255, 255, .12); } html[data-style="vibrant"] .shop-go { font-family: var(--ui); font-weight: 900; letter-spacing: .06em; color: #06301c; background: var(--v-go); box-shadow: 0 4px 0 var(--v-go-edge); } html[data-style="vibrant"] .dough-pill { font-family: var(--ui); font-weight: 900; color: #fff; background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .1); } /* ================================================================ PARENT CONTROLS */ html[data-style="vibrant"] .pc-open { color: #fff; background: rgba(8, 5, 44, .45); border-color: rgba(255, 255, 255, .1); } html[data-style="vibrant"] .pc-open:hover { border-color: var(--v-sun); } html[data-style="vibrant"] .pc-open > svg { color: var(--v-sun); } html[data-style="vibrant"] .pc-open strong { font-weight: 900; } html[data-style="vibrant"] .pc-tabs button { font-family: var(--ui); color: #fff; border: 2px solid rgba(255, 255, 255, .12); } html[data-style="vibrant"] .pc-tabs button[aria-selected="true"] { color: #3a2400; background: var(--v-sun); border-color: transparent; } html[data-style="vibrant"] .pc-search, html[data-style="vibrant"] .pc-add input { font-weight: 700; color: #fff; background: rgba(8, 5, 44, .55); border: 2px solid rgba(255, 255, 255, .1); } html[data-style="vibrant"] .pc-games { border: 2px solid rgba(255, 255, 255, .1); background: rgba(8, 5, 44, .35); } html[data-style="vibrant"] .pc-games li + li { border-top-color: rgba(255, 255, 255, .08); } html[data-style="vibrant"] .pc-games input:checked + i { background: var(--v-go); } html[data-style="vibrant"] .pc-words li { color: #fff; background: rgba(8, 5, 44, .5); border-color: rgba(255, 255, 255, .12); } html[data-style="vibrant"] .home-note { font-family: var(--ui); color: #fff; background: #2a1f9e; border: 2px solid var(--v-sun); box-shadow: 0 6px 0 #120c4a; }