@import "icons.css";

@font-face {
font-family: 'Annapolis';
font-style: normal;
font-weight: 400;
src: local('Annapolis'), url('fonts/annapolis.woff') format('woff');
}

@font-face {
font-family: 'Annapolis Italic';
font-style: normal;
font-weight: 400;
src: local('Annapolis Italic'), url('fonts/annapolis-italic.woff') format('woff');
}

:root {
--nav-height: 100px;
--full-width: 1280px;
--background: #f8f9fa;
--triforce: #ffdf61;
--mlb-green: #00b03d;
--mlb-red: #bf0d3e;
--mlb-navy: #041e42;
--mlb-blue: #002d72;
}

* {
font-family: Arial, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
scroll-padding-top: var(--nav-height);
-webkit-text-size-adjust: 100%;
}

body {
background: var(--background);
padding-top: var(--nav-height);
min-height: 100vh;
overflow-x: hidden;
position: relative;
z-index: 1;
}

section, main, aside {
margin: 1.0rem auto 5.0rem auto;
}

a         { color: var(--mlb-blue); }
a:hover   { color: var(--mlb-navy); }

/******* SIGN UP/IN *******/
#backdrop {
z-index: 9999;
display: none;
position: fixed;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
inset: 0;
padding: 0.5rem;
background: rgba(0,0,0,.75);
backdrop-filter: blur(5px);
}

#backdrop.open {
display: flex;
}

#overlay {
position: relative;
width: 100%;
max-width: 27.5rem;
background: var(--background);
border: 1px solid #000;
border-radius: .625rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: auto;
}

#overlay-close {
position: absolute;
top: 12px; right: 14px;
background: none;
border: none;
color: #6b7694;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 2px 7px;
border-radius: 6px;
z-index: 1;
transition: background .15s, color .15s;
}

#overlay-close:hover {
background: rgba(255,255,255,.08);
color: #e2e8f0;
}

#overlay a {
color: var(--mlb-blue);
}

.panel {
display: none;
}

.panel.active {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: .75rem;
}

.link {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: inherit;
cursor: pointer;
color: var(--mlb-blue);
text-decoration: underline;
}

.link:hover {
text-decoration: underline;
}

.sent-icon {
font-size: 2.25rem;
text-align: center;
display: block;
margin: 1.75rem 0;
}

.sent-email {
font-size: .85rem;
text-align: center;
margin-top: .85rem;
padding: .5rem .75rem;
}

.register {
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
}

.register-card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #fff;
border: 1px solid var(--mlb-navy);
border-radius: 1.0rem;
padding: 1.75rem 1.25rem;
width: 100%;
max-width: 30rem;
min-height: 90vh;
}

.subtitle {
font-size: .9rem;
margin: .75rem 0 0 0;
text-decoration: underline;
text-align: center;
}

.benefits {
list-style: none;
display: flex;
flex-direction: column;
gap: .05rem;
margin-top: .5rem;
max-width: fit-content;
}

.benefits li {
font-size: .85rem;
display: flex;
align-items: center;
gap: .5rem; }

.benefits li::before {
content: '✓';
font-weight: 600;
}

.alert-message {
padding: .75rem 1rem;
border-radius: .375rem;
font-size: .875rem;
margin: 1.25rem 0 0 0;
}

.alert-error {
background: rgba(245,101,101,.12); 
border: 1px solid rgba(245,101,101,.35);
}

.alert-success {
background: rgba(72,187,120,.12);
border: 1px solid rgba(72,187,120,.35);
}

form {
display: flex;
flex-direction: column;
gap: .5rem;
margin-top: 1.05rem;
}

label {
display: block;
font-size: .85rem;
margin-bottom: .25rem;
}

input[type="email"], input[type="password"], input[type="text"] {
width: 100%;
min-width: 20rem;
border: .125rem solid #dee2e6;
border-radius: 6px;
font-size: 1.0rem;
padding: .65rem .75rem;
outline: none;
transition: border-color .15s;
}

input:focus {
border-color: var(--mlb-navy);
}

.tooltip-icon {
display: inline-block;
width: 1.0rem;
height: 1.0rem;
line-height: 1.0rem;
text-align: center;
border-radius: 50%;
background: var(--mlb-blue);
color: #fff;
font-size: .75rem;
cursor: pointer;
position: relative;
}

.tooltip-box {
display: none;
position: absolute;
background: var(--background);
color: #000;
padding: 8px;
border-radius: 6px;
font-size: .75rem;
width: max-content;
top: 0%;
left: 125%;
z-index: 10;
text-align: left;
line-height: 1.0rem;
border: 1px solid black;
}

.tooltip-icon:hover .tooltip-box {
display: block;
}

.password-hint {
font-size: .75rem;
margin-top: .25rem;
}

.strength-bar {
height: 4px;
border-radius: 2px;
margin-top: .5rem;
overflow: hidden;
}

.strength-fill {
height: 100%;
width: 0%;
border-radius: 2px;
transition: width .25s, background .25s;
}

.terms-box {
display: flex;
align-items: flex-start;
gap: .375rem;
margin: .75rem 0;
}

.terms-box p {
text-align: center;
font-size: .85rem;
}

.terms-box button {
margin-left: auto;
font-size: .85rem;
}

