/* SmileDice v12.0 — Sport screenmatch + Casino shell width.
   This file ONLY overrides styling under active Sport view.
   Responsive canvas is aligned to the existing SmileDice .app-shell rules.
   No modification to Supabase, gambling or pick logic. */

/* RESTORE the same centered outer frame, header and side margins as Casino. */
body:has(#sport-screen:not([hidden])){
  width:auto!important;max-width:none!important;min-width:320px!important;
  background:radial-gradient(ellipse at 50% -18%,#19234a 0,#080e1e 34%,#050a16 75%)!important;
}
body:has(#sport-screen:not([hidden])) .app-shell{
  width:78.4vw!important;max-width:1970px!important;
  min-width:0!important; margin:5px auto 16px!important;
  background:linear-gradient(150deg,#071126 0%,#050a17 100%)!important;
  border:1.4px solid #5877d0!important;border-radius:20px!important;
  box-shadow:0 0 0 1px rgba(45,66,130,.38) inset,0 0 30px rgba(44,74,198,.16),0 25px 80px #0009!important;
  overflow:hidden!important;
}
body:has(#sport-screen:not([hidden])) .site-header{
  width:auto!important;max-width:none!important;margin:0!important;
  border-radius:0!important;border-bottom:1px solid #28355d!important;
}
body:has(#sport-screen:not([hidden])) .page-content{
  width:auto!important;max-width:none!important;margin:0!important;
  padding:1vw 1.15vw .65vw!important;
}
body:has(#sport-screen:not([hidden])) .site-footer{
  display:block!important;
}

/* Neon stadium palette matching approved SPORT screenshot. */
#sport-screen.sd-sport-app{
  --sp-gold:#ffd345;--sp-purple:#c648ff;--sp-cyan:#32f1ff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif!important;
  color:#f8f3ff!important;
  background:
    radial-gradient(ellipse at 2% 34%,rgba(106,14,171,.17),transparent 31%),
    radial-gradient(ellipse at 95% 61%,rgba(112,28,209,.12),transparent 35%);
  border-radius:15px;
}
#sport-screen .sp-shell{
  display:grid!important;position:static!important;left:auto!important;
  grid-template-columns:minmax(162px,13.6%) minmax(0,1fr) minmax(252px,23.6%)!important;
  width:100%!important;max-width:100%!important;gap:12px!important;
  align-items:start!important;
}
#sport-screen .sp-sidebar,#sport-screen .sp-center,#sport-screen .sp-right{min-width:0!important}
#sport-screen .sp-sidebar{
  background:radial-gradient(ellipse at top left,#39105b 0%,#150d32 42%,#0b0b25 100%)!important;
  border:1px solid #a545ef!important;border-radius:15px!important;
  box-shadow:0 0 7px #b236ff8c,0 0 24px #7719cc70,inset 0 0 20px #7a24d03d!important;
}
#sport-screen .sp-side-brand{
  background:linear-gradient(120deg,#4a1477,#210c48 76%)!important;
  border:1px solid #cb65ff!important;
  box-shadow:0 0 12px #b53effbb,0 0 20px #9d27e366,inset 0 0 14px #b956ed55!important;
  min-height:54px!important;
}
#sport-screen .sp-side-icon{
  width:39px!important;height:39px!important;flex-basis:39px!important;
  border-color:#f0c0ff!important;background:#32116d!important;
  box-shadow:0 0 12px #a54affcc,inset 0 0 13px #ab54f399!important;
}
#sport-screen .sp-side-icon img.sp-svg{width:33px!important;height:33px!important;filter:drop-shadow(0 0 7px #c57fff)}
#sport-screen .sp-side-brand>span:last-child{font-size:clamp(18px,1.47vw,26px)!important;letter-spacing:-.8px!important}
#sport-screen .sp-side-user{background:radial-gradient(ellipse at 21% 50%,#2e174a69,transparent 72%)!important}
#sport-screen .sp-user-avatar{border:2px solid #f9bb41!important;box-shadow:0 0 12px #ffc245a9,0 0 22px #8f35f780!important}
#sport-screen .sp-wallet-pill{background:linear-gradient(112deg,#26143f,#0c1532)!important;border:1px solid #48266e!important;min-height:33px!important}
#sport-screen .sp-wallet-pill:hover{border-color:#c065ff!important;box-shadow:0 0 10px #ba4aff75!important}
#sport-screen .sp-upgrade{
  background:linear-gradient(100deg,#b32ce3,#6413b7)!important;border:1px solid #d86bff!important;
  box-shadow:0 0 8px #a628ff,0 0 19px #9d21ee9e,inset 0 1px 7px #f0aaff44!important;
}
#sport-screen .sp-logout{background:linear-gradient(100deg,#2c2358,#191732)!important}
#sport-screen .sp-side-label{color:#faf0ff!important;text-shadow:0 0 6px #af65ff}
#sport-screen .sp-nav-item .sp-nav-visual{border:1px solid #8a48b8!important;background:linear-gradient(140deg,#52256b,#27214f)!important;box-shadow:0 0 6px #8e3bf387,inset 0 0 6px #b04cff47!important}
#sport-screen .sp-nav-item .sp-svg{filter:drop-shadow(0 0 4px #b56dff)}
#sport-screen .sp-nav-item.is-active{
  color:#fff!important;border-color:#e182ff!important;
  background:linear-gradient(100deg,#a72eef,#6517b5)!important;
  box-shadow:0 0 12px #bf3cff,0 0 22px #9d2bea88,inset 0 0 13px #dd91ff57!important;
}
#sport-screen .sp-side-foot>div{box-shadow:0 0 13px #9f39d5b5!important}

