/* Football Squares — scoped styles, loaded alongside styles.css. Dark Tavls palette. */
.sq-football[hidden]{display:none !important}
.sq-badge{font-size:9px;font-weight:900;letter-spacing:.3px;background:#FF5C00;color:#0a0a0b;padding:2px 6px;border-radius:20px;margin-left:5px;vertical-align:1px}
/* In squares mode, hide the numbers game; keep the sport switcher + squares mount */
body.squares-mode .app-content > *:not(#lobbySection):not(#squaresRoot){display:none !important}
body.squares-mode #gamesRail,
body.squares-mode .date-pill{display:none !important}
/* Mobile: squares also takes over the mobile "Games" overlay (was showing WNBA) */
body.squares-mode #mobileGamesView,
body.squares-mode #mobileGameDetail,
body.squares-mode #mobileTicketBar,
body.squares-mode #mobileBoardHeader{display:none !important}
.squares-root{color:#e9f1ff;font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;padding:6px 0 40px}
.squares-root h1{font-size:23px;color:#e9f1ff;letter-spacing:-.01em;margin:0}

.sq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:6px 0 12px;flex-wrap:wrap}
.sq-controls{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.sq-controls .sq-help{margin-left:auto}
.sq-sub{color:#9db0cb;font-size:13px;margin-top:4px}
.sq-head-left{display:flex;align-items:center;gap:12px}
.sq-help{width:34px;height:34px;border-radius:8px;border:1px solid rgba(190,210,235,.2);background:rgba(255,255,255,.05);color:#9db0cb;
  font-size:15px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;font-family:inherit}
.sq-help:hover{border-color:#FF5C00;color:#FF5C00}
.sq-help-modal{max-width:440px;text-align:left}
.sq-help-modal h2{text-align:left;margin-bottom:14px}
.sq-help-body p{font-size:13px;color:#c7d2e0;line-height:1.55;margin:0 0 11px}
.sq-help-body b{color:#e9f1ff}
.sq-help-note{background:rgba(255,92,0,.1);border:1px solid rgba(255,92,0,.3);border-radius:10px;padding:12px 14px;font-size:12.5px;color:#e9f1ff;line-height:1.55;margin:6px 0 12px}
.sq-help-foot{font-size:12px;color:#9db0cb;margin-bottom:0}
.sq-bal{background:rgba(255,255,255,.04);border:1px solid rgba(200,215,235,.16);border-radius:11px;padding:8px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#9db0cb;font-weight:700}
.sq-bal b{color:#e9f1ff;font-size:15px;margin-left:7px;text-transform:none}
.sq-week,.sq-fee{background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.18);color:#e9f1ff;font-family:inherit;font-weight:800;font-size:14px;
  padding:10px 36px 10px 14px;border-radius:11px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239db0cb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.sq-week:focus,.sq-fee:focus{outline:2px solid #FF5C00;border-color:#FF5C00}
.sq-week option,.sq-fee option{background:#0e141d;color:#e9f1ff;font-weight:600}
.sq-empty{color:#9db0cb;padding:30px;text-align:center}

.sq-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:560px}
.sq-card{background:rgba(255,255,255,.04);border:1px solid rgba(200,215,235,.16);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .14s,transform .1s,box-shadow .14s}
.sq-card:hover{border-color:rgba(255,92,0,.55);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.sq-card:active{transform:scale(.995)}
.sq-card.closed{opacity:.62;cursor:default}
.sq-card.closed:hover{border-color:rgba(200,215,235,.16);box-shadow:none}
/* Matchup/date on the left, prize-pool + per-quarter on the right */
.sq-card-mid{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.sq-card-meta{min-width:0}
.sq-card-stats{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:4px;padding-top:1px}
.sq-stat-row{font-size:12.5px;color:#9db0cb;font-weight:600;white-space:nowrap;letter-spacing:.1px}
.sq-stat-row b{color:#FF5C00;font-weight:900}
.sq-stat-row:first-child b{font-size:15px}
/* Live miniature 10x10 board */
.sq-mini{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(2px,.8vw,3px);margin-top:2px}
.sq-mini i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.08)}
.sq-mini i.taken,.sq-mini i.mine{background:#FF5C00;border-color:#FF5C00}
.sq-card-prog{height:7px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:2px}
.sq-card-prog i{display:block;height:100%;background:linear-gradient(90deg,#FF5C00,#ff8a4c);border-radius:5px;transition:width .3s}
/* Entrant avatar stack (top-right of card) */
.sq-card-top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.sq-avatars{display:flex;align-items:center}
.sq-av{width:32px;height:32px;border-radius:50%;border:2px solid #11161e;margin-left:-10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;background:#2a3340;line-height:1}
.sq-avatars .sq-av:first-child{margin-left:0}
.sq-av img{width:100%;height:100%;object-fit:cover;display:block}
.sq-av-more{background:rgba(255,255,255,.13);color:#cdd9ea;font-size:10px;font-weight:800}
.sq-enter-btn{background:#FF5C00;border:0;color:#fff;font-family:inherit;font-weight:800;font-size:13px;padding:8px 18px;border-radius:10px;cursor:pointer;box-shadow:0 0 12px rgba(255,92,0,.4);transition:filter .12s}
.sq-enter-btn:hover{filter:brightness(1.08)}
.sq-card-top{display:flex;align-items:center;gap:7px}
.sq-dot{width:30px;height:30px;border-radius:9px;background:#1a2433;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px;color:#e9f1ff;border:1px solid rgba(200,215,235,.18)}
.sq-at{color:#9db0cb;font-weight:700;font-size:13px}
.sq-tag{margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.5px;color:#FF5C00;background:rgba(255,92,0,.14);border:1px solid rgba(255,92,0,.4);padding:3px 8px;border-radius:20px}
.sq-tag.closed{color:#9db0cb;background:rgba(255,255,255,.05);border-color:rgba(200,215,235,.18)}
.sq-match{font-weight:800;font-size:15px;color:#e9f1ff}
.sq-when{font-size:11.5px;color:#9db0cb;margin-top:-3px}
.sq-choose{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#9db0cb;font-weight:700;margin-top:2px}
.sq-tiers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.sq-tier{display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.16);border-radius:10px;padding:9px 4px;color:#e9f1ff;cursor:pointer;transition:border-color .14s,background .14s}
.sq-tier:hover{border-color:#FF5C00;background:rgba(255,92,0,.08)}
.sq-tier-fee{font-size:16px;font-weight:900;color:#FF5C00}
.sq-tier-sub{font-size:9.5px;color:#9db0cb;font-weight:600}
.sq-tier-prog{width:100%;height:5px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:4px}
.sq-tier-prog i{display:block;height:100%;background:linear-gradient(90deg,#FF5C00,#ff8a4c);border-radius:4px;transition:width .3s}

.sq-back{background:rgba(255,255,255,.04);border:1px solid rgba(200,215,235,.16);color:#9db0cb;padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px;margin-bottom:12px;cursor:pointer}
.sq-back:hover{color:#e9f1ff;border-color:rgba(200,215,235,.3)}
.sq-contest{background:rgba(255,255,255,.04);border:1px solid rgba(200,215,235,.16);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.sq-contest-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.sq-mu{display:flex;align-items:center;gap:9px}
.sq-mu-name{font-weight:800;font-size:16px;color:#e9f1ff}
.sq-status{font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.18);color:#9db0cb}
.sq-status.live{color:#FF5C00;border-color:rgba(255,92,0,.4);background:rgba(255,92,0,.12)}
.sq-status.locked{color:#16c784;border-color:rgba(22,199,132,.35);background:rgba(22,199,132,.12)}
.sq-contest-sub{display:flex;align-items:stretch;gap:10px;margin-top:12px;flex-wrap:wrap}
.sq-seg-wrap{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.16);border-radius:11px;padding:5px 7px}
.sq-seg-l{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#9db0cb;font-weight:800;padding:0 3px}
.sq-seg{background:transparent;border:0;color:#9db0cb;font-weight:800;font-size:13px;padding:6px 12px;border-radius:8px;cursor:pointer}
.sq-seg.on{background:#FF5C00;color:#fff}
.sq-boardtag{display:flex;align-items:center;font-size:12px;font-weight:800;color:#e9f1ff;background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.16);padding:0 13px;border-radius:11px}
.sq-share-icon{display:flex;align-items:center;justify-content:center;min-width:42px;padding:0 12px;background:rgba(255,92,0,.14);border:1px solid rgba(255,92,0,.4);border-radius:11px;color:#FF5C00;cursor:pointer}
.sq-share-icon svg{width:18px;height:18px}
.sq-share-icon:hover{background:#FF5C00;color:#fff;border-color:#FF5C00}
.sq-meta{display:flex;gap:22px;margin-top:13px;flex-wrap:wrap}
.sq-meta.four{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sq-meta.four .sq-stat .v{font-size:16px}
.sq-meta.four .sq-stat .v.sm{font-size:12.5px;line-height:1.25;font-weight:800}
.sq-meta.four .sq-stat .l{font-size:9px}
.sq-stat .v .t{display:block;font-size:11px;font-weight:600;color:#9db0cb;margin-top:1px;white-space:nowrap}
.sq-stat .l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#9db0cb;font-weight:700}
.sq-stat .v{font-size:17px;font-weight:800;margin-top:2px;color:#e9f1ff}
.sq-stat .v.sm{font-size:13px}
.sq-stat .v.orange{color:#FF5C00}
.sq-stat .v .muted{color:#9db0cb;font-size:14px}
.sq-payouts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sq-payouts.four{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sq-chip{background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.16);border-radius:9px;padding:6px 11px;font-size:11px;color:#9db0cb}
.sq-payouts.four .sq-chip{padding:8px 5px;font-size:10px;text-align:center;line-height:1.2}
.sq-chip b{display:block;color:#FF5C00;font-size:14px;font-weight:800;margin-top:1px}
.sq-payouts.four .sq-chip b{font-size:13px;margin-top:3px}

.sq-board-wrap{background:rgba(255,255,255,.03);border:1px solid rgba(200,215,235,.16);border-radius:14px;padding:14px;overflow-x:auto}
.sq-board{display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(2px,.4vw,4px);min-width:520px}
.sq-cell{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative}
.sq-cell.corner{background:transparent}
.sq-cell.axis{font-weight:900;font-size:clamp(14px,1.7vw,24px);color:#0a0a0b}
.sq-cell.axis.col{background:#e8b923}
.sq-cell.axis.row{background:#39d0d8}
.sq-sq{background:rgba(255,255,255,.05);border:1px solid rgba(200,215,235,.14);cursor:pointer;overflow:hidden;transition:transform .08s,border-color .12s,background .12s}
.sq-sq[data-cell]:hover{border-color:#FF5C00;transform:translateY(-1px)}
.sq-sq .ini{font-weight:800;font-size:clamp(10px,1.1vw,14px);color:#9db0cb}
.sq-sq.taken{cursor:default}
.sq-sq.other .ini{color:#39d0d8}
.sq-sq.mine{background:#FF5C00;border-color:#FF5C00}
.sq-sq.mine .ini{color:#fff}
.sq-sq.pending{background:#FF5C00;border:2px dashed rgba(255,255,255,.85)}
.sq-sq.pending .ini{color:#fff}
.sq-sq.locked-empty{cursor:default;opacity:.5}
.sq-sq .plus{color:#9db0cb;font-size:16px;opacity:0}
.sq-sq[data-cell]:hover .plus{opacity:.7}

.sq-enterbar{position:sticky;bottom:14px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#10161f;border:1px solid rgba(255,92,0,.4);border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.sq-eb-info{font-size:14px;color:#e9f1ff}
.sq-eb-info span{color:#9db0cb}

.sq-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#FF5C00;color:#fff;border:0;padding:11px 18px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.sq-btn:hover{filter:brightness(1.07)}
.sq-btn.ghost{background:rgba(255,255,255,.05);color:#e9f1ff;border:1px solid rgba(200,215,235,.18)}
.sq-btn.ghost:hover{border-color:#FF5C00;color:#FF5C00}
.sq-btn.sm{padding:8px 13px;font-size:13px}

.sq-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,6,8,.72)}
.sq-modal.show{display:flex}
.sq-card-modal{position:relative;background:#0e141d;border:1px solid rgba(200,215,235,.18);border-radius:18px;padding:26px 24px 22px;width:100%;max-width:400px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.sq-card-modal h2{font-size:19px;color:#e9f1ff;margin:0 0 5px}
.sq-mmeta{color:#9db0cb;font-size:13px;margin:0 0 16px}
.sq-close{position:absolute;top:12px;right:14px;background:transparent;border:0;color:#9db0cb;font-size:18px;cursor:pointer}
.sq-share-link{display:flex;gap:7px;margin-bottom:12px}
.sq-share-link input{flex:1;min-width:0;background:#070b11;border:1px solid rgba(200,215,235,.18);border-radius:10px;color:#e9f1ff;font-size:12.5px;padding:0 12px;font-family:inherit}
.sq-share-social{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sq-soc{border:1px solid rgba(200,215,235,.18);border-radius:10px;padding:10px;font-weight:800;font-size:13px;color:#e9f1ff;background:rgba(255,255,255,.05);cursor:pointer}
.sq-soc.x:hover{background:#000;border-color:#000}
.sq-soc.tg:hover{background:#229ed9;border-color:#229ed9}
.sq-hint{font-size:11px;color:#9db0cb;margin-top:12px}

.sq-congrats{position:relative;z-index:2;background:#0e141d;border:1px solid rgba(200,215,235,.18);border-radius:20px;padding:30px 32px;text-align:center;max-width:380px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.sq-check{width:64px;height:64px;border-radius:50%;background:rgba(22,199,132,.15);border:2px solid #16c784;color:#16c784;font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.sq-congrats h2{font-size:26px;color:#FF5C00;margin:0}
.sq-congrats p{color:#9db0cb;margin:10px 0 0;line-height:1.5}
.sq-congrats p b{color:#e9f1ff}
.sq-congrats .sq-btn{margin-top:20px;width:100%}
.sq-confetti{position:absolute;top:-20px;border-radius:2px;animation:sqfall linear forwards;z-index:1}
@keyframes sqfall{to{transform:translateY(105vh) rotate(540deg);opacity:.4}}

.sq-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(140px);background:#FF5C00;color:#fff;padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px;z-index:130;transition:transform .3s;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw;text-align:center}
.sq-toast.show{transform:translateX(-50%) translateY(0)}

/* Desktop: give the squares content side padding, left-align the sport tabs,
   and cap the enter bar's width (it shouldn't span the whole screen). */
@media(min-width:1101px){
  body[data-page="lobby"] .app-content{padding-left:28px;padding-right:28px}
  body.squares-mode #lobbySection{grid-template-columns:1fr}
  body.squares-mode #sportSwitcher{grid-column:1;justify-self:start;width:max-content;margin:6px 0}
  .sq-enterbar{position:fixed;left:calc(50% + 106px);transform:translateX(-50%);bottom:24px;width:min(480px,calc(100% - 300px));margin:0;z-index:70;box-shadow:0 12px 40px rgba(0,0,0,.6)}
}
/* Mobile: clear the fixed bottom nav so the last squares are reachable */
@media(max-width:1100px){
  .squares-root{padding-bottom:104px}
  .sq-enterbar{position:fixed;left:12px;right:12px;bottom:74px;margin:0;width:auto;z-index:70;box-shadow:0 12px 40px rgba(0,0,0,.7)}
}
@media(max-width:560px){.sq-head{flex-direction:column;align-items:flex-start} .sq-payouts.four .sq-chip{font-size:9.5px} .sq-meta.four{gap:7px}}