/* Floralia · the top menu bar, design B (2026-10-22, the user picked B on menupick.html): round icons with a short name under,
   a number on a group's badge, the drop-down a list (picture · name · count · key) in the bag page's dark plum and gold.
   Loaded after css/style.css; js/hudlayout.js builds it. */
#menubar { gap: calc(6px * var(--u)); padding: calc(6px * var(--u)) calc(12px * var(--u)) calc(4px * var(--u)); border-radius: 99px;
  border: calc(2px * var(--u)) solid #c9a24a; border-image: none; background: linear-gradient(180deg, rgba(28, 20, 34, .94), rgba(14, 10, 18, .94));
  box-shadow: 0 0 0 calc(2px * var(--u)) #1a1320, 0 calc(4px * var(--u)) calc(12px * var(--u)) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 230, 160, .18); }
#menubar .mb-grp { gap: calc(6px * var(--u)); }
#menubar .mb-grp + .mb-grp { padding-left: 0; border-left: 0; background: none; }
#menubar .mb-btn { width: calc(54px * var(--u)); padding: 0; gap: calc(2px * var(--u)); border-radius: calc(12px * var(--u)); background: none; }
#menubar .mb-btn:hover, #menubar .mb-btn.open { background: none; }
#menubar .mb-btn img { box-sizing: border-box; width: calc(42px * var(--u)); height: calc(42px * var(--u)); padding: calc(6px * var(--u)); border-radius: 50%;
  border: calc(2px * var(--u)) solid #6a5026; background: radial-gradient(circle at 50% 40%, #3a2c44, #17121c 75%); transition: border-color .15s, box-shadow .15s, transform .12s; }
#menubar .mb-btn:hover img, #menubar .mb-btn.open img { border-color: #ffd76a; box-shadow: 0 0 calc(8px * var(--u)) rgba(255, 215, 106, .6); transform: none; }
#menubar .mb-label { font: 600 calc(10.5px * var(--u)) / 1.2 Prompt, Mali, sans-serif; color: #f6ead0; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#menubar .mb-btn.open .mb-label { color: #ffe08a; }
#menubar .mb-caret { display: none; }
#menubar kbd { top: auto; bottom: calc(14px * var(--u)); right: calc(1px * var(--u)); min-width: 0; padding: 0 calc(3px * var(--u)); border-radius: calc(4px * var(--u));
  background: #fff3dc; color: #2c2533; font: 600 calc(8.5px * var(--u)) / 1.35 Prompt, sans-serif; box-shadow: 0 0 0 1px #2c2533; }
#menubar .mb-badge { top: calc(-3px * var(--u)); left: auto; right: calc(2px * var(--u)); min-width: calc(17px * var(--u)); padding: 0 calc(4px * var(--u)); border-radius: 99px;
  background: #e8384f; color: #fff; font: 600 calc(10px * var(--u)) / 1.55 Prompt, sans-serif; box-shadow: 0 0 0 calc(2px * var(--u)) #2a0f14, 0 0 calc(6px * var(--u)) rgba(232, 56, 79, .6); }
#menubar.compact .mb-btn { width: calc(44px * var(--u)); }
/* the drop-down: a list */
#menupop { min-width: calc(230px * var(--u)); padding: calc(8px * var(--u)); gap: calc(1px * var(--u)); border-radius: calc(14px * var(--u)); border: calc(2px * var(--u)) solid #c9a24a;
  background: linear-gradient(180deg, rgba(34, 26, 44, .97), rgba(18, 13, 24, .97)); box-shadow: 0 0 0 calc(2px * var(--u)) #1a1320, 0 calc(10px * var(--u)) calc(26px * var(--u)) rgba(0, 0, 0, .6);
  font-family: Prompt, Mali, sans-serif; }