#sport-screen .sp-hero{
  border:1.6px solid #b95cff!important;
  box-shadow:0 0 8px #ac45eeac,0 0 22px #9d39f47f,inset 0 0 19px #bc6cff44!important;
  border-radius:15px!important;
}
#sport-screen .sp-hero-arrow{box-shadow:0 0 9px #9854f5a0!important;border:1px solid #9465c2!important;background:#261440cf!important}
#sport-screen .sp-hero-indicators button.is-selected{box-shadow:0 0 8px #fff8!important}
#sport-screen .sp-marketplace{
  border:1.5px solid #b44cf0!important;border-radius:14px!important;
  background:linear-gradient(100deg,#1f0e3b 0%,#150b31 57%,#0b1028 100%)!important;
  box-shadow:0 0 11px #a23cdb98,0 0 20px #5a168c77,inset 0 0 18px #923de433!important;
  min-height:100px!important;
}
#sport-screen .sp-marketplace h3{color:#fff!important;text-shadow:0 0 6px #d29aff8a;font-weight:950!important}
#sport-screen .sp-market-crown{color:#ffd04e!important;text-shadow:0 0 9px #ffc73f!important}
#sport-screen .sp-gold-button{
  background:linear-gradient(170deg,#ffe768,#ffbf19)!important;color:#251600!important;
  border:1px solid #ffe269!important;
  box-shadow:0 0 12px #ffbb2bd9,0 0 20px #e2a42173!important;
  text-shadow:none!important;
}
#sport-screen .sp-gold-button:hover{filter:brightness(1.13)!important}
#sport-screen .sp-market-number{background:linear-gradient(125deg,#292344,#121632)!important;border:1px solid #5c4a92!important}
#sport-screen .sp-feed-tabs button.active,
#sport-screen .sp-add-cta{
  border:1px solid #da70ff!important;
  background:linear-gradient(130deg,#b92cf1,#7017ca)!important;
  box-shadow:0 0 12px #bf35ffcc,0 0 23px #9429eb70!important;
  color:white!important;
}
#sport-screen .sp-feed-tabs button:not(.active){border-color:#4b2e7a!important;background:linear-gradient(115deg,#1d153a,#100c26)!important}
#sport-screen .sp-feed-tabs button:hover{border-color:#d075ff!important;box-shadow:0 0 8px #a749e780!important}
#sport-screen .sp-pick{
  border:1.5px solid #9143d3!important;
  background:linear-gradient(105deg,#1c1036,#07122a 70%,#160e31)!important;
  box-shadow:0 0 9px #8e39e588,inset 0 0 13px #742fc633!important;
}
#sport-screen .sp-pick:hover{border-color:#da80ff!important;box-shadow:0 0 15px #bd52f2ae!important}
#sport-screen .sp-pick-grid>div{border-right-color:#48306d!important}
#sport-screen .sp-pick-avatar{box-shadow:0 0 9px #ffbc45b9!important}
#sport-screen .sp-pick-creator{background:linear-gradient(120deg,#2a1442,#11132c 80%)!important}
#sport-screen .sp-free-badge{box-shadow:0 0 12px #07d97688!important}
#sport-screen .sp-pick-demo .sp-free-badge{box-shadow:0 0 9px #eeab5580!important}
#sport-screen .sp-pick-selection strong{color:#ffe3a2!important;text-shadow:0 0 7px #e6a03555}
#sport-screen .sp-pick-odds strong{text-shadow:0 0 8px #dbbaf755}
#sport-screen .sp-side-card{
  border:1.5px solid #b655f2!important;
  background:linear-gradient(130deg,#1a0c35,#0b1028 67%,#180e36)!important;
  box-shadow:0 0 10px #a941e4b8,0 0 21px #701db370,inset 0 0 16px #a14aff2d!important;
}
#sport-screen .sp-chat-summary>div{border-color:#503071!important;background:linear-gradient(130deg,#22123e,#151029)!important}
#sport-screen .sp-chat-log{background:linear-gradient(180deg,#100d2a,#140d30)!important}
#sport-screen .sp-chat-compose .sp-chat-submit{border-color:#e47cfc!important;box-shadow:0 0 12px #b32dffc2!important}
#sport-screen .sp-tipsters-tabs button.is-active:after{box-shadow:0 0 9px #e7bb17,0 0 14px #e7b81777!important}
#sport-screen .sp-tipster-rank.rank-1{box-shadow:0 0 15px #ffce40a5!important}
#sport-screen .sp-top-tipsters-link{color:#fff!important;text-shadow:0 0 5px #b777f766}
#sport-screen .sp-side-card:hover{border-color:#d282ff!important}
#sport-screen .sp-subview .sp-content-head,#sport-screen .sp-form,#sport-screen .sp-info-card{border-color:#8948c4!important;box-shadow:0 0 14px #8543bb4e!important}
#sport-screen .sp-side-nav .sp-nav-item{transition:box-shadow .16s,border-color .16s,background .16s!important}

