@font-face{font-family:GridlockCard;src:url('/collection/assets/esp-regular.ttf') format('truetype');font-display:swap} /* Enter Rival Run immediately while its real opponent is being assigned. */ #rival-run-pending{position:fixed;inset:0;z-index:90001;min-height:100dvh;display:grid;place-items:center;overflow:auto;box-sizing:border-box;padding:24px;background:linear-gradient(110deg,#06121bf2,#06121be0 58%,#06121bbd),url('/assets/images/start-screen.webp') center/cover no-repeat #071119;color:#eef1e8;font-family:'Avenir Next','Segoe UI',Arial,sans-serif;pointer-events:auto;isolation:isolate} #rival-run-pending[hidden]{display:none!important} #rival-run-pending:before,#rival-run-pending:after{content:'';position:absolute;left:0;right:0;height:22px;pointer-events:none;background:repeating-conic-gradient(#b9c6bf1a 0% 25%,transparent 0% 50%) 0 0/44px 44px} #rival-run-pending:before{top:0} #rival-run-pending:after{bottom:0} #rival-run-pending .rival-run-pending-content{width:min(100%,520px);text-align:center} #rival-run-pending .rival-run-pending-wordmark{margin:0 0 22px;color:#f0d271;font:clamp(14px,3vw,21px)/1.4 GridlockCard,Impact,'Arial Narrow',sans-serif;letter-spacing:1px;transform:skew(-7deg);text-shadow:0 3px #020609} #rival-run-pending .rival-run-pending-wordmark span{color:#87dcea} #rival-run-pending h1{margin:0;color:#f1d466;font:clamp(48px,12vw,88px)/1.05 Impact,'Arial Narrow',sans-serif;letter-spacing:2px;text-shadow:0 4px #090c10,0 0 38px #ef963829} #rival-run-pending .rival-run-pending-status{margin:22px 0 17px;color:#c4d5dc;font-size:16px;line-height:1.4;text-shadow:none} #rival-run-pending .rival-run-pending-track{position:relative;width:128px;height:3px;margin:0 auto 42px;overflow:hidden;border-radius:4px;background:#89c6d427} #rival-run-pending .rival-run-pending-track span{position:absolute;inset:0 auto 0 0;width:48px;border-radius:4px;background:linear-gradient(90deg,#66cbe3,#f1d466);animation:rival-run-search 1.6s ease-in-out infinite alternate} #rival-run-pending button{min-width:154px;min-height:46px;margin:0;padding:12px 24px;border:1px solid #7493a0;border-radius:9px;background:linear-gradient(#30434c,#15252e);box-shadow:inset 0 1px #bbd6de30,0 3px #02080db3;color:#e8efe9;font:700 14px/1.3 'Avenir Next','Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px;cursor:pointer} #rival-run-pending button:hover{background:linear-gradient(#405967,#1c3441)} #rival-run-pending button:focus-visible{outline:3px solid #f1d466;outline-offset:5px} body.rival-entry-pending .touch{visibility:hidden!important;pointer-events:none!important} @keyframes rival-run-search{from{transform:translateX(0)}to{transform:translateX(80px)}} @media(prefers-reduced-motion:reduce){#rival-run-pending .rival-run-pending-track span{animation:none;left:40px}} @media(max-height:420px){#rival-run-pending{padding:32px 20px}#rival-run-pending .rival-run-pending-wordmark{margin-bottom:10px}#rival-run-pending h1{font-size:48px}#rival-run-pending .rival-run-pending-status{margin:12px 0}#rival-run-pending .rival-run-pending-track{margin-bottom:22px}} /* The collection cardShell frame and split artwork, scoped to the playable intro. */ #rival-matchup-cards{--display:Impact,'Arial Narrow',sans-serif;--ui:'Avenir Next','Segoe UI',Arial,sans-serif;--gold:#f1cf6b;position:fixed;z-index:90000;inset:0;height:100dvh;box-sizing:border-box;color:#eff2ea;background:transparent;font-family:var(--ui);pointer-events:none;overflow:hidden} /* The same card can sit in Garage or a public profile without intro positioning. */ .gridlock-player-card-view{--display:Impact,'Arial Narrow',sans-serif;--ui:'Avenir Next','Segoe UI',Arial,sans-serif;--gold:#f1cf6b;position:relative;width:min(100%,330px);margin-inline:auto;color:#eff2ea;font-family:var(--ui);text-align:left;container:gridlock-static-card / inline-size} .gridlock-player-card-view[hidden]{display:none!important} /* Retain the Menu escape while the cards hide the four driving buttons. Removing this class restores the game's existing control visibility. */ body.rival-matchup-visible .touch [data-touch]{visibility:hidden!important;pointer-events:none!important} #rival-matchup-cards[hidden]{display:none!important} :is(#rival-matchup-cards, .gridlock-player-card-view) *,:is(#rival-matchup-cards, .gridlock-player-card-view) *:before,:is(#rival-matchup-cards, .gridlock-player-card-view) *:after{box-sizing:border-box} :is(#rival-matchup-cards, .gridlock-player-card-view) h1,:is(#rival-matchup-cards, .gridlock-player-card-view) h2,:is(#rival-matchup-cards, .gridlock-player-card-view) h3,:is(#rival-matchup-cards, .gridlock-player-card-view) p{margin:0;text-shadow:none} #rival-matchup-cards .full-matchup-grid{position:absolute;inset:0} #rival-matchup-cards .player-slot,#rival-matchup-cards .rival-slot{position:absolute;top:var(--card-y);width:var(--card-width);height:var(--card-height);min-width:0;min-height:0} #rival-matchup-cards .player-slot{left:var(--left-x)} #rival-matchup-cards .rival-slot{left:var(--right-x)} #rival-matchup-cards .full-matchup-status{position:absolute;left:50%;top:var(--status-y);transform:translate(-50%,-50%);max-width:calc(100% - 24px);padding:4px 9px;border-radius:4px;background:#03080dc9;color:#eff2ea;font:700 12px/1.4 var(--ui);text-align:center} #rival-matchup-cards .full-matchup-status[hidden]{display:none!important} #rival-matchup-cards[data-loading-state="failed"] .full-matchup-status{color:#f3a090} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-card{--card-color:#a1c5d0;width:100%;height:100%;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:17px 57px minmax(0,1fr) 190px 24px;padding:10px;border:2px solid color-mix(in srgb,var(--card-color),#253743 30%);border-radius:14px;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,color-mix(in srgb,var(--card-color),#0b1520 83%),#09121b 48%,color-mix(in srgb,var(--card-color),#0b1520 89%));box-shadow:inset 0 0 0 2px #07111bd9,0 8px 18px #0007} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-card.epic{border-width:3px} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-card.legendary{border:3px double #e9ca7a;background:linear-gradient(140deg,#3e3520,#111821 44%,#28231b)} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-rim{position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--card-color),transparent 60%);border-radius:8px;pointer-events:none;z-index:6} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 5px;color:var(--card-color);min-width:0} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-serial{font:800 8px monospace;letter-spacing:1px} :is(#rival-matchup-cards, .gridlock-player-card-view) .rarity-stars{font-size:11px;letter-spacing:2px;line-height:1;color:var(--card-color)} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-nameplate{padding:4px 7px 3px;border-bottom:1px solid color-mix(in srgb,var(--card-color),transparent 42%);margin-bottom:5px;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;min-width:0} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-role{flex-shrink:0;color:#b5c6d0;font-size:8px;letter-spacing:.4px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-nameplate h2{flex-shrink:0;font:32px/.95 var(--display);letter-spacing:.6px;color:#f1f4ee;max-width:100%;width:100%;white-space:nowrap} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-art{position:relative;min-height:0;border:1px solid color-mix(in srgb,var(--card-color),transparent 30%);border-radius:2px;background:repeating-linear-gradient(120deg,transparent 0 18px,#ffffff03 19px 20px,transparent 21px 35px),radial-gradient(ellipse at center,color-mix(in srgb,var(--card-color),#111820 79%),#06101a);overflow:hidden;box-shadow:inset 0 0 9px #0007} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-art img{width:100%;height:100%;object-fit:contain;display:block} :is(#rival-matchup-cards, .gridlock-player-card-view) .has-split-art .card-art,:is(#rival-matchup-cards, .gridlock-player-card-view) .driver-profile-card .card-art{display:grid;grid-template-rows:minmax(0,1fr) 29%} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-portrait-area{display:flex;align-items:center;justify-content:center;min-height:0;padding:12px;container-type:size} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-portrait{position:relative;width:min(100cqw,100cqh);height:auto;aspect-ratio:1;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--card-color),transparent 30%);border-radius:5px;background:linear-gradient(145deg,#29414e,#112330);overflow:hidden;box-shadow:inset 0 0 0 5px #0a172455,0 12px 28px #0003} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-monogram{font:64px var(--display);letter-spacing:2px;color:var(--card-color)} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-portrait img{object-fit:fill;max-width:none;width:var(--portrait-width);height:var(--portrait-height);left:var(--portrait-left);top:var(--portrait-top)} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-vehicle-stage{min-height:0;position:relative;background:linear-gradient(110deg,#15232e,#2b3c48,#111e2a);border-top:1px solid color-mix(in srgb,var(--card-color),transparent 65%)} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-vehicle-stage:before{content:'';position:absolute;left:10%;right:10%;top:50%;height:1px;background:#bed2d32b} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-vehicle-canvas{display:block;width:100%;height:100%;position:relative} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-vehicle-stage{display:flex;align-items:center;justify-content:center} :is(#rival-matchup-cards, .gridlock-player-card-view) .rival-vehicle-display{position:relative;aspect-ratio:48/25;height:88%;max-width:84%} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-art .rival-vehicle-image{position:absolute;left:50%;top:50%;width:52.083333%;height:192%;max-width:none;object-fit:fill;transform:translate(-50%,-50%) rotate(-90deg)} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-text{padding:10px 9px 8px;background:linear-gradient(180deg,#14202bf9,#0c1621eb);border-bottom:1px solid color-mix(in srgb,var(--card-color),transparent 70%);min-width:0;overflow:hidden} :is(#rival-matchup-cards, .gridlock-player-card-view) .car-name{font-size:12px;line-height:1.4;letter-spacing:.4px;font-weight:900;color:var(--card-color);margin-bottom:6px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-bio{font-weight:400;font-size:12px;line-height:1.5;color:#c0ccd4;overflow-wrap:anywhere} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-ability{margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--card-color),transparent 64%)} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-ability h3{font-size:12px;line-height:1.4;color:#e3eced;font-weight:800;letter-spacing:.1px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-ability p{font-size:11px;line-height:1.5;color:#93adb9;margin-top:4px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-bottom{display:flex;align-items:center;justify-content:center;padding:4px 6px 0;min-width:0} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-wordmark{font:10px/1.2 GridlockCard,var(--display);letter-spacing:0;transform:skew(-7deg);white-space:nowrap} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-wordmark>span{color:#87dcea} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-wordmark>b{font-weight:400;color:#f0d271;letter-spacing:.5px;margin-left:3px} :is(#rival-matchup-cards, .gridlock-player-card-view) .player-you-tag{font-size:8px;font-weight:800;letter-spacing:1.2px;color:var(--card-color)} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-weekly{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:39px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-weekly>span{font-size:9px;font-weight:700;letter-spacing:.6px;color:#a5bac7} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-weekly>strong{font:28px var(--display);color:var(--gold)} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-weekly small{font:10px var(--ui);color:#a2b5c1;margin-left:3px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-record{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;text-align:center;margin-top:4px;padding-top:6px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-record>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0 3px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-record>div+div{border-left:1px solid #abc9ce29} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-record strong{font:19px var(--display);color:#e6ece9;overflow-wrap:anywhere} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-record span{font-size:8px;font-weight:700;letter-spacing:.4px;color:#a3b7c2} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-profile-card:not(.stock-rival-card){grid-template-rows:17px 57px minmax(0,1fr) auto 24px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-profile-card:not(.stock-rival-card) .card-text{min-height:190px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-collected{display:flex;align-items:center;justify-content:center;gap:6px;min-height:22px;margin-top:6px;padding-top:5px;border-top:1px solid #abc9ce29;color:#a3b7c2} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-collected>span{font-size:10px;font-weight:700;letter-spacing:.2px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-collected>strong{font:18px var(--display);color:var(--card-color)} /* Keep the full vertical card composition on phones. The aspect-ratio allowance is controlled in setLayout, rather than stretching its artwork. */ @media(max-width:650px) and (orientation:portrait){ #rival-matchup-cards .rival-card{padding:6px;border-radius:10px;grid-template-rows:10px 39px minmax(0,1fr) 164px 16px} #rival-matchup-cards .driver-profile-card:not(.stock-rival-card){grid-template-rows:10px 39px minmax(0,1fr) auto 16px} #rival-matchup-cards .driver-profile-card:not(.stock-rival-card) .card-text{min-height:170px} #rival-matchup-cards .player-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} #rival-matchup-cards .driver-collected{min-height:17px;margin-top:4px;padding-top:3px;gap:4px} #rival-matchup-cards .driver-collected>span{font-size:8px;letter-spacing:0} #rival-matchup-cards .driver-collected>strong{font-size:14px} #rival-matchup-cards .card-nameplate{padding:2px 3px 1px;gap:2px;margin-bottom:3px} #rival-matchup-cards .card-nameplate h2{font-size:22px;letter-spacing:0} #rival-matchup-cards .card-role{font-size:6px;letter-spacing:0} #rival-matchup-cards .card-serial,#rival-matchup-cards .player-you-tag{font-size:6px;letter-spacing:.3px} #rival-matchup-cards .rarity-stars{font-size:8px;letter-spacing:1px} #rival-matchup-cards .card-top{padding:0 2px;gap:3px} #rival-matchup-cards .driver-portrait-area{padding:6px} #rival-matchup-cards .driver-monogram{font-size:36px} #rival-matchup-cards .card-text{padding:6px 5px} #rival-matchup-cards .car-name{font-size:10px;letter-spacing:0;margin-bottom:4px} #rival-matchup-cards .card-bio{font-size:10px;line-height:1.4} #rival-matchup-cards .card-ability{margin-top:6px;padding-top:5px} #rival-matchup-cards .card-ability h3{font-size:10px} #rival-matchup-cards .card-ability p{font-size:10px;line-height:1.4;margin-top:3px} #rival-matchup-cards .card-bottom{padding:2px 4px 0} #rival-matchup-cards .card-wordmark{font-size:7px} #rival-matchup-cards .driver-weekly{min-height:25px;gap:3px} #rival-matchup-cards .driver-weekly>span{font-size:7px;letter-spacing:0} #rival-matchup-cards .driver-weekly>strong{font-size:20px} #rival-matchup-cards .driver-weekly small{font-size:7px} #rival-matchup-cards .driver-record{margin-top:2px;padding-top:4px} #rival-matchup-cards .driver-record>div{gap:3px;padding:0 2px} #rival-matchup-cards .driver-record strong{font-size:15px} #rival-matchup-cards .driver-record span{font-size:6px;letter-spacing:0} } @media(min-width:651px) and (min-height:561px) and (max-height:800px){ #rival-matchup-cards .card-text{padding:8px 9px 6px} #rival-matchup-cards .card-bio{font-size:11px;line-height:1.45} } @media(max-height:560px) and (orientation:landscape){ #rival-matchup-cards .rival-card{grid-template-columns:minmax(0,1fr);grid-template-rows:9px 32px minmax(0,1fr) 119px 13px;padding:5px;border-radius:9px} #rival-matchup-cards .driver-profile-card:not(.stock-rival-card){grid-template-rows:9px 32px minmax(0,1fr) auto 13px} #rival-matchup-cards .driver-profile-card:not(.stock-rival-card) .card-text{min-height:112px} #rival-matchup-cards .player-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #rival-matchup-cards .driver-collected{min-height:12px;margin-top:3px;padding-top:2px;gap:3px} #rival-matchup-cards .driver-collected>span{font-size:7px;letter-spacing:0} #rival-matchup-cards .driver-collected>strong{font-size:11px} #rival-matchup-cards .card-nameplate{padding:1px 3px;gap:1px;margin-bottom:2px} #rival-matchup-cards .card-role{font-size:5.5px;letter-spacing:0} #rival-matchup-cards .card-nameplate h2{font-size:20px;letter-spacing:0} #rival-matchup-cards .card-serial,#rival-matchup-cards .player-you-tag{font-size:5.5px;letter-spacing:0} #rival-matchup-cards .card-top{padding:0 2px;gap:3px} #rival-matchup-cards .rarity-stars{font-size:7px;letter-spacing:1px} #rival-matchup-cards .driver-portrait-area{padding:4px} #rival-matchup-cards .driver-monogram{font-size:28px} #rival-matchup-cards .card-text{padding:4px 4px 3px} #rival-matchup-cards .car-name{font-size:9px;line-height:1.3;margin-bottom:3px;letter-spacing:0} #rival-matchup-cards .card-bio{font-size:9px;line-height:1.3} #rival-matchup-cards .card-ability{margin-top:4px;padding-top:3px} #rival-matchup-cards .card-ability h3{font-size:9px;line-height:1.3;letter-spacing:0} #rival-matchup-cards .card-ability p{font-size:9px;line-height:1.3;margin-top:2px} #rival-matchup-cards .driver-weekly{min-height:18px;gap:3px} #rival-matchup-cards .driver-weekly>span{font-size:6px;letter-spacing:0} #rival-matchup-cards .driver-weekly>strong{font-size:15px} #rival-matchup-cards .driver-weekly small{font-size:6px} #rival-matchup-cards .driver-record{margin-top:1px;padding-top:2px} #rival-matchup-cards .driver-record>div{gap:1px;padding:0 1px} #rival-matchup-cards .driver-record strong{font-size:12px} #rival-matchup-cards .driver-record span{font-size:5.5px;letter-spacing:0} #rival-matchup-cards .card-bottom{padding:1px 3px 0} #rival-matchup-cards .card-wordmark{font-size:6px} } /* A standalone card uses its own width and grows for longer bios or records. */ :is(#rival-matchup-cards, .gridlock-player-card-view).gridlock-player-card-view .driver-profile-card{height:auto;min-height:186cqw;grid-template-rows:17px 57px 82cqw auto 24px} @container gridlock-static-card (max-width:299px){ :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-profile-card:not(.stock-rival-card){grid-template-rows:14px 49px 82cqw auto 21px;padding:8px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-nameplate h2{font-size:28px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-role{font-size:7px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-text{padding:8px 7px 6px} :is(#rival-matchup-cards, .gridlock-player-card-view) .card-bio{font-size:11px;line-height:1.45} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-portrait-area{padding:8px} :is(#rival-matchup-cards, .gridlock-player-card-view) .car-name{font-size:11px} :is(#rival-matchup-cards, .gridlock-player-card-view) .driver-weekly{min-height:32px} }