/* 놓기·주머니·회전·메뉴는 바깥에서 바로 사용한다. */
@media(pointer:fine){
 body:not(.mobile-controls) .field-header { top: max(12px,env(safe-area-inset-top)); left: max(12px,env(safe-area-inset-left)); }
 body:not(.mobile-controls) .field-identity { margin-top: 0; padding: 8px 12px 5px; }
 body:not(.mobile-controls) .field-identity .playground-name-button { min-height: 28px; margin-top: 1px; padding: 3px 0; }
 body:not(.mobile-controls) .play-menu-bar { display: flex; width: max-content; margin-top: 8px; }
 body:not(.mobile-controls) .play-menu-bar > button, body:not(.mobile-controls) .play-menu-bar .pocket-actions > button { flex-direction: row; min-height: 44px; padding: 8px 10px; }
}
.field-header { z-index: 12; }
.field-identity {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  width: fit-content; max-width: min(480px,100%); padding: 13px 16px 10px;
  border: 1px solid #fffdf1cc; border-radius: 18px; background: #f9f6eceb; color: #344b3a;
  box-shadow: 0 3px 16px #15261814, inset 0 1px 0 #ffffffa6;
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}
.field-header .field-identity h1 { margin: 0; color: #344b3a; }
.field-identity.has-name h1 { font-size: 26px; overflow-wrap: anywhere; min-width: 0; }
.field-identity #playground-name-button { display: inline-flex; align-items: center; gap: 5px; margin: 0; flex-shrink: 0; }
.field-identity #playground-name-button svg { width: 16px; height: 16px; }
.field-identity.has-name #playground-name-button { width: 32px; min-height: 32px; justify-content: center; }
.field-identity.has-name #playground-name-button span { display: none; }
.field-identity .playground-name-button {
  max-width: 100%; min-height: 32px; margin: 4px 0 0; padding: 5px 0;
  border-color: transparent; border-radius: 6px; background: transparent; color: #435d43;
}
.field-identity .playground-name-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.weather-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.play-menu-bar { position: relative; display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100vw - 40px); margin-top: 18px; pointer-events: auto; }
.play-menu-bar .pocket-tools { display: contents; position: static; }
.play-menu-bar .pocket-actions { gap: 7px; }
.play-menu-bar > button, .play-menu-bar .pocket-actions > button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 44px; width: auto; height: auto; padding: 9px 12px; border: 1px solid #b6c0a6;
  border-radius: 12px; background: #fbf9eded; color: #45614c; font: inherit; font-size: 12px;
  white-space: nowrap; cursor: pointer; box-shadow: 0 2px 5px #354a3610;
}
.play-menu-bar > button > span, .play-menu-bar .pocket-actions > button > span { display: inline-flex; align-items: center; }
.play-menu-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.play-menu-bar > button[aria-pressed=true], .play-menu-bar > button[aria-expanded=true], .play-menu-bar .pocket-actions > button[aria-pressed=true] { background: #e1eacc; border-color: #648157; color: #3c623e; box-shadow: inset 0 0 0 1px #648157; }
.play-menu-bar .coin-total { display: inline-flex; align-items: center; gap: 3px; margin-left: 3px; padding-left: 7px; border-left: 1px solid #d5d9bd; color: #9b762c; }
.play-menu-bar .coin-total svg { width: 14px; height: 14px; }
.play-menu-bar .coin-total b { margin: 0; font: 600 11px system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.play-menu-bar .throw-choice { position: absolute; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(330px,calc(100vw - 36px)); margin: 0; }
.play-menu-bar [hidden] { display: none !important; }
.play-menu-bar :focus-visible { outline: 3px solid #739671; outline-offset: 3px; }
.play-menu-open .field-header { z-index: 40; }
.play-menu-panel { position: absolute; top: calc(100% + 9px); left: 0; width: min(360px,calc(100vw - 36px)); padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: #faf8edfa; border: 1px solid #bdc6af; border-radius: 18px; box-shadow: 0 12px 48px #30402b29; color: #405a47; pointer-events: auto; }
.play-menu-section + .play-menu-section { margin-top: 15px; }
.play-menu-section h2 { margin: 0 0 8px; font: 600 11px system-ui,sans-serif; color: #7a876b; letter-spacing: .025em; }
.play-menu-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.play-menu-panel .play-menu-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 44px; height: auto; margin: 0; padding: 9px 11px;
  border: 1px solid #d5dbc8; border-radius: 9px; background: #fffdf5; color: #46634f; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.play-menu-panel .play-menu-item > span { display: inline; font-size: inherit; }
.play-menu-panel .play-menu-item svg { width: 19px; height: 19px; }
.play-menu-panel .play-menu-item:disabled { opacity: .4; cursor: default; }
.play-menu-panel .play-menu-item[aria-pressed=true] { background: #e8efd9; border-color: #839a6b; }
.play-menu-panel #echo-playground-open::before { content: ''; width: 19px; height: 19px; flex: none; background: currentColor; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5"%3E%3Ccircle cx="12" cy="7" r="4"/%3E%3Cpath d="M4 21v-3a8 8 0 0 1 16 0v3Z"/%3E%3C/svg%3E') center/contain no-repeat; }
.play-menu-panel .community-menu { display: contents; }
.play-menu-panel #echo-playground-open { border-radius: 9px; font-size: 12px; }
.play-menu-panel .discovery-note { display: block; position: static; width: auto; padding: 14px 0 0; margin-top: 15px; border: 0; border-top: 1px solid #d8dec8; border-radius: 0; background: none; box-shadow: none; transform: none; }
.play-menu-panel .discovery-note::before, .play-menu-panel .note-spark { display: none; }
.play-menu-panel .discovery-note h2 { display: block; margin: 0 0 9px; font: 600 11px system-ui,sans-serif; color: #7a876b; }
.play-menu-panel .discovery-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.play-menu-panel .discovery-list li { margin: 0; gap: 6px; font-size: 10px; }
.play-menu-panel .discovery-list .goal-check { flex: none; }
body.placing .play-menu-bar, .intro-playing .play-menu-bar { visibility: hidden; }

/* 항목 이름·설명·배경 없이 필요한 조절 버튼만 놓는다. */
.tool-context { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; padding: 0; margin-bottom: 8px; }
.current-tool { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.tool-context .inventory-pair { margin: 0 0 0 auto; }
.tool-context .ant-options { flex-wrap: wrap; max-width: 100%; }
.tool-context #ant-status { white-space: normal; padding: 2px 5px; border-radius: 5px; background: #f9f6eceb; color: #52624c; }

/* 물을 고르는 손길 바로 옆에 물줄기 선택을 붙인다. */
.tool-material-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tool-material-row[hidden] { display: none !important; }
.material-context .tool-material-row .material-options, .material-context .tool-material-row .water-options { display: inline-flex; flex: none; margin: 0; min-width: 0; }
.material-context .tool-material-row .water-options[hidden], .material-context .tool-material-row .material-options[hidden] { display: none; }
.tool-material-row .material-options button, .tool-material-row .water-options button { min-height: 36px; }

@media(max-width:760px) {
  .field-header { left: max(17px,env(safe-area-inset-left)); right: max(17px,env(safe-area-inset-right)); }
  .field-identity { margin-top: 44px; padding: 10px 12px 7px; border-radius: 15px; }
  .field-header .field-identity h1 { font-size: 25px; }
  .play-menu-bar { display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr;width:min(420px,calc(100vw - 34px));max-width:100%;margin-top:13px;gap:4px; }
  .play-menu-bar .pocket-actions { display:contents; }
  .play-menu-bar > button, .play-menu-bar .pocket-actions > button { flex-direction:column;min-width:0;padding:7px 4px;min-height:56px;font-size:11px;gap:4px; }
  .play-menu-bar #rotate-toggle { padding:7px 4px;border-radius:12px; }
  .play-menu-bar #rotate-toggle span { font-size: 11px; }
  .play-menu-bar .coin-total { margin-left:3px;padding-left:3px;gap:1px; }
  .play-menu-bar .coin-total svg { display:none; }
  .play-menu-bar .coin-total b { font-size: 10px; }
  .play-menu-bar svg { width: 16px; height: 16px; }
  .tool-material-row .material-options, .tool-material-row .water-options { padding: 3px; gap: 2px; }
  .tool-material-row .material-options button, .tool-material-row .water-options button { min-height: 36px; min-width: 40px; padding: 4px 6px; gap: 3px; font-size: 10px; }
  .tool-material-row button svg { width: 15px; height: 15px; }
}
@media(max-width:360px) {
  .play-menu-bar, .play-menu-bar .pocket-actions { gap: 4px; }
  .play-menu-bar > button, .play-menu-bar .pocket-actions > button, .play-menu-bar #rotate-toggle { padding-inline:3px;font-size:10px; }
  .play-menu-bar #rotate-toggle span { font-size: 10px; }
  .play-menu-bar .coin-total b { font-size: 9px; }
  .play-menu-panel { padding: 13px; }
}
@media(max-height:540px) and (orientation:landscape) {
  .field-identity { margin-top: 0; padding: 8px 12px 5px; }
  .field-header .field-identity h1 { font-size: 22px; }
  .field-identity .playground-name-button { min-height: 28px; margin-top: 1px; }
  .play-menu-bar { margin-top: 9px; }
  .play-menu-bar > button, .play-menu-bar .pocket-actions > button { padding: 5px 8px; min-height: 38px; font-size: 11px; }
  .tool-material-row .material-options button, .tool-material-row .water-options button { min-height: 30px; }
}

/* 날씨와 소리는 메뉴를 열지 않고 오른쪽 위에서 바로 조절한다. */
.top-actions.play-settings { top:max(24px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));gap:7px;z-index:25; }
.play-settings .weather-picker summary,.play-settings :is(#sound-toggle,#fullscreen-toggle) { min-height:44px;height:44px;padding:0 11px;border:1px solid #b6c0a6;border-radius:12px;background:#fbf9eded;color:#45614c;font:inherit;font-size:11px;white-space:nowrap;box-shadow:0 2px 5px #354a3610; }
.play-settings :is(#sound-toggle,#fullscreen-toggle) { width:44px;min-width:44px;padding:0; }
.play-settings :is(#sound-toggle,#fullscreen-toggle) svg { width:20px;height:20px; }
.play-settings :is(#sound-toggle,#fullscreen-toggle)[aria-pressed=true] { background:#e1eacc;border-color:#648157;color:#365f3b; }
.play-settings :is(#sound-toggle,#fullscreen-toggle):focus-visible { outline:3px solid #739671;outline-offset:3px; }
.play-settings .weather-menu { max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain; }
@media(max-width:760px){
 .top-actions.play-settings { top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));gap:5px; }
 .play-settings .weather-picker summary,.play-settings :is(#sound-toggle,#fullscreen-toggle) { padding:0 8px;font-size:10px;gap:4px; }
 .play-settings .weather-picker summary>svg { width:16px;height:16px; }
 .play-settings .weather-picker summary .weather-chevron { width:10px;height:10px; }
}
@media(max-height:540px) and (orientation:landscape){
 .top-actions.play-settings { top:max(10px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right)); }
 .play-settings .weather-menu { max-height:calc(100dvh - 75px); }
}