/* Append after the hub stylesheet. Only the guest Trials card is restyled: a deep green card in the same dark
   treatment as Solo, Duet and Battle, with a mint-green art panel. */
.vgh-page .vgh-tile[data-game="vibathlon-trials"] {
    --game-primary: #8fd0b0;
    --game-secondary: #4f9a7c;
    --game-glow: rgba(79, 154, 124, .2);
    border: 1px solid rgba(143, 208, 176, .3);
    background: linear-gradient(160deg, #1f4034, #142a21);
    color: #fff;
    box-shadow: 0 10px 26px rgba(10, 30, 22, .35);
}
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-art {
    background:
        radial-gradient(ellipse at 16% 16%, rgba(150, 205, 178, .4), transparent 62%),
        radial-gradient(ellipse at 88% 84%, rgba(18, 52, 40, .4), transparent 68%),
        linear-gradient(135deg, #467f68, #2f634e);
}
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-art::before,
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-art::after { background: rgba(255, 255, 255, .2); }
.vgh-trials-mark img { display: block; width: 100px; height: 100px; filter: brightness(1.4); }
.vgh-page .vgh-trials-mark .vgh-vibathlon-mark-label { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-badge {
    background: #fff;
    color: #1f4034;
    border: 0;
}
.vgh-page .vgh-tile[data-game="vibathlon-trials"] h3 { color: #fff; }
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-kind { color: #8fd0b0 !important; }
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-tile-copy { color: rgba(255, 255, 255, .72) !important; }
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-play {
    min-height: 44px;
    background: linear-gradient(135deg, #8fd0b0, #4f9a7c) !important;
    color: #0f241b !important;
    text-shadow: none;
    box-shadow: 0 5px 0 #2f634e, 0 10px 18px rgba(0, 0, 0, .3);
}
.vgh-page .vgh-tile[data-game="vibathlon-trials"]:hover,
.vgh-page .vgh-tile[data-game="vibathlon-trials"]:focus-within { transform: translateY(-3px); border-color: rgba(143, 208, 176, .6); }
.vgh-page .vgh-tile[data-game="vibathlon-trials"]:has(a.vgh-play:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
/* The link itself also remains clear in browsers without :has(). */
.vgh-page .vgh-tile[data-game="vibathlon-trials"] a.vgh-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .vgh-page .vgh-tile[data-game="vibathlon-trials"] { transition: none; }
    .vgh-page .vgh-tile[data-game="vibathlon-trials"]:hover,
    .vgh-page .vgh-tile[data-game="vibathlon-trials"]:focus-within { transform: none; }
}

.vgh-page .vgh-tile--trials-coming-soon:hover { transform: none; }
/* Inactive pill: same shape as the other "soon" cards. */
.vgh-page .vgh-tile[data-game="vibathlon-trials"] .vgh-play--soon {
    align-self: flex-start;
    justify-content: center;
    min-width: 12.5rem;
    max-width: 100%;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: none;
    color: rgba(255, 255, 255, .72) !important;
    text-shadow: none;
}

/* Active ring: the four "now" segments fill one by one like the Solo mark (spec 18.38). */
.vgh-trials-mark svg { display: block; width: 100px; height: 100px; filter: brightness(1.4); }
.vgh-trials-seg--1, .vgh-trials-seg--2, .vgh-trials-seg--3, .vgh-trials-seg--4 { opacity: .28; animation: vgh-trials-fill 2750ms linear infinite; }
.vgh-trials-seg--5, .vgh-trials-seg--6, .vgh-trials-seg--7, .vgh-trials-seg--8 { opacity: .28; }
.vgh-trials-seg--2 { animation-name: vgh-trials-fill-2; }
.vgh-trials-seg--3 { animation-name: vgh-trials-fill-3; }
.vgh-trials-seg--4 { animation-name: vgh-trials-fill-4; }
@keyframes vgh-trials-fill   { 0%, 19.99% { opacity: .28; } 20%, 100% { opacity: 1; } }
@keyframes vgh-trials-fill-2 { 0%, 39.99% { opacity: .28; } 40%, 100% { opacity: 1; } }
@keyframes vgh-trials-fill-3 { 0%, 59.99% { opacity: .28; } 60%, 100% { opacity: 1; } }
@keyframes vgh-trials-fill-4 { 0%, 79.99% { opacity: .28; } 80%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .vgh-trials-seg--1, .vgh-trials-seg--2, .vgh-trials-seg--3, .vgh-trials-seg--4 { animation: none; opacity: 1; }
}