/* Let menus scroll and zoom normally; only the game surface owns its gestures. */
html, body { touch-action: auto; }
#beeCanvas, #joystickZone, #interactBtn { touch-action: none; }
button, a { -webkit-tap-highlight-color: transparent; }
#beeCanvas { height: 100dvh; }
:root { --bw-safe-top: env(safe-area-inset-top, 0px); --bw-safe-bottom: env(safe-area-inset-bottom, 0px); --bw-safe-left: env(safe-area-inset-left, 0px); --bw-safe-right: env(safe-area-inset-right, 0px); }
#beeBack { top: calc(14px + var(--bw-safe-top)); left: calc(14px + var(--bw-safe-left)); }
#joystickZone { bottom: calc(20px + var(--bw-safe-bottom)); left: calc(16px + var(--bw-safe-left)); }
#interactBtn { bottom: calc(24px + var(--bw-safe-bottom)); right: calc(20px + var(--bw-safe-right)); }
body[data-bw-touch="true"] #joystickZone { pointer-events: auto; }
body[data-bw-touch="true"] #joystickBase { opacity: .30; }
body[data-bw-touch="true"] #joystickThumb { opacity: .42; }
body[data-bw-touch="true"] #joystickBase.joy-active { opacity: .82; }
body[data-bw-touch="true"] #joystickThumb.joy-active { opacity: 1; }
body[data-bw-touch="true"] #interactBtn { display: flex; }
#beeActionRail .beeRailBody { max-height: min(440px, calc(100dvh - 260px)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#beeActionRail button, #placeRotateBtn { min-height: 44px; pointer-events:auto; }
#beeCollectionsToggle, #beeProgressToggle { min-width: 44px; }
.mkt-inner,.inv-inner,.hou-inner,.fen-inner,.bud-inner,.pet-inner,.qst-inner,.wnd-inner,.hup-inner,
#avatarModalInner,.obw-inner,.dly-inner,#bw-story-card,#bw-won-card {
  max-width: calc(100vw - 24px - var(--bw-safe-left) - var(--bw-safe-right));
  max-height: calc(100dvh - 24px - var(--bw-safe-top) - var(--bw-safe-bottom));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
