/* Pocket Drive console sports theme. Loaded last: it re-skins every menu, button, dialog and HUD surface with one Nintendo-sports-style language (chunky outlined display type, framed tiles, slanted ribbons, 3D console buttons, a pulsing selection cursor and speed-line backdrops). Layout and behaviour stay in the older stylesheets; this file only paints, sizes and frames. */ @font-face{font-family:'Lilita One';src:url('/assets/fonts/lilita-one-latin-400.woff2') format('woff2');font-weight:100 900;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-latin-700.woff2') format('woff2');font-weight:100 700;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-latin-800.woff2') format('woff2');font-weight:800;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-latin-900.woff2') format('woff2');font-weight:900;font-display:swap} :root{ --sp-ink:#0b1130;--sp-ink-soft:#1a2352; /* Blue and red sit a step deeper than the first theme pass, and every gradient reaches the base colour by 34% (the gloss stays in the top band above the label), so white labels clear WCAG AA (4.5:1). Blue and red buttons use a fixed 8 px gloss instead (the small ribbons 4 px), so a label that wraps to two lines (QUICK SQUAD on a small phone) never has its first line on the pale top. */ --sp-blue:#1566e8;--sp-blue-hi:#4fb0ff;--sp-blue-lo:#0b44c4; --sp-sky:#35c8ff; --sp-yellow:#ffd21c;--sp-yellow-hi:#fff27a;--sp-yellow-lo:#f09a00; --sp-red:#dc2439;--sp-red-hi:#ff7b86;--sp-red-lo:#b00f27; --sp-green:#2fd35a;--sp-green-hi:#7dff8f;--sp-green-lo:#0f8a33; --sp-purple:#9b5cff;--sp-purple-hi:#c7a1ff;--sp-purple-lo:#5520c8; --sp-lime:#c8f53a; --sp-display:'Lilita One','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif; --sp-ui:'Nunito',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',sans-serif; /* Menu controls: a thin tinted ring, a short translucent base and a soft lift shadow instead of a thick ink outline over a solid ink base (owner: the heavy black outline read as clunky). The lift keeps buttons separate from busy tile art; focus keeps its white-and-gold cursor ring. */ --sp-edge:rgba(6,14,60,.42);--sp-base:rgba(4,11,48,.5);--sp-lift:0 6px 14px -5px rgba(2,8,36,.55); --sp-press:0 3px 0 var(--sp-base),var(--sp-lift); --sp-bevel:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -3px 0 rgba(0,0,0,.16); } /* ---- Type ---------------------------------------------------------------- */ #game,#game :is(button,input,select,textarea){font-family:var(--sp-ui)} #game #overlay :is(h1,h2){font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.4px!important;color:#fff!important;-webkit-text-stroke:7px var(--sp-ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--sp-ink)!important;line-height:1.08!important} #game #overlay h2::first-letter{color:var(--sp-yellow)} #game #overlay h3{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px;color:#fff;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} /* Section labels become slanted ribbons (Mushroom Cup style). The ribbon is a skewed pseudo-element, so the text itself stays upright and crisp. */ #game #overlay .eyebrow{position:relative;z-index:0;display:inline-block;width:max-content;max-width:100%;padding:5px 16px 4px!important;margin:0 0 6px 6px!important;font-family:var(--sp-display)!important;font-weight:400!important;font-size:12px!important;letter-spacing:1.1px!important;line-height:1.1!important;color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:normal;overflow:visible;text-overflow:clip;background:none!important;border:0!important;max-width:calc(100% - 14px)!important;box-sizing:border-box;text-wrap:balance} #game #overlay .eyebrow::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-16deg);border-radius:4px;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 4px,var(--sp-red-lo) 100%);border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} /* ---- Menu backdrop: speed lines over the stadium, never an opaque wall ---- (the top glow stays soft enough that body copy scrolled under it keeps 4.5:1) */ #game.menu-open:not(.calling-play) #overlay.active:not(.quick-call-panel):not(.huddle-panel):not(.defense-dock):not(.sideline-panel):not(.hot-route-panel){background: repeating-conic-gradient(from -8deg at 50% -18%,rgba(255,255,255,.075) 0deg 3.2deg,transparent 3.2deg 10deg), radial-gradient(120% 62% at 50% -12%,rgba(79,176,255,.42),transparent 62%), linear-gradient(168deg,rgba(19,104,240,.90) 0%,rgba(10,58,176,.86) 42%,rgba(8,26,92,.92) 100%)!important} #game.menu-open:not(.calling-play) #overlay.active:not(.quick-call-panel):not(.huddle-panel):not(.defense-dock):not(.sideline-panel):not(.hot-route-panel)::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:22%;pointer-events:none;z-index:0;background:linear-gradient(180deg,transparent,rgba(6,16,58,.55));clip-path:polygon(0 38%,100% 0,100% 100%,0 100%)} #game.menu-open #overlay.active:is(.premium-panel,.franchise-panel,.online-panel,.club-panel,.league-panel){background: repeating-conic-gradient(from -8deg at 50% -18%,rgba(255,255,255,.075) 0deg 3.2deg,transparent 3.2deg 10deg), radial-gradient(120% 62% at 50% -12%,rgba(79,176,255,.42),transparent 62%), linear-gradient(168deg,rgba(19,104,240,.90) 0%,rgba(10,58,176,.86) 42%,rgba(8,26,92,.92) 100%)!important} #game.menu-open #overlay.active:is(.premium-panel,.franchise-panel,.online-panel,.club-panel,.league-panel)::before{background:none!important;opacity:0!important} #game #overlay>.panel{position:relative;z-index:1} /* ---- Console buttons ------------------------------------------------------- Bright bevelled fill, a thin tinted edge and a short translucent "3D" base that presses down 4 px. .primary is the yellow go button, .secondary the blue default. */ #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)),#game .first-drive-actions button{ font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.7px!important;text-transform:uppercase; color:#fff!important;border:0!important;border-radius:14px!important; background:linear-gradient(180deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-blue-lo) 100%)!important; box-shadow:0 0 0 1px var(--sp-edge),var(--sp-bevel),var(--sp-press)!important;text-shadow:0 2px 0 rgba(8,14,48,.75)!important; transition:transform .07s ease-out,box-shadow .07s ease-out,filter .12s!important;min-height:46px} #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)).primary,#game .first-drive-actions button:last-child{color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important} #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):is(:hover,:focus-visible),#game .first-drive-actions button:is(:hover,:focus-visible){filter:brightness(1.08) saturate(1.08)} #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):active,#game .first-drive-actions button:active{transform:translateY(4px)!important;box-shadow:var(--sp-bevel),0 1px 0 var(--sp-base)!important} #game #overlay :is(button.primary,button.secondary):disabled{filter:grayscale(.75) brightness(.8);transform:none!important} /* Back is the red B button, with its face-button glyph. */ #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):is(.game-back,[data-menu-cancel]):not(.primary):not(.secondary){background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo) 100%)!important;padding:6px 14px 6px 8px!important;display:inline-flex;align-items:center;gap:7px;min-height:40px} #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):is(.game-back,[data-menu-cancel]):not(.primary):not(.secondary)::before{content:'B';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--sp-red-lo);font-size:13px;line-height:1;text-shadow:none;box-shadow:0 0 0 2px var(--sp-ink);flex:0 0 auto} /* ---- Selection cursor: a pulsing white-and-gold frame on the focused item -- */ @keyframes sp-cursor{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--sp-yellow),0 0 22px 6px rgba(255,210,28,.55)}50%{box-shadow:0 0 0 3px #fff,0 0 0 9px var(--sp-yellow),0 0 30px 10px rgba(255,210,28,.35)}} #game #overlay :is(button,[tabindex]):focus-visible{outline:none!important} /* The cursor itself: a static white-and-gold ring (box-shadow must be !important to beat the component frames, and animations cannot override !important), pulsing via filter. */ @keyframes sp-glow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,210,28,.35))}50%{filter:drop-shadow(0 0 12px rgba(255,210,28,.95))}} #game #overlay.active .panel :is(.sp-tile,.sp-news,.kick-choice-grid>button,.on-mode,.coach-play,.cs-tile,.defense-grid button,.huddle-play,.pc-lab,.defense-role-picks button):is(:focus-visible,.gm-focused):is(:focus-visible,.gm-focused){box-shadow:0 0 0 3px #fff,0 0 0 7px var(--sp-yellow),0 7px 14px 7px rgba(3,9,40,.42)!important;animation:sp-glow 1.1s ease-in-out infinite!important;z-index:2} #game #overlay.active .panel :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,[data-menu-cancel],.gm-choice,.call-tabs button,.pc-tabs button,.book-types button,.book-concepts button,.cs-slot,.cs-info-button):is(:focus-visible,.gm-focused):is(:focus-visible,.gm-focused){box-shadow:var(--sp-bevel),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff,0 0 0 7px var(--sp-yellow)!important;animation:sp-glow 1.1s ease-in-out infinite!important} #game #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):focus-visible{box-shadow:var(--sp-bevel),var(--sp-press),0 0 0 3px #fff,0 0 0 7px var(--sp-yellow)!important} /* ---- Header chips (audio, options) ---------------------------------------- */ #game header .header-actions button{align-items:center;justify-content:center;font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.6px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.7)} #game header .wordmark{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1.5px!important;color:#fff;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game header .wordmark span{color:var(--sp-yellow)} /* ---- Home: mode select ---------------------------------------------------- */ #game #overlay.premium-panel .sp-home{gap:10px!important;padding:8px 14px 12px!important} #game #overlay.premium-panel .sp-home>.eyebrow,#game #overlay.premium-panel .sp-home .home-season-mark{display:none!important} #game #overlay.premium-panel .sp-home h1.sp-logo{font-size:clamp(40px,12.5vw,54px)!important;line-height:1!important;margin:2px 0 2px 2px!important;letter-spacing:.5px!important;-webkit-text-stroke:9px var(--sp-ink);text-shadow:0 6px 0 var(--sp-ink)!important;transform:rotate(-2deg);transform-origin:left center;white-space:nowrap} #game #overlay.premium-panel .sp-home h1.sp-logo span{color:var(--sp-yellow)!important;display:inline!important} #game #overlay.premium-panel .sp-home .home-actions{display:flex;flex-direction:column;gap:10px} /* Framed art tiles: ink outline, white inner rim, art filling the frame and the label set on the art in outlined display type. */ #game #overlay.premium-panel .sp-home .sp-tile{position:relative;isolation:isolate;overflow:hidden;display:block!important;text-align:left;padding:0!important;margin:0!important;border:0!important;border-radius:18px!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important;transition:transform .09s ease-out,box-shadow .09s!important;min-height:0} #game #overlay.premium-panel .sp-home .sp-tile::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--sp-tile-art)} #game #overlay.premium-panel .sp-home .sp-tile::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;z-index:0;background:linear-gradient(180deg,transparent,rgba(8,14,48,.55));pointer-events:none} #game #overlay.premium-panel .sp-home .sp-tile .mode-art{display:none!important} #game #overlay.premium-panel .sp-home .sp-tile canvas.sp-star{position:absolute;z-index:-1;pointer-events:none;bottom:0;right:0;width:62%;height:118%} #game #overlay.premium-panel .sp-home .sp-tile b{position:absolute;z-index:1;left:14px;bottom:10px;margin:0!important;font-family:var(--sp-display)!important;font-weight:400!important;font-size:27px!important;line-height:1!important;letter-spacing:.3px!important;color:#fff!important;-webkit-text-stroke:6px var(--sp-ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--sp-ink)!important;white-space:nowrap} #game #overlay.premium-panel .sp-home .sp-tile>span{display:none!important} #game #overlay.premium-panel .sp-home .sp-tile small{position:absolute;z-index:1;left:12px;top:40px;font-family:var(--sp-display)!important;font-size:11px!important;letter-spacing:1.2px!important;color:#fff!important;padding:3px 12px 2px;isolation:isolate} #game #overlay.premium-panel .sp-home .sp-tile small::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-16deg);background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 4px,var(--sp-red-lo));border:2px solid var(--sp-ink);border-radius:3px;box-shadow:0 2px 0 var(--sp-ink)} /* Player-count heads, top left of each tile. */ #game #overlay.premium-panel .sp-home .sp-pips{position:absolute;z-index:1;left:11px;top:10px;display:flex;gap:2px} #game #overlay.premium-panel .sp-home .sp-pips u{display:block;width:16px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 48%,var(--sp-ink) 0 1.8px,transparent 2.4px),radial-gradient(circle at 65% 48%,var(--sp-ink) 0 1.8px,transparent 2.4px),linear-gradient(180deg,#fff 0%,#e8eefc 100%);box-shadow:0 0 0 2px var(--sp-ink),0 2px 0 2px var(--sp-ink)} #game #overlay.premium-panel .sp-home .sp-tile-play{height:clamp(150px,24dvh,196px);--sp-tile-art: repeating-conic-gradient(from 0deg at 72% 58%,rgba(255,255,255,.14) 0deg 5deg,transparent 5deg 14deg), radial-gradient(70% 90% at 72% 62%,#ffe46a 0%,#ffb21a 32%,#ff5a1f 62%,#c41236 100%)} #game #overlay.premium-panel .sp-home .sp-tile-play canvas.sp-star{width:58%;height:122%;right:-2%} #game #overlay.premium-panel .sp-home .sp-tile-play b{font-size:clamp(30px,9vw,38px)!important} #game #overlay.premium-panel .sp-home .home-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;margin:0!important} #game #overlay.premium-panel .sp-home .home-modes .sp-tile{height:clamp(112px,17dvh,142px);grid-column:auto!important;grid-row:auto!important;width:auto!important} #game #overlay.premium-panel .sp-home .home-modes .sp-tile canvas.sp-star{width:100%;height:112%;right:0} #game #overlay.premium-panel .sp-home .home-modes .sp-tile b{font-size:clamp(17px,5.1vw,22px)!important;left:9px;bottom:8px;-webkit-text-stroke:5px var(--sp-ink)} #game #overlay.premium-panel .sp-home .sp-tile-practice{--sp-tile-art:repeating-linear-gradient(90deg,transparent 0 22%,rgba(255,255,255,.55) 22% 23.5%),repeating-linear-gradient(0deg,#39c24f 0 14px,#2aa843 14px 28px)} #game #overlay.premium-panel .sp-home .sp-tile-club{--sp-tile-art:repeating-conic-gradient(from 0deg at 50% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(180deg,#49b3ff 0%,#1b73ff 55%,#0c3db3 100%)} #game #overlay.premium-panel .sp-home .sp-tile-online{--sp-tile-art:radial-gradient(circle at 50% 42%,transparent 0 30%,rgba(255,255,255,.18) 30.5% 32%,transparent 32.5% 46%,rgba(255,255,255,.14) 46.5% 48%,transparent 48.5%),linear-gradient(165deg,#c38bff 0%,#9b5cff 45%,#5520c8 100%)} /* STORY · Rookie Road: a full-width banner in a gold frame. Dawn sky, the road running to a glowing stadium, the hero (or the Pro helmet) on the right; a NEW ribbon until the first story is started. */ #game #overlay.premium-panel .sp-home .sp-tile-story{height:76px;border-color:#ffd23f!important;box-shadow:0 0 0 3px var(--sp-ink),0 7px 0 var(--sp-ink),0 0 16px #ffd23f55!important;--sp-tile-art: linear-gradient(90deg,rgba(8,14,48,.62) 0%,rgba(8,14,48,.28) 38%,transparent 58%), radial-gradient(9% 26% at 63% 50%,#fffbe0 0%,#ffe27a 38%,transparent 72%), repeating-conic-gradient(from -64deg at 63% 50%,rgba(255,240,190,.20) 0deg 3deg,transparent 3deg 10deg) 0 0/100% 50% no-repeat, radial-gradient(16% 13% at 63% 53%,#2b3a6a 0 60%,transparent 64%), conic-gradient(from 178.6deg at 63% 54%,#fff1c2 0deg 2.8deg,transparent 2.8deg), conic-gradient(from 158deg at 63% 54%,#5b5f78 0deg 44deg,transparent 44deg), conic-gradient(from 151deg at 63% 54%,#e9dcc2 0deg 58deg,transparent 58deg), radial-gradient(60% 34% at 18% 60%,#3e8a45 0 58%,transparent 60%),radial-gradient(52% 30% at 96% 58%,#357a3d 0 58%,transparent 60%), linear-gradient(180deg,#2c2a78 0%,#7a3f8f 24%,#ff6f61 44%,#ffb86b 52%,#6fbf5a 54%,#4f9e49 100%)} #game #overlay.premium-panel .sp-home .sp-tile-story::after{content:none} #game #overlay.premium-panel .sp-home .sp-tile-story[data-new]::after{content:'NEW';position:absolute;z-index:2;top:9px;right:-27px;width:92px;height:auto;inset:9px -27px auto auto;padding:3px 0 2px;transform:rotate(38deg);text-align:center;font-family:var(--sp-display);font-size:12px;letter-spacing:1.5px;color:#fff;background:linear-gradient(180deg,var(--sp-red-hi),var(--sp-red) 55%,var(--sp-red-lo));border-block:2px solid var(--sp-ink);box-shadow:0 2px 0 var(--sp-ink)} #game #overlay.premium-panel .sp-home .sp-tile-story canvas.sp-star{width:38%;height:265%;right:7%;bottom:-150%} #game #overlay.premium-panel .sp-home .sp-tile-story .sp-story-helmet{position:absolute;z-index:-1;right:7%;bottom:-8px;width:78px;height:70px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cpath d='M8 44C6 22 22 6 42 6s34 14 32 34c-1 10-8 16-16 16H46l-4 10H22c-8 0-13-10-14-22z' fill='%23176bdd' stroke='%230b1130' stroke-width='4'/%3E%3Cpath d='M40 6c3 14 3 30 0 50' stroke='%23ffa324' stroke-width='6' fill='none'/%3E%3Cpath d='M52 40h24M50 50h24M60 34v26M70 36v22' stroke='%23d7dde3' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='30' cy='36' r='6' fill='%230b1130'/%3E%3C/svg%3E") center/contain no-repeat} #game #overlay.premium-panel .sp-home .sp-tile-story small{top:7px;left:12px} #game #overlay.premium-panel .sp-home .sp-tile-story small::before{background:linear-gradient(180deg,#ffe27a,#ffd23f 50%,#f09a00);} #game #overlay.premium-panel .sp-home .sp-tile-story small{color:var(--sp-ink)!important} #game #overlay.premium-panel .sp-home .sp-tile-story .sp-pips{left:82px;top:9px} #game #overlay.premium-panel .sp-home .sp-tile-story b{bottom:20px;font-size:24px!important} #game #overlay.premium-panel .sp-home .sp-tile-story>span{display:block!important;position:absolute;z-index:1;left:14px;right:34%;bottom:6px;font-family:var(--sp-ui);font-weight:900;font-size:11px;line-height:1.2;letter-spacing:.3px;color:#fff5d6;text-shadow:0 1px 0 var(--sp-ink),0 0 4px #0b1130;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay.premium-panel .sp-home .sp-tile-story>span em{font-style:normal} #game #overlay.premium-panel .sp-home .sp-tile-story:active{box-shadow:0 0 0 3px var(--sp-ink),0 3px 0 var(--sp-ink)!important} /* Short phones (iPhone SE): the banner and the tiles give back height so home still fits without scrolling. */ @media(max-height:700px){#game #overlay.premium-panel .sp-home .sp-tile-play{height:calc(clamp(150px,24dvh,196px) - 12px)}#game #overlay.premium-panel .sp-home .sp-tile-story{height:68px}#game #overlay.premium-panel .sp-home .sp-tile-story small{top:5px;padding:2px 10px 1px;font-size:10px!important}#game #overlay.premium-panel .sp-home .sp-tile-story .sp-pips{top:5px;left:74px;transform:scale(.85);transform-origin:left top}#game #overlay.premium-panel .sp-home .sp-tile-story b{bottom:17px;font-size:21px!important}#game #overlay.premium-panel .sp-home .sp-tile-story>span{bottom:4px}#game #overlay.premium-panel .sp-home .home-actions{gap:8px}#game #overlay.premium-panel .sp-home .home-modes .sp-tile{height:calc(clamp(112px,17dvh,142px) - 8px)}#game #overlay.premium-panel .sp-home .sp-caption{min-height:1.3em}} /* With the Quick Start bar too, the story banner and the play tile give back the caption's second line (review, 375×667). Portrait only: its :has() specificity would beat the landscape tile heights and overlap the mode tiles (844×390). */ @media(max-height:700px) and (orientation:portrait){#game #overlay.premium-panel .sp-home:has(#quick-start-home) .sp-tile-play{height:calc(clamp(150px,24dvh,196px) - 32px)}#game #overlay.premium-panel .sp-home:has(#quick-start-home) .sp-tile-story{height:62px}} #game #overlay.premium-panel .sp-home .sp-tile:is(:hover,:focus-visible){transform:translateY(-2px) rotate(-.4deg)} #game #overlay.premium-panel .sp-home .sp-tile:active{transform:translateY(3px)!important;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.92),0 1px 0 var(--sp-base)!important} /* Quick start: a red "NEW!" news bar over the tiles. */ #game #overlay.premium-panel .sp-home .sp-news{position:relative;display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;text-align:left;padding:8px 14px!important;border:0!important;border-radius:14px!important;background:linear-gradient(180deg,#fff 0%,#eef4ff 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important} #game #overlay.premium-panel .sp-home .sp-news small{grid-row:1/3;font-family:var(--sp-display)!important;font-size:14px!important;letter-spacing:1px!important;color:#fff!important;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo));border:2.5px solid var(--sp-ink);border-radius:10px;padding:6px 9px 5px;transform:rotate(-4deg)} #game #overlay.premium-panel .sp-home .sp-news b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:19px!important;color:var(--sp-ink)!important;letter-spacing:.3px} #game #overlay.premium-panel .sp-home .sp-news span{font-weight:800;font-size:12px!important;color:#34416f!important} /* Utility bars: two columns of chunky blue bars, like Settings / How to Play. */ #game #overlay.premium-panel .sp-home .home-dock{display:grid!important;grid-template-columns:1fr 1fr;gap:9px 9px!important;margin-top:2px} #game #overlay.premium-panel .sp-home .home-dock>span,#game #overlay.premium-panel .sp-home .home-dock #first-drive-entry{display:none!important} #game #overlay.premium-panel .sp-home .home-dock button{white-space:nowrap;font-size:clamp(12px,3.7vw,15px)!important;padding:8px 10px!important;min-height:44px;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay.premium-panel .sp-home .resume-save{font-size:15px!important;padding:9px 12px!important;background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 50%,var(--sp-green-lo))!important} #game #overlay.premium-panel .sp-home .resume-save span{display:block;font-family:var(--sp-ui);font-weight:900;font-size:12px;color:#eafff0!important;letter-spacing:.4px} #game #overlay.premium-panel .sp-home .sp-caption{margin:2px 4px 0;text-align:center;font-weight:900;font-size:13px;line-height:1.3;color:#fff;text-shadow:0 2px 0 var(--sp-ink);min-height:2.6em} /* Wide screens: title across the top, tiles left, utility bars right, caption below. */ @media(min-width:760px) and (min-height:520px){ #game #overlay.premium-panel .sp-home{display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);grid-template-rows:auto auto auto;align-content:center;gap:16px 26px!important;width:min(1120px,100%);min-height:100%;margin:0 auto;padding:24px 40px 22px!important} #game #overlay.premium-panel .sp-home h1.sp-logo{grid-column:1/-1;grid-row:1;font-size:clamp(52px,6vw,74px)!important;margin:0!important;max-width:none} #game #overlay.premium-panel .sp-home .home-actions{grid-column:1;grid-row:2;margin:0!important} #game #overlay.premium-panel .sp-home .home-dock{grid-column:2;grid-row:2;align-self:end;grid-template-columns:1fr!important;margin:0!important} #game #overlay.premium-panel .sp-home .home-dock button{min-height:54px;font-size:18px!important} #game #overlay.premium-panel .sp-home .sp-caption{grid-column:1/-1;grid-row:3;font-size:16px;min-height:0;margin:0} #game #overlay.premium-panel .sp-home .sp-tile-play{height:clamp(190px,30dvh,280px)} #game #overlay.premium-panel .sp-home .home-modes .sp-tile{height:clamp(150px,22dvh,210px)} #game #overlay.premium-panel .sp-home .home-modes .sp-tile b{font-size:clamp(22px,2.2vw,28px)!important} } /* Saved-game actions share a row on short wide screens. Flexible art rows keep Continue and the utility dock inside the fixed-height home panel. */ @container pocket-screen (min-width:760px) and (min-height:520px) and (max-height:800px){ #game #overlay.premium-panel .sp-home{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;padding:12px 24px!important;gap:12px!important} #game #overlay.premium-panel .sp-home h1.sp-logo{font-size:clamp(40px,5vw,52px)!important} #game #overlay.premium-panel .sp-home .home-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(82px,1.45fr) minmax(64px,1fr) auto auto;align-self:stretch;height:100%;width:100%;max-width:none;min-height:0;gap:8px} #game #overlay.premium-panel .sp-home .quick-start-home{grid-column:1/-1;grid-row:1;min-height:44px;margin:0} #game #overlay.premium-panel .sp-home #story-entry{grid-column:1/-1;grid-row:2;height:64px;min-height:0} #game #overlay.premium-panel .sp-home #start{grid-column:1/-1;grid-row:3;height:100%;min-height:0} #game #overlay.premium-panel .sp-home .home-modes{grid-column:1/-1;grid-row:4;min-height:0} #game #overlay.premium-panel .sp-home .home-modes .sp-tile{height:100%;min-height:0} #game #overlay.premium-panel .sp-home .home-modes .sp-tile b{font-size:clamp(17px,2vw,22px)!important} #game #overlay.premium-panel .sp-home .sp-tile-play b{font-size:clamp(25px,3vw,32px)!important} #game #overlay.premium-panel .sp-home .sp-tile-play small{top:10px;left:40px} #game #overlay.premium-panel .sp-home #exhibition-repeat{grid-column:1;grid-row:5} #game #overlay.premium-panel .sp-home #resume-save{grid-column:2;grid-row:5;flex-direction:column;justify-content:center;gap:3px} #game #overlay.premium-panel .sp-home #resume-online{grid-column:1/-1;grid-row:6} #game #overlay.premium-panel .sp-home .resume-save{min-height:44px;margin:0;padding:6px!important;font-size:12px!important;line-height:1.15} #game #overlay.premium-panel .sp-home .sp-caption{font-size:13px;line-height:1.2;min-height:0;margin:0} } /* ---- Pause / generic stacked menus --------------------------------------- */ #game #overlay .pause-match{font-family:var(--sp-display)!important;letter-spacing:.8px;color:#fff!important;border:3px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#243a8f 0%,#172a6e 100%)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),0 6px 0 var(--sp-ink)!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay .pause-match small{font-family:var(--sp-ui);font-weight:900;color:var(--sp-yellow)!important;letter-spacing:1.4px} /* ---- Dialog boxes: dark glass with a white rim and gold highlights --------- */ #game :is(.first-drive-hud,.coach-copy,.coach-bubble,.ren-brief){font-family:var(--sp-ui)} #game .first-drive-hud{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(24,30,58,.94),rgba(12,16,38,.94))!important;box-shadow:0 0 0 2px var(--sp-ink),0 8px 22px rgba(0,0,0,.45)!important} #game .first-drive-hud strong{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;letter-spacing:.5px} #game .first-drive-hud p{font-weight:800;color:#fff} /* ---- Choice and tab buttons (aria-pressed): blue tabs, the chosen one gold -- */ #game #overlay .panel :is(.call-tabs,.pc-tabs,.gs-screen,.fr2-filters,.league-content,.on-panel) button[aria-pressed]:not(.cs-tile):not(.sp-tile):not(.coach-play), #game #overlay .panel :is(.call-tabs,.pc-tabs) button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important;transition:transform .07s,box-shadow .07s!important} #game #overlay .panel :is(.call-tabs,.pc-tabs,.gs-screen,.fr2-filters,.league-content,.on-panel) button[aria-pressed=true]:not(.cs-tile):not(.sp-tile):not(.coach-play), #game #overlay .panel :is(.call-tabs,.pc-tabs) button:is([aria-pressed=true],[aria-selected=true],.active){color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay .panel :is(.call-tabs,.pc-tabs,.gs-screen) button:active{transform:translateY(3px)!important} /* ---- Framed mode cards: franchise, online, kickoff choice ------------------ */ #game #overlay :is(.kick-choice-grid>button,.on-mode){position:relative;isolation:isolate;border:0!important;border-radius:18px!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important;transition:transform .09s ease-out!important} #game #overlay :is(.kick-choice-grid>button,.on-mode) :is(strong,b){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;color:#fff!important;-webkit-text-stroke:6px var(--sp-ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay :is(.kick-choice-grid>button,.on-mode) :is(span:not(.on-mode-letter):not(.on-mode-cta),p){font-weight:800!important;color:#fff!important;text-shadow:0 1px 0 rgba(8,14,48,.6)} #game #overlay .kick-choice-grid>button:nth-child(1),#game #overlay .on-mode.ranked{background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#58e070 0%,var(--sp-green) 45%,var(--sp-green-lo) 100%)!important} #game #overlay .kick-choice-grid>button:nth-child(2),#game #overlay .on-mode.draft{background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,var(--sp-purple-hi) 0%,var(--sp-purple) 45%,var(--sp-purple-lo) 100%)!important} #game #overlay .kick-choice-grid>button:nth-child(3),#game #overlay .on-mode:not(.ranked):not(.draft){background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#ffb54a 0%,#ff7a1a 45%,#d4400c 100%)!important} #game #overlay .on-mode small{position:relative;display:inline-block;padding:3px 12px 2px;margin-left:4px;font-family:var(--sp-display)!important;letter-spacing:1px!important;color:#fff!important;isolation:isolate} #game #overlay .on-mode small::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-16deg);background:linear-gradient(180deg,var(--sp-red) 0,var(--sp-red-lo));border:2px solid var(--sp-ink);border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-ink)} #game #overlay .on-mode .on-mode-letter{opacity:.18!important;font-family:var(--sp-display)!important;color:#fff!important} #game #overlay .on-mode .on-mode-cta{font-family:var(--sp-display)!important;letter-spacing:.8px!important;color:var(--sp-yellow)!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game #overlay :is(.kick-choice-grid>button,.on-mode):is(:hover,:focus-visible){transform:translateY(-2px)} #game #overlay :is(.kick-choice-grid>button,.on-mode):active{transform:translateY(3px)} /* ---- Play call sheet: a framed console panel with framed play cards -------- */ #game #overlay.sideline-panel>.panel{border:3px solid var(--sp-ink)!important;border-bottom:0!important;border-radius:22px 22px 0 0!important;background:linear-gradient(180deg,#223a97 0%,#172a73 30%,#101c55 100%)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),0 -4px 18px rgba(0,0,0,.35)!important} #game #overlay.sideline-panel .sideline-head small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-yellow)!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay.sideline-panel .sideline-head h2{font-size:25px!important} #game #overlay.sideline-panel :is(#full-playbook,#ren-details,#more-coach,.sideline-foot button){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay.sideline-panel .coach-play{position:relative;border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#ffffff 0%,#e9f0ff 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;transition:transform .08s!important} #game #overlay.sideline-panel .coach-play img{border:2.5px solid var(--sp-ink)!important;border-radius:10px!important;background:#0e3b1e} #game #overlay.sideline-panel .coach-play .call-copy b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:19px!important;letter-spacing:.2px;color:var(--sp-ink)!important} #game #overlay.sideline-panel .coach-play .call-label small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-blue-lo)!important} #game #overlay.sideline-panel .coach-play kbd{display:grid;place-items:center;font-family:var(--sp-display)!important;font-size:15px;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--sp-ink)!important;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 50%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-ink)!important} #game #overlay.sideline-panel .coach-play:is(:hover,:focus-visible){transform:translateY(-2px)} #game #overlay.sideline-panel .coach-play:active{transform:translateY(3px)} #game #overlay.sideline-panel .sideline-foot span{font-weight:900;color:#dfe8ff} /* Coach's word: the Nintendo dialog box, dark glass, white rim, gold keyword. */ #game #overlay .ren-brief{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(26,32,64,.95),rgba(12,16,40,.95))!important;box-shadow:0 0 0 2.5px var(--sp-ink),0 5px 0 2px var(--sp-ink)!important;color:#fff!important} #game #overlay .ren-brief small{font-weight:900!important;letter-spacing:.6px;color:#9fb8ff!important} #game #overlay .ren-brief b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:18px!important;letter-spacing:.3px;color:var(--sp-yellow)!important} #game #overlay .ren-brief p{font-weight:800!important;color:#fff!important} /* ---- Practice center ------------------------------------------------------- */ #game #overlay .practice-center :is(.pc-picker button,.pc-role){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px} #game #overlay .practice-center .pc-lab{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,#58e070 0%,var(--sp-green) 45%,var(--sp-green-lo) 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important;text-shadow:0 2px 0 rgba(8,14,48,.55)} #game #overlay .practice-center .pc-lab b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:15px!important;letter-spacing:.3px;color:#fff!important} #game #overlay .practice-center .pc-lab small{font-weight:800;color:#eafff0!important} #game #overlay .practice-center .pc-lab .pc-role{font-family:var(--sp-display)!important;border:2px solid var(--sp-ink)!important;border-radius:8px!important;background:#fff!important;color:var(--sp-ink)!important} #game #overlay .practice-center .pc-lab:is([aria-pressed=true],.selected){background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important;text-shadow:none} #game #overlay .practice-center .pc-lab:is([aria-pressed=true],.selected) :is(b,small){color:var(--sp-ink)!important} #game #overlay .practice-center .pc-lab:active{transform:translateY(3px)} #game #overlay .practice-center .pc-focus{border:0!important;border-radius:18px!important;background:linear-gradient(180deg,#223a97 0%,#172a73 40%,#101c55 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.85),0 3px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay .practice-center :is(.pc-heading,.pc-focus-heading) :is(h2,h3,b,strong){font-family:var(--sp-display)!important;font-weight:400!important} /* ---- Dropdowns: a white console selector with a gold chevron ---------------- */ #game #overlay select{appearance:none;-webkit-appearance:none;font-family:var(--sp-display)!important;font-weight:400!important;font-size:15px!important;letter-spacing:.3px;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23ffd21c' stroke='%230b1130' stroke-width='2'/%3E%3Cpath d='M6 8.5l4 4 4-4' fill='none' stroke='%230b1130' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center/20px 20px,linear-gradient(180deg,#fff 0%,#e4ebfb 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 -3px 0 rgba(11,17,48,.12),0 2px 0 var(--sp-base),var(--sp-lift)!important;padding:8px 34px 8px 12px!important;min-height:44px} #game #overlay .gm-choice{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#fff 0%,#e4ebfb 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 -3px 0 rgba(11,17,48,.12),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-align:left;text-shadow:none!important} #game #overlay .ex-options .gm-choice{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23ffd21c' stroke='%230b1130' stroke-width='2'/%3E%3Cpath d='M6 8.5l4 4 4-4' fill='none' stroke='%230b1130' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center/20px 20px,linear-gradient(180deg,#fff 0%,#e4ebfb 100%)!important;padding-right:34px!important} #game #overlay .gm-choice :is(.gm-value,b,span,strong){font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-ink)!important} #game #overlay .gm-choice:active{transform:translateY(3px)} #game #overlay .gs-exhibition .ex-options .ex-pick>span{font-family:var(--sp-display)!important;font-weight:400!important;font-size:12px!important;letter-spacing:1px!important;color:#fff!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay select:focus-visible{outline:none!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff,0 0 0 6px var(--sp-yellow)!important} #game #overlay .ex-options label,#game #overlay .gs-screen label{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px!important;color:#fff!important;text-shadow:0 2px 0 var(--sp-ink)} /* ---- Squad select: Mario Golf character select ---------------------------- */ #game #overlay .cs-screen .cs-slot{border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#fff 0%,#dde6fa 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important} #game #overlay .cs-screen .cs-slot :is(small,span,b){color:var(--sp-ink)!important;font-weight:900} #game #overlay .cs-screen .cs-slot small{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px;color:var(--sp-blue-lo)!important} #game #overlay .cs-screen .cs-slot[aria-current=step]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay .cs-screen .cs-detail,#game #overlay .cs-picker .cs-detail{border:3px solid var(--sp-ink)!important;border-radius:18px!important;background:repeating-conic-gradient(from 0deg at 20% 120%,rgba(255,255,255,.10) 0deg 6deg,transparent 6deg 15deg),linear-gradient(112deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-blue-lo) 46.2%,#0a318f 100%)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important;color:#fff!important} #game #overlay .cs-detail .cs-detail-art{border:3px solid var(--sp-ink)!important;border-radius:14px!important;background:radial-gradient(90% 80% at 50% 40%,#ffffff 0%,#cfe4ff 55%,#8fbfff 100%)!important;box-shadow:inset 0 0 0 2px #fff!important} #game #overlay .cs-detail .cs-watermark{opacity:.22!important} #game #overlay .cs-detail .cs-detail-copy h3{font-size:30px!important;line-height:1!important;-webkit-text-stroke:6px var(--sp-ink);text-shadow:0 4px 0 var(--sp-ink)} #game #overlay .cs-detail .cs-tag{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1.2px!important;color:var(--sp-yellow)!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay .cs-detail .cs-meta>*{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.6px;border:2px solid var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-ink)!important} #game #overlay .cs-detail .cs-meta :is(.cs-role,.cs-style){background:#fff!important;color:var(--sp-ink)!important} #game #overlay .cs-detail :is(.cs-desc,.cs-perk span){font-weight:800;color:#eef3ff!important} #game #overlay .cs-detail .cs-perk{border:2px solid rgba(255,255,255,.75)!important;border-radius:12px!important;background:rgba(8,20,70,.45)!important} #game #overlay .cs-detail .cs-perk b{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px;color:var(--sp-yellow)!important} /* The five stat bars show in the hero card the moment a star is picked (they were hidden on phones behind "Player details"), popping in left to right. */ #game #overlay .cs-screen .cs-detail .cs-detail-copy .cs-bars{display:grid!important;grid-template-columns:1fr;gap:3px!important;margin-top:7px!important;padding:6px 9px!important;width:100%;border:2px solid rgba(255,255,255,.8)!important;border-radius:11px!important;background:rgba(6,16,64,.55)!important;box-shadow:0 0 0 2px var(--sp-ink)!important} #game #overlay .cs-screen .cs-detail .cs-bar{display:grid!important;grid-template-columns:58px minmax(0,1fr) 16px!important;align-items:center;gap:6px!important} #game #overlay .cs-screen .cs-detail .cs-bar>span{font-family:var(--sp-display)!important;font-weight:400!important;font-size:10px!important;letter-spacing:.8px!important;color:#fff!important} #game #overlay .cs-screen .cs-detail .cs-bar>b{display:block!important;font-family:var(--sp-display)!important;font-weight:400!important;font-size:12px!important;color:var(--sp-yellow)!important;text-align:right;-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game #overlay .cs-screen .cs-detail .cs-bar>i{display:grid!important;grid-template-columns:repeat(10,1fr);gap:2px!important;height:9px!important} #game #overlay .cs-screen .cs-detail .cs-bar s{border-radius:2px!important;background:rgba(255,255,255,.16)!important;box-shadow:none!important} #game #overlay .cs-screen .cs-detail .cs-bar s.on{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;box-shadow:0 0 0 1px rgba(11,17,48,.6)!important;animation:sp-bar-pop .32s cubic-bezier(.2,1.6,.4,1) backwards} @keyframes sp-bar-pop{0%{transform:scaleY(.1);opacity:0}100%{transform:none;opacity:1}} #game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(2){animation-delay:.03s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(3){animation-delay:.06s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(4){animation-delay:.09s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(5){animation-delay:.12s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(6){animation-delay:.15s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(7){animation-delay:.18s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(8){animation-delay:.21s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(9){animation-delay:.24s}#game #overlay .cs-screen .cs-detail .cs-bar s:nth-child(10){animation-delay:.27s} #game #overlay .cs-screen .cs-info-button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.6px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,#ffffff 0%,#d9e2f6 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;overflow:hidden;transition:transform .08s!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile .cs-art{background:radial-gradient(80% 70% at 50% 45%,#ffffff 0%,#c9dcfb 70%,#a7c4f4 100%)!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile .cs-tile-name{background:linear-gradient(180deg,#fff,#e4ebfb)!important;border-top:2.5px solid var(--sp-ink)!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile .cs-tile-name b{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px;color:var(--sp-ink)!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 50%,var(--sp-yellow-lo))!important;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--sp-red),0 5px 14px 5px rgba(3,9,40,.42)!important;transform:translateY(-2px)} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile[aria-pressed=true] .cs-tile-name{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow))!important} #game #overlay :is(.cs-screen,.cs-picker) .cs-tile:active{transform:translateY(3px)} #game #overlay .cs-roster-pages button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #game #overlay .cs-roster-pages button:disabled{filter:grayscale(.8) brightness(.75);opacity:.7} #game #overlay .cs-roster-pages span{font-family:var(--sp-display);color:#fff;text-shadow:0 2px 0 var(--sp-ink)} /* ---- Matchup: each side in the colour it wears on the field (--ex-home/--ex-away), a big VS between them (Mario Golf split) - */ #game #overlay .ex-matchup{border:3px solid var(--sp-ink)!important;border-radius:18px!important;background:linear-gradient(105deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-red) 53%,var(--sp-red-lo) 100%)!important;background:linear-gradient(105deg,color-mix(in srgb,var(--ex-home,var(--sp-blue)) 72%,#fff) 0%,var(--ex-home,var(--sp-blue)) 47%,var(--ex-away,var(--sp-red)) 53%,color-mix(in srgb,var(--ex-away,var(--sp-red)) 72%,#000) 100%)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay .ex-matchup .ex-side strong{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game #overlay .ex-matchup .ex-side span{font-weight:900!important;color:#fff!important;text-shadow:0 1px 0 var(--sp-ink)} #game #overlay .ex-matchup .ex-side span b{font-family:var(--sp-display);font-weight:400;color:var(--sp-yellow)!important;-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game #overlay .ex-matchup .ex-versus{font-family:var(--sp-display)!important;font-size:30px!important;color:var(--sp-yellow)!important;-webkit-text-stroke:6px var(--sp-ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--sp-ink);transform:rotate(-8deg)} #game #overlay .cs-captains .cs-captain,#game #overlay .cs-captain{border:0!important;border-radius:16px!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay .cs-captain :is(h3,strong,b){font-family:var(--sp-display)!important;font-weight:400!important} /* ---- Full playbook (the huddle) ------------------------------------------ */ #game #overlay.playbook-panel:not(.sideline-panel):not(:has(.practice-center))>.panel{border:3px solid var(--sp-ink)!important;border-bottom:0!important;border-radius:22px 22px 0 0!important;background:linear-gradient(180deg,#223a97 0%,#172a73 30%,#101c55 100%)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),0 -4px 18px rgba(0,0,0,.35)!important} #game #overlay.playbook-panel .book-heading small,#game #overlay.playbook-panel .book-kicker{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px!important;color:var(--sp-yellow)!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay.playbook-panel .book-heading h2{font-size:26px!important} #game #overlay.playbook-panel :is(.book-types,.book-concepts,.book-sides) button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #game #overlay.playbook-panel :is(.book-types,.book-concepts,.book-sides) button[aria-pressed=true]{color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay.playbook-panel .book-concepts button{font-size:13px!important} #game #overlay.playbook-panel #formation-picker{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23ffd21c' stroke='%230b1130' stroke-width='2'/%3E%3Cpath d='M6 8.5l4 4 4-4' fill='none' stroke='%230b1130' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center/20px 20px,linear-gradient(180deg,#fff 0%,#e4ebfb 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:none!important;padding-right:36px!important} #game #overlay.playbook-panel #formation-picker::after{display:none!important} #game #overlay.playbook-panel .book-formation span,#game #overlay.playbook-panel .book-total{font-family:var(--sp-display);color:#fff;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay.playbook-panel .huddle-play{border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#ffffff 0%,#e9f0ff 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;overflow:hidden;transition:transform .08s!important} #game #overlay.playbook-panel .huddle-play img{border-right:2.5px solid var(--sp-ink)!important;background:#0e3b1e} #game #overlay.playbook-panel .huddle-play-caption{background:transparent!important;color:var(--sp-ink)!important} #game #overlay.playbook-panel .huddle-play-caption strong{font-family:var(--sp-display)!important;font-weight:400!important;font-size:19px!important;letter-spacing:.2px;color:var(--sp-ink)!important} #game #overlay.playbook-panel .huddle-play-caption small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-blue-lo)!important} #game #overlay.playbook-panel .huddle-play .book-call-arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2.5px solid var(--sp-ink);background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 50%,var(--sp-yellow-lo));color:var(--sp-ink)!important;font-family:var(--sp-display);box-shadow:0 2px 0 var(--sp-ink)} #game #overlay.playbook-panel .huddle-play[aria-pressed=true]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--sp-yellow),0 5px 14px 5px rgba(3,9,40,.42)!important} #game #overlay.playbook-panel .huddle-play:is(:hover,:focus-visible){transform:translateY(-2px)} #game #overlay.playbook-panel .huddle-play:active{transform:translateY(3px)} #game #overlay.playbook-panel:not(.sideline-panel):not(:has(.practice-center)) .panel button:not(.huddle-play):not([aria-pressed]):not(#formation-picker):not(.coach-play):not(.primary):not(.secondary):not(.gm-choice):not(.augment-grid>button){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay.playbook-panel:not(.sideline-panel):not(:has(.practice-center)) .panel button:disabled{filter:grayscale(.8) brightness(.8);opacity:.7} /* ---- Defensive play call ------------------------------------------------- */ #game #overlay .defense-role-picks button{font-family:var(--sp-display)!important;font-weight:400!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important;opacity:1!important} #game #overlay .defense-role-picks button b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:16px!important;color:#fff!important;letter-spacing:.3px} #game #overlay .defense-role-picks button span{font-family:var(--sp-ui)!important;font-weight:800!important;color:#dfe8ff!important;opacity:1!important} #game #overlay .defense-role-picks button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay .defense-role-picks button[aria-pressed=true] :is(b,span){color:var(--sp-ink)!important} #game #overlay .defense-grid button{border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#ffffff 0%,#e6edfd 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;opacity:1!important;transition:transform .08s!important} #game #overlay .defense-grid button b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:21px!important;color:var(--sp-ink)!important;letter-spacing:.3px} #game #overlay .defense-grid button span{font-weight:800!important;color:#3a4a7a!important;opacity:1!important} #game #overlay .defense-grid button:is(:hover,:focus-visible){transform:translateY(-2px)} #game #overlay .defense-grid button:active{transform:translateY(3px)} #game #overlay .defense-mission{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(26,32,66,.95),rgba(12,16,40,.95))!important;box-shadow:0 0 0 2.5px var(--sp-ink)!important} #game #overlay .defense-mission b{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.8px;color:var(--sp-yellow)!important} #game #overlay .defense-mission span{font-weight:800!important;color:#fff!important} #game #overlay :is(#defense-help,#coaching-open){font-size:13px!important;min-height:40px} /* ---- Button prompts: a console footer bar for controller and keyboard play. Menus confirm with the bottom face button and go back with the right one (menu-navigation.js), so the glyphs follow the connected pad family. ---- */ #game:is([data-input=pad],[data-input=keyboard]) #overlay.active>.panel::after{position:sticky;bottom:0;display:block;margin:14px 0 0;box-sizing:border-box;max-width:100%;padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));border:2.5px solid var(--sp-ink);border-radius:14px;background:linear-gradient(180deg,rgba(18,28,78,.96),rgba(10,16,48,.96));box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);font-family:var(--sp-display);font-size:15px;letter-spacing:1px;color:#fff;text-align:right;white-space:pre;z-index:5;pointer-events:none} #game[data-input=pad][data-pad-family=ps] #overlay.active>.panel::after{content:'× SELECT ○ BACK'} #game[data-input=pad][data-pad-family=xbox] #overlay.active>.panel::after{content:'Ⓐ SELECT Ⓑ BACK'} #game[data-input=pad][data-pad-family=nintendo] #overlay.active>.panel::after{content:'Ⓑ SELECT Ⓐ BACK'} #game[data-input=keyboard] #overlay.active>.panel::after{content:'ENTER SELECT ESC BACK'} /* ==== In-match HUD ======================================================== */ /* Scoreboard: an outlined broadcast bar with display-type scores and clock. */ #game .scoreboard{border:3px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#26409c 0%,#172a73 55%,#101c55 100%)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 4px 0 var(--sp-ink)!important} #game .scoreboard :is(strong,#score,#score2,[id^=score]){font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:5px var(--sp-ink);paint-order:stroke fill;letter-spacing:.5px} #game .scoreboard .game-clock b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill;letter-spacing:.6px} #game .scoreboard .game-clock span,#game .scoreboard .team span{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px;color:#dfe8ff!important} /* Which side is yours: each score sits on the colour its team wears on the field (--team-color, set in game.js) and a small pip marks your score (P1/P2 on a couch). No logos or names: the field says the rest. */ #game.started .scoreboard .team{background:linear-gradient(90deg,color-mix(in srgb,var(--team-color,transparent) 78%,transparent) 0,color-mix(in srgb,var(--team-color,transparent) 30%,transparent) 42%,transparent 82%);border-radius:11px 0 0 11px} #game.started .scoreboard .team.opponent{background:linear-gradient(270deg,color-mix(in srgb,var(--team-color,transparent) 78%,transparent) 0,color-mix(in srgb,var(--team-color,transparent) 30%,transparent) 42%,transparent 82%);border-radius:0 11px 11px 0} #game.started .scoreboard .team strong{position:relative;z-index:1} #game.started .scoreboard .team strong[data-pip]:not([data-pip=""])::after{content:attr(data-pip);position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);padding:1px 4px 0;border-radius:4px;background:var(--sp-yellow);box-shadow:0 0 0 1.5px var(--sp-ink);color:var(--sp-ink);font:400 8px/1.15 var(--sp-display);letter-spacing:.8px;-webkit-text-stroke:0;white-space:nowrap;pointer-events:none} /* The match strip docks flush under the scorebug in landscape and overlaps its foot on the play-call screen, so there the pip rides the score's top edge. */ #game.started.calling-play .scoreboard .team strong[data-pip]:not([data-pip=""])::after{top:-6px;bottom:auto} @media(orientation:landscape){#game.started .scoreboard .team strong[data-pip]:not([data-pip=""])::after{top:-6px;bottom:auto}} #game .match-strip{border:2.5px solid var(--sp-ink)!important;border-radius:12px!important;background:linear-gradient(180deg,#1a2d78,#0f1a4d)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)!important} #game .match-strip #down{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.8px;color:var(--sp-yellow)!important} #game .match-strip :is(#spot,#play-clock,.timeout-strip button,#cpu-timeouts){font-weight:900!important;letter-spacing:.5px} #game .match-strip #play-clock{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important} /* Pre-snap and practice action bars. */ #game .controller :is(#audible-button,#hot-routes-button,#rb-motion,#controller-start,#controller-options,#audible-choices button),#game #practice-tools button,#game #defense-tools button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.6px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game .controller :is(#audible-button,#hot-routes-button,#rb-motion,#audible-choices button):active,#game #practice-tools button:active,#game #defense-tools button:active{transform:translateY(3px)} #game #defense-tools #defense-lock[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;text-shadow:none!important} /* Face buttons: glossy console discs, a white rim, a thick ink edge and a bold coloured glyph; they press down on touch. */ #game .controller .face .pad{border:3px solid var(--sp-ink)!important;background:radial-gradient(circle at 50% 30%,rgba(70,84,150,.92) 0%,rgba(22,30,74,.92) 62%,rgba(11,17,48,.94) 100%)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.88),inset 0 5px 0 3px rgba(255,255,255,.14),0 5px 0 var(--sp-ink)!important;transition:transform .06s,box-shadow .06s!important} #game .controller .face .pad .button-symbol svg{stroke-width:4.2px!important;filter:drop-shadow(0 2px 0 var(--sp-ink))} #game .controller .face .pad small{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.8px!important;color:#fff!important;-webkit-text-stroke:3.5px var(--sp-ink);paint-order:stroke fill} #game .controller .face .pad:is(.pressed,:active){transform:translateY(4px) scale(.97)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.88),0 1px 0 var(--sp-ink)!important} #game .controller #joystick{filter:drop-shadow(0 4px 0 rgba(11,17,48,.8))} #game .controller #stick{border:3px solid var(--sp-ink)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),inset 0 6px 0 3px rgba(255,255,255,.18),0 4px 0 var(--sp-ink)!important} #game .controller :is(.control-caption,#mode,.meter-label){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1.2px!important} /* Kicking: a console power gauge that always sits above the keyboard help. */ #game #kick-controls{z-index:40!important;border:2.5px solid #fff!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(26,32,66,.96),rgba(12,16,40,.96))!important;box-shadow:0 0 0 2.5px var(--sp-ink),0 5px 0 2px var(--sp-ink)!important;color:#fff!important} #game #kick-controls #kick-title{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px!important;color:var(--sp-yellow)!important;-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game #kick-controls #kick-power-value{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game #kick-controls #kick-power{height:16px!important;min-height:16px!important;border:2.5px solid var(--sp-ink)!important;border-radius:10px!important;background:#0b1130!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)!important;overflow:hidden} #game #kick-controls #kick-power i{height:100%!important;border-radius:7px!important;background:linear-gradient(90deg,var(--sp-green) 0%,var(--sp-yellow) 62%,var(--sp-red) 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45)!important} #game #kick-controls :is(#kick-instruction,#kick-contact-text){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.8px!important;color:#fff!important} #game #keyboard-help{border:2px solid rgba(255,255,255,.8)!important;border-radius:14px!important;background:rgba(12,16,40,.88)!important;font-weight:800} /* Coach's reaction after a play: the Nintendo dialog box. */ #game #coach-dialogue{border:2.5px solid #fff!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(26,32,66,.95),rgba(12,16,40,.95))!important;box-shadow:0 0 0 2.5px var(--sp-ink),0 6px 0 2px var(--sp-ink)!important;color:#fff!important} #game #coach-dialogue :is(b,.coach-result){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.6px;color:var(--sp-yellow)!important} #game #coach-dialogue p{font-weight:800!important;color:#fff!important} #game #coach-dialogue button{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff,var(--sp-sky) 45%,#1591d8)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} /* Move callouts and field hints: keep live move feedback in the controller caption. */ #game #banner{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px!important} #game #move-tag{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;color:var(--move-color,var(--sp-yellow))!important;border:1px solid var(--move-color,var(--sp-yellow))!important;border-radius:8px!important;background:rgba(14,20,50,.88)!important;box-shadow:0 2px 0 var(--sp-ink)!important;text-shadow:none!important} #game :is(#defense-hint,#pass-controls,.status #hint){font-weight:900!important} #game #defense-hint{border:2.5px solid #fff!important;border-radius:12px!important;background:rgba(14,20,50,.9)!important;box-shadow:0 0 0 2px var(--sp-ink)!important} /* ---- Reduced motion ------------------------------------------------------- */ .pd-reduced-motion #game #overlay *,.pd-reduced-motion #game #overlay *::before{animation:none!important} @media(prefers-reduced-motion:reduce){#game #overlay *{animation:none!important}#game #overlay.premium-panel .sp-home h1.sp-logo{transform:none}} /* ==== FRANCHISE & LEAGUE (agent) ==== */ /* Franchise (fr2 clubhouse/roster/staff/league/stadium) and the older Club/League screens (club editor, online league lobby) restyled to the home/pause console language: ink-outlined framed cards with a white inner rim, slanted red ribbon labels, bevelled 3D buttons that press down, gold for the chosen/primary item, dark dialogs with a white rim. Selectors are scoped to #game and carry !important to win over the layered franchise-ui.css/league-ui.css. */ /* ---- Fix: card headings inherit the big white-fill+ink-stroke "poster" treatment meant for dark backgrounds; on the light card paper that leaves them nearly unreadable. Reset every heading that sits on light paper to solid ink, keep the display font. ------------------- */ #game #overlay:is(.franchise-panel,.club-panel,.league-panel) :is(h1,h2,h3){font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important} #game #overlay.franchise-panel .fr2 :is(.fr2-card-top h2,.fr2-card-top h3,.fr2-project>h2,.fr2-venue-banner h2,.fr2-selected-club h3,.fr2-history-champion h3,.fr2-coach-card h3,.fr2-player-identity h2,.fr2-empty strong){color:var(--sp-ink)!important;-webkit-text-stroke:0!important;text-shadow:none!important;letter-spacing:.1px!important} #game #overlay.league-panel .league-card :is(h2,h3),#game #overlay.league-panel .club-select-summary strong{color:var(--sp-ink)!important;-webkit-text-stroke:0!important;text-shadow:none!important} /* ---- Ribbon eyebrows: fr2-eyebrow and league-kicker get the same slanted red tag as the home/pause .eyebrow, so every screen opens on the same "Mushroom Cup" label. ------------ */ #game #overlay:is(.franchise-panel,.club-panel,.league-panel) :is(.fr2-eyebrow,.league-kicker,.fr-overline){position:relative;z-index:0;display:inline-block;width:max-content;max-width:100%;padding:5px 14px 4px!important;margin:0 0 2px!important;font-family:var(--sp-display)!important;font-weight:400!important;font-size:12px!important;letter-spacing:1px!important;line-height:1.1!important;color:#fff!important;text-shadow:none!important;text-transform:uppercase;box-sizing:border-box} #game #overlay:is(.franchise-panel,.club-panel,.league-panel) :is(.fr2-eyebrow,.league-kicker,.fr-overline)::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-16deg);border-radius:4px;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 4px,var(--sp-red-lo) 100%);border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game #overlay.franchise-panel .fr2 .fr2-heading .fr2-eyebrow{margin-bottom:6px!important} #game #overlay.franchise-panel .fr2 .journey-heading .fr2-eyebrow{margin:0 0 6px!important} #game #overlay.league-panel .league-top .league-kicker{position:static;background:none;padding:0!important;color:#dfe8ff!important;font-size:11px!important;letter-spacing:1.6px!important} #game #overlay.league-panel .league-top .league-kicker::before{display:none} /* ---- Card frame: thick ink outline + white inner rim + ink drop shadow, the exact home-tile recipe, on every framed panel across both the fr2 dashboard and the older screens. -------- */ #game #overlay.franchise-panel .fr2 .fr2-card{background:#fbfaf0!important;border:3px solid var(--sp-ink)!important;border-radius:18px!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-card:has(.fr2-quick-actions),#game #overlay.franchise-panel .fr2 .fr2-card:has(.fr2-task-list){background:transparent!important;border:0!important;box-shadow:none!important} #game #overlay.franchise-panel .fr2-content>.fr2-match-card{border:3px solid var(--sp-ink)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 6px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-venue-banner{border:3px solid var(--sp-ink)!important;background:#e5eeec!important;box-shadow:inset 0 0 0 3px #fff,0 5px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-coach-card{border:3px solid var(--sp-ink)!important;background:#f7f9f3!important;box-shadow:inset 0 0 0 3px #fff,0 5px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-coach-card.hired{border-color:var(--sp-ink)!important;background:#fff4c7!important;box-shadow:inset 0 0 0 3px #fff,0 5px 0 var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-bracket-game{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;background:#f6f8f3!important} #game #overlay.franchise-panel .fr2 .fr2-bracket-game.mine{background:#fff4c7!important;border-color:var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-signing{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.franchise-panel .fr2 .fr2-prospect{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;background:#f7f9f2!important} #game #overlay.franchise-panel .fr2 .fr2-prospect.selected{background:#fff4c7!important;border-color:var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-scout-report{border:2.5px solid var(--sp-ink)!important;box-shadow:0 4px 0 var(--sp-ink)!important} /* ---- fr2 sidebar/mobile navigation: chunky ink-outlined pills, gold when chosen. --------- */ #game #overlay.franchise-panel .fr2-nav button{border:2.5px solid transparent!important;font-family:var(--sp-display)!important;letter-spacing:.3px!important} #game #overlay.franchise-panel .fr2-nav button[aria-current=page]{border-color:var(--sp-ink)!important;box-shadow:0 4px 0 var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2-mobile-nav .fr2-nav button[aria-current=page]{box-shadow:0 3px 0 var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2-nav button:active{transform:translateY(2px)} /* ---- fr2 tabs (section switches: Starters/Reserves, Standings/Schedule, Staff/Game plan) -- Console tab bar: ink-outlined blue pills, the active one gold with an ink outline too. --- */ #game #overlay.franchise-panel .fr2-tabs{border-bottom:0!important;gap:8px!important} #game #overlay.franchise-panel .fr2-tabs button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;border:0!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 var(--sp-base),var(--sp-lift)!important;transition:transform .07s,box-shadow .07s!important} #game #overlay.franchise-panel .fr2-tabs button:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--sp-base)!important} #game #overlay.franchise-panel .fr2-tabs button[aria-current=page]{background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;color:var(--sp-ink)!important;border-color:var(--sp-ink)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.franchise-panel .fr2-difficulty button{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;font-family:var(--sp-display)!important} #game #overlay.franchise-panel .fr2-difficulty button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;border-color:var(--sp-ink)!important} #game #overlay.franchise-panel .fr2-difficulty button:active{transform:translateY(2px)} /* ---- fr2 buttons: the same bevelled 3D console button as the rest of the game. ------------ */ #game #overlay.franchise-panel .fr2 .fr2-button{font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.3px!important;border:0!important;transition:transform .07s ease-out,box-shadow .07s ease-out,filter .12s!important} #game #overlay.franchise-panel .fr2 .fr2-primary{box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important} #game #overlay.franchise-panel .fr2 .fr2-secondary{background:linear-gradient(180deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-blue-lo) 100%)!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)!important} #game #overlay.franchise-panel .fr2 .fr2-small{background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;color:var(--sp-ink)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay.franchise-panel .fr2 .fr2-light{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 2px 0 var(--sp-base)!important} #game #overlay.franchise-panel .fr2 .fr2-danger{background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo) 100%)!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)!important} #game #overlay.franchise-panel .fr2 :is(.fr2-primary,.fr2-secondary,.fr2-small,.fr2-danger):is(:hover,:focus-visible):not(:disabled){filter:brightness(1.07)} #game #overlay.franchise-panel .fr2 :is(.fr2-primary,.fr2-secondary,.fr2-small,.fr2-light,.fr2-danger):active:not(:disabled){transform:translateY(3px)!important;box-shadow:0 1px 0 var(--sp-base)!important} #game #overlay.franchise-panel .fr2 button.fr2-button:disabled{filter:grayscale(.6) brightness(.85);transform:none!important;box-shadow:0 1px 0 var(--sp-base)!important} /* ---- Setup wizard: step pills, club picker cards, star duo footer. ------------------------ */ #game #overlay.franchise-panel .fr2-setup-steps b{border:2px solid var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2-setup-steps .current b{border-color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2-setup-steps>i{background:var(--sp-ink)!important;opacity:.35;height:2px!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;transition:transform .07s,box-shadow .07s!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice:active{transform:translateY(3px)!important;box-shadow:0 1px 0 var(--sp-base)!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice small{color:#5b7268!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;border-color:var(--sp-ink)!important;box-shadow:0 4px 0 var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice[aria-pressed=true]>svg{color:var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-option{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.franchise-panel .fr2 .fr2-option[aria-pressed=true]{background:#fff4c7!important;border-color:var(--sp-ink)!important;box-shadow:0 3px 0 var(--sp-yellow-lo)!important;color:var(--sp-ink)!important} #game #overlay.franchise-panel .fr2-option[aria-pressed=true] .fr2-radio{border-color:var(--sp-yellow-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-club-choice[aria-pressed=true] small{color:#4f3e08!important} /* ---- Badges, metrics and progress: chunky chips with a thin ink outline. ------------------ */ #game #overlay.franchise-panel .fr2 .fr2-badge{border:1.5px solid var(--sp-ink)!important;font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.2px!important;text-transform:none} #game #overlay.franchise-panel .fr2 .fr2-badge.fr2-growth{background:#dcefc0!important;color:#3f6320!important;border-color:var(--sp-green-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-badge.fr2-loss{background:#ffdccb!important;color:#8a3418!important;border-color:var(--sp-red-lo)!important} #game #overlay.franchise-panel .fr2 .fr2-badge.fr2-light{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.55)!important;color:#fff!important} #game #overlay.franchise-panel .fr2 .fr2-ovr{border:2px solid var(--sp-ink)!important;font-family:var(--sp-display)!important} #game #overlay.franchise-panel .fr2 .fr2-ovr-high{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;border-color:var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-progress{border:1.5px solid var(--sp-ink)!important;background:#e9efe0!important} #game #overlay.franchise-panel .fr2 .fr2-progress i{background:linear-gradient(90deg,var(--sp-green-lo),var(--sp-green))!important} #game #overlay.franchise-panel .fr2 .fr2-attributes i{background:linear-gradient(90deg,var(--sp-green-lo) var(--rating),#e5ece5 0)!important;border:1px solid var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-stat i{background:linear-gradient(90deg,var(--sp-green-lo) var(--n),#ffffff12 0)!important} #game #overlay.franchise-panel .fr2 .fr2-metrics{border-radius:16px!important} #game #overlay.franchise-panel .fr2 .fr2-metric strong{color:var(--sp-yellow)!important;text-shadow:0 2px 0 #020b14} #game #overlay.franchise-panel .fr2 .fr2-project-levels span{border:1.5px solid var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-project-levels span.done{background:var(--sp-green)!important;color:#0d3d1c!important} #game #overlay.franchise-panel .fr2 .fr2-needs button{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.franchise-panel .fr2 .fr2-needs button.complete{background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 60%,var(--sp-green-lo))!important;color:#0d3d1c!important;border-color:var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-checklist>div>span{border:1.5px solid var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-checklist .done>span{background:var(--sp-green)!important;color:#0d3d1c!important;border-color:var(--sp-ink)!important} /* ---- List rows: a light ink-outlined card so tables of players/games/picks read as tiles, never a thin colored-left-border row. --------------------------------------------------- */ #game #overlay.franchise-panel .fr2 :is(.fr2-player-row,.fr2-schedule-row,.fr2-seed-list>div,.fr2-draft-board>div,.fr2-leader-list>div,.fr2-trade-list>button,.fr2-watch-list button,.fr2-unit-list>:is(button,div),.fr2-upgrade-list>div,.fr2-ledger>div,.fr2-opponent-roster>div,.fr2-compact-list>div,.fr2-draft-order>span){border:1.5px solid #d8e2d3!important;border-radius:10px!important} #game #overlay.franchise-panel .fr2 :is(.fr2-player-row.selected,.fr2-schedule-row.current,.fr2-seed-list>div.mine,.fr2-draft-board>div.mine,.fr2-compact-list>div.mine,.fr2-bracket-game.mine,.fr2-draft-order>span.mine,.fr2-trade-list>button.selected){border-color:var(--sp-yellow-lo)!important;background:#fff4c7!important} #game #overlay.franchise-panel .fr2 .fr2-player-row:hover{border-color:#b7c7ae!important} #game #overlay.franchise-panel .fr2 .fr2-table th button{border-radius:8px!important} #game #overlay.franchise-panel .fr2 .fr2-table tr.mine{background:#fff4c7!important} #game #overlay.franchise-panel .fr2 .fr2-position{border:1.5px solid var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-jersey{border:2px solid var(--sp-ink)!important;box-shadow:0 3px 0 rgba(0,0,0,.35)!important} #game #overlay.franchise-panel .fr2 .fr2-mark{border:2px solid var(--sp-ink)!important;box-shadow:inset 0 1px #ffffff30,0 3px 0 var(--sp-ink)!important} #game #overlay.franchise-panel .fr2 .fr2-mark-small{border-width:1.5px!important;box-shadow:0 2px 0 var(--sp-ink)!important} /* ---- Fields, search and selects: ink-outlined console fields, not flat grey bars. --------- */ #game #overlay.franchise-panel .fr2 :is(.fr2-search,.fr2-select,.fr2-field input,.fr2-field select){border:2px solid var(--sp-ink)!important;background:#fff!important;box-shadow:inset 0 2px 3px rgba(11,17,48,.08)!important} #game #overlay.franchise-panel .fr2 :is(.fr2-search,.fr2-select){border-radius:12px!important} #game #overlay.franchise-panel .fr2-field input,#game #overlay.franchise-panel .fr2-field select{border-radius:11px!important} #game #overlay.franchise-panel .fr2 :is(.fr2-search,.fr2-select,.fr2-field) input:focus-visible,#game #overlay.franchise-panel .fr2 select:focus-visible{outline:3px solid var(--sp-blue)!important;outline-offset:2px} /* ---- Alerts/notices: colored banner with an ink outline (never a colored left border). --- */ #game #overlay.franchise-panel .fr2-alert{border:2px solid var(--sp-red-lo)!important;border-radius:14px!important} #game #overlay.franchise-panel .fr2-notice{border:2px solid var(--sp-green-lo)!important;border-radius:14px!important} #game #overlay.franchise-panel .fr2-empty{border:2px dashed #c3d0c8!important;border-radius:14px!important} /* ===================================================================================== Older screens: the club editor and the online-league lobby (.club-panel / .league-panel, markup in club-ui.js / league-ui.js). These are still flat pale web-form pills; bring them fully into the console language. ==================================================== */ #game #overlay:is(.club-panel,.league-panel) .club-top .eyebrow{margin:0 0 4px!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-hero h2,.league-shell>h2){letter-spacing:.2px!important} /* Tabs: Identity/Uniforms/Stadium, and the bottom Club/Players/Home/League dock. */ #game #overlay:is(.club-panel,.league-panel) :is(.club-tabs,.league-nav){gap:8px!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-tabs button,.league-nav button){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;color:#dfe8ff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.7)!important;transition:transform .07s,box-shadow .07s!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-tabs button,.league-nav button):active{transform:translateY(3px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--sp-base)!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-tabs button[aria-pressed=true],.league-nav button[aria-pressed=true]){background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.league-panel .league-top button:not([data-menu-cancel]){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important;padding:8px 14px!important;min-height:40px} #game #overlay.league-panel .league-top button:not([data-menu-cancel]):active{transform:translateY(2px)} /* Fields: club name, city, league name/code, coach & venue selects. */ #game #overlay:is(.club-panel,.league-panel) .club-field{color:#cfe0ea!important;font-weight:800!important;letter-spacing:.3px!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-field input,.club-field select,.league-shell input,.league-shell select){border:2.5px solid var(--sp-ink)!important;border-radius:12px!important;background:#f4efe0!important;color:var(--sp-ink)!important;font-weight:800!important;box-shadow:inset 0 2px 3px rgba(11,17,48,.18)!important} #game #overlay:is(.club-panel,.league-panel) :is(.club-field input,.club-field select,.league-shell input,.league-shell select):focus-visible{outline:3px solid var(--sp-yellow)!important;outline-offset:2px} #game #overlay:is(.club-panel,.league-panel) .club-colors input{border:2.5px solid var(--sp-ink)!important;border-radius:8px!important} #game #overlay:is(.club-panel,.league-panel) .uniform-pair strong{border:2.5px solid var(--sp-ink)!important;box-shadow:0 3px 0 rgba(0,0,0,.3)!important} /* Primary/secondary buttons shared by the club editor and the league lobby. */ #game #overlay:is(.club-panel,.league-panel) :is(.fr-primary,.fr-secondary){font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.4px!important;border-width:2.5px!important;border-style:solid!important;border-radius:14px!important;transition:transform .07s ease-out,box-shadow .07s ease-out,filter .12s!important} #game #overlay:is(.club-panel,.league-panel) .fr-primary{color:var(--sp-ink)!important;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;border-color:var(--sp-ink)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 4px 0 var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important} #game #overlay:is(.club-panel,.league-panel) .fr-secondary{color:#fff!important;background:linear-gradient(180deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-blue-lo) 100%)!important;border-color:var(--sp-ink)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 var(--sp-ink)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)!important} #game #overlay:is(.club-panel,.league-panel) :is(.fr-primary,.fr-secondary):is(:hover,:focus-visible):not(:disabled){filter:brightness(1.07)} #game #overlay:is(.club-panel,.league-panel) :is(.fr-primary,.fr-secondary):active:not(:disabled){transform:translateY(3px)!important;box-shadow:0 1px 0 var(--sp-ink)!important} #game #overlay:is(.club-panel,.league-panel) :is(.fr-primary,.fr-secondary):disabled{filter:grayscale(.6) brightness(.85);transform:none!important} /* Cards, rows and detail panels: the framed-tile recipe again. */ #game #overlay.league-panel .league-card{background:#fbfaf0!important;border:3px solid var(--sp-ink)!important;border-radius:20px!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay.league-panel .league-card .league-kicker{color:#fff!important} #game #overlay:is(.club-panel,.league-panel) .club-venue-detail{background:#fbfaf0!important;border:2.5px solid var(--sp-ink)!important;border-radius:16px!important;box-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay:is(.club-panel,.league-panel) .club-venue-detail b{color:var(--sp-ink)!important} #game #overlay:is(.club-panel,.league-panel) .club-venue-detail span{color:#a5762a!important;font-weight:800!important} #game #overlay.league-panel :is(.fr-row,.league-list .fr-row){border:1.5px solid #d8e2d3!important;border-radius:12px!important;background:#f7f9f2!important;color:#35584c!important} #game #overlay.league-panel .fr-row strong{color:#28453d!important} #game #overlay.league-panel .fr-row.mine{border-color:var(--sp-yellow-lo)!important;background:#fff4c7!important} #game #overlay.league-panel .league-confirm{background:linear-gradient(180deg,rgba(26,32,64,.95),rgba(12,16,40,.95))!important;border:2.5px solid #fff!important;color:#fff!important;box-shadow:0 0 0 2px var(--sp-ink),0 5px 0 2px var(--sp-ink)!important} #game #overlay.league-panel .league-code{-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill;color:#fff!important} #game #overlay.league-panel .club-select-summary{border:2px solid var(--sp-ink)!important;border-radius:14px!important;background:#12233688!important} #game #overlay.league-panel .financial-help{border:1.5px solid rgba(255,255,255,.3)!important;color:#dfe8ff!important;background:rgba(8,14,38,.35)!important} /* Keep every console field a comfortable 44px+ touch target on phones. */ @media(max-width:480px){#game #overlay:is(.club-panel,.league-panel) :is(.club-field input,.club-field select,.league-shell input,.league-shell select){min-height:46px!important}} /* ==== end FRANCHISE & LEAGUE ==== */ /* ==== ONLINE, OPTIONS & RESULTS (agent) ==== */ /* Online arena, Options/Audio/Controls/Save/Playtest panels, coach select, final whistle/score card, film room replay and the First Drive tutorial — reskinned to the same console-sports language as the home/pause screens. online-ui.css, game-menus.css, beta.css and first-drive.css are injected at runtime AFTER this stylesheet, so every override below carries !important. */ /* ---- Online arena: kicker strip ------------------------------------------- */ #game #overlay.online-panel .on-shell{padding-top:4px!important} #game #overlay.online-panel .on-kicker{position:relative;display:flex!important;justify-content:space-between!important;align-items:center;gap:12px;width:100%;margin:0 0 16px!important;padding:8px 16px 7px!important;border:2.5px solid var(--sp-ink)!important;border-radius:10px!important;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo) 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 var(--sp-ink)!important;color:#fff!important;font-family:var(--sp-display)!important;font-weight:400!important;font-size:11px!important;letter-spacing:1.4px!important;text-shadow:0 2px 0 rgba(0,0,0,.35)!important} #game #overlay.online-panel .on-kicker span{color:var(--sp-yellow)!important} #game #overlay.online-panel .on-shell h3{color:#fff!important} #game #overlay.online-panel .on-shell p{color:#dbe8e5!important} #game #overlay.online-panel .on-note{color:#c7dad8!important} /* ---- Online arena: buttons (default blue console pill) -------------------- */ #game #overlay.online-panel .on-shell button{font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;letter-spacing:.5px!important;text-transform:uppercase;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi) 0,var(--sp-blue) 8px,var(--sp-blue-lo) 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important;transition:transform .07s ease-out,box-shadow .07s ease-out,filter .12s!important} #game #overlay.online-panel .on-shell button:is(:hover,.gm-focused){filter:brightness(1.08) saturate(1.08);transform:translateY(-1px)} #game #overlay.online-panel .on-shell button:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 var(--sp-base)!important} #game #overlay.online-panel .on-shell button:disabled{filter:grayscale(.7) brightness(.85);transform:none!important;cursor:default} #game #overlay.online-panel .on-shell button:focus-visible{outline:none!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff,0 0 0 7px var(--sp-yellow)!important} #game #overlay.online-panel .on-shell .on-primary{color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;min-width:220px} /* .on-back already picks up the global red B-button treatment via [data-menu-cancel]. */ #game #overlay.online-panel .on-shell .on-back{margin-top:22px!important} #game #overlay.online-panel .on-rail button,#game #overlay.online-panel .on-bottom button{min-height:44px!important;padding:9px 14px!important;font-size:11px!important} #game #overlay.online-panel .on-bottom #on-team{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:10px!important} #game #overlay.online-panel .on-bottom #on-team span{font-family:var(--sp-ui)!important;font-weight:900!important;letter-spacing:.3px} /* ---- Player card: rank medallion, name plate, XP bar, record -------------- */ #game #overlay.online-panel .on-rank{border:3px solid var(--sp-ink)!important;border-radius:20px 20px 46% 46%!important;background:radial-gradient(120% 100% at 50% 0%,#1c3a63,#0a1830)!important;box-shadow:inset 0 0 0 3px var(--rank),0 5px 0 var(--sp-ink)!important;color:var(--rank)!important;padding:11px 6px!important} #game #overlay.online-panel .on-rank>span{font-family:var(--sp-display)!important;font-weight:400!important;text-shadow:0 2px 0 rgba(0,0,0,.4)} #game #overlay.online-panel .on-rank strong{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:3.5px var(--sp-ink);paint-order:stroke fill} #game #overlay.online-panel .on-rank small{color:#fff!important;font-weight:900;letter-spacing:.6px} #game #overlay.online-panel .on-shell .on-name{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.2px;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;text-transform:none} #game #overlay.online-panel .on-name span{font-family:var(--sp-ui)!important;-webkit-text-stroke:0;color:var(--sp-ink)!important;background:var(--sp-yellow)!important;border-radius:6px;padding:2px 6px;font-weight:900!important;text-shadow:none!important} #game #overlay.online-panel .on-shell .on-title{font-family:var(--sp-display)!important;letter-spacing:.5px!important;color:var(--sp-yellow)!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;text-transform:none;text-shadow:0 2px 0 rgba(0,0,0,.4)!important} #game #overlay.online-panel .on-player-card>div>small{color:#b8cbd6!important;font-weight:800;letter-spacing:.6px} #game #overlay.online-panel .on-xp{border:2.5px solid var(--sp-ink)!important;border-radius:8px!important;background:#0a1830!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)!important;height:12px!important} #game #overlay.online-panel .on-xp i{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)} #game #overlay.online-panel .on-record b{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill;font-size:30px!important} #game #overlay.online-panel .on-record i{color:var(--sp-yellow)!important;font-style:normal} #game #overlay.online-panel .on-record span,#game #overlay.online-panel .on-record small{color:#c7d8de!important;font-weight:900;letter-spacing:1px} /* ---- Resume / pending banners ---------------------------------------------- */ #game #overlay.online-panel .on-shell .on-resume,#game #overlay.online-panel .on-shell .on-pending{border:0!important;border-radius:16px!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;background:linear-gradient(180deg,var(--sp-green-hi) 0%,var(--sp-green) 50%,var(--sp-green-lo) 100%)!important;color:#fff!important;text-shadow:0 2px 0 rgba(8,14,48,.6)!important} #game #overlay.online-panel .on-shell .on-pending{background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 50%,var(--sp-yellow-lo) 100%)!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important} #game #overlay.online-panel .on-resume span,#game #overlay.online-panel .on-pending span{font-weight:900!important} /* ---- Loading / searching --------------------------------------------------- */ #game #overlay.online-panel .on-ball{border:3px solid var(--sp-ink)!important;background:radial-gradient(circle at 35% 30%,#e0996a,var(--sp-red-lo) 75%)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 0 var(--sp-ink)!important;color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.4)!important} #game #overlay.online-panel .on-search i{background:var(--sp-yellow)!important;border:2px solid var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-ink)!important} /* ---- Entry field (name / room code) ---------------------------------------- */ #game #overlay.online-panel .on-entry input{border:3px solid var(--sp-ink)!important;border-radius:12px!important;background:#fff!important;color:var(--sp-ink)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.18)!important;font-weight:900} #game #overlay.online-panel .on-entry input:focus-visible{outline:none!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.18),0 0 0 3px var(--sp-yellow)!important} /* ---- Mode cards get a ranked-ladder look on top of the existing .on-mode --- */ #game #overlay.online-panel .on-shell .on-mode{padding-top:30px!important} /* ---- Titles grid ------------------------------------------------------------ */ #game #overlay.online-panel .on-title-grid button{border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#22407e,#152a5c)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important} #game #overlay.online-panel .on-title-grid button[disabled]{filter:grayscale(.65) brightness(.72)} #game #overlay.online-panel .on-title-grid button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay.online-panel .on-title-grid small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-title-grid button[aria-pressed=true] small{color:var(--sp-blue-lo)!important} #game #overlay.online-panel .on-title-grid strong{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px} #game #overlay.online-panel .on-title-grid span{color:#dbe8ef!important} #game #overlay.online-panel .on-title-grid button[aria-pressed=true] span{color:#4a3a0a!important} /* ---- Rulebook cards ---------------------------------------------------------- */ #game #overlay.online-panel .on-rules article{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(26,32,64,.95),rgba(12,16,40,.95))!important;box-shadow:0 0 0 2.5px var(--sp-ink),0 5px 0 2px var(--sp-ink)!important;color:#fff!important} #game #overlay.online-panel .on-rules b{font-family:var(--sp-display)!important;font-weight:400!important;font-size:17px!important;letter-spacing:.3px;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-rules p{font-weight:700!important;color:#e4ecf5!important} /* ---- Versus matchup ---------------------------------------------------------- */ #game #overlay.online-panel .on-team{border:3px solid var(--sp-ink)!important;border-radius:20px!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important;background:linear-gradient(170deg,#2f6ca6 0%,#1a3f6e 100%)!important} #game #overlay.online-panel .on-team.opponent{background:linear-gradient(170deg,#8a5aa8 0%,#3f2f6e 100%)!important} #game #overlay.online-panel .on-team small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-team h3{font-family:var(--sp-display)!important;font-weight:400!important;-webkit-text-stroke:3.5px var(--sp-ink);paint-order:stroke fill;color:#fff!important} #game #overlay.online-panel .on-team>span{color:#e2ecf4!important;font-weight:700} #game #overlay.online-panel .on-vs{font-family:var(--sp-display)!important;font-weight:400!important;font-style:normal!important;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game #overlay.online-panel .on-ready{border:2px solid var(--sp-ink)!important;border-radius:20px!important;font-weight:900!important;background:#0f2438!important;color:#c9dce4!important} #game #overlay.online-panel .on-ready.yes{background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo))!important;color:#fff!important;text-shadow:0 1px 0 rgba(8,14,48,.5)!important} /* ---- Draft duel cards ---------------------------------------------------------- */ #game #overlay.online-panel .on-shell .on-draft-card{border:0!important;border-radius:17px!important;background:linear-gradient(180deg,#ffffff 0%,#eef0e0 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;transition:transform .08s!important} #game #overlay.online-panel .on-shell .on-draft-card:is(:hover,.gm-focused){transform:translateY(-2px);background:linear-gradient(180deg,#fffbe0 0%,#fff2b0 100%)!important;border-color:var(--sp-ink)!important;color:var(--sp-ink)!important} #game #overlay.online-panel .on-draft-card:active{transform:translateY(3px)!important} #game #overlay.online-panel .on-draft-card>small{font-family:var(--sp-display)!important;letter-spacing:.6px!important;color:var(--sp-blue-lo)!important} #game #overlay.online-panel .on-draft-card>strong{font-family:var(--sp-display)!important;font-weight:400!important;font-size:22px!important} #game #overlay.online-panel .on-draft-card p{color:#3c4b3f!important} #game #overlay.online-panel .on-draft-card>div>span{border-bottom-color:#d6dcc9!important;font-weight:800} #game #overlay.online-panel .on-draft-card em{color:var(--sp-purple-lo)!important;font-weight:900} #game #overlay.online-panel .on-draft-card .on-mode-cta{color:var(--sp-red-lo)!important;-webkit-text-stroke:0!important} #game #overlay.online-panel .on-draft-wait{border:3px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#2c615c,#173a37)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important;color:#fff!important} #game #overlay.online-panel .on-draft-wait small{font-family:var(--sp-display)!important;letter-spacing:1px!important;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-draft-wait h3{color:#fff!important} /* ---- Invite code -------------------------------------------------------------- */ #game #overlay.online-panel .on-invite strong{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:5px!important;color:var(--sp-yellow)!important;-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill;padding:8px 16px;border:3px solid var(--sp-ink);border-radius:12px;background:#0d2038;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2)} /* ---- History / results list ---------------------------------------------------- */ #game #overlay.online-panel .on-shell .on-history-card{border:0!important;border-radius:14px!important;background:linear-gradient(180deg,#1a3252,#102138)!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important} #game #overlay.online-panel .on-history-card>strong{font-family:var(--sp-display)!important;letter-spacing:.6px!important} #game #overlay.online-panel .on-history-card>.win{color:var(--sp-green-hi)!important} #game #overlay.online-panel .on-history-card>.loss,#game #overlay.online-panel .on-history-card>.forfeit{color:var(--sp-red-hi)!important} #game #overlay.online-panel .on-history-card>span{color:#fff!important;font-weight:800} #game #overlay.online-panel .on-history-card>span>small{color:#b7cbd4!important} #game #overlay.online-panel .on-history-card>b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-history-card>small{color:#b7cbd4!important} #game #overlay.online-panel .on-empty{border:3px dashed #fff5!important;border-radius:18px!important;background:rgba(10,24,48,.7)!important;color:#dfeaf0!important} #game #overlay.online-panel .on-empty b{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important} /* ---- Tabs and pagination -------------------------------------------------------- */ #game #overlay.online-panel .on-tabs button,#game #overlay.online-panel .on-pages button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #game #overlay.online-panel .on-tabs button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay.online-panel .on-pages span{color:#e4edf2!important;font-weight:900} /* ---- Leaderboards ----------------------------------------------------------------- */ #game #overlay.online-panel .on-leaders>div{border:0!important;border-bottom:2px solid #ffffff22!important;background:#12294420!important} #game #overlay.online-panel .on-leaders>div.self{background:linear-gradient(90deg,rgba(47,211,90,.28),rgba(47,211,90,.06))!important;border-bottom-color:var(--sp-green)!important} #game #overlay.online-panel .on-leaders>div>b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;-webkit-text-stroke:2px var(--sp-ink);paint-order:stroke fill} #game #overlay.online-panel .on-leaders strong{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important} #game #overlay.online-panel .on-leaders small{color:#b7cbd4!important} /* ---- Match result / receipt --------------------------------------------------------- */ #game #overlay.online-panel .on-final{border:3px solid var(--sp-ink)!important;border-radius:20px!important;background:linear-gradient(180deg,#1a3252,#0d1c34)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay.online-panel .on-final b{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:5px var(--sp-ink);paint-order:stroke fill} #game #overlay.online-panel .on-final i{font-family:var(--sp-display)!important;color:var(--sp-yellow)!important;letter-spacing:1px} #game #overlay.online-panel .on-final span{color:#dfeaf0!important;font-weight:800} #game #overlay.online-panel .on-receipt article{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1e3a5f,#122a48)!important;box-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay.online-panel .on-receipt strong{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;-webkit-text-stroke:2px var(--sp-ink);paint-order:stroke fill} #game #overlay.online-panel .on-receipt em{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-green-hi)!important} #game #overlay.online-panel .on-receipt em.loss{color:var(--sp-red-hi)!important} #game #overlay.online-panel .on-receipt span{color:#c9dbe2!important} #game #overlay.online-panel .on-unlock{border:3px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay.online-panel .on-unlock strong{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)} #game #overlay.online-panel .on-unlock span{color:#5b4a10!important;font-weight:800} #game #overlay.online-panel .on-box{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:#132844!important} #game #overlay.online-panel .on-box>*{border-bottom-color:#ffffff20!important;color:#fff!important;font-weight:700} #game #overlay.online-panel .on-box>b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important} #game #overlay.online-panel .on-player-stats article{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1e3a5f,#122a48)!important} #game #overlay.online-panel .on-player-stats strong{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important} #game #overlay.online-panel .on-player-stats small{color:var(--sp-yellow)!important} #game #overlay.online-panel .on-player-stats p{color:#c9dbe2!important} #game #overlay.online-panel .on-error{color:var(--sp-red-hi)!important} /* ==== Options / Audio / Controller / Vibration / Display / Save / Playtest ==== */ /* Native selects, color pickers and text fields are replaced at runtime with .gm-choice buttons that open a .gm-dialog; restyle that whole system once so every settings screen (Options, Display, exhibition pickers, etc.) matches. */ #overlay .gm-choice,#practice-tools .gm-choice,#defense-tools .gm-choice{font-family:var(--sp-ui)!important;font-weight:800!important;border:0!important;border-radius:13px!important;background:linear-gradient(180deg,#ffffff 0%,#e7edf3 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;color:var(--sp-ink)!important;transition:transform .07s!important} #overlay .gm-choice:hover{background:linear-gradient(180deg,#fffbe0,#fff2b0)!important;border-color:var(--sp-ink)!important} #overlay .gm-choice:active{transform:translateY(3px)!important;box-shadow:0 1px 0 var(--sp-base)!important} #overlay .gm-choice .gm-value{color:var(--sp-ink)!important} .gm-choice-hint{color:var(--sp-blue-lo)!important;font-weight:900!important} .gm-dialog{border:3px solid var(--sp-ink)!important;border-radius:20px!important;background:linear-gradient(180deg,#eaf0ed 0%,#dbe6e2 100%)!important;box-shadow:0 10px 0 var(--sp-ink),0 20px 46px rgba(0,0,0,.5)!important;color:var(--sp-ink)!important} .gm-dialog header{background:linear-gradient(180deg,#243a8f,#172a6e)!important;color:#fff!important;border-bottom:3px solid var(--sp-ink)!important} .gm-dialog h2{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;color:#fff!important} .gm-dialog .gm-back{font-family:var(--sp-display)!important;letter-spacing:.5px!important;border:2px solid #ffffff66!important;border-radius:20px!important;background:#ffffff1a!important;color:#fff!important} .gm-option{border:0!important;border-radius:13px!important;background:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 #b9c6c2!important} .gm-option strong{font-family:var(--sp-display)!important;font-weight:400!important} .gm-option small{color:var(--sp-blue-lo)!important;font-weight:900!important} .gm-option[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;border-color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift)!important} .gm-dialog footer button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;border:0!important;border-radius:14px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)!important} .gm-dialog .gm-entry input{border:3px solid var(--sp-ink)!important;border-radius:12px!important;background:#fff!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.15)!important;color:var(--sp-ink)!important} .gm-dialog footer .gm-confirm{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important} .gm-palette button{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important} .gm-palette button[aria-pressed=true]{outline:3px solid var(--sp-yellow)!important;outline-offset:2px!important} #overlay :is(button,summary):focus-visible,.gm-dialog :is(button,input):focus-visible{outline:none!important;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--sp-yellow)!important} /* ---- Segmented settings rows (Controller, Protection): .control-setting ------- */ #game #overlay .control-setting{border:2.5px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 4px 0 var(--sp-ink)!important;color:#fff!important} #game #overlay .control-setting>b{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px;color:var(--sp-yellow)!important} #game #overlay .control-setting p{color:#d3e0e7!important} #game #overlay .control-setting button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;border:0!important;border-radius:11px!important;background:linear-gradient(180deg,#3f5ed6,#1d318c)!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay .control-setting button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 2px #fff!important} #game #overlay .control-setting button:active{transform:translateY(2px)} /* ---- Vibration mode tabs (.huddle-tabs is exclusive to this screen) ------------ */ #game #overlay .huddle-tabs{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:#122349!important;padding:4px!important} #game #overlay .huddle-tabs button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;border-radius:10px!important;color:#cfe0ea!important;background:transparent!important;box-shadow:none!important} #game #overlay .huddle-tabs button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift)!important} /* ---- Audio sliders ---------------------------------------------------------------- */ #game #overlay .audio-mixer{gap:16px!important} #game #overlay .audio-channel{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;padding:10px 14px!important;color:#fff!important} #game #overlay .audio-channel span{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px} #game #overlay .audio-channel output{color:var(--sp-yellow)!important;font-family:var(--sp-display)!important;font-weight:400!important} #game #overlay input[type=range]{appearance:none;-webkit-appearance:none;height:14px!important;border-radius:8px!important;background:#0a1830!important;border:2px solid var(--sp-ink)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.45)!important} #game #overlay input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo));border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game #overlay input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo));border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game #overlay #audio-toggle{margin-top:6px!important} #game #overlay #song-title{color:#dfeaf0!important;font-weight:800} #game #overlay #next-song{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.5px!important;text-transform:uppercase;min-height:44px!important;font-size:13px!important;padding:8px 16px!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #game #overlay #next-song:active{transform:translateY(3px)} /* ---- Display & Motion toggles ------------------------------------------------------ */ #game #overlay .pd-display-settings label{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;padding:12px 16px!important;flex-wrap:wrap!important;row-gap:12px!important} #game #overlay .pd-display-settings label .gm-choice{flex:1 1 100%!important;width:100%!important} #game #overlay .pd-display-settings b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;letter-spacing:.3px} #game #overlay .pd-display-settings small{color:#d3e0e7!important} #game #overlay .pd-display-settings input[type=checkbox]{appearance:none;-webkit-appearance:none;width:50px!important;height:29px!important;margin:0;position:relative;border:2.5px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#9aa6ba,#6f7c92)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)!important;cursor:pointer;flex:none} #game #overlay .pd-display-settings input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe6ee);border:2px solid var(--sp-ink);transition:left .12s ease-out} #game #overlay .pd-display-settings input[type=checkbox]:checked{background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo))!important} #game #overlay .pd-display-settings input[type=checkbox]:checked::after{left:22px} #game #overlay .pd-preview-status{color:#c7dad8!important} /* ---- Save access ------------------------------------------------------------------- */ #game #overlay .save-access .club-field{color:#fff!important;font-weight:800} #game #overlay .save-access .club-field input,#game #overlay .save-access textarea{border:3px solid var(--sp-ink)!important;border-radius:12px!important;background:#fff!important;color:var(--sp-ink)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.18)!important} #game #overlay .save-access .league-card{border:3px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important;color:#fff!important} #game #overlay .save-access .league-card strong{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important} #game #overlay .save-access .league-card p{color:#dfeaf0!important} /* ---- Playtest & feedback ------------------------------------------------------------ */ #game #overlay .beta-panel textarea,#game #overlay .beta-panel select{border:3px solid var(--sp-ink)!important;border-radius:12px!important;background:#fff!important;color:var(--sp-ink)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.15)!important} #game #overlay .beta-panel a{color:var(--sp-yellow)!important;font-weight:900} #game #overlay .beta-actions button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;text-transform:uppercase;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #game #overlay .beta-actions button:active{transform:translateY(3px)} #game #overlay #beta-share-status{color:#c7dad8!important} #game #overlay #beta-erase{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo))!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 2px 0 rgba(8,14,48,.6)!important} #game #overlay #beta-status{color:#c7dad8!important} #game #overlay .beta-panel .beta-consent{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;padding:12px 16px!important;color:#fff!important} #game #overlay .beta-consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px!important;height:26px!important;margin:0;position:relative;border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#9aa6ba,#6f7c92)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)!important;cursor:pointer;flex:none} #game #overlay .beta-consent input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fff,#dfe6ee);border:2px solid var(--sp-ink);transition:left .12s ease-out} #game #overlay .beta-consent input[type=checkbox]:checked{background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo))!important} #game #overlay .beta-consent input[type=checkbox]:checked::after{left:20px} #game #overlay .beta-panel button[type=submit]{width:100%} /* ---- Controls (instructions): tabs and lesson rows ----------------------------------- */ #game #overlay.field-choice-panel:has(.controls-pages) .controls-pages{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:#122349!important;padding:4px!important} #game #overlay.field-choice-panel:has(.controls-pages) .controls-pages button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;border-radius:10px!important;color:#cfe0ea!important;background:transparent!important} #game #overlay.field-choice-panel:has(.controls-pages) .controls-pages button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;box-shadow:0 2px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.field-choice-panel:has(.controls-pages) .control-lessons>div{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;padding:12px 14px!important;box-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay.field-choice-panel:has(.controls-pages) .control-lessons b{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;letter-spacing:.3px} #game #overlay.field-choice-panel:has(.controls-pages) .control-lessons p{color:#dfeaf0!important} /* ==== Coach select (exhibition.js) ==== */ #game #overlay .coach-select .gs-top .game-back,#game #overlay .coach-select .gs-top button{min-height:44px} #game #overlay .coach-feature{border:3px solid var(--sp-ink)!important;border-radius:20px!important;background:linear-gradient(180deg,#243a8f,#172a6e)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),0 6px 0 var(--sp-ink)!important;color:#fff!important} #game #overlay .coach-feature>.coach-avatar{border-radius:50%;box-shadow:0 0 0 4px var(--sp-ink),0 0 0 7px #fff,0 5px 0 6px var(--sp-ink);background:radial-gradient(circle at 50% 30%,#3a5199,#152449)} #game #overlay .coach-feature h3{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;letter-spacing:.3px} #game #overlay .coach-feature small{color:#b9cadc!important;font-weight:900;letter-spacing:.4px} #game #overlay .coach-feature p{color:#fff!important;font-weight:700} #game #overlay .coach-feature blockquote{font-family:var(--sp-ui)!important;font-weight:900!important;color:var(--sp-yellow)!important} #game #overlay .coach-choices button{border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#22407e,#152a5c)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;transition:transform .08s!important} #game #overlay .coach-choices button:is(:hover,:focus-visible){transform:translateY(-2px)} #game #overlay .coach-choices button:active{transform:translateY(3px)!important} #game #overlay .coach-choices button .coach-avatar{border-radius:50%;box-shadow:0 0 0 3px var(--sp-ink),0 0 0 5px #fff;background:radial-gradient(circle at 50% 30%,#3a5199,#152449)} #game #overlay .coach-choices button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay .coach-choices b{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important;letter-spacing:.3px} #game #overlay .coach-choices button[aria-pressed=true] b{color:var(--sp-ink)!important} #game #overlay .coach-choices small{color:#c3d2e0!important;font-weight:800} #game #overlay .coach-choices button[aria-pressed=true] small{color:#4a3a0a!important} #game #overlay .coach-pages button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;color:var(--sp-ink)!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.45),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay .coach-pages span{font-family:var(--sp-display)!important;letter-spacing:.6px;color:#fff!important} #game #overlay .coach-select>.compact-help{color:#dfeaf0!important} /* ==== Final whistle / score card / share result ==== */ #game #overlay:has(.gs-final) .gs-final-board{border:3px solid var(--sp-ink)!important;border-radius:22px!important;background:linear-gradient(180deg,#1c3364,#0d1c34)!important;box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink)!important} #game #overlay:has(.gs-final) .gs-final-board>em{font-family:var(--sp-display)!important;color:var(--sp-yellow)!important;letter-spacing:1.5px} #game #overlay:has(.gs-final) .gs-final-team{border-top:0!important;border:2.5px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#22407e,#152a5c)!important} #game #overlay:has(.gs-final) .gs-final-team.won,#game #overlay:has(.gs-final-tie) .gs-final-team{background:linear-gradient(180deg,#2c4d96,#182f66)!important;box-shadow:0 0 0 2px var(--sp-yellow)!important} #game #overlay:has(.gs-final) .gs-final-team>span{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1px;color:#fff!important} #game #overlay:has(.gs-final) .gs-final-stars article{border:2.5px solid var(--sp-ink)!important;border-radius:14px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;box-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay:has(.gs-final) .gs-final-stars article.mvp{background:linear-gradient(100deg,#a5790c,#3a2e12 70%)!important;border-color:var(--sp-yellow)!important} #game #overlay:has(.gs-final) .gs-final-stars article>i{background:#ffffff26!important;border:2px solid var(--sp-ink)!important} #game #overlay:has(.gs-final) .gs-final-stars article.mvp>i{background:var(--sp-yellow)!important;color:var(--sp-ink)!important} #game #overlay:has(.gs-final) .gs-final-stars strong{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.2px} #game #overlay:has(.gs-final) .gs-final-stats{border:2.5px solid var(--sp-ink)!important;border-radius:16px!important;background:linear-gradient(180deg,#1c3364,#122349)!important;padding:12px 14px!important;box-shadow:0 4px 0 var(--sp-ink)!important} #game #overlay:has(.gs-final) .gs-final-label{font-family:var(--sp-display)!important;letter-spacing:1.4px} #game #overlay:has(.gs-final) .gs-stat b{font-family:var(--sp-display)!important;font-weight:400!important;color:#fff!important} /* Stat bars retain the data split, club colours and empty state from arena-presentation.css. */ #game #overlay:has(.gs-final) .gs-final-share{gap:9px!important} #game #overlay .result-share-copy{border:3px solid var(--sp-ink)!important;border-radius:12px!important;background:#fff!important;color:var(--sp-ink)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.15)!important} /* ==== Film room replay ==== */ #film-room .film-heading>div{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(24,30,58,.94),rgba(12,16,38,.94))!important;box-shadow:0 0 0 2px var(--sp-ink),0 8px 22px rgba(0,0,0,.45)!important} #film-room .film-heading span{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:1.4px!important;color:var(--sp-yellow)!important} #film-room h2{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.2px} #film-room :is(button,select){font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.3px!important;border:2.5px solid var(--sp-ink)!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 var(--sp-ink)!important;text-shadow:0 2px 0 rgba(8,14,48,.7)!important} #film-room button:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 var(--sp-ink)!important} #film-room [data-film=play]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important} #film-room .film-dock{border:2.5px solid #fff!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(24,30,58,.95),rgba(12,16,38,.95))!important;box-shadow:0 0 0 2px var(--sp-ink),0 8px 22px rgba(0,0,0,.5)!important} #film-room .film-moments button{font-family:var(--sp-ui)!important;font-weight:800!important;border:2px solid var(--sp-ink)!important;border-radius:10px!important;background:#1c3364!important;color:#cfe0ea!important;box-shadow:0 3px 0 var(--sp-ink)!important} #film-room .film-moments [aria-current=true]{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 55%,var(--sp-yellow-lo))!important;color:var(--sp-ink)!important;border-color:var(--sp-ink)!important} #film-room output{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important} #film-room input[type=range]{appearance:none;-webkit-appearance:none;height:12px!important;border-radius:8px!important;background:#0a1830!important;border:2px solid var(--sp-ink)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.45)!important} #film-room input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo));border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #film-room input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 60%,var(--sp-yellow-lo));border:2.5px solid var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #film-room .film-moment{color:var(--sp-yellow)!important;font-weight:900} /* ==== First Drive tutorial ==== */ #game .first-drive-hud{border:2.5px solid #fff!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(24,30,58,.94),rgba(12,16,38,.94))!important;box-shadow:0 0 0 2px var(--sp-ink),0 8px 22px rgba(0,0,0,.45)!important} #game .first-drive-hud strong{font-family:var(--sp-display)!important;font-weight:400!important;color:var(--sp-yellow)!important;letter-spacing:.4px} #game .first-drive-hud p{font-weight:700!important;color:#fff!important} #game .first-drive-actions button{font-family:var(--sp-display)!important;font-weight:400!important;letter-spacing:.4px!important;border:0!important;border-radius:10px!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;color:#fff!important;box-shadow:0 0 0 1px var(--sp-edge),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)!important} #game .first-drive-actions button:active{transform:translateY(2px)!important;box-shadow:0 1px 0 var(--sp-base)!important} #game .first-drive-goal{border:2.5px solid var(--sp-ink)!important;border-radius:12px!important;background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo))!important;color:#fff!important;text-shadow:0 1px 0 rgba(8,14,48,.5)!important;font-weight:800!important} /* ==== end ONLINE, OPTIONS & RESULTS ==== */ /* ==== Integration fixes ==================================================== */ /* League status lines were written dark for the old light page; on the speed-line backdrop they need light text (inside light cards they stay dark). */ #game #overlay.league-panel .league-status:not(.league-card .league-status):not(.league-confirm .league-status),#game #overlay.league-panel .league-content>p:not([class]){color:#e3ebff!important;font-weight:800!important;text-shadow:0 1px 0 var(--sp-ink)} /* ==== COACHES (agent) ==== */ /* Every coach is a framed bust: Ren's painted anime crop, an illustrated SVG or a dropped-in painted raster (see coach-roster.js), over a sunburst in that coach's colours (--coach-hi/--coach-lo, set inline). The art clips to the frame's rounded corners so a name ribbon can overhang the frame edge. */ #game :is(#overlay,#coach-dialogue) .coach-portrait.coach-frame{position:relative;isolation:isolate;overflow:visible;flex-shrink:0;aspect-ratio:1;border-radius:22%;animation:none!important; background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,255,255,.14) 0deg 7deg,rgba(255,255,255,0) 7deg 20deg),linear-gradient(180deg,var(--coach-hi,#9fb8ff),var(--coach-lo,#26307a))!important; box-shadow:0 0 0 3px var(--sp-ink),0 0 0 5.5px #fff,0 5px 0 5.5px var(--sp-ink)!important} #game .coach-frame>.coach-art{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;object-position:50% 22%;background-repeat:no-repeat;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:transform .18s ease-out} #game #overlay .coach-frame::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),inset 0 -12px 18px -10px rgba(8,14,48,.45);pointer-events:none} /* Name ribbon: the coach's name heading rides across the bottom of the frame. */ #game #overlay .coach-portrait.coach-frame>h3.coach-ribbon.coach-ribbon{position:absolute;z-index:2;left:-7%;right:-7%;bottom:-9px;margin:0!important;padding:4px 8px 3px!important;display:block; font-family:var(--sp-display)!important;font-weight:400!important;font-size:18px!important;line-height:1.1!important;letter-spacing:.5px!important;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--sp-yellow)!important;-webkit-text-stroke:0!important;text-shadow:0 2px 0 var(--sp-ink)!important;background:none!important} #game #overlay .coach-portrait.coach-frame>h3.coach-ribbon::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:6px;background:linear-gradient(180deg,#3a4ab8 0%,#26307a 55%,#161d55 100%);border:2.5px solid var(--sp-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 var(--sp-ink)} /* Coach select: the featured coach and three picks per page. */ #game #overlay .coach-feature>.coach-frame{width:176px;height:176px;flex:0 0 176px;margin:4px 6px 14px 4px} #game #overlay .coach-feature>.coach-frame>.coach-art{animation:coach-art-idle 4.5s ease-in-out infinite} #game #overlay .coach-feature>div>small{display:block;margin:2px 0 6px} #game #overlay .coach-choices button{position:relative;padding-top:12px!important} #game #overlay .coach-choices button .coach-frame{width:88px;height:88px;border-radius:22%;box-shadow:0 0 0 3px var(--sp-ink),0 0 0 5px #fff!important} #game #overlay .coach-choices button:is(:hover,:focus-visible) .coach-art{transform:scale(1.07) translateY(2px)} #game #overlay .coach-choices button[aria-pressed=true] .coach-frame{box-shadow:0 0 0 3px var(--sp-ink),0 0 0 6px #fff,0 0 0 9px var(--sp-ink)!important} #game #overlay .coach-choices button>b{position:relative;z-index:3;margin-top:-13px;padding:2px 10px 1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:6px;border:2.5px solid var(--sp-ink);background:linear-gradient(180deg,#3a4ab8,#26307a 55%,#161d55);box-shadow:0 3px 0 var(--sp-ink);color:var(--sp-yellow)!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay .coach-choices button[aria-pressed=true]>b{color:var(--sp-yellow)!important} #game #overlay .coach-choices button>small{margin-top:3px} /* Play-call brief and augment sheet: a compact frame beside the coach's note. */ #game #overlay .ren-brief>.coach-portrait.coach-frame{border-radius:14px;margin-left:4px;box-shadow:0 0 0 2.5px var(--sp-ink),0 0 0 4.5px #fff,0 3px 0 4.5px var(--sp-ink)!important} /* Franchise staff: a trading-card portrait on each head coach card. */ #game #overlay .fr2-coach-card>.coach-frame{align-self:center;width:100%;max-width:168px;height:auto;margin:6px auto 16px} #game #overlay .fr2 .fr2-coach-card .coach-portrait.coach-frame>h3.coach-ribbon.coach-ribbon{font-size:17px!important} /* In-match dialogue: Ren keeps the animated talking sheet; others bob as they talk. */ #game #coach-dialogue .coach-portrait.coach-frame{width:58px;height:58px;align-self:center;border-radius:12px;box-shadow:0 0 0 2px var(--sp-ink),0 0 0 3.5px #fff!important} #game #coach-dialogue.speaking .coach-frame>.coach-art{animation:coach-art-talk .8s ease-in-out infinite} @keyframes coach-art-talk{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3%) rotate(-1.2deg)}70%{transform:translateY(1%) rotate(.6deg)}} @keyframes coach-art-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5%)}} @media(orientation:landscape){#game.started #coach-dialogue .coach-portrait.coach-frame{width:44px;height:44px}} @media(max-width:600px){ #game #overlay .coach-feature>.coach-frame{width:118px;height:118px;flex-basis:118px;margin:2px 2px 12px 2px} #game #overlay .coach-feature .coach-portrait.coach-frame>h3.coach-ribbon.coach-ribbon{font-size:14px!important;letter-spacing:.2px!important;padding:3px 5px 2px!important;bottom:-8px} #game #overlay .coach-choices button .coach-frame{width:66px;height:66px} #game #overlay .coach-choices button>b{font-size:13px;padding:2px 6px 1px} #game #overlay .fr2-coach-card>.coach-frame{max-width:132px} #game #overlay .fr2 .fr2-coach-card .coach-portrait.coach-frame>h3.coach-ribbon.coach-ribbon{font-size:14px!important;letter-spacing:.2px!important} } /* Longer names (Professor Linden) get tighter type instead of an ellipsis. */ #game #overlay :is(.coach-feature,.fr2 .fr2-coach-card) .coach-portrait.coach-frame>h3.coach-ribbon.coach-name-long{font-size:15px!important;letter-spacing:0!important} #game #overlay .coach-choices button>b.coach-name-long{font-size:13px;letter-spacing:0} @media(max-width:600px){ #game #overlay :is(.coach-feature,.fr2 .fr2-coach-card) .coach-portrait.coach-frame>h3.coach-ribbon.coach-name-long{font-size:12px!important;padding-inline:3px!important} #game #overlay .coach-choices button>b.coach-name-long{font-size:10.5px;padding-inline:4px} } .pd-reduced-motion #game .coach-frame>.coach-art{animation:none!important;transition:none} @media(prefers-reduced-motion:reduce){#game .coach-frame>.coach-art{animation:none!important;transition:none}} /* ==== end COACHES ==== */ /* ==== CONTROLLERS (agent) ==== */ /* Controller identity, Controller Setup, remapping and couch versus. Paint only. */ :root{--pd-ps-cross:#5b9dff;--pd-ps-circle:#ff4f6d;--pd-ps-square:#ff8ad8;--pd-ps-triangle:#2fd6a3;--pd-xb-a:#39c94a;--pd-xb-b:#ff4a4a;--pd-xb-x:#2f8cff;--pd-xb-y:#ffc21c;--pd-p1:#2f8cff;--pd-p2:#ff3a4c} /* Menu Back glyph and the sticky SELECT / BACK hint follow the pad's confirm button. */ #game[data-input=pad] #overlay :is(button.primary,button.secondary,.home-dock button,.resume-save,.game-back,button[data-menu-cancel]:not(.sp-tile)):is(.game-back,[data-menu-cancel]):not(.primary):not(.secondary)::before{content:var(--pd-back-glyph,'B')} #game[data-input=pad][data-menu-confirm] #overlay.active>.panel::after{content:var(--pd-menu-hint)} /* ---- Face-button family mark (a diamond of four buttons) ---------------------- */ #game .pd-pad-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border:3px solid var(--sp-ink);border-radius:14px;background:radial-gradient(circle at 50% 35%,#34446f,#141d3f);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 3px 0 var(--sp-ink)} #game .pd-pad-mark>b{display:grid;grid-template-columns:repeat(2,14px);grid-template-rows:repeat(2,14px);gap:1px;transform:rotate(45deg)} #game .pd-pad-mark>b>i{display:grid;place-items:center;border-radius:50%;background:#fff;border:1.5px solid var(--sp-ink);font:900 8px/1 var(--sp-ui);font-style:normal;color:var(--sp-ink);transform:rotate(-45deg)} #game .pd-pad-mark>b>i:nth-child(1){grid-area:1/1}#game .pd-pad-mark>b>i:nth-child(2){grid-area:1/2}#game .pd-pad-mark>b>i:nth-child(3){grid-area:2/2}#game .pd-pad-mark>b>i:nth-child(4){grid-area:2/1} #game .pd-mark-ps>i{background:#0f1633!important;font-size:9px!important} #game .pd-mark-ps>i:nth-child(1){color:var(--pd-ps-triangle)}#game .pd-mark-ps>i:nth-child(2){color:var(--pd-ps-circle)}#game .pd-mark-ps>i:nth-child(3){color:var(--pd-ps-cross)}#game .pd-mark-ps>i:nth-child(4){color:var(--pd-ps-square)} #game .pd-mark-xbox>i{color:#fff!important}#game .pd-mark-xbox>i:nth-child(1){background:var(--pd-xb-y)}#game .pd-mark-xbox>i:nth-child(2){background:var(--pd-xb-b)}#game .pd-mark-xbox>i:nth-child(3){background:var(--pd-xb-a)}#game .pd-mark-xbox>i:nth-child(4){background:var(--pd-xb-x)} #game .pd-mark-nintendo>i{background:#e9edf6!important} /* ---- Connection banner ------------------------------------------------------------ */ #game .pd-pad-toast{position:absolute;z-index:80;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);width:min(470px,calc(100% - 20px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 10px 9px 10px;border:3px solid var(--sp-ink);border-radius:18px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 10px,transparent 10px 22px),linear-gradient(180deg,#2f4fc4 0%,#1a2f8e 55%,#122070 100%);box-shadow:inset 0 0 0 2.5px #fff,0 6px 0 var(--sp-ink),0 16px 34px rgba(0,0,20,.45);color:#fff;transform:translate(-50%,calc(-100% - 24px));transition:transform .36s cubic-bezier(.2,1.35,.4,1);font-family:var(--sp-ui)} #game .pd-pad-toast.show{transform:translate(-50%,0)} #game .pd-pad-toast.leaving{transform:translate(-50%,calc(-100% - 24px));transition-duration:.26s;transition-timing-function:ease-in} #game .pd-pad-toast[data-player="2"]{background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 10px,transparent 10px 22px),linear-gradient(180deg,#ff5a68 0%,#d8203a 55%,#a20f28 100%)} #game .pd-pad-toast.needs-setup{background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 10px,transparent 10px 22px),linear-gradient(180deg,#ffb54a 0%,#f07a12 55%,#c24f06 100%)} #game .pd-pad-copy{display:grid;gap:1px;min-width:0} #game .pd-pad-copy small{font:400 10.5px/1.1 var(--sp-display);letter-spacing:1.2px;color:var(--sp-yellow)} #game .pd-pad-copy b{font:400 clamp(16px,4.6vw,20px)/1.1 var(--sp-display);letter-spacing:.3px;color:#fff;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--sp-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game .pd-pad-copy span{font-weight:800;font-size:11.5px;line-height:1.25;color:#e4ebff} #game .pd-pad-toast .pd-pad-setup{display:grid;justify-items:center;gap:2px;min-width:62px;padding:6px 8px;border:0;border-radius:12px;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 50%,var(--sp-yellow-lo));box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift);font:400 12px/1 var(--sp-display);letter-spacing:.6px;color:var(--sp-ink);cursor:pointer} #game .pd-pad-toast kbd,#game .pd-setup kbd,#game .pd-versus kbd,#game .pd-p2-strip kbd{display:inline-grid;place-items:center;min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--sp-ink);color:#fff;font:900 9px/1 var(--sp-ui);letter-spacing:.3px;box-shadow:0 1px 0 rgba(255,255,255,.35)} /* ---- Controller Setup ------------------------------------------------------------- */ #game #overlay.pd-setup-panel .panel{max-width:640px;width:100%;margin-inline:auto} #game .pd-setup{display:grid;gap:10px;padding-bottom:6px} #game .pd-setup .huddle-top{display:flex;align-items:center;justify-content:space-between;gap:10px} #game .pd-setup .huddle-top h2{margin:0!important;font-size:clamp(26px,7vw,34px)!important} #game .pd-setup .pd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #game #overlay .pd-setup .pd-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 6px;font:400 15px/1 var(--sp-display)!important;letter-spacing:.4px;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.35),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 var(--sp-ink)} #game #overlay .pd-setup .pd-tabs button[aria-pressed=true]{color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game .pd-setup .pd-tabs kbd{background:#fff;color:var(--sp-ink);box-shadow:0 0 0 1.5px var(--sp-ink)} #game .pd-setup .pd-notice{margin:0;padding:8px 12px;border:2.5px solid var(--sp-ink);border-radius:12px;background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo));color:#fff;font-weight:900;font-size:13px;text-shadow:0 1px 0 var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game .pd-setup .pd-footnote{margin:4px 2px 0;font-weight:800;font-size:11.5px;line-height:1.35;color:#c6d4ff;text-shadow:0 1px 0 var(--sp-ink)} /* Pads */ #game .pd-devices{display:grid;gap:8px} #game .pd-cols{display:grid;gap:12px}#game .pd-col{display:grid;gap:10px;align-content:start;min-width:0} #game .pd-device{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark copy" "actions actions";align-items:center;gap:8px 10px;padding:9px 10px;border:3px solid var(--sp-ink);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#e6edfb 100%);box-shadow:0 5px 0 var(--sp-ink);color:var(--sp-ink)} #game .pd-device .pd-pad-mark{grid-area:mark}#game .pd-device-copy{grid-area:copy;display:grid;gap:2px;min-width:0} #game #overlay .pd-device-copy b{font:400 18px/1.1 var(--sp-display);letter-spacing:.2px;color:var(--sp-ink)!important} #game #overlay .pd-device-copy small{font-weight:800;font-size:12px;color:#3a4b7c!important;text-shadow:none!important} #game .pd-device[data-player="1"]{box-shadow:0 5px 0 var(--sp-ink),inset 5px 0 0 var(--pd-p1)}#game .pd-device[data-player="2"]{box-shadow:0 5px 0 var(--sp-ink),inset 5px 0 0 var(--pd-p2)} #game .pd-device-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:6px} #game #overlay .pd-setup :is(.pd-device-actions,.control-setting>div,.pd-family-picks,.pd-preset-picks) button{min-height:38px;padding:5px 12px;font:400 14px/1 var(--sp-display)!important;letter-spacing:.4px;color:var(--sp-ink)!important;border:0!important;border-radius:11px!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay .pd-setup :is(.pd-device-actions,.control-setting>div,.pd-family-picks,.pd-preset-picks) button[aria-pressed=true]{color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important} #game #overlay .pd-setup .pd-device-actions button[data-assign][aria-pressed=false]{color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,#fff,#dbe3f5)!important} #game #overlay .pd-setup .pd-device-actions button[data-assign="p1"][aria-pressed=true]{color:#fff!important;text-shadow:0 1px 0 var(--sp-ink);background:linear-gradient(180deg,#6fb4ff,var(--pd-p1) 55%,#1453b8)!important} #game #overlay .pd-setup .pd-device-actions button[data-assign="p2"][aria-pressed=true]{color:#fff!important;text-shadow:0 1px 0 var(--sp-ink);background:linear-gradient(180deg,var(--sp-red-hi),var(--pd-p2) 55%,var(--sp-red-lo))!important} #game #overlay .pd-setup .pd-device-actions button.pd-urgent{color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,#ffd27a,#ff9d1c 55%,#d86a00)!important} #game .pd-empty{padding:14px;border:3px dashed rgba(255,255,255,.7);border-radius:16px;background:rgba(8,16,60,.35);color:#fff} #game .pd-empty b{font:400 19px/1.1 var(--sp-display);color:var(--sp-yellow)}#game .pd-empty p{margin:6px 0 0;font-weight:800;font-size:13px} /* Live button tester: a little console pad that lights up */ #game .pd-tester{position:relative;display:grid;gap:4px;padding:10px 12px 12px;border:3px solid var(--sp-ink);border-radius:28px 28px 54px 54px;background:linear-gradient(180deg,#f7f9ff 0%,#d8e0f3 100%);box-shadow:inset 0 0 0 3px #fff,inset 0 -8px 0 rgba(11,17,48,.08),0 6px 0 var(--sp-ink);color:var(--sp-ink)} #game .pd-tester[data-idle]{opacity:.72} #game .pd-tester i{position:relative;display:grid;place-items:center;font-style:normal;font:400 13px/1 var(--sp-display);color:var(--sp-ink);border:2.5px solid var(--sp-ink);background:linear-gradient(180deg,#fff,#e3e9f7);box-shadow:0 3px 0 var(--sp-ink);transition:transform .05s,box-shadow .05s,background .05s} #game .pd-tester i.on{transform:translateY(2px);box-shadow:0 1px 0 var(--sp-ink),0 0 0 3px #fff,0 0 14px 4px rgba(255,210,28,.9);background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow))} #game .pd-t-shoulders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #game .pd-t-shoulders i{height:28px;border-radius:10px;overflow:hidden} #game .pd-t-shoulders i span{position:relative;z-index:1} #game .pd-t-trigger u{position:absolute;inset:auto 0 0 0;height:var(--pressure,0%);background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow-lo));transition:height .05s} #game .pd-t-body{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;justify-items:center;gap:8px 8px;padding:6px 2px 2px} #game .pd-t-dpad{grid-area:1/1;display:grid;grid-template-columns:repeat(3,25px);grid-template-rows:repeat(3,25px)} #game .pd-t-dpad i{border-radius:6px;font-size:10px;background:linear-gradient(180deg,#3a4468,#1c2346);color:#fff} #game .pd-t-dpad [data-in=up]{grid-area:1/2}#game .pd-t-dpad [data-in=left]{grid-area:2/1}#game .pd-t-dpad [data-in=right]{grid-area:2/3}#game .pd-t-dpad [data-in=down]{grid-area:3/2} #game .pd-t-mid{grid-area:1/2;display:flex;gap:5px} #game .pd-t-mid i{height:20px;padding:0 6px;border-radius:10px;font:900 8px/1 var(--sp-ui);letter-spacing:.3px;background:linear-gradient(180deg,#3a4468,#1c2346);color:#fff} #game .pd-t-face{grid-area:1/3;display:grid;grid-template-columns:repeat(3,29px);grid-template-rows:repeat(3,29px)} #game .pd-t-face i{border-radius:50%;font-size:14px;background:#141c3d;color:#fff} #game .pd-t-face [data-in=triangle]{grid-area:1/2}#game .pd-t-face [data-in=square]{grid-area:2/1}#game .pd-t-face [data-in=circle]{grid-area:2/3}#game .pd-t-face [data-in=cross]{grid-area:3/2} #game .pd-tester[data-family=ps] [data-face=cross]{color:var(--pd-ps-cross)}#game .pd-tester[data-family=ps] [data-face=circle]{color:var(--pd-ps-circle)}#game .pd-tester[data-family=ps] [data-face=square]{color:var(--pd-ps-square)}#game .pd-tester[data-family=ps] [data-face=triangle]{color:var(--pd-ps-triangle)} #game .pd-tester[data-family=xbox] [data-face=cross]{background:var(--pd-xb-a)}#game .pd-tester[data-family=xbox] [data-face=circle]{background:var(--pd-xb-b)}#game .pd-tester[data-family=xbox] [data-face=square]{background:var(--pd-xb-x)}#game .pd-tester[data-family=xbox] [data-face=triangle]{background:var(--pd-xb-y)} #game .pd-tester[data-family=nintendo] .pd-t-face i{background:#e9edf6;color:var(--sp-ink)} #game .pd-tester .pd-t-face i.on{background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow))!important;color:var(--sp-ink)!important} #game .pd-t-stick{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--sp-ink);background:radial-gradient(circle,#3a4468 0 40%,#1c2346 41%);box-shadow:0 3px 0 var(--sp-ink)} #game .pd-t-stick[data-stick=l]{grid-area:2/1;justify-self:end;margin-right:6px}#game .pd-t-stick[data-stick=r]{grid-area:2/3;justify-self:start;margin-left:6px} #game .pd-t-stick u{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff,#c9d3ea);border:2px solid var(--sp-ink);transition:transform .03s} #game .pd-t-stick.on{box-shadow:0 3px 0 var(--sp-ink),0 0 0 3px #fff,0 0 12px 3px rgba(255,210,28,.8)} #game .pd-t-stick>i{position:absolute;inset:-3px;border-radius:50%;border:0;background:none;box-shadow:none} #game .pd-t-stick>i.on{box-shadow:0 0 0 4px var(--sp-yellow);transform:none} #game .pd-t-read{margin:4px 0 0;padding:7px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(26,32,64,.96),rgba(12,16,40,.96));border:2px solid #fff;box-shadow:0 0 0 2px var(--sp-ink);color:var(--sp-yellow);font-weight:900;font-size:12.5px;text-align:center;min-height:2.4em;display:grid;place-items:center} /* Presets: two framed layout cards */ #game .pd-presets{display:grid;grid-template-columns:1fr 1fr;gap:9px} #game #overlay .pd-setup .pd-presets button{position:relative;display:grid;align-content:start;gap:4px;padding:10px 11px 12px;text-align:left;border:0!important;border-radius:18px!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important;background:repeating-conic-gradient(from 0deg at 90% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#58a8ff 0%,var(--sp-blue) 45%,var(--sp-blue-lo) 100%)!important} #game #overlay .pd-setup .pd-presets button[data-preset=madden]{background:repeating-conic-gradient(from 0deg at 90% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#58e070 0%,var(--sp-green) 45%,var(--sp-green-lo) 100%)!important} #game #overlay .pd-setup .pd-presets button[aria-pressed=true]{box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.92),0 3px 0 var(--sp-base),var(--sp-lift),0 0 0 4px var(--sp-yellow)!important} #game #overlay .pd-setup .pd-presets button[aria-pressed=true]::after{content:'IN USE';position:absolute;top:-10px;right:10px;padding:3px 9px 2px;border:2px solid var(--sp-ink);border-radius:8px;background:var(--sp-yellow);color:var(--sp-ink);font:400 11px/1 var(--sp-display);letter-spacing:.8px} #game .pd-presets small{font:400 10px/1 var(--sp-display);letter-spacing:1px;color:var(--sp-yellow-hi)} #game .pd-presets b{font:400 clamp(17px,4.8vw,21px)/1.05 var(--sp-display);color:#fff;-webkit-text-stroke:5px var(--sp-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--sp-ink)} #game .pd-presets span{font-weight:800;font-size:11.5px;line-height:1.3;color:#fff;text-shadow:0 1px 0 rgba(8,14,48,.6)} /* Sliders and settings */ #game .pd-sliders{display:grid;gap:9px;padding:11px;border:3px solid var(--sp-ink);border-radius:18px;background:linear-gradient(180deg,#223a97 0%,#172a73 40%,#101c55 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),0 6px 0 var(--sp-ink)} #game .pd-slider{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;margin:0!important} #game .pd-slider span{font:400 14px/1.1 var(--sp-display);letter-spacing:.4px;color:#fff;text-shadow:0 2px 0 var(--sp-ink)} #game .pd-slider output{font:400 15px/1 var(--sp-display);color:var(--sp-yellow);text-shadow:0 2px 0 var(--sp-ink)} #game .pd-slider input{grid-column:1/-1;width:100%;margin:2px 0 4px} #game #overlay .pd-setup .control-setting{display:grid;gap:6px;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} #game #overlay .pd-setup .control-setting>b{color:#fff!important;text-shadow:0 2px 0 var(--sp-ink)} #game #overlay .pd-setup .control-setting>div{margin:0!important} #game #overlay .pd-setup .control-setting>div>button{flex:1 1 auto} #game .pd-setup .control-setting>b{font:400 14px/1.1 var(--sp-display);letter-spacing:.4px;color:#fff;text-shadow:0 2px 0 var(--sp-ink)} #game .pd-setup .control-setting>div{display:flex;flex-wrap:wrap;gap:6px} #game .pd-setup .control-setting>p{margin:0;font-weight:800;font-size:11.5px;color:#c6d4ff} #game .pd-meters{display:grid;grid-template-columns:1fr 1fr;gap:8px} #game .pd-meters i{position:relative;display:block;height:20px;border:2px solid var(--sp-ink);border-radius:8px;background:#0a1830;overflow:hidden;font-style:normal} #game .pd-meters i b{position:absolute;inset:0 auto 0 0;width:var(--pressure,0%);background:linear-gradient(90deg,var(--sp-green),var(--sp-yellow))} #game .pd-meters i::after{content:'';position:absolute;top:0;bottom:0;left:var(--threshold,50%);width:3px;background:#fff;box-shadow:0 0 0 1px var(--sp-ink)} #game .pd-meters i span{position:relative;z-index:1;padding-left:6px;font:400 11px/16px var(--sp-display);color:#fff;text-shadow:0 1px 0 var(--sp-ink)} /* Remapping */ #game .pd-family-picks,#game .pd-preset-picks{display:flex;flex-wrap:wrap;gap:6px} #game .pd-remap{display:grid;gap:10px} #game .pd-remap>.compact-help{margin:0;font-weight:800;font-size:12px;color:#dfe8ff;text-shadow:0 1px 0 var(--sp-ink)} #game .pd-clash{margin:0;padding:8px 12px;border:2.5px solid var(--sp-ink);border-radius:12px;background:linear-gradient(180deg,var(--sp-red-hi) 0,var(--sp-red) 8px,var(--sp-red-lo));color:#fff;font-weight:900;font-size:12.5px;text-shadow:0 1px 0 var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game .pd-remap-section{padding:8px 10px 6px;border:3px solid var(--sp-ink);border-radius:16px;background:linear-gradient(180deg,#223a97 0%,#172a73 45%,#101c55 100%);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.85),0 5px 0 var(--sp-ink)} #game #overlay .pd-remap-section h3{margin:0 0 4px!important;font-size:15px!important;letter-spacing:.6px!important;color:var(--sp-yellow)!important;-webkit-text-stroke:4px var(--sp-ink)} #game .pd-remap-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;padding:7px 4px;border-top:1.5px solid rgba(255,255,255,.12)} #game .pd-remap-row>span{flex:1 1 150px;min-width:0} #game .pd-remap-row>span{display:grid;gap:1px;font-weight:900;font-size:13.5px;line-height:1.2;color:#fff;text-shadow:0 1px 0 var(--sp-ink)} #game .pd-remap-row>span small{font-weight:800;font-size:10.5px;color:#a9bff5} #game .pd-remap-row>span em{font-style:normal;font-weight:900;font-size:11.5px;color:#ffc0c7} #game .pd-remap-row>small{flex:1 1 100%;font-weight:800;font-size:10.5px;color:#a9bff5;margin-top:-2px} #game .pd-remap-row.pd-conflict{background:rgba(255,58,76,.22);border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,120,135,.8)} #game .pd-remap-row.pd-unbound>span::after{content:'Not bound';font-weight:800;font-size:10.5px;color:#8ea2d6} #game .pd-slots{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto} #game .pd-slot{position:relative;display:inline-block} #game #overlay .pd-setup :is(.pd-chip){display:inline-grid;place-items:center;min-width:44px;min-height:36px;padding:0 9px;font:400 15px/1 var(--sp-display)!important;letter-spacing:.3px;color:var(--sp-ink)!important;border:2.5px solid var(--sp-ink)!important;border-radius:11px!important;background:linear-gradient(180deg,#fff 0%,#dfe7fb 100%)!important;box-shadow:0 3px 0 var(--sp-ink)!important;text-shadow:none!important;white-space:nowrap} #game #overlay .pd-setup .pd-chip.pd-add{min-width:36px;color:#dfe8ff!important;border-style:dashed!important;background:rgba(255,255,255,.08)!important;box-shadow:none!important} #game #overlay .pd-setup .pd-chip.pd-listening{color:var(--sp-ink)!important;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow))!important;animation:sp-glow 1s ease-in-out infinite!important;font-size:12px!important} #game #overlay .pd-setup .pd-chip:disabled{opacity:.75} #game #overlay .pd-setup .pd-remap[data-glyphs=ps] .pd-chip[data-face=cross]{color:var(--pd-ps-cross)!important}#game #overlay .pd-setup .pd-remap[data-glyphs=ps] .pd-chip[data-face=circle]{color:var(--pd-ps-circle)!important}#game #overlay .pd-setup .pd-remap[data-glyphs=ps] .pd-chip[data-face=square]{color:#d94fb2!important}#game #overlay .pd-setup .pd-remap[data-glyphs=ps] .pd-chip[data-face=triangle]{color:#12a57a!important} #game #overlay .pd-setup .pd-remap[data-glyphs=xbox] .pd-chip[data-face=cross]{color:#1f9a2e!important}#game #overlay .pd-setup .pd-remap[data-glyphs=xbox] .pd-chip[data-face=circle]{color:#e02b2b!important}#game #overlay .pd-setup .pd-remap[data-glyphs=xbox] .pd-chip[data-face=square]{color:#1f6fe0!important}#game #overlay .pd-setup .pd-remap[data-glyphs=xbox] .pd-chip[data-face=triangle]{color:#c98f00!important} #game #overlay .pd-setup .pd-clear{position:absolute;top:-8px;right:-8px;z-index:1;display:inline-grid;place-items:center;width:20px;height:20px;min-height:0;padding:0;border:0!important;border-radius:50%!important;background:linear-gradient(180deg,var(--sp-red-hi),var(--sp-red-lo))!important;color:#fff!important;font:900 9px/1 var(--sp-ui)!important;box-shadow:0 0 0 1px var(--sp-edge),0 1px 0 var(--sp-base)!important} #game #overlay .pd-setup .pd-swap{margin-left:4px;padding:2px 8px;min-height:0;border:0!important;border-radius:8px!important;background:var(--sp-yellow)!important;color:var(--sp-ink)!important;font:400 11px/1.2 var(--sp-display)!important;box-shadow:0 0 0 1px var(--sp-edge),0 1px 0 var(--sp-base)!important} #game .pd-remap-row.pd-fixed .pd-chip{opacity:.9} #game .pd-notes{padding:10px 12px;border:2.5px solid #fff;border-radius:14px;background:linear-gradient(180deg,rgba(26,32,64,.95),rgba(12,16,40,.95));box-shadow:0 0 0 2.5px var(--sp-ink),0 5px 0 2px var(--sp-ink);color:#fff} #game .pd-notes>b{display:block;margin-bottom:4px;font:400 15px/1.1 var(--sp-display);color:var(--sp-yellow)} #game .pd-notes p{margin:3px 0;font-weight:800;font-size:12px;line-height:1.3}#game .pd-notes p b{color:var(--sp-yellow-hi)} /* Calibration */ #game .pd-calibrate{display:grid;gap:10px;justify-items:stretch} #game .pd-calibrate>.pd-pad-mark{justify-self:center;width:64px;height:64px} #game .pd-cal-step{display:grid;gap:6px;padding:14px;border:3px solid var(--sp-ink);border-radius:18px;background:linear-gradient(180deg,#fff,#e6edfb);box-shadow:inset 0 0 0 3px #fff,0 6px 0 var(--sp-ink);text-align:center} #game .pd-cal-step small{font:400 11px/1 var(--sp-display);letter-spacing:1px;color:var(--sp-blue-lo)} #game .pd-cal-step b{font:400 clamp(20px,6vw,27px)/1.1 var(--sp-display);color:var(--sp-ink)} #game .pd-cal-bar{display:block;height:12px;border:2px solid var(--sp-ink);border-radius:8px;background:linear-gradient(90deg,var(--sp-green) var(--progress,0%),#d7def0 var(--progress,0%))} #game .pd-setup .pd-calibrate .compact-help{margin:0;font-weight:800;font-size:12.5px;color:#e3ebff;text-shadow:0 1px 0 var(--sp-ink)} @media(min-width:760px) and (min-height:520px){ #game #overlay.pd-setup-panel .panel{max-width:760px} #game .pd-cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start} #game .pd-devices{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} #game .pd-remap{grid-template-columns:1fr 1fr;align-items:start} #game .pd-remap>:is(.compact-help,.pd-clash,.pd-family-picks,.pd-preset-picks,.pd-notes,#pd-reset-map){grid-column:1/-1} } /* ==== end CONTROLLERS ==== */ /* ==== COUCH VERSUS (agent) ==== */ /* Couch versus: join screen, shared play call, P1/P2 field tags and Player 2 strip. Paint only. */ #game .pd-pad-toast[hidden],#game .pd-p2-strip[hidden],#game .pd-player-mark[hidden]{display:none!important} #game .pd-vs-tag{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;flex:0 0 auto;border:2.5px solid var(--sp-ink);border-radius:9px;background:linear-gradient(180deg,#6fb4ff,var(--pd-p1) 55%,#1453b8);color:#fff;font:400 15px/1 var(--sp-display);letter-spacing:.5px;text-shadow:0 1px 0 var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink)} #game .pd-vs-tag[data-player="2"]{background:linear-gradient(180deg,var(--sp-red-hi),var(--pd-p2) 55%,var(--sp-red-lo))} #game #overlay .pd-vs-decides{justify-self:start;margin:0 0 6px 4px;height:30px;font-size:15px} /* Exhibition: 1 player or 2 players */ #game #overlay .gs-exhibition .ex-players{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 12px} #game #overlay .gs-exhibition .ex-players button{display:grid;gap:2px;justify-items:start;min-height:58px;padding:8px 12px;text-align:left;border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2px rgba(255,255,255,.55),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important} #game #overlay .gs-exhibition .ex-players button[data-players="2"]{background:repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 9px,transparent 9px 20px),linear-gradient(180deg,#ff6a77 0%,#e52840 55%,#b0142c 100%)!important} #game #overlay .panel .gs-exhibition .ex-players button[aria-pressed=true]{background:linear-gradient(180deg,var(--sp-yellow-hi) 0%,var(--sp-yellow) 46%,var(--sp-yellow-lo) 100%)!important;box-shadow:inset 0 0 0 2px #fff,0 3px 0 var(--sp-base),var(--sp-lift),0 0 0 3px #fff!important} #game #overlay .panel .gs-exhibition .ex-players button[aria-pressed=true] strong{color:var(--sp-ink)!important;-webkit-text-stroke:0} #game #overlay .panel .gs-exhibition .ex-players button[aria-pressed=true] span{color:#3a2a00!important} #game #overlay .panel .gs-exhibition .ex-players button[aria-pressed=true]::after{content:'✓';position:absolute;top:-10px;right:10px;display:grid;place-items:center;width:24px;height:24px;border:2.5px solid var(--sp-ink);border-radius:50%;background:var(--sp-green);color:#fff;font:900 13px/1 var(--sp-ui)} #game #overlay .gs-exhibition .ex-players button{position:relative} #game #overlay .gs-exhibition .ex-players strong{font:400 18px/1 var(--sp-display)!important;letter-spacing:.5px;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game #overlay .gs-exhibition .ex-players span{font-weight:800;font-size:11.5px;color:#eef3ff!important} #game #overlay .gs-exhibition .ex-versus-note{margin:10px 0;padding:9px 12px;border:2.5px solid #fff;border-radius:14px;background:linear-gradient(180deg,rgba(26,32,64,.95),rgba(12,16,40,.95));box-shadow:0 0 0 2.5px var(--sp-ink);color:#fff;font-weight:800;font-size:12.5px;line-height:1.35} /* Shared screens */ #game #overlay.pd-versus-panel .panel{max-width:980px;width:100%;margin-inline:auto} #game .pd-versus{display:grid;gap:10px} #game .pd-versus .huddle-top{display:flex;align-items:center;justify-content:space-between;gap:10px} #game .pd-versus .huddle-top h2{margin:0!important;font-size:clamp(26px,7vw,36px)!important} #game #overlay .pd-versus>.compact-help,#game .pd-vs-note{margin:0;font-weight:800;font-size:12px;line-height:1.35;color:#dfe8ff;text-shadow:0 1px 0 var(--sp-ink)} /* Join: two seats */ #game .pd-join-seats{display:grid;gap:8px} #game .pd-seat{display:grid;gap:9px;padding:11px 12px;border:3px solid var(--sp-ink);border-radius:20px;background:linear-gradient(180deg,#fff 0%,#e6edfb 100%);box-shadow:inset 7px 0 0 var(--team,#2f8cff),0 6px 0 var(--sp-ink);color:var(--sp-ink)} #game .pd-seat-top{display:flex;align-items:center;gap:10px} #game .pd-seat-team{display:flex;align-items:center;gap:9px;min-width:0} #game .pd-seat-team .club-mark{width:42px;height:42px;flex:0 0 auto} #game .pd-seat-team span{display:grid;gap:1px;min-width:0} #game #overlay .pd-seat-team strong{font:400 18px/1.05 var(--sp-display);color:var(--sp-ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay .pd-seat-team small{font-weight:800;font-size:11.5px;color:#3a4b7c!important} #game .pd-seat-device{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 10px;border-radius:14px;border:2.5px solid var(--sp-ink);background:linear-gradient(180deg,#223a97,#122070);color:#fff} #game .pd-seat-device>div{display:grid;gap:2px} #game #overlay .pd-seat-device b{font:400 17px/1.1 var(--sp-display);color:#fff!important;letter-spacing:.3px} #game #overlay .pd-seat-device small{font-weight:900;font-size:11.5px;color:var(--sp-green-hi)!important} #game .pd-seat-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:13px;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);font-size:22px;font-style:normal} #game .pd-seat.waiting .pd-seat-device{animation:pd-wait 1.15s ease-in-out infinite} #game #overlay .pd-seat.waiting .pd-seat-device small{color:var(--sp-yellow)!important} @keyframes pd-wait{0%,100%{box-shadow:0 0 0 0 rgba(255,210,28,0)}50%{box-shadow:0 0 0 4px rgba(255,210,28,.95)}} #game .pd-join-vs{justify-self:center;font:400 30px/1 var(--sp-display);color:var(--sp-yellow);-webkit-text-stroke:7px var(--sp-ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--sp-ink);transform:rotate(-6deg)} #game .pd-join-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} #game #overlay .pd-join #join-start{min-height:56px;font-size:20px!important} /* Play call: two pickers, one screen */ #game .pd-vs-head{display:flex;align-items:center;justify-content:space-between;gap:10px} #game .pd-vs-clock{display:grid;place-items:center;min-width:48px;height:40px;padding:0 8px;border:3px solid var(--sp-ink);border-radius:12px;background:linear-gradient(180deg,#26306a,#121a45);color:var(--sp-yellow);font:400 22px/1 var(--sp-display);box-shadow:0 4px 0 var(--sp-ink)} #game .pd-vs-clock.urgent{color:#fff;background:linear-gradient(180deg,var(--sp-red-hi),var(--sp-red-lo))} #game .pd-vs-sides{display:grid;gap:10px} #game .pd-vs-side{position:relative;display:grid;gap:7px;align-content:start;padding:9px 10px 8px;border:3px solid var(--sp-ink);border-radius:18px;background:linear-gradient(180deg,#223a97 0%,#172a73 45%,#101c55 100%);box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.9),inset 0 5px 0 2.5px var(--team,#2f8cff),0 6px 0 var(--sp-ink)} #game .pd-vs-side[data-player="1"]{order:1}#game .pd-vs-side[data-player="2"]{order:2} #game .pd-vs-top{display:flex;align-items:center;gap:9px;min-width:0} #game .pd-vs-top>div{display:grid;gap:1px;min-width:0;flex:1} #game #overlay .pd-vs-top small{font:400 11px/1.1 var(--sp-display);letter-spacing:.8px;color:#b9c9ff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay .pd-vs-top strong{font:400 16px/1.1 var(--sp-display);letter-spacing:.4px;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game .pd-vs-lock{display:none;padding:4px 9px 3px;border:2.5px solid var(--sp-ink);border-radius:9px;background:linear-gradient(180deg,var(--sp-green-hi),var(--sp-green) 55%,var(--sp-green-lo));color:#fff;font:400 13px/1 var(--sp-display);font-style:normal;letter-spacing:.6px;text-shadow:0 1px 0 var(--sp-ink);box-shadow:0 3px 0 var(--sp-ink);white-space:nowrap} #game .pd-vs-side[data-locked=true] .pd-vs-lock{display:block} #game .pd-vs-side[data-locked=true] :is(.pd-vs-tabs,.pd-vs-plays,.pd-vs-specials,.pd-vs-calls,.pd-vs-groups,.pd-vs-label){opacity:.28;filter:grayscale(.6) blur(1.5px)} #game .pd-vs-tabs,#game .pd-vs-plays,#game .pd-vs-specials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #game .pd-vs-calls,#game .pd-vs-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #game #overlay .pd-vs-side button{position:relative;min-height:36px;margin:0;padding:5px 7px;border:0!important;border-radius:11px!important;font:400 13px/1.1 var(--sp-display)!important;letter-spacing:.3px;color:var(--sp-ink)!important;background:linear-gradient(180deg,#5fd0ff 0%,var(--sp-sky) 45%,#1591d8 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} #game #overlay .pd-vs-side button:disabled{opacity:.4;filter:grayscale(.7)} #game #overlay .pd-vs-side button[aria-pressed=true]{color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important} #game #overlay .pd-vs-side .pd-vs-play{display:grid;gap:2px;align-content:start;padding:4px 4px 6px;text-align:left;color:var(--sp-ink)!important;text-shadow:none;background:linear-gradient(180deg,#fff 0%,#e9f0ff 100%)!important;min-height:100px} #game .pd-vs-play img{width:100%;aspect-ratio:2/1;height:auto;object-fit:cover;border:2px solid var(--sp-ink);border-radius:8px;background:#0e3b1e} #game #overlay .pd-vs-play small{font:400 9px/1.1 var(--sp-display)!important;letter-spacing:.6px;color:var(--sp-blue-lo)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay .pd-vs-play b{font:400 13px/1.05 var(--sp-display)!important;color:var(--sp-ink)!important;overflow-wrap:anywhere} #game #overlay .pd-vs-side .pd-vs-empty{background:rgba(255,255,255,.06)!important;border-style:dashed!important;box-shadow:none!important} #game #overlay .pd-vs-side .pd-vs-callbtn{display:grid;gap:2px;justify-items:start;min-height:54px;padding:6px 9px;text-align:left;background:repeating-conic-gradient(from 0deg at 90% 110%,rgba(255,255,255,.12) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#58e070 0%,var(--sp-green) 45%,var(--sp-green-lo) 100%)!important} #game #overlay .pd-vs-callbtn b{font:400 17px/1 var(--sp-display)!important;color:#fff!important;-webkit-text-stroke:4px var(--sp-ink);paint-order:stroke fill} #game #overlay .pd-vs-callbtn span{font:800 10px/1.2 var(--sp-ui)!important;color:#f2fff4!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #game .pd-vs-label{margin:2px 0 -2px 4px;font:400 10.5px/1 var(--sp-display);letter-spacing:1px;color:var(--sp-yellow)} #game #overlay .pd-vs-side .pd-vs-group{min-height:32px;background:linear-gradient(180deg,#3f5ed6 0%,#2a44b5 50%,#1d318c 100%)!important} #game #overlay .pd-vs-side .pd-vs-group[aria-pressed=true]{color:var(--sp-ink)!important;background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow) 46%,var(--sp-yellow-lo))!important} #game #overlay .pd-vs-side .pd-vs-cursor{z-index:2;box-shadow:0 0 0 3px #fff,0 0 0 7px var(--sp-yellow),0 5px 0 7px var(--sp-ink)!important;animation:sp-glow 1.1s ease-in-out infinite!important} #game #overlay .pd-vs-side .pd-vs-cursor::after{content:'P1';position:absolute;top:-11px;right:-8px;padding:2px 5px 1px;border:2px solid var(--sp-ink);border-radius:7px;background:var(--pd-p1);color:#fff;font:400 10px/1 var(--sp-display);letter-spacing:.4px;text-shadow:none;-webkit-text-stroke:0} #game #overlay .pd-vs-side[data-player="2"] .pd-vs-cursor::after{content:'P2';background:var(--pd-p2)} #game .pd-vs-hint{margin:0;font-weight:900;font-size:11.5px;color:#dfe8ff;text-shadow:0 1px 0 var(--sp-ink)} #game .pd-vs-side[data-locked=true] .pd-vs-hint{color:var(--sp-green-hi)} /* Field: P1 / P2 tags over the two controlled athletes, and Player 2's strip */ #game .pd-player-mark{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform} #game .pd-player-mark>b{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 6px));padding:2px 6px 1px;border:2px solid var(--sp-ink);border-radius:8px;background:var(--pd-p1);color:#fff;font:400 12px/1.1 var(--sp-display);letter-spacing:.5px;text-shadow:0 1px 0 var(--sp-ink);box-shadow:0 2px 0 var(--sp-ink);white-space:nowrap} #game .pd-player-mark>b::after{content:'';position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--sp-ink)} #game .pd-player-mark[data-player="2"]>b{background:var(--pd-p2)} #game .pd-player-mark>i{position:absolute;left:0;top:var(--drop,40px);width:34px;height:13px;border-radius:50%;border:3px solid var(--pd-p1);box-shadow:0 0 0 1.5px var(--sp-ink),0 0 10px var(--pd-p1);transform:translate(-50%,-50%) scale(var(--ring,1));opacity:0} #game .pd-player-mark[data-player="2"]>i{border-color:var(--pd-p2);box-shadow:0 0 0 1.5px var(--sp-ink),0 0 10px var(--pd-p2)} #game .pd-player-mark[data-side=defense]>i{opacity:1} #game .pd-p2-strip{position:absolute;z-index:6;left:50%;top:120px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:calc(100% - 16px);padding:4px 10px 4px 4px;border:2.5px solid var(--sp-ink);border-radius:13px;background:linear-gradient(180deg,rgba(40,18,40,.93),rgba(18,10,30,.93));box-shadow:inset 0 0 0 1.5px rgba(255,120,135,.8),0 3px 0 var(--sp-ink);color:#fff;font-family:var(--sp-ui);pointer-events:none;white-space:nowrap;overflow:hidden;flex-wrap:wrap;row-gap:3px;justify-content:center;width:max-content} #game .pd-p2-strip .pd-vs-tag{height:22px;min-width:30px;font-size:13px;box-shadow:0 2px 0 var(--sp-ink)} #game .pd-p2-strip strong{font:400 11.5px/1 var(--sp-display);letter-spacing:.6px;color:#ffd0d6} #game .pd-p2-strip>div{display:flex;flex-wrap:wrap;gap:3px 7px;justify-content:center} #game .pd-p2-strip span{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:10.5px;color:#eef2ff} #game .pd-p2-strip kbd{min-width:16px;height:16px;background:#fff;color:var(--sp-ink)} #game .pd-p2-power{display:inline-block;width:52px;height:10px;border:1.5px solid #fff;border-radius:5px;background:linear-gradient(90deg,var(--sp-yellow) var(--power,0%),rgba(255,255,255,.15) var(--power,0%))} #game.couch-versus #team-legend i{box-shadow:0 0 0 1.5px #fff} @media(min-width:760px){ #game .pd-join-seats{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch} #game .pd-join-vs{align-self:center} #game .pd-vs-sides{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch} #game #overlay .pd-vs-side .pd-vs-play{min-height:124px} } @media(orientation:landscape) and (max-height:560px){ #game .pd-vs-sides{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #game .pd-vs-play img{aspect-ratio:3/1} } /* ==== end COUCH VERSUS ==== */ /* ==== MENU PRESS FEEDBACK (press-fx.js) ==== The glow that blooms from the touch point on a pressed menu button: a clipped layer the size of the button with a soft white wash that is gone within half a second. Low alpha, so it reads on sky, gold and blue alike (a soft-light blend vanished on the light sky buttons) while ink labels stay dark under it. Never catches input or reaches assistive tech. */ .pd-press-glow{position:fixed;z-index:2147483000;pointer-events:none;overflow:hidden;contain:layout paint} .pd-press-glow i{position:absolute;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,255,255,.5) 0,rgba(255,255,255,.24) 45%,rgba(255,255,255,0) 100%);will-change:transform,opacity} .pd-reduced-motion .pd-press-glow{display:none} /* ==== end MENU PRESS FEEDBACK ==== */ /* ==== CONTRAST (WCAG AA) ==== From a Playwright audit of every menu screen that samples the rendered background under each line of text: normal text needs 4.5:1, large or bold display text 3:1. The palette stays console-sports: white copy sits on deeper card colours, light sky and gold surfaces carry ink labels (see the sky buttons above), small yellow labels on busy blue get the ink outline the display type already uses, and secondary text on the blue panels is brighter. Disabled controls keep their dimmed look. */ :root{--gs-soft:#eef4f8;--gs-dim:#bccbd6} /* Mode cards with white copy (franchise modes, kickoff choice, labs): deeper greens, purples and oranges under softer speed lines, so the description line clears 4.5:1 across the card. */ #game #overlay .kick-choice-grid>button:nth-child(1){background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.08) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#2cb85a 0%,#107036 40%,#0a5528 100%)!important} #game #overlay .kick-choice-grid>button:nth-child(2){background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.08) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#9a6bff 0%,#5f2bd6 40%,#40189a 100%)!important} #game #overlay .kick-choice-grid>button:nth-child(3),#game #overlay.online-panel .on-mode.casual{background:repeating-conic-gradient(from 0deg at 85% 110%,rgba(255,255,255,.08) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#ff9a3c 0%,#b43c0a 40%,#862c07 100%)!important} #game #overlay .practice-center .pc-lab:not([aria-pressed=true]):not(.selected){background:linear-gradient(180deg,#2aa851 0%,#127a3a 34%,#0c6230 100%)!important} #game #overlay .pd-setup .pd-presets button{background:repeating-conic-gradient(from 0deg at 90% 110%,rgba(255,255,255,.08) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#3f8cf0 0%,#1a5bd0 40%,#0d3a9a 100%)!important} #game #overlay .pd-setup .pd-presets button[data-preset=madden]{background:repeating-conic-gradient(from 0deg at 90% 110%,rgba(255,255,255,.08) 0deg 6deg,transparent 6deg 15deg),linear-gradient(170deg,#2cb85a 0%,#107036 40%,#0a5528 100%)!important} #game #overlay .pd-setup .pd-presets small{color:var(--sp-yellow-hi)!important} /* Tutorial lessons (sky buttons): every line of the button in ink, not the panel's pale grey. */ #game #overlay.playbook-panel:has(.lesson-collection) .panel .lesson-collection>button :is(strong,small,span){color:var(--sp-ink)!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important} /* Matchup: the opponent chooser is a white chip, so its words are ink (they inherited the white side label). */ #game #overlay .ex-matchup .ex-side .gm-choice :is(span,strong){color:var(--sp-ink)!important;text-shadow:none!important;-webkit-text-stroke:0!important} #game #overlay .ex-matchup .ex-side .gm-choice .gm-choice-hint{color:var(--sp-blue-lo)!important} /* Small yellow and white labels over the light end of a blue gradient: the ink outline of the display type. */ #game #overlay .cs-detail .cs-tag,#game #overlay.online-panel .on-shell .on-title,#game #overlay.franchise-panel .fr2-brand b{-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game #overlay.franchise-panel .fr2-brand b{color:var(--sp-yellow)!important} /* Online hub: one white kicker line on the red bar, brighter record and XP captions. */ #game #overlay.online-panel .on-kicker span{color:#fff!important} #game #overlay.online-panel .on-player-card>div>small{color:#e3ecf2!important} #game #overlay.online-panel .on-record :is(span,small){color:#e6eef3!important} /* Franchise club picker and footnote: darker text on the cream cards and the gold pick. */ #game #overlay.franchise-panel .fr2-club-choice strong{color:#223542!important} #game #overlay.franchise-panel .fr2-club-choice small{color:#3c4c44!important} #game #overlay.franchise-panel .fr2-footnote,#game #overlay.franchise-panel .fr2-footnote :is(p,summary){color:#c5d2dc!important} /* Practice center: brighter caption and medal placeholders on the dark field panel. */ #game #overlay .practice-center .pc-random span{color:#d2dde0!important} #game .practice-center .pc-medals i{color:#ffffffb8} /* Medal collection on the blue panel: light copy on dark, dark copy on the cream objective cards (unearned medals keep the dashed frame but their names stay readable). */ #game #overlay .mastery-collection>p{color:#dbe6ee!important} #game #overlay .mastery-selected>strong{color:#d3e3da!important} #game #overlay .mastery-positions button[aria-pressed=true] small{color:#d7e6df!important} #game #overlay .mastery-medals>span:not(.earned){opacity:1;color:#4f625a!important;background:#eef2e4} #game #overlay .mastery-collection .mastery-objectives article>div:first-child>b{color:#565d31!important} /* Player ratings captions. */ #game #overlay .rating-list span{color:#dbe5ee!important} /* Augment offers: deep blue console cards. They fell under the sky button rule above, which left the offer's pale copy on pale sky; they are excluded from it and framed like the other cards. */ #game #overlay .augment-grid>button{border:0!important;border-radius:16px!important;background:linear-gradient(180deg,#2f50bd 0%,#1d3597 60%,#172a7c 100%)!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2px rgba(255,255,255,.55),0 3px 0 var(--sp-base),var(--sp-lift)!important;color:#fff!important} #game #overlay .augment-grid>button :is(small,span){color:#d6e4ee!important} #game #overlay .augment-grid>button p{color:#fff!important} /* Play-call sheets: captions and the pager count on the navy panel. */ #game #overlay .sideline-head>span,#game #overlay:not(.sideline-panel) .sideline-head small{color:#e3ecf2!important} #game #overlay .huddle-pager span{color:#d3dfe7!important} /* Choice dialogs (every select in the menus opens one): the dark-theme option colours were left on the white option cards, so names read near-white on white. Ink names, blue hints, ink on gold. */ body .gm-dialog .gm-option{color:var(--sp-ink)!important} body .gm-dialog .gm-option :is(strong,span){color:var(--sp-ink)!important} body .gm-dialog .gm-option>span{color:var(--sp-blue-lo)!important} body .gm-dialog .gm-option[aria-pressed=true] :is(strong,span,small){color:var(--sp-ink)!important} body .gm-dialog footer{color:#2b3a5c!important} /* Ribbons: the gloss is a thin inset line, not a pale top band, so a two-line ribbon keeps white type legible. */ #game #overlay .eyebrow::before{background:linear-gradient(180deg,#e8374a 0,var(--sp-red) 6px,var(--sp-red-lo) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 var(--sp-ink)} /* Small labels at the light end of a card gradient keep the outline of the display type. */ #game #overlay .pd-setup .pd-presets small,#game #overlay .ex-matchup .ex-side span{-webkit-text-stroke:3px var(--sp-ink);paint-order:stroke fill} #game .pd-tester[data-family=ps] [data-face=cross]{color:#a2c8ff}#game .pd-tester[data-family=ps] [data-face=circle]{color:#ffa3b3}#game .pd-tester[data-family=ps] [data-face=square]{color:#ffb3e9} /* Body copy that can scroll under the brightest speed lines: full white (the pale greys dipped under 4.5:1). */ #game #overlay #song-title,#game #overlay .beta-panel>p{color:#fff!important} /* Mode card descriptions were drawn at 80% opacity (handheld.css) on the deeper card colours. */ #game #overlay .kick-choice-grid>button span{opacity:1!important} /* First-game coach notes: a navy card of their own, so they read on the bright results sunburst too. */ #game #overlay .coach-note{background:linear-gradient(180deg,rgba(24,34,86,.94),rgba(12,18,52,.94))!important;border-color:var(--sp-yellow)!important;box-shadow:0 0 0 1px var(--sp-edge),0 3px 0 var(--sp-base),var(--sp-lift)} #game #overlay .coach-note small{color:#ffe27a!important}#game #overlay .coach-note p{color:#f2f6fb!important} /* Scorebug quarter label: in landscape the compact scorebug puts it on the bug's white top ring, so it keeps an ink outline like the clock digits (invisible on the navy bug in portrait). */ #game .scoreboard .game-clock span{-webkit-text-stroke:2px var(--sp-ink);paint-order:stroke fill} /* Practice lab chevron on the picked (gold) lab: ink like the rest of the picked card. */ #game #overlay .practice-center .pc-lab:is([aria-pressed=true],.selected) .pc-lab-arrow{color:var(--sp-ink)!important} /* Roster arrows (player ratings): blue console buttons with the light edge, not a dark disc on a dark base. */ #game #overlay .roster-heading button{border:0!important;color:#fff!important;background:linear-gradient(180deg,var(--sp-blue-hi),var(--sp-blue) 34%,var(--sp-blue-lo))!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 var(--sp-base),var(--sp-lift)!important;text-shadow:0 1px 0 rgba(8,14,48,.6)} /* ==== end CONTRAST ==== */ /* ==== MENU CARDS: light edge ==== The big menu cards next to the buttons (squad detail, matchup, pause and final score, franchise cards) drop the thick ink frame and solid ink base the same way the buttons did: a thin tinted edge, their white inner ring, a short translucent base and a soft lift. */ #game #overlay :is(.cs-screen,.cs-picker) .cs-detail,#game #overlay .ex-matchup,#game #overlay .pause-match,#game #overlay:has(.gs-final) .gs-final-board,#game #overlay.franchise-panel .fr2 :is(.fr2-card:not(:has(.fr2-quick-actions,.fr2-task-list)),.fr2-venue-banner,.fr2-coach-card),#game #overlay.franchise-panel .fr2-content>.fr2-match-card{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 3px #fff,0 4px 0 var(--sp-base),var(--sp-lift)!important} #game #overlay.franchise-panel .fr2 .fr2-coach-card.hired{box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 3px #fff,0 4px 0 var(--sp-yellow-lo),var(--sp-lift)!important} #game #overlay .cs-detail .cs-detail-art{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 0 0 2px #fff!important} #game #overlay .cs-detail .cs-meta>*{border-width:1.5px!important;border-color:rgba(11,17,48,.55)!important;box-shadow:0 2px 0 var(--sp-base)!important} /* The first-game coach card's OK button (first-game-coach.css loads later, hence the extra class). */ #game .coach-mark .coach-mark-actions .coach-mark-ok{border:0!important;box-shadow:0 0 0 1px var(--sp-edge),inset 0 2px 0 rgba(255,255,255,.55),0 2px 0 var(--sp-base),var(--sp-lift)!important} /* The squad and results screens' sticky footer scrims were the old near-black: a blue one that melts into the panel. */ #game #overlay #character-select .cs-footer,#game #overlay .gs-final-actions{background:linear-gradient(180deg,rgba(9,34,112,0),rgba(9,34,112,.86) 30%)} /* ==== end MENU CARDS ==== */ /* Visible-screen layout. Panels use the same box as the field, rather than 69vh or the taller layout page behind iPhone browser chrome. */ html,body{min-height:0!important;overscroll-behavior:none} #game{container-type:size;container-name:pocket-screen} #game #overlay.active{overflow:hidden;max-height:100%;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 54px) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px))} #game #overlay.active>.panel{max-height:100%;min-height:0;margin:0;overscroll-behavior:contain} #game.started.calling-play #overlay.active{padding-top:calc(env(safe-area-inset-top,0px) + 134px);padding-bottom:max(12px,env(safe-area-inset-bottom,0px));align-items:stretch} #game #overlay.active:is(.quick-call-panel,.huddle-panel,.exhibition-panel)>.panel{height:100%;max-height:100%;overflow:hidden;padding:12px;width:min(100%,760px);max-width:760px} #game #overlay.active:is(.quick-call-panel,.huddle-panel,.exhibition-panel)>.panel::after,#game #overlay.active>.panel:has(#character-select)::after{display:none!important} #game #overlay.active:has(#character-select)>.panel{height:100%;max-height:100%;overflow:hidden;padding:12px} #game #overlay #character-select{height:100%;min-height:0;display:flex;flex-direction:column;gap:6px} #game #overlay #character-select .cs-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px} #game #overlay #character-select .cs-detail{flex:1;min-height:0;margin:0} #game #overlay #character-select .cs-detail-art{min-height:0;height:100%;max-height:100%} #game #overlay #character-select .cs-grid{flex-shrink:0;grid-template-columns:repeat(4,minmax(0,1fr))} #game #overlay #character-select .cs-roster-pages{flex-shrink:0;min-height:36px;margin:0} #game #overlay #character-select .cs-roster-pages button{min-height:36px;padding:6px 10px;font-size:14px} #game #overlay #character-select .cs-footer{position:static;flex-shrink:0;margin:0;padding:4px 0;background:none} #game #overlay #character-select .cs-footer button{min-height:46px;font-size:14px} /* Home keeps its mode buttons and utility dock inside the visible screen. Saved-game shortcuts share a row; artwork takes the flexible space. */ #game #overlay.premium-panel>.panel:has(.sp-home){height:100%;max-height:100%;overflow:hidden} #game #overlay.premium-panel>.panel:has(.sp-home)::after{display:none!important} /* Detailed settings may scroll internally; navigation stays outside that area. */ #game #overlay.pd-setup-panel>.panel{height:100%;max-height:100%;overflow:hidden;padding:12px} #game #overlay.pd-setup-panel>.panel::after{display:none!important} #game #overlay .pd-setup{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px} #game #overlay .pd-setup>.huddle-top,#game #overlay .pd-setup>.pd-tabs{flex-shrink:0;margin:0} #game #overlay .pd-setup>.huddle-top h2{font-size:24px!important;margin:0!important} #game #overlay .pd-setup>.pd-content{flex:1;min-height:0;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 5px 10px} #game #overlay .pd-setup>.pd-footnote{flex-shrink:0;margin:0} @container pocket-screen (max-width:699px){ #game #overlay.active>.panel::after{display:none!important} #game #overlay .pd-setup>.pd-footnote{display:none} #game #overlay .pd-content .pd-cols{grid-template-columns:minmax(0,1fr)} #game #overlay .pd-content .pd-presets{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Options uses short pages instead of a stack of seventeen settings. */ #game #overlay>.panel:has(.options-fit){height:100%;max-height:100%;overflow:hidden;padding:12px} #game #overlay>.panel:has(.options-fit)::after{display:none!important} #game #overlay .options-fit{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px} #game #overlay .options-fit header{position:static;display:block;height:auto;padding:0;border:0;background:none;box-shadow:none} #game #overlay .options-fit h2{font-size:26px!important;margin:4px 0!important} #game #overlay .options-fit .compact-help{font-size:12px!important;line-height:1.25;margin:0} #game #overlay .options-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #game #overlay .options-tabs button{min-height:40px;margin:0;padding:6px;font-size:16px} #game #overlay .options-fit .options-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(44px,1fr);gap:8px;min-height:0;margin:0} #game #overlay .options-fit .options-grid button{min-height:44px;margin:0;padding:7px;font-size:14px!important;line-height:1.15} #game #overlay .options-fit #options-back{min-height:44px;margin:0;padding:8px} #game #overlay .options-fit[data-tab=setup] [data-options-section]:not([data-options-section=setup]),#game #overlay .options-fit[data-tab=play] [data-options-section]:not([data-options-section=play]),#game #overlay .options-fit[data-tab=more] [data-options-section]:not([data-options-section=more]){display:none!important} /* Joining keeps both seats and the kickoff button visible together. */ #game #overlay>.panel:has(.pd-join){height:100%;max-height:100%;overflow:hidden;padding:12px} #game #overlay>.panel:has(.pd-join)::after{display:none!important} #game #overlay .pd-join{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:8px} #game #overlay .pd-join .huddle-top{margin:0} #game #overlay .pd-join .huddle-top h2{font-size:24px!important;line-height:1.1} #game #overlay .pd-join-seats{min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))} #game #overlay .pd-join-vs{display:none} #game #overlay .pd-join .pd-seat{min-height:0;padding:7px;gap:5px;align-content:center} #game #overlay .pd-join .pd-seat-team .club-mark{height:28px;width:28px} #game #overlay .pd-join .pd-seat-team strong{font-size:15px} #game #overlay .pd-join .pd-seat-device{min-height:44px;padding:5px;gap:7px} #game #overlay .pd-join .pd-seat-icon{height:32px;width:32px;font-size:18px} #game #overlay .pd-join .pd-seat-device b{font-size:15px} #game #overlay .pd-join .pd-join-actions button{min-height:36px;font-size:13px!important;padding:6px;margin:0} #game #overlay .pd-join #join-start{min-height:44px;font-size:17px!important;margin:0;padding:8px} #game #overlay .pd-join>.compact-help{font-size:12px!important;line-height:1.25;margin:0} @container pocket-screen (min-width:650px){ #game #overlay .pd-join-seats{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr)} } @container pocket-screen (max-width:699px) or (max-height:450px){ #game #overlay.premium-panel .sp-home{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0;padding:6px!important;gap:8px!important} #game #overlay.premium-panel .sp-home .sp-caption{display:none} #game #overlay.premium-panel .sp-home .home-actions{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(70px,1.3fr) minmax(66px,1fr) auto auto auto;min-height:0;gap:7px;margin:0} #game #overlay.premium-panel .sp-home .quick-start-home{grid-column:1/-1;grid-row:1;min-height:44px;margin:0} /* The grid owns this height, including when the older Quick Start rule matches. */ #game #overlay.premium-panel .sp-home #start{grid-column:1/-1;grid-row:2;height:100%!important;min-height:0} #game #overlay.premium-panel .sp-home .home-modes{grid-column:1/-1;grid-row:3;min-height:0} #game #overlay.premium-panel .sp-home .home-modes .sp-tile{height:100%;min-height:0} /* Story tile: its own full-width row under the mode cards (auto-placement dropped it into a half cell). */ #game #overlay.premium-panel .sp-home #story-entry{grid-column:1/-1;grid-row:4;height:clamp(58px,8.5dvh,76px);min-height:0;width:auto!important} #game #overlay.premium-panel .sp-home #exhibition-repeat{grid-column:1;grid-row:5} #game #overlay.premium-panel .sp-home #resume-save{grid-column:2;grid-row:5} #game #overlay.premium-panel .sp-home #resume-online{grid-column:1/-1;grid-row:6} #game #overlay.premium-panel .sp-home .resume-save{min-height:44px;margin:0;padding:6px!important;font-size:12px!important;line-height:1.15} #game #overlay.premium-panel .sp-home #exhibition-repeat{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} #game #overlay.premium-panel .sp-home .home-dock{margin:0;gap:6px!important} #game #overlay.premium-panel .sp-home .home-dock button{min-height:40px;padding:6px!important;font-size:13px!important} } /* Three calls are always visible. The diagram grows into the remaining row space, instead of adding an image's minimum height to a long coach banner. */ #game #overlay.quick-call-panel>.panel{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:8px} #game #overlay.quick-call-panel .sideline-head{margin:0;min-width:0;gap:8px} #game #overlay.quick-call-panel .sideline-head h2{font-size:25px!important;margin:3px 0 0!important} #game #overlay.quick-call-panel .sideline-head small{font-size:12px;line-height:1.2} #game #overlay.quick-call-panel .sideline-head>button{min-height:44px;padding:8px 12px;font-size:14px} #game #overlay.quick-call-panel .call-tabs{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:6px;margin:0} #game #overlay.quick-call-panel .call-tabs button{min-height:44px;padding:6px;font-size:14px;line-height:1.1} #game #overlay.quick-call-panel .ren-brief{min-height:0;margin:0;padding:7px;gap:7px} #game #overlay.quick-call-panel .ren-brief>.coach-portrait{flex-basis:36px;width:36px;height:36px} #game #overlay.quick-call-panel .ren-brief:not(.coach-note) small,#game #overlay.quick-call-panel .ren-brief:not(.coach-note) p{display:none} #game #overlay.quick-call-panel .ren-brief b{font-size:14px;margin:0;line-height:1.2} #game #overlay.quick-call-panel .ren-brief>button{font-size:14px;min-height:36px;padding:6px 8px} #game #overlay.quick-call-panel .coach-note p{font-size:14px!important;line-height:1.2!important;margin:2px 0!important} #game #overlay.quick-call-panel .coach-note small{font-size:12px} #game #overlay.quick-call-panel .coach-plays{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:0;margin:0} #game #overlay.quick-call-panel .coach-play{display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;height:100%;width:100%;margin:0;overflow:hidden} #game #overlay.quick-call-panel .coach-play img,#game #overlay.quick-call-panel .coach-play .play-fallback{grid-column:1;grid-row:1/3;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;aspect-ratio:auto} #game #overlay.quick-call-panel .coach-play .call-label{display:flex;flex-direction:row;grid-column:2;grid-row:1;padding:6px 10px;gap:6px} #game #overlay.quick-call-panel .call-label small{font-size:12px;line-height:1.15} #game #overlay.quick-call-panel .call-label kbd{width:24px;height:24px;min-width:24px;font-size:14px} #game #overlay.quick-call-panel .coach-play .call-copy{grid-column:2;grid-row:2;display:flex;justify-content:center;flex-direction:column;padding:2px 10px 8px;min-height:0} #game #overlay.quick-call-panel .coach-play b{font-size:clamp(16px,2.5cqw,22px);line-height:1.1} #game #overlay.quick-call-panel .ren-play-reason{font-size:12px;line-height:1.15;margin:3px 0 0} #game #overlay.quick-call-panel .sideline-foot{display:flex;flex-wrap:wrap;gap:5px;margin:0;font-size:12px;line-height:1.1} #game #overlay.quick-call-panel .sideline-foot>span{display:none} #game #overlay.quick-call-panel .sideline-foot>div{display:flex;flex-wrap:nowrap;gap:6px;width:100%} #game #overlay.quick-call-panel .sideline-foot button{min-height:44px;flex:1;padding:6px 8px;font-size:14px} /* Fourth-down advice replaces the coach subtitle and stays visible above book controls. */ #game #overlay:is(.quick-call-panel,.huddle-panel.expanded-book) .fourth-down-note{min-width:0;flex-shrink:0;margin:0;font-size:12px;line-height:1.25;color:#dfe8ff;overflow-wrap:anywhere} /* Full playbook: filters, three compact calls, pager and special teams all fit. */ #game #overlay.huddle-panel.expanded-book>.panel{display:flex;flex-direction:column;gap:6px} #game #overlay.huddle-panel.expanded-book .book-heading{margin:0;gap:6px} #game #overlay.huddle-panel.expanded-book h2{font-size:24px!important;margin:0!important} #game #overlay.huddle-panel.expanded-book .book-kicker{font-size:12px} #game #overlay.huddle-panel.expanded-book :is(.book-formation,.book-filters,.book-types,.book-concepts,.book-sides,.huddle-pager,.huddle-specials){position:static;width:auto;margin:0;gap:5px;flex-shrink:0} #game #overlay.huddle-panel.expanded-book :is(.book-formation,.book-types,.book-concepts,.book-sides,.huddle-pager,.huddle-specials) button{min-height:36px;margin:0;padding:6px 8px;font-size:14px} #game #overlay.huddle-panel.expanded-book .book-concepts{display:flex;flex-wrap:wrap} #game #overlay.huddle-panel.expanded-book .play-grid{flex:1;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;min-height:0;margin:0} #game #overlay.huddle-panel.expanded-book .huddle-play{display:grid;grid-template-columns:34% minmax(0,1fr);position:static;width:auto;min-height:0;height:100%;margin:0;padding:0} #game #overlay.huddle-panel.expanded-book .huddle-play>img,#game #overlay.huddle-panel.expanded-book .huddle-play>.play-fallback{height:100%;width:100%;min-height:0;max-height:100%;aspect-ratio:auto;object-fit:contain} #game #overlay.huddle-panel.expanded-book .huddle-play-caption{align-self:center;min-width:0;padding:7px 9px} #game #overlay.huddle-panel.expanded-book .huddle-play-caption strong{font-size:17px;line-height:1.1} #game #overlay.huddle-panel.expanded-book .huddle-play-caption small{font-size:12px} #game #overlay.huddle-panel.expanded-book .huddle-specials{padding-top:4px} #game #overlay.huddle-panel.expanded-book .book-formation{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;border:0;background:none} #game #overlay.play-filter-panel>.panel{height:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:12px} #game #overlay.play-filter-panel>.panel::after{display:none!important} #game #overlay.play-filter-panel .book-heading{margin:0} #game #overlay.play-filter-panel h2{font-size:24px!important;margin:0!important} #game #overlay.play-filter-panel :is(.book-types,.book-sides){flex:0 0 auto;margin:0} #game #overlay.play-filter-panel :is(.book-types,.book-sides) button{min-height:40px;padding:6px;font-size:14px} #game #overlay .play-filter-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(44px,1fr);gap:8px;margin:0} #game #overlay .play-filter-grid button{min-height:44px;font-size:14px;padding:8px} #game #overlay.huddle-panel.expanded-formations>.panel{display:flex;flex-direction:column;gap:8px} #game #overlay.huddle-panel.expanded-formations .huddle-top{margin:0} #game #overlay.huddle-panel.expanded-formations .huddle-top h2{font-size:24px!important;margin:0!important} #game #overlay.huddle-panel.expanded-formations .formation-grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);margin:0} #game #overlay.huddle-panel.expanded-formations .formation-grid button{display:flex;flex-direction:column;min-height:0} #game #overlay.huddle-panel.expanded-formations .formation-grid :is(img,.play-fallback){flex:1;min-height:0;height:0;width:100%;object-fit:contain} #game #overlay.huddle-panel.expanded-formations .formation-grid b{flex-shrink:0;font-size:13px;min-height:0;padding:5px;line-height:1.15} #game #overlay.huddle-panel.expanded-formations .formation-grid button{background:linear-gradient(180deg,#fff,#e9f0ff)!important;color:var(--sp-ink)!important} #game #overlay.huddle-panel.expanded-formations .formation-grid b{color:var(--sp-ink)!important} #game #overlay.huddle-panel.expanded-formations .huddle-pager{position:static;flex-shrink:0;width:auto;display:flex;justify-content:space-between;gap:8px;margin:0} #game #overlay.huddle-panel.expanded-formations .huddle-pager button{min-height:36px;height:auto;padding:6px 10px} #game #overlay.huddle-panel.expanded-formations .all-formations{flex-shrink:0;min-height:40px;margin:0;padding:8px} /* Defense has the same fixed call area as offense, including the last call. */ #game #overlay.defense-dock>.panel{height:100%;max-height:100%;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:8px} #game #overlay.defense-dock>.panel::after{display:none!important} #game #overlay.defense-dock .eyebrow{font-size:12px;margin:0} #game #overlay.defense-dock .replay-heading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0} #game #overlay.defense-dock .replay-heading h2{grid-column:1/-1;font-size:24px!important;line-height:1.1;margin:0!important} #game #overlay.defense-dock .replay-heading button{min-height:36px;padding:6px 8px;font-size:14px;margin:0} #game #overlay.defense-dock #defense-auto-status{font-size:12px;margin:0;line-height:1.2} #game #overlay.defense-dock .defense-role-picks{margin:0;gap:6px;flex-shrink:0} #game #overlay.defense-dock .defense-role-picks button{min-height:44px;padding:6px!important;justify-content:center} #game #overlay.defense-dock .defense-role-picks span{display:none} #game #overlay.defense-dock .defense-grid{flex:1;min-height:0;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px;margin:0} #game #overlay.defense-dock .defense-grid button{min-height:0;padding:8px;display:flex;flex-direction:column;justify-content:center;gap:4px} #game #overlay.defense-dock .defense-grid button b{font-size:18px!important} #game #overlay.defense-dock .defense-grid button span{font-size:12px;line-height:1.2} #game #overlay.defense-dock .defense-families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex-shrink:0} #game #overlay.defense-dock .defense-families button{min-width:0;min-height:36px;padding:6px 4px;font-size:12px} #game #overlay.defense-dock .defense-families button[aria-pressed=true]{background:var(--sp-yellow)!important;color:var(--sp-ink)!important} #game #overlay.defense-dock .coach-note{margin:0;padding:6px;gap:6px;min-height:0} #game #overlay.defense-dock .coach-note p{font-size:13px!important;line-height:1.2!important;margin:2px 0!important} /* Setup actions occupy their own final row. They cannot scroll off the screen. */ #game #overlay.exhibition-panel .ex-fit{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;min-height:0} #game #overlay.exhibition-panel .gs-top{margin:0;gap:8px} #game #overlay.exhibition-panel .gs-top h2{font-size:30px!important;margin:0!important} /* Keep setup cards intact and scroll the body when the pinned rows leave less room. */ #game #overlay.exhibition-panel .ex-content{display:flex;flex-direction:column;justify-content:safe center;gap:10px;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior-y:contain} #game #overlay.exhibition-panel .ex-content>*{flex-shrink:0} #game #overlay.exhibition-panel .ex-matchup{flex-shrink:0;min-height:auto;margin:0;padding:12px 8px;gap:6px} #game #overlay.exhibition-panel .ex-matchup .club-mark{height:60px;width:60px} #game #overlay.exhibition-panel .ex-matchup strong{font-size:16px} #game #overlay.exhibition-panel .ex-matchup .ex-side{gap:5px} #game #overlay.exhibition-panel .ex-players{margin:0;gap:8px} #game #overlay.exhibition-panel .ex-players button{min-height:52px;padding:8px 10px} #game #overlay.exhibition-panel .difficulty-choices{margin:0;gap:7px} #game #overlay.exhibition-panel .difficulty-choices button{min-height:44px;padding:7px;font-size:16px} #game #overlay.exhibition-panel .ex-actions{position:static;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;padding:0;margin:0;background:none;font-size:16px;letter-spacing:0;flex-shrink:0} #game #overlay.exhibition-panel .ex-actions :is(.primary,.secondary){min-height:56px;margin:0;padding:10px;font-size:17px;line-height:1.15} #game #overlay.exhibition-panel .ex-actions>button:only-child,#game #overlay.exhibition-panel .ex-kickoff{grid-column:1/-1} #game #overlay.exhibition-panel .ex-kickoff{position:static;margin:0;padding:0;background:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} #game #overlay.exhibition-panel .ex-summary{margin:0!important;text-align:center;font-size:14px!important;line-height:1.2!important} #game #overlay.exhibition-panel .ex-custom-actions{display:grid;gap:8px} #game #overlay.exhibition-panel .ex-custom-actions button{min-height:44px;margin:0;padding:9px;font-size:16px} #game #overlay.exhibition-panel .ex-condition-fields{display:grid;gap:14px} #game #overlay.exhibition-panel .ex-pick>span{font-size:14px} #game #overlay.exhibition-panel .ex-condition-fields .gm-choice{min-height:50px} #game #overlay.exhibition-panel .coach-feature{min-height:0;margin:0;gap:12px} #game #overlay.exhibition-panel .coach-feature .coach-portrait{width:100px;height:100px;flex-basis:100px} #game #overlay.exhibition-panel .coach-feature p{font-size:14px!important;margin:6px 0!important;line-height:1.3!important} #game #overlay.exhibition-panel .coach-choices{min-height:0;margin:0;gap:8px} #game #overlay.exhibition-panel .coach-choices .coach-portrait{height:90px;width:100%;max-width:110px} #game #overlay.exhibition-panel .coach-choices button{min-height:0;padding:8px} #game #overlay.exhibition-panel .coach-pages{margin:0} @container pocket-screen (max-height:650px){ #game #overlay.active{padding-top:calc(env(safe-area-inset-top,0px) + 42px);padding-bottom:max(10px,env(safe-area-inset-bottom,0px))} #game.started.calling-play #overlay.active{padding-top:calc(env(safe-area-inset-top,0px) + 124px)} #game #overlay.quick-call-panel>.panel{gap:5px;padding:9px} #game #overlay.quick-call-panel .sideline-head h2{font-size:21px!important} #game #overlay.quick-call-panel .call-tabs button{min-height:38px} #game #overlay.quick-call-panel .ren-brief:not(.coach-note){display:none} #game #overlay.quick-call-panel>.panel:has(.ren-brief:not(.coach-note)){grid-template-rows:auto auto minmax(0,1fr) auto} #game #overlay.quick-call-panel .coach-play .call-label{padding:4px 8px} #game #overlay.quick-call-panel .call-label kbd{width:20px;height:20px;min-width:20px} #game #overlay.quick-call-panel .sideline-foot button{min-height:36px} #game #overlay.exhibition-panel .ex-fit{gap:8px} #game #overlay.exhibition-panel .ex-content{gap:7px} #game #overlay.exhibition-panel .gs-top h2{font-size:25px!important} #game #overlay.exhibition-panel .ex-matchup{padding:8px} #game #overlay.exhibition-panel .ex-matchup .club-mark{height:44px;width:44px} #game #overlay.exhibition-panel .ex-players span,#game #overlay.exhibition-panel .ex-summary{display:none} #game #overlay.exhibition-panel .ex-players button{min-height:44px} #game #overlay.exhibition-panel .ex-actions :is(.primary,.secondary){min-height:48px;font-size:15px} #game #overlay.exhibition-panel .coach-feature .coach-portrait{height:76px;width:76px;flex-basis:76px} #game #overlay.exhibition-panel .coach-choices .coach-portrait{height:60px} #game #overlay.huddle-panel.expanded-book :is(.book-formation,.book-types,.book-concepts,.book-sides,.huddle-pager,.huddle-specials) button{min-height:32px;padding:4px 6px} #game #overlay.huddle-panel.expanded-book .huddle-play-caption small{display:none} #game #overlay #character-select .cs-detail .cs-bars{display:grid!important;margin-top:2px!important;padding:4px 6px!important;gap:2px!important} #game #overlay #character-select .cs-detail .cs-tag{display:none} #game #overlay #character-select .cs-detail-copy{gap:2px} #game #overlay #character-select .cs-detail .cs-bar>span{font-size:9px!important;letter-spacing:0!important} #game #overlay #character-select .cs-detail .cs-bar>i{height:7px!important} #game #overlay #character-select .cs-detail h3{font-size:22px!important;margin:3px 0} #game #overlay #character-select .cs-art{height:44px} #game #overlay #character-select .cs-info-button{min-height:32px} #game #overlay #character-select .cs-detail{padding:7px;gap:7px} #game #overlay #character-select .cs-detail .cs-tag{font-size:12px} #game #overlay.exhibition-panel .ex-step-custom .ex-matchup .club-mark{display:none} #game #overlay.premium-panel .sp-home h1.sp-logo{font-size:36px!important} #game #overlay.premium-panel .sp-home .sp-news span{display:none} #game #overlay.premium-panel .sp-home .sp-news small{grid-row:1} #game #overlay.premium-panel .sp-home .sp-news b{font-size:17px!important} #game #overlay.premium-panel .sp-home .sp-tile-play small{top:10px;left:40px} #game #overlay.premium-panel .sp-home .sp-tile-play b{font-size:29px!important} #game #overlay.defense-dock>.panel{gap:6px;padding:9px} #game #overlay.play-filter-panel>.panel{gap:6px;padding:9px} #game #overlay:is(.quick-call-panel,.defense-dock) .coach-note{position:relative;flex-shrink:0;padding:6px;gap:6px} #game #overlay:is(.quick-call-panel,.defense-dock) .coach-note small{position:absolute;top:6px;right:6px} #game #overlay:is(.quick-call-panel,.defense-dock) .coach-note small>span{display:none} #game #overlay:is(.quick-call-panel,.defense-dock) .coach-note b{min-height:32px;display:flex;align-items:center;padding-right:70px;font-size:14px!important;margin:0} #game #overlay:is(.quick-call-panel,.defense-dock) .coach-note p{font-size:12px!important;line-height:1.2!important;margin:2px 0 0!important} #game #overlay.defense-dock>.panel:has(.coach-note) .defense-grid{grid-auto-rows:minmax(44px,1fr)} #game #overlay.defense-dock>.panel:has(.coach-note) .defense-grid span{display:none} } @container pocket-screen (min-width:700px){ #game #overlay.quick-call-panel .coach-plays,#game #overlay.huddle-panel.expanded-book .play-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)} #game #overlay.quick-call-panel .coach-play{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto} #game #overlay.quick-call-panel .coach-play img{grid-column:1;grid-row:2} #game #overlay.quick-call-panel .coach-play .call-label{grid-column:1;grid-row:1} #game #overlay.quick-call-panel .coach-play .call-copy{grid-column:1;grid-row:3} #game #overlay.huddle-panel.expanded-book .huddle-play{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto} #game #overlay.defense-dock .defense-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* On short landscape screens, place the three play calls in one horizontal row so each option remains large enough to tap without covering the HUD. */ @container pocket-screen (min-width:560px) and (max-width:649px) and (max-height:450px){ #game #overlay.quick-call-panel>.panel{grid-template-rows:auto auto minmax(44px,1fr) auto;gap:4px;padding:8px} #game #overlay.quick-call-panel .sideline-head{min-height:44px;align-items:center} #game #overlay.quick-call-panel .sideline-head h2{font-size:18px!important;line-height:1!important;white-space:nowrap} #game #overlay.quick-call-panel .call-tabs button{padding:4px;font-size:12px} #game #overlay.quick-call-panel .coach-plays{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(44px,1fr);gap:6px} #game #overlay.quick-call-panel .coach-play{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:44px;height:100%;padding:3px} #game #overlay.quick-call-panel .coach-play img,#game #overlay.quick-call-panel .coach-play .play-fallback{display:none} #game #overlay.quick-call-panel .coach-play .call-label{grid-column:1;grid-row:1;min-width:0;padding:0 2px;gap:3px} #game #overlay.quick-call-panel .call-label small{font-size:10px;white-space:nowrap} #game #overlay.quick-call-panel .call-label kbd{width:18px;height:18px;min-width:18px;font-size:11px} #game #overlay.quick-call-panel .coach-play .call-copy{grid-column:1;grid-row:2;padding:0 2px;overflow:hidden} #game #overlay.quick-call-panel .coach-play b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.05} #game #overlay.quick-call-panel .ren-play-reason{display:none} } @container pocket-screen (min-width:560px) and (max-width:649px) and (max-height:340px){ #game #overlay.quick-call-panel>.panel{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:44px minmax(44px,1fr) 44px;gap:4px} #game #overlay.quick-call-panel .sideline-head{grid-column:1;grid-row:1;gap:3px} #game #overlay.quick-call-panel .sideline-head small{display:none} #game #overlay.quick-call-panel .sideline-head h2{flex:1;min-width:0;font-size:14px!important;line-height:1.05!important;white-space:normal} #game #overlay.quick-call-panel .sideline-head button{min-height:44px;padding:4px 5px;font-size:11px;white-space:nowrap} #game #overlay.quick-call-panel .call-tabs{grid-column:2;grid-row:1;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:3px} #game #overlay.quick-call-panel .call-tabs button{padding:3px 2px;font-size:11px;white-space:nowrap} #game #overlay.quick-call-panel .coach-plays{grid-column:1/-1;grid-row:2} #game #overlay.quick-call-panel .sideline-foot{grid-column:1/-1;grid-row:3} } @container pocket-screen (max-height:650px){ #game #overlay.quick-call-panel .call-tabs button,#game #overlay.quick-call-panel .sideline-foot button{min-height:44px} } @container pocket-screen (min-width:650px) and (max-height:450px){ #game.started.calling-play #overlay.active{padding-top:110px} #game #overlay .options-fit .options-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #game #overlay .options-fit header .compact-help{display:none} #game #overlay.premium-panel .sp-home{grid-template-columns:minmax(0,.8fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr);gap:8px 18px!important} #game #overlay.premium-panel .sp-home h1.sp-logo{grid-column:1;grid-row:1;font-size:32px!important} #game #overlay.premium-panel .sp-home .home-actions{grid-column:2;grid-row:1/3;height:100%;max-width:none;width:100%;align-self:stretch} #game #overlay.premium-panel .sp-home .home-dock{grid-column:1;grid-row:2;align-self:end;grid-template-columns:1fr} /* With CONTINUE up, the story tile shares its row, so Play a Game keeps its height and title (review, 844×390). */ #game #overlay.premium-panel .sp-home:has(#resume-save):not(:has(#exhibition-repeat:not([hidden]))) #story-entry{grid-column:1;grid-row:4} #game #overlay.premium-panel .sp-home:has(#resume-save):not(:has(#exhibition-repeat:not([hidden]))) #resume-save{grid-column:2;grid-row:4;height:100%} /* At half width the label keeps the chapter and place whole: the ruleset suffix goes (the art already shows it). */ #game #overlay.premium-panel .sp-home:has(#resume-save):not(:has(#exhibition-repeat:not([hidden]))) #story-entry>span{font-size:10px;letter-spacing:.2px} #game #overlay.premium-panel .sp-home:has(#resume-save):not(:has(#exhibition-repeat:not([hidden]))) #story-entry>span em{display:none} #game #overlay.quick-call-panel>.panel:has(.coach-note){grid-template-columns:minmax(0,.85fr) minmax(0,2fr);grid-template-rows:auto auto minmax(0,1fr) auto} #game #overlay.quick-call-panel>.panel:has(.coach-note) :is(.sideline-head,.call-tabs,.sideline-foot){grid-column:1/-1} #game #overlay.quick-call-panel>.panel:has(.coach-note) .coach-note{grid-column:1;grid-row:3;align-self:stretch} #game #overlay.quick-call-panel>.panel:has(.coach-note) .coach-note-face{display:none} #game #overlay.quick-call-panel>.panel:has(.coach-note) .coach-plays{grid-column:2;grid-row:3} #game #overlay.defense-dock>.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px 12px} #game #overlay.defense-dock .eyebrow{grid-column:1/-1} #game #overlay.defense-dock .replay-heading{grid-column:1;grid-row:2} #game #overlay.defense-dock .replay-heading h2{font-size:20px!important} #game #overlay.defense-dock .replay-heading button{min-height:32px} #game #overlay.defense-dock .coach-note{grid-column:1;grid-row:3;align-self:center} #game #overlay.defense-dock #defense-auto-status{display:none} #game #overlay.defense-dock .defense-role-picks{grid-column:1;grid-row:4} #game #overlay.defense-dock .defense-role-picks button{min-height:36px} #game #overlay.defense-dock .defense-families{grid-column:2;grid-row:2;align-self:center} #game #overlay.defense-dock .defense-families button{min-height:36px;padding:6px 4px!important;font-size:12px!important} #game #overlay.defense-dock .defense-grid{grid-column:2;grid-row:3/5;grid-template-columns:1fr 1fr} #game #overlay.defense-dock .defense-grid button{justify-content:flex-start;gap:2px;padding:5px!important;overflow:hidden} #game #overlay.defense-dock .defense-grid button b{flex-shrink:0;font-size:16px!important;line-height:1.05} #game #overlay.defense-dock .defense-grid button span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.15} #game #overlay.exhibition-panel .ex-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;align-content:center;gap:8px 18px} #game #overlay.exhibition-panel :is(.ex-step-quick,.ex-step-custom) .ex-matchup{grid-column:1;grid-row:1/4} #game #overlay.exhibition-panel :is(.ex-players,.difficulty-choices,.ex-summary,.ex-custom-actions,.ex-versus-note){grid-column:2} #game #overlay.exhibition-panel .ex-step-conditions .ex-content{display:flex} #game #overlay.exhibition-panel .ex-condition-fields{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:10px} #game #overlay.exhibition-panel .ex-step-conditions .difficulty-choices{width:100%} #game #overlay.exhibition-panel .ex-step-coach .coach-feature{grid-column:1;grid-row:1/3;align-self:stretch} #game #overlay.exhibition-panel .ex-step-coach :is(.coach-choices,.coach-pages){grid-column:2} #game #overlay.exhibition-panel .coach-feature .coach-portrait{width:60px;height:60px;flex-basis:60px} #game #overlay.exhibition-panel .coach-choices .coach-portrait{height:52px} } /* Practice keeps the drill list and Start in view; expanded guidance owns only its body. */ .pc-current,.pc-start-cue{display:none} @container pocket-screen (max-width:700px) or (max-height:800px){ #game #overlay:has(.practice-center){padding:calc(env(safe-area-inset-top,0px) + 42px) 12px calc(env(safe-area-inset-bottom,0px) + 10px)!important} #game #overlay:has(.practice-center)>.panel{height:100%!important;min-height:0!important;overflow:hidden!important} #game #overlay:has(.practice-center)>.panel::after{display:none!important} #game .practice-center{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:8px} #game .practice-center .pc-heading{margin:0;gap:8px;min-height:44px} #game #overlay .practice-center .pc-heading h2{font-size:25px!important;margin:0!important} #game .practice-center .pc-heading .eyebrow{display:none} #game #overlay .practice-center .pc-heading .pc-back{min-height:44px!important;margin:0!important;padding:8px 12px!important;font-size:14px!important} #game .practice-center .pc-overview{margin:0;padding:0;gap:10px;border:0;min-height:44px} #game .practice-center .pc-overview strong{font-size:20px} #game .practice-center .pc-overview strong>span{font-size:14px} #game .practice-center .pc-overview small{font-size:12px!important;margin:0} #game .practice-center .pc-overview-meter>span{font-size:12px} #game #overlay .practice-center .pc-overview>button{font-size:14px!important;min-height:44px!important;padding:6px 10px!important;margin:0;max-width:96px} #game .practice-center .pc-tabs{margin:0;max-width:none;gap:4px;padding:3px} #game #overlay .practice-center .pc-tabs button{min-height:44px!important;margin:0!important;padding:6px 4px!important;font-size:14px!important} #game .practice-center .pc-layout{min-height:0;display:block;overflow:hidden} #game .practice-center .pc-lab-list{height:100%;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(44px,1fr);gap:8px;padding:3px} #game #overlay .practice-center .pc-lab{height:100%;min-height:44px!important;min-width:0;margin:0!important;padding:8px!important;grid-template-columns:24px minmax(0,1fr);gap:6px} #game #overlay .practice-center .pc-lab b{font-size:15px!important;line-height:1.1} #game .practice-center .pc-lab :is(small,.pc-lab-arrow,.pc-lab-medal){display:none!important} #game .practice-center .pc-role{height:26px;min-width:24px;font-size:12px!important} #game #overlay .practice-center .pc-random{min-height:44px!important;margin:0!important;font-size:14px!important;padding:8px!important} #game .practice-center .pc-random span{font-size:12px!important} #game .practice-center:not(.pc-details-view) .pc-focus{display:none} #game .practice-center.pc-details-view .pc-lab-list{display:none} #game .practice-center.pc-details-view .pc-focus{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px 14px;border-radius:14px;box-sizing:border-box} #game .practice-center .pc-focus-heading{display:block;margin-bottom:10px} #game .practice-center .pc-drill-diagram{display:none} #game #overlay .practice-center .pc-focus h3{font-size:20px!important;margin:4px 0 8px} #game #overlay .practice-center .pc-focus p{font-size:14px!important;line-height:1.35} #game .practice-center .pc-kicker{font-size:12px} #game .practice-center .pc-picker{font-size:14px;padding:7px 0} #game .practice-center .pc-picker :is(select,.gm-choice){min-height:44px!important;font-size:14px!important;min-width:0} #game .practice-center .pc-objectives{margin:4px 0} #game .practice-center .pc-objectives li{padding:8px 0} #game .practice-center .pc-objectives b{font-size:14px} #game .practice-center .pc-objectives small{font-size:12px} #game .practice-center .pc-focus .pc-control-cue{display:none} #game .practice-center .pc-start-row{min-height:0;display:grid;gap:6px} #game .practice-center .pc-current{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px} #game .practice-center .pc-current strong{font-family:var(--sp-display);font-size:18px;line-height:1.1} #game #overlay .practice-center .pc-current button{width:auto;min-height:44px!important;margin:0!important;padding:8px 10px!important;font-size:14px!important;flex:none} #game #overlay .practice-center .pc-start-row .primary{min-height:48px!important;padding:8px 12px!important;margin:0!important;font-size:18px!important} #game .practice-center .pc-start-row>small{display:none} #game #overlay .practice-center .pc-start-cue{display:block;margin:0!important;font-size:14px!important;line-height:1.25} #game .practice-center .pc-training{grid-row:5;margin:0;padding:5px 8px;font-size:12px;gap:3px;flex-direction:row;flex-wrap:wrap} #game .practice-center .pc-footnote{display:none} } @container pocket-screen (min-width:701px) and (max-height:560px){ #game .practice-center{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:44px 50px minmax(0,1fr);column-gap:18px} #game .practice-center .pc-heading{grid-column:1/-1} #game .practice-center .pc-overview{grid-column:1;grid-row:2} #game .practice-center .pc-tabs{grid-column:2;grid-row:2} #game .practice-center .pc-layout{grid-column:1;grid-row:3} #game .practice-center .pc-start-row{grid-column:2;grid-row:3;align-self:center} #game .practice-center .pc-training{grid-column:2;grid-row:3;align-self:end} } /* The complete mixer, preview and Back fit inside the visible viewport. */ #game #overlay:has(.audio-settings)>.panel{height:100%!important;min-height:0!important;overflow:hidden!important} #game #overlay:has(.audio-settings)>.panel::after{display:none!important} #game .audio-settings{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:8px} #game #overlay .audio-settings .audio-heading h2{font-size:28px!important;line-height:1.05;margin:4px 0!important} #game .audio-settings .audio-heading .eyebrow{margin:0!important} #game .audio-settings .audio-switches{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0} #game .audio-settings .audio-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0} #game .audio-settings .audio-actions .pd-preview-status{grid-column:1/-1;grid-row:2;margin:0!important;font-size:12px!important;line-height:1.2} #game .audio-settings .audio-actions .pd-preview-status:empty{display:none} #game .audio-settings #audio-back{grid-column:2;grid-row:1} /* Pro Clubs keeps the career actions and kickoff inside the visible screen. */ #game #overlay.pro-panel>.panel{height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important;padding:14px!important} #game #overlay.pro-panel>.panel::after{display:none!important} #game #overlay .pro-screen{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:10px;text-align:left} #game #overlay .pro-heading{position:static;display:flex;align-items:center;justify-content:space-between;gap:10px;height:auto;padding:0;border:0;background:none;box-shadow:none} #game #overlay .pro-heading h2{font-size:28px!important;margin:4px 0 0!important;line-height:1.05} #game #overlay .pro-heading .eyebrow{font-size:12px!important;margin:0!important;background:none!important;color:#b8cbff!important;padding:0!important;letter-spacing:.7px!important} #game #overlay .pro-heading .eyebrow::before{display:none} #game #overlay .pro-heading button{width:auto;min-height:44px;margin:0;padding:8px 14px;font-size:14px!important;flex:none} #game #overlay .pro-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #game #overlay .pro-tabs button{min-height:44px;margin:0;padding:6px;font-size:16px!important} #game #overlay .pro-tabs button[aria-pressed=true],#game #overlay .pro-challenges button[aria-pressed=true]{background:linear-gradient(180deg,#fff288,#ffd824 55%,#f4a900)!important;color:var(--sp-ink)!important} #game #overlay .pro-body{min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:2px} #game #overlay .pro-body :is(h3,p){margin:0!important} #game #overlay .pro-body>:is(.pro-player-card,.pro-xp,.pro-skills,.pro-help){flex-shrink:0} #game #overlay .pro-body h3{font-size:24px!important;line-height:1.1} #game #overlay .pro-body p{font-size:15px!important;line-height:1.35;color:#e5edff!important} #game #overlay .pro-body button{margin:0;min-height:44px;font-size:14px!important;padding:8px 10px} #game #overlay .pro-player-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:2px solid #8098df;border-radius:18px;background:linear-gradient(135deg,#26377e,#172556)} #game #overlay .pro-jersey{font-family:var(--sp-display);font-size:38px;color:#ffdf37;line-height:1} #game #overlay .pro-player-card h3{font-size:24px!important} #game #overlay .pro-player-card p{font-size:13px!important;margin:4px 0!important} #game #overlay .pro-player-card b{font-size:12px;color:#bacaff} #game #overlay .pro-player-card button{width:auto;font-size:13px!important;padding:6px 9px} #game #overlay .pro-xp{display:grid;gap:5px;font-size:12px;font-weight:800;color:#fbe077} #game #overlay .pro-xp progress{width:100%;height:10px;accent-color:#ffde25} #game #overlay .pro-skills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:0} #game #overlay .pro-skills button{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px;text-align:left;font-size:13px!important;padding:8px!important;min-height:58px;background:#eef3ff!important;color:#132342!important;text-shadow:none!important} #game #overlay .pro-skills button:disabled{opacity:1!important;filter:none!important;background:#d7e1fb!important} #game #overlay .pro-skills button span{grid-column:1/-1;font-weight:900;line-height:1.1} #game #overlay .pro-skills button b{font-size:20px;line-height:1;color:#19459b} #game #overlay .pro-skills button small{font-size:10px;white-space:nowrap;color:#344d7b} #game #overlay .pro-help{font-size:13px!important;line-height:1.35;color:#becffa!important} #game #overlay .pro-message{margin:0!important;font-size:13px!important;line-height:1.25;color:#ffdf56!important;min-height:0} #game #overlay .pro-message:empty{display:none} #game #overlay .pro-footer{position:static;display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;box-shadow:none} #game #overlay .pro-footer button{margin:0;min-height:48px;font-size:18px!important;padding:8px 12px;width:100%} #game #overlay .pro-edit{display:grid;grid-template-columns:1fr 1fr;gap:12px} #game #overlay .pro-edit label:first-child{grid-column:1/-1} #game #overlay .pro-body label{display:grid;gap:5px;font-size:14px;font-weight:800;color:#d5e2ff;min-width:0} #game #overlay .pro-body :is(input,select,.gm-choice){width:100%;min-height:44px;box-sizing:border-box;padding:8px 10px;font-size:16px!important;margin:0} #game #overlay .pro-challenges{display:grid;grid-template-columns:1fr 1fr;gap:8px} #game #overlay .pro-challenges button{display:grid;gap:4px;text-align:left;padding:10px!important;min-height:64px} #game #overlay .pro-challenges button b{font-size:16px!important;line-height:1.1} #game #overlay .pro-challenges button span{font-size:12px} #game #overlay .pro-training-detail{display:grid;gap:8px;padding:12px;border:2px solid #627ed0;border-radius:14px;background:#122451} #game #overlay .pro-training-detail b{font-size:14px;color:#f3de79} #game #overlay .pro-play-intro{display:grid;gap:10px} #game #overlay .pro-pill{font-size:12px;font-weight:900;letter-spacing:.4px;color:#ffdd57} #game #overlay .pro-play-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px} #game #overlay .pro-club-card{display:grid;gap:8px;padding:12px;border:2px solid #748bcd;border-radius:14px;background:#173768} #game #overlay .pro-roster{display:grid;gap:6px} #game #overlay .pro-roster>div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:#1d3269;font-size:14px} #game #overlay .pro-join-club{display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px} #game #overlay .pro-result{display:grid;gap:14px;padding:20px 12px;border:2px solid #8295d6;border-radius:18px;background:#193063} #game #overlay .pro-result h3{font-size:32px!important;color:#ffe347!important} #game #overlay .pro-result-stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px;font-size:14px;color:#c3d8ff} #game #overlay .pro-live-summary{display:grid;gap:8px;padding:12px;border:2px solid #839ae0;border-radius:14px} #game #overlay.premium-panel .sp-home .home-modes{grid-template-columns:repeat(4,minmax(0,1fr))!important} #game #overlay.premium-panel .sp-home .home-modes .sp-tile b{font-size:clamp(16px,2.1cqw,27px)!important;left:8px;white-space:normal} #game #overlay.premium-panel .sp-home .sp-tile-pro{--sp-tile-art:radial-gradient(ellipse at 20% 0,#ffd572,#7d4012 70%);border-color:#ffdf7c!important} #game.pro-playing #style-button{display:none!important} @container pocket-screen (max-width:700px) or (max-height:560px){ #game #overlay .pro-screen{gap:8px} #game #overlay .pro-heading h2{font-size:24px!important} #game #overlay .pro-heading .eyebrow{font-size:10px!important} #game #overlay .pro-player-card{grid-template-columns:28px minmax(0,1fr) auto;padding:8px;gap:7px} #game #overlay .pro-body .pro-player-card h3{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay .pro-body .pro-player-card p{font-size:12px!important;line-height:1.2;white-space:nowrap} #game #overlay .pro-player-card b{display:block;font-size:11px;line-height:1.2} #game #overlay .pro-jersey{font-size:32px} #game #overlay .pro-skills{gap:6px} #game #overlay .pro-skills button{padding:6px!important;min-height:56px;font-size:12px!important} #game #overlay .pro-skills button span{font-size:12px!important} #game #overlay .pro-skills button b{font-size:18px!important} #game #overlay .pro-skills button:disabled small{display:none} #game #overlay .pro-body{gap:8px} #game #overlay .pro-body h3{font-size:22px!important} #game #overlay .pro-body p{font-size:14px!important} #game #overlay .pro-help{font-size:12px!important} #game #overlay .pro-body .pro-help{font-size:12px!important} #game #overlay .pro-training-detail h3{display:none} #game #overlay .pro-training-detail{padding:10px;gap:6px} } @container pocket-screen (min-width:701px) and (max-height:560px){ #game #overlay .pro-screen{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;column-gap:18px} #game #overlay .pro-heading{grid-column:1;grid-row:1} #game #overlay .pro-tabs{grid-column:2;grid-row:1} #game #overlay .pro-body{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px 18px} #game #overlay .pro-edit{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))} #game #overlay .pro-edit label:first-child{grid-column:auto} #game #overlay .pro-skills{grid-column:2;grid-row:1/4} #game #overlay .pro-message{grid-column:1;grid-row:3;align-self:center} #game #overlay .pro-footer{grid-column:2;grid-row:3} #game #overlay .pro-challenges{grid-column:1;grid-row:1/3} #game #overlay .pro-training-detail{grid-column:2;grid-row:1/3} #game #overlay .pro-result{grid-column:1/-1;padding:12px} } #game #overlay .audio-settings :is(.audio-switches,.audio-actions) button{width:100%;min-width:0;min-height:44px!important;margin:0!important;padding:8px 10px!important;font-size:14px!important} #game #overlay .audio-settings #song-title{margin:0!important;font-size:14px!important;line-height:1.25} #game #overlay .audio-settings .audio-mixer{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(64px,1fr));gap:7px!important;margin:0!important} #game #overlay .audio-settings .audio-channel{min-height:0;padding:6px 10px!important;gap:2px 8px;font-size:14px!important} #game #overlay .audio-settings .audio-channel input{height:44px!important;min-height:44px!important} @container pocket-screen (min-width:701px) and (max-height:560px){ #game #overlay .audio-settings .audio-mixer{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(64px,1fr)} #game .audio-settings{gap:7px} } /* ---- Rulesets: the first-launch chooser, the home switch and Pro-only touches ---- Pro (all-human, realistic) and Arcade (creature stars) share every screen; the chooser is the first thing a new player sees and never scrolls (ruleset.js). */ #game #overlay>.panel:has(.rs-welcome){height:100%;max-height:100%;overflow:hidden;padding:10px 12px 12px;width:min(100%,760px);max-width:760px} #game #overlay>.panel:has(.rs-welcome)::after{display:none!important} #game #overlay .rs-welcome{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;text-align:center} #game #overlay .rs-head{min-width:0} #game #overlay .rs-welcome .eyebrow{margin:0 auto 4px!important} #game #overlay .rs-welcome h1{margin:0!important;font-size:clamp(28px,8.4vw,40px)!important;line-height:1.02!important;-webkit-text-stroke:8px var(--sp-ink)} #game #overlay .rs-welcome h1 span{display:block;color:var(--sp-yellow)} #game #overlay .rs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:0} #game #overlay .rs-welcome .rs-card{--rs-ring:var(--sp-edge);position:relative;isolation:isolate;overflow:hidden;display:grid!important;grid-template-rows:minmax(0,1fr) auto;min-height:0;height:100%;width:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:20px!important;text-align:left;color:#fff;background:var(--rs-art)!important;box-shadow:0 0 0 1px var(--rs-ring),inset 0 0 0 2.5px rgba(255,255,255,.9),0 6px 0 var(--sp-base),var(--sp-lift)!important;transition:transform .12s ease-out,filter .15s,box-shadow .15s!important} #game #overlay .rs-welcome .rs-card{background:linear-gradient(180deg,#14245a,#0b1440)!important} #game #overlay .rs-welcome .rs-card::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.85);pointer-events:none} /* Pro: a night stadium, two light towers and the athlete standing on mown turf. */ #game #overlay .rs-welcome .rs-pro .rs-art{background: radial-gradient(9% 6% at 12% 7%,#fffef2 0 30%,rgba(255,250,220,.55) 60%,transparent 100%),radial-gradient(9% 6% at 88% 7%,#fffef2 0 30%,rgba(255,250,220,.55) 60%,transparent 100%), radial-gradient(60% 40% at 12% 0%,rgba(200,220,255,.28),transparent 70%),radial-gradient(60% 40% at 88% 0%,rgba(200,220,255,.28),transparent 70%), linear-gradient(180deg,transparent 0 79%,rgba(255,255,255,.75) 79% 79.8%,transparent 79.8%), repeating-linear-gradient(180deg,#2e8a4b 0 7px,#277b42 7px 14px) 0 100%/100% 21% no-repeat, linear-gradient(180deg,#0a1636 0%,#142b5c 48%,#1f4178 70%,#284f88 79%)} /* Arcade: the orange burst of the Play tile. */ #game #overlay .rs-welcome .rs-arcade .rs-art{background: repeating-conic-gradient(from 0deg at 50% 54%,rgba(255,255,255,.15) 0deg 5deg,transparent 5deg 14deg), radial-gradient(80% 70% at 50% 54%,#ffe46a 0%,#ffb21a 30%,#ff5a1f 60%,#c41236 100%)} #game #overlay .rs-welcome .rs-art{position:relative;min-height:0;display:block;overflow:hidden;border-radius:18px 18px 0 0} #game #overlay .rs-welcome .rs-art canvas.sp-star{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:112%;pointer-events:none} #game #overlay .rs-welcome .rs-copy{position:relative;display:grid;gap:2px;padding:9px 11px 11px;background:linear-gradient(180deg,#16275e,#0b1440);box-shadow:inset 0 2px 0 rgba(255,255,255,.22)} #game #overlay .rs-welcome .rs-copy small{font-family:var(--sp-ui);font-weight:900;font-size:12px;line-height:1.15;letter-spacing:.2px;color:var(--sp-yellow)} #game #overlay .rs-welcome .rs-copy b{font-family:var(--sp-display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.4px;color:#fff;-webkit-text-stroke:6px var(--sp-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--sp-ink)} #game #overlay .rs-welcome .rs-copy>span{font-family:var(--sp-ui);font-weight:800;font-size:12.5px;line-height:1.28;color:#e9f0ff} #game #overlay .rs-welcome .rs-check{position:absolute;z-index:2;top:9px;right:9px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sp-yellow);box-shadow:0 0 0 2.5px var(--sp-ink),0 3px 0 var(--sp-ink);opacity:0;transform:scale(.4);transition:opacity .15s,transform .18s cubic-bezier(.3,1.6,.5,1)} #game #overlay .rs-welcome .rs-check::before{content:'';width:12px;height:7px;margin-top:-3px;border:solid var(--sp-ink);border-width:0 0 3.5px 3.5px;transform:rotate(-45deg)} #game #overlay .rs-welcome .rs-card[aria-pressed=true]{--rs-ring:var(--sp-ink);transform:translateY(-2px);box-shadow:0 0 0 3px var(--sp-yellow),0 0 0 6px var(--sp-ink),0 0 24px 4px rgba(255,210,28,.55),0 8px 0 var(--sp-base)!important} #game #overlay .rs-welcome .rs-card[aria-pressed=true] .rs-check{opacity:1;transform:none} #game #overlay .rs-welcome .rs-cards:has([aria-pressed=true]) .rs-card[aria-pressed=false]{filter:saturate(.55) brightness(.78)} #game #overlay .rs-welcome .rs-card:active{transform:translateY(3px)!important} #game #overlay .rs-foot{display:grid;gap:8px} #game #overlay .rs-status{margin:0;font-weight:900;font-size:13px;line-height:1.25;color:#fff;text-shadow:0 2px 0 var(--sp-ink);min-height:1.25em} #game #overlay .rs-actions{display:grid;gap:8px} #game #overlay .rs-actions button{margin:0!important;min-height:50px;font-size:16px!important} #game #overlay .rs-returning .rs-actions button{min-height:54px;font-size:19px!important} @container pocket-screen (max-height:700px){ #game #overlay .rs-welcome{gap:8px} #game #overlay .rs-welcome .rs-copy{padding:7px 9px 9px} #game #overlay .rs-welcome .rs-copy b{font-size:26px} #game #overlay .rs-welcome .rs-copy>span{font-size:11.5px;line-height:1.22} #game #overlay .rs-actions button{min-height:46px;font-size:15px!important} } @container pocket-screen (max-width:649px) and (max-height:450px){ #game #overlay .rs-foot{gap:4px} #game #overlay .rs-foot>.compact-help{margin:0;font-size:11px;line-height:1.15} #game #overlay .rs-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #game #overlay .rs-actions button{min-height:40px;font-size:13px!important} } /* Landscape phones: the question and the buttons on the left, the two cards on the right. */ @container pocket-screen (min-width:650px) and (max-height:450px){ #game #overlay>.panel:has(.rs-welcome){width:100%;max-width:980px;padding:13px 14px 10px} #game #overlay .rs-welcome{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;text-align:left} #game #overlay .rs-head{grid-column:1;grid-row:1;align-self:end} #game #overlay .rs-welcome .eyebrow{margin:0 0 4px 6px!important} #game #overlay .rs-welcome h1{font-size:32px!important} #game #overlay .rs-foot{grid-column:1;grid-row:2;align-self:start} #game #overlay .rs-cards{grid-column:2;grid-row:1/3} #game #overlay .rs-welcome .rs-copy b{font-size:24px} #game #overlay .rs-welcome .rs-copy>span{font-size:11px} #game #overlay .rs-actions button{min-height:44px;font-size:14px!important} } /* Home switch: a two-way track under the logo; each side names its ruleset in a line. It follows the logo in the markup too, so Tab order matches the screen (first focus: data-menu-primary on a tile). The inline copy on a mode screen (rulesetSwitchHTML inline: franchise, league, online) shares these rules at the home switch's weight; its buttons carry the mode's own attribute, so its icons go by position. franchise-ui.css and league-ui.css load before this file (online-ui.css after): to adjust it from any of them, add a class (#game #overlay .x .sp-ruleset.rs-inline button) and !important where these rules use it. */ #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:4px;margin:0;border-radius:16px;background:rgba(4,11,48,.5);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.14)} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;align-content:center;min-height:46px;margin:0!important;padding:4px 8px 4px 7px!important;border:0!important;border-radius:12px!important;text-align:left;background:transparent!important;box-shadow:none!important;color:#c8d8ff;transition:background .15s,box-shadow .15s,transform .07s} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button i{grid-row:1/3;width:24px;height:22px;background:center/contain no-repeat;opacity:.75} #game #overlay :is(.sp-home .sp-ruleset button[data-ruleset-switch=pro],.sp-ruleset.rs-inline button:first-child) i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cpath d='M8 44C6 22 22 6 42 6s34 14 32 34c-1 10-8 16-16 16H46l-4 10H22c-8 0-13-10-14-22z' fill='%231d3561' stroke='%230b1130' stroke-width='5'/%3E%3Cpath d='M40 6c3 14 3 30 0 50' stroke='%23d9dee6' stroke-width='6' fill='none'/%3E%3Cpath d='M52 40h24M50 50h24M60 34v26M70 36v22' stroke='%23d7dde3' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='30' cy='36' r='6' fill='%230b1130'/%3E%3C/svg%3E")} #game #overlay :is(.sp-home .sp-ruleset button[data-ruleset-switch=arcade],.sp-ruleset.rs-inline button:last-child) i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l2.9 6.4 7 .7-5.2 4.7 1.5 6.9L12 17l-6.2 3.5 1.5-6.9L2.1 8.9l7-.7z' fill='%23ffd21c' stroke='%230b1130' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) b{font-family:var(--sp-display);font-weight:400;font-size:17px;line-height:1.05;letter-spacing:.4px;color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(8,14,48,.7)} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) small{font-family:var(--sp-ui);font-weight:800;font-size:11px;line-height:1.15;letter-spacing:.2px;color:#b9cbf3;white-space:nowrap} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button[aria-checked=true]{background:linear-gradient(180deg,#fff 0%,#e8f0ff 100%)!important;box-shadow:0 0 0 2.5px var(--sp-yellow),0 3px 0 var(--sp-base)!important;color:var(--sp-ink)} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button[aria-checked=true] i{opacity:1} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button[aria-checked=true] b{color:var(--sp-ink);text-shadow:none} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button[aria-checked=true] small{color:#34416f} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button:active{transform:translateY(2px)} #game #overlay :is(.sp-home .sp-ruleset,.sp-ruleset.rs-inline) button:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--sp-yellow)!important} /* Inline: a solid track, so it reads on the light franchise cards as on the dark panels, and its own text (franchise cards recolour every small inside them, the arena uppercases and shadows its buttons, both at more weight than these rules). The subtitle runs under the icon and name, so it fits a narrow card on one line (and wraps evenly on a narrower one). */ #game #overlay .sp-ruleset.rs-inline{margin:6px 0;background:linear-gradient(180deg,#16306e,#0b1a4a)} #game #overlay .sp-ruleset.rs-inline :is(button,b,small){text-transform:none!important} #game #overlay .sp-ruleset.rs-inline :is(button,small){text-shadow:none!important} #game #overlay .sp-ruleset.rs-inline button i{grid-row:1} #game #overlay .sp-ruleset.rs-inline b{color:#fff!important} #game #overlay .sp-ruleset.rs-inline small{grid-column:1/3;white-space:normal;text-wrap:balance;color:#b9cbf3!important} #game #overlay .sp-ruleset.rs-inline button[aria-checked=true] b{color:var(--sp-ink)!important} #game #overlay .sp-ruleset.rs-inline button[aria-checked=true] small{color:#34416f!important} /* PRO / ARCADE badges (rulesetTagHTML) and the one-line explainer under a rules choice. The badge keeps to single classes so a mode's stylesheet can place or size it. The explainer brings its own navy (the switch track's), because panels colour their text per paragraph: inherited ink read dark on the league's blue. To adjust it from a mode stylesheet, add a class likewise: #game #overlay .x .rs-line. */ .rs-tag{display:inline-block;vertical-align:middle;padding:2px 6px 1px;border-radius:7px;font-family:var(--sp-display);font-style:normal;font-weight:400;font-size:10px;line-height:1.2;letter-spacing:.5px;white-space:nowrap} .rs-tag-pro{color:#fff;background:#1d3561;box-shadow:0 0 0 1.5px #c9d1dc} .rs-tag-arcade{color:var(--sp-ink);background:linear-gradient(180deg,var(--sp-yellow-hi),var(--sp-yellow));box-shadow:0 0 0 1.5px var(--sp-ink)} #game #overlay .rs-line{margin:6px 0 2px;padding:6px 10px;border-radius:10px;background:#10225a;font-family:var(--sp-ui);font-weight:800;font-size:12.5px;line-height:1.35;color:#e3ebff;text-align:left;text-shadow:none} /* Modes that still play Arcade rules while Pro is selected carry a small tag. */ #game #overlay.premium-panel .sp-home .sp-tile .sp-rules-tag{position:absolute;z-index:2;top:10px;right:7px;padding:2px 5px 1px;border-radius:7px;font-family:var(--sp-display);font-style:normal;font-size:9.5px;letter-spacing:.4px;color:var(--sp-ink);background:linear-gradient(180deg,#fff27a,#ffd21c);box-shadow:0 0 0 2px var(--sp-ink)} /* Pro home: a calmer night-stadium Play tile behind a human quarterback. */ html[data-ruleset=pro] #game #overlay.premium-panel .sp-home .sp-tile-play{--sp-tile-art: radial-gradient(4% 7% at 60% 9%,#fffef2 0 30%,rgba(255,250,220,.5) 60%,transparent 100%),radial-gradient(4% 7% at 94% 9%,#fffef2 0 30%,rgba(255,250,220,.5) 60%,transparent 100%), radial-gradient(30% 40% at 77% 0%,rgba(200,220,255,.22),transparent 72%), repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.14) 9% 9.6%) 0 100%/100% 30% no-repeat, repeating-linear-gradient(180deg,#2f8a4c 0 8px,#287c43 8px 16px) 0 100%/100% 30% no-repeat, linear-gradient(180deg,#0c1a3e 0%,#18336a 52%,#224a82 70%,#1b3b6a 100%)} #game:not(.started) header .wordmark small:not(:empty){display:block;margin-top:1px;font-family:var(--sp-ui);font-size:8.5px;font-weight:900;letter-spacing:2.2px;color:#b9cbf3;-webkit-text-stroke:0;text-shadow:none} /* Phones: the switch takes its own row under the logo; the tiles give up the height. */ @container pocket-screen (max-width:699px) or (max-height:450px){ #game #overlay.premium-panel .sp-home{grid-template-rows:auto auto minmax(0,1fr) auto} } /* Narrow cells (small portrait phones, the landscape left column): a smaller icon and subtitle. */ @container pocket-screen (max-width:380px) or ((min-width:650px) and (max-height:450px)){ #game #overlay .sp-home .sp-ruleset small{font-size:10.5px;letter-spacing:0} #game #overlay .sp-home .sp-ruleset button{column-gap:6px;padding:4px 6px!important} #game #overlay .sp-home .sp-ruleset button i{width:20px;height:20px} } /* Landscape phones: logo, switch and the utility bars share the left column. The bars fill only what the switch leaves (each up to 40px, shorter on 360-375px screens) so they can never ride up over Arcade. */ @container pocket-screen (min-width:650px) and (max-height:450px){ #game #overlay.premium-panel .sp-home{grid-template-rows:auto auto minmax(0,1fr)} #game #overlay.premium-panel .sp-home .sp-ruleset{grid-column:1;grid-row:2;grid-template-columns:1fr} #game #overlay.premium-panel .sp-home .sp-ruleset button{min-height:42px} #game #overlay.premium-panel .sp-home .home-actions{grid-row:1/4} #game #overlay.premium-panel .sp-home .home-dock{grid-row:3;align-self:stretch;min-height:0;grid-auto-rows:minmax(0,40px);align-content:end} #game #overlay.premium-panel .sp-home .home-dock button{min-height:0;height:100%} } /* Short landscape below 650px wide (640x360): the switch gets its own row under the logo (the empty eyebrow row once put it above), stacked so each subtitle fits; the bars stay at the bottom. */ @container pocket-screen (max-width:649px) and (max-height:450px){ #game #overlay.premium-panel .sp-home{grid-template-rows:auto auto auto minmax(0,1fr)} #game #overlay.premium-panel .sp-home .sp-ruleset{grid-column:1;grid-row:3;grid-template-columns:1fr} #game #overlay.premium-panel .sp-home .home-actions{grid-row:1/5} #game #overlay.premium-panel .sp-home .home-dock{grid-row:4} } @container pocket-screen (min-width:650px) and (max-height:400px){ #game #overlay.premium-panel .sp-home{row-gap:6px!important} #game #overlay.premium-panel .sp-home h1.sp-logo{font-size:28px!important} #game #overlay.premium-panel .sp-home .sp-ruleset{gap:4px;padding:3px} #game #overlay.premium-panel .sp-home .sp-ruleset button{min-height:36px;padding:2px 6px!important} #game #overlay.premium-panel .sp-home .sp-ruleset b{font-size:15px} } @media(min-width:760px) and (min-height:520px){ #game #overlay.premium-panel .sp-home h1.sp-logo{grid-column:1} #game #overlay.premium-panel .sp-home .sp-ruleset{grid-column:2;grid-row:1;align-self:center} } /* "Franchise / Online plays Arcade rules" while Pro is picked at home (phases 3-4 bring Pro there). */ #game #overlay :is(.rules-note,.on-rules-note){display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:4px 0 10px!important;padding:8px 12px 8px 36px!important;position:relative;border-radius:12px;background:rgba(8,14,48,.55);box-shadow:inset 0 0 0 2px var(--sp-yellow);font-family:var(--sp-ui);font-weight:800;font-size:12.5px!important;line-height:1.3;color:#dfe8ff!important;text-align:left} #game #overlay :is(.rules-note,.on-rules-note)::before{content:'';position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l2.9 6.4 7 .7-5.2 4.7 1.5 6.9L12 17l-6.2 3.5 1.5-6.9L2.1 8.9l7-.7z' fill='%23ffd21c' stroke='%230b1130' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} #game #overlay :is(.rules-note,.on-rules-note) b{font-family:var(--sp-display);font-weight:400;font-size:15px;letter-spacing:.3px;color:var(--sp-yellow)!important} /* Help has six pages with Rules: on a phone the page tabs sit in two rows of three. */ @container pocket-screen (max-width:520px){#game #overlay .controls-pages:has(>button:nth-child(6)){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}#game #overlay .controls-pages:has(>button:nth-child(6)) button{min-width:0;padding:8px 3px!important}} /* Landscape Options: a wider panel of four columns, so each page takes two rows at most (Gameplay has eight buttons with RULESET) and nothing runs under BACK on a 360-375px screen; TIMEOUT takes a cell, not a row. */ @container pocket-screen (min-width:560px) and (max-height:450px){#game #overlay>.panel:has(.options-fit){width:100%;max-width:760px}#game #overlay .options-fit .options-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#game #overlay .options-fit header .compact-help{display:none}#game #overlay .options-fit[data-tab=play] .options-grid .secondary:last-child{grid-column:auto}} /* "EXHIBITION · PRO" and "CUSTOM EXHIBITION · PRO" stay one ribbon next to Back. */ #game #overlay.exhibition-panel .gs-top>div{min-width:0} #game #overlay.exhibition-panel .gs-top .eyebrow{white-space:nowrap} /* Landscape: the Arcade-rules note costs the Franchise choice cards some height, never the BACK button. */ @container pocket-screen (max-height:450px){ #game #overlay .panel:has(>.rules-note){padding-top:6px;padding-bottom:6px} #game #overlay .panel:has(>.rules-note)>h2{margin:0 0 4px!important} #game #overlay .rules-note{margin:2px 0 6px!important;padding:5px 12px 5px 36px!important} #game #overlay .panel:has(>.rules-note) .kick-choice-grid{margin:0 0 8px} #game #overlay .panel:has(>.rules-note) .kick-choice-grid>button{min-height:0!important;padding-top:12px!important;padding-bottom:12px!important} } /* A saved game in the other ruleset says so ("PRO · Q2 3:12 · 7–3"); the line never breaks inside the score. */ #game #overlay.premium-panel .sp-home #resume-save span{white-space:nowrap} /* Phone grid: the saved-game button centres its two lines (label, then "PRO · Q2 3:12 · 7–3") like PLAY AGAIN beside it. */ @container pocket-screen (max-width:699px){#game #overlay.premium-panel .sp-home #resume-save{justify-content:center;text-align:center;column-gap:6px}} /* Pro benches hold two human coaches: two wider cells, centred, so "Professor Linden" reads in full. */ #game #overlay.exhibition-panel .gs-exhibition[data-ruleset=pro] .coach-choices{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,380px);margin-inline:auto} /* Options RULESET names what the pick means (its subtitle); short landscape cells keep the label only. */ #game #overlay .options-fit #options-ruleset small{display:block;margin-top:3px;font-family:var(--sp-ui);font-weight:800;font-size:11.5px;line-height:1.15;letter-spacing:.2px;text-transform:none;text-shadow:none;color:#d6e2ff} @container pocket-screen (max-height:450px){#game #overlay .options-fit #options-ruleset small{display:none}} /* Help: "CONTROLS · 6/6" stays one ribbon beside Back (it broke after CONTROLS on phones). */ #game #overlay.field-choice-panel:has(.controls-pages) .huddle-top>div{min-width:0} #game #overlay.field-choice-panel:has(.controls-pages) .huddle-top .eyebrow{white-space:nowrap} /* The Arcade-rules notes span the panel like the cards under them (landscape shrank them to their text). */ #game #overlay :is(.rules-note,.on-rules-note){box-sizing:border-box;width:100%;max-width:none!important} /* Help lessons scroll inside the panel (the page never does): six pages of rows ran past the panel and under the locked overlay on phones, most of all the Rules page. Head, tabs and REMAP stay put. */ #game #overlay.field-choice-panel:has(.controls-pages)>.panel{display:flex!important;flex-direction:column;min-height:0;max-height:100%} #game #overlay.field-choice-panel:has(.controls-pages)>.panel>*{flex-shrink:0} #game #overlay.field-choice-panel:has(.controls-pages)>.panel>.control-lessons{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px} @container pocket-screen (max-height:450px){ #game #overlay.field-choice-panel:has(.controls-pages)>.panel{padding-top:8px!important;padding-bottom:8px!important} #game #overlay.field-choice-panel:has(.controls-pages) .huddle-top{margin-bottom:6px!important} #game #overlay.field-choice-panel:has(.controls-pages) .huddle-top h2{font-size:26px!important;margin:0!important;line-height:1.05} } /* Landscape home: the Quick Start ring and the logo clear the app header by a few pixels. */ @container pocket-screen (min-width:650px) and (max-height:450px){#game #overlay.premium-panel .sp-home{padding-top:11px!important}} /* Release Notes: one bounded reading surface, with navigation always reachable. */ html.rn-reading,body.rn-reading,#game.rn-reading,#game #overlay.release-notes-panel,#game #overlay.release-notes-panel>.panel{touch-action:pan-y} #game #overlay.release-notes-panel{padding:calc(env(safe-area-inset-top) + 48px) 12px calc(env(safe-area-inset-bottom) + 12px);overflow:hidden} #game #overlay.release-notes-panel>.panel{box-sizing:border-box;width:min(860px,100%);max-width:860px;height:100%;max-height:860px;min-height:0;padding:16px;overflow:hidden;display:flex;flex-direction:column;background:#101c38;color:#f4f7ff;border-radius:18px} /* The generic controller hint was a second footer stealing the short screen's reading area. */ #game:is([data-input=pad],[data-input=keyboard]) #overlay.release-notes-panel.active>.panel::after{display:none;content:none} #game #overlay.release-notes-panel .rn-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;flex:1;min-height:0;min-width:0;text-align:left;text-shadow:none} #game #overlay.release-notes-panel .rn-updated{font-size:16px!important;line-height:1.35;color:#d4e2fa!important;margin:4px 0 0!important;overflow-wrap:anywhere} #game #overlay.release-notes-panel .rn-header h2{font-size:28px;margin:0!important} #game #overlay.release-notes-panel .rn-history{min-height:0;min-width:0;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;user-select:text;padding:4px 14px 12px 8px;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#b9cbea #243453;background:#101c38;border-block:1px solid #91a6cc} #game #overlay.release-notes-panel .rn-history::-webkit-scrollbar{width:10px} #game #overlay.release-notes-panel .rn-history::-webkit-scrollbar-track{background:#243453} #game #overlay.release-notes-panel .rn-history::-webkit-scrollbar-thumb{background:#b9cbea;border:2px solid #243453;border-radius:8px} #game #overlay.release-notes-panel .rn-history:focus-visible{outline:2px solid #ffd23f!important;outline-offset:-2px} #game #overlay.release-notes-panel article{padding:16px 0;border-bottom:1px solid #91a6cc;overflow-wrap:anywhere} #game #overlay.release-notes-panel article:first-child{padding-top:8px} #game #overlay.release-notes-panel article time{font-size:16px;color:#d4e2fa;line-height:1.4} #game #overlay.release-notes-panel article h3{font-size:23px;color:#fff;margin:8px 0;line-height:1.3;-webkit-text-stroke:0;font-family:var(--sp-ui)!important;font-weight:800!important;letter-spacing:0} #game #overlay.release-notes-panel article ul{margin:0;padding-left:24px;color:#f4f7ff;font-size:18px;line-height:1.55} #game #overlay.release-notes-panel article li{color:#f4f7ff;font-size:18px;line-height:1.55} #game #overlay.release-notes-panel article li+li{margin-top:10px} #game #overlay.release-notes-panel .rn-metadata{padding-top:12px;overflow-wrap:anywhere} #game #overlay.release-notes-panel .rn-metadata summary{min-height:44px;align-content:center;font-size:18px;color:#f4f7ff;cursor:pointer;touch-action:pan-y} #game #overlay.release-notes-panel .rn-metadata p{font-size:16px;color:#d4e2fa;line-height:1.5;margin:8px 0} #game #overlay.release-notes-panel .rn-metadata summary:focus-visible{outline:2px solid #ffd23f;outline-offset:-2px} #game #overlay.release-notes-panel .rn-scroll-hint{font-size:15px!important;color:#d4e2fa!important;line-height:1.3;margin:0 0 6px!important;text-align:center} #game #overlay.release-notes-panel .rn-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:7px} #game #overlay.release-notes-panel .rn-footer button{min-width:0;min-height:48px;margin:0;padding:8px!important;font-size:18px!important;touch-action:manipulation} #game #overlay.premium-panel .sp-home .home-dock #home-release-notes{min-height:44px} @container pocket-screen (min-width:650px) and (max-height:450px){ #game #overlay.premium-panel .sp-home .home-dock #home-release-notes{min-height:0} } @media(max-width:480px),(max-height:450px){ #game #overlay.release-notes-panel{padding-inline:8px;padding-bottom:calc(env(safe-area-inset-bottom) + 8px)} #game #overlay.release-notes-panel>.panel{padding:10px} #game #overlay.release-notes-panel .rn-shell{gap:6px} #game #overlay.release-notes-panel .rn-header h2{font-size:26px} } #game .audio-booth-mode{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;color:#fff;font-size:14px} #game .audio-booth-mode select{min-height:44px;max-width:100%;padding:6px 8px;font:inherit} #game #overlay .audio-booth-mode small{grid-column:1/-1;font-size:12px;line-height:1.25} #defense-lesson-card{position:absolute;z-index:25;top:calc(135px + env(safe-area-inset-top));left:12px;right:12px;max-width:440px;margin:auto;padding:10px 12px;background:rgba(14,20,50,.94);color:white;border:2px solid #f2cc66;border-radius:12px;pointer-events:none} #defense-lesson-card p{margin:0;font-size:14px;line-height:1.35;font-weight:800} #defense-lesson-card button{pointer-events:auto;margin-top:6px;padding:7px 10px;font-size:12px;border-radius:8px} #game .defense-lesson-target{outline:4px solid #fff!important;outline-offset:3px;box-shadow:0 0 0 7px #f2cc66!important} /* Feedback remains a full touch target before a match as well as during play. */ @media(max-width:480px){#game>header #header-feedback{min-height:44px}} /* Keep optional feedback between primary actions and the postgame detail scroll. */ .postgame-feedback{box-sizing:border-box;width:100%;padding:10px 14px;border:1px solid #ffffff45;border-radius:12px;background:#072d6080;color:#fff;flex-shrink:0} .postgame-feedback h3{font-size:16px;margin:0 0 8px} .postgame-feedback button{min-height:44px;margin:3px;font-size:14px} .postgame-feedback textarea{display:block;box-sizing:border-box;width:100%;max-height:100px;font-size:16px;color:#12253b;background:#fff;border-radius:6px;padding:8px} .postgame-feedback label{display:block;font-size:13px;margin-top:6px} .postgame-feedback p{font-size:12px;margin:6px 0;overflow-wrap:anywhere} .postgame-feedback form[hidden]{display:none} /* The Pro Clubs career stays inside the game screen, with a fixed action row. */ #game #overlay .pro-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} #game #overlay .pro-tabs button{font-size:14px!important} #game #overlay .pro-body>div,#game #overlay .pro-body>article,#game #overlay .pro-body>label{flex-shrink:0} #game #overlay .pro-hub-scene{padding:16px;border:2px solid #8298d7;border-radius:16px;background:linear-gradient(90deg,rgba(12,25,53,.92),rgba(12,25,53,.72)),url('/franchise/clubhouse.webp') center 38%/cover} #game #overlay .pro-career-strip{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;padding:10px 12px;background:#102343;border:1px solid #5873b2;border-radius:12px;font-size:12px;color:#c4d8ff} #game #overlay .pro-career-strip b{color:#ffe575;flex-basis:100%} #game #overlay .pro-flex{grid-template-columns:24px 1fr;align-items:center;gap:9px;padding:8px;border:1px solid #7890ce;border-radius:10px} #game #overlay .pro-flex input{width:22px;min-height:22px;height:22px;margin:0;accent-color:#ffd838} #game #overlay .pro-flex span{font-size:13px;line-height:1.3} #game #overlay .pro-mastery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} #game #overlay .pro-mastery button{display:grid;gap:5px;min-width:0;padding:8px 3px!important;text-align:center;background:#1b386a!important} #game #overlay .pro-mastery b{color:#ffe474;font-size:18px} #game #overlay .pro-mastery span,#game #overlay .pro-mastery small{font-size:9px;color:#e1ebff} #game #overlay .pro-mastery progress{width:100%;height:6px;accent-color:#ffd83b} #game #overlay .pro-wallet{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:5px 14px;padding:16px;background:linear-gradient(120deg,#254e7a,#1c2853);border:2px solid #dbbb53;border-radius:16px;color:#ffe475} #game #overlay .pro-wallet b{font-size:38px;line-height:1} #game #overlay .pro-wallet span{font-size:13px;font-weight:900} #game #overlay .pro-wallet small{grid-column:1/-1;color:#cddffd} #game #overlay .pro-contracts,#game #overlay .pro-reward-locker{display:grid;gap:8px} #game #overlay :is(.pro-contracts,.pro-reward-locker)>article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;background:#17305b;border:1px solid #6484bf;border-radius:12px} #game #overlay :is(.pro-contracts,.pro-reward-locker) article>div{display:grid;gap:5px} #game #overlay :is(.pro-contracts,.pro-reward-locker) b{font-size:15px;color:#f1f5ff} #game #overlay :is(.pro-contracts,.pro-reward-locker) p{font-size:12px!important;color:#c6d8f5!important} #game #overlay :is(.pro-contracts,.pro-reward-locker) span{font-size:11px;color:#ffe077} #game #overlay :is(.pro-contracts,.pro-reward-locker) button{width:auto;font-size:11px!important;padding:8px!important} #game #overlay .pro-leaderboard{display:grid;gap:7px} #game #overlay .pro-leaderboard article{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;background:#153664;border:1px solid #5c80c1;border-radius:10px;color:#eff4ff} #game #overlay .pro-leaderboard article>div{display:grid;gap:4px;min-width:0} #game #overlay .pro-leaderboard strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #game #overlay .pro-leaderboard span{font-size:11px;color:#b8d1f5} #game #overlay .pro-leaderboard em{font-style:normal;font-weight:900;color:#ffdf79} #game #overlay .pro-result-earnings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #game #overlay .pro-result-earnings>div{display:grid;gap:5px;text-align:center;padding:14px 4px;background:#0c2148;border:1px solid #627fb7;border-radius:12px} #game #overlay .pro-result-earnings b{font-size:26px;color:#ffe475} #game #overlay .pro-result-earnings span{font-size:10px;color:#c5daf9;font-weight:900} #game #overlay .pro-level-up{padding:8px 12px;background:#ffe26b;border-radius:9px;color:#162747!important;font-weight:900;text-align:center} @container pocket-screen (min-width:701px){ #game #overlay .pro-tabs{grid-template-columns:repeat(6,minmax(0,1fr))} #game #overlay .pro-career-strip b{flex-basis:auto} #game #overlay .pro-contracts,#game #overlay .pro-reward-locker{grid-column:1/-1} } @container pocket-screen (max-height:440px){ #game #overlay .pro-tabs button{min-height:36px;font-size:12px!important} #game #overlay .pro-heading h2{font-size:20px!important} #game #overlay .pro-footer button{min-height:40px;font-size:14px!important} #game #overlay .pro-screen{gap:5px} } /* Plain surfaces without decorative colored left rails. */ #game :is(.fr-clubhouse-news,.fr-season-target,.mp-takeaway,.mp-broadcast-dock,.story-objective,.story-card-chip,.story-focus p,#as-cloud-choice,#as-account-choice){border-left:0!important} #game .story-focus p{background:#ffffff12} #game .story-card-chip{background:#0f2233e6;border-radius:12px} /* RB and TE share the face-pad finish and sit within the right thumb's reach. */ #game.started :is(#rb-pass,#te-pass){top:0;bottom:auto;left:auto;right:0;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(70,84,150,.92) 0%,rgba(22,30,74,.92) 62%,rgba(11,17,48,.94) 100%);border:1px solid #bdd4e680;box-shadow:0 3px 0 #081725;color:#f3f5f9} #game.started #te-pass{left:0;right:auto} @media(max-width:759px){ #game #overlay.mobile-pages{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));touch-action:manipulation} #game #overlay.mobile-pages>.panel{max-height:100%!important;height:100%!important;overflow:hidden!important;justify-content:flex-start!important} #game #overlay#overlay.mobile-pages .mobile-page-branch{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important} #game #overlay#overlay.mobile-pages>.panel [data-mobile-page-hidden]{display:none!important} #game #overlay .mobile-menu-pager{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:16px;right:16px;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:10px;padding:6px;background:#142d3f;border:1px solid #829ba7;border-radius:14px;z-index:10} #game #overlay .mobile-menu-pager button{min-height:44px;margin:0;padding:10px;font-size:14px;line-height:20px} #game #overlay .mobile-menu-pager span{text-align:center;color:#f4f7fa;font-size:13px} } @media(max-width:759px){ #game #overlay#overlay.mobile-pages .mobile-page-branch>*{flex-shrink:0!important} #game #overlay#overlay.mobile-pages .sp-tile{height:auto!important;min-height:88px!important} #game #overlay#overlay.mobile-pages .sp-tile-play{min-height:116px!important} #game #overlay#overlay.mobile-pages .home-modes{height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:88px!important} #game #overlay#overlay.mobile-pages .ex-versus{display:none!important} } @media(min-width:760px){#game #overlay.field-choice-panel>.panel:has(.control-setting){overflow-y:auto!important}} @media(max-width:759px){ #game #overlay.mobile-pages :is(.rn-scroll-hint,#rn-newer,#rn-older){display:none!important} #game #overlay.mobile-pages .rn-footer{display:flex;justify-content:flex-end} } @media(max-width:600px) and (max-height:650px){ #game #overlay #character-select .gs-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px} #game #overlay #character-select .gs-top>div{display:contents} #game #overlay #character-select .gs-top .eyebrow{grid-column:1;font-size:11px!important} #game #overlay #character-select .gs-top h2{grid-column:1/-1;grid-row:2} #game #overlay #character-select .gs-top .game-back{grid-column:2;grid-row:1;padding:6px 10px!important;min-width:0} #game #overlay #character-select .cs-detail h3{font-size:20px!important;margin:0!important} #game #overlay #character-select .cs-detail .cs-bar{gap:3px!important;grid-template-columns:58px minmax(0,1fr) 12px!important} #game #overlay #character-select .cs-detail .cs-bar>b{font-size:10px!important;line-height:1!important} #game #overlay #character-select .cs-detail .cs-bar>i{height:6px!important} #game #overlay #character-select .cs-detail .cs-bars{padding:3px 5px!important;gap:1px!important} } @media(max-width:600px) and (max-height:650px){ #game #overlay .cs-player-details .cs-detail{grid-template-columns:1fr;gap:6px;padding:8px} #game #overlay .cs-player-details .cs-detail-art{display:none} #game #overlay .cs-player-details .cs-detail-copy{gap:4px} #game #overlay .cs-player-details .cs-detail h3{font-size:24px!important} #game #overlay .cs-player-details .cs-rating-guide{font-size:11px!important;line-height:1.3!important;margin:0!important} } /* The option-route read is essential instruction on the blue field panel. */ #game #overlay #option-route-help{color:#edf4ff;font-size:14px!important;line-height:1.4;text-shadow:0 1px 0 #071332;} /* Keep the home focused on playing; secondary tools have their own screen. */ #game #overlay.premium-panel .sp-home .home-dock{display:flex!important;justify-content:flex-end;align-items:center;min-height:44px;gap:0} #game #overlay.premium-panel .sp-home #home-more{width:auto;height:44px;min-height:44px;padding:8px 18px!important;color:#fff!important;text-shadow:none!important;background:#142d3fcc!important;border:1px solid #ffffff60!important;box-shadow:none!important} #game #overlay .home-utilities{display:flex;flex-direction:column;gap:16px} #game #overlay .home-utility-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #game #overlay .home-utility-choices button{min-height:48px;margin:0;font-size:14px;padding:10px} @media(max-width:360px){#game #overlay .sp-home .sp-ruleset small{white-space:normal;line-height:1.1}} #game #overlay:has([data-assignment-choice]) .compact-help{color:#edf4ff;font-size:14px!important;line-height:1.4;text-shadow:0 1px 2px #07152b} #game.rookie-hud #hot-routes-button[data-defender-assignments=true]{display:block!important} @media(orientation:portrait){ #game.started #hot-routes-button[data-defender-assignments=true]{left:calc(50% - 50px);right:auto;width:100px;box-sizing:border-box;padding-inline:4px;font-size:11px} } #game.tackle-lab .pad.circle{display:none!important} #game #overlay.playbook-panel.play-filter-panel .panel button[data-assignment-choice=reset],#game #overlay.playbook-panel.play-filter-panel .panel button[data-assignment-select][aria-pressed=true]{color:#14253f!important;text-shadow:none!important} @media(max-width:360px) and (max-height:650px){ #game #overlay.play-filter-panel [data-assignment-choice]{min-height:60px!important;padding-block:8px!important} #game #overlay.play-filter-panel [data-assignment-select]{min-height:48px!important;padding-block:6px!important} #game #overlay:has([data-assignment-choice]) .compact-help{margin-block:4px} } /* Runner tradeoffs stay visible beside the rating bars on compact squad cards. */ #character-select .cs-runner-hint{display:block;font-size:11px;line-height:1.2;margin:5px 0;font-weight:800;color:#fff} @media(max-width:360px),(max-height:620px) and (max-width:600px){#character-select .cs-detail-copy .cs-meta{display:none}#character-select .cs-runner-hint{font-size:9px;margin:1px 0}} /* Floating playstyle crests share the field instead of covering it with a menu. */ #arcade-style-trial{position:absolute;z-index:24;top:calc(60px + env(safe-area-inset-top,0px));left:12px;right:64px;width:auto;max-width:264px;margin:0 auto;padding:0;border:0;background:none;color:#fff;box-sizing:border-box;filter:drop-shadow(0 3px 3px #06102180)} #arcade-style-trial[hidden]{display:none} #game #arcade-style-trial header{display:flex;align-items:center;gap:4px;height:38px;position:static;padding:0;background:linear-gradient(90deg,#081827ed,#081827b8)!important;border-radius:8px} #arcade-style-trial .trial-reps{flex:1;padding-left:10px;font:900 9px/1 Arial,sans-serif;letter-spacing:1.4px} #arcade-style-trial .trial-reps b{color:#fff} #arcade-style-trial .trial-reps>span{display:flex;gap:4px;margin-top:5px} #arcade-style-trial .trial-reps i{height:3px;width:16px;background:#6d7b8a;border-radius:2px} #arcade-style-trial .trial-reps .charged{background:#ffcf66;box-shadow:0 0 5px #f58528} #arcade-style-trial button{margin:0;min-height:44px;min-width:44px;touch-action:manipulation;box-sizing:border-box} #arcade-style-trial header button{padding:0;width:44px;border:0;border-radius:8px;background:transparent;color:#fff;font:500 26px/1 Arial,sans-serif} #arcade-style-trial button:focus-visible{outline:2px solid white;outline-offset:2px} #arcade-style-trial .trial-players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:5px} #arcade-style-trial .trial-token{position:relative;min-width:0;padding:0 0 5px;border:0;border-radius:9px;background:linear-gradient(0deg,#061324f5,transparent 80%);color:#ced9e5;font:800 10px/1.15 Arial,sans-serif;text-align:center;isolation:isolate} #arcade-style-trial .trial-token-art{display:block;height:58px} #arcade-style-trial .trial-emblem{display:block;position:relative;width:58px;height:58px;margin:auto} #arcade-style-trial .trial-crest{position:absolute;inset:6px;display:grid;place-items:center;clip-path:polygon(50% 0,96% 23%,96% 72%,50% 100%,4% 72%,4% 23%);background:linear-gradient(150deg,#d2e6ed,#59738b 48%,#132739 49%,#8ca5b7);padding:3px} #arcade-style-trial .trial-crest svg{width:100%;height:100%;background:#122b40;clip-path:inherit;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round} #arcade-style-trial .trial-token b,#arcade-style-trial .trial-token small{display:block;white-space:nowrap} #arcade-style-trial .trial-token small{font-size:8px;letter-spacing:1px;margin-top:3px;color:#c4d5e1} #arcade-style-trial .trial-token[aria-pressed=true]{color:#fff;box-shadow:inset 0 -2px #ffdc80} #arcade-style-trial .trial-fire{position:absolute;inset:-10px -4px 0;width:66px;height:68px;fill:#ff6a13;opacity:0;transform-origin:50% 90%;filter:drop-shadow(0 0 5px #ff852b)} #arcade-style-trial .trial-flame-core{fill:#ffe68c} #arcade-style-trial .is-hot .trial-fire{opacity:1;animation:trial-burn 1.3s ease-in-out infinite alternate} #arcade-style-trial .is-hot .trial-crest{background:linear-gradient(145deg,#fff5c7,#ffcf56 40%,#dd6717 65%,#ffea9a);color:#fff1b0;animation:trial-ignite .35s ease-out both} #arcade-style-trial .is-hot .trial-crest svg{background:linear-gradient(150deg,#743214,#281b22)} #arcade-style-trial .is-hot small{color:#ffe28e} #arcade-style-trial .trial-spark{display:none} #arcade-style-trial .is-hot .trial-spark{display:block;position:absolute;left:12px;top:26px;width:3px;height:3px;border-radius:50%;background:#fff0a1;box-shadow:31px 5px #ffc752,10px -7px #ffac30;animation:trial-embers 1.8s ease-out infinite;pointer-events:none} #arcade-style-trial p{margin:3px 0 0;padding:4px 2px;text-align:center;border-radius:5px;background:#081827df;font:700 9px/1.2 Arial,sans-serif;color:#e7f0ff;white-space:nowrap} @keyframes trial-burn{from{transform:scale(.94,.88) rotate(-3deg)}to{transform:scale(1.03,1.05) rotate(3deg)}} @keyframes trial-embers{0%{transform:translateY(7px);opacity:0}25%{opacity:1}100%{transform:translate(4px,-25px);opacity:0}} @keyframes trial-ignite{from{transform:scale(.82)}to{transform:scale(1)}} .pd-reduced-motion #arcade-style-trial *{animation:none!important} @media(prefers-reduced-motion:reduce){#arcade-style-trial *{animation:none!important}} @media(orientation:landscape){#arcade-style-trial{top:calc(8px + env(safe-area-inset-top,0px));left:130px;right:100px;max-width:246px}} @media(max-width:600px) and (max-height:620px){ #game #overlay .practice-center .pc-start-cue,#game .practice-center .pc-random span{display:none} } @media(min-width:761px){#game:has(#arcade-style-trial:not([hidden])) #keyboard-help{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px))}} /* Keep the small back-pass caption inside its existing thumb target. */ #game.started :is(#rb-pass,#te-pass)>small{position:static;left:auto;bottom:auto;transform:none;margin-top:2px} /* The style-button dock otherwise pulls the landscape pass hint across receiver controls. */ @media(orientation:landscape) and (min-height:551px){ #game.started:has(#style-button:not([hidden])) #pass-controls{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 360px)} } /* Lower receiver cues use the diamond's center gap, clear of the back-pass row. */ #game.started:not(.menu-open) .face .pad:is(.square,.circle).receiver-open::after{top:50%;transform:translateY(-50%)} #game.started:not(.menu-open) .face .pad.square.receiver-open::after{left:calc(100% + 8px);right:auto} #game.started:not(.menu-open) .face .pad.circle.receiver-open::after{left:auto;right:calc(100% + 8px)}