*{margin:0;padding:0;box-sizing:border-box}
/* Prevent iOS/Android back-swipe and elastic overscroll from exiting the game */
html,body{touch-action:none;overscroll-behavior:none}
body{overflow:hidden;background:#87CEEB;font-family:'Fredoka One',cursive}

#beeCanvas{display:block;width:100vw;height:100vh;touch-action:none}

#beeUI{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  text-align:center;pointer-events:none;user-select:none;z-index:10
}
#beeActionRail{
  position:fixed;top:108px;left:12px;z-index:18;
  width:min(192px,calc(100vw - 24px));
  display:flex;flex-direction:column;align-items:stretch;gap:14px;
  pointer-events:none;user-select:none
}
#beeActionRail .beeRailCard{
  padding:12px 10px 10px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(18,20,45,.75),rgba(18,20,45,.52));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  pointer-events:none
}
#beeActionRail .beeRailCard--collections{width:100%}
#beeActionRail .beeRailCard--progress{
  width:100%;
  margin-top:2px
}
#beeActionRail .beeRailHeader{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:0 0 2px
}
#beeTitle{
  font-size:28px;font-weight:900;color:#fff;
  -webkit-text-stroke:0.6px #000;
  text-shadow:0 0 18px rgba(255,200,0,.45);
  letter-spacing:1px
}
#beeHint{
  font-size:13px;color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.45);margin-top:4px
}
@media(hover:none){#beeHint{display:none}}

#beeCompass{
  position:static;
  align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;user-select:none;z-index:22
}
.bee-compass-ring{
  position:relative;width:82px;height:82px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,246,210,.95),rgba(255,220,120,.88));
  border:2px solid rgba(150,95,0,.24);
  box-shadow:0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden
}
.bee-compass-ring::before{
  content:'';position:absolute;inset:10px;border-radius:50%;
  border:1px solid rgba(130,85,0,.18);background:rgba(255,255,255,.2)
}
.bee-compass-dial{
  position:absolute;inset:0;transform:rotate(0rad);transition:transform .12s linear
}
.bee-compass-mark{
  position:absolute;font-family:'Fredoka One',cursive;font-size:13px;
  color:#6a4a00;text-shadow:0 1px 0 rgba(255,255,255,.7)
}
.bee-compass-n{top:6px;left:50%;transform:translateX(-50%);color:#c47c00;font-size:16px}
.bee-compass-e{right:8px;top:50%;transform:translateY(-50%)}
.bee-compass-s{bottom:6px;left:50%;transform:translateX(-50%)}
.bee-compass-w{left:8px;top:50%;transform:translateY(-50%)}
.bee-compass-pointer{
  position:absolute;top:9px;left:50%;width:0;height:0;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:14px solid #ff7b00;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))
}
.bee-compass-center{
  position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%,#fff,#f5b800 55%,#d08b00 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.6), 0 0 10px rgba(245,184,0,.38)
}
#beeCompassLabel{
  min-width:82px;text-align:center;padding:5px 10px;border-radius:999px;
  background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:'Fredoka One',cursive;font-size:12px;letter-spacing:.04em
}
#beeCompass.bee-compass-guide .bee-compass-n{
  color:#ff4b4b; text-shadow:0 0 10px rgba(255,75,75,.35), 0 1px 0 rgba(255,255,255,.9);
  animation:beeCompassPulse 1.2s ease-in-out infinite
}
#beeCompass.bee-compass-guide .bee-compass-pointer{
  border-bottom-color:#ff4b4b;
  animation:beeCompassPulse 1.2s ease-in-out infinite
}
@keyframes beeCompassPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.08)}
}
@media (max-width: 560px){
  #beeCompass{left:10px;bottom:106px;top:auto;right:auto}
  .bee-compass-ring{width:72px;height:72px}
  .bee-compass-n{top:5px}
  .bee-compass-e{right:6px}
  .bee-compass-w{left:6px}
  #beeCompassLabel{min-width:72px;font-size:11px}
}

#beeBack{
  position:fixed;top:14px;left:14px;z-index:20;
  padding:8px 16px;background:rgba(0,0,0,.28);border:1.5px solid rgba(255,255,255,.4);
  border-radius:20px;color:#fff;font-family:'Fredoka One',cursive;font-size:14px;
  cursor:pointer;text-decoration:none;backdrop-filter:blur(6px);
  transition:background .2s
}
#beeBack:hover{background:rgba(0,0,0,.45)}

#doorPrompt{
  position:fixed;bottom:22%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.42);border:1.5px solid rgba(255,255,255,.45);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:16px;
  padding:10px 22px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px)
}
#doorPrompt.visible{opacity:1}
@media(hover:none){#doorPrompt.visible{pointer-events:auto;cursor:pointer}}
#doorPrompt.entering{background:rgba(255,200,0,.55);border-color:rgba(255,220,80,.8)}
#doorPrompt kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:14px
}

/* Placement hint banner */
#placementHint{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(30,110,30,.78);border:1.5px solid rgba(100,220,100,.5);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:15px;
  padding:9px 22px;pointer-events:none;z-index:25;
  opacity:0;transition:opacity .3s;backdrop-filter:blur(6px);white-space:nowrap
}
#placementHint.visible{opacity:1}
#placementHint kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:13px
}

/* Market proximity prompt */
#marketPrompt{
  position:fixed;bottom:calc(22% + 48px);left:50%;transform:translateX(-50%);
  background:rgba(180,80,0,.72);border:1.5px solid rgba(255,180,60,.6);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:16px;
  padding:10px 22px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px);white-space:nowrap
}
#marketPrompt.visible{opacity:1;pointer-events:auto;cursor:pointer}
#marketPrompt kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:14px
}
#questPrompt{
  position:fixed;bottom:calc(22% + 98px);left:50%;transform:translateX(-50%);
  background:rgba(72,38,12,.62);border:1.5px solid rgba(255,215,120,.55);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:16px;
  padding:10px 22px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px);white-space:nowrap
}
#questPrompt.visible{opacity:1;pointer-events:auto;cursor:pointer}
#wonderPrompt{
  position:fixed;bottom:calc(22% + 146px);left:50%;transform:translateX(-50%);
  background:rgba(80,42,100,.62);border:1.5px solid rgba(230,190,255,.6);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:15px;
  padding:10px 20px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px);white-space:nowrap
}
#wonderPrompt.visible{opacity:1;pointer-events:auto;cursor:pointer}
#wonderPrompt kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:13px
}

/* Market modal overlay */
#marketModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);z-index:100;backdrop-filter:blur(5px)
}
#marketModal.mkt-hidden{display:none}

