@media (max-width: 700px) and (orientation: portrait) {
  html, body, #app { width: 100%; max-width: 100%; height: 100dvh; overflow: hidden; }
  .v40-overlay { display: block !important; overflow-y: auto !important; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 18px) !important; }
  .v40-card { display: flex !important; flex-direction: column !important; width: min(100%, 480px) !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; border-radius: 25px !important; overflow: hidden !important; }
  .v40-left { order: 2; padding: 19px 16px 24px !important; }
  .v40-art { order: 1; width: 100% !important; height: clamp(140px, 24dvh, 210px) !important; min-height: 0 !important; flex: none; border: 0 !important; border-bottom: 1px solid #efd9b5 !important; }
  .v40-art::after { left: 8px !important; right: 8px !important; top: 4px !important; bottom: 4px !important; }
  .v40-title { font-size: clamp(29px, 8vw, 39px) !important; line-height: 1.08 !important; margin: 8px 0 12px !important; }
  .v40-sub { font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
  .v40-user, .v40-note, .v40-status { font-size: 12px !important; line-height: 1.5 !important; }
  .v40-row { gap: 9px !important; }
  .v40-btn { min-width: 0 !important; flex: 1 1 130px; font-size: 16px !important; padding: 11px 13px !important; border-radius: 16px !important; min-height: 46px; }
  .v40-modeGrid { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .v40-mode { padding: 13px !important; }
  .v40-mode h3 { font-size: 20px !important; }
  .v40-mode p { font-size: 12px !important; }
  .v40-input { width: 100% !important; font-size: 18px !important; padding: 12px !important; }
  .v40-roleGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
  .v40-roleCard { min-width: 0; padding: 8px 4px !important; border-radius: 15px !important; }
  .v40-roleCard img { width: min(72px, 20vw) !important; height: 72px !important; }
  .v40-roleCard b { font-size: 16px !important; }
  .v40-roleCard span { font-size: 10px !important; }
  .v40-countDown { gap: 9px !important; }
  .v40-timerBubble { width: 62px !important; height: 62px !important; font-size: 25px !important; flex: none; }

  #startScreen, #resultScreen { display: block; padding: calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 18px); overflow-y: auto; }
  #startScreen .card, #resultScreen .card { display: flex !important; flex-direction: column !important; width: min(100%, 480px) !important; max-height: none !important; min-height: 0 !important; margin: 0 auto; padding: 15px !important; overflow: visible !important; border-radius: 24px !important; }
  #startScreen .heroWrap { order: 0 !important; width: 100%; height: clamp(145px, 24dvh, 210px); min-height: 0 !important; flex: none; }
  #startScreen .introText { order: 1 !important; width: 100%; }
  #startScreen .introText h1 { font-size: clamp(32px, 9vw, 42px) !important; }
  #startScreen .cta { width: 100%; }
  #resultScreen .heroWrap { min-height: 180px !important; }
  #resultScreen .resultVideo { min-height: 180px !important; max-height: 250px !important; }

  .hud { display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important; padding: calc(env(safe-area-inset-top) + 5px) 8px 0 !important; }
  .hud .brand { width: max-content; max-width: 100%; }
  .hudRight { display: flex !important; width: 100% !important; justify-content: space-between !important; gap: 4px !important; }
  .hudRight .pill { flex: 1; justify-content: center; min-width: 0; padding: 5px 2px !important; font-size: 11px !important; }
  .hudRight .pill strong { font-size: 13px !important; }
  .hudRight .iconbtn { width: 36px !important; height: 36px !important; flex: none; }
  .phase { top: calc(env(safe-area-inset-top) + 108px) !important; width: min(92vw, 380px); font-size: 10px !important; padding: 6px 9px !important; }
  .bottom { bottom: calc(env(safe-area-inset-bottom) + 9px) !important; width: calc(100vw - 18px) !important; }
  .bottom .powerPanel { width: 100% !important; }
  .bottom .help { width: 100% !important; font-size: 9px !important; line-height: 1.35; padding: 5px 7px !important; }
  #game { touch-action: none !important; }
  #soloTouchCharge.active-game { display: block; position: fixed; z-index: 7; right: max(13px, env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 102px); width: 95px; height: 95px; border: 4px solid white; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff8b1, #ffbf48 65%, #f08b39); color: #70401f; font-size: 12px; line-height: 1.2; font-weight: 1000; box-shadow: 0 6px 0 #bc692f, 0 10px 19px #72422555; touch-action: none; user-select: none; -webkit-user-select: none; }
  #soloTouchCharge.active-game.pressed { transform: translateY(3px) scale(.96); background: radial-gradient(circle, #fff3ad, #ff8e44); }
}

#soloTouchCharge { display: none; }

@media (max-width: 360px) and (orientation: portrait) {
  .hud .brand span { display: none; }
  .hud .brand b { font-size: 13px; }
  .v40-art { height: 135px !important; }
  .v40-left { padding: 14px 12px 20px !important; }
}