*{margin:0;padding:0;box-sizing:border-box}
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
}
#beeTitle{
  font-size:28px;font-weight:900;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.4),0 0 28px 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}}

#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;
  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}

#joystickZone{
  position:fixed;bottom:0;left:0;width:100%;height:55%;
  pointer-events:none;z-index:15
}
@media(hover:none){#joystickZone{pointer-events:auto}}

#joystickBase{
  position:absolute;width:96px;height:96px;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.42);
  border-radius:50%;opacity:0;transition:opacity .15s
}
#joystickThumb{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:rgba(255,200,0,.78);
  border:2px solid rgba(255,255,255,.6);border-radius:50%
}

/* Inventory button in HUD */
#inventoryBtn,
#buddyBtn,
#petBtn,
#houseBtn,
#fenceBtn,
#dailyRewardBtn{
  margin-top:8px;padding:6px 14px;
  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:13px;cursor:pointer;backdrop-filter:blur(6px);
  pointer-events:auto;transition:background .2s;display:inline-block
}
#inventoryBtn:hover,#buddyBtn:hover,#petBtn:hover,#houseBtn:hover,#fenceBtn:hover,#dailyRewardBtn:hover{background:rgba(0,0,0,.45)}
#dailyRewardStatus{
  margin-top:6px;color:rgba(255,255,255,.88);font-size:11px;
  text-shadow:0 1px 5px rgba(0,0,0,.5);min-height:14px
}

/* 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}

/* 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}

/* 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))}
}

@media(max-width:640px){
  #beeUI{top:10px;width:min(96vw,360px)}
  #beeTitle{font-size:22px}
  #inventoryBtn,#buddyBtn,#petBtn,#houseBtn,#fenceBtn,#dailyRewardBtn{font-size:12px;padding:7px 11px;margin-top:6px}
  #dailyRewardStatus{font-size:10px}
  #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{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)}
}