/* OctaBreak Pool — trava paisagem no mobile + modo expandido */
.mobile-orientation-guard{display:none}

@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.mobile-orientation-lock{
    overflow:hidden;
    background:radial-gradient(circle at 12% 0,rgba(115,214,164,.2) 0,transparent 28%),#102a43;
  }
  body.mobile-orientation-lock .mobile-orientation-guard{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-content:center;
    grid-template-columns:auto minmax(230px,390px);
    gap:42px;
    padding:24px 32px;
    color:#fff;
    background:radial-gradient(circle at 50% 42%,rgba(38,150,110,.22),transparent 32%),linear-gradient(145deg,#176247,#1f7a5a 55%,#102a43);
    text-align:left;
  }
  body.mobile-orientation-lock .site-header,
  body.mobile-orientation-lock .octa-play-layout,
  body.mobile-orientation-lock .site-footer,
  body.mobile-orientation-lock .cookie-notice{display:none!important}
  .orientation-visual{
    position:relative;
    width:190px;
    height:190px;
    display:grid;
    place-items:center;
    margin:0 auto;
  }
  .orientation-phone{
    position:relative;
    width:70px;
    height:124px;
    border:7px solid #fff;
    border-radius:16px;
    background:rgba(255,255,255,.12);
    box-shadow:0 16px 35px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.22);
    animation:octa-turn-phone 2.25s cubic-bezier(.65,0,.35,1) infinite;
  }
  .orientation-phone:before{
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    width:22px;
    height:4px;
    border-radius:5px;
    background:#fff;
    transform:translateX(-50%);
  }
  .orientation-phone i{
    position:absolute;
    left:50%;
    bottom:7px;
    width:8px;
    height:8px;
    border:2px solid #fff;
    border-radius:50%;
    transform:translateX(-50%);
  }
  .orientation-arrow{
    position:absolute;
    right:6px;
    top:15px;
    color:#b7ef32;
    font-size:66px;
    font-weight:900;
    line-height:1;
    text-shadow:0 5px 12px rgba(0,0,0,.35);
    animation:octa-turn-arrow 2.25s ease-in-out infinite;
  }
  .orientation-copy span{
    display:block;
    margin-bottom:8px;
    color:#b7ef32;
    font-size:.72rem;
    font-weight:950;
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  .orientation-copy h2{
    margin:0 0 8px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.9rem,4vw,2.55rem);
    line-height:1;
  }
  .orientation-copy p{
    max-width:360px;
    margin:0;
    color:rgba(255,255,255,.84);
    font-size:.95rem;
    line-height:1.55;
  }
  @keyframes octa-turn-phone{
    0%,20%{transform:rotate(0deg)}
    65%,85%{transform:rotate(90deg)}
    100%{transform:rotate(0deg)}
  }
  @keyframes octa-turn-arrow{
    0%,20%{transform:rotate(-25deg);opacity:.55}
    65%,85%{transform:rotate(75deg);opacity:1}
    100%{transform:rotate(-25deg);opacity:.55}
  }
  @media(max-width:760px){
    body.mobile-orientation-lock .mobile-orientation-guard{
      grid-template-columns:1fr;
      gap:24px;
      padding:20px 18px;
      text-align:center;
    }
    .orientation-copy p{margin:0 auto}
  }
  @media(prefers-reduced-motion:reduce){
    .orientation-phone{animation:none;transform:rotate(90deg)}
    .orientation-arrow{animation:none;opacity:1}
  }
}

@media(orientation:landscape) and (hover:none) and (pointer:coarse){
  html,body{width:100%;height:100%;overflow:hidden;background:#102a43}
  .site-header,.octa-desktop-sidebar,.octa-desktop-ad,.site-footer,.cookie-notice{display:none!important}
  .octa-play-layout,.octa-primary-column,#root{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    max-width:none;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  #root>main{width:100%;height:100dvh}
  #root .scorebar{
    top:max(5px,env(safe-area-inset-top));
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
    gap:clamp(96px,20vw,220px);
    justify-content:center;
  }
  #root .player{
    width:clamp(145px,24vw,220px);
    flex:0 0 clamp(145px,24vw,220px);
  }
  #root .player.active small{
    display:block;
    padding:1px 5px;
    font-size:7px;
    letter-spacing:.08em;
  }
  #root .player .avatar.group-ball{
    width:32px;
    height:32px;
    flex-basis:32px;
  }
  #root .player .avatar.group-ball .ball-number{
    width:46%;
    font-size:7px;
    line-height:1;
    letter-spacing:-.04em;
  }
  #root .player .avatar.group-ball.stripes .ball-number{
    font-size:6px;
    letter-spacing:-.1em;
  }
  #root .sound{
    right:max(8px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));
  }
  #root .canvasWrap{
    width:min(100vw,calc(100dvh * 1.886792));
    height:auto;
    max-height:100dvh;
    margin-inline:auto;
  }
  #root .canvasWrap canvas{
    max-width:100vw;
    max-height:100dvh;
  }
}