/* ScreenScore menus: independent of league, skin and account colors. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--ss-menu-bg:linear-gradient(180deg,#0c210e,#071408);--ss-menu-text:#f2edd8;--ss-menu-muted:#929b86;--ss-menu-gold:#f0cc00;--ss-menu-border:#d0ccac;--ss-menu-line:rgba(208,204,172,.22);--ss-menu-item:rgba(0,0,0,.22);--ss-menu-hover:rgba(208,204,172,.08);--ss-menu-shadow:0 24px 70px rgba(0,0,0,.82);--ss-menu-ui:'Oswald','Arial Narrow',Arial,sans-serif;--ss-menu-copy:'Inter',Arial,sans-serif}
:is(#league-menu,#style-menu,#settings-panel,#fav-picker-box,#shuffle-modal-box,#cast-modal-box,#personalized-modal-box,#ss-tv-picker-panel,.pairing-dialog,.review-modal-card){background:var(--ss-menu-bg)!important;color:var(--ss-menu-text);border:1px solid var(--ss-menu-border)!important;border-radius:10px!important;box-shadow:var(--ss-menu-shadow)!important}
:is(#league-menu,#style-menu,#settings-panel,#fav-picker-box,#shuffle-modal-box,#cast-modal-box,#personalized-modal-box){font-family:var(--ss-menu-ui)}
:is(.primary-menu-title,.shuffle-modal-title,#ss-tv-picker-title,.pairing-dialog .dialog-header h2,.review-modal-card h3,#cast-modal-box h3,#personalized-modal-box h3){color:var(--ss-menu-gold)!important;font-family:var(--ss-menu-ui)!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase;line-height:1.2}
:is(#league-menu .lg-opt,#style-menu .style-opt,#ss-tv-picker-options button){font-family:var(--ss-menu-ui)!important;font-size:clamp(16px,1.35vw,20px)!important;font-weight:700!important;letter-spacing:.16em;text-transform:uppercase;background:var(--ss-menu-item)!important;color:var(--ss-menu-muted)!important;border:1px solid var(--ss-menu-line)!important;border-radius:7px;transition:background .15s ease,color .15s ease,border-color .15s ease}
:is(#league-menu .lg-opt,#style-menu .style-opt,#ss-tv-picker-options button):is(:hover,:focus-visible){background:var(--ss-menu-hover)!important;border-color:var(--ss-menu-border)!important;color:var(--ss-menu-text)!important}
:is(#league-menu .lg-opt.active,#style-menu .style-opt.active,#ss-tv-picker-options button[aria-checked=true]){background:var(--ss-menu-gold)!important;border-color:var(--ss-menu-gold)!important;color:#111!important}
:is(.primary-menu-close,.shuffle-modal-close,#ss-tv-picker-close,.pairing-dialog .dialog-close,.review-modal-close){display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:34px;padding:0!important;flex:0 0 auto;border:1px solid var(--ss-menu-line)!important;border-radius:5px!important;background:var(--ss-menu-item)!important;color:var(--ss-menu-muted)!important;font:600 20px/1 var(--ss-menu-ui)!important;cursor:pointer;transition:color .15s,border-color .15s}
:is(.primary-menu-close,.shuffle-modal-close,#ss-tv-picker-close,.pairing-dialog .dialog-close,.review-modal-close):is(:hover,:focus-visible){color:var(--ss-menu-text)!important;border-color:var(--ss-menu-border)!important}
:is(#ss-tv-picker-panel,#league-menu,#style-menu,#settings-panel,.pairing-dialog,.review-modal-card) :is(button,input,select,a):focus-visible{outline:3px solid var(--ss-menu-gold)!important;outline-offset:2px}
#ss-tv-picker{background:rgba(0,0,0,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#ss-tv-picker-panel{width:min(900px,100%);padding:20px;max-height:calc(100dvh - 32px)}
#ss-tv-picker header{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--ss-menu-line)}
#ss-tv-picker-title{font-size:clamp(18px,1.5vw,24px);margin:0}
#ss-tv-picker-options{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px}
#ss-tv-picker-options button{min-height:72px;text-align:center;padding:14px;white-space:normal;overflow-wrap:anywhere}
#ss-tv-picker-options button:disabled{opacity:.45;cursor:default}
/* Mobile account menus share the shell; score tables retain their own type. */
:is(#reaction-profile,#reaction-picker,#ss-portrait-help,#ss-portrait-welcome .ss-welcome-panel){background:var(--ss-menu-bg)!important;color:var(--ss-menu-text)!important;border:1px solid var(--ss-menu-border)!important;border-radius:10px!important;box-shadow:var(--ss-menu-shadow);font-family:var(--ss-menu-copy)!important}
:is(#reaction-profile,#reaction-picker,#ss-portrait-help,#ss-portrait-welcome) h2{font:700 24px/1.2 var(--ss-menu-ui)!important;letter-spacing:.12em;color:var(--ss-menu-gold)!important;text-transform:uppercase}
:is(#reaction-profile,#reaction-picker,#ss-portrait-help) button{font-family:var(--ss-menu-ui)!important;min-height:44px}
:is(#reaction-profile,#reaction-picker,#ss-portrait-help,#ss-portrait-welcome) :is(button,input,select,a):focus-visible{outline:3px solid var(--ss-menu-gold)!important;outline-offset:2px}
/* Grid builders are menus, while tile documents remain skin-owned. */
body:not([data-cast-receiver]) :is(.control-bar,.preset-controls,.tile-editor){background:var(--ss-menu-bg);border-color:var(--ss-menu-line);color:var(--ss-menu-text)}
:is(.control-bar,.preset-controls,.tile-editor,.pairing-dialog) :is(button,select,input){font-family:var(--ss-menu-ui);font-size:16px;min-height:44px}
:is(.control-bar,.preset-controls,.tile-editor) :is(select,input){background:var(--ss-menu-item);border-color:var(--ss-menu-line);color:var(--ss-menu-text)}
:is(.control-bar,.preset-controls) button[aria-pressed=true],.tile-editor-done,.phone-pair-button{background:var(--ss-menu-gold);color:#111;border-color:var(--ss-menu-gold)}
.pairing-dialog :is(p,li){font-family:var(--ss-menu-copy);line-height:1.6}
@media(max-width:700px){#ss-tv-picker-panel{padding:16px}#ss-tv-picker-options button{min-height:54px}:is(.primary-menu-close,.shuffle-modal-close,#ss-tv-picker-close,.pairing-dialog .dialog-close,.review-modal-close){width:44px;height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){#ss-tv-picker *, .primary-menu-close,.review-modal-close,.pairing-dialog .dialog-close{transition:none!important}}
@supports not (backdrop-filter:blur(5px)){#ss-tv-picker{background:rgba(0,0,0,.85)}}

#style-menu .style-opt.active :is(.style-opt-name,.style-opt-desc),#style-menu .style-opt.active::after{color:#111!important}
#settings-panel .sp-seg-btn.active,#personalized-modal-box .sp-seg-btn.active{background:var(--ss-menu-gold);border-color:var(--ss-menu-gold);color:#111}
#fav-picker-box h3{font:700 21px/1.2 var(--ss-menu-ui);letter-spacing:.16em;color:var(--ss-menu-gold)}
#fav-picker-box p{font:400 14px/1.6 var(--ss-menu-copy);color:var(--ss-menu-muted)}

#style-menu .style-opt-name{font:700 clamp(16px,1.35vw,20px)/1.3 var(--ss-menu-ui)!important}
#style-menu .style-opt-desc{font:400 13px/1.5 var(--ss-menu-copy)!important;letter-spacing:0;color:var(--ss-menu-muted)}
:is(#settings-panel,#fav-picker-box,#shuffle-modal-box,#cast-modal-box,#personalized-modal-box) :is(.sp-seg-btn,.modal-btn,.pb-modal-btn,select,input[type=text],input[type=number]){font-family:var(--ss-menu-ui);font-size:16px;min-height:44px}
:is(#settings-panel,#personalized-modal-box) .sp-label{font-family:var(--ss-menu-ui);font-size:16px}
:is(#settings-panel,#personalized-modal-box) .sp-sub{font-family:var(--ss-menu-copy);font-size:13px;line-height:1.5}

/* Compact sport controls and refresh settings use the same menu palette. */
:is(#standings-controls-panel,#generic-standings-controls-panel,#bb-color-menu){background:var(--ss-menu-bg)!important;color:var(--ss-menu-text)!important;border:1px solid var(--ss-menu-border)!important;border-radius:10px;box-shadow:var(--ss-menu-shadow);font-family:var(--ss-menu-ui)}
.ss-refresh-settings :is(button,input){font-family:var(--ss-menu-ui);background:var(--ss-menu-item);border-color:var(--ss-menu-line);color:var(--ss-menu-text);font-size:16px}
.ss-refresh-settings button[aria-pressed=true]{background:var(--ss-menu-gold);border-color:var(--ss-menu-gold);color:#111}
:is(#settings-panel,#fav-picker-box,#shuffle-modal-box,#cast-modal-box,#personalized-modal-box,#standings-controls-panel,#generic-standings-controls-panel,#bb-color-menu,.ss-refresh-settings) :is(button,input,select,a):focus-visible{outline:3px solid var(--ss-menu-gold)!important;outline-offset:2px}

/* Keep remote focus inside the scrollable option; no clipped outer ring on first open. */
#ss-tv-picker-options button:focus-visible{outline-offset:-4px!important}
#ss-tv-picker-options button[aria-checked=true]:focus-visible{outline-color:#111!important}
