/* HUD 10/10 — phiên bản gọn đã duyệt: phù hợp quầy gỗ miền Tây.
   Chỉ thay hình/nhịp UI, giữ nguyên mọi ID, onclick và dữ liệu tiền/giờ. */
#game .hud{height:70px}
#game .hud .wooden{border-width:2px;box-shadow:inset 0 0 0 2px #e9bd76,0 2px 0 #50290f40}
#game .hud .money{
  left:24px;top:9px;width:277px;height:48px;border-radius:30px;
  padding:0 10px 0 49px;gap:5px;justify-content:center;
  background:linear-gradient(180deg,#98551e,#74401d);
  white-space:nowrap;overflow:visible;font-variant-numeric:tabular-nums;
}
#game .hud .money .coin{
  left:5px;top:2px;width:40px;height:40px;font:29px Georgia,serif;
  box-shadow:inset 0 0 0 2px #fff3b2,inset 0 0 0 4px #e5ae4b,0 1px 3px #552d1660;
}
#game .hud .money strong{font-size:26px;line-height:1.15;letter-spacing:-.035em}
#game .hud .money small{font-size:14px;line-height:1.25;opacity:.9}
#game .hud .mood{
  left:324px;top:10px;width:253px;height:46px;
  border-radius:28px;padding:12px 15px 0 47px;
  background:linear-gradient(180deg,#9b5a2e,#7b441f);
}
#game .hud .happy-face{
  left:-4px;top:-4px;width:50px;height:50px;border-width:4px;
  box-shadow:0 0 0 1px #83502e;
}
#game .hud .happy-face:before,
#game .hud .happy-face:after{top:13px;width:5px;height:7px}
#game .hud .happy-face:before{left:9px}
#game .hud .happy-face:after{right:9px}
#game .hud .happy-face i{
  width:17px;height:9px;left:12px;top:25px;border-top-width:2px;
}
#game .hud .mood-track{height:18px;border-radius:20px}
#game .hud .mood #served-label{display:none}
#game .hud .clock{
  right:96px;top:9px;width:185px;height:48px;border-radius:27px;
  padding:2px 10px 2px 45px;background:#fff7e8;
}
#game .hud .clock time{font-size:29px;line-height:1.15;font-variant-numeric:tabular-nums}
#game .hud .sun{
  left:-5px;top:-4px;width:51px;height:51px;
  font-size:35px;border-width:3px;
  box-shadow:inset 0 0 0 2px #e6b766;
  background:#efcd80;
}
#game .hud .round{
  right:22px;top:7px;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(180deg,#d19a57,#ad7133);
}
#game .hud .pause-icon{
  width:19px;height:24px;border-left-width:7px;border-right-width:7px;
  border-radius:3px;
}
#game:not(.expanded) .shop-title{top:14px;font-size:25px}
#game:not(.expanded) .shop-title span{font-size:15px}

/* Quầy lớn: năm công cụ chung một khay kem mỏng, không phải thanh nút nổi rời rạc. */
#game.expanded .bottom-bar{
  position:absolute;left:610px;top:12px;bottom:auto;
  width:540px;height:42px;padding:0 8px;
  border:1.5px solid #b7854c;border-radius:24px;
  background:linear-gradient(180deg,#fff7e9e8,#f5dfb8de);
  color:#59391e;box-shadow:0 2px 0 #6f4b2552,inset 0 1px 0 #ffffffa6;
  z-index:21;overflow:visible;
}
#game.expanded .bottom-bar .day-note{display:none}
#game.expanded .bottom-bar .tools{width:100%;gap:1px;justify-content:center;align-items:center}
#game.expanded .bottom-bar .tools button{
  min-height:34px;position:relative;margin:0;
  font-size:16px;line-height:1.25;
  padding:4px 9px;color:#604126;
  border-radius:10px;white-space:nowrap;
}
#game.expanded .bottom-bar .tools button:hover,
#game.expanded .bottom-bar .tools button:focus-visible{background:#dfc39a55}
#game.expanded .bottom-bar .tools #upgrade{font-size:16px}
#game.expanded .bottom-bar .tools #demo{font-size:16px}
#game.expanded .bottom-bar .tools #demo span:first-child{font-size:18px}
#game.expanded .bottom-bar .tools #sound{font-size:21px;min-width:36px}
#game.expanded .bottom-bar .tools #sound span{display:none}
#game.expanded .bottom-bar .tools #help{
  width:30px;height:30px;min-width:30px;padding:0;
  font-size:18px;line-height:1.25;border:1.5px solid #947049;border-radius:50%;
}
#game.expanded .bottom-bar .tools #fullscreen{
  min-width:36px;font-size:23px;line-height:1.15;
}
#game.expanded .bottom-bar .tools #upgrade::after,
#game.expanded .bottom-bar .tools #sound::after{
  content:'';position:absolute;right:-2px;top:8px;height:20px;
  border-right:1px solid #b99b76;
}

/* Khi thu khung trình duyệt, giữ nút Pause DỄ BẤM nhưng chỉ vẽ
   vòng tròn nhỏ ở giữa hitbox: không quay lại nút tròn khổng lồ. */
@media(orientation:landscape) and (max-height:600px){
  #game.expanded .hud .round{
    right:0;top:0;width:124px;height:120px;
    background:none;border:0;box-shadow:none;
  }
  #game.expanded .hud .round::before{
    content:'';position:absolute;left:50%;top:33px;width:57px;height:57px;
    transform:translate(-50%,-50%);border-radius:50%;
    border:2px solid #82491f;
    background:linear-gradient(180deg,#d19a57,#ad7133);
    box-shadow:inset 0 0 0 3px #e9bd76,0 2px 0 #50290f40;
  }
  #game.expanded .hud .round .pause-icon{
    position:absolute;left:50%;top:33px;
    transform:translate(-50%,-50%);
    z-index:1;width:20px;height:25px;
    border-left-width:7px;border-right-width:7px;
  }
  #game.expanded .bottom-bar .tools{gap:1px}
  #game.expanded .bottom-bar .tools button{font-size:16px}
}
/* Chế độ dọc xoay toàn bộ quầy 90 độ, vì vậy hitbox cần rộng hơn
   nhưng icon vẫn chỉ 57px theo bản mockup gọn. */
@media(orientation:portrait) and (max-width:1100px){
  #game.expanded .hud .round{
    right:0;top:0;width:150px;height:150px;
    background:none;border:0;box-shadow:none;
  }
  #game.expanded .hud .round::before{
    content:'';position:absolute;left:50%;top:33px;width:57px;height:57px;
    transform:translate(-50%,-50%);border:2px solid #82491f;border-radius:50%;
    background:linear-gradient(180deg,#d19a57,#ad7133);
    box-shadow:inset 0 0 0 3px #e9bd76,0 2px 0 #50290f40;
  }
  #game.expanded .hud .round .pause-icon{
    position:absolute;left:50%;top:33px;transform:translate(-50%,-50%);
    z-index:1;width:20px;height:25px;border-left-width:7px;border-right-width:7px;
  }
}