.mg-profile-frame{position:relative;display:block;width:72px;height:72px;margin:12px 8px 16px;isolation:isolate;flex-shrink:0}
.profile-card .mg-profile-frame>#profile-pic{position:absolute;left:-7%;top:-7%;width:114%;height:114%;object-fit:cover;border:0;border-radius:3px;background:#0d1530}
.mg-profile-frame .mg-border-art{position:absolute;left:-25%;top:-25%;width:150%;height:150%;object-fit:contain;border:0;border-radius:0;background:none;pointer-events:none;z-index:2}
.mg-profile-frame .mg-border-glow{z-index:3;opacity:0;will-change:opacity;mask-image:radial-gradient(ellipse 13% 12% at 16% 84%,#000 40%,transparent 100%),radial-gradient(ellipse 13% 12% at 84% 84%,#000 40%,transparent 100%);filter:brightness(2.4) saturate(1.4) drop-shadow(0 0 3px #ffae24);animation:mg-lantern-glow 3.4s ease-in-out infinite}
.mg-profile-frame .mg-border-magic{z-index:3;opacity:0;clip-path:polygon(0 0,100% 0,100% 68%,0 68%);filter:brightness(1.3) drop-shadow(0 0 1px #b362ff);animation:mg-purple-glow 5.6s ease-in-out infinite}
.mg-profile-frame[data-border="none"] .mg-border-art{display:none}
.profile-card .mg-profile-frame[data-border="none"]>#profile-pic{inset:0;width:100%;height:100%;border:2px solid #f6941d;border-radius:10px}
#profile-border-change{padding:8px 12px;background:#149c36;border:2px solid #7fe29a;border-radius:7px;color:white;font:inherit;cursor:pointer}
#profile-border-note,#profile-border-picker-note{min-height:1.3em;margin:8px 0;color:#ffe08a;font-size:14px}
#profile-border-picker{width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box;padding:20px 22px;background:#0d1530 url("../assets/ui-icons/window-bg.png") center/100% 100%;border:4px solid #3fd0e8;border-radius:16px;box-shadow:0 0 0 2px rgba(13,21,48,.9),0 0 22px rgba(63,208,232,.45),0 12px 40px rgba(0,0,0,.75);color:white;font:15px/1.35 "MG VAG","Trebuchet MS",Arial,sans-serif}
#profile-border-picker::backdrop{background:rgba(0,0,0,.65)}#profile-border-picker h2{margin:0 28px 12px 0;color:#fff;font-size:28px;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 0 10px rgba(127,216,255,.85),0 2px 0 #0d1530;font-family:"MG VAG Bold","MG VAG",Arial,sans-serif;font-weight:normal}
#profile-border-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;max-height:300px;overflow:auto;padding:4px}
#profile-border-choices button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;background:#0d1530;border:2px solid rgba(63,208,232,.25);border-radius:8px;color:white;font:inherit;cursor:pointer}#profile-border-choices button[aria-pressed="true"]{border-color:#ffcc33;background:#14224a;box-shadow:0 0 0 2px #2fb52a}#profile-border-choices img,.mg-border-empty{width:84px;height:84px;object-fit:contain}.mg-border-empty{display:grid;place-items:center;font-size:36px;background:rgba(8,14,34,.72);border:2px solid rgba(63,208,232,.25);border-radius:8px}
#profile-border-change:focus-visible,#profile-border-choices button:focus-visible{outline:3px solid white;outline-offset:2px}
@keyframes mg-lantern-glow{0%,100%{opacity:.2}50%{opacity:1}}@keyframes mg-purple-glow{0%,100%{opacity:.03}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.mg-profile-frame .mg-border-glow,.mg-profile-frame .mg-border-magic{animation:none}.mg-profile-frame .mg-border-glow{opacity:.4}}

#settings-window .profile-card{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;column-gap:18px;row-gap:16px}#settings-window .profile-avatar{grid-column:1;grid-row:1;gap:0}#settings-window .profile-card>div:not(.profile-avatar):not(.profile-actions){grid-column:2;grid-row:1;min-width:0}#settings-window .profile-card .mg-profile-frame{margin:18px 20px;width:72px;height:72px}#settings-window .profile-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}#settings-window .profile-actions button{width:100%;margin:0;padding:10px 6px;white-space:nowrap}#settings-window #profile-name{display:block;overflow-wrap:anywhere}#settings-window #profile-stats{display:block;margin-top:6px}

.mg-profile-frame .mg-mvp-avatar{position:absolute;inset:0}
.mg-profile-frame .mg-mvp-avatar>#profile-pic{position:absolute;left:-7%;top:-7%;width:114%;height:114%;object-fit:cover;border:0;border-radius:3px;background:#0d1530}
.mg-profile-frame[data-border="none"] .mg-mvp-avatar>#profile-pic{inset:0;width:100%;height:100%;border:2px solid #f6941d;border-radius:10px}
.mg-mvp-animation{display:none;position:absolute;left:-25%;top:-25%;width:150%;height:150%;pointer-events:none;z-index:2}
.mg-profile-frame[data-border="alpha-mvp"] .mg-mvp-avatar{left:-25%;top:-25%;width:150%;height:150%;mask:url(../assets/profile-borders/alpha-mvp-aperture.png) center/100% 100% no-repeat;-webkit-mask:url(../assets/profile-borders/alpha-mvp-aperture.png) center/100% 100% no-repeat}
.mg-profile-frame[data-border="alpha-mvp"] .mg-mvp-avatar>#profile-pic{inset:0;width:100%;height:100%;border-radius:0}
.mg-profile-frame[data-border="alpha-mvp"] .mg-border-art{display:none}
.mg-profile-frame[data-border="alpha-mvp"] .mg-mvp-animation{display:block}

/* Match the blue Settings theme (same values as #profile-picker and #profile-change in map.css). */
#profile-border-picker .x-close{right:12px;top:12px;width:34px;height:34px;border:2px solid #fff;border-radius:10px;background:rgba(13,21,48,.85);color:#fff;font-size:24px}
#profile-border-picker .x-close:hover{background:#3fd0e8;color:#0d1530}
#profile-border-picker{scrollbar-color:#3fd0e8 rgba(13,21,48,.6)}
#profile-border-change{padding:10px 16px;border:2px solid #7fe29a;border-radius:10px;background:linear-gradient(#24b04a,#16912f);box-shadow:0 2px 0 rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(0,0,0,.3)}
#profile-border-change:hover{filter:brightness(1.1)}

/* Region borders (js/profile-borders.js): the Halloween lantern / purple glow layers are only for the Halloween border. */
.mg-profile-frame:not([data-border="halloween"]) .mg-border-glow,.mg-profile-frame:not([data-border="halloween"]) .mg-border-magic{display:none}