.submit {
max-width: 20rem;
background: var(--mlb-navy);
color: #fff;
border: none;
border-radius: .5rem;
font-size: 1.0rem;
font-weight: 600;
padding: .75rem 1.375rem;
cursor: pointer;
transition: background .15s;
}

.submit:hover {
background: var(--mlb-blue);
}

.register-footer {
text-align: center;
margin-top: 1.5rem;
font-size: .85rem;
}

/******* HEADER *******/
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: var(--background);
display: flex;
align-items: center;
z-index: 1000;
border-bottom: .5rem solid var(--mlb-navy);
}

.frame {
width: 100%;
max-width: var(--full-width);
margin: 0 auto;
padding: 0 .75rem;
display: flex;
align-items: center;
gap: 1.0rem;
}

.frame div:first-child {
margin-right: auto;
}

.company {
display: flex;
align-items: center;
gap: .25rem;
}

.company-logo img {
height: 3.75rem;
width: auto;
}

.company-name {
margin: 0 .375rem -.375rem 0;
}

.company-name strong {
font-family: 'Annapolis', sans-serif;
font-size: 2.333rem;
line-height: 0;
}

.company-name em {
font-family: 'Annapolis Italic', sans-serif;
font-size: 1.333rem;
display: inline-block;
transform: scaleY(1.5);
padding: 0 3px 0 3px;
}

.company-name a {
text-decoration: none;
color: inherit;
padding: .25px;
}

.company-big {
transform: scale(3.33);
padding: 9rem 0;
}

.buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 100px;
row-gap: 3px;
padding-top: 1.0rem;
line-height: 0px;
}

.sign-in {
padding: 0.5rem;
background: var(--triforce);
border-radius: 9px;
color: #000000;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
text-transform: uppercase;
border: 1px solid black;
}

.sign-in:hover {
box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.sign-up {
color: #000000;
font-size: .8rem;
cursor: pointer;
white-space: nowrap;
background: none;
border: none;
}

.sign-up:hover {
text-decoration: underline;
}

.menu {
width: 30px;
height: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.menu span {
width: 100%;
height: 3px;
background: #000000;
transition: all .3s ease;
transform-origin: center;
}

.menu.active span:nth-child(1) {
transform: translateY(10.5px) rotate(45deg);
}

.menu.active span:nth-child(2) {
opacity: 0;
}

.menu.active span:nth-child(3) {
transform: translateY(-10.5px) rotate(-45deg);
}

.mainmenu {
position: fixed;
right: calc((100% - var(--full-width)) / 2);
top: var(--nav-height);
width: max-content;
max-width: 90vw;
max-height: 0;
background: var(--background);
overflow: hidden;
border-width: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
transition: max-height .3s ease;
text-transform: uppercase;
z-index: 1001;
}

.mainmenu a, .menuitem {
display: block;
padding: 1.1rem;
color: #000;
text-decoration: none;
font-size: 1.0rem;
border-bottom: 1px solid black;
}

.mainmenu a:hover {
text-decoration: underline;
background: var(--triforce);
box-shadow: 0 0 6px rgba(0,0,0,0.9);
}

.mainmenu a:last-child, .menuitem:last-child {
border-bottom: none;
}

.mainmenu.active {
max-height: max-content;
border: 1px solid #000;
}

.menuitem {
cursor: pointer;
position: relative;
user-select: none;
}

.menuitem.active {
padding-bottom: 0px;
}

.menuitem.active .dropdown i {
transform: rotate(180deg);
}

.dropdown {
display: flex;
justify-content: space-between;
align-items: center;
}

.dropdown i {
font-style: normal;
font-size: 1.2rem;
}

.submenu {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
}

.submenu.active {
max-height: max-content;
margin-top: .925rem;
border-top: 1px solid #000000;
}

.inactive {
filter: grayscale(60%);
pointer-events: none;
user-select: none;
cursor: not-allowed;
opacity: 0.4;
}

/* ============================================================
   sport-subnav.css — TriSync Sports section navigation
   Drop this file after styles.css in your <head>.

   Depends on CSS variables already defined in styles.css:
     --nav-height, --full-width, --background,
     --mlb-navy, --mlb-blue, --mlb-red, --triforce
   ============================================================ */


/* ── Layout shell ────────────────────────────────────────── */

/*
  The sub-nav sits immediately below the fixed .header.
  It is also fixed so page content never scrolls under it.
  We offset body padding to account for its added height.

  Two height tokens for easy adjustment:
    --subnav-tab-h   : the ROTO / DFS / PROPS strip
    --subnav-sub-h   : the props sub-item strip (only visible for PROPS)
*/
:root {
  --subnav-tab-h: 44px;
  --subnav-sub-h: 36px;
}

/* When the sub-nav is present, body needs extra top padding.
   JS adds/removes .has-subnav on <body> and
   .has-subrow on <body> when the sub-row is visible. */
body.has-subnav {
  padding-top: calc(var(--nav-height) + var(--subnav-tab-h));
}

body.has-subnav.has-subrow {
  padding-top: calc(var(--nav-height) + var(--subnav-tab-h) + var(--subnav-sub-h));
}


/* ── Outer wrapper ───────────────────────────────────────── */

.sport-subnav {
  display: none;                       /* hidden by default; JS shows it */
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 999;                        /* just below .header (1000) */
  background: var(--mlb-navy);
  border-bottom: 3px solid var(--mlb-red);
}

.sport-subnav.visible {
  display: block;
}


/* ── Tab strip (ROTO · DFS · PROPS) ─────────────────────── */

.subnav-tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--full-width);
  margin: 0 auto;
  height: var(--subnav-tab-h);
}

