/* Vibathlon Trials shell: Brand Guide v6.4.0 (section 5 void, 7 glass, 9 type, 10 shape, 27 eyebrow/links). Trials accent (owner D12, green) is used the way the other games use their game gradient. */ body.vx-trials-page{margin:0;background:#0a0a14;color:rgba(255,255,255,.75);font-family:'DM Sans',-apple-system,sans-serif;font-size:16px;line-height:1.6;min-height:100vh} .vx-trials-page *{box-sizing:border-box} .vx-trials{--trials-accent:#4f9a7c;--trials-accent-deep:#1f5a46;max-width:820px;margin:16px auto;padding:28px 24px 130px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:radial-gradient(ellipse at 0 0,rgba(79,154,124,.2),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(31,90,70,.18),transparent 55%),rgba(255,255,255,.03);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} .vx-trials [hidden]{display:none!important} .vx-trials h1,.vx-trials h2,.vx-trials h3{font-family:Syne,-apple-system,sans-serif;color:#fff;line-height:1.2;letter-spacing:-.02em} .vx-trials h1{font-size:clamp(27px,5vw,40px);margin:8px 0;font-weight:800} .vx-trials h2{font-size:24px;font-weight:700} .vx-trials p{margin:12px 0} .vx-trials a{color:#a5b4fc;text-decoration:underline} /* Games back link standard (vibesxs-game-companion-overrides.css): no underline, 44px tap height. */ .vx-trials a.vx-trials-back{display:inline-flex;align-items:center;min-height:44px;color:#cfc8f7;font-size:16px;font-weight:700;text-decoration:none!important} .vx-trials a.vx-trials-back:hover{color:#fff} .vx-trials-qa{font-size:14px;color:rgba(255,255,255,.6)} .vx-trials-back+.vx-trials-qa,.vx-trials>.vx-trials-qa:first-child{font-family:Syne,-apple-system,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)} .vx-trials-eyebrow{font-family:Syne,-apple-system,sans-serif;font-size:10px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:#8fd0b0} .vx-trials-heading{display:flex;align-items:center;gap:20px;margin:25px 0} .vx-trials-heading img{flex:0 0 92px} .vx-trials-status{min-height:26px} .vx-trials button,.vx-trials-button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:.5rem 1.15rem;border:0;border-radius:9999px;background:linear-gradient(135deg,#2f7f62,#1f5a46);color:#fff;font-family:Syne,-apple-system,sans-serif;font-size:.85rem;font-weight:800;line-height:1.4;cursor:pointer;text-decoration:none!important;box-shadow:0 5px 0 #143b2e,0 10px 18px rgba(0,0,0,.3);transition:transform .15s ease,box-shadow .15s ease} .vx-trials a.vx-trials-button{color:#fff} .vx-trials button:active,.vx-trials-button:active{transform:translateY(3px);box-shadow:0 2px 0 #143b2e,0 6px 12px rgba(0,0,0,.3)} .vx-trials button:disabled{opacity:.6;cursor:wait} .vx-trials .vx-trials-secondary{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.15);box-shadow:none} .vx-trials .vx-trials-link{background:none;color:#a5b4fc;border:0;box-shadow:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:underline!important} .vx-trials :focus-visible{outline:3px solid #fff;outline-offset:4px} .vx-trials-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0} /* Gate (D-12): the sign-in actions stay on screen at the bottom of the viewport while the results scroll behind them. */ /* The gate section generates no box of its own, so the sticky bar's container is the whole page column and it can pin to the screen edge even when the gate starts below the fold. */ .vx-trials [data-trials-gate]{display:contents} .vx-trials [data-trials-gate] .vx-trials-actions{position:sticky;bottom:0;z-index:4;margin:20px -24px 0;padding:12px 24px;background:rgba(10,10,20,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.07)} .vx-trials-course{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-left:25px} .vx-trials-run{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-block:1px solid rgba(255,255,255,.07);padding:13px 0;position:sticky;top:0;background:rgba(10,10,20,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:3;font-size:14px;color:rgba(255,255,255,.85)} .vx-trials-result{display:flex;gap:16px;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)} .vx-trials-result small{display:block;color:rgba(255,255,255,.6);font-size:14px} .vx-trials-board{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0} .vx-trials-board button{border-radius:10px;padding:12px 6px;min-height:60px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:none;overflow-wrap:anywhere} .vx-trials-board button[aria-pressed=true]{background:linear-gradient(135deg,#2f7f62,#1f5a46);border-color:transparent} .vx-trials-song{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07)} .vx-trials-song h3{font-size:19px;margin:0} .vx-trials-song small{font-size:14px;color:rgba(255,255,255,.6)} .vx-trials-song label{display:inline-flex;flex-direction:column;gap:5px;margin:12px 10px 0 0;max-width:100%} .vx-trials select{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.15);min-height:44px;padding:6px 14px;font:inherit;border-radius:9999px;max-width:100%} .vx-trials-dialog{max-width:min(460px,calc(100vw - 32px));border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(15,15,26,.96);padding:25px;color:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)} .vx-trials-dialog::backdrop{background:rgba(10,10,20,.72)} .vx-trials-dialog button{margin:7px} .vx-trials-music{position:fixed;right:24px;bottom:22px;z-index:8} .vx-trials .vx-trials-orb{width:56px;height:56px;padding:0;border-radius:50%;background:linear-gradient(135deg,#4f9a7c,#1f5a46);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:25px;box-shadow:0 8px 32px rgba(79,154,124,.35)} .vx-trials-music-panel{position:absolute;right:0;bottom:70px;width:min(370px,calc(100vw - 40px));max-height:70vh;overflow:auto;background:rgba(15,15,26,.96);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)} .vx-trials-music-panel h2{font-size:22px} .vx-trials-music-panel label{display:flex;gap:10px;align-items:flex-start;padding:10px 0} .vx-trials-music-panel input{margin-top:6px;min-width:18px;min-height:18px;accent-color:#4f9a7c} .vx-trials-music-panel button{margin:6px 0} .vx-trials-music-panel label.vx-trials-search{display:block;padding:0;margin:12px 0 8px} .vx-trials-search-label{display:block;margin-bottom:6px;font-family:Syne,-apple-system,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)} .vx-trials-search input[type=search]{width:100%;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.15);border-radius:9999px;background:rgba(255,255,255,.04);color:#fff;font:14px 'DM Sans',sans-serif;-webkit-appearance:none;appearance:none} .vx-trials-search input[type=search]::placeholder{color:rgba(255,255,255,.4)} .vx-trials-search-results{max-height:260px;overflow:auto;margin-bottom:8px} .vx-trials-search-note{margin:8px 2px;font-size:13px;color:rgba(255,255,255,.6)} .vx-trials-search-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .vx-trials-music-panel .vx-trials-search-row{display:grid;gap:2px;width:100%;margin:0;padding:8px 14px;min-height:44px;text-align:left;justify-content:start;align-items:start;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);box-shadow:none;font-family:'DM Sans',sans-serif;font-weight:400} .vx-trials-music-panel .vx-trials-search-row strong{font-size:14px;font-weight:600;color:#fff} .vx-trials-music-panel .vx-trials-search-row small{font-size:12px;color:rgba(255,255,255,.6)} .vx-trials-music-panel .vx-trials-search-row:hover{background:rgba(255,255,255,.08)} .vx-trials-verdict{font-size:14px;color:rgba(255,255,255,.6)} @media(max-width:480px){.vx-trials{padding:20px 16px 110px;margin:8px auto;border-radius:16px} .vx-trials [data-trials-gate] .vx-trials-actions{margin:20px -16px 0;padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{grid-column:1/-1}.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-login]:first-child{grid-column:1/-1} .vx-trials:has([data-trials-gate]:not([hidden])) .vx-trials-music{bottom:150px} .vx-trials-heading{gap:12px;align-items:flex-start} .vx-trials-heading img{width:68px;height:68px;flex-basis:68px} .vx-trials-heading h1{font-size:27px} .vx-trials-course{grid-template-columns:1fr} .vx-trials-board{gap:7px} .vx-trials-board button{font-size:14px} .vx-trials-actions>*{width:100%} .vx-trials-music{right:16px;bottom:16px} .vx-trials-result{gap:10px}} @media(max-width:340px){.vx-trials-heading{flex-direction:column;align-items:flex-start;gap:8px} .vx-trials-heading img{width:56px;height:56px;flex-basis:56px} .vx-trials-heading>div{min-width:0} .vx-trials-heading h1{font-size:25px;overflow-wrap:anywhere}} @media(prefers-reduced-motion:reduce){.vx-trials *{scroll-behavior:auto;animation:none!important;transition:none!important}} /* S8 briefing: shared game identities, no new game icon system. */ .vx-trials-game-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0} .vx-trials-game-cards li{display:flex;gap:14px;min-width:0;padding:18px 16px;border:1px solid rgba(143,208,176,.3);border-radius:16px;background:linear-gradient(145deg,rgba(143,208,176,.2),rgba(79,154,124,.1))} .vx-trials-game-icon{font-size:28px;flex:0 0 34px;line-height:1.5} .vx-trials-game-cards h2{font-size:19px;margin:4px 0 8px;overflow-wrap:anywhere} .vx-trials-game-cards p{font-size:14px;color:rgba(255,255,255,.82);line-height:1.5;margin:0} .vx-trials-how{padding:8px 0 16px;border-top:1px solid rgba(255,255,255,.08)} .vx-trials-landing{max-width:940px} @media(max-width:560px){.vx-trials-game-cards{grid-template-columns:1fr}.vx-trials-game-cards li{padding:14px}.vx-trials-heading img{width:72px;height:72px;flex-basis:72px}} /* How to play before each game: values measured from Solo's panel (spec 18.15, parity), green accent in place of Solo's lilac. */ .vx-trials.is-run .vx-trials-heading,.vx-trials.is-run .vx-trials-run{display:none} .vx-trials-bar{display:flex;align-items:center;gap:14px;margin:0 0 24px;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.125)} .vx-trials-bar[hidden]{display:none} .vx-trials-bar-mark{display:grid;place-items:center;width:42px;height:42px} .vx-trials-bar-mark img{width:34px;height:34px} .vx-trials-bar>div{flex:1;min-width:0} .vx-trials-bar p{margin:0;font:700 16px/1.6 "DM Sans",-apple-system,sans-serif;letter-spacing:.12em;color:#8fd0b0} .vx-trials-bar strong{display:block;font:700 16px/1.6 "DM Sans",-apple-system,sans-serif;color:#fff} .vx-trials-bar-clock{font:700 18px/1 "DM Sans",-apple-system,sans-serif;font-variant-numeric:tabular-nums;color:#fff} .vx-trials-howto{position:relative;isolation:isolate;overflow:hidden;max-width:760px;margin:clamp(16px,3vh,30px) auto;padding:clamp(24px,5vw,48px);border:1px solid rgba(143,208,176,.3);border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(143,208,176,.32),transparent 55%),radial-gradient(circle at 0 100%,rgba(47,127,98,.4),transparent 55%),linear-gradient(145deg,#27483a,#173026)} .vx-trials-howto>*{position:relative;z-index:1} .vx-trials-howto::before{content:"";position:absolute;z-index:0;top:-130px;right:-130px;width:420px;height:420px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(143,208,176,.2) 0 2px,transparent 2px 34px);-webkit-mask-image:radial-gradient(circle,#000 25%,transparent 70%);mask-image:radial-gradient(circle,#000 25%,transparent 70%)} .vx-trials-howto::after{position:absolute;z-index:0;right:clamp(14px,4vw,36px);bottom:-18px;font-size:clamp(110px,22vw,190px);line-height:1;opacity:.1;filter:saturate(.4);pointer-events:none} .vx-trials-howto[data-game=mood_ring]::after{content:"🫧"} .vx-trials-howto[data-game=vibe_shuffle]::after{content:"🔀"} .vx-trials-howto[data-game=rapid_pace]::after{content:"⏱️"} .vx-trials-howto[data-game=mood_memory]::after{content:"🎵"} .vx-trials-howto .vx-trials-demo{background:radial-gradient(circle at center,rgba(143,208,176,.38),#12251d),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/18px 18px} .vx-trials-howto .vx-trials-eyebrow{margin:0 0 4px;font:700 16px/1.6 "DM Sans",-apple-system,sans-serif;letter-spacing:.12em;text-transform:none;color:#8fd0b0} .vx-trials-howto h2{margin:8px 0 14px;font:700 24px/1.2 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-howto p{max-width:56ch;margin:0 0 14px;color:#fff;font-size:16px;line-height:1.6} .vx-trials-howto .vx-trials-howto-lead{font-weight:700} .vx-trials-demo{position:relative;height:150px;margin:28px 0;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:18px;background:radial-gradient(circle at center,rgba(143,208,176,.38),#12251d)} .vx-trials-demo span{position:absolute;top:50%;display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.53);border-radius:12px;background:#2f7f62;font-size:24px;transform:translateY(-50%)} .vx-trials-demo-a{left:20%;animation:vx-demo-left 5s ease-in-out infinite} .vx-trials-demo-b{right:20%;animation:vx-demo-right 5s ease-in-out infinite} .vx-trials-demo .vx-trials-demo-target{left:calc(50% - 27px);opacity:0;background:#3d9f7c;animation:vx-demo-success 5s ease-in-out infinite} .vx-trials-demo--mood_ring .vx-trials-demo-a{border-radius:50%;animation-name:vx-demo-bubble} .vx-trials-demo--mood_ring .vx-trials-demo-b{border-radius:50%;animation-name:vx-demo-bubble-two} .vx-trials-demo--vibe_shuffle .vx-trials-demo-a{animation-name:vx-demo-place} .vx-trials-demo--vibe_shuffle .vx-trials-demo-b{animation-name:vx-demo-slot} .vx-trials-demo--mood_memory .vx-trials-demo-a,.vx-trials-demo--mood_memory .vx-trials-demo-b{animation-name:vx-demo-flip} .vx-trials .vx-trials-howto button.vx-trials-primary{min-height:48px;padding:12px 22px;border:0;border-radius:14px;background:#8fd0b0;color:#0e1612;font:800 16px/1.6 "DM Sans",-apple-system,sans-serif;box-shadow:0 8px 24px rgba(143,208,176,.27)} @keyframes vx-demo-left{0%,12%{left:20%;transform:translateY(-50%)}45%,65%{left:43%;transform:translateY(-50%) scale(1.08)}85%,100%{left:20%;transform:translateY(-50%)}} @keyframes vx-demo-right{0%,12%{right:20%;transform:translateY(-50%)}45%,65%{right:43%;transform:translateY(-50%) scale(1.08)}85%,100%{right:20%;transform:translateY(-50%)}} @keyframes vx-demo-success{0%,43%,72%,100%{opacity:0;transform:translateY(-50%) scale(.5)}50%,65%{opacity:1;transform:translateY(-50%) scale(1)}} @keyframes vx-demo-bubble{0%,100%{left:20%;transform:translateY(-50%)}25%{left:30%;transform:translateY(-70%)}55%{left:45%;transform:translateY(-50%) scale(.2);opacity:.2}70%{opacity:1}} @keyframes vx-demo-bubble-two{0%,100%{right:20%;transform:translateY(-50%)}25%{right:27%;transform:translateY(-25%)}55%{right:42%;transform:translateY(-50%) scale(.2);opacity:.2}70%{opacity:1}} @keyframes vx-demo-place{0%,15%,100%{left:20%;transform:translateY(-50%)}55%,75%{left:45%;transform:translateY(-50%)}} @keyframes vx-demo-slot{0%,45%,100%{opacity:.45;transform:translateY(-50%)}55%,75%{opacity:1;transform:translateY(-50%) scale(1.15)}} @keyframes vx-demo-flip{0%,18%,100%{transform:translateY(-50%) rotateY(180deg);filter:brightness(.6)}38%,68%{transform:translateY(-50%) rotateY(0);filter:brightness(1.3)}} @media(max-width:560px){.vx-trials-bar-clock{font-size:16px}} /* Gate as an offer (spec 18.17; review 2026-10-16). */ [data-trials-gate] .vx-trials-eyebrow{margin:18px 0 0} [data-trials-gate] .vx-trials-gate-title{margin:6px 0 4px;font:700 clamp(24px,5vw,30px)/1.2 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-gate-meta{margin:0 0 6px;font-size:14px;color:rgba(255,255,255,.7)} [data-trials-gate-results]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 6px} .vx-trials-progress{margin:14px 0 4px} .vx-trials-progress ol{display:flex;gap:6px;list-style:none;margin:0 0 8px;padding:0} .vx-trials-progress li{flex:1;display:grid;place-items:center;min-width:0;height:28px;border:1px dashed rgba(143,208,176,.4);border-radius:9999px;font:700 12px/1 'DM Sans',sans-serif;color:rgba(255,255,255,.55)} .vx-trials-progress li.is-done{border:1px solid #8fd0b0;background:#2f7f62;color:#fff;box-shadow:0 0 14px rgba(143,208,176,.35)} .vx-trials-progress p{margin:0;font-size:14px;font-weight:700;color:#8fd0b0} .vx-trials-tile{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:12px 44px 12px 12px;border:1px solid rgba(143,208,176,.45);border-radius:10px;background:linear-gradient(145deg,rgba(143,208,176,.26),rgba(79,154,124,.12));box-shadow:0 0 18px rgba(143,208,176,.12)} .vx-trials-tile--skipped{border-style:dashed;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);box-shadow:none} .vx-trials-tile>div{flex:1;min-width:0} .vx-trials-tile-kicker{display:block;font:700 10px/1.4 Syne,-apple-system,sans-serif;letter-spacing:.14em;color:#8fd0b0} .vx-trials-tile strong{display:block;font:700 15px/1.3 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-tile small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:rgba(255,255,255,.78)} .vx-trials-tile-score{position:absolute;right:12px;bottom:10px;font:700 13px/1 'DM Sans',sans-serif;color:#fff;white-space:nowrap} .vx-trials-tick{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#8fd0b0;color:#0e1612;font:800 14px/1 'DM Sans',sans-serif} .vx-trials-tile--skipped .vx-trials-tick{background:transparent;border:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7)} .vx-trials-tile--done .vx-trials-next-icon{background:rgba(143,208,176,.35);border-color:#8fd0b0} .vx-trials-tile-kicker+strong{margin-top:1px} .vx-trials-tile>div{padding-bottom:16px} .vx-trials-next-games .vx-trials-tile-kicker{color:rgba(255,255,255,.6)} .vx-trials-offer{margin:22px 0 4px;padding:20px;border:1px solid rgba(143,208,176,.3);border-radius:18px;background:radial-gradient(circle at 100% 0,rgba(143,208,176,.22),transparent 55%),linear-gradient(145deg,#27483a,#173026)} .vx-trials-offer .vx-trials-eyebrow{margin:0} .vx-trials-offer h3{margin:6px 0 8px;font:700 22px/1.2 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-offer p{margin:0 0 12px;color:#fff;font-size:15px;line-height:1.55} .vx-trials-next-games{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .vx-trials-next-games li{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid rgba(143,208,176,.28);border-radius:10px;background:rgba(10,10,20,.28)} .vx-trials-next-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid rgba(143,208,176,.45);border-radius:12px;background:rgba(47,127,98,.35);font-size:22px} .vx-trials-next-games strong{display:block;font:700 14px/1.3 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-next-games small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.78)} .vx-trials-gate-honest{margin:16px 0 6px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)} .vx-trials-support{margin:8px 0 0;font-size:14px;color:#8fd0b0} .vx-trials-link-note{font-weight:400;opacity:.8} @media(max-width:560px){[data-trials-gate-results],.vx-trials-next-games{grid-template-columns:1fr}.vx-trials-offer{padding:16px}.vx-trials-link-note{display:block;font-size:12px}.vx-trials-progress li{height:26px}} /* Gate colour: one mood palette per game (Brand Guide section 6), brand indigo-to-purple primary (section 27.4); Trials green stays as the identity colour only. */ .vx-trials-tile{--accent:#8fd0b0;--rgb:143,208,176;border:1px solid rgba(var(--rgb),.6);background:linear-gradient(145deg,rgba(var(--rgb),.24),rgba(255,255,255,.03) 70%);box-shadow:0 0 20px rgba(var(--rgb),.16)} .vx-trials-tile--skipped{border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);box-shadow:none} .vx-trials-tile--skipped .vx-trials-next-icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);filter:grayscale(.6)} .vx-trials-tile-kicker{color:var(--accent,#8fd0b0)} .vx-trials-tile--skipped .vx-trials-tile-kicker{color:rgba(255,255,255,.5)} .vx-trials-tile .vx-trials-next-icon,.vx-trials-next-games li .vx-trials-next-icon{border:1px solid var(--accent);background:rgba(var(--rgb),.3);box-shadow:0 0 14px rgba(var(--rgb),.3)} .vx-trials-tile--done .vx-trials-next-icon{background:rgba(var(--rgb),.34)} .vx-trials-tick{background:var(--accent);color:#0a0a14;box-shadow:0 0 12px rgba(var(--rgb),.5)} .vx-trials-tile--skipped .vx-trials-tick{background:transparent;box-shadow:none} .vx-trials-tile-score{font-size:14px;color:#fff} .vx-trials-progress li{border:1px dashed rgba(var(--rgb),.6);color:var(--accent)} .vx-trials-progress li.is-done{border:1px solid var(--accent);background:var(--accent);color:#0a0a14;box-shadow:0 0 14px rgba(var(--rgb),.55)} .vx-trials-progress p{color:#fff} .vx-trials-offer{border:1px solid rgba(165,180,252,.4);background:radial-gradient(circle at 100% 0,rgba(118,75,162,.55),transparent 60%),radial-gradient(circle at 0 100%,rgba(102,126,234,.35),transparent 55%),linear-gradient(145deg,#1a1840,#24153d)} .vx-trials-offer .vx-trials-eyebrow{color:#a5b4fc} .vx-trials-next-games li{border:1px solid rgba(var(--rgb),.5);background:linear-gradient(145deg,rgba(var(--rgb),.16),rgba(10,10,20,.35))} .vx-trials-next-games .vx-trials-tile-kicker{color:var(--accent)} .vx-trials .vx-trials-gate-honest strong{color:#fff} [data-trials-gate] .vx-trials-support{color:#a5b4fc} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 8px 24px rgba(102,126,234,.4)} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-login].vx-trials-secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15)} .vx-trials [data-trials-gate] .vx-trials-actions .vx-trials-link{color:#a5b4fc} /* Clear split between games done and games still to come; icons readable on a dark backdrop (owner, 2026-10-16). */ .vx-trials-section-label{margin:16px 0 8px;font:700 12px/1.4 Syne,-apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase} .vx-trials-section-label--done{color:#fff} .vx-trials-section-label--done span{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:#fff;color:#0a0a14;font-size:11px;letter-spacing:0} .vx-trials-section-label--todo{color:#a5b4fc} .vx-trials-offer .vx-trials-section-label--todo{margin-top:14px} .vx-trials-divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:rgba(255,255,255,.7);font:700 11px/1 Syne,-apple-system,sans-serif;letter-spacing:.2em} .vx-trials-divider::before,.vx-trials-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(165,180,252,.55))} .vx-trials-divider::after{background:linear-gradient(270deg,transparent,rgba(165,180,252,.55))} .vx-trials-tile .vx-trials-next-icon,.vx-trials-next-games li .vx-trials-next-icon{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:rgba(10,10,20,.72);border:1.5px solid var(--accent);box-shadow:0 0 16px rgba(var(--rgb),.4);font-size:28px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif} .vx-trials-tile--skipped .vx-trials-next-icon{background:rgba(10,10,20,.5);border:1.5px dashed rgba(255,255,255,.25);box-shadow:none} /* done = solid filled */ .vx-trials-tile--done{background:linear-gradient(145deg,rgba(var(--rgb),.42),rgba(var(--rgb),.14));border:1.5px solid var(--accent)} /* to come = outlined, dashed, no fill */ .vx-trials-next-games li{position:relative;padding-right:78px;border:1.5px dashed rgba(var(--rgb),.7);background:rgba(10,10,20,.35)} .vx-trials-next-games li .vx-trials-next-icon{box-shadow:none;border-style:dashed;background:rgba(10,10,20,.5)} .vx-trials-chip{position:absolute;top:8px;right:8px;padding:3px 8px;border:1px solid rgba(var(--rgb),.75);border-radius:9999px;font:700 10px/1.2 'DM Sans',sans-serif;letter-spacing:.08em;color:var(--accent)} @media(max-width:560px){.vx-trials-next-games li{padding-right:74px}} /* Games Hub look (owner, 2026-10-16: "use white or off white, take a look at the games hub"): pale shelves holding dark game cards with a coloured art band and a large icon. Done = lavender shelf, solid cards; to come = peach shelf, muted dashed cards. */ .vx-trials-shelf,.vx-trials-offer{padding:18px;border:0;border-radius:24px;color:#1c1626;box-shadow:0 19px 38px rgba(65,50,73,.22)} .vx-trials-shelf--done{margin:14px 0 0;background:radial-gradient(at 0 0,#f6f2ff,transparent 55%),linear-gradient(125deg,#e6e1f7,#d3cbee)} .vx-trials-offer{margin:0 0 4px;background:radial-gradient(at 0 0,#fff3ea,transparent 55%),linear-gradient(125deg,#f8e3d8,#f2c8b8)} .vx-trials-offer .vx-trials-eyebrow{color:#7a5a8c} .vx-trials-offer h3{color:#1c1626} .vx-trials-offer p{color:#3a2f46} .vx-trials-offer strong{color:#1c1626} .vx-trials-divider{margin:16px 0} .vx-trials-divider{color:rgba(255,255,255,.8)} .vx-trials-section-label--done{display:flex;align-items:center;margin:0 0 12px;color:#1c1626} .vx-trials-section-label--done span{background:#1c1626;color:#fff} .vx-trials-section-label--todo{margin:14px 0 10px;color:#7a5a8c} .vx-trials-shelf [data-trials-gate-results]{margin:0;gap:12px} /* the card: art band (first child, the icon) over a dark body */ .vx-trials-shelf .vx-trials-tile,.vx-trials-offer .vx-trials-next-games li{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:0;border-radius:18px;background:linear-gradient(#271e1a,#0d0d18);box-shadow:0 8px 20px rgba(28,22,38,.28)} .vx-trials-shelf .vx-trials-tile .vx-trials-next-icon,.vx-trials-offer .vx-trials-next-games li .vx-trials-next-icon{flex:0 0 auto;display:grid;place-items:center;width:100%;height:88px;border:0;border-radius:0;box-shadow:none;font-size:46px;background:radial-gradient(circle at 22% 25%,rgba(var(--rgb),.75),transparent 55%),radial-gradient(circle at 80% 85%,rgba(var(--rgb),.45),transparent 50%),linear-gradient(145deg,rgba(var(--rgb),.4),#15121f)} .vx-trials-shelf .vx-trials-tile>div,.vx-trials-offer .vx-trials-next-games li>div{padding:10px 14px 12px} .vx-trials-shelf .vx-trials-tile-kicker,.vx-trials-offer .vx-trials-tile-kicker{color:var(--accent);font-size:10px} .vx-trials-shelf .vx-trials-tile strong,.vx-trials-offer .vx-trials-next-games strong{font-size:17px;color:#fff} .vx-trials-shelf .vx-trials-tile small,.vx-trials-offer .vx-trials-next-games small{color:rgba(255,255,255,.75)} .vx-trials-shelf .vx-trials-tile-score{position:static;display:block;padding:0 14px 12px;margin-top:-4px;font:700 15px/1 'DM Sans',sans-serif;color:#fff} .vx-trials-shelf .vx-trials-tick{top:10px;right:10px;width:28px;height:28px;background:#fff;color:#1c1626;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.3)} .vx-trials-shelf .vx-trials-tile--done{border:0;box-shadow:0 8px 20px rgba(28,22,38,.3),0 0 0 2px #fff inset} /* skipped */ .vx-trials-shelf .vx-trials-tile--skipped{background:linear-gradient(#26232b,#14131a);box-shadow:none} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-next-icon{background:linear-gradient(145deg,#3a3646,#1a1822);filter:grayscale(.7);opacity:.8} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tick{background:transparent;border:1.5px solid rgba(255,255,255,.6);color:#fff;box-shadow:none} /* to come: same card, muted and dashed so it reads as not yet earned */ .vx-trials-offer .vx-trials-next-games{gap:12px;margin:0 0 14px} .vx-trials-offer .vx-trials-next-games li{position:relative;padding-right:0;background:linear-gradient(#2a2330,#17141f);box-shadow:none;outline:2px dashed rgba(var(--rgb),.85);outline-offset:-2px} .vx-trials-offer .vx-trials-next-games li .vx-trials-next-icon{height:72px;filter:saturate(.55);opacity:.85} .vx-trials-offer .vx-trials-chip{top:10px;right:10px;padding:4px 9px;border:0;background:rgba(255,255,255,.92);color:#1c1626;font-size:10px} .vx-trials-offer .vx-trials-gate-payoff,.vx-trials-offer>p:last-of-type{color:#3a2f46} @media(max-width:560px){.vx-trials-shelf,.vx-trials-offer{padding:14px;border-radius:20px}.vx-trials-shelf .vx-trials-tile .vx-trials-next-icon{height:76px}} /* Done games stay Trials green (owner, 2026-10-16): a pale mint shelf with green cards; mood colours stay on the games still to come. */ .vx-trials-shelf--done{background:radial-gradient(at 0 0,#f1faf5,transparent 55%),linear-gradient(125deg,#dcefe4,#bfdccc)} .vx-trials-shelf .vx-trials-tile--done .vx-trials-next-icon{background:radial-gradient(circle at 22% 25%,rgba(143,208,176,.8),transparent 55%),radial-gradient(circle at 80% 85%,rgba(79,154,124,.55),transparent 50%),linear-gradient(145deg,rgba(47,127,98,.55),#0f1f18)} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tile-kicker{color:#8fd0b0} .vx-trials-shelf .vx-trials-tile--done{background:linear-gradient(#162a21,#0b1411)} /* Progress pills: a light background so the numbers read, ink text; done pills stay solid Trials green. Build stamp is tester-only. */ .vx-trials-progress li{height:30px;border:2px solid var(--accent);background:rgba(255,255,255,.9);color:#1c1626;box-shadow:none} .vx-trials-progress li.is-done{border-color:var(--accent);background:var(--accent);color:#0a0a14;box-shadow:0 0 14px rgba(var(--rgb),.55)} .vx-trials-build{margin-left:6px;opacity:.7;font-variant-numeric:tabular-nums} /* The ask sits right under the finished games, above the offer, so the account step is reached without scrolling past the games to come. */ .vx-trials-ask{margin:16px 0 0} .vx-trials-ask .vx-trials-gate-honest{margin:0 0 8px} .vx-trials [data-trials-gate] .vx-trials-actions{margin-top:12px} /* Phone action bar after the primary changed: Create full width; sign-in wide, Stop here short; the consequence stays in the line above the buttons. */ @media(max-width:560px){ .vx-trials [data-trials-gate] .vx-trials-actions{grid-template-columns:1.7fr 1fr;gap:8px;padding:10px 16px} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-login]{font-size:13px;padding:.5rem .6rem;white-space:normal;line-height:1.2} .vx-trials [data-trials-gate] .vx-trials-actions .vx-trials-link{font-size:13px;justify-self:center} .vx-trials [data-trials-gate] .vx-trials-link-note{display:none} } /* Light cards (owner, 2026-10-16: "cards are rendering black"; earlier "use white or off white"): off-white card bodies with ink text on the pale shelves; colour lives in the art band, the outline and the chip. */ .vx-trials-shelf .vx-trials-tile,.vx-trials-offer .vx-trials-next-games li{background:#fffdfb;color:#1c1626;border:1px solid rgba(28,22,38,.1);box-shadow:0 6px 16px rgba(28,22,38,.14)} .vx-trials-shelf .vx-trials-tile strong,.vx-trials-offer .vx-trials-next-games strong{color:#1c1626} .vx-trials-shelf .vx-trials-tile small,.vx-trials-offer .vx-trials-next-games small{color:#4a3f56} .vx-trials-shelf .vx-trials-tile-kicker,.vx-trials-offer .vx-trials-tile-kicker{color:#6b5a7a} .vx-trials-shelf .vx-trials-tile-score{color:#1c1626} /* the art band stays vivid; the icon sits on it as on the Hub */ .vx-trials-shelf .vx-trials-tile .vx-trials-next-icon,.vx-trials-offer .vx-trials-next-games li .vx-trials-next-icon{background:radial-gradient(circle at 22% 25%,rgba(var(--rgb),.95),transparent 62%),radial-gradient(circle at 82% 85%,rgba(var(--rgb),.7),transparent 55%),linear-gradient(145deg,rgba(var(--rgb),.7),rgba(var(--rgb),.38))} /* done: Trials green band, green outline, solid white-on-green tick */ .vx-trials-shelf .vx-trials-tile--done{border:2px solid #2f7f62;box-shadow:0 6px 16px rgba(28,22,38,.16)} .vx-trials-shelf .vx-trials-tile--done .vx-trials-next-icon{background:radial-gradient(circle at 22% 25%,#8fd0b0,transparent 62%),linear-gradient(145deg,#4f9a7c,#2f7f62)} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tile-kicker{color:#2f7f62} .vx-trials-shelf .vx-trials-tick{background:#2f7f62;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)} /* skipped: pale grey, no colour earned */ .vx-trials-shelf .vx-trials-tile--skipped{background:#eceaf0;border:1px dashed rgba(28,22,38,.3);box-shadow:none} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-next-icon{background:linear-gradient(145deg,#d6d2df,#bdb8c9);filter:grayscale(.8);opacity:1} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tick{background:transparent;border:1.5px solid #4a3f56;color:#4a3f56} .vx-trials-shelf .vx-trials-tile--skipped strong{color:#4a3f56} /* to come: white card, dashed outline in the game's colour, softened band */ .vx-trials-offer .vx-trials-next-games li{background:#fffdfb;outline:2px dashed rgba(var(--rgb),.95);outline-offset:-2px;border:0} .vx-trials-offer .vx-trials-next-games li .vx-trials-next-icon{filter:saturate(.75);opacity:.95} .vx-trials-offer .vx-trials-chip{background:#1c1626;color:#fff} .vx-trials-offer .vx-trials-next-games li .vx-trials-tile-kicker{color:#6b5a7a} /* Finished-game cards are Trials green, not black (owner, 2026-10-16: "just make them green instead of black"). Skipped games stay green but muted and dashed. Games still to come keep their own colours on white cards. */ .vx-trials-shelf .vx-trials-tile--done,.vx-trials-shelf .vx-trials-tile--skipped{color:#fff;border:2px solid #8fd0b0;background:linear-gradient(145deg,#2f7f62,#1f5a46);box-shadow:0 6px 16px rgba(28,22,38,.2)} .vx-trials-shelf .vx-trials-tile--skipped{border-style:dashed;border-color:rgba(255,255,255,.55);background:linear-gradient(145deg,#3f6f5e,#2a4f42)} .vx-trials-shelf .vx-trials-tile--done strong,.vx-trials-shelf .vx-trials-tile--skipped strong{color:#fff} .vx-trials-shelf .vx-trials-tile--done small,.vx-trials-shelf .vx-trials-tile--skipped small{color:rgba(255,255,255,.88)} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tile-kicker,.vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tile-kicker{color:#bfe8d2} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tile-score,.vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tile-score{color:#fff} .vx-trials-shelf .vx-trials-tile--done .vx-trials-next-icon{background:radial-gradient(circle at 22% 25%,#bfe8d2,transparent 62%),linear-gradient(145deg,#6fbf9c,#3f9172)} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-next-icon{background:radial-gradient(circle at 22% 25%,rgba(191,232,210,.6),transparent 62%),linear-gradient(145deg,#6a9a88,#486f5f);filter:saturate(.6);opacity:.95} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tick{background:#fff;color:#1f5a46} .vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tick{background:transparent;border:1.5px solid #fff;color:#fff} /* Narrowest phones (320px): keep the sticky buttons to one or two short lines. */ @media(max-width:360px){ .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register]{font-size:13px;padding:.45rem .7rem;min-height:44px;line-height:1.15} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-login]{font-size:12px;line-height:1.15;padding:.4rem .5rem} .vx-trials [data-trials-gate] .vx-trials-actions .vx-trials-link{font-size:12px} .vx-trials [data-trials-gate] .vx-trials-actions{padding:8px 12px;gap:6px} } /* One call to action (spec 18.18): the primary button is the only button; Stop here is a quiet link under it. */ .vx-trials [data-trials-gate] .vx-trials-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{flex:0 1 auto;min-width:240px;padding:.6rem 1.6rem} @media(max-width:560px){ .vx-trials [data-trials-gate] .vx-trials-actions{display:grid;grid-template-columns:1fr;gap:4px;padding:10px 16px} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{grid-column:1/-1;min-width:0;width:100%;font-size:15px} .vx-trials [data-trials-gate] .vx-trials-actions .vx-trials-link{justify-self:center;font-size:13px} .vx-trials [data-trials-gate] .vx-trials-link-note{display:inline;font-size:12px} } @media(max-width:560px){.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{font-size:13px;letter-spacing:0;padding:.5rem .6rem;white-space:nowrap}} @media(max-width:340px){.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{font-size:12px}} /* The Done panel leads; the score headline and progress follow it (owner, 2026-10-16). */ .vx-trials-gate-head{margin:6px 0 0} .vx-trials-gate-head .vx-trials-eyebrow{margin:14px 0 0} /* Gate: eyebrow and Title Case headline above the panel (Brand Guide 12, 27.1); the score is plain text below it; the progress pills are removed (owner, 2026-10-16). */ [data-trials-gate]>.vx-trials-eyebrow{margin:6px 0 0} [data-trials-gate] .vx-trials-gate-title{margin:4px 0 12px} .vx-trials-gate-score{margin:16px 0 2px;font:700 clamp(24px,5vw,30px)/1.2 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-progress{display:none} /* Headings that only receive focus from script (for screen readers) are not controls; no ring around them. Real controls keep their focus ring. */ .vx-trials h2[tabindex="-1"]:focus,.vx-trials h2[tabindex="-1"]:focus-visible,.vx-trials-bar strong[tabindex="-1"]:focus,.vx-trials-bar strong[tabindex="-1"]:focus-visible{outline:none} /* Time and account explanations sit under the button as fine print (owner, 2026-10-16: a distraction above it for someone who wants to sign up). */ .vx-trials-ask:empty,.vx-trials-ask:not(:has(:not([hidden]))){margin:0} .vx-trials-fineprint{margin:8px 0 4px} .vx-trials-fineprint .vx-trials-support{margin:0 0 6px} .vx-trials-fineprint .vx-trials-gate-honest{margin:0 0 6px;font-size:13px} /* CTA on phones: the label may wrap onto two centred lines instead of running to the button edge (owner, 2026-10-16: overflow on the CTA button on mobile). */ @media(max-width:560px){ .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{white-space:normal;text-align:center;line-height:1.2;font-size:14px;letter-spacing:0;padding:.55rem 1rem;min-height:44px;overflow-wrap:anywhere} } @media(max-width:360px){ .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{font-size:13px;padding:.5rem .8rem} } /* Tester-only notes live in a small footer strip, not above the headline (owner, 2026-10-16). */ .vx-trials-qa--footer{margin:28px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)} .vx-trials-qa--footer a{color:#a5b4fc} /* CTA label: one line from 360px up, balanced two lines below (no orphaned word). */ @media(max-width:560px){ .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{text-wrap:balance;font-size:13px} } /* The games still to come are quiet: the pale shelf stays, the cards become plain rows so they do not compete with the call to action (owner, 2026-10-16). */ .vx-trials-offer .vx-trials-next-games{gap:8px;margin:0 0 12px} .vx-trials-offer .vx-trials-next-games li{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(28,22,38,.08);border-radius:12px;background:rgba(255,255,255,.62);outline:0;box-shadow:none;overflow:visible} .vx-trials-offer .vx-trials-next-games li .vx-trials-next-icon{flex:0 0 44px;width:44px;height:44px;border:1px solid rgba(28,22,38,.1);border-radius:12px;background:#fff;box-shadow:none;font-size:24px;filter:none;opacity:1} .vx-trials-offer .vx-trials-next-games li>div{padding:0} .vx-trials-offer .vx-trials-next-games strong{font-size:15px;color:#1c1626} .vx-trials-offer .vx-trials-next-games small{font-size:13px;color:#4a3f56} .vx-trials-offer .vx-trials-next-games .vx-trials-tile-kicker{color:#6b5a7a} .vx-trials-offer .vx-trials-chip{display:none} /* Clearance so the last lines of the offer scroll clear of the floating music button (owner, 2026-10-16). */ .vx-trials-offer{margin-bottom:84px} .vx-trials [data-trials-gate]{padding-bottom:12px} /* Contrast fixes (checked against WCAG AA 4.5:1 for small text on the real gradients' worst ends). */ .vx-trials-offer .vx-trials-eyebrow,.vx-trials-section-label--todo,.vx-trials-offer .vx-trials-tile-kicker,.vx-trials-offer .vx-trials-next-games .vx-trials-tile-kicker{color:#5e4470} .vx-trials-shelf .vx-trials-tile--done .vx-trials-tile-kicker,.vx-trials-shelf .vx-trials-tile--skipped .vx-trials-tile-kicker{color:#fff} .vx-trials-shelf .vx-trials-tile--done small,.vx-trials-shelf .vx-trials-tile--skipped small{color:#fff} .vx-trials [data-trials-gate] .vx-trials-actions [data-trials-register],.vx-trials [data-trials-gate] .vx-trials-actions [data-trials-claim]{background:linear-gradient(135deg,#5568db,#764ba2);box-shadow:0 8px 24px rgba(85,104,219,.4)} /* Briefing steps (spec 18.21): three scannable steps, number + bold title + one line (Brand Guide section 12). */ .vx-trials-steps{list-style:none;margin:20px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .vx-trials-steps li{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04)} .vx-trials-step-n{flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#2f7f62;color:#fff;font:700 15px/1 Syne,-apple-system,sans-serif} .vx-trials-steps strong{display:block;font:700 15px/1.3 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-steps small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.78)} .vx-trials-brief-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)} @media(max-width:720px){.vx-trials-steps{grid-template-columns:1fr}} /* Stage 1 / Stage 2 diagram (spec 18.22): Stage 1 solid green, Sign up in the brand indigo, Stage 2 outlined and dim until reached. */ .vx-trials-stages{margin:22px 0 8px} .vx-trials-stage-title{margin:18px 0 8px;font:700 12px/1.4 Syne,-apple-system,sans-serif;letter-spacing:.14em;color:#8fd0b0} /* ended state: the diagram says why Stage 1 is played again */ .vx-trials-ended{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px;padding:14px 16px;border:1px solid rgba(255,157,140,.55);border-radius:14px;background:rgba(255,120,100,.1)} .vx-trials-ended[hidden]{display:none} .vx-trials-ended strong{font:700 17px/1.3 Syne,-apple-system,sans-serif;color:#fff} .vx-trials-ended span{font-size:14px;line-height:1.5;color:rgba(255,255,255,.88)} @media(max-width:720px){ } /* Opening-page diagram built from design board 1 (spec 18.23). */ .vx-trials-stages{margin:22px 0 10px} .vx-st-grid{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);grid-template-areas:"h1 . h2" "g1 ar g2" "mk . .";row-gap:12px} .vx-st-head{display:flex;flex-direction:column;gap:3px} .vx-st-head--one{grid-area:h1}.vx-st-head--two{grid-area:h2} .vx-st-name{font:800 22px/1.1 Syne,-apple-system,sans-serif;letter-spacing:.02em;color:#fff} .vx-st-head--two .vx-st-name{color:#dfe4ff} .vx-st-sub{font-size:13px;font-weight:700;line-height:1.3;color:#8fd0b0} .vx-st-head--two .vx-st-sub{color:#c7d0ff} .vx-st-bracket{display:block;height:9px;margin-top:6px;box-sizing:border-box;border:3px solid #8fd0b0;border-bottom:0} .vx-st-head--two .vx-st-bracket{border-color:#a5b4fc;border-style:dashed} .vx-st-games{grid-area:g1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .vx-st-games--two{grid-area:g2;opacity:.8} .vx-st-games li{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0} .vx-st-tile{display:flex;align-items:center;justify-content:center;width:58px;height:58px;max-width:100%;border-radius:16px;background:#f7f5fb;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:32px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.35)} .vx-st-game{font-size:12px;line-height:1.2;font-weight:500;text-align:center;color:rgba(255,255,255,.92)} .vx-st-arrow{grid-area:ar;display:flex;align-items:flex-start;justify-content:center;height:58px;padding-top:17px;box-sizing:border-box;color:rgba(255,255,255,.6)} .vx-st-marker{grid-area:mk;display:flex;flex-direction:column;align-items:center;width:calc((100% - 24px)/4);margin:0} .vx-st-pointer{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:10px solid #fff} .vx-st-pill{padding:7px 16px;border-radius:9999px;background:#fff;color:#1c1626;font-size:12px;font-weight:700;letter-spacing:.06em;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.35)} .vx-st-again{display:none} .vx-trials-stages[data-ended="1"] .vx-st-games--two,.vx-trials-stages[data-ended="1"] .vx-st-head--two{opacity:.45} .vx-trials-stages[data-ended="1"] .vx-st-arrow{opacity:.4} .vx-trials-stages[data-ended="1"] .vx-st-here{display:none} .vx-trials-stages[data-ended="1"] .vx-st-again{display:inline} @media(max-width:720px){ .vx-st-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h1" "g1" "mk" "ar" "h2" "g2";row-gap:14px} .vx-st-arrow{height:34px;padding-top:0;align-items:center} .vx-st-arrow svg{transform:rotate(90deg)} .vx-st-marker{width:auto} .vx-st-tile{width:52px;height:52px;font-size:29px;border-radius:15px} } /* After-Stage-1 gate diagram, design boards 2 and 4 (spec 18.25). */ .vx-st-tile{position:relative} .vx-st-tick{position:absolute;right:-7px;top:-7px;width:22px;height:22px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#2f7f62;border:2px solid #0d0f18;color:#fff;font:700 12px/1 -apple-system,sans-serif} .vx-st-games li[data-state="done"] .vx-st-tile{outline:3px solid #2f7f62} .vx-st-games li[data-state="skipped"]{opacity:.5} .vx-st-grid--gate{grid-template-areas:"h1 . h2" "g1 ar g2" ". mk2 ."} .vx-st-marker--gate{grid-area:mk2;width:max-content;justify-self:center} .vx-trials-stages--gate{margin:18px 0 14px} [data-trials-gate] .vx-trials-fineprint{margin-bottom:84px} @media(max-width:720px){ .vx-st-grid--gate{grid-template-areas:"h1" "g1" "ar" "mk2" "h2" "g2"} .vx-st-marker--gate{justify-self:center} } .vx-trials-stages[data-paused="1"] .vx-st-marker{display:none} /* START HERE is a control; the Solo bar sits below the call to action in the Solo Vibathlon identity (spec 18.31). */ .vx-st-marker--action{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none} .vx-st-marker--action .vx-st-pill{display:flex;align-items:center;min-height:44px;padding:0 18px;transition:background .15s,transform .15s} .vx-st-marker--action:hover .vx-st-pill{background:#dff3e8;transform:translateY(-1px)} .vx-st-marker--action:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:9999px} .vx-st-marker--action:disabled{opacity:.5;cursor:not-allowed} .vx-st-marker--action:disabled .vx-st-pill{transform:none} .vx-st-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .vx-st-marker--action,.vx-st-marker--action:hover,.vx-st-marker--action *{text-decoration:none} /* The briefing marker is a