/* Global mobile fixes - loaded last on every page */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ---------- Header: always fits the screen, profile always visible ---------- */
@media (max-width:680px){
  .site-header.hv2 .header-inner{width:100%;min-width:0;gap:8px;padding:0 10px}
  .site-header.hv2 .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .site-header.hv2 .account{flex:0 1 auto;min-width:0;gap:6px}
  .site-header.hv2 .account>*{flex-shrink:0}
  .site-header.hv2 .header-wallet-balance{min-width:0}
}
/* Small phones: icon-only logo and slightly smaller buttons */
@media (max-width:440px){
  .site-header.hv2 .brand>span{display:none}
  .site-header.hv2 .brand:after{margin-left:0}
  .site-header.hv2 .header-inner{gap:6px;padding:0 8px}
  .site-header.hv2 .header-wallet,.site-header.hv2 .notification-btn,.site-header.hv2 .avatar-btn.hv2-profile,.site-header.hv2 .hv2-menu{height:36px}
  .site-header.hv2 .notification-btn,.site-header.hv2 .hv2-menu{width:36px}
  .site-header.hv2 .header-wallet-add{width:32px}
  .site-header.hv2 .header-wallet-balance{padding:0 8px}
  .site-header.hv2 .avatar-btn.hv2-profile{padding:0 3px}
  .site-header.hv2 .hv2-avatar,.site-header.hv2 .hv2-avatar img{width:28px;height:28px}
}

/* Language switcher: flag-only on phones */
@media (max-width:680px){
  .site-header.hv2 .lang-switch{flex:none;margin-left:auto}
  .site-header.hv2 .lang-switch-btn{width:38px;height:38px;padding:0;gap:0;justify-content:center;font-size:0;letter-spacing:0}
  .site-header.hv2 .lang-switch-btn>*:not(.lang-flag){display:none}
  .site-header.hv2 .lang-switch-menu{max-width:calc(100vw - 16px)}
}
@media (max-width:440px){
  .site-header.hv2 .lang-switch-btn{width:36px;height:36px}
  .site-header.hv2 .lang-switch-menu{position:fixed;left:8px;right:8px;top:62px;width:auto}
}

/* ---------- Cases page: featured banner ---------- */
#ccShowcase{touch-action:pan-y}
@media (max-width:620px){
  #ccShowcase .cc-showcase-copy{max-width:58%;padding:18px 16px 28px}
  #ccShowcase h2{font-size:22px;overflow-wrap:anywhere}
  #ccShowcase .cc-showcase-actions{flex-wrap:wrap;row-gap:8px}
  #ccShowcase .cc-showcase-art{inset:0 0 0 42%}
  #ccShowcase .cc-showcase-subject{right:4%;width:92%;height:72%;top:46%}
  #ccShowcase:hover .cc-showcase-subject{transform:translateY(-50%) rotate(-5deg)}
  #ccShowcase .cc-showcase-backdrop{inset:0;width:100%;height:100%}
  #ccShowcase .cc-showcase-dots{left:0;right:0;bottom:9px;justify-content:center}
}