#pipDialog { max-height: calc(100dvh - 24px - var(--bw-safe-top) - var(--bw-safe-bottom)); }
#pipDialog, #pipAdventure, .av-chibi-options-col { overscroll-behavior: contain; }
button:focus-visible, a:focus-visible { outline: 3px solid #4b55b6; outline-offset: 3px; }
#beeBootStatus[hidden] { display: none; }
#bw-save-status[hidden], #bw-save-status button[hidden] { display: none; }
#bwSaveIndicator[hidden],body.home-designing #bwSaveIndicator{display:none}
#bwSaveIndicator{position:fixed;left:calc(12px + var(--bw-safe-left));bottom:calc(12px + var(--bw-safe-bottom));z-index:501;min-height:36px;max-width:calc(100vw - 24px);padding:6px 12px;border:1px solid #b9cbbf;border-radius:5px;background:#f7faf6;color:#294b41;font:700 12px/1.4 Arial,sans-serif;cursor:pointer}
#bw-save-status {
  position: fixed; bottom: calc(12px + var(--bw-safe-bottom));
  right: calc(12px + var(--bw-safe-right)); z-index: 11000;
  width: 360px; max-width: calc(100vw - 24px - var(--bw-safe-left) - var(--bw-safe-right));
  max-height: calc(100dvh - 24px - var(--bw-safe-top) - var(--bw-safe-bottom)); overflow-y: auto;
  box-sizing: border-box; padding: 12px 14px; border: 1px solid #b35442; border-radius: 8px;
  background: #fff; color: #263c36; box-shadow: 0 4px 18px #0002;
  font: 14px/1.4 'Nunito',sans-serif; letter-spacing: 0; overflow-wrap: anywhere;
}
#bw-save-status strong { display: block; padding-right:36px; font-size: 15px; }
#bw-save-status p { margin: 6px 0 10px; }
.bw-save-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#bw-save-status button { min-height: 44px; padding: 8px 12px; border: 1px solid #52675f; border-radius: 4px; background: #fff; color: #263c36; font: 700 13px/1.3 'Nunito',sans-serif; cursor: pointer; }
#bw-save-status #bw-save-retry { background: #316c5b; color: #fff; }
#bw-save-status #bw-save-close{position:absolute;right:6px;top:4px;width:36px;min-height:36px;padding:0;border:0;background:none;font-size:24px}
@media (max-width: 700px) and (min-height: 501px) {
  body.home-designing #bw-save-status { top: calc(64px + var(--bw-safe-top)); bottom: auto; }
}
#beeBootStatus, .bee-no-script { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 24px; background: #191d36; color: #fff7de; font: 16px/1.6 system-ui,sans-serif; }
#beeBootStatus > div { max-width: 440px; }
#beeBootStatus h1 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
#beeBootStatus button, #beeBootStatus a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 20px 12px 0 0; padding: 12px 18px; border: 0; border-radius: 12px; font: 700 16px system-ui,sans-serif; }
#beeBootStatus button { background: #f5c84e; color: #29263f; cursor: pointer; }
#beeBootStatus a, .bee-no-script a { color: #fff7de; }
@media (max-width: 640px) {
  #beeUI, body.pip-adventure-active #beeUI { top: calc(20px + var(--bw-safe-top)); left: auto; right: calc(12px + var(--bw-safe-right)); transform: none; }
  #beeTitle { font-size: 18px; }
  #beeHint { display: none; }
  #beeActionRail { top: calc(92px + var(--bw-safe-top)); left: calc(10px + var(--bw-safe-left)); }
  #pipAdventure { top: calc(168px + var(--bw-safe-top)); }
  #pipAdventure[data-met="true"] { top: auto; bottom: calc(176px + var(--bw-safe-bottom)); }
  #pipAdventure[data-met="true"] .pip-progress { display: none; }
  #beeCompass { display: none; }
  #recenterBtn { top: calc(82px + var(--bw-safe-top)); bottom: auto; right: calc(64px + var(--bw-safe-right)); min-width: 44px; min-height: 44px; }
  #bwMuteBtn { top: calc(82px + var(--bw-safe-top)); bottom: auto; right: calc(12px + var(--bw-safe-right)); min-width: 44px; min-height: 44px; }
  #bwTaskPanel { top: calc(170px + var(--bw-safe-top)); right: calc(10px + var(--bw-safe-right)); width: min(215px, calc(100vw - 30px)); }
}
@media (min-width: 641px) and (min-height: 501px) {
  body[data-bw-touch="true"] #recenterBtn { bottom: calc(110px + var(--bw-safe-bottom)); min-width: 44px; min-height: 44px; }
  body[data-bw-touch="true"] #bwMuteBtn { bottom: calc(164px + var(--bw-safe-bottom)); min-width: 44px; min-height: 44px; }
  body[data-bw-touch="true"] #placeRotateBtn { bottom: calc(218px + var(--bw-safe-bottom)); }
}
@media (max-width: 360px) {
  #beeBack { max-width: 148px; font-size: 12px; padding-left: 10px; padding-right: 10px; }
  #beeTitle, body.pip-adventure-active #beeTitle { font-size: 16px; }
}
@media (max-height: 500px) and (min-width: 481px) {
  #beeUI { display: none; }
  #avatarBadge { top: calc(14px + var(--bw-safe-top)); left: calc(195px + var(--bw-safe-left)); }
  #beeActionRail { top: calc(74px + var(--bw-safe-top)); left: calc(12px + var(--bw-safe-left)); width: 178px; }
  #beeActionRail .beeRailBody { max-height: calc(100dvh - 180px); }
  #beeCompass, #beeActionRail .beeRailCard--progress { display: none; }
  #pipAdventure, #pipAdventure[data-met="true"] { top: calc(14px + var(--bw-safe-top)); bottom: auto; right: calc(12px + var(--bw-safe-right)); width: 235px; max-height: calc(100dvh - 130px); padding: 12px; overflow-y: auto; }
  #pipAdventure h2 { font-size: 20px; margin: 5px 0; }
  #pipAdventure p { font-size: 13px; margin: 5px 0; }
  #pipAdventure .pip-progress, #pipAdventure .pip-save { display: none; }
  #joystickZone { width: 112px; height: 112px; bottom: calc(10px + var(--bw-safe-bottom)); }
  #interactBtn { width: 60px; height: 60px; bottom: calc(12px + var(--bw-safe-bottom)); }
  #recenterBtn { top: auto; bottom: calc(12px + var(--bw-safe-bottom)); right: calc(94px + var(--bw-safe-right)); min-width: 44px; min-height: 44px; }
  #bwMuteBtn { top: auto; bottom: calc(12px + var(--bw-safe-bottom)); right: calc(148px + var(--bw-safe-right)); min-width: 44px; min-height: 44px; }
  #placeRotateBtn { bottom: calc(12px + var(--bw-safe-bottom)); right: calc(94px + var(--bw-safe-right)); z-index: 100; }
  #pipDialog:has(#pipPuzzle img) { width: min(620px, calc(100vw - 24px - var(--bw-safe-left) - var(--bw-safe-right))); }
  #pipDialog:has(#pipPuzzle img) .pip-dialog-body { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; padding: 18px; }
  #pipDialog:has(#pipPuzzle img) .pip-eyebrow { grid-column: 1 / -1; }
  #pipDialog:has(#pipPuzzle img) #pipTitle { grid-column: 2; grid-row: 2; font-size: 22px; margin: 0 28px 0 0; }
  #pipDialog:has(#pipPuzzle img) #pipText { grid-column: 2; grid-row: 3; font-size: 13px; margin: 0; }
  #pipDialog:has(#pipPuzzle img) #pipPuzzle { grid-column: 1; grid-row: 2 / 6; align-self: center; }
  #pipDialog:has(#pipPuzzle img) #pipPuzzle img { width: 130px; height: 150px; }
  #pipDialog:has(#pipPuzzle img) #pipFeedback { grid-column: 2; grid-row: 4; margin: 0; font-size: 13px; }
  #pipDialog:has(#pipPuzzle img) #pipButtons { grid-column: 2; grid-row: 5; margin: 0; gap: 6px; }
  #pipDialog:has(#pipPuzzle img) #pipButtons button { flex-basis: 80px; padding: 10px 8px; }
  #pipDialog:has(#pipPuzzle img) #pipButtons .pip-secondary { flex-basis: 100%; }
  #pipDialog:has(#pipPuzzle img) .pip-save { display: none; }
}
#placementHint { min-height:44px; box-sizing:border-box; }

#bw-identity-paused {
  position: fixed; inset: 0; margin: auto;
  box-sizing: border-box; width: 400px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px); overflow: auto; padding: 24px;
  border: 1px solid #b8cec6; border-radius: 8px; background: #f7faf8; color: #243e36;
  font: 16px/1.5 'Nunito', sans-serif; letter-spacing: 0; overflow-wrap: anywhere;
}
#bw-identity-paused::backdrop { background: #dce5e2; }
#bw-identity-paused h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; }
#bw-identity-paused p { margin: 0 0 20px; }
#bw-identity-paused a {
  display: flex; justify-content: center; align-items: center; min-height: 48px;
  padding: 8px 12px; box-sizing: border-box; border-radius: 4px;
  background: #316c5b; color: #fff; font-weight: 800; text-decoration: none;
}
#bw-identity-paused a:focus-visible { outline: 3px solid #ab780d; outline-offset: 3px; }