/* Approved UI2: responsive MMORPG HUD with illustrated metal frames and live meters. */
:root { --header-height:160px; }
.game-header { padding:10px 9px 12px; background:radial-gradient(ellipse at 30% 0,#18374855,transparent 70%),linear-gradient(150deg,#102430,#071a24); border-color:#33546a; }
.command-row { gap:8px; margin-bottom:11px; align-items:center; height:52px; }
.progress-panel { height:52px; padding:0; gap:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
.level-button { position:relative; z-index:2; display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; min-height:52px; padding:0; border:0; border-radius:50%; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23d5ebf6%22%2F%3E%3Cstop%20offset%3D%22.12%22%20stop-color%3D%22%23547c96%22%2F%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23f2f9ff%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%233b5b74%22%2F%3E%3Cstop%20offset%3D%22.53%22%20stop-color%3D%22%2390adc2%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23183348%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22%23acc6d7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337586f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gem%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23b6faff%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%232ee1ff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23087edd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23002b68%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22face%22%3E%3Cstop%20stop-color%3D%22%23183c4c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23061923%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2248%22%20fill%3D%22url%28%23metal%29%22%20stroke%3D%22%231b3548%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245.2%22%20fill%3D%22none%22%20stroke%3D%22%23ddf5ff%22%20stroke-width%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.7%22%20fill%3D%22%230a1c2b%22%20stroke%3D%22%23253c4c%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239.6%22%20fill%3D%22url%28%23face%29%22%20stroke%3D%22%234f849b%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.5%22%20fill%3D%22none%22%20stroke%3D%22%2323728a%22%20stroke-width%3D%22.5%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M50%2017%2055%2037%2073%2027%2063%2045%2083%2050%2063%2055%2073%2073%2055%2063%2050%2083%2045%2063%2027%2073%2037%2055%2017%2050%2037%2045%2027%2027%2045%2037Z%22%20fill%3D%22%23155568%22%20opacity%3D%22.28%22%20stroke%3D%22%23477b8b%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; box-shadow:0 3px 6px #0007; }
.level-button b { font-size:20px; letter-spacing:-1px; color:#fff1d5; font-weight:750; line-height:1; text-shadow:0 1px 3px #000; margin-left:-1px; }
.progress-meters { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; height:50px; min-width:0; margin-left:-20px; padding:3px 4px 3px 21px; gap:2px; border-radius:25px 9px 9px 25px; background:linear-gradient(155deg,#b8d4e6 0%,#37566c 19%,#d9ecf7 34%,#29485e 49%,#183549 68%,#94b4ca 85%,#304f63); box-shadow:0 2px 5px #0009,inset 0 0 0 1px #122c3e; }
.progress-meters::before { content:""; position:absolute; z-index:-1; inset:2px; background:#081725; border-radius:23px 7px 7px 23px; box-shadow:0 0 0 .6px #cae3f066; }
.progress-meters::after { content:""; pointer-events:none; position:absolute; right:-3px; top:20px; width:10px; height:10px; background:var(--hud-crystal) center/contain no-repeat; }
.status-meter,.progress-meters .energy { flex:1 1 0; height:auto; min-height:0; padding:0 7px 0 4px; border-radius:8px; border:1px solid #315d75; box-shadow:inset 0 1px 1px #ffffff18; overflow:hidden; }
.status-meter .bar,.energy .bar { inset:0; border:0; border-radius:0; background:linear-gradient(180deg,#072335,#0c3546 45%,#051822); box-shadow:inset 0 1px 3px #0009; }
.status-meter .bar i { border-radius:0 3px 3px 0; background:linear-gradient(180deg,#12566b,#178a9e 44%,#0c4457); box-shadow:inset 0 1px #69d7e95c; }
.xp-meter { border-color:#7950ae; }
.xp-meter .bar { background:linear-gradient(#171029,#281643,#0e1024); }
.xp-meter .bar i { background:linear-gradient(180deg,#b170ee 0%,#7942c4 22%,#6830b2 70%,#44216b 100%); box-shadow:inset 0 1px #f1c2ff9e,inset 0 -1px #aa54fc77; }
.xp-meter .bar::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(130deg,transparent 0 15px,#b292d10d 16px 18px,transparent 19px 38px); pointer-events:none; }
.status-meter .meter-label,.energy>.meter-label { width:18px; margin-right:1px; font-size:9px; letter-spacing:.1px; color:#eee7ff; }
.status-meter b,.energy b { font-size:10px; letter-spacing:-.25px; color:#f0f6ff; text-shadow:0 1px 3px #000; }
#energyIcon { color:#388594; }
#energyIcon .ui-icon { width:13px; height:15px; fill:currentColor; stroke:none; }
.header-actions { gap:6px; }
.header-icon-button { width:52px; height:52px; padding:12px; border:2px solid #547e98; border-radius:10px; background:linear-gradient(140deg,#17384a,#092330 70%); box-shadow:inset 0 0 0 1px #0a2434,inset 0 0 0 2px #b4d4e333,inset 0 1px 2px #e6f5ffbd,0 2px 4px #0008; }
.header-icon-button svg { width:25px; height:25px; filter:drop-shadow(0 1px 1px #0008); }
.wallet { gap:7px; }
.wallet .resource-button { position:relative; isolation:isolate; min-height:75px; padding:10px 3px 10px; gap:3px; border:0; border-radius:8px; background:radial-gradient(ellipse at 50% 40%,#20506388,transparent 65%),repeating-linear-gradient(130deg,#25424f08 0 1px,transparent 1px 4px),linear-gradient(150deg,#123745,#071c29); box-shadow:0 3px 7px #0007; }
.wallet .resource-button::before { content:""; position:absolute; inset:-1px; pointer-events:none; border:10px solid transparent; border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23d5ebf6%22%2F%3E%3Cstop%20offset%3D%22.12%22%20stop-color%3D%22%23547c96%22%2F%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23f2f9ff%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%233b5b74%22%2F%3E%3Cstop%20offset%3D%22.53%22%20stop-color%3D%22%2390adc2%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23183348%22%2F%3E%3Cstop%20offset%3D%22.83%22%20stop-color%3D%22%23acc6d7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2337586f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22gem%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23b6faff%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%232ee1ff%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23087edd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23002b68%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22face%22%3E%3Cstop%20stop-color%3D%22%23183c4c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23061923%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M7%201H93L99%207V93L93%2099H7L1%2093V7Z%22%20fill%3D%22%23102b3d%22%20stroke%3D%22%23172737%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%202H93L98%207V93L93%2098H7L2%2093V7Z%22%20fill%3D%22none%22%20stroke%3D%22url%28%23metal%29%22%20stroke-width%3D%223.6%22%2F%3E%3Cpath%20d%3D%22M9%205H91L95%209V91L91%2095H9L5%2091V9Z%22%20fill%3D%22none%22%20stroke%3D%22%23bed8e7%22%20stroke-width%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M10%207H90Q93%207%2093%2010V90Q93%2093%2090%2093H10Q7%2093%207%2090V10Q7%207%2010%207Z%22%20fill%3D%22none%22%20stroke%3D%22%23123c52%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M9%2012%2012%209H23M77%209H88L91%2012M9%2088%2012%2091H23M77%2091H88L91%2088%22%20fill%3D%22none%22%20stroke%3D%22%236b95a7%22%20stroke-width%3D%22.7%22%2F%3E%3C%2Fsvg%3E") 14 / 10px / 0 stretch; }
.wallet .resource-button::after { content:""; position:absolute; bottom:-4px; left:calc(50% - 5px); width:10px; height:10px; background:var(--hud-crystal) center/contain no-repeat; pointer-events:none; }
.wallet .resource-button:hover { background:radial-gradient(ellipse at 50% 40%,#34677a88,transparent 70%),linear-gradient(150deg,#174253,#0b2431); }
.wallet .resource-button .ui-art { width:34px; height:32px; filter:drop-shadow(0 0 5px #24c4e024) drop-shadow(0 2px 2px #0008); }
.wallet .currency .ui-art,.wallet .stars .ui-art { filter:drop-shadow(0 0 5px #ffb71c2d) drop-shadow(0 2px 2px #0008); }
.wallet .resource-button b { font-size:clamp(11px,3.1vw,15px); letter-spacing:-.4px; line-height:1.25; }
.wallet .home b { font-size:clamp(11px,3vw,14px); }
@media(max-width:350px) {
 .game-header { padding-left:6px; padding-right:6px; }
 .command-row { gap:6px; }
 .header-actions { gap:4px; }
 .header-icon-button { width:46px; height:52px; padding:10px; }
 .wallet { gap:6px; }
 .wallet .resource-button { padding:10px 1px; }
 .wallet .resource-button b,.wallet .home b { font-size:10px; letter-spacing:-.4px; }
 .status-meter b,.energy b { font-size:9px; letter-spacing:-.35px; }
 .status-meter .meter-label,.energy>.meter-label { width:15px; font-size:8px; }
}

/* One shared faceted crystal; all placements preserve the same proportions. */
:root { --hud-crystal:url('/assets/ui-mmorpg/crystal.svg'); }
.level-button::before,.level-button::after { content:""; position:absolute; top:calc(50% - 6px); width:10px; height:12px; background:var(--hud-crystal) center/contain no-repeat; pointer-events:none; }
.level-button::before { left:-3px; }
.level-button::after { right:-3px; }
.progress-meters::after { top:calc(50% - 6px); width:10px; height:12px; }
.wallet .resource-button::after { width:10px; height:12px; bottom:-5px; }
.frame-crystals { position:absolute; inset:0; pointer-events:none; }
.frame-crystals i { position:absolute; display:block; width:10px; height:12px; background:var(--hud-crystal) center/contain no-repeat; }
.frame-crystals .tl { top:-3px; left:-2px; }
.frame-crystals .tr { top:-3px; right:-2px; }
.frame-crystals .bl { bottom:-3px; left:-2px; }
.frame-crystals .br { bottom:-3px; right:-2px; }
/* Optical centering: numerals and labels share the exact track center. */
.status-meter b,.energy b { position:absolute; inset:0 7px 0 auto; display:flex; align-items:center; justify-content:flex-end; height:100%; padding-top:1px; line-height:1; margin:0; transform:translateY(.35px); }
.status-meter .meter-label,.energy>.meter-label { align-self:stretch; display:flex; align-items:center; justify-content:center; padding-top:1px; line-height:1; transform:translateY(.35px); }
#energyIcon { color:#72c9d7; filter:drop-shadow(0 1px 1px #04232a); }
#energyIcon .ui-icon { width:14px; height:16px; }
#settingsButton svg { stroke-width:1.65; stroke-linejoin:round; }
/* Crystal-glass fill: mirrored top rim, deeper middle, reflected lower edge. */
.status-meter .bar i { position:relative; overflow:hidden; background:linear-gradient(180deg,#87e0e5 0%,#359db1 11%,#147d94 42%,#084459 50%,#117790 82%,#50bac7 100%); box-shadow:inset 0 1px #d9ffffaa,inset 0 -1px #7ed6e396,0 0 6px #10acc65c; }
.xp-meter .bar i { background:linear-gradient(180deg,#e4b9ff 0%,#ab75e6 10%,#8342c4 42%,#48136f 50%,#792abb 80%,#bd6fee 100%); box-shadow:inset 0 1px #f7e3ffcc,inset 0 -1px #d599ff99,0 0 7px #9b3fea66; }
.status-meter .bar i::before { content:""; position:absolute; inset:1px 0; border-radius:inherit; background:linear-gradient(115deg,transparent 0 14%,#ffffff18 15% 18%,transparent 19% 40%,#ffffff20 41% 43%,transparent 44% 73%,#ffffff10 74% 80%,transparent 81%),linear-gradient(180deg,#ffffff20,transparent 44%,#0000001a 50%,transparent 75%); pointer-events:none; }
.status-meter .bar i::after { content:""; position:absolute; top:0; bottom:0; width:65%; left:0; background:linear-gradient(110deg,transparent 25%,#ffffff0a 37%,#ffffff3b 48%,#ffffff08 60%,transparent 75%); transform:translateX(-155%); animation:hud-glass-shimmer 8s ease-in-out infinite; pointer-events:none; }
.energy .bar i::after { animation-delay:1.8s; }
@keyframes hud-glass-shimmer { 0%,35% { transform:translateX(-155%); opacity:0; } 45% { opacity:.7; } 72% { transform:translateX(190%); opacity:0; } 100% { transform:translateX(190%); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .status-meter .bar i::after { animation:none; opacity:0; } }
/* Revision 3: illustrated metal sockets and inlaid jewels from the approved reference. */
:root { --header-height:170px; --hud-crystal:url('/assets/ui-mmorpg/crystal-mounted.webp'); }
.wallet .resource-button,.wallet .resource-button:hover,.wallet .resource-button:active { min-height:85px; padding:12px 5px 15px; gap:3px; border:0; border-radius:0; background:url('/assets/ui-mmorpg/resource-frame.webp') center / 100% 100% no-repeat; box-shadow:none; }
.wallet .resource-button:hover { filter:brightness(1.1); }
.wallet .resource-button::before,.wallet .resource-button::after,.frame-crystals { display:none; }
.wallet .resource-button .ui-art { width:34px; height:32px; }
.wallet .resource-button b { font-size:clamp(10px,3vw,14px); }
.wallet .home b { font-size:clamp(10px,3vw,14px); }
.level-button::before { left:-1px; }
.level-button::after { right:-1px; }
.level-button::before,.level-button::after,.progress-meters::after { width:10px; height:12px; filter:drop-shadow(0 1px 1px #000a); }
@media(max-width:350px) {
 .wallet .resource-button { padding:12px 3px 15px; }
 .wallet .resource-button b,.wallet .home b { font-size:9.5px; letter-spacing:-.45px; }
}
/* Revision 4: one illustrated frame; fixed end slices preserve the round medallion.
   Only the straight middle stretches. Text, fills and click targets remain live. */
.progress-panel { position:relative; isolation:isolate; }
.progress-panel::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
 background-image:url('/assets/ui-mmorpg/level-frame-left.webp'),url('/assets/ui-mmorpg/level-frame-right.webp'),url('/assets/ui-mmorpg/level-frame-middle.webp');
 background-position:left top,right top,60px top;
 background-size:60px 52px,15px 52px,calc(100% - 75px) 52px;
 background-repeat:no-repeat;
}
/* The upper frame reuses the LOWER frame artwork, at its original scale.
   Offset by exactly one 21px row; clip out the round level medallion. */
.progress-panel::after { content:""; position:absolute; left:0; right:0; top:4px; height:24px; z-index:-1; pointer-events:none;
 background-image:url('/assets/ui-mmorpg/level-frame-left.webp'),url('/assets/ui-mmorpg/level-frame-right.webp'),url('/assets/ui-mmorpg/level-frame-middle.webp');
 background-position:left -25px,right -25px,60px -25px;
 background-size:60px 52px,15px 52px,calc(100% - 75px) 52px;
 background-repeat:no-repeat;
 clip-path:inset(2px 1px 0 52px round 8px);
}
.level-button,.level-button:hover,.level-button:active { background:transparent; box-shadow:none; }
.level-button::before,.level-button::after,.progress-meters::before,.progress-meters::after { display:none; }
.level-button b { font-size:19px; letter-spacing:-.8px; margin:0; }
.progress-meters { height:52px; margin-left:0; padding:10px 11px 7px 3px; gap:7px; background:none; box-shadow:none; border-radius:0; }
.status-meter,.progress-meters .energy { border:0; border-radius:7px; padding-left:5px; box-shadow:none; }
.status-meter .bar,.energy .bar { background:transparent; box-shadow:none; }
.status-meter b,.energy b { padding-top:0; transform:none; right:5px; }
.status-meter .meter-label,.energy>.meter-label { padding-top:0; transform:none; }
#energyIcon .ui-icon { width:11px; height:13px; }
.level-button:hover { filter:brightness(1.15); }
/* Revision 5: level horizontal glass edges, optical text centering, matching actions. */
.status-meter .bar i { position:absolute; top:0; bottom:0; left:0; height:auto; border-radius:0; background:linear-gradient(180deg,#65c3d0 0%,#2894ab 20%,#11627e 58%,#187b93 84%,#48abbc 100%); box-shadow:inset 0 1px #b5f3f566,inset 0 -1px #64c2d166; }
.xp-meter .bar i { background:linear-gradient(180deg,#c594f2 0%,#9b62d9 20%,#6e32ac 58%,#8044be 84%,#ae75db 100%); box-shadow:inset 0 1px #edceff77,inset 0 -1px #ca91f166; }
.status-meter .bar i::before { inset:0; background:linear-gradient(180deg,#ffffff16,transparent 45%,transparent); }
.xp-meter .bar::after { display:none; }
.status-meter .bar i::after { background:linear-gradient(90deg,transparent,#ffffff16,transparent); }
.status-meter b,.energy b,.status-meter .meter-label,.energy>.meter-label { transform:translateY(1px); }
.header-actions { height:52px; align-items:flex-end; padding-bottom:1px; }
.header-icon-button { width:47px; height:47px; min-height:47px; padding:11px; border:0; border-radius:9px; background:url('/assets/ui-mmorpg/action-frame.webp') center/100% 100% no-repeat; box-shadow:none; }
.header-icon-button:hover { filter:brightness(1.12); }
.header-icon-button svg { width:23px; height:23px; }
/* Revision 6: keep live paint inside the illustrated cyan inner lip. */
.status-meter .bar,.energy .bar { inset:1.5px 1px .5px; border-radius:6px; overflow:hidden; }
.status-meter b,.energy b,.status-meter .meter-label,.energy>.meter-label { transform:translateY(2px); }
#friendsButton svg { stroke:url('#friendsMetal'); }
#settingsButton svg { stroke:url('#settingsMetal'); }
.header-icon-button svg { filter:drop-shadow(0 1px .35px #020e18) drop-shadow(0 0 2px #90d8ff35) drop-shadow(0 0 4px #50bded15); }
.level-button b { color:#dfeff9; background:linear-gradient(180deg,#fbfeff 0%,#d3e5f0 35%,#92b3c8 51%,#edf8ff 66%,#a4c4d8 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 1px .5px #020c17) drop-shadow(0 0 2px #9fdcff70) drop-shadow(0 0 4px #63c1f033); }
/* Revision 7: the illustrated left recess begins 1.5px before the text button.
   One clipping surface follows that recess; a second button clip cut its curve. */
.status-meter,.progress-meters .energy { overflow:visible; border-radius:0; }
.status-meter .bar,.energy .bar { inset:1px 1px 0 -1.5px; border-radius:6.5px; overflow:hidden; }
/* SVG geometry is already centered: do not apply the text baseline correction. */
.energy>#energyIcon { position:absolute; top:1px; bottom:0; left:5px; width:18px; height:auto; margin:0; padding:0; transform:none; align-items:center; justify-content:center; }
#energyIcon .ui-icon { display:block; flex:none; }
/* Lighter, slightly smaller typography requested during revision 7 review. */
.status-meter b,.energy b { font-size:9.5px; font-weight:500; letter-spacing:0; }
.status-meter .meter-label { font-size:8.5px; font-weight:500; }
.wallet .resource-button b,.wallet .home b { font-size:clamp(10px,2.9vw,13px); font-weight:500; letter-spacing:-.2px; }
.wallet .resource-button,.wallet .resource-button:hover,.wallet .resource-button:active { gap:0; padding-bottom:18px; }
.level-button b { font-weight:650; }
@media(max-width:350px) {
 .status-meter b,.energy b { font-size:9px; letter-spacing:-.2px; }
 .wallet .resource-button b,.wallet .home b { font-size:9.5px; letter-spacing:-.3px; }
}
/* One concentric geometry for both tracks: outer lip R7.5, 1px border,
   1px unpainted gutter on ALL sides, then fill R5.5. No one-sided offsets. */
.status-meter::before { content:""; position:absolute; pointer-events:none; inset:0 0 -1px -2.5px; border:1px solid #28516b; border-radius:7.5px; background:#041522; box-shadow:0 0 0 .5px #03121a; }
.status-meter .bar,.energy .bar { inset:2px 2px 1px -.5px; border-radius:5.5px; }
.status-meter b,.energy b { font-size:9px; }
.status-meter .meter-label { font-size:8px; }
.wallet .resource-button b,.wallet .home b { font-size:clamp(9px,2.65vw,12px); }
.level-button b { font-size:17px; letter-spacing:-.5px; }
.wallet .resource-button .ui-art { filter:drop-shadow(0 2px 2px #0008) drop-shadow(0 0 3px #ffdba226) drop-shadow(0 0 6px #81dbed14); }
.wallet .currency .ui-art,.wallet .stars .ui-art { filter:drop-shadow(0 2px 2px #0008) drop-shadow(0 0 3px #ffdf8030) drop-shadow(0 0 6px #ffc34a18); }
@media(max-width:350px) {
 .status-meter b,.energy b { font-size:8.5px; }
 .wallet .resource-button b,.wallet .home b { font-size:9px; }
}

/* City revision: darker metal matches the bottom navigation; live content stays bright. */
.game-header { background:linear-gradient(180deg,#0d1c23,#060e13); border-color:#1b303a; }
.progress-panel::before,.progress-panel::after { filter:brightness(.74) saturate(.7); }
.header-icon-button { position:relative; isolation:isolate; background:none; }
.header-icon-button::before { content:""; position:absolute; inset:0; z-index:-1; background:url('/assets/ui-mmorpg/action-frame.webp') center/100% 100% no-repeat; filter:brightness(.74) saturate(.7); pointer-events:none; }
.wallet .resource-button,.wallet .resource-button:hover,.wallet .resource-button:active { background:none; }
.wallet .resource-button::before { content:""; display:block; position:absolute; inset:1px 0; z-index:-1; border:0; border-image:url('/assets/ui-mmorpg/resource-frame.webp') 80 80 128 fill / 8px 8px 12px / 0 stretch; background:none; filter:brightness(.74) saturate(.65); pointer-events:none; }

/* Shared left axis for the experience spark and energy bolt; rounded HUD retained. */
.game-header { box-shadow:0 5px 14px rgba(0,0,0,.5); }
.status-meter>#xpIcon,.energy>#energyIcon { position:absolute; top:1px; bottom:0; left:1px; width:16px; height:auto; margin:0; padding:0; transform:none; display:flex; align-items:center; justify-content:center; }
#xpIcon { color:#b9a0d4; }
#xpIcon .ui-icon { display:block; flex:none; width:11px; height:11px; fill:currentColor; stroke:none; }
#energyIcon .ui-icon { display:block; flex:none; width:11px; height:13px; }