/* Painted home-tab icons and notification badges (menu-icons.js). */
#home-tabs button{position:relative}#home-tabs button[hidden]{display:none!important}
#home-tabs .menu-icon{display:block;width:30px;height:30px;line-height:0;font-style:normal;filter:drop-shadow(0 2px 0 #0008);transition:transform .15s ease,filter .15s ease}
#home-tabs .menu-icon svg{display:block;width:100%;height:100%;overflow:visible}
#home-tabs button:not(.active) .menu-icon{filter:drop-shadow(0 2px 0 #0008) saturate(.82) brightness(.92)}
#home-tabs button:hover .menu-icon,#home-tabs button:focus-visible .menu-icon{transform:translateY(-2px) scale(1.06)}
#home-tabs button.active .menu-icon{transform:scale(1.08);filter:drop-shadow(0 0 6px #ffd98599) drop-shadow(0 2px 0 #0008)}
.menu-badge{position:absolute;top:2px;right:5px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:radial-gradient(circle at 35% 30%,#ff8a73,#d12a1c 60%,#8d140b);border:2px solid #2b1a0d;color:#fff;font:800 11px/14px system-ui,sans-serif;text-align:center;box-shadow:0 2px 0 #0006;pointer-events:none;animation:menu-badge-pop .35s ease-out}
.menu-badge.dot{min-width:0;width:13px;height:13px;padding:0;top:5px;right:12px}
.menu-badge.word{font-size:9px;letter-spacing:.5px;background:radial-gradient(circle at 35% 30%,#fff0a8,#e8a826 60%,#9a5e10);color:#2b1a0d}
@keyframes menu-badge-pop{from{transform:scale(.3)}70%{transform:scale(1.15)}to{transform:scale(1)}}
.reduce-motion .menu-badge,.reduce-motion #home-tabs .menu-icon{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.menu-badge,#home-tabs .menu-icon{animation:none!important;transition:none!important}}
@media (max-width:650px){#home-tabs .menu-icon{width:26px;height:26px}.menu-badge{right:1px;top:1px}}
/* Badge path (MenuIcons.set / bindTab → WRUI.tabBadge, WRUI.newMark): dock badge → in-screen tab badge → glowing "New" item. */
[data-badge-path]{position:relative}
:is(#wr-x,html) .wr-tab-badge{position:absolute;top:3px;right:4px;z-index:2;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-width:2px;border-radius:10px;font-size:12px;line-height:1;pointer-events:none}
:is(#wr-x,html) .wr-tab-badge.is-inline{position:relative;top:auto;right:auto;display:inline-grid;margin:0 0 0 8px;vertical-align:middle}
:is(#wr-x,html) .wr-btn>.wr-tab-badge{top:-9px;right:-9px}
:is(#wr-x,html) .wr-is-new{box-shadow:inset 0 0 0 2px #ffcf5a,0 0 12px 1px #ffb02e88;animation:wr-new-glow 1.6s ease-out 1}
:is(#wr-x,html) .chat-bubble.wr-is-new{box-shadow:0 0 0 2px #ffcf5a,0 0 12px 1px #ffb02e88}
:is(#wr-x,html) .wr-is-new:has(>.wr-new-tag){position:relative;overflow:visible}
/* The tag rides the row's top edge like a ribbon so names and buttons keep their full width on phones. */
:is(#wr-x,html) .wr-new-tag{position:absolute;top:-7px;left:8px;z-index:1;display:inline-block;margin:0;padding:0 6px;pointer-events:none;border:1.5px solid #2b1a0d;border-radius:8px;background:linear-gradient(180deg,#fff0a8,#e8a826);color:#2b1a0d;font:800 9px/12px system-ui,sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:none;white-space:nowrap}
@keyframes wr-new-glow{0%{box-shadow:inset 0 0 0 2px #fff3c4,0 0 22px 6px #ffcf5acc}100%{box-shadow:inset 0 0 0 2px #ffcf5a,0 0 12px 1px #ffb02e88}}
html.reduce-motion :is(.wr-is-new,.wr-tab-badge){animation:none!important}
@media (prefers-reduced-motion:reduce){:is(.wr-is-new,.wr-tab-badge){animation:none!important}}
/* Free Daily Offer gifts (shop-menu.js): "Claim" in the green ready style instead of the gold paid-offer style. #wr-x never matches;
   it lifts the :is() to the id weight of the ui-system.css gold list so this wins without !important. */
:root :is(#wr-x,.daily-offer) button.wr-gift-claim:not(:disabled){--b-hi:var(--wr-emerald-hi);--b:var(--wr-emerald);--b-lo:var(--wr-emerald-lo)}
/* Dock feel (menu-icons.js dockMotion): buttons dip slightly while pressed, the raised active tab dips less; switching tabs fades the
   new screen in with a short rise; re-tapping the active tab scrolls back to the top. Reduced motion: no fade, no transitions. */
:root .mode-online #home-tabs button{transition:transform .08s ease,box-shadow .08s ease}
:root .mode-online #home-tabs button:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 #0004,inset 0 2px 4px #0006,0 1px 2px #0007}
:root .mode-online #home-tabs button.active:active{transform:translateY(-2px);box-shadow:inset 0 -2px 0 var(--wr-amber-lo,#a8640c),inset 0 2px 4px #0004,0 2px 6px #0009,0 0 14px 2px #ffcf4d55}
@keyframes wr-tab-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wr-tab-fade{from{opacity:0}to{opacity:1}}
#lobby-content.wr-tab-enter{animation:wr-tab-rise .18s ease-out backwards}
#world-layer.wr-tab-enter{animation:wr-tab-fade .18s ease-out backwards}
html.reduce-motion :is(#lobby-content,#world-layer).wr-tab-enter{animation:none!important}
html.reduce-motion .mode-online #home-tabs button{transition:none}
@media (prefers-reduced-motion:reduce){:is(#lobby-content,#world-layer).wr-tab-enter{animation:none!important}:root .mode-online #home-tabs button{transition:none}}