.subnav-tab {
  flex: 1;                             /* equal-width, fills full row */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 .5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-family: Arial, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: background .15s, color .15s;

  /* vertical separators between tabs */
  border-right: 1px solid rgba(255,255,255,0.12);
}

.subnav-tab:last-child {
  border-right: none;
}

.subnav-tab:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
}

.subnav-tab.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Gold underline on active tab — mirrors existing .header border style */
.subnav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  background: var(--triforce);
  border-radius: 3px 3px 0 0;
}

/* Sport badge — small label above the tab name (e.g. "MLB") */
.subnav-tab-badge {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--triforce);
  line-height: 1;
}

/* Hide the badge on DFS and PROPS tabs; only first tab shows it */
.subnav-tab:not(:first-child) .subnav-tab-badge {
  visibility: hidden;
}

.subnav-tab-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}


/* ── Sub-item row (e.g. PROPS sub-categories) ───────────── */

.subnav-sub {
  display: none;                       /* JS shows this when needed */
  align-items: center;
  width: 100%;
  max-width: var(--full-width);
  margin: 0 auto;
  height: var(--subnav-sub-h);
  padding: 0 .75rem;
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav-sub::-webkit-scrollbar {
  display: none;
}

.subnav-sub.visible {
  display: flex;
}

/* "PROPS ▸" section label */
.subnav-sub-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: .625rem;
  border-right: 1px solid rgba(255,255,255,0.15);
  margin-right: .375rem;
}

/* Individual sub-item pills */
.subnav-sub-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  transition: background .12s, color .12s, border-color .12s;
}

.subnav-sub-item:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

.subnav-sub-item.active {
  background: rgba(255,223,97,0.18);   /* --triforce tint */
  color: var(--triforce);
  border-color: rgba(255,223,97,0.35);
}

/* Dot accent before each sub-item label */
.subnav-sub-item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
  flex-shrink: 0;
}


/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .subnav-tab-label {
    font-size: .68rem;
  }

  .subnav-tab-badge {
    font-size: .55rem;
  }

  .subnav-sub {
    padding: 0 .5rem;
  }
}

@media (max-width: 480px) {
  .subnav-tab-label {
    font-size: .62rem;
    letter-spacing: .04em;
  }
}

/******* HOME PAGE *******/
.gridlines {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
opacity: .05;
background-image: repeating-linear-gradient(90deg, transparent, transparent 60px, var(--mlb-red) 60px, var(--mlb-red) 61px), 
repeating-linear-gradient(0deg, transparent, transparent 60px, var(--mlb-red) 60px, var(--mlb-red) 61px);
}

.start::before, .dark-box::before, .banner::before, .player::before {
content: "";
position: absolute;
pointer-events: none;
inset: 0;
z-index: 0;
opacity: .2;
background-image: repeating-linear-gradient(90deg,transparent,transparent 60px,var(--mlb-red) 60px,var(--mlb-red) 61px),
repeating-linear-gradient(0deg,transparent,transparent 60px,var(--mlb-red) 60px,var(--mlb-red) 61px);
}

.container {
max-width: var(--full-width);
margin: 0 auto;
background: transparent;
box-shadow: 0 .625rem 3.125rem rgba(0,0,0,0.25);
overflow: hidden;
}

.wide {
width: 90%;
max-width: 1080px;
margin-inline: auto;
}

.home {
width: 90%;
max-width: 900px;
margin-inline: auto;
}

.graph {
float: right;
width: auto;    
max-height: 9.5rem;
border-radius: 0.5rem;
border: .15rem solid rgba(0, 0, 0, .1);
margin: 0 0 .25rem .75rem;
}

.headline {
margin-top: 2.0rem;
text-align: center;
}

.headline h1 {
font-size: 1.25rem;
display: inline;
}

.headline i {
font-size: 5.25rem;
margin: -.5rem 1.5rem .5rem .5rem;
float: right;
color: var(--mlb-navy);
text-shadow: 4px 3px 0px var(--triforce);
-webkit-text-stroke-color: var(--background);
-webkit-text-stroke-width: 3px;
}

.highlight {
display: inline;
color: var(--mlb-red);
font-size: 1.333rem;
font-weight: 600;
text-transform: uppercase;
}

.full-text {
text-align: left;
margin-top: 1.0rem;
line-height: 1.333rem;
}

.preview-text, .preview-link {
display: none;
text-align: left;
margin-top: 1.0rem;
word-spacing: -0.1rem;
}

.main-grid {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.0rem;
}

.main-grid a {
color: inherit;
text-decoration: none;
display: flex;
flex: 1;
}

.grid-box {
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 6px 12px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
border: 1px solid #ccc;
border-radius: .625rem;
padding: 1.0rem 2.0rem;
transition: all .3s ease;
flex: inherit;
}

