:root { --dk-bg:#09090b; --dk-panel:#18181b; --dk-panel-2:#27272a; --dk-line:#3f3f46; --dk-text:#f4f4f5; --dk-muted:#a1a1aa; --dk-accent:#3b82f6; }
* { box-sizing:border-box; }
body { background:radial-gradient(900px circle at 5% -20%,#172554 0%,transparent 48%),var(--dk-bg)!important; color:var(--dk-text)!important; }
.app-shell { min-height:100vh; }
.app-nav { position:sticky!important; top:0; z-index:80; min-height:68px; background:rgba(9,9,11,.93)!important; border-bottom:1px solid rgba(63,63,70,.85)!important; box-shadow:0 8px 30px rgba(0,0,0,.28)!important; backdrop-filter:blur(16px); }
.app-nav .app-brand { color:var(--dk-text)!important; font-size:1.2rem!important; font-weight:800!important; letter-spacing:-.025em; }
.app-nav .nav-link, .app-nav button.nav-link { color:#d4d4d8!important; font-size:.925rem!important; font-weight:600; }
.app-nav .nav-link:hover, .app-nav button.nav-link:hover { color:#93c5fd!important; transform:none!important; }
.app-page { max-width:1200px; margin:0 auto; padding:2.25rem 1rem 4rem; }
.app-section-title, .section-header { letter-spacing:-.035em; }
.app-card { background:linear-gradient(145deg,rgba(39,39,42,.94),rgba(24,24,27,.96)); border:1px solid var(--dk-line); border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.2); }
.app-kicker { color:#60a5fa; font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.app-title { margin:.35rem 0 0; color:var(--dk-text); font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-.05em; line-height:1; }
.app-subtitle { max-width:650px; margin:.85rem 0 0; color:var(--dk-muted); }
.app-button { display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:.7rem 1rem; background:var(--dk-accent); color:white; font-weight:750; text-decoration:none; }
.app-button.secondary { background:transparent; border:1px solid #52525b; color:#e4e4e7; }
.app-field { display:grid; gap:.45rem; color:#e4e4e7; font-size:.875rem; font-weight:700; }
.app-field input,.app-field select { width:100%; border:1px solid #52525b; border-radius:10px; background:#18181b; padding:.75rem .85rem; outline:none; }
.app-field input:focus,.app-field select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.18); }
.auth-shell { display:grid; min-height:100vh; place-items:center; padding:1rem; }
.auth-card { width:min(100%,480px); padding:2rem; }
.auth-card h1 { margin:.55rem 0 0; font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.auth-card p { color:var(--dk-muted); }
.auth-card form { display:grid; gap:1rem; margin-top:1.5rem; }
.app-alert { border:1px solid #1d4ed8; border-radius:10px; background:rgba(30,58,138,.25); padding:.8rem 1rem; color:#dbeafe; font-size:.9rem; }
.app-alert.error { border-color:#991b1b; background:rgba(127,29,29,.28); color:#fee2e2; }
input, select, textarea { color:var(--dk-text); }
button, .button { transition:transform .16s ease,filter .16s ease; }
button:hover, .button:hover { filter:brightness(1.08); }

@media (max-width:640px) {
  .app-nav { min-height:60px; }
  .app-nav .app-brand { font-size:1rem!important; }
  .app-page { padding:1.4rem .85rem 3rem; }

  /* Games becomes a true mobile card list instead of a compressed desktop table. */
  .table-container { overflow:visible!important; border-radius:0!important; box-shadow:none!important; }
  .table-container table,
  .table-container tbody { display:block!important; width:100%!important; }
  .table-container thead { display:none!important; }
  .table-container .table-row {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "home homeScore"
      "away awayScore"
      "status status"
      "date date"!important;
    gap:.55rem .8rem!important;
    width:100%!important;
    margin:0 0 .75rem!important;
    padding:.85rem .9rem!important;
    border:1px solid #3f3f46!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,#202024,#141416)!important;
    box-shadow:0 7px 20px rgba(0,0,0,.22)!important;
  }
  .table-container .table-row:hover { transform:none!important; }
  .table-container .table-cell { max-width:none!important; overflow:visible!important; }
  .table-container .table-row > .table-cell:nth-child(1) { grid-area:home; }
  .table-container .table-row > .table-cell:nth-child(2) { grid-area:homeScore; }
  .table-container .table-row > .table-cell:nth-child(3) { grid-area:awayScore; }
  .table-container .table-row > .table-cell:nth-child(4) { grid-area:away; }
  .table-container .table-row > .table-cell:nth-child(5),
  .table-container .table-row > .table-cell:nth-child(6),
  .table-container .table-row > .table-cell:nth-child(7) { display:none!important; }
  .table-container .table-row > .table-cell:nth-child(8) { grid-area:status; }
  .table-container .table-row > .table-cell:nth-child(9) { grid-area:date; }

  .table-container .team-cell {
    display:flex!important;
    align-items:center!important;
    min-height:38px!important;
    padding:.35rem .25rem .35rem 2.65rem!important;
    background-size:30px!important;
    background-position:.25rem center!important;
    font-size:.98rem!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-overflow:clip!important;
    font-weight:750!important;
  }
  .table-container .table-row > .table-cell:nth-child(2),
  .table-container .table-row > .table-cell:nth-child(3) {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:2.5rem!important;
    padding:.25rem 0!important;
    font-size:1.3rem!important;
    line-height:1!important;
    font-weight:900!important;
    color:#fff!important;
  }
  .table-container .table-row > .table-cell:nth-child(8),
  .table-container .table-row > .table-cell:nth-child(9) {
    display:block!important;
    padding:.15rem .25rem 0!important;
    font-size:.8rem!important;
    line-height:1.3!important;
    white-space:normal!important;
    color:#a1a1aa!important;
    border-top:1px solid rgba(63,63,70,.55)!important;
  }
  .table-container .table-row > .table-cell:nth-child(8)::before {
    content:"Status: ";
    color:#d4d4d8;
    font-weight:700;
  }
  .table-container .table-row > .table-cell:nth-child(9)::before {
    content:"Kickoff: ";
    color:#d4d4d8;
    font-weight:700;
  }
  .table-container .ap-rank { font-size:.78rem!important; margin-right:.25rem!important; }

  .table-container .table-row.expanded { position:relative!important; }
  .table-container .table-row.expanded .game-card {
    display:block!important;
    position:relative!important;
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    left:auto!important;
    top:auto!important;
    margin:.35rem 0 0!important;
    padding:1rem .75rem!important;
    border-radius:12px!important;
  }
  .table-container .game-card .card-content { padding:.25rem!important; }
  .table-container .game-card .team-name-container { max-width:44%!important; }
  .table-container .game-card .team-name { font-size:1rem!important; line-height:1.15!important; }
  .table-container .game-card .score { font-size:1.55rem!important; }
  .table-container .game-card .meta { font-size:.8rem!important; }
}