.mobile-controls #rotate-toggle { display: none; }
.mobile-controls .toolbox { margin-right: 0; }
#mobile-action { position: relative; width: 100%; height: 62px; margin: 0 0 8px; display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; padding: 5px; border: 2px solid #ffffe8; border-radius: 16px; color: #496149; background: #f9f6e89e; box-shadow: 0 4px 16px #263d3430, inset 0 0 0 3px #c5ceb27a; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: auto; cursor: pointer; }
#mobile-action[hidden] { display: none; }
#mobile-action svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#mobile-action strong { font-size: 18px; font-weight: 650; line-height: 24px; }
#mobile-action small { font-size: 8px; line-height: 11px; color: #71816a; }
#mobile-action[aria-pressed=true] { background: #dce9cead; border-color: #698864; box-shadow: 0 0 0 4px #a4be8370, inset 0 2px 8px #405b4520; }
#mobile-action:focus-visible { outline: 3px solid #658d81; outline-offset: 4px; }
.mobile-controls .tool-dock { max-width: 760px; }
.mobile-controls #scene canvas { touch-action: none; }
.mobile-controls #placement-guide { display: none; }
@media(max-height:540px) and (orientation:landscape){
 .mobile-controls .tool-dock { max-width: none; }
 .mobile-controls .toolbox { margin-right: 0; }
 #mobile-action { width: 100%; height: 48px; }
 #mobile-action svg { width: 25px; height: 25px; }
}

#mobile-action-help { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


