/* October preview refinements: clearer casino, cases, and sportsbook. */

/* Homepage cases return to the original OG crate art with a quieter frame. */
#app .case-tile.case-classic{
  display:flex;flex-direction:column;position:relative;isolation:isolate;
  padding:0;background:#15151a;border:1px solid #ffffff29;
  border-radius:9px;overflow:hidden;box-shadow:0 5px 17px #0007;
  text-align:center;transition:transform .18s ease,border-color .18s ease;
}
#app .case-tile.case-classic:hover{transform:translateY(-3px);border-color:#baf06b88}
#app .case-tile.case-classic .case-art{
  width:100%;height:72%;min-height:0;flex:1 1 auto;margin:0;
  display:grid;place-items:center;overflow:hidden;background:#0d0d12;
}
#app .case-tile.case-classic .case-art img{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  mix-blend-mode:normal;filter:brightness(1.12) contrast(1.16) saturate(1.13);
}
#app .case-tile.case-classic strong{
  display:block;width:100%;max-width:100%;margin:7px 0 0;padding:0 6px;
  color:#f5f3ef;font-size:.74rem;line-height:1.1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
#app .case-tile.case-classic>span{
  display:block;margin:3px 0 9px;color:#c5f383;font-size:.73rem;
  font-weight:800;line-height:1;
}
#app .case-catalog .case-tile.case-classic .case-art{height:72%}

/* Casino promotions: vivid color and readable, compact artwork. */
#app .casino-page .wide-banners{gap:12px;margin-bottom:18px}
#app .casino-page .wide-banner{
  position:relative;isolation:isolate;overflow:hidden;display:block;
  height:160px;padding:0;border-radius:12px;
  border:1px solid #ffffff3b;
  box-shadow:inset 0 1px #ffffff2b,0 10px 25px #0005;
  transition:filter .18s ease,transform .18s ease;
}
#app .casino-page .wide-banner:hover{filter:brightness(1.1);transform:translateY(-2px)}
#app .casino-page .vip-banner{
  background:radial-gradient(ellipse at 75% 48%,#46fac498 0%,transparent 37%),
    radial-gradient(ellipse at 43% 105%,#5efec878 0%,transparent 45%),
    linear-gradient(115deg,#092d55 0%,#086f99 48%,#079d80 100%);
}
#app .casino-page .promo-banner{
  background:radial-gradient(ellipse at 82% 58%,#f6ba4594 0%,transparent 38%),
    radial-gradient(ellipse at 57% 10%,#9d68f5aa 0%,transparent 42%),
    linear-gradient(112deg,#271454 0%,#6033ad 57%,#8651d2 100%);
}
#app .casino-page .wide-banner:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(125deg,transparent 0 40px,#ffffff0b 41px 42px,transparent 43px 82px);
  opacity:.65;
}
#app .casino-page .wide-banner:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,#061e348c 0%,#061e3450 41%,transparent 72%);
}
#app .casino-page .promo-banner:after{background:linear-gradient(90deg,#231044bb 0%,#23104466 43%,transparent 75%)}
#app .casino-page .wide-banner .banner-copy{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;height:100%;padding:15px 23px;
  text-shadow:0 2px 10px #0008;
}
#app .casino-page .wide-banner .banner-copy span{
  font-size:.59rem;letter-spacing:.18em;color:#ecffdc;font-weight:900;
}
#app .casino-page .wide-banner strong{
  margin:5px 0;font:600 clamp(1.7rem,2.5vw,2.35rem)/.98 Oswald;
  color:#fff;letter-spacing:.015em;
}
#app .casino-page .wide-banner small{font-size:.69rem;color:#fff;font-weight:850}
#app .casino-page .vip-banner .banner-copy strong{font-size:clamp(1.85rem,2.8vw,2.55rem)}
#app .casino-page .transfer-mark{
  position:absolute;right:5%;top:50%;z-index:2;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;width:48%;
}
#app .casino-page .transfer-mark span{
  flex:0 0 auto;color:#efffee;font-size:.55rem;font-weight:900;
  letter-spacing:.12em;white-space:nowrap;text-shadow:0 2px 9px #063b4d;
}
#app .casino-page .transfer-mark i{
  flex:1;height:1px;min-width:10px;background:linear-gradient(90deg,#e3ffad,#c4ffc022);
}
#app .casino-page .transfer-mark .transfer-logo{
  width:min(130px,43%);height:auto;max-height:83px;object-fit:contain;
  filter:drop-shadow(0 5px 10px #002a3faa);
}
#app .casino-page .wide-banner .wide-banner-media{
  position:absolute;z-index:1;right:0;top:0;width:52%;height:100%;object-fit:contain;
  object-position:center;max-width:none;
}
#app .casino-page .promo-banner .wide-banner-media{
  width:59%;right:-2%;mix-blend-mode:screen;
  filter:saturate(1.48) contrast(1.13) brightness(1.2) drop-shadow(0 9px 11px #1a0b55a8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 88%,transparent);
}