.mkt-inner{
  background:linear-gradient(160deg,#FFF8E8,#FFE8A0);
  border:2px solid rgba(255,175,0,.5);border-radius:22px;
  padding:20px 18px 18px;width:min(92vw,480px);max-height:82vh;
  overflow-y:auto;box-shadow:0 10px 44px rgba(0,0,0,.38);
  font-family:'Fredoka One',cursive
}
.mkt-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mkt-title{font-size:22px;color:#BB5500;flex:1}
#marketCoins{
  background:rgba(255,175,0,.22);border:1.5px solid rgba(255,175,0,.5);
  border-radius:20px;padding:4px 12px;font-size:14px;color:#884400
}
.mkt-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.mkt-close:hover{background:rgba(0,0,0,.24)}
.mkt-subtitle{font-size:12px;color:#996633;margin-bottom:14px;font-family:'Fredoka One',cursive}
.mkt-message{
  display:none;margin:0 0 12px;padding:9px 12px;border-radius:13px;
  background:rgba(255,255,255,.58);border:1.5px solid rgba(255,175,0,.25);
  color:#884400;font-size:12px;line-height:1.35
}
.mkt-message.visible{display:block}
.mkt-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px
}
.mkt-card{
  background:rgba(255,255,255,.72);border:1.5px solid rgba(255,175,0,.28);
  border-radius:14px;padding:12px 8px 10px;text-align:center;
  position:relative;transition:transform .15s,box-shadow .15s
}
.mkt-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.mkt-card.mkt-owned{opacity:.6}
.mkt-emoji{font-size:30px;margin-bottom:5px}
.mkt-name{font-size:13px;color:#554400;margin-bottom:2px}
.mkt-desc{font-size:11px;color:#887744;line-height:1.3;margin-bottom:5px}
.mkt-price{font-size:13px;color:#CC6600;margin-bottom:7px}
.mkt-buy{
  background:linear-gradient(135deg,#FFB700,#FF8800);border:none;
  border-radius:20px;padding:5px 15px;font-size:12px;
  font-family:'Fredoka One',cursive;color:#fff;cursor:pointer;transition:opacity .15s
}
.mkt-buy:hover{opacity:.83}
.mkt-buy.mkt-place{background:linear-gradient(135deg,#29B6F6,#0288D1)}
.mkt-short{
  background:rgba(180,90,0,.13);border:1.5px solid rgba(180,90,0,.2);
  color:#995000
}
.mkt-note{font-size:10px;line-height:1.3;color:#996633;margin-top:6px;min-height:14px}
/* Market scope/filter tabs */
.mkt-scope-bar{display:flex;gap:6px;margin-bottom:8px}
.mkt-filter-bar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.mkt-scope-btn,.mkt-filter-btn{padding:6px 14px;border-radius:999px;border:1.5px solid rgba(184,102,0,.3);background:rgba(255,200,80,.12);color:#884400;font-family:'Fredoka One',cursive;font-size:13px;cursor:pointer;min-height:36px;transition:background .14s,border-color .14s;white-space:nowrap}
.mkt-scope-btn.active,.mkt-filter-btn.active{background:#F5B800;color:#1a0800;border-color:#F5B800}
.mkt-scope-btn:hover,.mkt-filter-btn:hover{background:rgba(245,184,0,.28)}
/* Locked and owned card states */
.mkt-card.mkt-locked{opacity:.55;filter:grayscale(35%)}
.mkt-price--owned{color:#27AE60;font-weight:800;font-size:13px;margin-bottom:7px}
.mkt-price--locked{color:#BB5500;font-size:11px;font-weight:700;margin-bottom:7px}
.mkt-locked-btn{background:rgba(150,130,100,.2)!important;color:#997755!important;cursor:default!important;pointer-events:none}
/* Shop clarity: newly unlocked items, unlock banner, filter badges */
.mkt-card.mkt-new{border-color:rgba(245,184,0,.7);box-shadow:0 0 0 2px rgba(245,184,0,.25),0 4px 14px rgba(245,160,0,.2)}
@media(prefers-reduced-motion:no-preference){
  .mkt-card.mkt-new{animation:mktNewPulse 2.4s ease-in-out infinite}
}
@keyframes mktNewPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(245,184,0,.25),0 4px 14px rgba(245,160,0,.18)}
  50%     {box-shadow:0 0 0 4px rgba(245,184,0,.42),0 4px 18px rgba(245,160,0,.34)}
}
.mkt-new-badge{
  position:absolute;top:-7px;right:-7px;
  background:linear-gradient(135deg,#F5B800,#FF8800);color:#fff;
  font-family:'Fredoka One',cursive;font-size:10px;font-weight:400;
  padding:2px 8px;border-radius:10px;line-height:1.6;
  box-shadow:0 1px 5px rgba(0,0,0,.22);white-space:nowrap;pointer-events:none
}
.mkt-unlock-banner{
  background:linear-gradient(135deg,#FFF3C0,#FFE066);
  border:1.5px solid rgba(245,184,0,.5);border-radius:12px;
  padding:10px 14px;margin-bottom:10px;
  font-family:'Fredoka One',cursive;font-size:13px;color:#7A4400;
  text-align:center;line-height:1.45
}
.mkt-filter-btn.mkt-filter-locked{opacity:.58}
.mkt-filter-btn.mkt-filter-new{border-color:rgba(245,184,0,.65)}
.mkt-sub-new{color:#CC6600}
.mkt-note--earned{color:#27AE60!important}

/* ─── Touch joystick — fixed bottom-left circle, faintly visible at rest ─── */
#joystickZone{
  position:fixed;bottom:20px;left:16px;
  width:148px;height:148px;border-radius:50%;
  pointer-events:none;z-index:15;touch-action:none
}
@media(hover:none){#joystickZone{pointer-events:auto}}
#joystickBase{
  position:absolute;inset:0;
  background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.34);
  border-radius:50%;opacity:0;transition:opacity .18s
}
@media(hover:none){#joystickBase{opacity:0.30}}
#joystickBase.joy-active{opacity:0.82}
#joystickThumb{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;background:rgba(255,200,0,.72);
  border:2.5px solid rgba(255,255,255,.68);border-radius:50%;
  opacity:0;transition:opacity .18s
}
@media(hover:none){#joystickThumb{opacity:0.42}}
#joystickThumb.joy-active{opacity:1}

/* ─── Touch: E / Interact button — fixed bottom-right ─────────────────────── */
#interactBtn{
  display:none;position:fixed;bottom:24px;right:20px;
  width:70px;height:70px;border-radius:50%;
  background:rgba(245,184,0,0.72);border:2.5px solid rgba(255,255,255,.7);
  color:#fff;font-family:'Fredoka One',cursive;font-size:24px;
  z-index:15;touch-action:none;backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .15s
}
@media(pointer:coarse){#interactBtn{display:flex}}
#interactBtn:active{opacity:.72}

/* Inventory button in HUD */
#inventoryBtn,
#buddyBtn,
#petBtn,
#houseBtn,
#fenceBtn,
#dailyRewardBtn,
#resetDataBtn{
  width:100%;
  margin-top:0;padding:10px 14px;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.16);
  border-radius:16px;color:#fff;font-family:'Fredoka One',cursive;
  font-size:13px;cursor:pointer;backdrop-filter:blur(6px);
  pointer-events:auto;transition:background .2s,transform .15s,border-color .2s;
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  text-align:left;box-sizing:border-box
}
#inventoryBtn:hover,#buddyBtn:hover,#petBtn:hover,#houseBtn:hover,#fenceBtn:hover,#dailyRewardBtn:hover{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);transform:translateX(2px)
}
#resetDataBtn{
  background:rgba(110,20,20,.42);
  border-color:rgba(255,160,160,.42);
}
#resetDataBtn:hover{background:rgba(160,30,30,.58)}
#beeActionRail .beeRailTitle{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.68);
  text-shadow:0 1px 4px rgba(0,0,0,.35)
}
#beeActionRail .beeRailToggle{
  width:24px;height:24px;padding:0;border:none;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-family:'Fredoka One',cursive;
  font-size:12px;line-height:1;cursor:pointer;pointer-events:auto;
  transition:background .15s,transform .15s
}
#beeActionRail .beeRailToggle:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
#beeActionRail .beeRailBody{
  display:flex;flex-direction:column;align-items:stretch;gap:8px
}
#beeActionRail .beeRailBody.beeRailBody--collapsed{display:none}
#dailyRewardStatus{
  margin-top:0;color:rgba(255,255,255,.88);font-size:11px;
  text-shadow:0 1px 5px rgba(0,0,0,.5);min-height:14px;line-height:1.35
}

/* Inventory modal */
#inventoryModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);z-index:100;backdrop-filter:blur(5px)
}
#inventoryModal.inv-hidden{display:none}
.inv-inner{
  background:linear-gradient(160deg,#F0F8FF,#DCF0FF);
  border:2px solid rgba(100,180,255,.5);border-radius:22px;
  padding:20px 18px 18px;width:min(92vw,480px);max-height:82vh;
  overflow-y:auto;box-shadow:0 10px 44px rgba(0,0,0,.38);
  font-family:'Fredoka One',cursive
}
.inv-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.inv-title{font-size:22px;color:#224488;flex:1}
.inv-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.inv-close:hover{background:rgba(0,0,0,.24)}
.inv-subtitle{font-size:12px;color:#4466BB;margin-bottom:14px;font-family:'Fredoka One',cursive}
.inv-tabs{display:flex;gap:8px;margin-bottom:12px}
.inv-tab{
  flex:1;padding:8px 0;border:none;border-radius:14px;background:rgba(255,255,255,.55);
  color:#4466BB;font-family:'Fredoka One',cursive;cursor:pointer
}
.inv-tab.active{background:linear-gradient(135deg,#29B6F6,#0288D1);color:#fff}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.inv-card{
  background:rgba(255,255,255,.72);border:1.5px solid rgba(100,150,255,.28);
  border-radius:14px;padding:12px 8px 10px;text-align:center;
  transition:transform .15s,box-shadow .15s
}
.inv-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.inv-emoji{font-size:30px;margin-bottom:5px}
.inv-name{font-size:13px;color:#334477;margin-bottom:8px}
.inv-place{
  background:linear-gradient(135deg,#29B6F6,#0288D1);border:none;
  border-radius:20px;padding:5px 15px;font-size:12px;
  font-family:'Fredoka One',cursive;color:#fff;cursor:pointer;transition:opacity .15s
}
.inv-place:hover{opacity:.83}
.inv-empty{
  font-size:14px;color:#4466BB;text-align:center;padding:22px 16px;
  font-family:'Fredoka One',cursive;background:rgba(255,255,255,.58);
  border:1.5px dashed rgba(100,150,255,.3);border-radius:14px;line-height:1.45
}

/* House customization modal */
#houseModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);z-index:105;backdrop-filter:blur(5px)
}
#houseModal.hou-hidden{display:none}
.hou-inner{
  background:linear-gradient(160deg,#FFF8E8,#FFE4B8);
  border:2px solid rgba(255,170,0,.5);border-radius:22px;
  padding:18px 16px 16px;width:min(94vw,480px);max-height:88vh;overflow-y:auto;
  box-shadow:0 10px 44px rgba(0,0,0,.36);
  font-family:'Fredoka One',cursive;color:#664000
}
.hou-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hou-title{font-size:22px;color:#AA6500;flex:1}
.hou-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.hou-close:hover{background:rgba(0,0,0,.24)}
.hou-grid{display:grid;gap:12px;margin-bottom:12px}
.hou-section{
  background:rgba(255,255,255,.58);border:1.5px solid rgba(255,180,0,.24);
  border-radius:14px;padding:10px
}
.hou-label{font-size:12px;color:#8A4B00;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.hou-choices{display:flex;gap:7px;flex-wrap:wrap}
.hou-choice{
  flex:1;min-width:92px;padding:8px 9px;border:2px solid transparent;border-radius:14px;
  background:rgba(255,255,255,.68);font-family:'Fredoka One',cursive;font-size:12px;
  color:#664000;cursor:pointer
}
.hou-choice.selected{border-color:#FFAA00;background:rgba(255,205,60,.32)}
.hou-swatch{
  display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:5px;
  vertical-align:-2px;border:1px solid rgba(0,0,0,.15)
}
.hou-message{
  display:none;background:rgba(255,255,255,.7);border-radius:13px;
  padding:9px 11px;margin-bottom:10px;font-size:12px;color:#8A4B00
}
.hou-message.visible{display:block}
.hou-save{
  width:100%;padding:12px 0;background:linear-gradient(135deg,#FFB700,#FF8800);
  border:none;border-radius:17px;font-family:'Fredoka One',cursive;
  font-size:16px;color:#fff;cursor:pointer;transition:opacity .15s
}
.hou-save:hover{opacity:.86}

/* Move House button inside modal */
.hou-move-btn{
  width:100%;padding:10px 0;background:linear-gradient(135deg,#5B8DEF,#3A6DE0);
  border:none;border-radius:14px;font-family:'Fredoka One',cursive;
  font-size:14px;color:#fff;cursor:pointer;transition:opacity .15s
}
.hou-move-btn:hover{opacity:.86}

/* House modal tabs */
.hou-tab-bar{display:flex;gap:6px;margin-bottom:12px}
.hou-tab{flex:1;padding:8px 0;border-radius:18px;border:1.5px solid rgba(255,180,0,.35);
  background:rgba(255,255,255,.5);font-family:'Fredoka One',cursive;font-size:13px;
  color:#8A4B00;cursor:pointer;transition:background .15s,border-color .15s}
.hou-tab--active{background:linear-gradient(135deg,#FFB700,#FF8800);border-color:#FF8800;color:#fff}
.hou-tab:hover:not(.hou-tab--active){background:rgba(255,205,60,.32)}

/* Recenter camera button */
#recenterBtn{
  position:fixed;bottom:80px;right:16px;
  padding:8px 12px;min-height:40px;min-width:40px;
  background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.3);
  border-radius:10px;color:#fff;font-family:'Fredoka One',cursive;font-size:18px;
  z-index:500;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s
}
#recenterBtn:hover{background:rgba(0,0,0,.82)}
@media(max-width:600px){
  #recenterBtn{bottom:160px;right:16px}
}

/* Mute / unmute button */
#bwMuteBtn{
  position:fixed;bottom:130px;right:16px;
  width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.3);
  color:#fff;font-size:18px;z-index:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;touch-action:manipulation
}
#bwMuteBtn:hover{background:rgba(0,0,0,.82)}
@media(max-width:600px){
  #bwMuteBtn{bottom:210px;right:16px}
}

/* Item action bar — floats above nearby deco, projected from 3D position */
#itemActionBar{
  position:fixed;display:none;align-items:center;gap:6px;
  transform:translateX(-50%);
  background:rgba(20,10,0,.84);border:1.5px solid rgba(255,185,0,.55);
  border-radius:14px;padding:6px 10px;z-index:200;pointer-events:auto
}
#itemActionBar button{
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.22);
  border-radius:9px;color:#fff;font-size:18px;width:40px;height:40px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s
}
#itemActionBar button:hover{background:rgba(255,185,0,.35)}
#itemActionBar #iabRemove:hover{background:rgba(255,60,60,.45)}
#itemActionBar #iabClose{font-size:14px;width:30px;height:30px;opacity:.7}

/* Placement rotate button */
#placeRotateBtn{
  position:fixed;bottom:130px;right:16px;
  padding:8px 14px;min-height:44px;min-width:44px;
  background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.3);
  border-radius:10px;color:#fff;font-family:'Fredoka One',cursive;font-size:13px;
  z-index:500;cursor:pointer;pointer-events:auto;
  transition:background .15s
}
#placeRotateBtn:hover{background:rgba(0,0,0,.82)}
@media(max-width:600px){
  #placeRotateBtn{bottom:210px;right:16px}
}

/* decoEditPrompt — keyboard hint hidden on touch, touch hint hidden on pointer */
.dep-touch{display:none}
@media(hover:none){
  .dep-kb{display:none}
  .dep-touch{display:inline}
}

/* Indoor exit prompt */
#indoorPrompt{
  position:fixed;bottom:22%;left:50%;transform:translateX(-50%);
  background:rgba(60,30,0,.52);border:1.5px solid rgba(255,200,100,.5);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:16px;
  padding:10px 22px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px)
}
#indoorPrompt.visible{opacity:1}
@media(hover:none){#indoorPrompt.visible{pointer-events:auto;cursor:pointer}}
#indoorPrompt kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:14px
}

/* Fence upgrade modal */
#fenceModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);z-index:105;backdrop-filter:blur(5px)
}
#fenceModal.fen-hidden{display:none}
.fen-inner{
  background:linear-gradient(160deg,#FFF8E5,#FFE6A0);
  border:2px solid rgba(255,185,0,.5);border-radius:22px;
  padding:18px 16px 16px;width:min(92vw,390px);
  box-shadow:0 10px 44px rgba(0,0,0,.36);
  font-family:'Fredoka One',cursive;color:#664000
}
.fen-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fen-title{font-size:22px;color:#AA6500;flex:1}
.fen-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.fen-close:hover{background:rgba(0,0,0,.24)}
.fen-status{
  background:rgba(255,255,255,.58);border:1.5px solid rgba(255,190,0,.26);
  border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.45;margin-bottom:10px
}
.fen-preview{display:grid;gap:8px;margin-bottom:10px}
.fen-tier{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.62);border:1.5px solid rgba(255,190,0,.24);
  border-radius:14px;padding:10px 12px;font-size:13px
}
.fen-tier.current{background:rgba(255,230,120,.45)}
.fen-name{color:#774700}
.fen-cost{color:#AA6500;white-space:nowrap}
.fen-message{
  display:none;background:rgba(255,255,255,.72);border-radius:13px;
  padding:9px 11px;margin-bottom:10px;font-size:12px;color:#8A4B00;line-height:1.35
}
.fen-message.visible{display:block}
.fen-upgrade{
  width:100%;padding:12px 0;background:linear-gradient(135deg,#FFB700,#FF8800);
  border:none;border-radius:17px;font-family:'Fredoka One',cursive;
  font-size:16px;color:#fff;cursor:pointer;transition:opacity .15s
}
.fen-upgrade:hover{opacity:.86}
.fen-upgrade:disabled{opacity:.55;cursor:not-allowed}

/* Bee Buddy modal */
#buddyModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);z-index:100;backdrop-filter:blur(5px)
}
#buddyModal.bud-hidden{display:none}
.bud-inner{
  background:linear-gradient(160deg,#FFFDE8,#FFF0C0);
  border:2px solid rgba(255,200,0,.45);border-radius:22px;
  padding:18px 16px 16px;width:min(94vw,500px);max-height:88vh;
  overflow-y:auto;box-shadow:0 10px 44px rgba(0,0,0,.35);
  font-family:'Fredoka One',cursive
}
.bud-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.bud-title{font-size:22px;color:#AA6600;flex:1}
.bud-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.bud-close:hover{background:rgba(0,0,0,.24)}
.bud-section-label{
  font-size:11px;color:#886600;margin:10px 0 5px;
  text-transform:uppercase;letter-spacing:.5px
}
.bud-types{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.bud-type-card{
  flex:1;min-width:64px;padding:8px 4px;text-align:center;
  background:rgba(255,255,255,.6);border:2px solid transparent;
  border-radius:12px;cursor:pointer;transition:all .14s;font-family:'Fredoka One',cursive
}
.bud-type-card:hover{background:rgba(255,220,80,.38)}
.bud-type-card.selected{border-color:#FFAA00;background:rgba(255,200,0,.24)}
.bud-type-emoji{font-size:22px}
.bud-type-label{font-size:11px;color:#664400;margin-top:3px}
.bud-swatches{display:flex;gap:7px;flex-wrap:wrap}
.bud-swatch{
  width:30px;height:30px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0
}
.bud-swatch:hover{transform:scale(1.18)}
.bud-swatch.selected{border-color:#333;transform:scale(1.10)}
.bud-pills{display:flex;gap:6px;flex-wrap:wrap}
.bud-pill{
  padding:5px 12px;background:rgba(255,255,255,.65);
  border:2px solid transparent;border-radius:20px;
  font-family:'Fredoka One',cursive;font-size:12px;color:#555;
  cursor:pointer;transition:all .13s
}
.bud-pill:hover{background:rgba(255,220,80,.38)}
.bud-pill.selected{border-color:#FFAA00;background:rgba(255,200,0,.22);color:#664400}
.bud-save{
  width:100%;margin-top:14px;padding:12px 0;
  background:linear-gradient(135deg,#FFB700,#FF8800);border:none;
  border-radius:18px;font-family:'Fredoka One',cursive;font-size:16px;
  color:#fff;cursor:pointer;transition:opacity .15s
}
.bud-save:hover{opacity:.87}

/* Pet companion modal */
#petModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);z-index:104;backdrop-filter:blur(5px)
}
#petModal.pet-hidden{display:none}
.pet-inner{
  background:linear-gradient(160deg,#F8FFF0,#E4FFD0);
  border:2px solid rgba(130,200,80,.48);border-radius:22px;
  padding:18px 16px 16px;width:min(92vw,430px);max-height:84vh;overflow-y:auto;
  box-shadow:0 10px 44px rgba(0,0,0,.34);font-family:'Fredoka One',cursive;color:#315820
}
.pet-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pet-title{font-size:22px;color:#3F7A22;flex:1}
.pet-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.pet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.pet-card{
  background:rgba(255,255,255,.68);border:2px solid transparent;border-radius:15px;
  padding:12px 9px;text-align:center;cursor:pointer;transition:transform .14s,border-color .14s
}
.pet-card:hover{transform:translateY(-2px)}
.pet-card.selected{border-color:#7CC957;background:rgba(190,245,150,.35)}
.pet-card.locked{opacity:.58;cursor:not-allowed}
.pet-emoji{font-size:30px;margin-bottom:5px}
.pet-name{font-size:13px;color:#315820;margin-bottom:5px}
.pet-note{font-size:10px;color:#6A8C52;line-height:1.3}
.pet-message{
  display:none;background:rgba(255,255,255,.72);border-radius:13px;
  padding:9px 11px;margin-top:10px;font-size:12px;color:#315820;line-height:1.35
}
.pet-message.visible{display:block}

/* Decoration edit prompt */
#decoEditPrompt{
  position:fixed;bottom:calc(22% + 52px);left:50%;transform:translateX(-50%);
  background:rgba(40,10,80,.55);border:1.5px solid rgba(200,140,255,.5);
  border-radius:24px;color:#fff;font-family:'Fredoka One',cursive;font-size:15px;
  padding:9px 20px;pointer-events:none;z-index:20;
  opacity:0;transition:opacity .35s;backdrop-filter:blur(6px);white-space:nowrap
}
#decoEditPrompt.visible{opacity:1}
@media(hover:none){#decoEditPrompt.visible{pointer-events:auto;cursor:pointer}}
#decoEditPrompt kbd{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);
  border-radius:5px;padding:1px 6px;font-family:inherit;font-size:13px
}

/* Decoration edit modal */
#decoEditModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.48);z-index:100;backdrop-filter:blur(4px)
}
#decoEditModal.ded-hidden{display:none}
.ded-inner{
  background:linear-gradient(160deg,#FFF8E8,#FFE8A0);
  border:2px solid rgba(255,175,0,.45);border-radius:18px;
  padding:18px 16px 14px;width:min(88vw,300px);
  box-shadow:0 8px 36px rgba(0,0,0,.32);font-family:'Fredoka One',cursive;text-align:center
}
.ded-title{font-size:18px;color:#884400;margin-bottom:14px}
.ded-btns{display:flex;flex-direction:column;gap:8px}
.ded-btn{
  width:100%;padding:11px 0;border:none;border-radius:14px;
  font-family:'Fredoka One',cursive;font-size:15px;cursor:pointer;transition:opacity .15s
}
.ded-btn:hover{opacity:.83}
.ded-move  {background:linear-gradient(135deg,#29B6F6,#0288D1);color:#fff}
.ded-rotate{background:linear-gradient(135deg,#66BB6A,#388E3C);color:#fff}
.ded-remove{background:linear-gradient(135deg,#EF5350,#C62828);color:#fff}
.ded-cancel{background:rgba(0,0,0,.13);color:#666}

/* Fade overlay for scene transitions */
#fadeOverlay{
  position:fixed;inset:0;background:#000;opacity:0;
  pointer-events:none;z-index:200;transition:opacity 0.42s
}
#fadeOverlay.fading{opacity:1;pointer-events:auto}

/* ─── Level / XP HUD ────────────────────────────────────────────────────────── */
#beeLevelHUD{
  margin-top:9px;display:flex;align-items:center;gap:8px;
  justify-content:center;pointer-events:none
}
#beeLevelLabel{
  font-size:13px;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.5);white-space:nowrap
}
#xpBarWrap{
  width:86px;height:6px;background:rgba(255,255,255,.26);
  border-radius:6px;overflow:hidden
}
#xpBarFill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#FFD700,#FF8C00);
  border-radius:6px;transition:width .55s ease
}
#hudCoins{
  font-size:12px;color:#FFE066;
  text-shadow:0 1px 5px rgba(0,0,0,.5);white-space:nowrap
}

/* Selection state for Buddy modal (bud-sel class used by JS) */
.bud-type-card.bud-sel{border-color:#FFAA00;background:rgba(255,200,0,.28)}
.bud-swatch.bud-sel{border-color:#333;transform:scale(1.12)}
.bud-pill.bud-sel{border-color:#FFAA00;background:rgba(255,200,0,.24);color:#664400}

/* ─── Daily reward modal ─────────────────────────────────────────────────────── */
#dailyRewardModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);z-index:110;backdrop-filter:blur(5px)
}
#dailyRewardModal.dly-hidden{display:none}
.dly-inner{
  background:linear-gradient(160deg,#FFF8E0,#FFE880);
  border:2.5px solid rgba(255,200,0,.62);border-radius:22px;
  padding:24px 20px 18px;width:min(88vw,340px);text-align:center;
  box-shadow:0 10px 44px rgba(0,0,0,.38);font-family:'Fredoka One',cursive
}
.dly-title{font-size:24px;color:#AA5500;margin-bottom:4px}
.dly-streak{font-size:14px;color:#CC4400;margin-bottom:16px}
.dly-rewards{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.dly-reward-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.55);border-radius:12px;
  padding:8px 14px;font-size:15px;color:#553300;text-align:left
}
.dly-reward-icon{font-size:22px;flex-shrink:0}
.dly-claim{
  width:100%;padding:12px 0;
  background:linear-gradient(135deg,#FFB700,#FF8800);border:none;
  border-radius:16px;font-family:'Fredoka One',cursive;
  font-size:17px;color:#fff;cursor:pointer;transition:opacity .15s
}
.dly-claim:hover{opacity:.87}

/* ─── Cozy quests modal ─────────────────────────────────────────────────────── */
#questModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.52);z-index:115;backdrop-filter:blur(5px)
}
#questModal.qst-hidden{display:none}
.qst-inner{
  background:linear-gradient(160deg,#FFF8E8,#FFE9B8);
  border:2.5px solid rgba(255,190,0,.55);border-radius:22px;
  padding:20px 16px 16px;width:min(94vw,520px);max-height:86vh;overflow-y:auto;
  box-shadow:0 10px 44px rgba(0,0,0,.38);font-family:'Fredoka One',cursive;color:#664000
}
.qst-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.qst-title{font-size:23px;color:#AA6500;flex:1}
.qst-close{
  background:rgba(0,0,0,.12);border:none;border-radius:50%;
  width:30px;height:30px;font-size:15px;cursor:pointer;color:#666;line-height:1
}
.qst-close:hover{background:rgba(0,0,0,.24)}
.qst-tabs{display:flex;gap:8px;margin-bottom:12px}
.qst-tab{
  flex:1;padding:8px 0;border:none;border-radius:14px;background:rgba(255,255,255,.58);
  color:#8A4B00;font-family:'Fredoka One',cursive;cursor:pointer
}
.qst-tab.active{background:linear-gradient(135deg,#FFB700,#FF8800);color:#fff}
.qst-list{display:grid;gap:10px}
.qst-card{
  background:rgba(255,255,255,.66);border:1.5px solid rgba(255,185,0,.26);
  border-radius:15px;padding:11px 12px
}
.qst-card.done{background:rgba(255,235,150,.48)}
.qst-name{font-size:14px;color:#744300;margin-bottom:6px}
.qst-reward{font-size:12px;color:#9A5A00;margin-top:7px}
.qst-bar{height:7px;background:rgba(120,70,0,.13);border-radius:8px;overflow:hidden}
.qst-fill{height:100%;width:0%;background:linear-gradient(90deg,#FFD95C,#FF9F1A);border-radius:8px}
.qst-message{
  display:none;background:rgba(255,255,255,.72);border-radius:13px;
  padding:9px 11px;margin-top:10px;font-size:12px;color:#8A4B00;line-height:1.35
}
.qst-message.visible{display:block}

/* ─── Level-up popup ─────────────────────────────────────────────────────────── */
#levelUpPopup{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.82);
  background:linear-gradient(160deg,#FFFDE0,#FFE050);
  border:3px solid rgba(255,200,0,.72);border-radius:20px;
  padding:22px 40px;text-align:center;z-index:300;
  font-family:'Fredoka One',cursive;
  box-shadow:0 0 40px rgba(255,200,0,.5),0 10px 44px rgba(0,0,0,.3);
  pointer-events:none;opacity:0;
  transition:opacity .38s,transform .38s
}
#levelUpPopup.lup-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lup-emoji{font-size:44px}
.lup-text{font-size:28px;color:#BB5500;margin:4px 0}
.lup-level{font-size:18px;color:#887700}
.lup-unlock{font-size:13px;color:#664400;margin-top:6px;font-weight:800;min-height:18px}

/* ─── Hive next-unlock HUD label ──────────────────────────────────────────── */
#hiveNextUnlock{
  font-size:11px;color:rgba(255,230,100,.85);text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.5);margin-top:3px;
  pointer-events:none;min-height:14px;white-space:nowrap
}

/* ─── Daily Wonder HUD counter ──────────────────────────────────────────────── */
.wonder-hud{
  font-size:11px;color:rgba(255,230,100,.85);text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.5);margin-top:4px;
  pointer-events:none;white-space:nowrap;transition:color .3s
}
.wonder-hud--done{color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.7),0 1px 4px rgba(0,0,0,.5)}
@keyframes wonderHudPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.24);color:#FFD700;text-shadow:0 0 16px rgba(255,215,0,1),0 1px 4px rgba(0,0,0,.5)}
  100%{transform:scale(1)}
}
.wonder-hud--flash{animation:wonderHudPulse .7s ease-out}

/* Canvas warm glow pulse on level-up */
#beeCanvas.level-up-glow{animation:canvasGlow 1.9s ease-out forwards}
@keyframes canvasGlow{
  0%  {box-shadow:inset 0 0 0 rgba(255,200,0,0)}
  28% {box-shadow:inset 0 0 80px rgba(255,200,0,.55)}
  100%{box-shadow:inset 0 0 0 rgba(255,200,0,0)}
}

/* ─── Floating reward text ───────────────────────────────────────────────────── */
#floatingRewards{position:fixed;inset:0;pointer-events:none;z-index:250}
.float-reward{
  position:absolute;font-family:'Fredoka One',cursive;font-size:18px;
  font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.52);
  pointer-events:none;animation:floatUp 1.6s ease-out forwards
}

/* ─── First-time Bee World onboarding ─────────────────────────────────────── */
#beeOnboardingModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(34,20,0,.46);z-index:320;backdrop-filter:blur(5px);
  padding:18px
}
#beeOnboardingModal.obw-hidden{display:none}
.obw-inner{
  width:min(92vw,380px);background:linear-gradient(160deg,#FFF9E8,#FFE9A8);
  border:2px solid rgba(255,190,0,.55);border-radius:22px;
  box-shadow:0 12px 48px rgba(0,0,0,.34);padding:22px 20px 18px;
  font-family:'Fredoka One',cursive;color:#664000
}
.obw-title{font-size:23px;color:#AA6500;margin-bottom:14px;text-align:center}
.obw-list{display:grid;gap:9px;font-size:13px;line-height:1.4;margin-bottom:18px}
.obw-list div{
  background:rgba(255,255,255,.52);border:1.5px solid rgba(255,190,0,.22);
  border-radius:13px;padding:9px 11px
}
.obw-close{
  width:100%;padding:12px 0;border:none;border-radius:16px;
  background:linear-gradient(135deg,#FFB700,#FF8800);color:#fff;
  font-family:'Fredoka One',cursive;font-size:16px;cursor:pointer
}

/* ─── Little Wonders discovery popup ─────────────────────────────────────── */
#littleWonderModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,12,42,.38);z-index:330;backdrop-filter:blur(5px);
  padding:18px
}
#littleWonderModal.wnd-hidden{display:none}
.wnd-inner{
  width:min(92vw,360px);background:linear-gradient(160deg,#FFF9E8,#FFE7B8 62%,#EAF8FF);
  border:2px solid rgba(255,210,92,.62);border-radius:22px;
  box-shadow:0 14px 52px rgba(0,0,0,.32);padding:22px 20px 18px;
  text-align:center;font-family:'Fredoka One',cursive;color:#684100
}
.wnd-sparkle{
  font-size:38px;margin-bottom:8px;animation:wonderPop 1.7s ease-in-out infinite
}
.wnd-title{font-size:22px;color:#9A5A00;margin-bottom:10px}
.wnd-reward{
  background:rgba(255,255,255,.58);border:1.5px solid rgba(255,190,0,.28);
  border-radius:15px;padding:12px;margin-bottom:16px;font-size:14px;line-height:1.35
}
.wnd-close{
  width:100%;padding:12px 0;border:none;border-radius:16px;
  background:linear-gradient(135deg,#FFB700,#FF8800);color:#fff;
  font-family:'Fredoka One',cursive;font-size:16px;cursor:pointer
}
@keyframes wonderPop{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(255,220,80,0))}
  45%{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 12px rgba(255,220,80,.7))}
}

/* ─── Avatar badge (top-left, below back button) ──────────────────────────── */
#avatarBadge{
  position:fixed;top:68px;left:14px;z-index:20;
  align-items:center;gap:6px;
  background:rgba(0,0,0,.30);border:1.5px solid rgba(255,255,255,.38);
  border-radius:24px;padding:5px 10px 5px 8px;backdrop-filter:blur(6px);
  font-family:'Fredoka One',cursive;color:#fff;user-select:none
}
#avatarBadgeEmoji{font-size:20px;line-height:1}
#avatarChangeBtn{
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  border-radius:50%;width:22px;height:22px;color:#fff;font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  font-family:inherit;line-height:1;transition:background .15s
}
#avatarChangeBtn:hover{background:rgba(255,255,255,.32)}

/* ─── Avatar selection modal ─────────────────────────────────────────────── */
#avatarModal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s
}
#avatarModal.av-show{opacity:1;pointer-events:auto}
#avatarModalInner{
  background:linear-gradient(160deg,#1a2a52,#2e1a4a);
  border:2px solid rgba(255,220,80,.45);border-radius:28px;
  padding:32px 28px 24px;text-align:center;max-width:360px;width:92vw;
  box-shadow:0 8px 48px rgba(0,0,0,.5);
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain
}
.av-title{font-size:26px;font-weight:900;color:#FFE566;margin-bottom:6px}
.av-subtitle{font-size:14px;color:rgba(255,255,255,.7);margin-bottom:24px}
.av-choices{display:flex;gap:16px;justify-content:center;margin-bottom:18px}
.av-card{
  flex:1;max-width:130px;background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.2);border-radius:20px;
  padding:20px 10px 16px;cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:'Fredoka One',cursive;color:#fff
}
.av-card:hover,.av-card:focus{
  background:rgba(255,200,0,.18);border-color:rgba(255,200,0,.6);
  transform:translateY(-3px);box-shadow:0 6px 24px rgba(255,200,0,.25)
}
.av-icon{font-size:44px;line-height:1}
.av-label{font-size:18px;font-weight:700}
.av-desc{font-size:12px;opacity:.65}
.av-note{font-size:11px;color:rgba(255,255,255,.45)}
/* Chibi avatar customise panel */
.av-chibi-panel{text-align:left;touch-action:pan-y}
.av-chibi-title{font-family:'Fredoka One',cursive;font-size:18px;color:#FFE566;margin-bottom:12px;text-align:center}
.av-back{
  background:none;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.65);
  font-family:'Fredoka One',cursive;font-size:13px;padding:4px 14px;border-radius:20px;
  cursor:pointer;margin-bottom:10px;display:inline-block;touch-action:manipulation
}
.av-back:hover{border-color:rgba(255,255,255,.6);color:#fff}
.av-label-sm{font-family:'Fredoka One',cursive;font-size:11px;color:rgba(255,255,255,.5);
  margin:9px 0 5px;text-transform:uppercase;letter-spacing:.5px}
.av-swatches{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:2px}
.av-swatch{
  width:32px;height:32px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;
  transition:transform .12s,border-color .12s;flex-shrink:0;touch-action:manipulation
}
.av-swatch:hover{transform:scale(1.1)}
.av-swatch.av-sel{border-color:#FFE566;transform:scale(1.2)}
.av-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.av-pill{
  padding:6px 14px;border-radius:20px;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font-family:'Fredoka One',cursive;
  font-size:12px;cursor:pointer;transition:all .14s;min-height:34px;touch-action:manipulation
}
.av-pill:hover{background:rgba(255,200,0,.18)}
.av-pill.av-sel{background:rgba(255,200,0,.28);border-color:#FFE566;color:#FFE566}
.av-save{
  display:block;width:100%;margin-top:14px;padding:12px 0;
  background:linear-gradient(135deg,#F5B800,#FF9900);border:none;border-radius:24px;
  font-family:'Fredoka One',cursive;font-size:16px;color:#fff;cursor:pointer;
  transition:opacity .15s;touch-action:manipulation
}
.av-save:hover{opacity:.88}
/* Two-column chibi preview layout */
.av-chibi-layout{display:flex;gap:16px;align-items:flex-start;width:100%;margin:12px 0}
.av-chibi-preview-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:0}
#chibiPreviewCanvas{border-radius:16px;background:rgba(255,255,255,.07);border:2px solid rgba(245,184,0,.3);display:block}
.av-chibi-preview-label{font-family:'Fredoka One',cursive;font-size:12px;color:rgba(255,255,255,.5);text-align:center}
.av-chibi-options-col{flex:1;overflow-y:auto;max-height:340px;padding-right:4px}
@media(max-width:480px){
  .av-chibi-layout{flex-direction:column;align-items:center}
  .av-chibi-options-col{max-height:200px;width:100%}
  .av-chibi-preview-col{position:static}
  #chibiPreviewCanvas{width:120px;height:165px}
}

@media(max-width:640px){
  /* Compact the HUD on small screens so the world stays readable */
  #beeUI{top:10px;left:50%;right:auto;transform:translateX(-50%);width:auto}
  #beeTitle{font-size:22px}
  #beeActionRail{
    top:92px;left:10px;width:min(194px,calc(100vw - 20px));
    gap:12px
  }
  #beeActionRail .beeRailCard{padding:10px 9px 9px}
  #inventoryBtn,#buddyBtn,#petBtn,#houseBtn,#fenceBtn,#dailyRewardBtn,#resetDataBtn{font-size:12px;padding:8px 11px}
  #dailyRewardStatus{font-size:10px}
  #beeCompass .bee-compass-ring{width:72px;height:72px}
  #beeCompassLabel{min-width:70px;font-size:11px}
  #doorPrompt,#marketPrompt,#questPrompt,#wonderPrompt,#indoorPrompt,#decoEditPrompt{
    width:min(92vw,340px);text-align:center;font-size:14px;white-space:normal
  }
  .mkt-inner,.inv-inner,.hou-inner,.fen-inner,.bud-inner,.pet-inner,.qst-inner,.wnd-inner,.hup-inner{width:94vw;max-height:84vh}
  .mkt-grid,.inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@keyframes floatUp{
  0%  {opacity:1;transform:translateY(0) scale(1)}
  65% {opacity:1;transform:translateY(-52px) scale(1.07)}
  100%{opacity:0;transform:translateY(-82px) scale(.88)}
}

/* ─── Touch: raise prompts above the 168px-tall joystick zone ─────────────── */
@media(hover:none){
  #doorPrompt,#indoorPrompt{bottom:180px}
  #marketPrompt{bottom:228px}
  #questPrompt{bottom:278px}
  #wonderPrompt{bottom:326px}
  #decoEditPrompt{bottom:232px}
}

/* ─── Landscape phone (≤420px tall): compact HUD so game stays playable ───── */
@media(hover:none) and (max-height:420px){
  #beeTitle{font-size:16px}
  #beeLevelHUD,#hiveNextUnlock{display:none}
  #beeActionRail{top:76px;left:8px;width:min(180px,calc(100vw - 16px));gap:10px}
  #beeActionRail .beeRailCard{padding:9px 8px 8px}
  #inventoryBtn,#buddyBtn,#petBtn,#houseBtn,#fenceBtn,#dailyRewardBtn,#resetDataBtn{font-size:10px;padding:5px 8px}
  #beeCompass .bee-compass-ring{width:64px;height:64px}
  #beeCompassLabel{min-width:64px}
  #doorPrompt,#indoorPrompt{bottom:180px}
  #marketPrompt{bottom:214px}
  #questPrompt{bottom:248px}
  #wonderPrompt{bottom:280px}
  #decoEditPrompt{bottom:184px}
}

/* ─── Wonder popup entrance + chest reveal ───────────────────────────────── */
@keyframes wndPop{
  from{transform:scale(.8) translateY(12px);opacity:0}
  to  {transform:scale(1)  translateY(0);   opacity:1}
}
.wnd-inner.wnd-pop{animation:wndPop .42s cubic-bezier(.22,.68,0,1.2) both}
.wnd-inner.wnd-chest{
  background:linear-gradient(160deg,#FFF8CC,#FFD700 45%,#FFF8CC);
  border-color:rgba(255,195,0,.95);
  box-shadow:0 0 0 5px rgba(255,215,0,.28),0 20px 60px rgba(255,175,0,.55),0 8px 32px rgba(0,0,0,.3)
}
.wnd-inner.wnd-chest .wnd-sparkle{animation:wonderPop .7s ease-in-out infinite}
.wnd-inner.wnd-chest .wnd-title{color:#7A4400;font-size:20px}

/* ─── Big floating reward text (wonder collect) ─────────────────────────── */
@keyframes floatUpBig{
  0%  {opacity:0;transform:translateX(-50%) translateY(8px) scale(.88)}
  12% {opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.12)}
  65% {opacity:1;transform:translateX(-50%) translateY(-28px) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-54px) scale(.9)}
}
.float-reward--big{
  font-size:24px;left:50% !important;bottom:44% !important;
  animation:floatUpBig 2.0s ease-out forwards
}

/* ─── Hive level-up card ─────────────────────────────────────────────────── */
#hiveUpCard{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(18,8,36,.5);z-index:340;backdrop-filter:blur(7px);
  padding:18px;opacity:0;pointer-events:none;
  transition:opacity .32s
}
#hiveUpCard.hup-visible{opacity:1;pointer-events:auto}
#hiveUpCard.hup-hidden{display:none}
.hup-inner{
  width:min(92vw,340px);
  background:linear-gradient(160deg,#FFFDE8 0%,#FFE645 52%,#FFF9D0 100%);
  border:3px solid rgba(255,190,0,.8);border-radius:26px;
  box-shadow:0 0 0 6px rgba(255,215,0,.18),0 18px 58px rgba(255,172,0,.45),0 8px 32px rgba(0,0,0,.32);
  padding:28px 22px 20px;text-align:center;
  font-family:'Fredoka One',cursive;color:#5A3800;
  overflow:hidden;
  animation:hupEntrance .5s cubic-bezier(.22,.68,0,1.2) both
}
@keyframes hupEntrance{
  from{transform:scale(.8) translateY(16px);opacity:0}
  to  {transform:scale(1)  translateY(0);   opacity:1}
}
.hup-emoji{font-size:54px;line-height:1;margin-bottom:8px;display:block;animation:hupBounce 2.6s ease-in-out infinite}
@keyframes hupBounce{
  0%,100%{transform:translateY(0)   scale(1)}
  45%    {transform:translateY(-6px) scale(1.1)}
}
.hup-level{font-size:32px;color:#A04800;margin-bottom:4px;line-height:1.1}
.hup-unlock-label{font-size:12px;color:rgba(90,56,0,.7);margin-bottom:6px;letter-spacing:.03em}
.hup-item{
  background:rgba(255,255,255,.6);border:1.5px solid rgba(255,185,0,.4);
  border-radius:16px;padding:10px 16px;font-size:19px;margin-bottom:20px;
  word-break:break-word
}
.hup-btns{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.hup-btn{
  flex:1;min-width:0;padding:13px 8px;border:none;border-radius:18px;
  font-family:'Fredoka One',cursive;font-size:15px;cursor:pointer;
  transition:opacity .15s;-webkit-tap-highlight-color:transparent
}
.hup-btn:active{opacity:.75}
.hup-market{background:linear-gradient(135deg,#FFB700,#FF7A00);color:#fff}
.hup-place {background:linear-gradient(135deg,#6FD14A,#4AB61C);color:#fff}
.hup-skip{
  background:none;border:none;color:rgba(90,56,0,.45);
  font-size:13px;cursor:pointer;font-family:'Fredoka One',cursive;
  width:100%;padding:4px 0;-webkit-tap-highlight-color:transparent
}
.hup-skip:active{color:rgba(90,56,0,.75)}
@media(max-width:360px){
  .hup-btns{flex-direction:column}
  .hup-btn{width:100%}
}

/* ─── Touch safety ─────────────────────────────────────────────────────────── */
/* Allow vertical scroll inside modals — html/body:touch-action:none is game-level */
.mkt-inner,.inv-inner,.bud-inner,.pet-inner,.qst-inner,.fen-inner,.hou-inner{
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Instant tap response on all game buttons (no 300ms delay on mobile) */
button,a{touch-action: manipulation}
/* Prevent long-press context menu on game canvas on iOS */
#beeCanvas{-webkit-touch-callout: none}
/* ── Bee World Daily Task Panel ── */
#bwTaskPanel{position:fixed;top:52px;right:10px;width:215px;background:rgba(16,12,40,.9);backdrop-filter:blur(10px);border:1.5px solid rgba(245,184,0,.28);border-radius:14px;z-index:40;overflow:hidden;font-family:'Fredoka One',cursive;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.45)}
body[data-mode="senior"] #bwTaskPanel{display:none}
.bwt-toggle-btn{width:100%;background:none;border:none;padding:9px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;color:#FFD700;font-size:13px;font-family:'Fredoka One',cursive;min-height:40px}
.bwt-title-text{flex:1;text-align:left;font-size:13px}
.bwt-prog-text{background:rgba(245,184,0,.18);padding:2px 8px;border-radius:10px;font-size:11px;color:#FFD700}
#bwtChevron{font-size:11px;opacity:.7;transition:transform .18s}
.bwt-body{padding:0 11px 10px}
.bwt-body.bwt-collapsed{display:none}
.bwt-sub{font-size:10px;color:rgba(255,255,255,.45);font-family:sans-serif;margin-bottom:8px;line-height:1.4}
.bwt-list{display:flex;flex-direction:column;gap:5px}
.bwt-task{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border-radius:10px;padding:7px 9px;cursor:pointer;transition:background .15s;border:1px solid rgba(255,255,255,.08)}
.bwt-task:hover{background:rgba(255,255,255,.12)}
.bwt-task.bwt-done{opacity:.52;background:rgba(80,220,120,.07);border-color:rgba(80,220,120,.2);cursor:default}
.bwt-task-check{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;transition:background .18s,border-color .18s}
.bwt-task.bwt-done .bwt-task-check{background:#4CAF50;border-color:#4CAF50;color:#fff}
.bwt-task-info{flex:1;min-width:0}
.bwt-task-label{font-size:12px;font-family:'Fredoka One',cursive;color:#fff;line-height:1.2}
.bwt-task.bwt-done .bwt-task-label{text-decoration:line-through;color:rgba(255,255,255,.38)}
.bwt-task-reward{font-size:10px;color:rgba(245,184,0,.8);font-family:sans-serif;margin-top:1px}
.bwt-all-done{font-size:11px;color:#88FFBB;font-family:sans-serif;text-align:center;line-height:1.5;padding:6px 2px}
@media(max-width:480px){#bwTaskPanel{width:185px;top:46px;right:7px}.bwt-title-text{font-size:12px}}