/* ---------- Case page: Demo / Fast / Upgrade offer toggles ---------- */
@media (max-width:760px){
  .case-page.split-room-page .split-room-actions{grid-template-columns:minmax(0,1fr)}
  .case-page.split-room-page .case-mode-toggles{min-width:0;width:100%;justify-self:stretch;display:flex;flex-wrap:nowrap;justify-content:center;gap:8px}
  .case-page.split-room-page .case-mode-toggles .case-demo-toggle{flex:1 1 0;min-width:0;max-width:150px;grid-template-columns:1fr;justify-items:center;row-gap:7px;padding:9px 6px;border:1px solid #2b3544;border-radius:10px;background:#0b1119;text-align:center}
  .case-page.split-room-page .case-mode-toggles .case-demo-toggle b{font-size:11.5px;line-height:1.15;white-space:normal}
  .case-page.split-room-page .case-mode-toggles .case-sound-toggle{flex:none;width:44px;height:auto;min-height:38px;align-self:stretch}
}

/* ---------- Case battles: reel pointer like normal case openings (all screen sizes) ---------- */
#battle-app .bxr .bxr-reel .reel-shell .reel-marker{position:absolute!important;z-index:5!important;inset:auto!important;top:50%!important;left:0!important;right:0!important;bottom:auto!important;width:100%!important;height:2px!important;transform:translateY(-50%)!important;border:0!important;overflow:visible!important;pointer-events:none;background:linear-gradient(90deg,transparent 0,var(--c,#a98bff) 12%,var(--c,#a98bff) 88%,transparent 100%)!important;box-shadow:0 0 12px color-mix(in srgb,var(--c,#a98bff) 65%,transparent)!important}
#battle-app .bxr .bxr-reel .reel-shell .reel-marker:before,#battle-app .bxr .bxr-reel .reel-shell .reel-marker:after{content:""!important;position:absolute!important;top:50%!important;bottom:auto!important;width:9px!important;height:14px!important;border:0!important;background:var(--c,#a98bff)!important;transform:translateY(-50%)!important;box-shadow:none!important}
#battle-app .bxr .bxr-reel .reel-shell .reel-marker:before{left:0!important;right:auto!important;clip-path:polygon(0 0,100% 50%,0 100%)!important}
#battle-app .bxr .bxr-reel .reel-shell .reel-marker:after{right:0!important;left:auto!important;clip-path:polygon(100% 0,0 50%,100% 100%)!important}
#battle-app .bxr .bxr-reel .reel-shell.is-horizontal .reel-marker{top:0!important;bottom:0!important;left:50%!important;right:auto!important;width:2px!important;height:100%!important;transform:translateX(-50%)!important;background:linear-gradient(180deg,transparent 0,var(--c,#a98bff) 14%,var(--c,#a98bff) 86%,transparent 100%)!important}
#battle-app .bxr .bxr-reel .reel-shell.is-horizontal .reel-marker:before,#battle-app .bxr .bxr-reel .reel-shell.is-horizontal .reel-marker:after{left:50%!important;right:auto!important;width:14px!important;height:9px!important;transform:translateX(-50%)!important}
#battle-app .bxr .bxr-reel .reel-shell.is-horizontal .reel-marker:before{top:0!important;bottom:auto!important;clip-path:polygon(0 0,100% 0,50% 100%)!important}
#battle-app .bxr .bxr-reel .reel-shell.is-horizontal .reel-marker:after{top:auto!important;bottom:0!important;clip-path:polygon(0 100%,50% 0,100% 100%)!important}

/* ---------- Case battles: all players side by side on tablets/phones ---------- */
@media (max-width:900px){
  #battle-app .bxr .bxr-stage,#battle-app .bxr .bxr-stage.teams{display:grid!important;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:8px;overflow:visible;padding-bottom:0;scroll-snap-type:none}
  #battle-app .bxr .bxr-stage.teams{grid-template-columns:repeat(4,minmax(0,1fr))}
  #battle-app .bxr .bxr-team{display:contents}
  #battle-app .bxr .bxr-vs{display:none}
  #battle-app .bxr .bxr-stage>.bxr-col,#battle-app .bxr .bxr-team .bxr-col{flex:none;width:auto;min-width:0}
}
@media (max-width:640px){
  .battle-room-page #battle-app{padding:10px 6px 20px}
  #battle-app .bxr .bxr-stage,#battle-app .bxr .bxr-stage.teams{gap:5px}
  #battle-app .bxr .bxr-col{border-radius:11px}
  #battle-app .bxr .bxr-col-head{flex-direction:column;align-items:center;gap:4px;padding:10px 4px 6px;text-align:center}
  #battle-app .bxr .bxr-ava{width:30px;height:30px}
  #battle-app .bxr .bxr-who{flex:none;width:100%}
  #battle-app .bxr .bxr-who b{justify-content:center;gap:3px;font-size:11.5px}
  #battle-app .bxr .bxr-who small{display:none}
  #battle-app .bxr .bxr-tag{padding:1px 4px;font-size:8px}
  #battle-app .bxr .bxr-total{text-align:center}
  #battle-app .bxr .bxr-total small{font-size:9.5px}
  #battle-app .bxr .bxr-total b{font-size:14px}
  #battle-app .bxr .bxr-reel{margin:0 4px}
  #battle-app .bxr .bxr-reel .reel-shell{height:190px!important}
  #battle-app .bxr .bxr-reel .reel-card{flex-basis:100px!important;height:100px!important;min-height:100px!important;max-height:100px!important;padding:4px 3px!important}
  #battle-app .bxr .bxr-reel .reel-card>div{height:62px!important}
  #battle-app .bxr .bxr-reel .reel-card>div>span{font-size:9px}
  #battle-app .bxr .bxr-reel .reel-card img{width:92%!important;height:60px!important}
  #battle-app .bxr .bxr-reel .reel-card strong{margin:1px 0!important;font-size:9.5px!important}
  #battle-app .bxr .bxr-reel .reel-card small{font-size:9.5px!important}
  #battle-app .bxr .bxr-empty,#battle-app .bxr.mode-1v1 .bxr-empty{height:190px;padding:6px;font-size:11px}
  #battle-app .bxr .bxr-plus{width:38px;height:38px;font-size:18px}
  #battle-app .bxr .bxr-empty .bxr-btn{height:auto;min-height:30px;padding:5px 8px;font-size:11px;line-height:1.15;white-space:normal}
  #battle-app .bxr .bxr-pull{flex-direction:column;justify-content:center;gap:1px;min-height:38px;margin:6px 4px 0;text-align:center}
  #battle-app .bxr .bxr-pull strong{max-width:100%;font-size:10.5px}
  #battle-app .bxr .bxr-pull span{font-size:11px}
  #battle-app .bxr .bxr-pull em{font-size:10px}
  #battle-app .bxr .bxr-haul{margin:4px 5px 8px;padding-top:6px}
  #battle-app .bxr .bxr-haul-head{margin-bottom:5px;font-size:9.5px}
  #battle-app .bxr .bxr-haul-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;max-height:96px}
  #battle-app .bxr .bxr-hi{height:40px;border-radius:6px}
  #battle-app .bxr .bxr-hi img{inset:3px 2px 11px;width:calc(100% - 4px);height:calc(100% - 14px)}
  #battle-app .bxr .bxr-hi small{bottom:2px;font-size:7.5px}
}