/* Phone and tablet character sheet (js/windows/mobile-sheet.js). Shared kit classes live in css/ui/mobile-hud.css. */
.m-sheet,.m-inspection{position:absolute;inset:0;display:flex;background:#101215 url(/ui/mobile/sheetbg.png?v=f16b55896a7aa2db) center/cover;box-shadow:0 10px 40px #000d;z-index:8}
body.tablet-ui :is(.m-sheet,.m-inspection){left:30px;right:30px;top:40px;bottom:40px;border-radius:6px;border:1px solid #a8894a88}
.m-rail{width:calc(112px + var(--safe-l));flex:none;display:flex;flex-direction:column;gap:6px;padding:46px 0 10px calc(var(--safe-l) + 2px)}
.m-rtab{width:104px;height:38px;display:grid;place-items:center;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;font:600 13px/1 var(--serif);color:#1d2b3b;text-shadow:0 1px 0 #ffffff70}
.m-rtab.on{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05;text-shadow:0 1px 0 #fff6}
.m-sheet-body{flex:1;display:flex;flex-direction:column;min-width:0;padding:8px calc(var(--safe-r) + 8px) 10px 8px;position:relative}
.m-sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;height:34px;flex:none}
.m-cols{display:flex;gap:10px;flex:1;min-height:0}
/* The top edge of card.png carries an ornament; headings start below it. */
.m-card-panel{background:url(/ui/mobile/card.png?v=ea1529f9c8e23a06) 0 0/100% 100%;border-radius:4px;padding:18px 11px 9px;min-height:0}
.m-kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:3.5px 0;border-bottom:1px solid #ffffff10}
.m-kv:last-child{border-bottom:0}
.m-kv span{color:var(--mute)}.m-kv b{font-weight:600;text-align:right}
.m-h5{font:600 12px var(--serif);color:var(--gold);letter-spacing:.6px;margin:0 0 5px}
.m-mute{font-size:12px;color:var(--mute)}
.m-gold-text{color:#ffe07a}
.m-round-face{width:54px;height:54px;flex:none;border-radius:50%;background:#111 center/cover;box-shadow:0 0 0 2px var(--gold2),0 2px 6px #000}
.m-who{width:31%;overflow:auto}
.m-who-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.m-who-name{font:600 15px var(--serif)}
.m-attributes{width:31%}
.m-combat{flex:1;overflow:auto}
.m-attr{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px solid #ffffff10}
.m-attr span{flex:1;color:var(--mute)}
.m-attr b{width:34px;text-align:right}
.m-plus,.m-plus img{width:24px;height:24px;display:block}
.m-plus:disabled{opacity:.3}
.m-points{margin-top:8px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.m-points b{color:#ffe07a;font-size:16px}
.m-attributes .m-reallot{margin-top:10px;align-self:flex-start;min-width:110px;height:30px;font-size:12px}
.m-attr-dialog .m-reallot-block{color:#ffbf9c}

/* Gear & Bag */
.m-gear{position:relative}
.m-doll{display:grid;grid-template-columns:50px 1fr 50px;gap:6px;align-items:center;width:300px;flex:none}
.m-doll-col{display:flex;flex-direction:column;gap:5px}
.m-eq,.m-bs{position:relative;background:url(/ui/mobile/islot.png?v=72510857d2f0baaf) 0 0/100% 100%;flex:none}
.m-eq{width:50px;height:50px}
.m-bs{width:44px;height:44px}
.m-eq .m-q,.m-bs .m-q{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.m-eq .m-it,.m-bs .m-it{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain}
.m-eq .item-slot-effect,.m-bs .item-slot-effect{inset:8%;border-radius:3px}
.m-eq-label{position:absolute;inset:0;display:grid;place-items:center;font:600 9px/1.1 var(--serif);color:#8a8578;text-align:center}
.m-plus-level{position:absolute;right:3px;bottom:2px;font:700 9px/1 system-ui;color:#ffe07a;text-shadow:0 1px 1px #000,0 0 2px #000}
.m-sel{position:absolute;inset:-5%;width:110%;height:110%;pointer-events:none}
.m-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;height:100%;min-height:0}
/* The engine fills this box with the card colour and fits the model inside, leaving the sides for held weapons. */
.m-preview{aspect-ratio:3/5;height:min(260px,calc(100% - 40px));max-width:100%;flex:none;touch-action:none;border-radius:4px;position:relative}
.m-noble{position:absolute;left:6px;top:6px;height:32px;width:auto;pointer-events:none}
/* setPreviewMask hides the stage layers under the panel so only the canvas model shows through its hole. */
.m-under-preview{visibility:hidden!important}
/* Nothing of the HUD may show through the preview hole. */
.m-root:has(:is(.m-sheet,.m-inspection):not([hidden])) :is(.m-bar,.m-strip,.m-chatbox,.m-plate,.m-menu,.m-vip,.m-mall,.m-pkmenu,.m-actions,.m-picker,.m-exp,.m-xpbar,.m-dm-btn,.m-sys){visibility:hidden}
.m-hero .m-who-name{font-size:13px;margin-top:4px}
.m-bag{flex:1;display:flex;flex-direction:column;min-width:0}
.m-bag-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:6px}
.m-bag-head>b{white-space:nowrap;margin-right:10px}
/* Four balances outgrow a small phone's header: each stays on one line and the list wraps to a second row. */
.m-money{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;align-items:center;color:var(--mute)}
.m-money>span{white-space:nowrap}
.m-money b{color:var(--ink)}
.m-bag-grid{display:grid;grid-template-columns:repeat(auto-fill,44px);gap:3px;overflow:auto;align-content:start;justify-content:start}
.m-pop{position:absolute;right:10px;top:4px;width:224px;max-height:calc(100% - 8px);overflow:auto;padding:12px 13px;z-index:5;background:url(/ui/mobile/tipbg.png?v=bf32ec6cb933e244) 0 0/100% 100%;border-radius:4px;box-shadow:0 8px 24px #000c}
.m-pop-name{font:700 14px var(--serif);color:#fff}
/* The desktop tooltip's colours (inventory.css .item-tooltip): quality names, plus-bonus stats, gems, blessing damage, enchanted HP, unmet requirements. */
.m-pop-name.quality-super{color:#ffff00}.m-pop-name.quality-refined{color:#5e87ca}.m-pop-name.quality-unique{color:#00ff00}.m-pop-name.quality-elite{color:#e804fd}
.m-pop .m-kv.m-pop-bonus>*{color:#ff00ff}.m-pop .m-kv.m-pop-gem>*{color:#00ff80}.m-pop .m-kv.m-pop-damage>*{color:#ff8000}.m-pop .m-kv.m-pop-enchant>*{color:#ffff00}
.m-pop .m-kv.m-pop-requirement-unmet>*,.m-pop-sub .m-pop-requirement-unmet{color:#ff3030}
.m-pop .m-kv[class*=m-pop-]>span{opacity:.85}
.m-pop-sub{font-size:11px;color:var(--mute);margin:2px 0 6px}
.m-pop .m-kv{font-size:11px}
.m-pop-desc{font-size:11px;color:#cfc6b0;margin-top:6px;line-height:1.35}
.m-pop-effect{font-size:11px;line-height:1.35;margin:4px 0}
.m-pop-actions{display:flex;gap:6px;margin-top:10px}
.m-pop-actions .m-btn{flex:1;min-width:0;padding:0;font-size:11px;height:28px}
.m-sheet .m-pop-actions{flex-direction:column}
.m-sheet .m-pop-actions .m-btn{flex:none;width:100%}

/* Skills and proficiency */
.m-skill-list{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;gap:7px;overflow:auto;align-content:start;min-height:0}
.m-skill{display:flex;gap:10px;align-items:center;padding:7px 10px;min-height:62px}
.m-skill.off{opacity:.55}
.m-ring{width:46px;height:46px;position:relative;flex:none}
.m-ring-bg{position:absolute;inset:0;width:100%;height:100%}
.m-skill-meta{flex:1;min-width:0}
.m-skill-meta b{font:600 12.5px system-ui;display:flex;justify-content:space-between;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-skill-meta b em{font-style:normal;color:#ffe07a}
.m-skill-meta small{display:block;font-size:10px;color:var(--mute);margin:1px 0 5px}
.m-progress{height:8px;background:url(/ui/mobile/prgbg.png?v=d9530cbb13098264) 0 0/100% 100%;padding:2px 3px}
.m-progress i{display:block;height:100%;background:url(/ui/mobile/prg.png?v=cf46bf3fc4e55c1f) 0 0/100% 100%}
.m-chip{font:700 10px system-ui;padding:3px 7px;border-radius:5px;background:var(--gold);color:#2b1d05;white-space:nowrap;flex:none}
.m-chip.add{background:#0007;color:var(--gold);border:1px dashed #e2c47c88}
.m-prof{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;gap:7px;overflow:auto;align-content:start;min-height:0}
.m-prof-row{display:flex;gap:9px;align-items:center;padding:8px 10px}
.m-prof-icon{width:42px;height:42px;display:grid;place-items:center;background:url(/ui/mobile/islot.png?v=72510857d2f0baaf) 0 0/100% 100%;flex:none}
.m-prof-icon img{max-width:32px;max-height:32px}

.m-inspection .m-sheet-body{padding:8px calc(var(--safe-r) + 8px) 10px calc(var(--safe-l) + 8px)}
.m-inspect-content{display:flex;gap:12px;flex:1;min-height:0}
.m-inspection .m-doll{width:45%;min-width:290px;min-height:0;grid-template-columns:50px minmax(0,1fr) 50px}
.m-inspect-details{flex:1;min-width:0;overflow:auto}
.m-inspect-details .m-pop{position:static;width:auto;max-height:none;overflow:visible;padding:10px 0 0;background:none;box-shadow:none}
.m-inspect-details .m-btn{height:28px;min-width:64px;font-size:11px}
.m-inspect-readonly{margin:12px 0 0;color:var(--gold)}
.m-inspection .m-who-name{max-width:100%;overflow-wrap:anywhere}
@media(max-width:600px) and (min-height:500px){
 .m-inspect-content{flex-direction:column;overflow:hidden}
 .m-inspection .m-doll{width:100%;min-width:0;min-height:306px;flex:none}
 .m-inspect-details{flex:1;min-height:0;overflow:auto}
}
@media(max-height:360px){
 .m-inspection .m-eq{width:42px;height:42px}
 .m-inspection .m-doll{grid-template-columns:42px minmax(0,1fr) 42px}
 .m-inspection .m-doll-col{gap:3px}
}

/* Inspected players' combat and Chi tabs share Status totals and remain read-only. */
.m-inspect-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.m-inspect-tabs .m-tab{flex:1;min-width:65px;width:auto;height:34px;font-size:12px}
.m-inspect-powers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:6px 0 12px}
.m-inspect-powers .m-tab{width:100%;height:32px;font-size:12px}
.m-inspect-subhead{margin-top:14px}.m-inspect-stat-note{font:11px/1.5 system-ui,sans-serif;color:var(--mute);margin:10px 0}
@media(orientation:portrait) and (max-width:600px){
.m-inspection{width:calc(100% * var(--m-scale));height:calc(100% * var(--m-scale));transform:scale(calc(1 / var(--m-scale)));transform-origin:0 0}
}
/* How many points to add to an attribute (mobile-sheet.js attributeDialogNode), centred over the Status page. */
.m-pop.m-attr-dialog{left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:250px;z-index:6;display:flex;flex-direction:column;gap:9px}
.m-attr-dialog-note{margin:0;font-size:12px;color:var(--mute)}
.m-attr-dialog-amount{display:flex;align-items:center;gap:6px}
.m-attr-dialog-amount .m-tin{flex:1;width:auto;min-width:0;text-align:center;font-size:14px;height:30px}
.m-sheet .m-attr-dialog .m-pop-actions{flex-direction:row;gap:8px;margin-top:2px}
.m-sheet .m-attr-dialog .m-pop-actions .m-btn{flex:1;width:auto;height:30px;font-size:12px}