/* phones: demo screens fit the screen (Batu 16 Oct 22:58) */
@media (max-width:640px){
  /* 17 Oct 00:10 (Batu: chats still ran off the screen): the stage, its tabs and the assistant fit under the header together */
  .hb-reel{--hbh0:clamp(440px,calc(100vh - var(--m-navh,60px) - 150px),620px);--hbh:var(--hbh0)}@media (max-width:640px){.hb-reel{--hbh0:clamp(396px,calc(100vh - var(--m-navh,54px) - 135px),558px)}}
  @supports (height:100svh){.hb-reel{--hbh0:clamp(440px,calc(100svh - var(--m-navh,60px) - 150px),620px)}@media (max-width:640px){.hb-reel{--hbh0:clamp(396px,calc(100svh - var(--m-navh,54px) - 135px),558px)}}}
  /* 17 Oct 10:03 (Batu: "o demoyu da biraz zoom out yapalım her sektör için"): the scenes are laid out on a bigger canvas and
     drawn at 84%, so the same box on screen holds more of the site and the whole answer */
  .hb-reel{--hbz:.84}
  .hb-reel .hb-scs{width:calc(100% / var(--hbz))!important;max-width:none!important;justify-self:start!important;align-self:start;margin-left:0!important;margin-right:0!important;transform:scale(var(--hbz));transform-origin:0 0;--hbh:calc(var(--hbh0) / var(--hbz))}
  .hb-reel .hb-w{font-size:13px}
  .hb-scs{align-items:start}
  .hb-scn{place-items:start center}
  /* the first scene: the site, then the assistant as a sheet over it */
  .hb-reel :is(.hb-k,.hc-k) .hb-sb{position:relative;height:calc(var(--hbh) + 64px);overflow:hidden;max-width:none;width:100%}@media (max-width:640px){.hb-reel :is(.hb-k,.hc-k) .hb-sb{height:calc(var(--hbh) + 57.6px)}}
  .hb-reel :is(.hb-k,.hc-k) .hb-bsl{display:none}
  .hb-reel :is(.hb-k,.hc-k) .hb-dock{position:absolute!important;left:0;right:0;bottom:0;top:auto;width:auto!important;margin:0!important;z-index:3}
  .hb-reel :is(.hb-k,.hc-k) .hb-dock .hb-w{height:var(--hbh);border-radius:22px 22px 0 0;box-shadow:0 -18px 40px rgba(11,22,48,.28)}@media (max-width:640px){.hb-reel :is(.hb-k,.hc-k) .hb-dock .hb-w{border-radius:19.8px 19.8px 0 0}}
  .hb-reel :is(.hb-k,.hc-k) .hb-wc{transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
  html.hx-js .hb-reel .hb-k:not(.s2) .hb-wc,html.hx-js .hb-reel .hc-k:not(.s3) .hb-wc{opacity:0;transform:translateY(45%)}
  /* the sportsbook shows a few more fixtures behind the sheet */
  .hb-reel .hb-k .hb-r2{display:grid}
  .hb-reel .hb-k .hb-more{display:block}
  .hb-reel .hc-site .hc-hc{min-height:calc(var(--hbh) - 40px)}
}
/* 3 phones: groups of three or four tall cards become a row you swipe through, with dots under it */
@media (max-width:640px){
  .m-sw{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:-20px!important;padding:4px 20px 8px!important;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}@media (max-width:640px){.m-sw{gap:10.8px!important;margin-inline:-18px!important;padding:3.6px 18px 7.2px!important;scroll-padding-inline:18px}}
  .m-sw::-webkit-scrollbar{display:none}
  .m-sw>.m-off{display:none!important}
  .m-sw>*{flex:0 0 86%!important;max-width:86%!important;min-width:0;margin:0!important;scroll-snap-align:center;scroll-snap-stop:always}
  .m-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}@media (max-width:640px){.m-dots{gap:7.2px;margin-top:12.6px}}
  .m-dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:currentColor;opacity:.28;cursor:pointer;transition:width .35s cubic-bezier(.2,.8,.2,1),opacity .35s}@media (max-width:640px){.m-dots button{width:7.2px;height:7.2px;border-radius:3.6px}}
  .m-dots button[aria-current="true"]{width:22px;opacity:.9}@media (max-width:640px){.m-dots button[aria-current="true"]{width:19.8px}}
}
@media (min-width:641px){.m-dots{display:none}}
/* 7 Batu 23:28 "yazılar chat'e sığmıyor": on phones each answer keeps its main card and drops the extras, so it fits the chat */
@media (max-width:640px){
  .hb-reel .hb-sm+.hb-sm{display:none}
  .hb-reel .hb-mc.hb-fr{display:none}
  .hb-reel .hb-legi>div>div>span{display:none}
  .hb-reel .hc-lf .hc-lfi:not(.hc-f3){display:none}
  .hb-reel .hb-v .hc-mc{display:none}
  .hb-reel .hb-mo>.hc-lr.k3,.hb-reel .hb-mo>.hc-gg{display:none}
}
/* 8 Batu 23:31 "Coverage sayfasındaki chat de asla sığmıyor": on phones the chat is as tall as the answer on show (not the
   tallest of the five), without the follow-up questions, and the season ranking keeps its top rows */
