/** * Athletics Fastpitch Coach Tools * Shared UI Contract 1.1.0 * * This file owns ONLY the visual language shared by Call Sheet + Game Board. * Tool-specific layout/rendering remains in each component stylesheet. * No historical patch layers live here. */ /* ========================================================================== TOKENS + PAGE RAILS ========================================================================== */ .ffab, .gb2 { --ff-blue:#0083ff; --ff-ink:#111317; --ff-muted:#667085; --ff-line:#cfd6de; --ff-line-hover:#b2bbc6; --ff-soft:#f5f7f9; --ff-soft-active:#e9edf1; --ff-danger:#b42318; --ff-danger-line:#ff9c97; --ff-danger-bg:#fff5f4; --ff-danger-hover:#ffe9e7; --ff-success:#247a32; --ff-success-line:#4b9657; --ff-success-bg:#f0faf1; --ff-panel-radius:14px; --ff-control-radius:11px; --ff-header-h:58px; --ff-control-h:48px; width:min(1600px,calc(100% - 32px))!important; max-width:1600px!important; margin:28px auto 50px!important; padding:0!important; box-sizing:border-box!important; color:var(--ff-ink)!important; font-family:inherit; } .ffab *, .gb2 * { box-sizing:border-box!important; } html body .ffab .ffab-wrap, html body .gb2 .gb2-shell { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; gap:18px!important; } .ffab .ffab-config, .ffab .ffab-preview, .gb2 .gb2-left-stack, .gb2 .gb2-right-stack { min-width:0!important; } /* ========================================================================== PRODUCT HEADER ========================================================================== */ html body .ffab .ff-suite-app-header, html body .gb2 .ff-suite-app-header { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:18px!important; width:100%!important; max-width:none!important; height:84px!important; min-height:84px!important; margin:0 0 18px!important; padding:15px 20px!important; border:1px solid #d4dae1!important; border-radius:20px!important; outline:0!important; background:#fff!important; box-shadow:0 10px 28px rgba(17,24,39,.07)!important; } html body .ffab .ffab-app-brand, html body .gb2 .gb2-app-brand { display:flex!important; align-items:center!important; gap:12px!important; min-width:0!important; } html body .ffab .ffab-app-icon, html body .gb2 .gb2-app-icon { width:48px!important; height:48px!important; min-width:48px!important; max-width:48px!important; flex:0 0 48px!important; margin:0!important; object-fit:contain!important; } html body .ffab .ffab-app-eyebrow, html body .gb2 .gb2-app-eyebrow { margin:0 0 2px!important; color:#6d7480!important; font-size:11px!important; font-weight:800!important; line-height:1.1!important; letter-spacing:.02em!important; } html body .ffab .ffab-app-title, html body .gb2 .gb2-app-title { margin:0!important; color:var(--ff-ink)!important; font-size:24px!important; font-weight:850!important; line-height:1.05!important; letter-spacing:-.035em!important; } html body .ffab .ffab-app-status, html body .gb2 .gb2-app-status { margin-left:auto!important; color:#626a76!important; font-size:12px!important; font-weight:750!important; line-height:1.2!important; white-space:nowrap!important; } /* ========================================================================== PANELS + ACCORDION HEADERS ========================================================================== */ html body .ffab details.ff-suite-panel, html body .ffab details.ff-suite-panel[open], html body .gb2 details.ff-suite-panel, html body .gb2 details.ff-suite-panel[open] { border:1.5px solid #111317!important; border-radius:var(--ff-panel-radius)!important; outline:0!important; background:#fff!important; overflow:hidden!important; box-shadow:0 10px 26px rgba(17,24,39,.07)!important; } html body .ffab summary.ff-suite-summary, html body .gb2 summary.ff-suite-summary { position:relative!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:var(--ff-header-h)!important; min-height:var(--ff-header-h)!important; margin:0!important; padding:0 52px 0 18px!important; border:0!important; border-radius:0!important; outline:0!important; background:linear-gradient(180deg,#15191e 0%,#080a0d 100%)!important; color:#fff!important; box-shadow:none!important; list-style:none!important; cursor:pointer!important; } html body .ffab summary.ff-suite-summary::-webkit-details-marker, html body .gb2 summary.ff-suite-summary::-webkit-details-marker { display:none!important; } html body .ffab summary.ff-suite-summary::marker, html body .gb2 summary.ff-suite-summary::marker { content:""!important; font-size:0!important; } html body .ffab summary.ff-suite-summary::before, html body .ffab summary.ff-suite-summary::after, html body .gb2 summary.ff-suite-summary::before, html body .gb2 summary.ff-suite-summary::after { content:none!important; display:none!important; } html body .ffab .ffab-disclosure-icon, html body .gb2 .gb2-chevron, html body .ffab .ff-suite-chevron, html body .gb2 .ff-suite-chevron, html body .ff-suite-js-hook { display:none!important; } html body .ffab .ff-suite-summary-title, html body .gb2 .ff-suite-summary-title { margin:0!important; padding:0!important; color:#fff!important; font-family:inherit; font-size:16px!important; font-weight:900!important; line-height:1!important; letter-spacing:.045em!important; text-transform:uppercase!important; } html body .ffab .ff-suite-chevron-svg, html body .gb2 .ff-suite-chevron-svg { position:absolute!important; right:18px!important; top:50%!important; display:block!important; width:18px!important; height:18px!important; margin:0!important; padding:0!important; overflow:visible!important; pointer-events:none!important; transform:translateY(-50%) rotate(0deg)!important; transform-origin:center!important; transition:transform .16s ease!important; } html body .ffab .ff-suite-chevron-svg path, html body .gb2 .ff-suite-chevron-svg path { fill:none!important; stroke:#9da6b2!important; stroke-width:2.25!important; stroke-linecap:round!important; stroke-linejoin:round!important; } html body .ffab details[open] > summary.ff-suite-summary .ff-suite-chevron-svg, html body .gb2 details[open] > summary.ff-suite-summary .ff-suite-chevron-svg { transform:translateY(-50%) rotate(180deg)!important; } html body .ffab summary.ff-suite-summary:focus-visible, html body .gb2 summary.ff-suite-summary:focus-visible { box-shadow:inset 0 0 0 2px rgba(0,131,255,.42)!important; } /* ========================================================================== SHARED BUTTON CONTRACT ========================================================================== */ html body .ffab button.ff-suite-button, html body .ffab button.ff-suite-btn, html body .gb2 button.ff-suite-button, html body .gb2 button.ff-suite-btn { appearance:none!important; -webkit-appearance:none!important; width:100%!important; max-width:100%!important; min-width:0!important; height:var(--ff-control-h)!important; min-height:var(--ff-control-h)!important; margin:0!important; padding:0 16px!important; border:1.5px solid var(--ff-line)!important; border-radius:var(--ff-control-radius)!important; outline:0!important; background:#fff!important; color:var(--ff-ink)!important; box-shadow:0 1px 2px rgba(17,24,39,.05)!important; font-family:inherit; font-size:14px!important; font-weight:800!important; line-height:1.1!important; letter-spacing:-.01em!important; text-transform:none!important; transform:none!important; transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease!important; } @media(hover:hover) { html body .ffab button.ff-suite-button:not(:disabled):hover, html body .ffab button.ff-suite-btn:not(:disabled):hover, html body .gb2 button.ff-suite-button:not(:disabled):hover, html body .gb2 button.ff-suite-btn:not(:disabled):hover { border-color:var(--ff-line-hover)!important; background:var(--ff-soft)!important; color:var(--ff-ink)!important; box-shadow:0 2px 5px rgba(17,24,39,.08)!important; } } html body .ffab button.ff-suite-button:not(:disabled):focus-visible, html body .ffab button.ff-suite-btn:not(:disabled):focus-visible, html body .gb2 button.ff-suite-button:not(:disabled):focus-visible, html body .gb2 button.ff-suite-btn:not(:disabled):focus-visible { border-color:var(--ff-blue)!important; background:#fff!important; color:var(--ff-ink)!important; box-shadow:0 0 0 3px rgba(0,131,255,.16)!important; } html body .ffab button.ff-suite-button:not(:disabled):active, html body .ffab button.ff-suite-btn:not(:disabled):active, html body .gb2 button.ff-suite-button:not(:disabled):active, html body .gb2 button.ff-suite-btn:not(:disabled):active { border-color:#98a3af!important; background:var(--ff-soft-active)!important; color:var(--ff-ink)!important; box-shadow:inset 0 1px 2px rgba(17,24,39,.08)!important; } html body .ffab button.ff-suite-button:disabled, html body .ffab button.ff-suite-btn:disabled, html body .gb2 button.ff-suite-button:disabled, html body .gb2 button.ff-suite-btn:disabled { border-color:#e1e5ea!important; background:#fafafa!important; color:#a1a1a1!important; box-shadow:none!important; opacity:1!important; cursor:not-allowed!important; } /* Primary next action */ html body .ffab #ffabRefresh.ff-suite-button, html body .gb2 #gb2StartGame.ff-suite-button { border-color:#69adff!important; background:#eaf4ff!important; color:#006dcc!important; box-shadow:0 1px 2px rgba(0,109,204,.06)!important; } @media(hover:hover) { html body .ffab #ffabRefresh.ff-suite-button:not(:disabled):hover, html body .gb2 #gb2StartGame.ff-suite-button:not(:disabled):hover { border-color:#3e97f2!important; background:#deefff!important; color:#005eb3!important; box-shadow:0 2px 5px rgba(0,109,204,.10)!important; } } /* Destructive */ html body .ffab #ffabReset.ff-suite-button, html body .gb2 #gb2ResetDemo.ff-suite-button { border-color:var(--ff-danger-line)!important; background:var(--ff-danger-bg)!important; color:var(--ff-danger)!important; } @media(hover:hover) { html body .ffab #ffabReset.ff-suite-button:not(:disabled):hover, html body .gb2 #gb2ResetDemo.ff-suite-button:not(:disabled):hover { border-color:#ff7169!important; background:var(--ff-danger-hover)!important; color:#a61b12!important; } } /* Preview/Print semantic state */ html body .ffab #ffabPreviewPdf.ff-suite-button.ffab-ready, html body .ffab #ffabPreviewPdf.ff-suite-button.ffab-preview-ready { border-color:var(--ff-success-line)!important; background:var(--ff-success-bg)!important; color:var(--ff-success)!important; } html body .ffab #ffabPreviewPdf.ff-suite-button.ffab-preview-needs-generate { border-color:var(--ff-line)!important; background:#fff!important; color:var(--ff-muted)!important; } /* ========================================================================== SEGMENTED CONTROLS ========================================================================== */ html body .ffab .ff-suite-segmented, html body .gb2 .ff-suite-segmented { display:grid!important; align-items:stretch!important; min-width:0!important; min-height:48px!important; margin:0!important; padding:4px!important; gap:4px!important; border:1px solid #c7cdd5!important; border-radius:12px!important; background:#e8eaed!important; box-shadow:inset 0 1px 2px rgba(17,24,39,.055),0 1px 1px rgba(17,24,39,.025)!important; } html body .ffab .ffab-card-setting-toggles-visual.ff-suite-segmented { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html body .ffab .ffab-card-setting-toggles-print.ff-suite-segmented { grid-template-columns:repeat(3,minmax(0,1fr))!important; } html body .gb2 .gb2-reference-tabs.ff-suite-segmented { grid-template-columns:repeat(4,minmax(0,1fr))!important; margin:0 0 18px!important; } html body .gb2 .gb2-segmented.ff-suite-segmented { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html body .gb2 .gb2-board-button-row.ff-suite-segmented { display:flex!important; flex-wrap:wrap!important; min-height:42px!important; padding:3px!important; gap:3px!important; } html body .ffab .ff-suite-segmented > .ffab-toggle-input { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; } html body .ffab .ff-suite-segmented .ff-suite-segmented-item, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item { appearance:none!important; -webkit-appearance:none!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0 12px!important; border:1px solid #cbd1d8!important; border-radius:9px!important; outline:0!important; background:#f0f2f4!important; color:#4f5660!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important; font-family:inherit; font-size:13px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; cursor:pointer!important; transform:none!important; transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .08s ease!important; } html body .gb2 .gb2-reference-tabs.ff-suite-segmented .ff-suite-segmented-item { font-size:12px!important; } html body .gb2 .gb2-board-button-row.ff-suite-segmented .ff-suite-segmented-item { width:auto!important; flex:1 1 auto!important; height:34px!important; min-height:34px!important; padding:0 10px!important; font-size:11px!important; } @media(hover:hover) { html body .ffab .ff-suite-segmented .ff-suite-segmented-item:hover, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item:not(.is-active):not([aria-selected="true"]):hover { border-color:var(--ff-line-hover)!important; background:#fff!important; color:#111317!important; box-shadow:0 2px 5px rgba(17,24,39,.08)!important; } } html body .ffab .ff-suite-segmented > .ffab-toggle-input:checked + .ff-suite-segmented-item, html body .ffab .ffab-template-buttons.ff-suite-segmented .ff-suite-segmented-item.ffab-btn-primary, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item.is-active, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item[aria-selected="true"] { border:2px solid #626b76!important; background:#fff!important; color:#111317!important; box-shadow:0 3px 8px rgba(17,24,39,.15),inset 0 1px 0 rgba(255,255,255,.96)!important; } @media(hover:hover) { html body .ffab .ff-suite-segmented > .ffab-toggle-input:checked + .ff-suite-segmented-item:hover, html body .ffab .ffab-template-buttons.ff-suite-segmented .ff-suite-segmented-item.ffab-btn-primary:hover, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item.is-active:hover, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item[aria-selected="true"]:hover { border-color:#4f5863!important; background:#fff!important; color:#111317!important; box-shadow:0 4px 10px rgba(17,24,39,.17),inset 0 1px 0 rgba(255,255,255,.98)!important; } } html body .ffab .ff-suite-segmented .ff-suite-segmented-item:active, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item:active { border-color:#98a3af!important; background:var(--ff-soft-active)!important; box-shadow:inset 0 1px 2px rgba(17,24,39,.09)!important; transform:translateY(1px)!important; } html body .ffab .ff-suite-segmented .ff-suite-segmented-item:focus-visible, html body .gb2 .ff-suite-segmented .ff-suite-segmented-item:focus-visible { border-color:var(--ff-blue)!important; box-shadow:0 0 0 3px rgba(0,131,255,.16)!important; } /* ========================================================================== CALL SHEET SHARED-PARITY PIECES ========================================================================== */ html body .ffab .ffab-playrow select.ffab-play-cat, html body .ffab .ffab-playrow select.ffab-play-cat:hover, html body .ffab .ffab-playrow select.ffab-play-cat:focus, html body .ffab .ffab-playrow select.ffab-play-cat:active { height:48px!important; min-height:48px!important; max-height:48px!important; padding:0 42px 0 16px!important; border:1px solid var(--ff-line)!important; border-radius:10px!important; background-color:#fff!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23111317' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 15px center!important; background-size:12px 8px!important; color:var(--ff-ink)!important; font-size:14px!important; font-weight:700!important; line-height:48px!important; text-indent:0!important; appearance:none!important; -webkit-appearance:none!important; box-shadow:none!important; transform:none!important; } html body .ffab .ffab-playrow-placeholder, html body .gb2 .gb2-player-placeholder { display:block!important; width:100%!important; min-width:0!important; margin:6px 0!important; border:2px dashed var(--ff-blue)!important; border-radius:10px!important; background:#eef7ff!important; box-shadow:inset 0 0 0 1px rgba(0,131,255,.05)!important; } /* ========================================================================== GAME BOARD DRAG + STATUS LANGUAGE ========================================================================== */ html body .gb2 .gb2-player-row.is-drop-target, html body .gb2 .gb2-flex-placeholder.is-drop-target { outline:2px solid var(--ff-blue)!important; outline-offset:-2px!important; border-color:#75b8ff!important; background:#f7fbff!important; box-shadow:0 0 0 4px rgba(0,131,255,.13),0 0 16px rgba(0,131,255,.18)!important; } html body .gb2 .gb2-field-token.is-field-drop-target, html body .gb2 .gb2-mini-token.is-field-drop-target { outline:3px solid #0083ff!important; outline-offset:3px!important; box-shadow:0 0 0 7px rgba(0,131,255,.22),0 0 22px 8px rgba(0,131,255,.28),0 5px 12px rgba(0,0,0,.30)!important; filter:brightness(1.08) saturate(1.08)!important; } @media(hover:hover) and (pointer:fine) { html body .gb2.is-game .gb2-field-token:not(.is-dragging):hover { outline:2px solid rgba(0,131,255,.72)!important; outline-offset:3px!important; box-shadow:0 0 0 6px rgba(0,131,255,.12),0 5px 13px rgba(0,0,0,.25)!important; filter:brightness(1.05)!important; } } html body .gb2 .gb2-empty-slot.is-field-drop-target { border-color:var(--ff-blue)!important; background:#eef7ff!important; color:#006dcc!important; box-shadow:0 0 0 4px rgba(0,131,255,.14)!important; } html body .gb2 .gb2-reference-card, html body .gb2 .gb2-reference-card-key { border:1px solid #d6dde4!important; border-left:1px solid #d6dde4!important; border-radius:12px!important; background:#f8f9fb!important; box-shadow:none!important; } html body .gb2 .gb2-reference-flow.gb2-reentry-legend { display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:7px!important; margin-top:12px!important; } html body .gb2 .gb2-reentry-chip { display:inline-flex!important; align-items:center!important; gap:6px!important; min-height:30px!important; margin:0!important; padding:4px 9px 4px 5px!important; border:1px solid #d3d9e0!important; border-radius:999px!important; background:#fff!important; color:#4c5664!important; box-shadow:none!important; white-space:nowrap!important; } html body .gb2 .gb2-reentry-chip strong { display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:22px!important; height:22px!important; padding:0 6px!important; border-radius:999px!important; background:#eef1f4!important; color:#20242a!important; font-size:10px!important; font-weight:900!important; } html body .gb2 .gb2-reentry-chip span { color:inherit!important; font-size:9px!important; font-weight:850!important; line-height:1!important; letter-spacing:.04em!important; } html body .gb2 .gb2-reentry-chip.is-used { border-color:#e4c16f!important; background:#fff9e9!important; color:#875900!important; } html body .gb2 .gb2-reentry-chip.is-used strong { background:#ffedbd!important; color:#875900!important; } html body .gb2 .gb2-reentry-chip.is-out { border-color:#eba1aa!important; background:#fff4f5!important; color:#a51c2d!important; } html body .gb2 .gb2-reentry-chip.is-out strong { background:#ffdfe3!important; color:#a51c2d!important; } /* ========================================================================== GAME BOARD DESKTOP LAYOUT ========================================================================== */ html body .gb2 .gb2-shell { display:grid!important; grid-template-columns:minmax(500px,.82fr) minmax(0,1.38fr)!important; gap:18px!important; align-items:start!important; } html body .gb2 .gb2-lineup-accordion > .gb2-accordion-body { padding-left:14px!important; padding-right:14px!important; } html body .gb2 #gb2SetupPanel.gb2-setup-panel { padding:0 0 16px!important; } html body .gb2 #gb2SetupPanel .gb2-toolbar { margin:14px 0 0!important; padding:0!important; gap:10px!important; } html body .gb2 #gb2SetupPanel + .gb2-lineup-head { margin-top:2px!important; padding-top:10px!important; border-top:1px solid #d9dee4!important; } html body .gb2 .gb2-lineup-head { width:100%!important; min-width:0!important; margin-left:0!important; margin-right:0!important; padding-left:10px!important; padding-right:10px!important; overflow:hidden!important; align-items:center!important; } html body .gb2 .gb2-lineup-head > span { min-width:0!important; max-width:100%!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:clip!important; } /* Locked actions */ html body .gb2.is-game .gb2-game-actions { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin:12px 0 0!important; padding:0!important; } html body .gb2.is-game .gb2-game-actions[hidden] { display:none!important; } html body .gb2.is-game .gb2-game-actions > button { height:46px!important; min-height:46px!important; padding:0 10px!important; font-size:13px!important; white-space:nowrap!important; } html body .gb2.is-game .gb2-file-toolbar { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin:8px 0 0!important; padding:0!important; } html body .gb2.is-game .gb2-file-toolbar > button { height:46px!important; min-height:46px!important; padding:0 8px!important; font-size:12px!important; white-space:nowrap!important; } html body .gb2.is-game .gb2-footer-status { margin:14px 0 0!important; padding:12px 4px 0!important; } /* ========================================================================== FIELD PREVIEW HEADER MODE SWITCH ========================================================================== */ html body .gb2 .gb2-field-accordion { container-type:inline-size!important; container-name:gb-field!important; } html body .gb2 .gb2-field-accordion > .gb2-accordion-body.gb2-field-body { position:relative!important; } html body .gb2 .gb2-field-modebar { position:absolute!important; z-index:8!important; top:-48px!important; right:54px!important; width:300px!important; max-width:calc(100% - 250px)!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0!important; } html body .gb2 .gb2-field-modebar .gb2-segmented.ff-suite-segmented { width:100%!important; height:38px!important; min-height:38px!important; padding:3px!important; gap:3px!important; border:1px solid rgba(255,255,255,.22)!important; border-radius:11px!important; background:rgba(255,255,255,.12)!important; box-shadow:inset 0 1px 1px rgba(255,255,255,.06),inset 0 -1px 1px rgba(0,0,0,.16)!important; } html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item, html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item { height:30px!important; min-height:30px!important; padding:0 12px!important; border:0!important; border-radius:8px!important; background:transparent!important; color:#d9e0e8!important; box-shadow:none!important; font-size:10.5px!important; font-weight:850!important; line-height:1!important; letter-spacing:.015em!important; opacity:1!important; } html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item.is-active, html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item.is-active, html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item[aria-selected="true"], html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item[aria-selected="true"] { background:#fff!important; color:#111317!important; box-shadow:0 1px 3px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.58)!important; } @media(hover:hover) { html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item:not(.is-active):not([aria-selected="true"]):hover, html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item:not(.is-active):not([aria-selected="true"]):hover { background:rgba(255,255,255,.09)!important; color:#fff!important; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media(max-width:1180px) { html body .gb2 .gb2-shell { grid-template-columns:1fr!important; gap:16px!important; } } @media(max-width:980px) { html body .ffab .ffab-wrap { grid-template-columns:1fr!important; gap:16px!important; } } @media(max-width:700px) { html body .gb2 .gb2-reference-tabs.ff-suite-segmented { grid-template-columns:repeat(2,minmax(0,1fr))!important; } } @media(max-width:640px) { .ffab, .gb2 { width:calc(100% - 32px)!important; margin:28px auto 50px!important; } html body .ffab .ff-suite-app-header, html body .gb2 .ff-suite-app-header { height:72px!important; min-height:72px!important; padding:13px 15px!important; border-radius:16px!important; } html body .ffab .ffab-app-icon, html body .gb2 .gb2-app-icon { width:40px!important; height:40px!important; min-width:40px!important; max-width:40px!important; flex-basis:40px!important; } html body .ffab .ffab-app-title, html body .gb2 .gb2-app-title { font-size:20px!important; } html body .ffab .ffab-app-status, html body .gb2 .gb2-app-status { display:none!important; } html body .ffab summary.ff-suite-summary, html body .gb2 summary.ff-suite-summary { height:58px!important; min-height:58px!important; padding:0 52px 0 18px!important; } html body .ffab .ff-suite-summary-title, html body .gb2 .ff-suite-summary-title { font-size:16px!important; } html body .ffab .ff-suite-chevron-svg, html body .gb2 .ff-suite-chevron-svg { right:18px!important; } html body .gb2 .gb2-lineup-accordion > .gb2-accordion-body, html body .gb2 .gb2-field-accordion > .gb2-accordion-body { padding-left:10px!important; padding-right:10px!important; } } @media(max-width:560px) { html body .ffab .ffab-card-setting-toggles-print.ff-suite-segmented { grid-template-columns:1fr!important; } } @container gb-field (max-width:760px) { html body .gb2 .gb2-field-modebar { width:270px!important; max-width:calc(100% - 225px)!important; } html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item, html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item { padding:0 9px!important; font-size:9.8px!important; } } @container gb-field (max-width:620px) { html body .gb2 .gb2-field-modebar { position:relative!important; top:auto!important; right:auto!important; width:100%!important; max-width:none!important; height:auto!important; margin:0 0 12px!important; } html body .gb2 .gb2-field-modebar .gb2-segmented.ff-suite-segmented { height:44px!important; min-height:44px!important; padding:4px!important; gap:4px!important; border-color:#c9cdd3!important; background:#e9e9ec!important; box-shadow:inset 0 1px 2px rgba(17,24,39,.05)!important; } html body .gb2 .gb2-field-modebar button#gb2FieldPreviewMode.ff-suite-segmented-item, html body .gb2 .gb2-field-modebar button#gb2FieldBoardMode.ff-suite-segmented-item { height:34px!important; min-height:34px!important; color:#20242a!important; font-size:11px!important; } } @container gb-lineup (max-width:620px) { html body .gb2 #gb2SetupPanel .gb2-toolbar { grid-template-columns:repeat(2,minmax(0,1fr))!important; row-gap:8px!important; } html body .gb2 #gb2SetupPanel .gb2-toolbar #gb2ClearDefense { grid-column:1 / -1!important; } html body .gb2 .gb2-lineup-head { font-size:9px!important; letter-spacing:.02em!important; padding-left:6px!important; padding-right:6px!important; } } @container gb-lineup (max-width:430px) { html body .gb2 #gb2SetupPanel .gb2-toolbar { grid-template-columns:1fr!important; } html body .gb2 #gb2SetupPanel .gb2-toolbar #gb2ClearDefense { grid-column:auto!important; } } @container gb-lineup (max-width:360px) { html body .gb2.is-game .gb2-file-toolbar { grid-template-columns:repeat(2,minmax(0,1fr))!important; } html body .gb2.is-game .gb2-file-toolbar > #gb2PrintLineup { grid-column:1 / -1!important; } } /* ========================================================================== ATHLETICS SIMPLE CONTROLS — 1.0.12 Scoped to actual interface controls only. Field tokens, tray tokens, drag grips, eligibility badges, runner/ball tokens are explicitly untouched. ========================================================================== */ :root{--af-control-h:56px;--af-control-r:10px;--af-off-bg:#fff;--af-off-fg:#111317;--af-off-border:#cfd5dc;--af-hover-bg:#eef1f4;--af-hover-border:#9fa8b3;--af-on-bg:#111317;--af-on-fg:#fff} html body .ffab,html body .ffab *,html body .gb2,html body .gb2 *{font-family:inherit!important} /* Only real chrome controls participate in the simple state system. */ html body .ffab .ff-suite-button, html body .ffab .ff-suite-btn, html body .ffab .ffab-btn, html body .ffab .ffab-toggle-button, html body .ffab a.ffab-armband-help-link, html body .gb2 .ff-suite-button, html body .gb2 .ff-suite-btn, html body .gb2 .gb2-btn, html body .gb2 .gb2-reference-tab, html body .gb2 .gb2-segmented button, html body .gb2 .gb2-toggle-group button, html body .gb2 .gb2-board-toggle button{ -webkit-appearance:none!important;appearance:none!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;transition:none!important;transform:none!important;box-shadow:none!important;box-sizing:border-box!important;border-radius:var(--af-control-r)!important } /* Off/default. */ html body .ffab .ff-suite-button:not(:disabled),html body .ffab .ff-suite-btn:not(:disabled),html body .ffab .ffab-btn:not(:disabled),html body .ffab .ffab-toggle-input:not(:checked)+.ffab-toggle-button,html body .ffab a.ffab-armband-help-link, html body .gb2 .ff-suite-button:not(:disabled),html body .gb2 .ff-suite-btn:not(:disabled),html body .gb2 .gb2-btn:not(:disabled),html body .gb2 .gb2-reference-tab:not(.is-active):not([aria-selected="true"]),html body .gb2 .gb2-segmented button:not(.is-active):not([aria-pressed="true"]),html body .gb2 .gb2-toggle-group button:not(.is-active):not([aria-pressed="true"]),html body .gb2 .gb2-board-toggle button:not(.is-active):not([aria-pressed="true"]){background:var(--af-off-bg)!important;color:var(--af-off-fg)!important;border:2px solid var(--af-off-border)!important;box-shadow:none!important} /* On/selected. */ html body .ffab #ffabTemplateDefense[aria-pressed="true"],html body .ffab #ffabTemplateOffense[aria-pressed="true"],html body .ffab .ffab-template-buttons .ffab-btn[aria-pressed="true"],html body .ffab .ffab-toggle-input:checked+.ffab-toggle-button, html body .gb2 .gb2-reference-tab.is-active,html body .gb2 .gb2-reference-tab[aria-selected="true"],html body .gb2 .gb2-segmented button.is-active,html body .gb2 .gb2-segmented button[aria-pressed="true"],html body .gb2 .gb2-toggle-group button.is-active,html body .gb2 .gb2-toggle-group button[aria-pressed="true"],html body .gb2 .gb2-board-toggle button.is-active,html body .gb2 .gb2-board-toggle button[aria-pressed="true"]{background:var(--af-on-bg)!important;color:var(--af-on-fg)!important;border-color:var(--af-on-bg)!important;box-shadow:none!important} @media(hover:hover) and (pointer:fine){ html body .ffab .ff-suite-button:not(:disabled):hover,html body .ffab .ff-suite-btn:not(:disabled):hover,html body .ffab .ffab-btn:not(:disabled):not([aria-pressed="true"]):hover,html body .ffab .ffab-toggle-input:not(:checked)+.ffab-toggle-button:hover,html body .ffab a.ffab-armband-help-link:hover, html body .gb2 .ff-suite-button:not(:disabled):hover,html body .gb2 .ff-suite-btn:not(:disabled):hover,html body .gb2 .gb2-btn:not(:disabled):hover,html body .gb2 .gb2-reference-tab:not(.is-active):not([aria-selected="true"]):hover,html body .gb2 .gb2-segmented button:not(.is-active):not([aria-pressed="true"]):hover,html body .gb2 .gb2-toggle-group button:not(.is-active):not([aria-pressed="true"]):hover,html body .gb2 .gb2-board-toggle button:not(.is-active):not([aria-pressed="true"]):hover{background:var(--af-hover-bg)!important;color:var(--af-off-fg)!important;border-color:var(--af-hover-border)!important} html body .ffab #ffabTemplateDefense[aria-pressed="true"]:hover,html body .ffab #ffabTemplateOffense[aria-pressed="true"]:hover,html body .ffab .ffab-toggle-input:checked+.ffab-toggle-button:hover{background:var(--af-on-bg)!important;color:#fff!important;border-color:var(--af-on-bg)!important} } /* Call Sheet top row remains aligned. */ html body .ffab .ffab-playbook-top{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:14px!important;align-items:stretch!important} html body .ffab .ffab-playbook-code,html body .ffab .ffab-playbook-code input{box-sizing:border-box!important;width:92px!important;min-width:92px!important;height:var(--af-control-h)!important;min-height:var(--af-control-h)!important;margin:0!important} html body .ffab .ffab-playbook-code input{border:2px solid var(--af-off-border)!important;border-radius:var(--af-control-r)!important;background:#fff!important;text-align:center!important;padding:0 8px!important} html body .ffab .ffab-templatebar,html body .ffab .ffab-template-buttons{width:100%!important;min-width:0!important;margin:0!important;padding:0!important} html body .ffab .ffab-template-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;border:0!important;background:transparent!important;box-shadow:none!important} html body .ffab .ffab-template-buttons .ffab-btn{width:100%!important;height:var(--af-control-h)!important;min-height:var(--af-control-h)!important;margin:0!important;padding:0 14px!important} html body .ffab .ffab-card-setting-toggles{gap:8px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} html body .ffab .ffab-card-setting-toggles .ffab-toggle-button{height:var(--af-control-h)!important;min-height:var(--af-control-h)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 14px!important} html body .ffab a.ffab-armband-help-link,html body .ffab a.ffab-armband-help-link:visited{display:inline-flex!important;width:auto!important;height:var(--af-control-h)!important;align-items:center!important;justify-content:center!important;padding:0 22px!important;text-decoration:none!important;text-transform:uppercase!important;letter-spacing:.025em!important} /* Semantic action colors. */ html body .ffab #ffabRefresh{background:#eaf4ff!important;color:#006dcc!important;border-color:#006dcc!important} html body .ffab #ffabPreviewPdf{background:#eff9f0!important;color:#247b34!important;border-color:#3a944b!important} html body .ffab #ffabReset,html body .gb2 .gb2-btn-danger,html body .gb2 .gb2-reset-lineup,html body .gb2 [data-action="reset-lineup"]{background:#fff2f3!important;color:#b1112b!important;border-color:#c8102e!important} html body .gb2 .gb2-btn-primary,html body .gb2 .gb2-lock-lineup,html body .gb2 [data-action="lock-lineup"]{background:#eaf4ff!important;color:#006dcc!important;border-color:#69adff!important} /* Header Lineup Preview / Game Board switch only. */ html body .gb2 .gb2-panel-head .gb2-view-toggle,html body .gb2 .gb2-accordion-header .gb2-view-toggle{gap:6px!important;border:0!important;background:transparent!important;box-shadow:none!important} html body .gb2 .gb2-panel-head .gb2-view-toggle button,html body .gb2 .gb2-accordion-header .gb2-view-toggle button{min-height:36px!important;height:36px!important;background:transparent!important;color:rgba(255,255,255,.78)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:none!important} html body .gb2 .gb2-panel-head .gb2-view-toggle button[aria-pressed="true"],html body .gb2 .gb2-panel-head .gb2-view-toggle button.is-active,html body .gb2 .gb2-accordion-header .gb2-view-toggle button[aria-pressed="true"],html body .gb2 .gb2-accordion-header .gb2-view-toggle button.is-active{background:#fff!important;color:#111317!important;border-color:#fff!important} @media(max-width:420px){html body .ffab .ffab-playbook-top{grid-template-columns:78px minmax(0,1fr)!important;gap:8px!important}html body .ffab .ffab-playbook-code,html body .ffab .ffab-playbook-code input{width:78px!important;min-width:78px!important}} /* ========================================================================== 1.0.13 SURGICAL STATE / TOKEN / ARM-BAND FIX ========================================================================== */ /* CALL SHEET SETTINGS The native checkbox is the source of truth. No class or hover state can override an actual checked setting. */ html body .ffab #ffabColorCats:checked + .ffab-toggle-button, html body .ffab #ffabGreyscale:checked + .ffab-toggle-button, html body .ffab #ffabPrintArmbands:checked + .ffab-toggle-button, html body .ffab #ffabLargeArmbands:checked + .ffab-toggle-button, html body .ffab #ffabLegend:checked + .ffab-toggle-button { background:#111317 !important; color:#fff !important; border:2px solid #111317 !important; box-shadow:none !important; transform:none !important; } /* Unchecked is always white. */ html body .ffab #ffabColorCats:not(:checked) + .ffab-toggle-button, html body .ffab #ffabGreyscale:not(:checked) + .ffab-toggle-button, html body .ffab #ffabPrintArmbands:not(:checked) + .ffab-toggle-button, html body .ffab #ffabLargeArmbands:not(:checked) + .ffab-toggle-button, html body .ffab #ffabLegend:not(:checked) + .ffab-toggle-button { background:#fff !important; color:#111317 !important; border:2px solid #cfd5dc !important; box-shadow:none !important; transform:none !important; } /* Only true pointer hover gets gray. Selected stays black. */ @media (hover:hover) and (pointer:fine) { html body .ffab #ffabColorCats:not(:checked) + .ffab-toggle-button:hover, html body .ffab #ffabGreyscale:not(:checked) + .ffab-toggle-button:hover, html body .ffab #ffabPrintArmbands:not(:checked) + .ffab-toggle-button:hover, html body .ffab #ffabLargeArmbands:not(:checked) + .ffab-toggle-button:hover, html body .ffab #ffabLegend:not(:checked) + .ffab-toggle-button:hover { background:#eef1f4 !important; color:#111317 !important; border-color:#9fa8b3 !important; } html body .ffab #ffabColorCats:checked + .ffab-toggle-button:hover, html body .ffab #ffabGreyscale:checked + .ffab-toggle-button:hover, html body .ffab #ffabPrintArmbands:checked + .ffab-toggle-button:hover, html body .ffab #ffabLargeArmbands:checked + .ffab-toggle-button:hover, html body .ffab #ffabLegend:checked + .ffab-toggle-button:hover { background:#111317 !important; color:#fff !important; border-color:#111317 !important; } } /* GAME BOARD TOKENS ARE GAME PIECES, NEVER UI BUTTONS. Reassert the original circular geometry after all shared-control CSS. */ html body .gb2 button.gb2-field-token, html body .gb2 button.gb2-mini-token { -webkit-appearance:none !important; appearance:none !important; border-radius:50% !important; padding:0 !important; aspect-ratio:1 / 1 !important; transform:translate(-50%,-50%); } /* Tray tokens do not use absolute positioning, so retain their natural transform. */ html body .gb2 button.gb2-mini-token { width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; max-height:40px !important; transform:none !important; } /* Field tokens retain the established 48px circle and positioning transform. */ html body .gb2 button.gb2-field-token { width:48px !important; min-width:48px !important; max-width:48px !important; height:48px !important; min-height:48px !important; max-height:48px !important; } /* Position placeholders stay circular too. */ html body .gb2 .gb2-empty-slot { border-radius:50% !important; } /* RECOMMENDED ARM BAND Return to a compact supporting image, not a full-width product billboard. */ html body .ffab .ffab-armband-help-body { display:grid !important; grid-template-columns:240px minmax(0,1fr) !important; gap:24px !important; align-items:center !important; padding:24px 28px 28px !important; } html body .ffab .ffab-armband-help-image { width:240px !important; max-width:240px !important; min-width:0 !important; margin:0 !important; padding:10px !important; border:2px solid #d7dde5 !important; border-radius:12px !important; background:#fff !important; box-shadow:0 6px 18px rgba(17,24,39,.05) !important; } html body .ffab .ffab-armband-help-image img { display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; } html body .ffab .ffab-armband-help-copy { max-width:620px !important; min-width:0 !important; } @media (max-width:760px) { html body .ffab .ffab-armband-help-body { grid-template-columns:1fr !important; gap:18px !important; padding:20px !important; } html body .ffab .ffab-armband-help-image { width:min(240px,100%) !important; max-width:240px !important; margin:0 auto !important; } } /* ========================================================================== 1.0.14 EXACT COMPONENT GEOMETRY FIXES Only runner/ball pieces, lineup RE/POS geometry, and Arm Band CTA. ========================================================================== */ /* GAME BOARD RUNNERS + BALL These are draggable game pieces even though the DOM element is a button. Their geometry must always beat any normal button styling. */ html body .gb2 button.gb2-board-token.gb2-board-runner, html body .gb2 button.gb2-board-runner, html body .gb2 .gb2-board-runner { box-sizing:border-box !important; width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; max-height:40px !important; aspect-ratio:1 / 1 !important; padding:0 !important; border-radius:50% !important; overflow:hidden !important; transform:translate(-50%,-50%) !important; } html body .gb2 button.gb2-board-token.gb2-board-ball, html body .gb2 button.gb2-board-ball, html body .gb2 .gb2-board-ball { box-sizing:border-box !important; width:28px !important; min-width:28px !important; max-width:28px !important; height:28px !important; min-height:28px !important; max-height:28px !important; aspect-ratio:1 / 1 !important; padding:0 !important; border-radius:50% !important; overflow:visible !important; transform:translate(-50%,-50%) !important; } /* Never let hover/active states change the physical geometry of game pieces. */ html body .gb2 button.gb2-board-runner:hover, html body .gb2 button.gb2-board-runner:active, html body .gb2 button.gb2-board-runner:focus, html body .gb2 button.gb2-board-ball:hover, html body .gb2 button.gb2-board-ball:active, html body .gb2 button.gb2-board-ball:focus { border-radius:50% !important; transform:translate(-50%,-50%) !important; } /* LINEUP RE-ENTRY True optical centering, not just text-align:center. */ html body .gb2 .gb2-eligibility { display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; line-height:1 !important; padding:0 !important; } html body .gb2 .gb2-eligibility > * { margin:0 !important; padding:0 !important; line-height:1 !important; } /* POSITION SELECT Keep the arrow visually attached to the value instead of stranded at the far edge of the POS column. */ html body .gb2 .gb2-pos { background-position: calc(100% - 24px) 50%, calc(100% - 20px) 50% !important; padding-right:38px !important; } html body .gb2.is-game .gb2-pos { background-position: calc(100% - 24px) 50%, calc(100% - 20px) 50% !important; padding-right:38px !important; } /* On compact lineup widths, move the arrow a touch closer still. */ @container gb-lineup (max-width:500px) { html body .gb2 .gb2-pos, html body .gb2.is-game .gb2-pos { background-position: calc(100% - 18px) 50%, calc(100% - 14px) 50% !important; padding-right:30px !important; } } /* ARM BAND CTA Fill the copy column so it visually belongs to the content block. */ html body .ffab a.ffab-armband-help-link, html body .ffab a.ffab-armband-help-link:visited { display:flex !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; align-items:center !important; justify-content:center !important; margin-top:14px !important; } /* ========================================================================== 1.0.15 LINEUP GEOMETRY + EXACT DRAG ANCHOR (PRESERVED) ========================================================================== */ /* LINEUP CARD Locked and unlocked use ONE grid, ONE row height, ONE set of rails. */ html body .gb2 .gb2-lineup-head, html body .gb2 .gb2-player-row, html body .gb2.is-game .gb2-lineup-head, html body .gb2.is-game .gb2-player-row{ grid-template-columns:28px 58px 68px minmax(130px,1fr) 124px 56px !important; column-gap:8px !important; } html body .gb2 .gb2-player-row, html body .gb2.is-game .gb2-player-row{ box-sizing:border-box !important; min-height:58px !important; height:58px !important; padding:7px 10px !important; border:1px solid #d5dce4 !important; border-radius:11px !important; background:#f7f9fb !important; box-shadow:none !important; overflow:hidden !important; } html body .gb2 .gb2-lineup-head, html body .gb2.is-game .gb2-lineup-head{ padding:0 10px 8px !important; margin:0 !important; } /* Unlocked inputs remain clearly editable without looking like six separate cards. */ html body .gb2:not(.is-game) .gb2-player-row .gb2-slot, html body .gb2:not(.is-game) .gb2-player-row .gb2-number, html body .gb2:not(.is-game) .gb2-player-row .gb2-name, html body .gb2:not(.is-game) .gb2-player-row .gb2-pos, html body .gb2:not(.is-game) .gb2-player-row .gb2-pos-static{ box-sizing:border-box !important; height:42px !important; min-height:42px !important; max-height:42px !important; border:1px solid #cfd6de !important; border-radius:8px !important; background:#fff !important; box-shadow:none !important; } /* Locked state is the same geometry, just visually quieter. */ html body .gb2.is-game .gb2-player-row .gb2-slot, html body .gb2.is-game .gb2-player-row .gb2-number, html body .gb2.is-game .gb2-player-row .gb2-name, html body .gb2.is-game .gb2-player-row .gb2-pos, html body .gb2.is-game .gb2-player-row .gb2-pos-static{ box-sizing:border-box !important; height:42px !important; min-height:42px !important; max-height:42px !important; border:0 !important; border-radius:7px !important; background:transparent !important; box-shadow:none !important; } html body .gb2.is-game .gb2-player-row .gb2-slot{ font-weight:800 !important; } /* Re-entry is centered and identically sized in both states. */ html body .gb2 .gb2-eligibility, html body .gb2.is-game .gb2-eligibility{ box-sizing:border-box !important; width:56px !important; min-width:56px !important; max-width:56px !important; height:42px !important; min-height:42px !important; max-height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; padding:0 !important; margin:0 !important; line-height:1 !important; text-align:center !important; } /* Grip uses the same vertical center in both modes. */ html body .gb2 .gb2-grip, html body .gb2.is-game .gb2-grip{ width:28px !important; min-width:28px !important; height:42px !important; min-height:42px !important; max-height:42px !important; align-self:center !important; margin:0 !important; padding:0 !important; } /* Position arrow is part of the POS control, not floating in the column. */ html body .gb2 .gb2-pos, html body .gb2.is-game .gb2-pos{ -webkit-appearance:none !important; appearance:none !important; background-image: linear-gradient(45deg,transparent 50%,#20242a 50%), linear-gradient(135deg,#20242a 50%,transparent 50%) !important; background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important; background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px) !important; padding-right:28px !important; } /* Responsive lineup keeps the SAME proportions in locked and unlocked modes. */ @container gb-lineup (max-width:560px){ html body .gb2 .gb2-lineup-head, html body .gb2 .gb2-player-row, html body .gb2.is-game .gb2-lineup-head, html body .gb2.is-game .gb2-player-row{ grid-template-columns:18px 46px 48px minmax(0,1fr) 90px 44px !important; column-gap:5px !important; padding-left:6px !important; padding-right:6px !important; } html body .gb2 .gb2-eligibility, html body .gb2.is-game .gb2-eligibility{ width:44px !important; min-width:44px !important; max-width:44px !important; } html body .gb2 .gb2-pos, html body .gb2.is-game .gb2-pos{ background-position: calc(100% - 13px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px) !important; padding-right:24px !important; } } /* Drag portal must use identical row geometry; no mode-specific jump. */ html body .gb2-drag-layer .gb2-player-row, html body .gb2-drag-layer.is-game .gb2-player-row{ box-sizing:border-box !important; min-height:58px !important; height:58px !important; padding-top:7px !important; padding-bottom:7px !important; border-radius:11px !important; } /* ========================================================================== 1.0.18 RESPONSIVE GAME BOARD CONTROLS + ORIGINAL TOKEN SCALING One control contract. No stacked 1.0.16/1.0.17 overrides. ========================================================================== */ /* The Field Preview itself is already a named container (gb-field). The controls now respond to the component width, not the browser viewport. */ html body .gb2 .gb2-board-controls-bar{ display:flex !important; flex-direction:column !important; gap:10px !important; padding:12px !important; border:1px solid rgba(255,255,255,.72) !important; border-radius:18px !important; background:linear-gradient(180deg,rgba(250,250,252,.78),rgba(238,239,243,.66)) !important; box-shadow:0 10px 30px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.78) !important; } html body .gb2 .gb2-board-controls-line{ display:flex !important; align-items:stretch !important; gap:10px !important; min-width:0 !important; } html body .gb2 .gb2-board-control-set{ display:flex !important; align-items:center !important; gap:8px !important; min-width:0 !important; flex:1 1 auto !important; } html body .gb2 .gb2-board-defense-set{flex:1.45 1 auto !important;} html body .gb2 .gb2-board-export-set{flex:.9 1 auto !important;} html body .gb2 .gb2-board-control-set > .gb2-label{ display:flex !important; align-items:center !important; flex:0 0 auto !important; min-width:max-content !important; margin:0 !important; color:#667085 !important; font-size:10px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.045em !important; } html body .gb2 .gb2-board-button-row{ display:flex !important; flex:1 1 auto !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; min-width:0 !important; height:50px !important; min-height:50px !important; margin:0 !important; padding:5px !important; gap:5px !important; border:1px solid #d1d6dd !important; border-radius:13px !important; background:#eef0f3 !important; box-shadow:none !important; overflow:hidden !important; } html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item{ display:flex !important; flex:1 1 0 !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; width:auto !important; min-width:0 !important; height:40px !important; min-height:40px !important; max-height:40px !important; margin:0 !important; padding:0 10px !important; border:2px solid #cfd5dc !important; border-radius:9px !important; background:#fff !important; color:#111317 !important; box-shadow:none !important; transform:none !important; transition:none !important; text-decoration:none !important; line-height:1 !important; white-space:nowrap !important; } /* Selected toggle state. */ html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item.is-active, html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item[aria-selected="true"]{ background:#111317 !important; color:#fff !important; border-color:#111317 !important; } /* Hover is ONLY a black border. No gray fill. */ @media (hover:hover) and (pointer:fine){ html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]):hover{ background:#fff !important; color:#111317 !important; border-color:#111317 !important; } } /* Reset actions are explicit because older gameboard.css has gray hover/focus rules with !important. These selectors intentionally win. */ @media (hover:hover) and (pointer:fine){ html body .gb2 #gb2BoardResetAll:hover, html body .gb2 #gb2BoardResetDefense:hover, html body .gb2 #gb2BoardResetBall:hover, html body .gb2 #gb2BoardResetRunners:hover{ background:#fff !important; color:#111317 !important; border-color:#111317 !important; } } html body .gb2 #gb2BoardResetAll:focus, html body .gb2 #gb2BoardResetDefense:focus, html body .gb2 #gb2BoardResetBall:focus, html body .gb2 #gb2BoardResetRunners:focus{ background:#fff !important; color:#111317 !important; border-color:#cfd5dc !important; outline:none !important; } html body .gb2 #gb2BoardResetAll:focus-visible, html body .gb2 #gb2BoardResetDefense:focus-visible, html body .gb2 #gb2BoardResetBall:focus-visible, html body .gb2 #gb2BoardResetRunners:focus-visible{ background:#fff !important; color:#111317 !important; border-color:#111317 !important; outline:2px solid rgba(17,19,23,.16) !important; outline-offset:2px !important; } /* Momentary press only. */ html body .gb2 #gb2BoardResetAll:active, html body .gb2 #gb2BoardResetDefense:active, html body .gb2 #gb2BoardResetBall:active, html body .gb2 #gb2BoardResetRunners:active{ background:#111317 !important; color:#fff !important; border-color:#111317 !important; } /* Print Field is a link but uses the same physical control. */ html body .gb2 a#gb2BoardPrint{ width:100% !important; flex:1 1 100% !important; } /* Touch devices never retain desktop hover/focus coloration. */ @media (hover:none), (pointer:coarse){ html body .gb2 #gb2BoardResetAll, html body .gb2 #gb2BoardResetDefense, html body .gb2 #gb2BoardResetBall, html body .gb2 #gb2BoardResetRunners{ background:#fff !important; color:#111317 !important; border-color:#cfd5dc !important; } html body .gb2 #gb2BoardResetAll:active, html body .gb2 #gb2BoardResetDefense:active, html body .gb2 #gb2BoardResetBall:active, html body .gb2 #gb2BoardResetRunners:active{ background:#111317 !important; color:#fff !important; border-color:#111317 !important; } } /* RESPONSIVE CONTROLS Keep groups intact. At narrower component widths whole control groups stack; individual buttons never wrap into random second rows. */ @container gb-field (max-width:860px){ html body .gb2 .gb2-board-controls-line{ display:grid !important; grid-template-columns:1fr !important; gap:9px !important; } html body .gb2 .gb2-board-control-set{ display:grid !important; grid-template-columns:76px minmax(0,1fr) !important; gap:8px !important; min-height:48px !important; } html body .gb2 .gb2-board-button-row{ width:100% !important; } } @container gb-field (max-width:560px){ html body .gb2 .gb2-board-controls-bar{ gap:8px !important; padding:9px !important; border-radius:16px !important; } html body .gb2 .gb2-board-control-set{ grid-template-columns:64px minmax(0,1fr) !important; gap:6px !important; } html body .gb2 .gb2-board-control-set > .gb2-label{ font-size:9px !important; } html body .gb2 .gb2-board-button-row{ height:46px !important; min-height:46px !important; padding:4px !important; gap:4px !important; } html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item{ height:36px !important; min-height:36px !important; max-height:36px !important; padding:0 5px !important; font-size:10px !important; } } @container gb-field (max-width:390px){ html body .gb2 .gb2-board-control-set{ grid-template-columns:58px minmax(0,1fr) !important; gap:5px !important; } html body .gb2 .gb2-board-control-set > .gb2-label{ font-size:8.5px !important; } html body .gb2 .gb2-board-button-row > .ff-suite-segmented-item{ padding:0 3px !important; font-size:9px !important; } } /* ORIGINAL GAME BOARD TOKEN SCALING, converted from viewport breakpoints to the actual Field Preview component width. */ @container gb-field (max-width:860px){ html body .gb2 button.gb2-field-token, html body .gb2 .gb2-empty-slot{ width:42px !important; min-width:42px !important; max-width:42px !important; height:42px !important; min-height:42px !important; max-height:42px !important; font-size:13px !important; border-width:2.5px !important; } html body .gb2 button.gb2-mini-token{ width:28px !important; min-width:28px !important; max-width:28px !important; height:28px !important; min-height:28px !important; max-height:28px !important; font-size:10px !important; } html body .gb2 button.gb2-board-runner{ width:38px !important; min-width:38px !important; max-width:38px !important; height:38px !important; min-height:38px !important; max-height:38px !important; font-size:11px !important; } html body .gb2 button.gb2-board-ball{ width:24px !important; min-width:24px !important; max-width:24px !important; height:24px !important; min-height:24px !important; max-height:24px !important; } html body .gb2 .gb2-field-token.gb2-player-token::after{ font-size:9.5px !important; padding:1px 4px !important; top:calc(100% + 2px) !important; } } @container gb-field (max-width:560px){ html body .gb2 button.gb2-field-token, html body .gb2 .gb2-empty-slot{ width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; max-height:40px !important; font-size:12.5px !important; } html body .gb2 button.gb2-mini-token{ width:28px !important; min-width:28px !important; max-width:28px !important; height:28px !important; min-height:28px !important; max-height:28px !important; font-size:10px !important; } html body .gb2 button.gb2-board-runner{ width:36px !important; min-width:36px !important; max-width:36px !important; height:36px !important; min-height:36px !important; max-height:36px !important; font-size:10.5px !important; } html body .gb2 button.gb2-board-ball{ width:24px !important; min-width:24px !important; max-width:24px !important; height:24px !important; min-height:24px !important; max-height:24px !important; } html body .gb2 .gb2-field-token.gb2-player-token::after{ font-size:9px !important; padding:1px 3px !important; top:calc(100% + 2px) !important; } } /* ========================================================================== 1.0.19 TOP SEGMENTED CONTROL STATE CLEANUP Board / Runners / Defense are segmented toggles. Reset / Print remain normal outlined actions. ========================================================================== */ /* Top-row segmented trays keep one outer container only. */ html body .gb2 #gb2BoardTokenMode, html body .gb2 #gb2RunnerControls, html body .gb2 #gb2DefenseControls{ padding:5px !important; gap:5px !important; border:1px solid #d1d6dd !important; border-radius:13px !important; background:#eef0f3 !important; box-shadow:none !important; } /* Top-row choices do NOT each carry a permanent border. That was creating the heavy/double-outlined look. */ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item{ border:0 !important; background:#fff !important; color:#111317 !important; box-shadow:none !important; outline:none !important; } /* Selected means black in every interaction state. */ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item.is-active, html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-selected="true"], html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item.is-active, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-selected="true"], html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item.is-active, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-selected="true"], html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item.is-active:hover, html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item.is-active:focus, html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item.is-active:focus-visible, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item.is-active:hover, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item.is-active:focus, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item.is-active:focus-visible, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item.is-active:hover, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item.is-active:focus, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item.is-active:focus-visible{ background:#111317 !important; color:#fff !important; border:0 !important; box-shadow:none !important; outline:none !important; } /* Also protect aria-driven selected buttons if JS uses attributes instead of class. */ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-pressed="true"]:hover, html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-selected="true"]:hover, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-pressed="true"]:hover, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-selected="true"]:hover, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-pressed="true"]:hover, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-selected="true"]:hover{ background:#111317 !important; color:#fff !important; box-shadow:none !important; } /* Unselected desktop hover = white with black inner outline. No layout shift because the outline is inset. */ @media (hover:hover) and (pointer:fine){ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]):hover, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]):hover, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]):hover{ background:#fff !important; color:#111317 !important; border:0 !important; box-shadow:inset 0 0 0 2px #111317 !important; } } /* Keyboard focus on an unselected segment is visible but neutral. */ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item:not(.is-active):focus-visible, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item:not(.is-active):focus-visible, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item:not(.is-active):focus-visible{ background:#fff !important; color:#111317 !important; outline:none !important; box-shadow:inset 0 0 0 2px #111317 !important; } /* On touch, selected remains black and unselected remains plain white. */ @media (hover:none), (pointer:coarse){ html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]), html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]), html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item:not(.is-active):not([aria-pressed="true"]):not([aria-selected="true"]){ background:#fff !important; color:#111317 !important; box-shadow:none !important; } html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item.is-active, html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2BoardTokenMode > .ff-suite-segmented-item[aria-selected="true"], html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item.is-active, html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2RunnerControls > .ff-suite-segmented-item[aria-selected="true"], html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item.is-active, html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-pressed="true"], html body .gb2 #gb2DefenseControls > .ff-suite-segmented-item[aria-selected="true"]{ background:#111317 !important; color:#fff !important; box-shadow:none !important; } } /* ========================================================================== 1.0.20 ACTION BUTTON RESET + ATHLETICS TOKEN WEIGHT ========================================================================== */ /* RESET + PRINT ARE MOMENTARY ACTIONS, NEVER SELECTED CONTROLS. Idle: white / light gray edge Hover: white / black edge Press: black / white text Release: immediately back to idle/hover. */ html body .gb2 #gb2BoardResetAll, html body .gb2 #gb2BoardResetDefense, html body .gb2 #gb2BoardResetBall, html body .gb2 #gb2BoardResetRunners, html body .gb2 a#gb2BoardPrint { background:#fff !important; color:#111317 !important; border:2px solid #cfd5dc !important; box-shadow:none !important; outline:none !important; transform:none !important; } /* Browser focus after a click is visually identical to idle. */ html body .gb2 #gb2BoardResetAll:focus, html body .gb2 #gb2BoardResetDefense:focus, html body .gb2 #gb2BoardResetBall:focus, html body .gb2 #gb2BoardResetRunners:focus, html body .gb2 a#gb2BoardPrint:focus { background:#fff !important; color:#111317 !important; border-color:#cfd5dc !important; box-shadow:none !important; outline:none !important; } /* Hover is outline-only. */ @media (hover:hover) and (pointer:fine) { html body .gb2 #gb2BoardResetAll:hover, html body .gb2 #gb2BoardResetDefense:hover, html body .gb2 #gb2BoardResetBall:hover, html body .gb2 #gb2BoardResetRunners:hover, html body .gb2 a#gb2BoardPrint:hover { background:#fff !important; color:#111317 !important; border-color:#111317 !important; box-shadow:none !important; } } /* Actual press is the only time an action becomes black. */ html body .gb2 #gb2BoardResetAll:active, html body .gb2 #gb2BoardResetDefense:active, html body .gb2 #gb2BoardResetBall:active, html body .gb2 #gb2BoardResetRunners:active, html body .gb2 a#gb2BoardPrint:active { background:#111317 !important; color:#fff !important; border-color:#111317 !important; box-shadow:none !important; } /* Keyboard-only focus is visible without resembling an active state. */ html body .gb2 #gb2BoardResetAll:focus-visible, html body .gb2 #gb2BoardResetDefense:focus-visible, html body .gb2 #gb2BoardResetBall:focus-visible, html body .gb2 #gb2BoardResetRunners:focus-visible, html body .gb2 a#gb2BoardPrint:focus-visible { background:#fff !important; color:#111317 !important; border-color:#111317 !important; outline:2px solid rgba(17,19,23,.14) !important; outline-offset:2px !important; } /* Touch never holds a desktop-hover appearance. */ @media (hover:none), (pointer:coarse) { html body .gb2 #gb2BoardResetAll, html body .gb2 #gb2BoardResetDefense, html body .gb2 #gb2BoardResetBall, html body .gb2 #gb2BoardResetRunners, html body .gb2 a#gb2BoardPrint { background:#fff !important; color:#111317 !important; border-color:#cfd5dc !important; box-shadow:none !important; } html body .gb2 #gb2BoardResetAll:active, html body .gb2 #gb2BoardResetDefense:active, html body .gb2 #gb2BoardResetBall:active, html body .gb2 #gb2BoardResetRunners:active, html body .gb2 a#gb2BoardPrint:active { background:#111317 !important; color:#fff !important; border-color:#111317 !important; } } /* ATHLETICS DEFENSIVE / PLAYER TOKENS Keep the responsive dimensions from 1.0.18, but add more visual mass. Runners remain dark and the softball remains yellow for instant role clarity. */ html body .gb2 button.gb2-field-token, html body .gb2 button.gb2-mini-token { color:#fff !important; background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.48) 0 7%,rgba(255,255,255,.14) 22%,transparent 36%), linear-gradient(180deg,#39a2ff 0%,#0083ff 52%,#0069d1 100%) !important; border:3px solid #0a365f !important; box-shadow: 0 7px 15px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.16) inset, 0 2px 2px rgba(255,255,255,.34) inset, 0 -3px 5px rgba(0,38,83,.28) inset !important; text-shadow:0 1px 2px rgba(0,0,0,.28) !important; font-weight:800 !important; } /* Tray pieces get the same Athletics identity, only scaled down. */ html body .gb2 button.gb2-mini-token { border-color:#0a365f !important; box-shadow: 0 5px 11px rgba(0,0,0,.28), 0 1px 2px rgba(255,255,255,.36) inset, 0 -2px 4px rgba(0,38,83,.25) inset !important; } /* A confident but restrained hover/readiness ring. */ @media (hover:hover) and (pointer:fine) { html body .gb2 button.gb2-field-token:hover, html body .gb2 button.gb2-mini-token:hover { border-color:#062a4e !important; filter:brightness(1.035) saturate(1.04) !important; box-shadow: 0 9px 19px rgba(0,0,0,.32), 0 0 0 3px rgba(0,131,255,.22), 0 2px 2px rgba(255,255,255,.38) inset, 0 -3px 5px rgba(0,38,83,.28) inset !important; } } /* Dragged player pieces stay substantial instead of becoming visually thin. */ html body .gb2 button.gb2-field-token.is-board-dragging, html body .gb2 .gb2-field-drag-ghost.is-preview-dragging { border:3px solid #062a4e !important; box-shadow: 0 16px 30px rgba(0,0,0,.34), 0 0 0 4px rgba(0,131,255,.24), 0 2px 2px rgba(255,255,255,.40) inset, 0 -3px 5px rgba(0,38,83,.28) inset !important; } /* ========================================================================== 1.0.23 EXACT LINEUP DROP TARGET + TRUE GRIP ANCHOR ========================================================================== */ /* The LEGAL DESTINATION ROW gets the glow. Never the source/placeholder. */ html body .gb2 .gb2-player-row.is-drop-target, html body .gb2 .gb2-flex-placeholder.is-drop-target{ outline:3px solid #0083ff !important; outline-offset:1px !important; border-color:#0083ff !important; background:#f7fbff !important; box-shadow: 0 0 0 5px rgba(0,131,255,.18), 0 0 24px 6px rgba(0,131,255,.28), 0 8px 18px rgba(15,23,42,.10) !important; } /* RUNNERS: same premium physical weight as player tokens, semantic dark color. */ html body .gb2 button.gb2-board-runner{ color:#fff !important; background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.36) 0 7%,rgba(255,255,255,.11) 22%,transparent 36%), linear-gradient(180deg,#44474e 0%,#24272d 52%,#111317 100%) !important; border:3px solid #050608 !important; box-shadow: 0 7px 15px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.11) inset, 0 2px 2px rgba(255,255,255,.24) inset, 0 -3px 5px rgba(0,0,0,.32) inset !important; text-shadow:0 1px 2px rgba(0,0,0,.34) !important; font-weight:800 !important; } /* BALL: same substantial edge/depth language, softball identity retained. */ html body .gb2 button.gb2-board-ball{ border:3px solid #8d6500 !important; background: radial-gradient(circle at 31% 20%,rgba(255,255,255,.72) 0 8%,rgba(255,255,255,.22) 25%,transparent 39%), radial-gradient(circle at 50% 55%,#fff46a 0%,#ffe31e 57%,#e7b800 100%) !important; box-shadow: 0 7px 14px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.26) inset, 0 2px 3px rgba(255,255,255,.55) inset, 0 -3px 5px rgba(153,108,0,.30) inset !important; } @media (hover:hover) and (pointer:fine){ html body .gb2 button.gb2-board-runner:hover{ border-color:#020304 !important; filter:brightness(1.05) !important; box-shadow: 0 9px 19px rgba(0,0,0,.34), 0 0 0 3px rgba(0,131,255,.20), 0 2px 2px rgba(255,255,255,.24) inset !important; } html body .gb2 button.gb2-board-ball:hover{ border-color:#6f4f00 !important; filter:brightness(1.035) saturate(1.04) !important; box-shadow: 0 9px 18px rgba(0,0,0,.30), 0 0 0 3px rgba(0,131,255,.18), 0 2px 3px rgba(255,255,255,.58) inset !important; } } /* ========================================================================== 1.0.25 ORIGINAL 1.7.9 LINEUP DRAG + ATHLETICS LEGAL-TARGET GLOW ========================================================================== */ html body .gb2 .gb2-player-row.is-drop-target, html body .gb2 .gb2-flex-placeholder.is-drop-target { outline:3px solid #0083ff !important; outline-offset:1px !important; border-color:#0083ff !important; background:#f7fbff !important; box-shadow: 0 0 0 5px rgba(0,131,255,.16), 0 0 22px 5px rgba(0,131,255,.28), 0 7px 16px rgba(15,23,42,.09) !important; } /* ========================================================================== 1.0.30 FLEX ROW VERTICAL RHYTHM Horizontal rails come from the original Game Board layout. FLEX only needs separation from the final batting row. ========================================================================== */ html body .gb2 .gb2-flex-wrap:not([hidden]){ margin-top:8px !important; } /* In locked Game Mode the normal lineup rhythm is 7px. */ html body .gb2.is-game .gb2-flex-wrap:not([hidden]){ margin-top:7px !important; } /* Do not add custom horizontal padding to FLEX. It already shares the lineup rails. */ html body .gb2 .gb2-flex-wrap{ padding-left:inherit; padding-right:inherit; }