/* One compact width for every nameplate (Ace, 2026-10-07: the owner panel's 250px, so five share its row):
   12 wide letters at 15px, 44px portrait, 10px gap, equal 10px side padding, 2px frame and a small
   font-fitting allowance. */
:root { --mb-nameplate-width:250px; }
.mb-character-identity,.mb-character-identity.mb-plate,button.mb-character-identity,.mb-plate-who {
    display:grid;grid-template-columns:minmax(0,1fr);gap:7px;
    box-sizing:border-box;width:var(--mb-nameplate-width);max-width:100%;min-width:0;
    flex:0 0 auto;padding:7px 10px;border:1px solid rgba(var(--mb-class-rgb,217,164,65),.45);
    border-radius:10px;background:rgba(var(--mb-class-rgb,217,164,65),.07);
    color:var(--mb-body);font-family:var(--mb-text);text-align:left;
}
.mb-identity-body {display:flex;align-items:center;gap:10px;min-width:0;}
.mb-identity-text {display:flex;flex-direction:column;flex:1;min-width:0;}
.mb-character-identity .mb-identity-name,.mb-plate-who .mb-identity-name {
    display:block;margin:0;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;
    overflow-wrap:anywhere;color:rgb(var(--mb-class-rgb,247,237,216));
    font:600 15px/1.25 var(--mb-text);letter-spacing:0;text-transform:none;
}
.mb-character-identity .mb-identity-race,.mb-character-identity .mb-identity-guild,
.mb-plate-who .mb-identity-race,.mb-plate-who .mb-identity-guild {
    display:block;margin:0;overflow:visible;text-overflow:clip;white-space:normal;
    overflow-wrap:anywhere;font:400 12px/1.3 var(--mb-text);letter-spacing:0;text-transform:none;
}
.mb-character-identity .mb-identity-guild,.mb-plate-who .mb-identity-guild {min-height:1.3em;color:var(--mb-green);}
.mb-character-identity .mb-armory-avatar,.mb-plate-who .mb-armory-avatar {display:block;flex:none;width:44px;height:44px;border-radius:9px;transform:none;margin:0;border-color:rgba(var(--mb-class-rgb,217,164,65),.7);}
.mb-character-identity .mb-armory-avatar-face,.mb-plate-who .mb-armory-avatar-face {display:block;width:38px;height:38px;margin:2px;border-radius:7px;}
.mb-character-identity .mb-armory-avatar-class,.mb-plate-who .mb-armory-avatar-class {width:17px;height:17px;right:-5px;bottom:-5px;}
.mb-character-identity .mb-armory-avatar-level,.mb-plate-who .mb-armory-avatar-level {min-width:17px;height:17px;left:-5px;bottom:-5px;border-radius:10px;font-size:10px;line-height:15px;}
.mb-identity-footer {display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-width:0;padding-top:6px;border-top:1px solid rgba(var(--mb-class-rgb,217,164,65),.2);}
.mb-identity-footer .mb-lic-tag {padding:0 4px;font:600 11px/15px var(--mb-text);letter-spacing:0;text-transform:none;}
.mb-identity-footer .mb-lic-tag.is-zero,.mb-identity-footer .mb-lic-tag.is-unknown {color:#aaa69e;}
/* A licence not held, and points still at 0, fade into the plate, so they read as nothing there (Ace, 2026-10-07). */
.mb-identity-footer .mb-lic-tag.is-zero,.mb-identity-footer .mb-identity-achievement.is-zero {opacity:.4;}
.mb-identity-achievement,.mb-identity-championship {display:inline-flex;align-items:center;gap:4px;max-width:100%;color:var(--mb-body);font:400 11px/16px var(--mb-text);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;}
.mb-identity-achievement svg,.mb-identity-championship svg {flex:none;width:13px;height:13px;fill:currentColor;}
.mb-identity-achievement.is-unknown,.mb-identity-achievement.is-zero {color:#aaa69e;}
.mb-identity-championship {color:var(--mb-gold-hi);}
/* The points sit in a box like the licence tags beside them, as tall as they are (Ace, 2026-10-07). */
.mb-identity-footer .mb-identity-achievement {padding:0 4px;border:1px solid currentColor;border-radius:4px;font-weight:600;line-height:15px;white-space:nowrap;}
button.mb-character-identity:hover,button.mb-character-identity:focus-visible {border-color:rgba(var(--mb-class-rgb,217,164,65),.85);background:rgba(var(--mb-class-rgb,217,164,65),.11);}
button.mb-character-identity:focus-visible {outline:2px solid var(--mb-gold);outline-offset:2px;}
.mb-character-identity[aria-current=true] {border-color:rgb(var(--mb-class-rgb,217,164,65));}
/* A character its owner hid (Ace, 2026-10-07: shown so a name reads as taken, "but if you have it hidden then don't
   allow inspection", with "some kind of hidden cross eyed cool looking design"): the plate under its name alone, in a
   violet veil with a slow sheen over fine hatching, and a crossed eye where the picture goes. It never opens
   (site.js), so it never looks pressable; hover only brightens the eye. */
.mb-character-identity.is-veiled,button.mb-character-identity.is-veiled:hover,button.mb-character-identity.is-veiled:focus-visible {
    --mb-class-rgb:168,150,230;
    position:relative;overflow:hidden;isolation:isolate;
    border-style:dashed;border-color:rgba(var(--mb-class-rgb),.5);
    background:rgba(18,14,31,.55) repeating-linear-gradient(135deg,rgba(var(--mb-class-rgb),.06) 0 5px,transparent 5px 10px);
}
/* The sheen moves by transform alone, so a list of a hundred hidden names costs no repainting. */
.mb-character-identity.is-veiled::before {
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(var(--mb-class-rgb),.14) 50%,transparent 70%);
    transform:translateX(-100%);animation:mb-veil-drift 8s linear infinite;
}
button.mb-character-identity.is-veiled {cursor:not-allowed;}
button.mb-character-identity.is-veiled:hover,button.mb-character-identity.is-veiled:focus-visible {border-color:rgba(var(--mb-class-rgb),.8);}
.mb-character-identity.is-veiled .mb-identity-name {color:#ddd5fb;}
.mb-character-identity.is-veiled .mb-identity-race {color:#a99fcd;font-style:italic;}
.mb-character-identity.is-veiled .mb-armory-avatar {display:grid;place-items:center;border-style:solid;border-color:rgba(var(--mb-class-rgb),.7);background:radial-gradient(circle at 50% 45%,#2c2349,#110d1d 75%);box-shadow:inset 0 0 10px rgba(var(--mb-class-rgb),.28);opacity:1;}
/* Its footer row holds one box with a padlock where the licences and points go, as tall as they are, so the plate
   stands as tall as every other (Ace, 2026-10-07: "make the nameplate the same size as normal nameplates"). */
.mb-character-identity.is-veiled .mb-veil-tag {display:inline-flex;align-items:center;gap:4px;padding:0 5px;border:1px dashed rgba(var(--mb-class-rgb),.6);border-radius:4px;color:#b9aee0;font:600 11px/15px var(--mb-text);letter-spacing:0;text-transform:none;white-space:nowrap;}
.mb-character-identity.is-veiled .mb-veil-tag svg {flex:none;width:12px;height:12px;fill:currentColor;fill-rule:evenodd;}
.mb-veil-eye {display:block;overflow:visible;}
.mb-veil-eye.is-plate {width:34px;height:34px;}
.mb-veil-eye .mb-veil-ring {fill:none;stroke:rgba(168,150,230,.45);stroke-width:1.5;stroke-dasharray:3 5;animation:mb-veil-turn 14s linear infinite;}
.mb-veil-eye .mb-veil-lid {fill:rgba(168,150,230,.1);stroke:#cfc4f7;stroke-width:3;stroke-linejoin:round;}
.mb-veil-eye .mb-veil-iris {fill:#a896e6;fill-opacity:.55;stroke:#cfc4f7;stroke-width:1.5;animation:mb-veil-glimmer 3.6s ease-in-out infinite;}
.mb-veil-eye .mb-veil-pupil {fill:#110d1d;}
.mb-veil-eye .mb-veil-cut {fill:none;stroke:#110d1d;stroke-width:10;stroke-linecap:round;}
.mb-veil-eye .mb-veil-slash {fill:none;stroke:#f1ecff;stroke-width:4;stroke-linecap:round;}
.mb-veil-eye.is-plate .mb-veil-slash {filter:drop-shadow(0 0 2px rgba(200,185,255,.9));}
button.mb-character-identity.is-veiled:hover .mb-veil-eye,button.mb-character-identity.is-veiled:focus-visible .mb-veil-eye {filter:drop-shadow(0 0 4px rgba(200,185,255,.75));}
@keyframes mb-veil-drift {to {transform:translateX(100%);}}
@keyframes mb-veil-glimmer {0%,100% {fill-opacity:.4;} 50% {fill-opacity:.95;}}
@keyframes mb-veil-turn {to {stroke-dashoffset:-64;}}
@media (prefers-reduced-motion:reduce) {.mb-character-identity.is-veiled::before,.mb-veil-eye .mb-veil-ring,.mb-veil-eye .mb-veil-iris {animation:none;}}
/* The search list centres its plates on the box's frame (Ace, 2026-10-07: "well fitted in the center"), a list shorter
   than a row too, since empty columns fold away: the room the scrollbar takes on the right is kept free on the left as
   well, and the list reaches 8px into the box's padding on both sides, so no width shows a column fewer than the old
   left-aligned list did. */
.mb-armory-results {grid-template-columns:repeat(auto-fit,minmax(min(var(--mb-nameplate-width),100%),var(--mb-nameplate-width)));justify-content:center;margin:0 -8px;padding:0 4px;scrollbar-gutter:stable both-edges;}
/* An owner panel account lays its head over the same columns as its cards, so the tag at the head's right ends on
   the last column's frame (Ace, 2026-10-07: "align the plate itself on the right side with the frame of the last
   player nameplate"). Both gaps are 8px, so the two grids count the same columns. */
.mb-armory-account {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--mb-nameplate-width),100%),var(--mb-nameplate-width)));column-gap:8px;}
.mb-armory-account > * {grid-column:1/-1;}
.mb-armory-cards {grid-template-columns:repeat(auto-fill,minmax(min(var(--mb-nameplate-width),100%),var(--mb-nameplate-width)));justify-content:start;gap:8px;}
.mb-armory-card {display:block;width:var(--mb-nameplate-width);max-width:100%;height:auto;padding:0;border:0;background:transparent;}
.mb-armory-card .mb-armory-card-plate {width:100%;max-width:100%;padding:7px 10px;}
/* The switch sits on the footer's row at its right end (Ace, 2026-10-07), laid over the plate rather than put in
   it, since a shown card's plate is a button; the footer keeps the track's width free for it. */
.mb-armory-card .mb-armory-card-switch {position:absolute;top:auto;right:5px;bottom:0;z-index:1;margin:0;display:block;width:max-content;}
.mb-armory-card .mb-identity-footer {padding-right:44px;}
.mb-armory-card:not([data-state=shown]) .mb-character-identity {opacity:.75;}
.mb-armory-who {flex-wrap:wrap;}
.mb-armory-who .mb-armory-plate {width:var(--mb-nameplate-width);padding:7px 10px;gap:7px;}
/* The empty window's plate is as tall as an open character's, which has a footer since 21.129: its race line and a
   footer row stay empty, so the Armory's row keeps its height whether a character is open or not, and the list beside
   it shows the same whole rows (Ace, 2026-10-07). A hidden character's plate brings its own footer. */
.mb-armory-character[data-empty="true"]:not(.is-veiled) .mb-armory-who .mb-identity-race {min-height:1.3em;}
.mb-armory-character[data-empty="true"]:not(.is-veiled) .mb-armory-who .mb-armory-plate::after {content:'';display:block;height:calc(15px + 2px);padding-top:6px;border-top:1px solid rgba(var(--mb-class-rgb,217,164,65),.2);}
.mb-plates {grid-template-columns:repeat(auto-fill,minmax(min(var(--mb-nameplate-width),100%),var(--mb-nameplate-width)));justify-content:start;}
.mb-plates .mb-plate {flex:none;}
.mb-id-character {flex-wrap:wrap;padding:8px 0;border:0;border-radius:0;background:transparent;}
.mb-id-character .mb-character-identity {flex:none;max-width:100%;}
.mb-id-character .mb-character-actions {margin-left:auto;}
#mb-transfer-character {display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#mb-transfer-character .mb-transfer-account-name {display:block;}
.mb-char-select.is-character {width:var(--mb-nameplate-width);max-width:100%;}
.mb-shop-form .mb-order {container-type:inline-size;}
.mb-shop-form .mb-order-head {align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;}
.mb-shop-form .mb-order-character {flex:0 1 var(--mb-nameplate-width);max-width:var(--mb-nameplate-width);}
.mb-shop-form .mb-order-head .mb-shop-remove {align-self:center;margin-top:24px;}
.mb-char-select.is-character select {position:absolute;inset:0;z-index:1;height:100%;min-height:0;opacity:0;appearance:none;}
.mb-char-select.is-character::after {content:'⌄';position:absolute;right:9px;bottom:9px;pointer-events:none;color:var(--mb-gold);font:18px/1 var(--mb-ui);}
.mb-char-pick:has(.mb-character-identity) {position:relative;inset:auto;padding:0;display:block;overflow:visible;}
.mb-char-pick .mb-character-identity {pointer-events:none;}
.mb-char-select:focus-within .mb-character-identity {outline:2px solid var(--mb-gold);outline-offset:2px;}
.mb-char-option:has(.mb-character-identity) {padding:0;background:transparent;}
.mb-char-list:has(.mb-character-identity) {min-width:0;}
.mb-char-list:has(.mb-character-identity) {padding:0;border:0;}
.mb-char-option:has(.mb-character-identity):focus .mb-character-identity,.mb-char-option[aria-selected=true] .mb-character-identity {outline:2px solid var(--mb-gold);outline-offset:-2px;}
.mb-cart-recipient:has(.mb-character-identity) {display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.mb-cart-recipient .mb-character-identity {margin-block:4px;}
.mb-shop-sidebar,.mb-shop-summary {grid-template-columns:minmax(0,1fr);}
.mb-shop-checkout,.mb-shop-summary,.mb-shop-summary-recipient {min-width:0;max-width:100%;}
@media(max-width:520px) {.mb-id-character .mb-character-actions {flex:1 1 100%;margin-left:0;}.mb-shop-character-caption {display:none!important;}}
@container(max-width:400px) {.mb-shop-form .mb-order-character {flex-basis:100%;}.mb-shop-form .mb-order-head .mb-shop-remove {margin-top:0;}}
@media(forced-colors:active) {.mb-char-select.is-character select {position:static;opacity:1;appearance:auto;}.mb-char-select.is-character::after {display:none;}}