#menupop .mp-head { font: 600 calc(13px * var(--u)) Prompt, sans-serif; color: #ffe08a; border-bottom-color: rgba(201, 162, 74, .45); }
#menupop .mp-sep { font: 600 calc(11px * var(--u)) Prompt, sans-serif; color: #ffc95a; }
#menupop .mp-item { gap: calc(9px * var(--u)); padding: calc(5px * var(--u)) calc(8px * var(--u)); border-radius: calc(9px * var(--u)); font: 500 calc(13px * var(--u)) Prompt, sans-serif; color: #f3ead6; }
#menupop .mp-item:hover, #menupop .mp-item:focus-visible { background: rgba(255, 220, 140, .12); }
#menupop .mp-item img { width: calc(30px * var(--u)); height: calc(30px * var(--u)); }
#menupop .mp-item kbd { background: #fff3dc; color: #2c2533; border-radius: calc(4px * var(--u)); font: 600 calc(10px * var(--u)) / 1.45 Prompt, sans-serif; }
#menupop .mp-item em { background: #e8384f; font: 600 calc(10.5px * var(--u)) / 1.6 Prompt, sans-serif; }
#menupop .mp-item em.lock { background: rgba(255, 255, 255, .1); color: #c9c0ae; }
#menupop .mp-item.lock { opacity: .6; }

/* ---- polish (the user: "ปรับให้สวยที่สุด"): a gold-rimmed glass bar, jewel-like icon rings, a lit pick, the list in the skill page's ornaments ---- */
#menubar { padding: calc(7px * var(--u)) calc(14px * var(--u)) calc(5px * var(--u));
  background: radial-gradient(ellipse 80% 120% at 50% -20%, rgba(255, 214, 140, .16), transparent 60%), linear-gradient(180deg, rgba(40, 28, 50, .95), rgba(16, 11, 22, .96));
  border: calc(2px * var(--u)) solid transparent; background-clip: padding-box;
  box-shadow: 0 0 0 calc(1px * var(--u)) #f2c96a, 0 0 0 calc(3px * var(--u)) #3a2610, 0 0 0 calc(4px * var(--u)) rgba(242, 201, 106, .55), 0 calc(6px * var(--u)) calc(16px * var(--u)) rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 190, .25); }
#menubar::before, #menubar::after { content: ''; position: absolute; top: 50%; width: calc(14px * var(--u)); height: calc(14px * var(--u)); transform: translateY(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fff2b8, #e0a83a 55%, #8a5a18); border: calc(1.5px * var(--u)) solid #3a2610; box-shadow: 0 0 calc(6px * var(--u)) rgba(255, 210, 120, .6); pointer-events: none; }
#menubar::before { left: calc(-8px * var(--u)); } #menubar::after { right: calc(-8px * var(--u)); }
#menubar .mb-btn img { border: 0; padding: calc(7px * var(--u));
  background: radial-gradient(circle at 50% 38%, #4a3858, #1c1424 72%) padding-box, linear-gradient(160deg, #fff0b0, #d9a443 45%, #7a5218 100%) border-box;
  border: calc(2px * var(--u)) solid transparent; box-shadow: 0 calc(2px * var(--u)) calc(4px * var(--u)) rgba(0, 0, 0, .55), inset 0 calc(-3px * var(--u)) calc(6px * var(--u)) rgba(0, 0, 0, .45); }
#menubar .mb-btn:hover img { transform: translateY(calc(-2px * var(--u))); box-shadow: 0 calc(4px * var(--u)) calc(8px * var(--u)) rgba(0, 0, 0, .5), 0 0 calc(10px * var(--u)) rgba(255, 215, 106, .55); }
#menubar .mb-btn.open img { background: radial-gradient(circle at 50% 38%, #6a4a2a, #2a1a0e 72%) padding-box, linear-gradient(160deg, #fff6c8, #ffc95a 50%, #b07a24) border-box;
  box-shadow: 0 0 0 calc(2px * var(--u)) rgba(255, 224, 138, .35), 0 0 calc(14px * var(--u)) rgba(255, 215, 106, .85); }
