/* Approved arcade pearl/gold artwork. Keep all existing controls and handlers. */
body.newmagic > header:has(> .header-tools) > .header-tools {
 position:relative;isolation:isolate;box-sizing:border-box;width:744px;max-width:100%;height:70px;min-height:0;padding:7px 9px;gap:7px;flex-wrap:nowrap;
 background:linear-gradient(180deg,var(--nm-toolbar-pearl) 0%,var(--nm-toolbar-pearl-shade) 8%,#fffdf1 43%,#e3d5bd 100%);border:2px solid var(--nm-toolbar-border);border-radius:20px;
 box-shadow:inset 0 2px 1px #fff,inset 0 -3px 2px #aa834842,0 2px 0 #805b3d,0 0 0 2px #fff4c77a;
}
body.newmagic > header:has(> .header-tools) > .header-tools::before,
body.newmagic > header:has(> .header-tools) > .header-tools::after {content:'';position:absolute;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,#fff,#e9bd62,#fff,transparent);z-index:-1;pointer-events:none}
body.newmagic > header:has(> .header-tools) > .header-tools::before {top:2px}
body.newmagic > header:has(> .header-tools) > .header-tools::after {bottom:2px}
body.newmagic > header:has(> .header-tools) .header-tools > label {display:flex;flex:0 0 auto;gap:5px;font-size:11px;color:#7d4c35;font-weight:700;text-shadow:0 1px #fff;white-space:nowrap}
body.newmagic > header:has(> .header-tools) .header-tools > label:has(#adminLanguage) {order:0}
body.newmagic > header:has(> .header-tools) #lobbySound {order:1;box-sizing:border-box;display:grid;place-items:center;width:29px;height:29px;min-height:29px;flex:0 0 29px;padding:4px;border:1px solid #a97528;border-radius:50%;background:radial-gradient(ellipse at 28% 18%,#fff9d6,#ffdb70 37%,#eeb348 74%,#b58224);color:#86511d;box-shadow:inset 0 0 0 2px #ffe8a3,inset 0 -3px 2px #b0792b66,0 2px 2px #8b5a2533}
body.newmagic > header:has(> .header-tools) #lobbySound svg {width:18px;height:18px}
body.newmagic > header:has(> .header-tools) .header-tools > label:not(:has(#adminLanguage)) {order:2}
body.newmagic > header:has(> .header-tools) .header-tools select {appearance:none;box-sizing:border-box;height:36px;min-height:36px;min-width:0;width:106px;padding:0 24px 0 10px;background:#fffcf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238b7f96'%3E%3Cpath d='m2 4 3 3 3-3'/%3E%3C/svg%3E") right 8px center/10px no-repeat;border:1px solid #bca277;border-radius:9px;box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 #e0cfb2,0 1px 0 #fff9;color:#563350;font:700 12px/1.3 var(--nm-font-ui)}
body.newmagic > header:has(> .header-tools) .header-tools select[aria-label="貨幣"] {width:98px}
body.newmagic > header:has(> .header-tools) .header-tools select option {background:#fffcf2;color:#563350}
body.newmagic > header:has(> .header-tools) .header-tools .quota {order:3;position:relative;flex:1 1 176px;width:auto;min-width:176px;height:52px;gap:0;padding:3px 10px;overflow:hidden;border:2px solid #b68b38;border-radius:12px;background:linear-gradient(130deg,var(--nm-toolbar-quota-start),var(--nm-toolbar-quota-middle) 58%,var(--nm-toolbar-quota-end));box-shadow:inset 0 1px 0 #fff7b566,inset 0 0 0 1px #f7dc9944,0 1px 0 #fff}
body.newmagic > header:has(> .header-tools) .header-tools .quota::after {content:'';position:absolute;inset:1px 3px auto;height:19px;border-radius:8px;background:linear-gradient(180deg,#ffffff28,transparent);pointer-events:none}
body.newmagic > header:has(> .header-tools) .header-tools .quota small {position:relative;z-index:1;color:#f0dfbb;font:600 10px/14px var(--nm-font-ui);letter-spacing:0}
body.newmagic > header:has(> .header-tools) .header-tools .quota b {position:relative;z-index:1;display:block;border:0;background:none;padding:0;margin:0;color:var(--nm-toolbar-balance-ink);font:800 24px/28px var(--nm-font-numeric);font-variant-numeric:tabular-nums;letter-spacing:.1px;text-shadow:0 1px 0 #8c5a32}
body.newmagic > header:has(> .header-tools) #account {order:4;position:relative;display:flex;align-items:center;gap:5px;flex:0 0 auto;width:auto;max-width:160px;height:36px;min-height:36px;padding:4px 9px 4px 5px;border:1px solid #b99d6c;border-radius:18px;background:linear-gradient(180deg,#fffef8,#f4e8d6 52%,#e7d2b6);color:#75425f;box-shadow:inset 0 1px #fff,inset 0 -2px #b7997238,0 1px #fff;white-space:nowrap}
body.newmagic > header:has(> .header-tools) #account[hidden] {display:none}
body.newmagic > header:has(> .header-tools) #account .account-avatar {display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border:1px solid #b18baa;border-radius:50%;background:linear-gradient(#faeffa,#e3cbe5);box-shadow:none;color:#875280}
body.newmagic > header:has(> .header-tools) .account-avatar svg {width:18px;height:18px}
body.newmagic > header:has(> .header-tools) #accountName {font:700 11px/1.3 var(--nm-font-ui);max-width:118px}
body.newmagic > header:has(> .header-tools) .header-tools :is(button,select):focus-visible {outline:2px solid #8d42ad;outline-offset:3px}
@media(min-width:761px) and (max-width:1100px) {
 body.newmagic > header:has(> .header-tools) .header-tools > label {font-size:0;gap:0}
 body.newmagic > header:has(> .header-tools) .header-tools select {width:94px}
 body.newmagic > header:has(> .header-tools) .header-tools select[aria-label="貨幣"] {width:84px}
 body.newmagic > header:has(> .header-tools) .header-tools .quota {min-width:164px}
 body.newmagic > header:has(> .header-tools) .header-tools .quota b {font-size:21px}
}
@media(min-width:761px) and (max-width:900px) {
 body.newmagic > header:has(> .header-tools) #accountName {display:none}
 body.newmagic > header:has(> .header-tools) #account {flex:0 0 36px;width:36px;padding:4px}
}
@media(max-width:760px) {
 body.newmagic > header:has(> .header-tools) > .header-tools {width:auto;height:64px;gap:4px;padding:0;border:0;background:none;box-shadow:none}
 body.newmagic > header:has(> .header-tools) > .header-tools::before,body.newmagic > header:has(> .header-tools) > .header-tools::after {display:none}
 body.newmagic > header:has(> .header-tools) .header-tools > label,body.newmagic > header:has(> .header-tools) #lobbySound {display:none}
 body.newmagic > header:has(> .header-tools) .header-tools .quota {display:flex!important;flex:1 1 auto;width:126px;min-width:0;height:48px;padding:4px 7px}
 body.newmagic > header:has(> .header-tools) .header-tools .quota small {font-size:9px;line-height:14px}
 body.newmagic > header:has(> .header-tools) .header-tools .quota b {font-size:clamp(13px,3.6vw,17px);line-height:20px;letter-spacing:0}
 body.newmagic > header:has(> .header-tools) #account {flex:0 0 34px;width:34px;min-width:34px;max-width:34px;height:36px;min-height:36px;padding:3px}
 body.newmagic > header:has(> .header-tools) #accountName {display:none}
}
body.newmagic:has(:is(#loginForm,#firstLoginForm)) > header > .header-tools {width:auto;height:auto;padding:8px 10px}
body.newmagic:has(:is(#loginForm,#firstLoginForm)) .header-tools .quota {display:none!important}
body.newmagic > header:has(> .header-tools) .header-tools #adminLanguage {height:36px;min-height:36px;width:106px;min-width:0;padding:0 24px 0 10px;background:#fffcf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238b7f96'%3E%3Cpath d='m2 4 3 3 3-3'/%3E%3C/svg%3E") right 8px center/10px no-repeat;border:1px solid #bca277;border-radius:9px;color:#563350;font:700 12px/1.3 var(--nm-font-ui)}
@media(min-width:761px) and (max-width:1100px) {body.newmagic > header:has(> .header-tools) .header-tools #adminLanguage {width:94px}}
/* Center the standalone account medallion independently of text-button padding. */
body.newmagic > header:has(> .header-tools) #account {justify-content:center}
body.newmagic > header:has(> .header-tools) #account .account-avatar {margin:0;line-height:1}
body.newmagic > header:has(> .header-tools) .account-avatar svg {display:block;transform:translateY(-1px)}
@media(max-width:900px) {body.newmagic > header:has(> .header-tools) #account {padding:0;gap:0}}