@media (max-width:640px){
  .cvx-p{align-self:start}
  .cvx-a:not(.on){display:none}
  .cvx-fu{display:none!important}
  .cvx-rk>div:nth-child(n+4){display:none}
}
/* 6 Batu 23:28 on an iPhone: in the claude.ai app the page sits under the status bar and the viewer's buttons, and the
   header sticks below them, so the page showed through the strip above it; the header's colour now fills that strip */
.nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:env(safe-area-inset-top,0px);background:var(--bg);pointer-events:none}
/* 5 small phones (360px): the header button stays on one line */
.nav .btn{white-space:nowrap}
@media (max-width:380px){.nav .btn{padding:10px 14px;font-size:13.5px}@media (max-width:640px){.nav .btn{padding:9px 12.6px}}}
/* 4 phones: Follow & Live keeps four live stats, so the phone fits the screen */
@media (max-width:640px){#b-fl .b-vsf .lw:nth-child(n+5){display:none}#bo-view .b-board.m-sw>*{transform:none!important}}
/* 6 phones: the three sector cards (Home, About) rise in place instead of the long slide in from the left, which left them
   half off the screen while the page scrolled past */
@media (max-width:640px){html.hx-js .hxs-ov .hxs-it.hxs-rv{transform:translateY(22px)}@media (max-width:640px){html.hx-js .hxs-ov .hxs-it.hxs-rv{transform:translateY(19.8px)}}
html.hx-js .hxs-ov .hxs-it.hxs-rv.in{transform:none;transition:opacity .6s ease-out,transform .7s cubic-bezier(.2,.8,.2,1)}}
/* 9 phones (Batu 17 Oct 09:46): "One engine. Three experiences." names the three experiences at once, as a short list under
   the engine; the pictures stay on bigger screens */
@media (max-width:640px){#sv-one .sv-oec{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px;margin-top:30px}@media (max-width:640px){#sv-one .sv-oec{gap:9px;margin-top:27px}}
#sv-one .sv-oec::before,#sv-one .sv-xc::before,#sv-one .sv-xc::after{display:none}
#sv-one .sv-oec::after{top:-30px;height:30px}@media (max-width:640px){#sv-one .sv-oec::after{top:-27px;height:27px}}
#sv-one .sv-xm{display:none}
#sv-one .sv-xc{grid-template-rows:auto;border-radius:20px}@media (max-width:640px){#sv-one .sv-xc{border-radius:18px}}
#sv-one .sv-xc:hover{transform:none}
#sv-one .sv-xb{gap:6px;padding:16px 18px 18px}@media (max-width:640px){#sv-one .sv-xb{gap:5.4px;padding:14.4px 16.2px 16.2px}}
#sv-one .sv-xb small{font-size:11.5px;gap:8px}@media (max-width:640px){#sv-one .sv-xb small{gap:7.2px}}
#sv-one .sv-xb small i{width:26px;height:26px}@media (max-width:640px){#sv-one .sv-xb small i{width:23.4px;height:23.4px}}
#sv-one .sv-xb h3{font-size:22px;margin-top:2px}@media (max-width:640px){#sv-one .sv-xb h3{font-size:19.8px}}
#sv-one .sv-xb p{font-size:15px;line-height:1.5}@media (max-width:640px){#sv-one .sv-xb p{font-size:14px}}
#sv-one .sv-xg{margin-top:6px;padding:8px 14px;font-size:14px}@media (max-width:640px){#sv-one .sv-xg{margin-top:5.4px;padding:7.2px 12.6px}}}
/* 10 phones (Batu 17 Oct 10:07): the sample phone under "Made for supporters. Built for the club." does nothing on a phone, so it goes */
@media (max-width:640px){#cn-what .cn-whp{display:none!important}}
/* 11 phones (Batu 17 Oct 10:11: swiping the games was hard and the page scroll moved them by mistake): the daily games are
   three tabs, one game at a time, nothing scrolls sideways */
.m-gt{display:none}
@media (max-width:640px){
.m-gt{display:flex;gap:4px;padding:4px;margin:0 auto 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--cn-sh)}@media (max-width:640px){.m-gt{gap:3.6px;padding:3.6px;margin:0 auto 16.2px;border-radius:899.1px}}
.m-gt button{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;min-height:40px;padding:6px 4px;border-radius:999px;display:grid;place-items:center;text-align:center;font:700 12.5px/1.15 var(--f-display);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .3s,color .3s}@media (max-width:640px){.m-gt button{padding:5.4px 3.6px;border-radius:899.1px}}
.m-gt button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.m-gt button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
#cn-games .cn-g3.m-gtab{display:block!important}
#cn-games .cn-g3.m-gtab>.cn-gm:not(.m-gon){display:none!important}
#cn-games .cn-g3.m-gtab>.cn-gm{animation:m-gin .35s ease both}
@keyframes m-gin{from{opacity:0;transform:translateY(8px)}}}
/* 7 phones: the deck's arrows sit under the page, either side of the page count, so they no longer cover the slide */
.rsv-n.m-rn{display:flex;align-items:center;justify-content:center;gap:20px}@media (max-width:640px){.rsv-n.m-rn{gap:18px}}
.rsv-n.m-rn .rsv-ar{position:static;translate:none;width:40px;height:40px;box-shadow:none}@media (max-width:640px){.rsv-n.m-rn .rsv-ar{width:36px;height:36px}}
/* 8 phones: the product videos keep the play button in the middle and a readable caption across the bottom */
@media (max-width:560px){.pv-flm.hx-fa .hx-fpl{left:50%;top:50%;bottom:auto;translate:-50% -50%;width:58px;height:58px}@media (max-width:640px){.pv-flm.hx-fa .hx-fpl{width:52.2px;height:52.2px}}
.pv-flm.hx-fa .hx-fcap{left:12px;right:12px;bottom:12px;justify-content:center}@media (max-width:640px){.pv-flm.hx-fa .hx-fcap{left:10.8px;right:10.8px;bottom:10.8px}}
.pv-flm .hx-fcap span{font:600 13px/1.2 var(--f-body,inherit);letter-spacing:0;text-transform:none;padding:8px 14px}@media (max-width:640px){.pv-flm .hx-fcap span{padding:7.2px 12.6px}}
#home .hx-flm.hx-fa .hx-fpl{left:14px;bottom:14px;width:46px;height:46px}@media (max-width:640px){#home .hx-flm.hx-fa .hx-fpl{left:12.6px;bottom:12.6px;width:41.4px;height:41.4px}}
#home .hx-flm.hx-fa .hx-fcap{left:72px;right:12px;bottom:26px}@media (max-width:640px){#home .hx-flm.hx-fa .hx-fcap{left:64.8px;right:10.8px;bottom:23.4px}}
#home .hx-flm .hx-fcap span{font:600 12.5px/1.2 var(--f-body,inherit);letter-spacing:0;text-transform:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}}