/* Casino art keeps the supplied poster aspect ratio at every grid width. */
#app .casino-page .power-scroll .provider-tile{
  flex:0 0 142px;width:142px;height:auto;aspect-ratio:384/491;
}
#app .casino-page .power-scroll .original-tile{
  flex:0 0 140px;width:140px;height:auto;aspect-ratio:680/912;
}
#app .casino-page .provider-tile img{width:100%;height:100%;object-fit:cover}
#app .casino-page .casino-grid{
  grid-template-columns:repeat(auto-fill,minmax(132px,148px));gap:12px;
}
#app .casino-page .casino-grid .provider-tile{
  width:100%;height:auto;min-width:0;aspect-ratio:384/491;
}

/* Sportsbook: a full-width rhythm like a modern fixture board. */
#app .sports-layout:not(.sports-event-layout){
  display:block;max-width:none;padding:18px 22px 74px;
}
#app .sports-layout:not(.sports-event-layout)>.sports-sidebar{display:none}
#app .sports-layout:not(.sports-event-layout)>.sports-main{min-width:0}
#app .sports-layout:not(.sports-event-layout) .sports-top-tabs{
  display:flex;gap:7px;border:0;margin:0 0 14px;
}
#app .sports-layout:not(.sports-event-layout) .sports-top-tabs a{
  padding:9px 16px;border:1px solid #ffffff16;border-radius:999px;
  background:#1d2023;color:#d1d3d4;font-size:.78rem;font-weight:750;
}
#app .sports-layout:not(.sports-event-layout) .sports-top-tabs a.active{
  border-color:#b4f166;background:#263323;color:#d8ffa8;
}
#app .sports-layout:not(.sports-event-layout) .sports-banner-row{display:block}
#app .sports-layout:not(.sports-event-layout) .sports-feature-card{display:none}
#app .sports-layout:not(.sports-event-layout) .sports-banner-row .sports-hero{
  height:200px;margin:0;padding:28px;border:1px solid #ffffff35;border-radius:12px;
  background:linear-gradient(90deg,#0d0f12 0%,#0d0f12f5 24%,#0d0f12ad 36%,#0d0f123d 49%,transparent 68%) 0 0/100% 100% no-repeat,
    url('./assets/trending-sports-primary.jpg') right center/66% auto no-repeat,#0d0f12;
}
#app .sports-layout:not(.sports-event-layout) .sports-hero span{color:#c9f593}
#app .sports-layout:not(.sports-event-layout) .sports-hero strong{
  font-size:clamp(1.9rem,3vw,2.7rem);line-height:1;
}
#app .sports-layout:not(.sports-event-layout) .sports-hero small{color:#ebf0e6;font-size:.78rem}
#app .sports-layout:not(.sports-event-layout) .sports-chip-row{
  margin:14px 0 24px;gap:7px;padding-bottom:2px;
}
#app .sports-layout:not(.sports-event-layout) .sports-chip-row a{
  padding:9px 12px;background:#202328;border:1px solid #ffffff1c;
  color:#e0e2e1;font-size:.73rem;
}
#app .sports-layout:not(.sports-event-layout) .sports-chip-row a.active,
#app .sports-layout:not(.sports-event-layout) .sports-chip-row a:hover{
  background:#a9ed50;color:#15200d;border-color:#a9ed50;
}
#app .sports-layout:not(.sports-event-layout) .sports-list-head{margin:0 0 13px}
#app .sports-layout:not(.sports-event-layout) .sports-list-head h2{font-size:1.25rem}
#app .sports-layout:not(.sports-event-layout) .match-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
#app .sports-layout:not(.sports-event-layout) .match-card{
  min-width:0;min-height:188px;padding:13px 14px;border:1px solid #ffffff18;
  background:#1b1e20;border-radius:10px;
}
#app .sports-layout:not(.sports-event-layout) .match-top{
  padding-bottom:10px;font-size:.7rem;border-color:#ffffff17;
}
#app .sports-layout:not(.sports-event-layout) .match-top small{color:#c9d0c7}
#app .sports-layout:not(.sports-event-layout) .match-body{
  display:block;padding-top:11px;
}
#app .sports-layout:not(.sports-event-layout) .teams{
  display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:10px;
}
#app .sports-layout:not(.sports-event-layout) .teams strong{font-size:.82rem;line-height:1.25}
#app .sports-layout:not(.sports-event-layout) .teams small{
  color:#baf06e;font-size:.65rem;margin:2px 0 0;
}
#app .sports-layout:not(.sports-event-layout) .event-market-grid{display:block}
#app .sports-layout:not(.sports-event-layout) .event-market-grid .sports-market{display:none}
#app .sports-layout:not(.sports-event-layout) .event-market-grid .sports-market:first-child{
  display:block;padding:0;background:none;border:0;
}
#app .sports-layout:not(.sports-event-layout) .sports-market>small{
  font-size:.66rem;color:#aeb5ae;margin:0 0 6px;
}
#app .sports-layout:not(.sports-event-layout) .sports-market>div{gap:6px}
#app .sports-layout:not(.sports-event-layout) .sports-market .odd{
  min-height:39px;padding:7px 9px;background:#2a2d2f;border-color:#ffffff11;
  font-size:.67rem;
}
#app .sports-layout:not(.sports-event-layout) .sports-market .odd:hover,
#app .sports-layout:not(.sports-event-layout) .sports-market .odd.selected{
  background:#304226;border-color:#a8ea58;
}
#app .sports-layout:not(.sports-event-layout) .sports-market .odd strong{font-size:.72rem}
#app .sports-layout:not(.sports-event-layout) .sports-bet-activity{margin-top:33px}