.grid-box:hover {
transform: translateY(-2.5px);
box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
border-color: var(--mlb-red);
}

.grid-box u {
color: var(--mlb-red);
}

.grid-box ul {
margin: 1.0rem auto;
}

.grid-box h3 {
white-space: nowrap;
margin-bottom: .5rem;
}

.now-playing {
min-width: 33.33%;
}

.now-playing h3 {
font-size: 2.5rem;
}

.format {
display: grid;
gap: 1.0rem;
flex: 1;
}

.coming-soon {
filter: grayscale(60%);
opacity: 0.4;
pointer-events: none;
user-select: none;
cursor: not-allowed;
}

.start {
margin: 0 auto;
padding: .5rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
position: relative;
}

.start h1, .start h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}

.dark-box {
padding: 1.75rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
line-height: 1.4;
position: relative;
}

.dark-box h1, .dark-box h2 {
font-size: 2.25rem;
line-height: 1.25;
text-align: center;
padding-bottom: 1.0rem;
}

.dark-box h3 {
font-family: 'Playfair Display', serif;
font-size: 1.75rem;
line-height: 1.25;
margin-bottom: .925rem;
color: var(--triforce);
}

.box {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
border: 1px solid #ccc;
border-radius: .625rem;
padding: 1.25rem;
}

.box a {
margin: 1.5rem auto;
display: block;
text-align: center;
}

.box h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}

.box hr {
width:75%;
margin: .5rem auto;
}

.box ul {
list-style: none;
text-align: left;
margin-top: 1.0rem;
}

.box li {
margin: .5rem auto;
line-height: 1.5rem;
}

.box li::before {
content: "✓";
color: var(--mlb-green);
margin-right: .5rem;
}

.box.help li {
display: list-item;
}

.box.help li::before {
content: none;
}

.box.help p {
margin: 3.0rem 0 1.0rem 0;
text-decoration:  underline;
}

.box.help h2 {
font-size: 1.5rem;
}

.box.faqs h2 {
margin-bottom: 2.0rem;
}

.summary {
text-align: center;
}

.summary h2 {
font-size: 1.25rem;
display: inline;
}

.feature-grid, .stats-grid, .article-grid, .review-grid {
margin: 1.5rem auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
gap: 2.0rem;
}

.feature-card {
padding: 1.0rem;
background: rgba(255,255,255,0.05);
border-radius: .625rem;
border: 1px solid rgba(255,255,255,0.10);
}

.feature-card p {
color: rgba(255,255,255,0.75);
font-size: 1.0rem;
}

.feature-card a {
color: inherit;
}

.feature-icon {
font-size: 3.0rem;
margin-bottom: 0.75rem;
}

.stat {
text-align: center;
}

.stat-number {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 900;
color: var(--triforce);
}

.stat-label {
color: rgba(255,255,255,0.75);
font-size: 1.0rem;
text-transform: uppercase;
letter-spacing: .05rem;
}

.faq-item {
overflow: hidden;
border: 1px solid #ccc;
border-radius: .5rem;
background-color: var(--background);
margin-bottom: .75rem;
transition: box-shadow .3s ease;
}

.faq-item h3 {
font-size: inherit;
font-weight: normal;
}

.faq-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.faq-item summary {
cursor: pointer;
padding: 1.0rem .5rem;
color: var(--mlb-navy);
list-style: none;
outline: none;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
}

.faq-item summary::after {
content: "▼";
float: right;
font-size: .85rem;
transition: transform .3s ease;
}

.faq-item[open] summary::after {
transform: rotate(-180deg);
}

.answer {
padding: .75rem;
border-top: 1px solid #ccc;
background-color: #fff;
}

.answer ul { 
margin: 0.5rem auto; 
}

.articles {
color: inherit;
}

.articles h2 {
font-size: 1.5rem;
}

.article {
border-radius: .625rem;
border: 1px solid #e5e7eb;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
background: rgba(255,255,255,0.75);
transition: box-shadow .2s, transform .2s;
}

.article:hover {
box-shadow: 0 8px 30px rgba(0,0,0,.1);
transform: translateY(-2px);
}

.article-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: top;
display: block;
}

.article-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
}

.article-cat {
font-size: .75rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: #6b7280;
}

.article-title {
color: #000;
font-size: 1.0rem;
font-weight: 600;
margin: 1.0rem 0 .5rem 0;
}

.article-excerpt {
font-size: .90rem;
color: #6b7280;
line-height: 1.55;
margin: 0 0 1.0rem;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.article-date {
font-size: .75rem;
color: #9ca3af;
}

.view-all {
text-align: end;
}

.review-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
place-items: center;
align-items: stretch;
}

.review-card {
background: rgba(255,255,255,0.75);
backdrop-filter: blur(0px);
padding: 1.0rem;
border-radius: .625rem;
border: 1px solid #ccc;
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 0px 6px 12px rgba(0,0,0,0.1);
}

.review-card p {
color: rgba(0,0,0,0.75);
font-size: 1.0rem;
}

.user {
display: flex;
align-items: center;
gap: .5rem;
margin-top: .75rem;
}

.user img {
width: 50px;
height: auto;
border-radius: 50%;
}

