/* BIE_DESKTOP_POLISH_V1_1
   Consolidated desktop stylesheet.
   ZERO JS. ZERO DOM moves. ZERO mobile edits.
*/

@media (min-width:1100px){

  :root{
    --desk-max:1400px;
    --desk-line:rgba(124,158,171,.13);
    --desk-line-soft:rgba(124,158,171,.08);
    --desk-panel:#071116;
    --desk-panel-2:#0a151a;
    --desk-muted:#78909b;
    --desk-shadow:0 20px 60px rgba(0,0,0,.24);
  }

  html,
  body{
    min-width:1100px;
    overflow-x:hidden;
    background:#02080b;
    scrollbar-width:thin;
    scrollbar-color:#27404a #040b0e;
  }

  body::-webkit-scrollbar,
  #main::-webkit-scrollbar,
  #modalBody::-webkit-scrollbar,
  #drawer::-webkit-scrollbar{
    width:10px;
  }

  body::-webkit-scrollbar-thumb,
  #main::-webkit-scrollbar-thumb,
  #modalBody::-webkit-scrollbar-thumb,
  #drawer::-webkit-scrollbar-thumb{
    background:#263d46;
    border-radius:99px;
    border:2px solid #040b0e;
  }

  body::-webkit-scrollbar-track,
  #main::-webkit-scrollbar-track,
  #modalBody::-webkit-scrollbar-track,
  #drawer::-webkit-scrollbar-track{
    background:#040b0e;
  }

  /* =========================================================
     APP SHELL
     ========================================================= */

  #app.app-shell{
    width:100% !important;
    max-width:none !important;
    min-height:100vh !important;
    margin:0 !important;
    padding-bottom:0 !important;
    background:
      radial-gradient(circle at 50% -18%,rgba(93,255,61,.035),transparent 34%),
      linear-gradient(180deg,#02080b,#030a0d 58%,#02080b) !important;
    box-shadow:none !important;
  }

  .app-header.app-header-v121{
    position:sticky !important;
    top:0 !important;
    z-index:90 !important;

    width:100% !important;
    max-width:none !important;
    min-height:82px !important;
    padding:10px 28px !important;

    grid-template-columns:48px minmax(180px,1fr) auto 32px auto !important;
    gap:12px !important;

    border-bottom:1px solid var(--desk-line-soft) !important;
    background:rgba(3,9,12,.965) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.14) !important;
  }

  .app-header-v121 .menu-btn{
    width:44px !important;
    height:44px !important;
    border-radius:13px !important;
    transition:transform .16s ease,border-color .16s ease,background .16s ease !important;
  }

  .app-header-v121 .menu-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(116,255,61,.28) !important;
    background:#0a161b !important;
  }

  .brand-v121 strong{
    font-size:40px !important;
    letter-spacing:-2px !important;
  }

  .brand-v121 i{
    font-size:34px !important;
  }

  .brand-v121 small{
    max-width:none !important;
    font-size:6.4px !important;
    letter-spacing:1.65px !important;
    opacity:.62;
  }

  /* =========================================================
     DESKTOP CANVAS
     ========================================================= */

  #main{
    width:100% !important;
    max-width:none !important;
  }

  .view{
    width:min(var(--desk-max),calc(100vw - 72px)) !important;
    max-width:var(--desk-max) !important;
    margin:0 auto !important;
    padding:30px 0 68px !important;
  }

  .view.active{
    display:block !important;
    animation:deskViewIn .22s ease both;
  }

  @keyframes deskViewIn{
    from{opacity:.35;transform:translateY(4px)}
    to{opacity:1;transform:none}
  }

  .screen-title{
    font-size:40px !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
    margin:7px 0 22px !important;
  }

  .eyebrow{
    font-size:9.5px !important;
    letter-spacing:1.8px !important;
  }

  .section-title{
    margin:24px 0 12px !important;
    font-size:12px !important;
    letter-spacing:1.25px !important;
  }

  .toolbar{
    gap:18px !important;
  }

  .tool-btn{
    min-width:48px;
    min-height:48px;
    border-radius:14px !important;
  }

  .bottom-nav{
    display:none !important;
  }

  /* =========================================================
     HOME HEADER / DATE / KPIs
     ========================================================= */

  #view-home .toolbar{
    align-items:flex-start !important;
  }

  #view-home .toolbar .eyebrow{
    font-size:0 !important;
  }

  #view-home .toolbar .eyebrow::after{
    content:"BIE DESKTOP";
    font-size:9.5px;
    letter-spacing:1.8px;
  }

  #view-home .date-strip{
    grid-template-columns:repeat(6,minmax(92px,1fr)) !important;
    gap:10px !important;
    margin:2px 0 18px !important;
  }

  #view-home .date-chip{
    min-height:56px !important;
    padding:9px 8px !important;
    border-radius:13px !important;
    transition:transform .16s ease,border-color .16s ease,background .16s ease !important;
  }

  #view-home .date-chip:hover{
    transform:translateY(-1px);
    border-color:rgba(116,255,61,.24) !important;
  }

  #view-home .date-chip.active{
    background:
      radial-gradient(circle at 50% 0,rgba(116,255,61,.10),transparent 75%),
      #08140c !important;
    box-shadow:inset 0 0 0 1px rgba(116,255,61,.08) !important;
  }

  #view-home .day-summary{
    grid-template-columns:1.45fr 1fr 1fr !important;
    min-height:104px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    border-color:var(--desk-line) !important;
    background:
      linear-gradient(180deg,rgba(15,26,31,.96),rgba(9,18,22,.96)) !important;
    box-shadow:0 16px 44px rgba(0,0,0,.16) !important;
  }

  #view-home .day-summary > div{
    min-height:104px !important;
    padding:17px 20px !important;
  }

  #view-home .day-summary strong{
    font-size:29px !important;
    line-height:1 !important;
  }

  /* =========================================================
     HOME — LOCKED 2-COLUMN GAME GRID
     ========================================================= */

  #view-home .all-games{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px !important;
    align-items:start !important;
  }

  #view-home .all-games > .game-card-v10,
  #view-home .all-games > .game-card,
  #view-home .all-games > article{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #view-home .game-card-v10{
    border-radius:18px !important;
    overflow:hidden !important;
    border-color:rgba(85,117,129,.34) !important;
    background:
      radial-gradient(circle at 50% 0,rgba(93,255,61,.025),transparent 40%),
      linear-gradient(180deg,#081319,#061015) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.18) !important;
    transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease !important;
  }

  #view-home .game-card-v10:hover{
    transform:translateY(-2px) !important;
    border-color:rgba(116,255,61,.24) !important;
    box-shadow:0 22px 64px rgba(0,0,0,.25),0 0 0 1px rgba(116,255,61,.025) !important;
  }

  #view-home .v10-team-logo{
    width:72px !important;
    height:72px !important;
  }

  #view-home .v10-team b{
    font-size:15px !important;
  }

  #view-home .v10-team small{
    font-size:7.5px !important;
    color:#83959d !important;
  }

  #view-home .v10-pitcher-row b{
    font-size:11px !important;
  }

  #view-home .v10-prediction{
    background:
      linear-gradient(90deg,rgba(34,106,32,.18),rgba(19,70,23,.10)) !important;
    border-top-color:rgba(116,255,61,.16) !important;
  }

  #view-home .v10-prediction strong{
    font-size:21px !important;
    letter-spacing:-.02em;
  }

  #view-home .v10-prediction button{
    min-height:38px !important;
    padding:0 18px !important;
    border-radius:999px !important;
  }

  /* =========================================================
     PARLAYS / BUILDER / RESULTS
     ========================================================= */

  #view-parlays #parlayContent{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:start !important;
  }

  #view-parlays #parlayContent > *{
    min-width:0 !important;
    margin:0 !important;
  }

  #view-parlays .parlay-status,
  #view-parlays .parlay-depth-note,
  #view-parlays .segmented,
  #view-parlays .current-draft{
    grid-column:1 / -1;
  }

  #view-parlays .studio-ticket,
  #view-parlays .pick-pro,
  #view-parlays .parlay-card{
    border-radius:16px !important;
    border-color:var(--desk-line) !important;
    box-shadow:var(--desk-shadow) !important;
  }

  #view-builder .builder-game,
  #view-results .history-day,
  #view-results .panel,
  #view-results .result-row{
    max-width:none !important;
  }

  #view-builder .side-picks{
    gap:10px !important;
  }

  #view-builder .ticket-summary{
    bottom:18px !important;
    max-width:780px !important;
    margin:20px auto 0 !important;
    border-radius:16px !important;
  }

  /* =========================================================
     TEAMS / MORE / METRICS
     ========================================================= */

  #view-teams .team-grid-v11,
  #view-teams .teams-grid,
  #view-teams .team-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  #view-more .more-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  #view-more .more-tile{
    min-height:132px !important;
    border-radius:16px !important;
    transition:transform .16s ease,border-color .16s ease,background .16s ease !important;
  }

  #view-more .more-tile:hover{
    transform:translateY(-2px);
    border-color:rgba(116,255,61,.22) !important;
    background:#09151a !important;
  }

  .metrics-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  /* =========================================================
     NATIVE DRAWER — CLEANER / LESS OBTRUSIVE
     ========================================================= */

  #drawer.drawer{
    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:min(360px,88vw) !important;
    max-width:360px !important;
    padding:20px 18px !important;

    transform:translateX(-105%) !important;
    transition:transform .20s ease !important;

    z-index:160 !important;
    border-right:1px solid rgba(114,158,174,.14) !important;
    box-shadow:26px 0 72px rgba(0,0,0,.48) !important;
  }

  #drawer.drawer.open{
    transform:translateX(0) !important;
  }

  #drawer .drawer-head{
    margin-bottom:18px !important;
  }

  #drawer .drawer-nav{
    gap:8px !important;
  }

  #drawer .drawer-nav button{
    min-height:48px !important;
    border-radius:12px !important;
  }

  #drawerBackdrop.backdrop:not(.hidden){
    display:block !important;
    z-index:150 !important;
    background:rgba(0,0,0,.48) !important;
    backdrop-filter:blur(1.5px) !important;
  }

  /* =========================================================
     MODALS / GAME DETAIL
     ========================================================= */

  #modal.modal-sheet{
    left:50% !important;
    bottom:auto !important;
    top:4vh !important;

    width:min(980px,calc(100vw - 96px)) !important;
    max-width:980px !important;

    height:auto !important;
    max-height:92vh !important;

    border:1px solid rgba(118,154,167,.16) !important;
    border-radius:20px !important;

    transform:translate(-50%,110vh) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.52) !important;
  }

  #modal.modal-sheet.open{
    transform:translate(-50%,0) !important;
  }

  #modal.modal-sheet.detail-mode-v12,
  #modal.modal-sheet.team-mode-v12,
  #modal.modal-sheet.player-mode-v12{
    top:3vh !important;
    bottom:auto !important;

    width:min(1040px,calc(100vw - 88px)) !important;
    max-width:1040px !important;

    height:94vh !important;
    max-height:94vh !important;

    border:1px solid rgba(118,154,167,.15) !important;
    border-radius:20px !important;

    transform:translate(-50%,110vh) !important;
  }

  #modal.modal-sheet.detail-mode-v12.open,
  #modal.modal-sheet.team-mode-v12.open,
  #modal.modal-sheet.player-mode-v12.open{
    transform:translate(-50%,0) !important;
  }

  #modal .modal-body{
    max-height:calc(92vh - 105px) !important;
    padding:22px 24px 34px !important;
  }

  #modal.detail-mode-v12 .modal-body,
  #modal.team-mode-v12 .modal-body,
  #modal.player-mode-v12 .modal-body{
    max-height:calc(94vh - 105px) !important;
  }

  #modal .detail-pitchers,
  #modal .bie-v11-two{
    grid-template-columns:1fr 1fr !important;
    gap:16px !important;
  }

  #modal .metrics-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  #modal.mlb-auditor-studio-v4{
    width:min(980px,calc(100vw - 96px)) !important;
    max-width:980px !important;
    height:min(92vh,940px) !important;
  }

  /* =========================================================
     AUTH
     ========================================================= */

  .auth-card{
    width:min(430px,calc(100vw - 48px)) !important;
  }
}

@media (min-width:1100px) and (max-width:1399px){

  .view{
    width:min(1120px,calc(100vw - 56px)) !important;
  }

  #view-home .all-games,
  #view-parlays #parlayContent{
    grid-template-columns:1fr !important;
  }

  #view-home .all-games > .game-card-v10,
  #view-home .all-games > article{
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #view-more .more-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}