/* 휴대폰에서는 정보를 접고 누를 곳의 크기는 유지한다. */
.mobile-material-amount, #mobile-water-refill { display: none; }
.play-menu-bar .pocket-actions > button > .throw-compact { display: none; }
.mobile-controls .field-header { top: max(8px,env(safe-area-inset-top)); left: max(8px,env(safe-area-inset-left)); right: max(8px,env(safe-area-inset-right)); }
.mobile-controls .play-menu-bar { display: grid; grid-template-columns: 76px minmax(80px,auto); gap: 4px; width: max-content; max-width: 100%; margin: 0; padding-top: 50px; }
.mobile-controls .play-menu-bar .pocket-actions { display: contents; }
.mobile-controls .play-menu-bar > button, .mobile-controls .play-menu-bar .pocket-actions > button { flex-direction: row; min-height: 44px; height: 44px; padding: 4px 6px; gap: 4px; font-size: 11px; border-radius: 12px; }
.mobile-controls .play-menu-bar #play-menu-toggle { position: absolute; top: 0; left: 0; width: 66px; }
.mobile-controls .play-menu-bar .throw-choice { display: none !important; }
.mobile-controls #throw-toggle[aria-pressed=true] .throw-caption { display: none; }
.mobile-controls .play-menu-bar #throw-toggle[aria-pressed=true] .throw-compact { display: block; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-controls .top-actions.play-settings { top: max(8px,env(safe-area-inset-top)); right: max(8px,env(safe-area-inset-right)); gap: 4px; }
.mobile-controls .play-settings .weather-picker summary { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
.mobile-controls #weather-choice, .mobile-controls .weather-chevron { display: none; }
.mobile-controls .play-settings .weather-picker summary > svg { width: 21px; height: 21px; }
.mobile-controls .play-menu-panel { width: min(360px,calc(100vw - 16px)); top: 50px; }
.mobile-controls .mobile-menu-details { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.mobile-controls .mobile-menu-details .field-identity { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.mobile-controls .mobile-menu-details .field-identity h1 { font-size: 24px; }
.mobile-controls .mobile-menu-details h2 { margin: 3px 0 0; font-size: 12px; }
.mobile-controls .mobile-menu-details .playground-name-button { min-height: 44px; }
.mobile-controls .mobile-menu-details .inventory-pair { margin: 0; }
.mobile-controls .mobile-menu-details .inventory-badge { flex-basis: 132px; width: 132px; height: 86px; }
.mobile-controls .mobile-menu-details #water-refill { min-height: 44px; font-size: 11px; padding: 4px 7px; }
.mobile-controls .mobile-menu-details #ant-options { display: flex !important; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.mobile-controls .mobile-menu-details #ant-clear { min-height: 44px; font-size: 12px; }
.mobile-controls .tool-dock { bottom: max(8px,env(safe-area-inset-bottom)); width: calc(100% - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))); }
.mobile-controls .toolbox { grid-template-columns: 44px minmax(0,1fr); margin-right: 0; gap: 4px; padding: 4px; border-radius: 15px; }
.mobile-controls .toolbox .tool-button { height: 56px; min-width: 58px; flex-basis: 58px; padding: 3px; gap: 3px; }
.mobile-controls .toolbox .tool-button svg { width: 27px; height: 27px; }
.mobile-controls .toolbox .tool-button > span { font-size: 11px; }
.mobile-controls .toolbox .tool-button kbd { display: none; }
.mobile-controls .tool-strip .tool-navigation:not([hidden]) { display: flex; }
.mobile-controls .brush-gauge { height: 56px; }
.mobile-controls .brush-gauge-control { min-height: 30px; width: 40px; }
.mobile-controls .brush-gauge-label { display: block; }
.mobile-controls .brush-gauge-bars i { height: 2px; }
.mobile-controls .brush-size-slider .brush-gauge-bars i { height: 6px; }
.mobile-controls #mobile-action { width: 100%; height: 62px; }
.mobile-controls #mobile-action svg { width: 27px; height: 27px; }
.mobile-controls #mobile-action small { display: block; font-size: 11px; }
.mobile-controls .tool-context { min-height: 0; margin-bottom: 6px; }
.mobile-controls .tool-context:not(:has(.tool-material-row:not([hidden]),.dry-options:not([hidden]),#bridge-options:not([hidden]))) { display: none; }
.mobile-controls .tool-material-row { gap: 4px; flex-wrap: nowrap; width: 100%; }
.mobile-controls .tool-material-row .material-options, .mobile-controls .tool-material-row .water-options { gap: 0; padding: 2px; }
.mobile-controls .tool-material-row .material-options button { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 55px; min-width: 55px; min-height: 44px; padding: 2px; font-size: 11px; gap: 1px 3px; }
.mobile-controls .tool-material-row .material-options button svg { width: 13px; height: 13px; }
.mobile-controls .mobile-material-amount { display: block; width: 100%; font: 600 12px/14px system-ui,sans-serif; }
.mobile-controls .tool-material-row .water-options button { min-height: 44px; min-width: 49px; padding: 2px 4px; font-size: 11px; }
.mobile-controls #mobile-water-refill { display: none; min-width: 48px; min-height: 44px; padding: 3px; gap: 1px; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; border: 1px solid #77a99666; border-radius: 9px; color: #3d7968; background: #f0f8eefa; }
.mobile-controls #mobile-water-refill svg { width: 18px; height: 18px; }
.mobile-controls .tool-material-row:has([data-material=water][aria-pressed=true]) #mobile-water-refill { display: flex; }
.mobile-controls #dry-all { min-height: 44px; font-size: 11px; }
@media(pointer:coarse) and (min-width:600px) {
 .mobile-controls .play-menu-bar { padding-top: 0; padding-left: 70px; }
 .mobile-controls .play-menu-panel { left: 0; }
}


#mobile-move-hint { position: absolute; left: 2px; bottom: calc(100% + 12px); display: flex; align-items: center; gap: 10px; width: min(310px,calc(100vw - 24px)); box-sizing: border-box; padding: 12px 14px; border: 1px solid #e5efd099; border-radius: 18px; color: #fffdef; background: #304a40f2; box-shadow: 0 4px 18px #132d3440; pointer-events: none; user-select: none; }
#mobile-move-hint[hidden] { display: none; }
#mobile-move-hint svg { width: 40px; height: 36px; flex-shrink: 0; fill: none; stroke: #e5edba; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: move-hint-nudge 1.8s ease-in-out infinite; }
#mobile-move-hint > div { min-width: 0; }
#mobile-move-hint strong, #mobile-move-hint span { display: block; font-size: 12px; line-height: 1.6; }
#mobile-move-hint strong { font-size: 14px; }
@keyframes move-hint-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { #mobile-move-hint svg { animation: none; } }

#mobile-target { position: fixed; z-index: 5; width: 44px; height: 48px; transform: translate(-32px,-43px); pointer-events: none; filter: drop-shadow(0 1px 2px #233a4c80); }
#mobile-target[hidden] { display: none; }
#mobile-target svg { display: block; width: 100%; height: 100%; overflow: visible; }
#mobile-target .target-side { transform-origin: 32px 43px; transition: transform 180ms ease; }
#mobile-target.is-left .target-side { transform: scaleX(-1); }
#mobile-target .target-pole { fill: none; stroke: #fffdf2; stroke-width: 2; stroke-opacity: .58; stroke-linecap: round; }
#mobile-target .target-cloth { fill: #d77a42; stroke: #fff9dc; stroke-width: 1; stroke-linejoin: round; }
#mobile-target .target-dot { fill: #ffe58a; fill-opacity: .75; stroke: none; }
#mobile-target.is-held .target-cloth { fill: #ebac39; }
#mobile-target.is-offscreen { opacity: .65; }
@media(max-height:540px) and (orientation:landscape) { .mobile-controls #mobile-action { height: 48px; margin: 0 0 6px; } }
@media (prefers-reduced-motion: reduce) { #mobile-target .target-side { transition: none; } }