.user div {
display: flex;
flex-direction: column;
}

.user strong {
color: #000;
font-size: .95rem;
}

.user span {
color: var(--mlb-navy);
font-size: .85rem;
}

.stars {
color: #ffcc00;
font-size: 1.25rem;
margin-bottom: .5rem;
text-shadow: .5px .5px 3px var(--mlb-navy);
}

/******* LEAGUE PAGE *******/
.banner {
margin: 0 auto 0 auto;
padding: 1.0rem .25rem 1.0rem .25rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
line-height: 1.25;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.banner h1, .banner .icon {
display: inline-block;
font-size: 2.25rem;
text-shadow: 3px 2px 1px var(--mlb-red);
}

.banner span {
font-size: 1.25rem;
display: flow;
text-shadow: none;
margin-top: .25rem;
}

.banner a {
color: inherit;
text-decoration: none;
margin: 0 .25rem;
}

.banner.title {
margin-bottom: 2.0rem;
text-shadow: none;
}

.banner.title h1 {
text-shadow: none;
}

.group {
display: flex;
flex-wrap: nowrap;
gap: .925rem;
}

.tools {
padding: 1.25rem;
background: var(--background);
border-bottom: .125rem solid #dee2e6;
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: .925rem;
backdrop-filter: blur(0px);
margin: 0;
}

.tools > * {
flex: 1;
}

.tools input {
min-width: 25rem;
height: 3.0rem;
font-size: .8rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
transition: border-color .3s;
}

.tools input::placeholder {
color: #000;
opacity: 1;
font-size: .8rem;
}

.tools select {
height: 3.0rem;
font-size: .8rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
transition: border-color .3s;
cursor: pointer;
}

.tools input:focus, .tools select:focus, .controls select:focus, .data select:focus {
outline: none;
border-color: var(--mlb-navy);
}

.tools button {
height: 3.0rem;
font-size: 1.0rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
transition: border-color .3s;
cursor: pointer;
max-width: fit-content;
background-color: #fff;
}

.variance-toggle {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
font-size: .8rem;
column-gap: 5px;
row-gap: 0px;
}

.variance {
grid-column: 1 / -1;
text-align: center;
}

.switch {
position: relative;
display: inline-block;
width: 3.0rem;
height: 1.625rem;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
inset: -1px;
background: #fff;
border-radius: .5rem;
border: .125rem solid #dee2e6;
transition: .25s;
cursor: pointer;
}

.slider:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
left: 3px;
top: 3px;
background: var(--mlb-navy);
border-radius: 50%;
transition: .25s;
opacity: .9;
}

.switch input:checked + .slider {
background: var(--mlb-navy);
}

.switch input:checked + .slider:before {
transform: translateX(22px);
background: #fff;
}

.controls {
margin: 0;
padding: 1.0rem 1.5rem;
font-size: .8rem;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(5px);
}

.controls input {
height: 3.0rem;
}

.pagination-controls {
text-align: center;
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
}

.pagination-controls div:first-child {
text-align: left;
margin-right: auto;
display: flex;
align-items: center;
gap: .25rem;
}

.pagination-controls select {
font-size: .8rem;
border-radius: .5rem;
padding: .5rem .25rem .5rem .25rem;
border: .125rem solid #dee2e6;
cursor: pointer;
transition: border-color .3s;
}

.pagination-buttons {
display: flex;
gap: .5rem;
}

.pagination-buttons button {
padding: .5rem 1.0rem;
border: .125rem solid #dee2e6;
border-radius: .5rem;
cursor: pointer;
transition: all .3s;
background: var(--background);
}

.pagination-buttons button:disabled {
opacity: .35;
cursor: not-allowed;
}

.pagination-buttons button:hover:not(:disabled) {
border-color: var(--mlb-navy);
}

.page-info {
display: inline-flex;
align-items: center;
min-width: 2.5rem;
}

.listing {
margin-top: 0;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
margin-bottom: 10rem;
}

lineup {
text-align: center;
}

.no-results {
display: none;
text-align: center;
padding: 5rem 0rem;
}

.no-results i {
font-size: 2.0rem; 
margin-bottom: 0.75rem;
color: var(--mlb-navy);
}

table {
width: 100%;
background: rgba(255,255,255,0.75);
border-collapse: separate;
border-spacing: 0;
}

thead {
background: var(--mlb-navy);
color: var(--background);
}

th {
padding: .75rem .25rem;
cursor: pointer;
user-select: none;
white-space: nowrap;
vertical-align: middle;
}

th:first-child {
padding-left: 0.75rem;
}

#player-data th:first-child {
padding-left: 1.00rem;
padding-right: 0.50rem;
}

th:last-child {
padding-right: 0.75rem;
}

/*
#player-data th:last-child {
padding-right: 0.00rem;
}
*/

th.sortable::after {
content: '\f0dc';
font-family: 'Font Icons';
font-weight: 900;
margin-left: 9px;
opacity: .5;
}

th.sortable.def {
min-width: 6.0rem;
}

th.sort-asc::after {
content: '\f0de';
opacity: 1;
}

th.sort-desc::after {
content: '\f0dd';
opacity: 1;
}

abbr {
text-decoration: none;
}

tbody tr {
white-space: nowrap;
}