/* Poker artwork and sign-in are one card, with text over its image. */
#app .poker-intro{display:block}
#app .poker-intro .poker-lobby{
  height:450px;isolation:isolate;border-color:#99485288;
  background:url('./assets/poker-banner-wide.png') center center/cover no-repeat,#9b101b;
}
#app .poker-intro .poker-lobby:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,#31081091 0%,#31081055 45%,transparent 75%);
}
#app .poker-intro .poker-frame-bar{position:relative;z-index:1;background:#370b13a8}
#app .poker-intro .poker-lobby-content{
  position:relative;z-index:1;align-items:flex-start;text-align:left;
  width:68%;padding:30px 52px;
}
#app .poker-intro .poker-lobby h1{text-transform:none}

@media(max-width:900px){
  #app .casino-page .wide-banners{grid-template-columns:1fr 1fr}
  #app .sports-layout:not(.sports-event-layout) .match-list{grid-template-columns:1fr}
}
@media(max-width:700px){
  #app .casino-page .wide-banners{grid-template-columns:1fr}
  #app .casino-page .wide-banner{height:136px}
  #app .casino-page .transfer-mark{width:49%;right:4%;gap:7px}
  #app .casino-page .transfer-mark span{display:none}
  #app .casino-page .transfer-mark .transfer-logo{width:92%;max-height:62px}
  #app .casino-page .catalog-controls .select-wrap:last-child span{display:none}
  #app .casino-page .catalog-controls .select-wrap:last-child select{width:100%;max-width:none}
  #app .casino-page .casino-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .sports-layout:not(.sports-event-layout){padding:12px 12px 65px}
  #app .sports-layout:not(.sports-event-layout) .sports-banner-row .sports-hero{
    height:165px;padding:19px;
    background:linear-gradient(90deg,#0d0f12f2 0%,#0d0f12d8 37%,#0d0f1266 66%,transparent 100%) 0 0/100% 100% no-repeat,
      url('./assets/trending-sports-primary.jpg') right center/78% auto no-repeat,#0d0f12;
  }
  #app .sports-layout:not(.sports-event-layout) .sports-hero strong{font-size:1.9rem}
  #app .sports-layout:not(.sports-event-layout) .sports-chip-row{margin-bottom:17px}
  #app .poker-intro .poker-lobby{height:380px;background-size:auto 100%;background-position:63% center}
  #app .poker-intro .poker-lobby:before{background:linear-gradient(90deg,#310810bd 0%,#31081080 64%,#31081020 100%)}
  #app .poker-intro .poker-lobby-content{width:100%;padding:24px}
}
@media(prefers-reduced-motion:reduce){#app .case-tile.case-classic{transition:none}}