/* ---------- 모바일 터치 조작 ---------- */
  .mobileControls{--touch-bottom:max(18px,env(safe-area-inset-bottom));--touch-left:max(18px,env(safe-area-inset-left));--touch-right:max(18px,env(safe-area-inset-right));position:fixed;inset:0;z-index:18;pointer-events:none}
  html.native-app .mobileControls{--touch-bottom:max(36px,calc(env(safe-area-inset-bottom) + 16px));--touch-left:max(24px,calc(env(safe-area-inset-left) + 12px));--touch-right:max(24px,calc(env(safe-area-inset-right) + 12px))}
  .mobileControls button{position:relative;display:flex;align-items:center;justify-content:center;
    width:74px;height:74px;border:2px solid rgba(255,255,255,.76);border-radius:50%;
    background:rgba(18,24,32,.58);color:#fff;font-family:'Jua',sans-serif;font-size:16px;
    text-shadow:0 2px 4px rgba(0,0,0,.45);box-shadow:0 5px 18px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
  .mobileControls button.active{transform:scale(.92);background:rgba(76,207,232,.72);
    border-color:#fff;box-shadow:0 0 0 4px rgba(76,207,232,.22)}
  .touchSteer,.touchPedals{position:absolute;bottom:var(--touch-bottom);display:flex;gap:12px}
  .touchSteer{left:var(--touch-left);width:224px;height:156px;padding:10px 12px;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.62);border-radius:44px;background:rgba(8,14,20,.48);pointer-events:auto;touch-action:none;user-select:none}
  .touchSteerTrack{position:relative;flex:1;height:136px;border-radius:42px;background:rgba(255,255,255,.13);box-shadow:inset 0 2px 8px rgba(0,0,0,.3)}
  .touchSteerTrack:before,.touchSteerTrack:after{content:'';position:absolute;background:rgba(255,255,255,.28);pointer-events:none}
  .touchSteerTrack:before{left:12px;right:12px;top:50%;height:2px;transform:translateY(-50%)}
  .touchSteerTrack:after{left:50%;top:12px;bottom:12px;width:2px;transform:translateX(-50%)}
  .touchSteerKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#7ee8ff,#2584a6);border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.4);will-change:transform}
  .touchSteer.active{border-color:#7ee8ff;background:rgba(20,68,84,.65)}.touchSteer>span{font-family:'Jua';font-size:10px;color:#dff9ff;writing-mode:vertical-rl}
  .touchPedals{right:var(--touch-right);align-items:flex-end}
  .mobileControls .touchGas{width:96px;height:96px;background:rgba(47,158,99,.78);font-size:26px}
  .mobileControls .touchBrake{width:64px;height:64px;background:rgba(232,78,60,.68);font-size:12px}
  .mobileControls .touchDrift{position:absolute;left:50%;bottom:calc(var(--touch-bottom) + 4px);
    transform:translateX(-50%);width:78px;height:78px;border-color:#ffcf52;background:rgba(150,96,12,.62);font-size:13px}
  .mobileControls .touchDrift.active{transform:translateX(-50%) scale(.92);background:rgba(231,174,36,.78)}
  .mobileControls .touchJump{position:absolute;right:calc(var(--touch-right) + 218px);bottom:calc(var(--touch-bottom) + 18px);
    width:64px;height:64px;border-color:#8ee8ff;background:rgba(35,126,174,.72);font-size:11px}
  .mobileControls .touchItem{position:absolute;right:calc(var(--touch-right) + 80px);
    bottom:calc(var(--touch-bottom) + 94px);width:68px;height:68px;
    border-color:#d8b8ff;background:rgba(116,75,170,.65);font-size:12px}
  .mobileControls .touchSwap{position:absolute;right:calc(var(--touch-right) + 156px);
    bottom:calc(var(--touch-bottom) + 100px);width:56px;height:56px;
    border-color:#8ee8ff;background:rgba(31,112,139,.68);font-size:10px}
  #rotateHint{display:none;position:fixed;inset:0;z-index:45;align-items:center;justify-content:center;
    flex-direction:column;gap:10px;background:rgba(12,17,23,.90);color:#fff;pointer-events:none}
  #rotateHint span{font-size:54px;line-height:1;animation:rotatePhone 1.3s ease-in-out infinite}
  #rotateHint b{font-family:'Jua',sans-serif;font-size:20px;letter-spacing:1px}
  @keyframes rotatePhone{50%{transform:rotate(90deg)}}

  @media (hover:none) and (pointer:coarse){
    html,body{overscroll-behavior:none}body.touch-racing{touch-action:none}
    #lanLobby,#lanLobby .lanShell,#lanLobby .lanBrowser,#lanLobby .lanRoom,#myGarage,#myGarage .myGarageMain,#myGarage .garageChoiceGrid{touch-action:pan-y;overscroll-behavior:contain}
    #gameSettings,#gameSettings .settingsContent{touch-action:pan-y;overscroll-behavior:contain}
    body.touch-racing #minimap,body.touch-racing #driverHud,body.touch-racing #audioBox,
    body.touch-racing #padHud{display:none}
    body.touch-racing #speedBox,body.touch-racing #p2SpeedBox{right:10px;bottom:178px;width:84px;height:84px}
    body.touch-racing #speedVal,body.touch-racing #p2SpeedVal{font-size:28px}
    body.touch-racing #driftMeter{right:10px;bottom:270px;width:84px}
    body.touch-racing #itemBox{bottom:112px}
    html.native-app body.touch-racing #speedBox,html.native-app body.touch-racing #p2SpeedBox{bottom:198px}
    html.native-app body.touch-racing #driftMeter{bottom:290px}
    html.native-app body.touch-racing #itemBox{bottom:132px}
    html.native-app #actionCam{border-width:2px;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
    html.native-app #actionCam::before{box-shadow:inset 0 0 24px rgba(0,0,0,.22)}
    html.native-app #actionCam .actionCamTop,html.native-app #actionCam .actionCamBottom{padding:3px 6px}
    html.native-app #actionCam .actionCamTop span{font-size:7px}
    html.native-app #actionCam .actionCamTop b{font-size:12px}
    html.native-app #actionCam .actionCamBottom{font-size:9px}
    html.native-app #actionCam .actionCamBottom span{display:none}
  }
  @keyframes awShakeRail{0%,100%{transform:translateY(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
  @media (hover:none) and (pointer:coarse) and (max-height:520px){
    .mobileControls button{width:62px;height:62px}
    .mobileControls .touchGas{width:92px;height:92px}.mobileControls .touchBrake{width:54px;height:54px}
    .touchSteer{width:210px;height:144px;padding:8px 10px}.touchSteerTrack{height:128px}.touchSteerKnob{width:50px;height:50px}
    .mobileControls .touchDrift{width:64px;height:64px}.mobileControls .touchJump{right:calc(var(--touch-right) + 204px);width:58px;height:58px}.mobileControls .touchItem{width:58px;height:58px;bottom:calc(var(--touch-bottom) + 96px)}
    .mobileControls .touchSwap{right:calc(var(--touch-right) + 144px);bottom:calc(var(--touch-bottom) + 80px);width:48px;height:48px;font-size:9px}
  }
  /* Android WebView QA를 포함한 짧은 가로 화면: HUD가 페달을 덮지 않도록 상단으로 분리한다. */
  @media (max-height:520px){
    html.native-app .mobileControls button{width:62px;height:62px}
    html.native-app .mobileControls .touchGas{width:92px;height:92px;font-size:25px}
    html.native-app .mobileControls .touchBrake{width:54px;height:54px}
    html.native-app .touchSteer{width:210px;height:144px;padding:8px 10px}
    html.native-app .touchSteerTrack{height:128px}
    html.native-app .touchSteerKnob{width:50px;height:50px}
    html.native-app .mobileControls .touchDrift{right:calc(var(--touch-right) + 14px);left:auto;bottom:calc(var(--touch-bottom) + 102px);transform:none;width:64px;height:64px}
    html.native-app .mobileControls .touchDrift.active{transform:scale(.92)}
    html.native-app .mobileControls .touchJump{right:calc(var(--touch-right) + 204px);width:58px;height:58px}
    html.native-app .mobileControls .touchItem{width:58px;height:58px;bottom:calc(var(--touch-bottom) + 96px)}
    html.native-app .mobileControls .touchSwap{right:calc(var(--touch-right) + 144px);bottom:calc(var(--touch-bottom) + 80px);width:48px;height:48px;font-size:9px}
    html.native-app body.touch-racing #speedBox,html.native-app body.touch-racing #p2SpeedBox{top:68px;right:16px;bottom:auto;width:72px;height:72px}
    html.native-app body.touch-racing #speedVal,html.native-app body.touch-racing #p2SpeedVal{font-size:24px}
    html.native-app body.touch-racing #driftMeter{top:146px;right:16px;bottom:auto;width:72px}
    html.native-app body.touch-racing #itemBox{top:72px;bottom:auto;left:12px;width:142px;height:50px;padding:4px;align-items:center}
  }
  /* Android 짧은 가로 화면: 준비 UI를 한 화면 높이에 맞추고 선택 목록을 즉시 보이게 한다. */
  @media (orientation:landscape) and (max-height:560px){
    html.native-app body.touch-racing #recordPanel{left:auto;right:max(96px,calc(env(safe-area-inset-right) + 96px));top:max(8px,env(safe-area-inset-top));bottom:auto;transform:none}
    html.native-app body.touch-racing #recordPanel.recording #recordBtn{width:56px;padding:6px 4px;font-size:0}
    html.native-app body.touch-racing #recordPanel.recording #recordBtn::after{content:'■ REC';font-size:10px}
    html.native-app body.touch-racing #recordPanel #recordStatus{top:max(42px,calc(env(safe-area-inset-top) + 42px));right:max(96px,calc(env(safe-area-inset-right) + 96px));max-width:170px;padding:5px 7px;font-size:8px}
    html.native-app body.touch-racing .mobileControls .touchDrift{right:calc(var(--touch-right) + 14px);left:auto;bottom:calc(var(--touch-bottom) + 102px);transform:none}
    html.native-app body.touch-racing .mobileControls .touchDrift.active{transform:scale(.92)}
    /* 스마트폰 1인 주행 알림 레일: 중앙 전방 시야 대신 순위 오른쪽에 정렬한다. */
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #toast{top:10px;left:calc(50% + 58px);transform:none;
      max-width:min(190px,calc(50vw - 142px));font-size:14px;line-height:1.2;text-align:left;white-space:normal}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn{top:38px;left:calc(50% + 58px);transform:translateY(-6px);
      max-width:min(200px,calc(50vw - 144px));gap:6px;padding:5px 8px;border-width:2px;border-radius:9px}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn.on{transform:translateY(0);animation:awShakeRail .45s ease}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn .awFace{width:30px;height:30px;font-size:17px}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn .awInfo{min-width:0;white-space:normal}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn .awRole{font-size:7px}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn .awInfo b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    html.native-app body.touch-racing:not(.split-wide):not(.split-tall) #attackWarn .awInfo i{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    html.native-app #select .selectHeader{grid-template-columns:minmax(190px,.7fr) minmax(360px,1.35fr) auto;
      grid-template-areas:'logo progress tools';gap:8px 12px;min-height:64px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}
    html.native-app #select .selectHeader h1{font-size:clamp(22px,2.35vw,30px);text-align:left}
    html.native-app #select .selectHeader h1.brandLogo{gap:4px}
    html.native-app #select .selectHeader h1 .brandPrefix{font-size:8px}
    html.native-app #select .selectUtilityBar{flex-wrap:nowrap;gap:5px;min-width:0}
    html.native-app #select .selectUtilityBar button{min-height:38px;padding:6px 8px;font-size:10px}
    html.native-app #select #lanBtn{padding:7px 11px;font-size:14px;border-width:2px}
    html.native-app #select #audioStatus,html.native-app #select .selectFlowStatus{display:none}
    html.native-app #select .selectProgress{max-width:none}
    html.native-app #select .selectProgress button{min-height:36px;font-size:10px}
    html.native-app #select .selectProgress button b{width:22px;height:22px}
    html.native-app #select>.selectStep{padding:7px 0 20px;touch-action:pan-y;scrollbar-gutter:auto}
    html.native-app #select .selectStepHeading{padding:0 12px 5px}
    html.native-app #select .selectStepHeading small,html.native-app #select .selectStepHeading p{display:none}
    html.native-app #select .selectStepHeading h2{margin:0;font-size:27px;line-height:1.15}
    html.native-app #select .nameRow{padding:0 12px 3px;gap:10px}
    html.native-app #select .nameRow label{gap:5px;font-size:10px}
    html.native-app #select .nameRow input{width:128px;padding:6px 8px}
    html.native-app #select .secLabel{margin:5px 0 3px;font-size:14px}
    html.native-app #select .optionGrid{gap:7px;margin-bottom:3px}
    html.native-app #select .ocard{min-width:104px;padding:5px 9px}
    html.native-app #select .ocard h3{font-size:15px;line-height:1.1}
    html.native-app #select .ocard .desc{font-size:9px;line-height:1.2}
    html.native-app #select .voicePreviewHint{display:none}
    html.native-app #select .playerPick{gap:4px}
    html.native-app #select .pickTitle{padding:3px 10px;font-size:14px}
    html.native-app #select .charGrid{gap:8px;padding:0 12px}
    html.native-app #select .card{width:132px;padding:8px 7px}
    html.native-app #select .card canvas.face{width:76px;height:76px;margin-bottom:5px}
    html.native-app #select .selectStepActions{position:relative;bottom:auto;margin-top:12px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
    html.native-app #select .selectFooter{display:flex;align-items:center;justify-content:center;gap:18px;min-height:30px;
      padding:2px max(10px,env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
    html.native-app #select .mainControlHelp{width:auto;margin:0;border:0}
    html.native-app #select .mainControlHelp summary{min-height:24px;padding:2px 8px;font-size:10px}
    html.native-app #select .selectFooter>a{font-size:8px;white-space:nowrap}
    html.native-app #select:not(.hidden)~#recordPanel{top:68px;right:max(8px,env(safe-area-inset-right));bottom:auto;padding:4px}
    html.native-app #select:not(.hidden)~#recordPanel button{padding:5px 8px;font-size:10px}
    html.native-app #select:not(.hidden)~#recordPanel #recordStatus{top:68px;right:max(92px,calc(env(safe-area-inset-right) + 92px));
      max-width:min(300px,calc(100vw - 190px));padding:6px 9px;font-size:9px}
  }
  @media (orientation:landscape) and (max-height:560px) and (max-width:960px){
    html.native-app #select .selectHeader{grid-template-columns:150px minmax(300px,1fr) 44px;gap:6px 8px}
    html.native-app #select .selectHeader h1{font-size:22px}
    html.native-app #select .selectUtilityBar{display:grid;grid-template-columns:1fr;gap:4px;width:44px}
    html.native-app #select .selectUtilityBar button{min-width:0;min-height:36px;padding:4px 2px;font-size:0;border-width:1px}
    html.native-app #select .selectUtilityBar button::first-letter{font-size:15px}
    html.native-app #select .selectProgress button{gap:4px;font-size:9px}
  }
  /* Android 세로 메인 화면: 기능 버튼이 로고 옆에서 잘리지 않도록 독립 행으로 배치한다. */
  @media (orientation:portrait) and (max-width:600px){
    html.native-app #select.screen{padding:0}
    html.native-app #select .selectHeader{grid-template-columns:1fr auto;grid-template-areas:'logo tools' 'progress progress';
      gap:4px;width:100%;padding:6px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left))}
    html.native-app #select .selectHeader h1{justify-self:start;font-size:30px;line-height:1}
    html.native-app #select .selectUtilityBar{display:grid;grid-template-columns:1fr;gap:5px;width:48px}
    html.native-app #select .selectUtilityBar button{min-width:0;min-height:39px;padding:5px 3px;
      border-width:1px;font-size:9px;line-height:1.15;white-space:normal}
    html.native-app #select #audioStatus,html.native-app #select .selectFlowStatus{display:none}
    html.native-app #select .selectProgress{width:100%;max-width:none}
    html.native-app #select .selectProgress button{min-width:0;min-height:33px;padding:0 2px;font-size:9px}
    html.native-app #select .selectProgress button b{width:20px;height:20px}
    html.native-app #select>.selectStep{padding-top:9px;touch-action:pan-y;scrollbar-gutter:auto}
    html.native-app #select .selectStepHeading{padding:38px 8px 7px}
    html.native-app #select .selectStepHeading small,html.native-app #select .selectStepHeading p{display:none}
    html.native-app #select .selectStepHeading h2{margin:0;font-size:28px;line-height:1.15}
    html.native-app #select .nameRow{padding-bottom:4px;gap:7px;flex-wrap:nowrap}
    html.native-app #select .nameRow label{gap:4px;font-size:9px}
    html.native-app #select .nameRow input{width:118px;padding:7px 8px}
    html.native-app #select .secLabel{margin:9px 0 6px;font-size:15px}
    html.native-app #select .optionGrid{gap:7px;margin-bottom:5px;padding:0 8px}
    html.native-app #select .ocard{min-width:0;width:132px;padding:7px 8px}
    html.native-app #select .ocard h3{font-size:16px}
    html.native-app #select .ocard .desc{font-size:9px}
    html.native-app #select .voicePreviewHint{display:none}
    html.native-app #select .playerPick{gap:5px}
    html.native-app #select .charGrid{gap:8px;padding:0 6px}
    html.native-app #select .selectFooter{display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:2px 5px calc(2px + env(safe-area-inset-bottom))}
    html.native-app #select .mainControlHelp{width:auto;margin:0;border:0}
    html.native-app #select .mainControlHelp summary{min-height:24px;padding:2px 5px;font-size:9px}
    html.native-app #select .selectFooter>a{font-size:7px;white-space:nowrap}
    html.native-app #select:not(.hidden)~#recordPanel{top:128px;right:max(7px,env(safe-area-inset-right));bottom:auto;padding:4px}
    html.native-app #select:not(.hidden)~#recordPanel button{padding:5px 7px;font-size:9px}
    html.native-app #select:not(.hidden)~#recordPanel #recordStatus{top:128px;right:max(84px,calc(env(safe-area-inset-right) + 84px));
      max-width:calc(100vw - 170px);padding:5px 7px;font-size:8px}
  }
  @media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:900px){
    body.touch-racing #rotateHint{display:flex}
  }