/* Responsive polish for phones, tablets, desktop browsers and safe-area devices. */
  @media (max-width:480px){
    body{--frame-gap:12px;padding-top:max(6px,env(safe-area-inset-top));padding-right:max(6px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom));padding-left:max(6px,env(safe-area-inset-left))}
    #syncPivotGameV3 .game{border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
    #syncPivotGameV3 .start{min-height:44px}
  }

  @media (max-width:340px){
    #syncPivotGameV3 .game{border-radius:20px}
    #syncPivotGameV3 .msg{left:17%;right:17%;padding-left:4%;padding-right:4%}
    #syncPivotGameV3 .start{left:30%;right:30%;padding-left:8px;padding-right:8px}
    #syncPivotGameV3 .stats{left:7%;right:7%;padding:11px 12px}
    #syncPivotGameV3 .statsGrid{gap:5px}
    #syncPivotGameV3 .statusRow{left:5%;right:5%;gap:4px}
    #syncPivotGameV3 .streak,#syncPivotGameV3 .rankBadge{padding:5px 7px}
    #syncPivotGameV3 .stat{padding:6px}
    #syncPivotGameV3 .pivot{width:26px;height:26px}
    #syncPivotGameV3 .head{border-width:3px}
    #syncPivotGameV3 .striker{border-width:2px}
  }

  /* On short landscape screens keep the game fully visible instead of clipping it. */
  @media (orientation:landscape) and (max-height:520px){
    body{place-items:start center;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
    #syncPivotGameV3 .game{width:min(100%,calc((100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*9/16));border-radius:18px}
    #syncPivotGameV3 .logo b{font-size:clamp(28px,8vw,52px);font-size:clamp(28px,8cqw,52px)}
    #syncPivotGameV3 .logo i{font-size:clamp(22px,6.2vw,40px);font-size:clamp(22px,6.2cqw,40px)}
    #syncPivotGameV3 .key{font-size:clamp(8px,1.8vw,12px);font-size:clamp(8px,1.8cqw,12px)}
    #syncPivotGameV3 .value{font-size:clamp(16px,3.8vw,25px);font-size:clamp(16px,3.8cqw,25px)}
    #syncPivotGameV3 .msg{font-size:clamp(10px,2.2vw,15px);font-size:clamp(10px,2.2cqw,15px)}
    #syncPivotGameV3 .start{left:25%;right:25%;min-height:34px;font-size:clamp(9px,2vw,13px);font-size:clamp(9px,2cqw,13px)}
    #syncPivotGameV3 .streak{font-size:clamp(8px,1.8vw,11px);font-size:clamp(8px,1.8cqw,11px);padding:4px 7px}
    #syncPivotGameV3 .button{font-size:clamp(16px,3.5vw,26px);font-size:clamp(16px,3.5cqw,26px)}
    #syncPivotGameV3 .feedback .timing{font-size:clamp(16px,3.5vw,23px);font-size:clamp(16px,3.5cqw,23px)}
    #syncPivotGameV3 .feedback .grade{font-size:clamp(8px,1.7vw,10px);font-size:clamp(8px,1.7cqw,10px)}
    #syncPivotGameV3 .stats{left:7%;right:7%;padding:9px 10px}
    #syncPivotGameV3 .statsTitle{font-size:clamp(11px,2.4vw,15px);font-size:clamp(11px,2.4cqw,15px)}
    #syncPivotGameV3 .statsGrid{margin-top:6px;gap:4px}
    #syncPivotGameV3 .leaderOverlay{top:20%;bottom:2.5%;left:3%;right:3%;padding:9px}
    #syncPivotGameV3 .leaderRow{min-height:30px;padding:4px 7px}
    #syncPivotGameV3 .stat{padding:4px 5px}
    #syncPivotGameV3 .stat strong{font-size:clamp(12px,2.8vw,17px);font-size:clamp(12px,2.8cqw,17px)}
    #syncPivotGameV3 .pbLine{margin-top:5px}
    #syncPivotGameV3 .foot{font-size:clamp(7px,1.5vw,10px);font-size:clamp(7px,1.5cqw,10px)}
  }

  @media(prefers-reduced-motion:reduce){#syncPivotGameV3 .hammerArm{transition-duration:95ms}#syncPivotGameV3 .game.shake,#syncPivotGameV3 .cpu.slam,#syncPivotGameV3 .shock.on,#syncPivotGameV3 .streak.pop{animation:none}}