/* iPhone / narrow-screen application shell */
html.nativeApp #installApp{display:none!important}

@media (max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:14px;-webkit-text-size-adjust:100%}
  .app{width:100%;max-width:none;padding:8px}
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-bottom:8px;align-items:center}
  .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .headerActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .headerActions>*{min-width:0;margin:0!important}
  .headerActions .gameHomeLink{grid-column:1/-1;order:-1;width:100%;min-height:34px;padding:6px 9px;font-size:11px}
  .headerActions .bgmVolumeControl{grid-column:1/-1;width:100%;justify-content:space-between;padding:5px 8px}
  .headerActions .bgmVolumeControl input{width:min(52vw,190px);min-height:44px;touch-action:pan-x;pointer-events:auto}
  .headerActions button{min-height:38px;padding:7px 9px;font-size:11px}
  .tag{display:none}

  .lobby{display:grid;grid-template-columns:1fr;gap:9px}
  .hero,.card{border-radius:16px;padding:15px}
  .hero{min-height:0}
  .hero h1{margin:10px 0;font-size:42px;line-height:.94}
  .hero p{margin:7px 0;line-height:1.55}
  .side{gap:9px}
  .prob{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .prob span{min-width:0;padding:7px 5px;font-size:10px;text-align:center}
  input,select,textarea{font-size:16px}
  .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .btns button{min-width:0;padding:10px 7px;font-size:12px}
  .cpuTurnSelect{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%!important;white-space:normal}
  .stoneColorSettings{grid-template-columns:1fr 1fr;gap:7px}
  .profileCustomization{width:100%}
  .lobbyChatMessages{height:220px;min-height:160px}
  footer{margin-top:12px;padding:14px 10px calc(14px + env(safe-area-inset-bottom))}
  footer nav{gap:10px;font-size:12px}

  body:has(#game.on),body:has(#tutorial.on){height:100dvh;overflow:hidden}
  html.nativeApp body:has(#game.on),html.nativeApp body:has(#tutorial.on){padding:0!important}
  body:has(#game.on) .app,body:has(#tutorial.on) .app{height:100dvh;padding:calc(4px + env(safe-area-inset-top)) 5px calc(4px + env(safe-area-inset-bottom));overflow:hidden}
  html.nativeApp body:has(#game.on) .app,html.nativeApp body:has(#tutorial.on) .app{padding-top:max(2px,env(safe-area-inset-top));padding-bottom:max(2px,env(safe-area-inset-bottom))}
  body:has(#game.on) header,body:has(#tutorial.on) header,
  body:has(#game.on) footer,body:has(#tutorial.on) footer{display:none}
  #game.on,#tutorial.on{height:100%}
  #game .game,#tutorial .game{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(54dvh,1fr) minmax(0,35dvh);gap:5px}
  #game .boardbox,#tutorial .boardbox{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);padding:5px;border-radius:10px}
  #game .scroll,#tutorial .scroll{width:100%;height:100%;min-height:0;max-height:none;border-radius:7px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #game,#game *{-webkit-touch-callout:none}
  #game .boardbox,#game .boardtools,#game .panel{-webkit-user-select:none;user-select:none}
  #game #board{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:grab}
  #game #board:active{cursor:grabbing}
  .boardtools{display:flex;position:static;flex-wrap:nowrap;gap:4px;margin:0 0 4px;overflow-x:auto;scrollbar-width:none}
  .boardtools::-webkit-scrollbar{display:none}
  .boardtools button{flex:0 0 auto;min-height:34px;padding:5px 8px;font-size:11px}
  .boardtools #zoomLabel,.boardtools span{flex:0 0 auto;font-size:10px}
  .gameVolumeControl{display:flex;flex:0 0 auto;align-items:center;gap:4px;min-height:34px;margin:0;padding:1px 7px;border-radius:9px;background:var(--card);color:var(--ink)}
  .gameVolumeControl input{width:82px;min-height:30px;margin:0;padding:0;touch-action:pan-x;accent-color:var(--lime)}
  .gameVolumeControl output{min-width:28px;font-size:9px;font-weight:800}
  .lastAction{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 6px}
  #game .panel,#tutorial .panel{display:flex;min-width:0;min-height:0;max-height:none;gap:6px;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding-bottom:58px}
  #game .panel>.card,#tutorial .panel>.card{flex:0 0 auto;padding:9px;border-radius:11px}
  #game .panel>.card:has(#turnText){order:-2;position:sticky;top:0;z-index:4;border:1px solid color-mix(in srgb,var(--lime) 65%,transparent);box-shadow:0 7px 22px #0003}
  #game .panel>.card:has(.players){order:-1}
  #game .panel>.card:has(#turnText) .piece{float:left;margin:4px 10px 4px 2px;grid-template-columns:repeat(4,18px);grid-template-rows:repeat(4,18px)}
  #game .panel>.card:has(#turnText) .centerText{min-height:20px;text-align:left;font-size:11px}
  #game .panel>.card:has(#turnText)>.btns{grid-template-columns:1fr 1fr}
  #game .mobileInlinePush{clear:both;display:grid;gap:5px;margin:6px 0 7px;padding:7px 0 0;border-top:1px solid #b9c8bf}
  #game .mobileInlinePush #pushToggle{width:100%;min-height:44px;background:var(--lime);color:#14241c;font-size:14px}
  #game .mobileInlinePush #pushToggle:disabled{background:#e8e4da}
  #game .mobileInlinePush #pushHelp{font-size:10px;line-height:1.35}
  #game .mobileInlinePush .pushDirs{margin-top:2px}
  #game .panel>.card:has(#turnText)::after{content:"";display:block;clear:both}
  .players{gap:5px;margin-top:6px}
  .player{min-height:0!important;padding:7px 9px;border-radius:9px;gap:3px 7px}
  .player.characterProfile{min-height:86px!important}
  .player>span[id^="n"]{font-size:12px}
  .player>.ratingLine,.player>.pushState{font-size:10px}
  .player>.titleBanner{height:22px;line-height:22px}
  .colorNotice{margin:5px 0;padding:7px;font-size:12px}
  .piece{margin:6px}
  .nextPieceBox{margin:5px 0;padding:4px}
  .nextPieceBox section{padding:4px 2px}
  .pushBox{margin-top:5px;padding-top:5px}
  .pushBox small{font-size:9px}
  .gameDetails{padding:7px!important}
  #game .mobileDetailDock{position:fixed;z-index:72;left:5px;right:5px;bottom:max(4px,env(safe-area-inset-bottom));width:auto;margin:0;padding:5px!important;border:1px solid #8fa398;border-radius:14px;box-shadow:0 9px 30px #0008;background:var(--card)}
  #game .mobileDetailDock .gameDetailTabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  #game .mobileDetailDock .gameDetailTabs button{min-height:42px;padding:7px 3px;font-size:11px}
  #game .mobileDetailDock .gameDetailTabs .mobileResignButton{border-color:#d95858;background:#8f2525;color:#fff}
  #game .mobileDetailDock:not(.open)>.gameDetailPanel{display:none}
  #game .mobileDetailDock.open>.gameDetailPanel{max-height:31dvh;overflow:auto;padding:8px 5px 4px}
  #game .mobileDetailDock #nextPieceBox{margin:0}
  .gameDetailPanel{min-height:0}
  #resultCard:not([hidden]){width:calc(100vw - 20px);max-height:calc(100dvh - 24px);overflow:auto;padding:20px 14px}

  .gachaShell{width:calc(100% - 12px);margin:6px auto;padding:12px;border-radius:16px}
  .gachaHeader{display:grid;gap:5px}
  .gachaHeader h1{font-size:28px}
  .gachaHeader button{order:-1;justify-self:end}
  .gachaWallet{grid-template-columns:1fr auto;margin:10px 0;padding:10px 12px}
  .gachaWallet small{grid-column:1/-1;text-align:left}
  .gachaActions{grid-template-columns:1fr}
  .gachaCollection{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drunkLobbyShell{grid-template-columns:1fr}
  .drunkAbilityGrid{grid-template-columns:1fr 1fr;max-height:none}
  #arenaInside:not([hidden]){grid-template-columns:1fr;grid-template-areas:"header" "members" "controls" "chat" "tables"}
  .arenaMembers{position:static;grid-template-columns:1fr;max-height:none}
  .arenaRooms,.arenaTables{grid-template-columns:1fr}
}

.touchPlaceConfirm{position:fixed;z-index:90;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:10px;border:2px solid var(--lime);border-radius:15px;background:color-mix(in srgb,var(--card) 96%,transparent);color:var(--ink);box-shadow:0 12px 45px #0008;backdrop-filter:blur(12px)}
.touchPlaceConfirm[hidden]{display:none}
.touchPlaceConfirm div{display:grid;min-width:0;gap:2px}
.touchPlaceConfirm b{font-size:14px}
.touchPlaceConfirm small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px}
.touchPlaceConfirm button{min-height:44px;padding:8px 11px}
.touchPlaceConfirm .touchPlaceApply{background:var(--lime);color:#14241c}
body:has(.touchPlaceConfirm:not([hidden])) .mobileDetailDock{visibility:hidden}
html[data-theme="dark"] .gameVolumeControl,html[data-theme="dark"] .touchPlaceConfirm{background:#15251d;color:#f4f8f5}

@media (max-width:950px) and (orientation:landscape) and (max-height:520px){
  body:has(#game.on),body:has(#tutorial.on){height:100dvh;overflow:hidden}
  html.nativeApp body:has(#game.on),html.nativeApp body:has(#tutorial.on){padding:0!important}
  body:has(#game.on) .app,body:has(#tutorial.on) .app{height:100dvh;padding:3px 5px;overflow:hidden}
  html.nativeApp body:has(#game.on) .app,html.nativeApp body:has(#tutorial.on) .app{padding-left:max(3px,env(safe-area-inset-left));padding-right:max(3px,env(safe-area-inset-right))}
  body:has(#game.on) header,body:has(#tutorial.on) header,
  body:has(#game.on) footer,body:has(#tutorial.on) footer{display:none}
  #game.on,#tutorial.on{height:100%}
  #game .game,#tutorial .game{grid-template-columns:minmax(0,1fr) minmax(230px,34vw);grid-template-rows:1fr}
  #game .panel,#tutorial .panel{height:100%;overflow-y:auto}
  #game .boardbox,#tutorial .boardbox{height:100%}
  .boardtools .lastAction{display:none}
  #game .panel>.card:has(#turnText){position:static}
}

@media (max-width:390px){
  .app{padding-inline:5px}
  .hero,.card{padding:12px}
  .hero h1{font-size:36px}
  .stoneColorSettings{grid-template-columns:1fr}
  .drunkAbilityGrid{grid-template-columns:1fr}
  #game .game,#tutorial .game{grid-template-rows:minmax(52dvh,1fr) minmax(0,37dvh)}
  .gameVolumeControl input{width:64px}
  .touchPlaceConfirm{grid-template-columns:1fr auto}.touchPlaceConfirm .touchPlaceCancel{grid-row:2}.touchPlaceConfirm .touchPlaceApply{grid-row:2;grid-column:2}
}