/* Aetheria Ascend — high definition RPG HUD, vector abilities and battle interface.
   Presentation-only UI in the ABOUT THE GAME concept carousel. */
.world-visual .image-border{container-type:inline-size;isolation:isolate}
.world-visual{--hud-accent:#d9c48a;--hud-glow:#81ddfc;--hud-panel:rgba(9,20,37,.9)}
.world-visual[data-tone="celestial"]{--hud-accent:#f2dcab;--hud-glow:#d9b4ff}
.world-visual[data-tone="ember"]{--hud-accent:#ffba73;--hud-glow:#ff8050}
.world-visual[data-tone="golden"]{--hud-accent:#ffe298;--hud-glow:#ffda75}
.world-visual[data-tone="arcane"]{--hud-accent:#d8baff;--hud-glow:#b680ff}
.world-visual[data-tone="frost"]{--hud-accent:#c3f1ff;--hud-glow:#82dffc}
.world-visual .rpg-ui{
  position:absolute;inset:4px;z-index:5;pointer-events:none;
  color:#f9f6ee;font-family:var(--sans);
  font-size:clamp(6px,1.25cqw,12px);
  text-shadow:0 1px 2px #081525,0 0 3px #081525;
}
.rpg-ui svg,.rpg-ui img{display:block}
.rpg-ui svg{overflow:visible}
.rpg-ui .rpg-status{
  position:absolute;left:clamp(4px,1cqw,9px);top:clamp(4px,.9cqw,8px);
  display:flex;align-items:flex-start;gap:clamp(5px,.95cqw,9px);
  padding:clamp(3px,.55cqw,5px) clamp(6px,1.35cqw,13px) clamp(6px,.9cqw,8px) clamp(3px,.55cqw,5px);
  background:linear-gradient(90deg,#10182cfa 1%,#102a48f0 63%,#15283d1c 100%);
  border-left:2px solid var(--hud-accent);
  border-top:1px solid #d6cfb175;
  border-radius:21px 7px 6px 21px;
  box-shadow:0 3px 9px #07101eae,0 0 16px #0c294477 inset;
}
.rpg-ui .rpg-avatar{
  position:relative;flex:0 0 auto;
  display:grid;place-items:center;
  width:clamp(28px,8cqw,58px);height:clamp(28px,8cqw,58px);
  background:radial-gradient(circle at 32% 24%,#d7e8fb 4%,#597eae 37%,#1b315d 79%);
  border:2px solid #f7df9a;border-radius:50%;
  box-shadow:0 0 0 2px #1c3954,0 0 0 3px #f9efc596,inset 0 0 13px #162b5b9e,0 3px 10px #08111fcc;
}
.rpg-ui .rpg-avatar svg{width:71%;height:71%;filter:drop-shadow(0 0 5px var(--hud-glow))}
.rpg-ui .avatar-spark{position:absolute!important;inset:-3px;border-radius:50%;border-top:2px solid #fff4ce99;transform:rotate(35deg)}
.rpg-ui .rpg-health{width:clamp(91px,22.5cqw,191px);display:flex;flex-direction:column;gap:clamp(1px,.3cqw,3px);padding-top:1px}
.rpg-ui .rpg-nameplate{display:flex;align-items:center;gap:clamp(3px,.7cqw,7px);white-space:nowrap;line-height:1.15;overflow:hidden}
.rpg-nameplate b{color:#ffdd8e;font:700 clamp(6px,1.45cqw,13px)/1.15 var(--serif);letter-spacing:.01em;white-space:nowrap}
.rpg-nameplate strong{font:700 clamp(7px,1.55cqw,15px)/1.15 var(--sans);color:#f8fcff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpg-nameplate .nameplate-star{color:var(--hud-accent);font-size:clamp(6px,1cqw,11px);margin-left:auto;flex:none}
.rpg-ui .rpg-stat{display:flex;gap:2px;align-items:center;min-width:0}
.rpg-ui .stat-symbol{width:clamp(7px,1.8cqw,15px);flex:none;display:inline-grid;place-items:center;font-size:clamp(8px,1.55cqw,15px);font-weight:900}
.rpg-ui .hp-stat .stat-symbol{color:#ff8f99}
.rpg-ui .mp-stat .stat-symbol{color:#75e4fb}
.rpg-ui .rpg-hp,.rpg-ui .rpg-mp{
  position:relative;flex:1;display:block;width:auto;
  height:clamp(6px,1.5cqw,14px);
  border:1px solid #b7b4a4;
  border-radius:3px;overflow:hidden;
  background:#0b1223;box-shadow:inset 0 1px 3px #000c,0 0 2px #ffeed388;
}
.rpg-ui .rpg-hp>i,.rpg-ui .rpg-mp>i{
  position:absolute;left:0;top:0;bottom:0;height:100%;
  border-radius:2px;
  box-shadow:0 1px 1px #fff6 inset;
}
.rpg-ui .rpg-hp>i{width:94%;background:linear-gradient(#ffaaa5 0%,#e44d64 42%,#ad1333 100%)}
.rpg-ui .rpg-mp>i{width:84%;background:linear-gradient(#cff8ff 0%,#459df1 45%,#2152ab 100%)}
.rpg-ui .rpg-stat small{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:1;display:block;text-align:center;
  font:800 clamp(4px,1.05cqw,10px)/1 var(--sans);letter-spacing:.015em;
  text-shadow:0 1px 2px #191328,0 0 2px #111;white-space:nowrap
}
.rpg-ui .rpg-xp{width:calc(100% - clamp(9px,2cqw,18px));margin-left:auto;height:clamp(2px,.52cqw,5px);border:1px solid #d5b9807a;background:#101e36;border-radius:2px}
.rpg-ui .rpg-xp i{display:block;width:62%;height:100%;background:linear-gradient(90deg,#b488ed,#fff2b0,#75efff)}
.rpg-ui .rpg-tools{
  position:absolute;top:clamp(5px,.9cqw,9px);right:clamp(64px,18cqw,150px);
  display:flex;gap:clamp(3px,.55cqw,6px);
}
.rpg-ui .rpg-tools span{
  display:grid;place-items:center;
  width:clamp(17px,3.4cqw,32px);height:clamp(17px,3.4cqw,32px);
  padding:3px;background:linear-gradient(135deg,#516880eb,#17283df5 48%,#0c1930);
  border:1px solid #e1c78d;border-radius:3px;
  box-shadow:inset 0 1px 0 #f5eacd5c,0 0 0 1px #102d49ab,0 2px 5px #0009;
}
.rpg-ui .rpg-tools svg{width:90%;height:90%;filter:drop-shadow(0 0 3px #b9d9ff99)}
.rpg-ui .rpg-minimap{
  position:absolute;top:clamp(3px,.45cqw,7px);right:clamp(3px,.65cqw,9px);
  width:clamp(54px,16.4cqw,114px);height:clamp(54px,16.4cqw,114px);
  display:block;border:0;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#c5d9e85c,transparent 72%),#11283b;
  box-shadow:0 0 0 2px #162e44,0 0 0 4px var(--hud-accent),
  0 0 0 5px #eafaff8c,inset 0 0 8px #0009,0 5px 13px #091624b0;
}
.rpg-ui .rpg-minimap img{
  display:block;width:100%;height:100%;border-radius:50%;
  object-fit:contain;filter:contrast(1.14) saturate(1.24);
}
.world-visual[data-tone="ember"] .rpg-minimap img{filter:sepia(.62) hue-rotate(328deg) saturate(1.65) contrast(1.12)}
.world-visual[data-tone="golden"] .rpg-minimap img{filter:sepia(.4) saturate(1.3) contrast(1.1)}
.world-visual[data-tone="arcane"] .rpg-minimap img{filter:hue-rotate(52deg) saturate(1.3) contrast(1.14)}
.world-visual[data-tone="frost"] .rpg-minimap img{filter:hue-rotate(10deg) saturate(.85) brightness(1.15) contrast(1.12)}
.rpg-ui .rpg-minimap .rpg-north{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  color:#fff2b1;font:900 clamp(6px,1.25cqw,11px)/1 var(--serif);
  text-shadow:0 1px 3px #07182f,0 0 4px #ffed91;
}
.rpg-ui .rpg-minimap .rpg-coordinates{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  background:linear-gradient(#233f59,#0d1e33);
  border:1px solid #ceba8c;border-radius:3px;padding:1px 3px;
  color:#ffe4aa;font:800 clamp(4px,.85cqw,9px)/1.2 var(--sans);
  letter-spacing:.055em;white-space:nowrap;
}
.rpg-ui .rpg-quest{
  position:absolute;left:clamp(4px,1cqw,10px);top:clamp(50px,11.25cqw,100px);
  max-width:min(52%,265px);padding:clamp(4px,.85cqw,9px) clamp(6px,1.1cqw,12px);
  display:flex;flex-direction:column;gap:clamp(2px,.4cqw,4px);
  background:linear-gradient(90deg,#05172be8 0%,#102f4ecc 72%,#173a5b77 100%);
  border:1px solid #c8b27e99;border-left:3px solid #f5cb80;
  box-shadow:0 3px 10px #0009,inset 0 1px 0 #f7e8cb33;
  border-radius:0 7px 7px 0;
}
.rpg-ui .rpg-quest b{font:800 clamp(7px,1.18cqw,12px)/1.15 var(--serif);color:#ffdf91;white-space:nowrap;letter-spacing:.02em}
.rpg-ui .rpg-quest .quest-diamond{color:#fffae1;font-size:.6em}
.rpg-ui .rpg-quest small{
  display:block;font:700 clamp(6px,1.1cqw,11px)/1.25 var(--sans);
  color:#f5f9ff;text-shadow:0 1px 2px #000;
  overflow-wrap:normal;
}
.rpg-ui .quest-dots{display:flex;gap:3px;margin-top:1px}
.rpg-ui .quest-dots i{width:clamp(8px,1.35cqw,14px);height:2px;background:var(--hud-accent);box-shadow:0 0 4px var(--hud-glow);border-radius:2px}
.rpg-ui .quest-dots i:nth-child(2){opacity:.58}.rpg-ui .quest-dots i:nth-child(3){opacity:.25}
.rpg-ui .rpg-joystick{
  position:absolute;bottom:clamp(8px,1.7cqw,17px);left:clamp(7px,1.7cqw,16px);
  width:clamp(42px,12.6cqw,89px);height:clamp(42px,12.6cqw,89px);
  border-radius:50%;border:2px solid #ead5a5;
  background:radial-gradient(circle,#172e48bb 0 25%,#355a7eaa 27% 45%,#0c1e35cb 48% 72%,#7ea5b45c 73%);
  box-shadow:0 0 0 2px #12344e,0 0 0 3px #bddbf4a3,0 4px 15px #061529bd,inset 0 1px 6px #c2ecf56b;
  display:grid;place-items:center;
}
.rpg-ui .joystick-ring{position:relative;width:100%;height:100%;display:grid;place-items:center;border-radius:50%}
.rpg-ui .joystick-directions{position:absolute;inset:6%;width:88%;height:88%;fill:#daeeff;opacity:.85;filter:drop-shadow(0 0 2px #b2e8ff)}
.rpg-ui .joystick-knob{
  position:relative;display:grid;place-items:center;width:43%;height:43%;
  background:radial-gradient(circle at 35% 29%,#9fd5f3,#4f87b7 32%,#183553 76%);
  border:1px solid #e6ddbd;border-radius:50%;
  box-shadow:inset 0 1px 2px #e9ffffa8,0 1px 5px #071225ad;
}
.rpg-ui .joystick-knob span{width:28%;height:28%;background:#d7f7ff;border-radius:50%;box-shadow:0 0 4px #dcffff}
.rpg-ui .movement-label{position:absolute;bottom:-14%;left:50%;transform:translateX(-50%);font:800 clamp(5px,.98cqw,9px)/1 var(--sans);color:#ffefd0;letter-spacing:.12em}
.rpg-ui .rpg-hotbar{position:absolute;bottom:clamp(5px,.85cqw,12px);right:clamp(5px,1cqw,12px);display:flex;flex-direction:column;align-items:flex-end;gap:clamp(3px,.45cqw,5px)}
.rpg-ui .hotbar-upper{display:flex;align-items:center;justify-content:center;gap:7px;padding:2px 8px;background:linear-gradient(90deg,transparent,#0d223dcf,transparent);margin-right:3px}
.rpg-ui .hotbar-caption{color:#ffe5b5;letter-spacing:.16em;font:800 clamp(5px,.94cqw,10px)/1.2 var(--serif)}
.rpg-ui .hotbar-rune{font:800 clamp(6px,.95cqw,10px)/1 var(--serif);color:#d4c694}
.rpg-ui .rpg-skills{
  position:relative;right:auto;bottom:auto;display:flex;align-items:center;
  gap:clamp(4px,.85cqw,9px);
  padding:clamp(3px,.6cqw,6px);
  background:linear-gradient(#08182cb8,#07182cf2);
  border:1px solid #dec8968e;border-radius:14px;
  box-shadow:0 3px 13px #0009,inset 0 1px 0 #f7efdd29;
}
.rpg-ui .rpg-skills .rpg-ability{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  width:clamp(24px,7.9cqw,52px);height:clamp(24px,7.9cqw,52px);
  background:radial-gradient(circle at 36% 25%,#93d6ff,#2d74b6 47%,#15274b 85%);
  border:2px solid #d9bb80;border-radius:50%;
  box-shadow:inset 0 0 0 2px #132e56,inset 0 1px 8px #e6f8ff80,
    0 0 0 1px #ecf8ff80,0 3px 6px #000b;
  color:#fff8e6;
}
.rpg-ui .rpg-skills .skill-one{background:radial-gradient(circle at 32% 22%,#a8f8ff,#379cce 42%,#183c78 90%)}
.rpg-ui .rpg-skills .skill-two{background:radial-gradient(circle at 32% 22%,#ffceff,#8950bc 44%,#352260 90%)}
.rpg-ui .rpg-skills .skill-three{background:radial-gradient(circle at 32% 22%,#fbf6c8,#bca05a 42%,#4d396b 90%)}
.rpg-ui .rpg-skills .skill-four{background:radial-gradient(circle at 32% 22%,#d5ecff,#537fd3 44%,#1f285f 90%)}
.rpg-ui .rpg-skills .skill-five{background:radial-gradient(circle at 32% 22%,#ffc8af,#b25c75 44%,#47224b 90%)}
.rpg-ui .rpg-skills .rpg-ability svg{width:64%;height:64%;position:relative;z-index:2;filter:drop-shadow(0 1px 2px #06182e)}
.rpg-ui .rpg-skills .rpg-ability .ability-key{
  position:absolute;right:-2px;bottom:-2px;z-index:4;
  min-width:clamp(10px,1.75cqw,16px);height:clamp(10px,1.75cqw,16px);
  padding:0 2px;border-radius:4px;
  background:linear-gradient(#efe1b9,#b88b4e);border:1px solid #f6efd2;
  color:#19324b;text-shadow:none;
  display:grid;place-items:center;
  font:900 clamp(6px,1cqw,11px)/1 var(--sans);
}
.rpg-ui .rpg-skills .rpg-ability .ability-inner{
  position:absolute;inset:3px;border-radius:50%;
  border-top:1px solid #fff7d595;border-left:1px solid #f8e7bd33;pointer-events:none
}
.world-visual[data-tone="ember"] .rpg-ability{border-color:#ebac70;box-shadow:inset 0 0 0 2px #3a202a,0 0 0 1px #ffce9099,0 3px 7px #000b}
.world-visual[data-tone="frost"] .rpg-ability{border-color:#cdeeff}
.world-visual[data-tone="arcane"] .rpg-ability{border-color:#d9b1ed}
@media(max-width:560px){
  .rpg-ui .rpg-status{top:3px;left:3px;gap:4px;padding:3px 5px 4px 3px}
  .rpg-ui .rpg-health{width:84px;gap:1px}
  .rpg-ui .rpg-avatar{width:27px;height:27px}
  .rpg-ui .rpg-nameplate b{font-size:6px}
  .rpg-ui .rpg-nameplate strong{font-size:7px}
  .rpg-ui .rpg-stat small{font-size:5px}
  .rpg-ui .rpg-hp,.rpg-ui .rpg-mp{height:6px}
  .rpg-ui .stat-symbol{width:7px;font-size:8px}
  .rpg-ui .rpg-tools{right:61px;top:4px;gap:2px}
  .rpg-ui .rpg-tools span{width:16px;height:16px;padding:2px}
  .rpg-ui .rpg-minimap{width:48px;height:48px;top:5px;right:5px}
  .rpg-ui .rpg-quest{top:47px;left:3px;max-width:48%;padding:3px 5px}
  .rpg-ui .rpg-quest b{font-size:6px}
  .rpg-ui .rpg-quest small{font-size:6px}
  .rpg-ui .rpg-joystick{width:42px;height:42px;left:7px;bottom:11px}
  .rpg-ui .movement-label{font-size:5px;bottom:-15%}
  .rpg-ui .rpg-hotbar{bottom:4px;right:3px;gap:2px}
  .rpg-ui .hotbar-upper{display:none}
  .rpg-ui .rpg-skills{gap:3px;padding:3px;border-radius:10px}
  .rpg-ui .rpg-skills .rpg-ability{width:24px;height:24px;border-width:1px}
  .rpg-ui .rpg-skills .rpg-ability .ability-key{font-size:6px;min-width:10px;height:10px}
  .world-visual .image-caption{left:calc(12px + 12cqw);bottom:4px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .rpg-ui .rpg-status,.rpg-ui .rpg-ability,.rpg-ui .rpg-minimap{transition:none!important}
}

/* Reference screenshot restore — November 8.
   The opening floating-castle valley is the original reference image.
   Keep only a compact level/HP/MP badge, one top-corner action and an
   intentionally cropped edge of the ability wheel instead of the full HUD. */
.world-visual[data-tone="valley"] .rpg-ui,
.world-visual[data-tone="valley"] .image-caption { display:block; }
.world-visual[data-tone="valley"] .rpg-ui .rpg-status {
  transform:scale(.8);
  transform-origin:top left;
}
.world-visual[data-tone="valley"] .rpg-ui .rpg-quest,
.world-visual[data-tone="valley"] .rpg-ui .rpg-joystick,
.world-visual[data-tone="valley"] .rpg-ui .rpg-minimap,
.world-visual[data-tone="valley"] .rpg-ui .hotbar-upper {display:none;}
.world-visual[data-tone="valley"] .rpg-ui .rpg-tools {
  right:7px;
  top:7px;
}
.world-visual[data-tone="valley"] .rpg-ui .rpg-tools span:not(:first-child) {display:none;}
.world-visual .image-caption {left:7px;bottom:7px;max-width:65%;font-size:clamp(6px,.8cqw,10px);}
.world-visual .rpg-ui .rpg-hotbar {
  bottom:-7px;
  right:calc(-1 * clamp(80px,30cqw,180px));
  opacity:.9;
  transform:scale(.96);
  transform-origin:right bottom;
}
.world-visual .rpg-ui .hotbar-upper {display:none;}
@media (max-width:560px) {
  .world-visual .rpg-ui .rpg-hotbar {
    right:calc(-1 * clamp(85px,30cqw,130px));
    bottom:-6px;
  }
  .world-visual[data-tone="valley"] .rpg-ui .rpg-status {transform:scale(.73)}
  .world-visual .image-caption {left:5px;bottom:4px;max-width:66%;font-size:5px;}
}