#menubar .mb-label { margin-top: calc(1px * var(--u)); }
#menubar .mb-btn:hover .mb-label { color: #fff3c0; }
#menubar .mb-btn.open .mb-label { background: linear-gradient(180deg, #fff6c8, #ffc95a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #000); }
#menubar .mb-badge { background: radial-gradient(circle at 35% 30%, #ff8a9a, #e8384f 55%, #a01830); box-shadow: 0 0 0 calc(1.5px * var(--u)) #fff3e0, 0 0 0 calc(3px * var(--u)) #2a0f14, 0 0 calc(8px * var(--u)) rgba(232, 56, 79, .7); }
#menubar kbd { background: linear-gradient(180deg, #fff8e4, #f2d89a); box-shadow: 0 0 0 1px #3a2610, 0 1px 0 #3a2610; }
#menupop { padding: calc(10px * var(--u)) calc(10px * var(--u)) calc(9px * var(--u));
  background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(255, 214, 140, .12), transparent 70%), linear-gradient(180deg, rgba(36, 27, 46, .98), rgba(17, 12, 23, .98));
  border: calc(2px * var(--u)) solid #c9a24a; box-shadow: 0 0 0 calc(2px * var(--u)) #1a1320, 0 0 0 calc(3px * var(--u)) rgba(201, 162, 74, .4), 0 calc(12px * var(--u)) calc(30px * var(--u)) rgba(0, 0, 0, .65); }
#menupop::before { content: ''; position: absolute; left: 50%; top: calc(-9px * var(--u)); width: calc(14px * var(--u)); height: calc(14px * var(--u)); transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fff2b8, #e0a83a 55%, #8a5a18); border: calc(1.5px * var(--u)) solid #3a2610; }
#menupop .mp-head { position: relative; padding-bottom: calc(7px * var(--u)); margin-bottom: calc(3px * var(--u)); border-bottom: 0; font-size: calc(14px * var(--u));
  background: linear-gradient(180deg, #fff6c8, #ffc95a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#menupop .mp-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-3px * var(--u)); height: calc(10px * var(--u)); background: url(../assets/ui_skillpage/divider.png) center / 100% 100% no-repeat; }
#menupop .mp-item { position: relative; transition: background .12s, transform .12s; }
#menupop .mp-item::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: calc(3px * var(--u)); border-radius: 99px; background: #ffc95a; opacity: 0; transition: opacity .12s; }
#menupop .mp-item:hover { background: linear-gradient(90deg, rgba(255, 210, 120, .18), rgba(255, 210, 120, .04)); transform: translateX(calc(2px * var(--u))); }
#menupop .mp-item:hover::before { opacity: 1; }
#menupop .mp-item img { box-sizing: border-box; padding: calc(3px * var(--u)); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2c44, #17121c 75%); box-shadow: 0 0 0 1px rgba(217, 164, 67, .55); }
@media (prefers-reduced-motion: reduce) { #menubar .mb-btn img, #menupop .mp-item { transition: none; } }
/* a window open (js/hudlayout.js body.win-open): the floating HUD buttons step back, not over the window */
body.win-open #gachabtn, body.win-open #wevicon, body.win-open #scanbtn { opacity: 0; visibility: hidden; pointer-events: none; }
/* the summoning hall is on the menu bar now (js/hudlayout.js BAR 'gacha'): its old floating button stays hidden */
#gachabtn { display: none !important; }
/* the fold button at the bar's end (js/hudlayout.js, 2026-10-25, the user: "เมนูตรงนี้ให้กดเก็บได้"): a small gold arrow;
   folded, the bar is only this button - its badge the count of everything waiting */
#menubar .mb-fold { position: relative; align-self: center; flex: none; width: calc(30px * var(--u)); height: calc(30px * var(--u)); margin-left: calc(2px * var(--u)); padding: 0;
  border: calc(2px * var(--u)) solid #6a5026; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2c44, #17121c 75%); cursor: pointer; }
#menubar .mb-fold:hover { border-color: #ffd76a; box-shadow: 0 0 calc(8px * var(--u)) rgba(255, 215, 106, .6); }
#menubar .mb-fold i { position: absolute; inset: 0; margin: auto; width: calc(9px * var(--u)); height: calc(9px * var(--u)); border: solid #ffd76a; border-width: 0 0 calc(2.5px * var(--u)) calc(2.5px * var(--u));
  transform: translateX(calc(1.5px * var(--u))) rotate(225deg); }
#menubar.folded .mb-fold i { transform: translateX(calc(-1.5px * var(--u))) rotate(45deg); }
#menubar.folded .mb-grp { display: none; }
#menubar.folded { padding: calc(4px * var(--u)); }
#menubar.folded .mb-fold { margin-left: 0; width: calc(40px * var(--u)); height: calc(40px * var(--u)); }
#menubar.folded::before, #menubar.folded::after { display: none; }   /* (the gold diamonds at the ends: not round the lone button) */