tbody tr:hover {
background: var(--background);
}

tbody td {
border-bottom: 1px solid #dee2e6;
padding: .5rem .25rem;
vertical-align: middle;
white-space: nowrap;
}

tbody td:first-child {
padding-left: 0.75rem;
}

#player-data tbody td:first-child {
padding-left: 1.00rem;
padding-right: 0.50rem;
}

tbody td:last-child {
padding-right: 0.75rem;
}
/*
#player-data tbody td:last-child {
padding-right: 0.00rem;
}
*/
.left {
text-align: left !important; 
}

.center {
text-align: center !important; 
}

.right {
text-align: right !important;
}

.favorites {
font-weight: normal;
font-size: 1.25rem;
line-height: 1.00rem;
}

.favorite {
cursor: pointer;
font-size: 1.10rem;
line-height: 1.00rem;
}

.favorite-button {
display: flex;
align-items: center;
justify-content: center;
max-width: fit-content;
height: 3.0rem;
border-radius: .5rem;
padding: .5rem;
border: .125rem solid #dee2e6;
background-color: white;
}

.fav-tracker {
position: fixed;
bottom: 1.5rem;
right: 1.0rem;
z-index: 999;
background: var(--bg-card, #1a1f2e);
border: 1px solid var(--border, #2e3650);
border-radius: 10px;
padding: 0.75rem 1rem;
min-width: 170px;
box-shadow: 0 4px 18px rgba(0,0,0,0.45);
font-size: 0.85rem;
display: none;
}

.fav-tracker.has-favs {
display: block;
}

.fav-tracker-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
gap: 0.5rem;
}

.fav-tracker-title {
font-weight: 700;
color: var(--accent, #f5c518);
white-space: nowrap;
}

.fav-tracker-clear {
background: none;
border: 1px solid var(--border, #2e3650);
border-radius: 5px;
color: var(--text-muted, #8892a4);
font-size: 0.72rem;
padding: 2px 7px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
}

.fav-tracker-clear:hover {
border-color: var(--danger, #e05252);
color: var(--danger, #e05252);
}

.fav-tracker-body {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

.fav-tracker-row {
display: flex;
justify-content: space-between;
gap: 1rem;
}

.fav-tracker-label {
color: var(--text-muted, #8892a4);
}

.fav-tracker-value {
font-weight: 600;
color: var(--text, #e8eaf0);
}

.player-link {
color: var(--mlb-navy);
text-decoration: none;
}

.player-link:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.team-logo {
height: 1.5em;
width: auto;
vertical-align: -.375em;
margin-right: .375rem;
}

.rating, .game {
display: inline-block;
padding: .425rem;
border-radius: .5rem;
font-weight: 600;
border: 1px solid rgba(0,0,0,0.25);
min-width: 4.25rem;
text-align: center;
}

.rating {
background: var(--triforce);
margin-left: .5rem;
}

.game {
background: #f9e7ec;
}

.level {
letter-spacing: 0rem;
}

.opener {
color: var(--triforce);
margin: 0 .15rem 0 .25rem;
}

.probable {
color: var(--mlb-green);
font-size: .875rem;
margin: 0 .15rem;
}

.dnp {
color: var(--mlb-red);
margin: 0 .15rem 0 .25rem;
}

.alert {
display: flex;
justify-content: flex-start;
align-items: center;
gap: .5rem;
}

.alert i {
font-size: 1.25rem;
}

.sv {
color: #ce2028;
text-shadow: .25px .25px .5px #000;
}

.hr {
color: #a52a2a;
text-shadow: .25px .252px 0.5px #000;
}

.sb {
color: var(--mlb-green);
text-shadow: 2px 2px .5px #ccc;
}

.streak {
color: var(--mlb-navy);
text-shadow: 2px 2px .5px #ccc;
}

.lineup {
display: inline-flex;
align-items: center;
gap: .125rem;
}

.starting {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.875rem;
height: 0.875rem;
border-radius: 50%;
background-color: var(--mlb-green);
color: white;
font-size: .7rem;
}

.sitting {
background-color: var(--mlb-red);
}

.report {
text-align: center;
margin: 1.25rem auto;
}

.report u {
display: block;
padding-top: 1.0rem;
}

.jumble {
height: 15rem;
position: relative;
margin: 5rem auto;
}

.question {
position: absolute;
font-weight: bold;
user-select: none;
white-space: nowrap;
}

.q1 {
top: -2%;
left: -2%;
font-size: 1.0rem;
transform: rotate(-10deg);
opacity: 0.85;
}

.q2 {
top: 45%;
left: 15%;
font-size: 1.25rem;
transform: rotate(10deg);
opacity: 0.75;
}

.q3 {
top: -2%;
left: 40%;
font-size: 1.1rem;
transform: rotate(-8deg);
opacity: 0.80;
}

.q4 {
top: 80%;
left: 0%;
font-size: 1.05rem;
transform: rotate(-5deg);
opacity: 0.75;
}

.q5 {
top: 36%;
left: 62%;
font-size: 0.9rem;
transform: rotate(3deg);
opacity: 0.90;
}

/******* PLAYER PAGE *******/
.back {
display: flex;
justify-content: space-between;
padding: .925rem .925rem;
font-size: .85rem;
}

.back a {
color: var(--mlb-navy);
text-decoration: none;
font-weight: 600;
}

.back a:hover {
color: var(--mlb-red);
text-decoration: underline;
}

.back h1 {
font-size: inherit;
font-style: inherit;
}

.player {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: .75rem;
background: linear-gradient(180deg, #0d1b2a 0%, var(--mlb-navy) 100%);
color: var(--background);
padding: 1.25rem;
margin: 0 auto;
position: relative;
}

.player-photo {
grid-row: 1 / 3;
grid-column: 1 / 2;
border: 1px solid ghostwhite;
border-radius: .5rem;
height: 5.0rem;
overflow: hidden;
z-index: 1;
}

.player-photo img {
max-height: 5.0rem;
}

.player-bio {
grid-row: 1 / 2;
grid-column: 2 / 3;
font-size: 2.25rem;
font-weight: 600;
text-shadow: 3px 2px 1px var(--mlb-red);
align-self: end;
}

.player-info {
grid-row: 2 / 3;
grid-column: 2 / 3;
display: flex;
flex-wrap: wrap;
column-gap: .625rem;
font-size: 1.10em;
align-self: end;
}

.info-item {
white-space: nowrap;
}

.info-label {
text-decoration: underline;
font-weight: 600;
}

.chart-container {
position: relative;
width: 95%;
max-width: 900px;
min-height: 300px;
margin: 0 auto;
background: var(--background);
padding: 0px;
border-radius: .5rem;
box-shadow: 0 .125rem .625rem rgba(0,0,0,0.1);
}

canvas {
width: 100% !important;
height: 100% !important;
}

.day {
display: none;
}

.day.active {
display: flex;
justify-content: space-between;
}

.commentary {
line-height: 1.25rem;
padding: 0 0 0 1.25rem;
}

.recommendations {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: .5rem 1.0rem;
margin: 0 1.25rem;
}

.advice {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
border: 1px solid #dee2e6;
width: 6.5rem;
height: 6.5rem;
}

.advice .vertical {
grid-row: 1 / span 2;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 0.75rem;
padding: .1rem;
text-align: center;
background: var(--mlb-navy);
color: white;
}

.advice .top {
width: 100%;
padding-top: .5rem;
}

.advice .bottom {
font-size: 0.75rem;
padding: .25rem;
text-align: center;
}

.stoplight {
font-size: .90rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.stoplight.green { 
background: var(--mlb-green);;
}
.stoplight.yellow {
background: var(--triforce);
}
.stoplight.red {
background: var(--mlb-red);
}
.stoplight.sprite {
background: linear-gradient(135deg, var(--mlb-green) 50%, var(--triforce) 50%);
}

.signal-icon, .profile-icon {
font-size: 1.125rem;
}

.signal-icon.green {
color: var(--mlb-green);
}
.signal-icon.yellow {
color: var(--triforce);
}
.signal-icon.red {
color: var(--mlb-red);
}
.signal-icon.sprite {
background: linear-gradient(135deg, var(--mlb-green) 50%, var(--triforce) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}

.level-match {
margin-right: .25rem;
}

main.data {
margin-top: 0;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
}

.data {
margin-bottom: 2.5rem;
font-size: 1.0rem;
overflow-x: auto;
backdrop-filter: blur(5px);
}

.data h2 {
font-size: 1.5em;
color: var(--mlb-red);
padding: 1.25rem .5rem .5rem 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 3px solid #dee2e6;
text-transform: capitalize;
}

.data h2.expert {
padding: 1.0rem 1.25rem .625rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: end;
}

.data h2 i {
font-style: normal;
}

.data select {
padding: .5rem .625rem;
border: .125rem solid #dee2e6;
border-radius: 0.5rem;
font-size: 0.8rem;
background: white;
cursor: pointer;
transition: border-color .3s;
vertical-align: bottom;
}

.data-table {
margin-bottom: .925rem;
margin-top: -.325rem;
}

.pct {
min-width: 100px; 
}

.no-data {
text-align: center;
padding: 5rem 0rem;
font-size: 1.1rem;
}

.no-data i {
font-size: 2.0rem; 
margin-bottom: 0.75rem;
color: var(--mlb-red);
}

#player-data th, #player-data td, #level-data th, #level-data td, #season-data th, #season-data td, #game-data th, #game-data td {
text-align: right;
}

#level-data th, #season-data th, #game-data th {
min-width: 2.5rem;
}

#level-data th:first-child, #season-data th:first-child,  
#level-data td:first-child, #season-data td:first-child {
max-width: 4.0rem;
}

#level-data th:last-child, #season-data th:last-child, 
#level-data td:last-child, #season-data td:last-child {
max-width: 6.0rem;
}

/******* FOOTER *******/
.footer {
text-align: center;
padding: 1.25rem;
color: var(--mlb-navy);
font-size: .75rem;
}

.footer p {
margin: .5rem auto
}

/******* SPORTS *******/
.all {
color: yellow;
text-shadow: 1px 1px 2.5px rgba(0,0,0,0.75);
border-radius: 100%;
backdrop-filter: blur(5px);
}

.mlb {
color: ghostwhite;
text-shadow: 1px 1px 2.5px rgba(139,0,0,0.5);
background-color: darkred;
border-radius: 50%;
backdrop-filter: blur(5px);
}

.nba {
color: darkorange;
text-shadow: 1px 1px 2.5px black;
background-color: black;
border-radius: 50%;
backdrop-filter: blur(5px);
}

.nhl {
color: black;
text-shadow: 1.5px 1.5px 3px darkslategray;
backdrop-filter: blur(5px);
}

.nfl {
color: saddlebrown;
text-shadow: 1.5px 1.5px 3px darkgray;
backdrop-filter: blur(5px);
}

/******* RESPONSIVE *******/
@media (max-width: 1280px) {
	.container {
	margin: 0 .5rem;
	}
	.now-playing {
	flex-basis: 100% !important;
	}
}

@media (max-width: 768px) {
	body.blur::before {
	content: "";
	position: fixed;
	inset: 0;
	backdrop-filter: blur(5px);
	z-index: 999;
	}
	.acct-btn {
	width: 100%;
	}
	.register {
	align-items: start;
	}
	.container {
	margin: 0;
	}
	.frame {
	gap: .8rem;
	margin-top: -8px;
	}
	.company-name {
	margin-bottom: -.75rem;
	}
	.company-logo, .quote, .full-text, .hide {
	display: none;
	}
	.company-big {
	transform: scale(1.667);
	padding: 6rem 0;
	}
	.mainmenu {
	left: 50%;
	width: 100%;
	max-width: var(--full-width);
	transform: translateX(-50%);
	}
	.home a:first-of-type {
	margin-top: 1.0rem;
	}
	.headline {
	margin: 1.5rem auto 1.75rem auto;
	}
	.headline i {
	margin: 0rem .5rem .25rem .25rem;
	}
	.preview-link {
	display: inline;
	}
	.preview-text {
	display: block;
	}
	.full-text {
	text-align: justify;
	}
	.graph {
	float: none;
	display: block;
	margin: 1rem auto 1rem auto;
	}
	.main-grid {
	margin-top: .5rem;
	flex-direction: column;
	gap: 0;
	}
	.coming-soon .grid-box {
	padding: .5rem 1.5rem;
	}
	.headline h1, .summary h2 {
	display: inline-block;
	}
	.highlight {
	display: inline-block;
	}
	.back {
	padding: .625rem;
	}
	.title {
	margin-top: -.5rem;
	}
	.banner h1, .banner .icon {
	font-size: 1.425rem;
	}
	.banner span {
	font-size: 1.0rem;
	}
	.banner p, .back h1 {
	display: none;
	}
	.group {
	min-width: 0;	
	gap: .5rem;
	}
	.tools, .controls {
	padding: .925rem .625rem;
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	}
	.tools input, .tools select, .tools button, .pagination-buttons button {
	height: 2.125rem;
	background-color: #f2f2f7;
	}
	.tools input {
	min-width: 0;
	width: 100%;
	font-size: 1.0rem;
	}
	.tools .group:first-child {
	order: 1;
	flex: 1 1 60%;
	}
	.tools .group:last-child {
    order: 2;
    flex: 1 1 10%;
    min-width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: -0.25rem;
	}
	#teams {
    order: 3;
    flex: 1 1 calc(50% - 4px);
    }
    #positions {
    order: 4;
    flex: 1 1 calc(50% - 4px);
    }
    #levels {
    order: 5;
    flex: 1 1 calc(50% - 4px);
    }
    #signals, #profiles {
    order: 6;
    flex: 1 1 calc(50% - 4px);
    }
	.wall {
	display: none;
	}
	.favorites {
	font-size: 0.8rem;
	}
	.favorite {
	font-size: 1.0rem;
	}
	.day.active {
	display: inline-block;
	}
	.commentary {
	padding: .5rem;
	margin: -1.0rem auto 1.0rem auto;
	text-align: justify;
	font-size: .95rem;
	}
	.recommendations {
	flex-wrap: wrap;
	}
	.data {
	font-size: .95rem;
	}
	.data h2, .data h2.expert {
	font-size: 1.15rem;
	padding: .5rem;
	}
	.data h2 i {
	font-size: .75rem;
	}
	.player {
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	padding: .925rem;
	gap: .625rem;
	font-size: 1.75rem;
	}
	.player-photo {
	grid-row: 1 / 2;
	height: 3.75rem;
	}
	.player-photo img {
	max-height: 3.75rem;
	}
	.player-bio {
	font-size: 1.95rem;
	line-height: 1.95rem;
	}
	.player-info {
	grid-column: 1 / 3;
	font-size: .95rem;
	row-gap: 2.5px;
	}
	tbody td {
	padding: .25rem .25rem;
	}
	thead th:first-child, tbody td:first-child {
	padding-left: .5rem;
	}
	#level-data th:first-child, #season-data th:first-child,  
	#level-data td:first-child, #season-data td:first-child,
	#level-data th:last-child, #season-data th:last-child, 
	#level-data td:last-child, #season-data td:last-child {
	max-width: none;
	}
}

@media (hover: none) {
	.menu-item:not(.active):hover {
	background: transparent;
	color: #000000;
	}

	.mainmenu nav a:hover {
	background: transparent;
	color: #000000;
	}
}