/* RESPONSIVE — collapse gracefully *inside* Casino's narrower frame. */
@media(max-width:1600px){
 #sport-screen .sp-shell{grid-template-columns:minmax(154px,14.2%) minmax(0,1fr) minmax(238px,24%)!important;gap:9px!important}
 #sport-screen .sp-side-brand>span:last-child{font-size:20px!important}
 #sport-screen .sp-pick-grid{grid-template-columns:21% 29% 15% 8% 10% 17%!important}
 #sport-screen .sp-pick-status-col{display:none!important}
 #sport-screen .sp-pick-grid>div{padding:9px 6px!important}
}
/* Notebook: horizontal Sport navigator, readable center + chat columns. */
@media(max-width:1450px){
 #sport-screen .sp-shell{grid-template-columns:minmax(0,1fr) minmax(245px,26%)!important;gap:12px!important}
 #sport-screen .sp-sidebar{
   grid-column:1/-1!important;display:flex!important;flex-direction:row!important;
   flex-wrap:wrap!important;align-items:center!important;gap:9px!important;
   min-height:0!important;max-height:none!important;padding:8px!important;
 }
 #sport-screen .sp-side-brand{margin:0!important;min-height:47px!important;flex:0 0 184px!important;padding:5px 8px!important}
 #sport-screen .sp-side-user{margin:0!important;padding:3px!important}
 #sport-screen .sp-wallet-stack,#sport-screen .sp-upgrade,#sport-screen .sp-logout,#sport-screen .sp-side-label,#sport-screen .sp-side-foot{display:none!important}
 #sport-screen .sp-side-nav{flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:row!important;gap:5px!important;white-space:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0 2px!important}
 #sport-screen .sp-side-nav .sp-nav-item{width:auto!important;flex:0 0 auto!important;min-width:max-content!important;border:1px solid #54327e!important;padding:5px 8px!important}
 #sport-screen .sp-center{grid-column:1!important;grid-row:2!important}
 #sport-screen .sp-right{grid-column:2!important;grid-row:2!important}
 #sport-screen .sp-pick-grid{grid-template-columns:25% 34% 16% 9% 16%!important}
 #sport-screen .sp-pick-stake,#sport-screen .sp-pick-status-col{display:none!important}
 #sport-screen .sp-hero{aspect-ratio:4.15/1!important}
 #sport-screen .sp-chat-summary{grid-template-columns:1fr 1fr!important}
 #sport-screen .sp-chat-summary>div:last-child{display:none!important}
}
/* Tablet: cards below main feed; no cramped vertical sidebar or tiny artwork. */
@media(max-width:1060px){
 #sport-screen .sp-shell{display:flex!important;flex-direction:column!important;gap:12px!important}
 #sport-screen .sp-sidebar,#sport-screen .sp-center,#sport-screen .sp-right{width:100%!important;max-width:100%!important}
 #sport-screen .sp-sidebar{display:flex!important}
 #sport-screen .sp-center{order:2!important}
 #sport-screen .sp-sidebar{order:1!important}
 #sport-screen .sp-right{order:3!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 #sport-screen .sp-chat-card{grid-column:1/-1!important}
 #sport-screen .sp-top-tipsters-link,#sport-screen .sp-sport-stats-card{grid-column:auto!important}
 #sport-screen .sp-hero{aspect-ratio:3.9/1!important}
 #sport-screen .sp-pick-grid{grid-template-columns:25% 30% 15% 10% 20%!important}
 #sport-screen .sp-pick-selection,#sport-screen .sp-pick-odds,#sport-screen .sp-pick-analysis-box{display:flex!important}
 #sport-screen .sp-pick-stake,#sport-screen .sp-pick-status-col{display:none!important}
 #sport-screen .sp-chat-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 #sport-screen .sp-chat-summary>div:last-child{display:block!important}
}
@media(max-width:700px){
 body:has(#sport-screen:not([hidden])) .app-shell{width:calc(100% - 16px)!important;margin:8px auto 12px!important;border-radius:16px!important}
 body:has(#sport-screen:not([hidden])) .page-content{padding:10px 10px 16px!important}
 #sport-screen .sp-right{display:flex!important;flex-direction:column!important;gap:12px!important}
 #sport-screen .sp-chat-card,#sport-screen .sp-tipsters-card,#sport-screen .sp-top-tipsters-link,#sport-screen .sp-sport-stats-card{width:100%!important}
 #sport-screen .sp-hero{aspect-ratio:2.96/1!important}
 #sport-screen .sp-pick-grid{grid-template-columns:33% 37% 30%!important}
 #sport-screen .sp-pick-selection,#sport-screen .sp-pick-stake,#sport-screen .sp-pick-odds,#sport-screen .sp-pick-status-col{display:none!important}
 #sport-screen .sp-pick-analysis-box{display:flex!important}
}
@media(max-width:470px){
 #sport-screen .sp-side-brand{flex:0 0 auto!important;min-width:138px!important;max-width:51%!important}
 #sport-screen .sp-hero{aspect-ratio:2.45/1!important}
 #sport-screen .sp-pick-grid{grid-template-columns:1fr 1fr!important}
 #sport-screen .sp-pick-grid>.sp-pick-creator{grid-column:1!important}
 #sport-screen .sp-pick-grid>.sp-pick-fixture{grid-column:2!important}
 #sport-screen .sp-pick-grid>.sp-pick-analysis-box{grid-column:1/-1!important}
 #sport-screen .sp-side-nav{gap:5px!important}
}
@media(prefers-reduced-motion:reduce){#sport-screen *{animation:none!important;transition:none!important}}

/* Tablet card flow: do not leave an empty cell after the fixture. */
@media(min-width:701px) and (max-width:1060px){
 #sport-screen .sp-right{display:flex!important;flex-direction:column!important;gap:12px!important}
 #sport-screen .sp-tipsters-card,#sport-screen .sp-top-tipsters-link,#sport-screen .sp-sport-stats-card{width:100%!important;min-height:0!important}
 #sport-screen .sp-pick-grid{grid-template-columns:27% 41% 32%!important;grid-template-rows:auto auto!important;min-height:190px!important}
 #sport-screen .sp-pick-creator{grid-column:1;grid-row:1/3;min-height:190px!important}
 #sport-screen .sp-pick-fixture{grid-column:2;grid-row:1;min-height:100px!important}
 #sport-screen .sp-pick-selection{grid-column:3;grid-row:1;min-height:100px!important}
 #sport-screen .sp-pick-odds{grid-column:2;grid-row:2;min-height:86px!important;align-items:center!important;justify-content:center!important}
 #sport-screen .sp-pick-analysis-box{grid-column:3;grid-row:2;min-height:86px!important}
}