/* Original Mimi Online common frame / button / tab / slot / tooltip system. */
:root{--m-ink:#342d25;--m-gold:#c2a166;--m-paper:#eee3cb;--m-dark:#302e2e}
.m-item-icon{display:block;width:48px;height:48px;color:#f1c476}.m-item-icon svg{width:100%;height:100%}
.m-icon{display:block;width:44px;height:44px;flex:none;background-image:url('/ui/icons/mimi-menu-atlas-v1.png');background-size:400% 200%;border-radius:7px}
.icon-status{background-position:0 0}.icon-skill{background-position:33.333% 0}.icon-equipment{background-position:66.667% 0}.icon-shop{background-position:100% 0}.icon-job{background-position:0 100%}.icon-map{background-position:33.333% 100%}.icon-inventory{background-position:66.667% 100%}.icon-pet{background-position:100% 100%}
#mTopMenu{position:absolute;right:14px;top:12px;display:flex;gap:5px;z-index:8}
.m-menu-button{display:flex;flex-direction:column;align-items:center;gap:3px;width:65px;min-height:76px;padding:5px 3px;background:linear-gradient(#42403aed,#242222ed);border:1px solid #bc9a66;border-radius:8px;box-shadow:inset 0 0 0 2px #171718,0 3px 8px #0005;font-size:12px;color:#fff1d2}
.m-menu-button:hover,.m-menu-button[aria-expanded=true]{background:#695235;border-color:#ffe4ab}
#mMenuToggle{display:none;position:absolute;right:10px;top:10px;z-index:9}
.m-window{position:fixed;left:50%;top:128px;bottom:210px;transform:translateX(-50%);width:min(650px,calc(100vw - 32px));max-height:530px;z-index:12;display:flex;flex-direction:column;background:var(--m-paper);color:var(--m-ink);border:3px solid #514c44;border-radius:12px;box-shadow:0 0 0 2px var(--m-gold),inset 0 0 0 2px #fef4dd,0 12px 35px #0009;overflow:hidden}
.m-window[hidden]{display:none}
.m-window header{display:flex;align-items:center;gap:10px;min-height:48px;padding:5px 8px;background:linear-gradient(#4e4841,#28272b);color:#ffe4b0;border-bottom:3px solid #b99660}
.m-window header .m-icon{width:32px;height:32px}.m-window h2{font-size:20px;margin:0;flex:1;font-weight:600}
.m-close{width:38px;min-height:36px;padding:0;background:linear-gradient(#c97b4e,#893f31);border:2px solid #e4bf7c;border-radius:7px;font-size:27px;color:#fff4d4}
.m-tabs{display:flex;flex:none;gap:4px;padding:8px 10px 0;overflow:auto;border-bottom:1px solid #b9a481;scrollbar-width:thin}
.m-tab{border-radius:7px 7px 0 0;border:1px solid #998970;background:#53504e;color:#fff2da;font-size:14px;padding:7px 14px;min-height:38px;white-space:nowrap}
.m-tab[aria-selected=true]{background:#fff1d4;color:#302b26;border-bottom-color:transparent}
.m-scroll{overflow:auto;overscroll-behavior:contain;padding:14px;min-height:0;flex:1;scrollbar-color:#a28b64 #d8caae;scrollbar-width:thin}
.m-window footer{flex:none;font-size:12px;padding:6px 12px;background:#d5c5a9;border-top:1px solid #b39c77}
.m-window p{color:#675542;font-size:14px;line-height:1.65;margin:9px 0}.m-window h3{font-size:18px;margin:8px 0}
.m-button{background:linear-gradient(#b88b4e,#805a31);border:1px solid #694929;box-shadow:inset 0 0 0 1px #e8c381;color:#fff5e2;border-radius:6px;min-height:38px;padding:6px 13px;font-size:14px}
.m-button:hover{background:#b18043}.m-button:disabled{background:#aba394;color:#4d4942;box-shadow:none;opacity:.7}
.m-row{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #bba98780;padding:8px 0;font-size:14px}.m-row strong{margin-left:auto}.m-row .m-button{min-width:36px;padding:4px}
.m-status-layout{display:grid;grid-template-columns:190px 1fr;gap:18px}.m-character-card{text-align:center;background:#d7c6a880;border:1px solid #b09a76;border-radius:8px;padding:10px}
.m-portrait{width:110px;height:135px;object-fit:contain;image-rendering:pixelated}
.m-meter{height:20px;position:relative;background:#514a41;border:1px solid #564f43;border-radius:5px;overflow:hidden;margin:6px 0;color:white;box-shadow:inset 0 1px 3px #0008}.m-meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#f2837f,#bf3a49)}.m-meter.mp i{background:linear-gradient(#70b5ed,#3765b7)}.m-meter.exp i{background:linear-gradient(#a9bf77,#61813e)}.m-meter span{position:relative;display:block;text-align:center;font-size:12px;line-height:18px;text-shadow:0 1px 2px #000}
.m-slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.m-item-card{display:flex;flex-direction:column;gap:8px}
.m-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(#504c48,#28292a);border:2px solid #b9aa8c;box-shadow:inset 0 0 0 2px #22242a;color:#fff1d7;border-radius:7px;min-height:90px;padding:8px;font-size:14px;min-width:0}.m-slot .m-icon{width:52px;height:52px}.m-slot b{position:absolute;right:5px;top:3px;background:#201d1ccc;padding:2px 4px;border-radius:3px;font-size:12px}.m-slot:hover{background:#635444}
.m-tooltip{display:none;position:absolute;bottom:100%;left:0;z-index:2;width:180px;padding:8px;background:#242222;color:#ffedcc;border:1px solid #c6a361;border-radius:5px;font-size:12px;text-align:left;pointer-events:none}.m-slot:hover .m-tooltip,.m-slot:focus-visible .m-tooltip{display:block}
.m-detail{background:#fff5de;border:1px solid #baa27b;padding:9px;font-size:14px;margin:0 12px 8px;border-radius:5px}
.m-empty{text-align:center;padding:14px}.m-empty>.m-icon{width:64px;height:64px;margin:auto}.m-empty p{max-width:400px;margin:auto}.m-equipment{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.m-equipment .m-portrait{grid-column:1/-1;margin:auto}.m-job>.m-icon{width:64px;height:64px}
.m-map-image{position:relative;width:100%;max-width:450px;margin:10px auto}.m-map-image img{width:100%;display:block;border-radius:6px}.m-map-dot{position:absolute;transform:translate(-50%,-50%);font-size:12px;background:#174f78;color:white;padding:2px 5px;border:1px solid #fff;border-radius:5px;white-space:nowrap}.m-map-dot.player{background:#873a35;z-index:1}
.mapInfo{top:92px}.mapInfo>strong{display:none}#zoomControls{top:156px}.status{background:linear-gradient(#494036ed,#292724ed);border:1px solid #c9a267}.bag{display:none!important}#rewardFeed{top:110px;pointer-events:none;z-index:6}
@media(max-width:900px){#mTopMenu{display:none;top:58px;grid-template-columns:repeat(4,60px);padding:8px;background:#242120f5;border:1px solid #c4a270;border-radius:10px}#mTopMenu.is-open{display:grid}.m-menu-button{width:60px;min-height:72px}#mMenuToggle{display:block}.mapInfo{top:90px;max-width:185px}.mapInfo small{font-size:11px}.mapInfo>button{min-height:30px;padding:3px 9px}.m-window{top:148px;bottom:205px;max-height:none;width:calc(100vw - 24px)}#zoomControls{top:130px}#rewardFeed{top:156px}.m-status-layout{grid-template-columns:1fr;gap:12px}.m-character-card .m-portrait{float:left;width:65px;height:110px;margin-right:8px}.m-character-card h3{font-size:16px}.m-character-card{min-height:130px}.m-window h2{font-size:18px}.m-scroll{padding:10px}.m-slot-grid{gap:7px}.m-slot{font-size:12px;padding:6px}.m-slot .m-icon{width:44px;height:44px}}
@media(max-height:520px) and (min-width:601px){.m-window{top:14px;bottom:14px;width:calc(100vw - 360px);max-height:none;left:48%}.m-status-layout{grid-template-columns:1fr}.m-equipment{grid-template-columns:repeat(2,1fr)}#mTopMenu{top:48px}.m-window h2{font-size:16px}.m-tabs{padding-top:3px}.m-window header{min-height:40px}.m-window footer{display:none}.m-scroll{padding:8px}}
@media(max-width:360px){.m-menu-button{width:55px}#mTopMenu{grid-template-columns:repeat(4,55px)}.m-slot-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.m-window *{transition:none}}
@media(max-width:900px){#mTopMenu{top:86px}#zoomControls{left:12px;right:auto;top:88px}}
@media(max-height:520px) and (min-width:601px){.m-window{width:calc(100vw - 440px);left:50%}#mTopMenu{top:12px;right:calc(50% - 132px)}}
.m-window[data-window=status],.m-window[data-window=equipment]{width:min(940px,calc(100vw - 32px));max-height:660px}
.m-loadout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px;align-items:start}
.m-loadout-character,.m-loadout-bag,.m-status-details{background:#fff5df;border:1px solid #bda47a;border-radius:9px;padding:10px;box-shadow:inset 0 0 0 2px #e4d4b6}
.m-loadout-character{display:grid;grid-template-columns:minmax(88px,1fr) minmax(125px,1.35fr) minmax(88px,1fr);grid-template-rows:auto repeat(3,minmax(100px,auto)) auto;gap:5px}
.m-loadout-character h3,.m-loadout-character .m-note{grid-column:1/-1}.m-loadout-character h3,.m-loadout-bag h3{margin:0 0 7px;color:#6c4527;border-bottom:1px solid #c9b38f;padding-bottom:5px}
.m-loadout-hero{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;background:radial-gradient(#8a9e8b88,#514945);border:2px solid #b89459;border-radius:12px;color:#fff1d2;padding:6px;text-shadow:0 1px 2px #000}
.m-loadout-hero .m-portrait{width:min(100%,155px);height:225px}.m-loadout-hero strong,.m-loadout-hero span{overflow-wrap:anywhere}
.m-loadout-slots{display:contents}.m-gear-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:95px;padding:3px;background:linear-gradient(#514940,#292a2b);border:2px solid #aa8758;border-radius:8px;color:#fff4d8;text-align:center;font-size:11px;line-height:1.15}
.m-gear-slot:nth-child(odd){grid-column:1}.m-gear-slot:nth-child(even){grid-column:3}.m-gear-slot:nth-child(-n+2){grid-row:2}.m-gear-slot:nth-child(n+3):nth-child(-n+4){grid-row:3}.m-gear-slot:nth-child(n+5){grid-row:4}
.m-gear-slot:hover,.m-gear-slot.m-drop-target{border-color:#f5d779;background:#685339}.m-gear-symbol{font-size:24px;color:#ffdb82;line-height:1}.m-gear-slot strong{font-size:12px;overflow-wrap:anywhere}.m-gear-slot small{color:#b8f1c1;font-size:10px}.m-gear-slot-name{color:#e8c999}
.m-loadout-character .m-note{font-size:11px;margin:5px 0 0}.m-gear-bag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-height:110px;align-content:start}.m-gear-bag>.m-note{grid-column:1/-1}
.m-gear-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:96px;min-width:0;padding:6px;background:linear-gradient(#55483b,#2a292a);border:2px solid #ba9b65;border-radius:8px;color:#fff0d0;text-align:center;font-size:11px;touch-action:manipulation}.m-gear-item strong{font-size:12px;overflow-wrap:anywhere}.m-gear-item.is-selected{outline:3px solid #e9b94d}.m-gear-item:hover{background:#6a563e}.m-gear-item>span:last-child{color:#bcf0c0}
.m-gear-hint{font-size:12px!important}.m-gear-summary{border-top:1px solid #c7af86;padding-top:7px}.m-gear-summary-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:8px}.m-gear-summary-stats span{background:#efe0c4;padding:5px;border-radius:5px;font-size:12px}
.m-status-identity{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:bold}.m-status-identity .m-portrait{height:95px;width:80px}.m-status-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.m-status-figures,.m-status-allocation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.m-status-allocation .m-row small{color:#317548;margin-left:auto}.m-status-details .m-row{min-width:0}
@media(max-width:700px){.m-loadout{grid-template-columns:1fr}.m-loadout-character{grid-template-columns:minmax(76px,1fr) minmax(110px,1.4fr) minmax(76px,1fr)}.m-loadout-hero .m-portrait{height:180px}.m-status-bars,.m-status-figures,.m-status-allocation{grid-template-columns:1fr}.m-window[data-window=status],.m-window[data-window=equipment]{top:132px;bottom:192px;max-height:none}}
@media(max-width:390px){.m-loadout-character{grid-template-columns:76px minmax(0,1fr) 76px}.m-gear-slot strong{font-size:11px}.m-gear-slot small{font-size:9px}}
.m-window[data-window=status],.m-window[data-window=equipment]{top:100px;bottom:150px}
.m-loadout-character{grid-template-rows:auto repeat(3,minmax(68px,auto)) auto}
.m-loadout-hero .m-portrait{height:165px;width:min(100%,135px)}
.m-gear-slot{min-height:68px}
.m-gear-item{touch-action:none}.m-gear-drag-ghost{position:fixed;z-index:1000;transform:translate(-50%,-50%);width:110px;min-height:76px;pointer-events:none;opacity:.85;box-shadow:0 10px 22px #0008}
.m-gear-entry{display:flex;flex-direction:column;gap:4px;min-width:0}.m-gear-entry .m-gear-item{flex:1}.m-gear-equip{min-height:34px;padding:3px 7px;font-size:12px;background:linear-gradient(#9d743c,#725023)}
@media(min-width:901px) and (max-width:1300px){.m-window[data-window=status],.m-window[data-window=equipment]{width:calc(100vw - 380px)}}
@media(max-width:700px){.m-window[data-window=status],.m-window[data-window=equipment]{top:132px;bottom:192px}}
