/* Aetheria Ascend — cinematic MMO HUD inspired by the user-supplied
   third-person gameplay reference. Original in-repo scene art, not copied
   screenshots or an interactive game. This stylesheet comes last. */

.world-content{
  grid-template-columns:minmax(0,1.45fr) minmax(0,.78fr);
  gap:clamp(20px,2.5vw,36px);
  align-items:center;
}
.world-visual{min-width:0}
.world-visual .image-border{
  container-type:inline-size;
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  padding:0;
  border:3px solid #dcc894;
  border-radius:1px;
  background:#102536;
  box-shadow:0 0 0 3px #5e9bcd,0 0 0 5px #e4d7a5,0 9px 24px #11264082;
  overflow:hidden;
}
.world-visual .image-border > #world-image{
  object-fit:cover;
  object-position:center center;
  filter:contrast(1.05) saturate(1.07);
}
.world-visual .image-shine{pointer-events:none;background:linear-gradient(180deg,#061a3108,transparent 24%,transparent 80%,#020e235b)}
.world-visual .image-caption{display:none!important}
.world-disclaimer{
  margin:clamp(12px,1.5vw,22px) 0 0!important;
  font:600 10px/1.45 var(--sans);
  color:#cae3ef;
  opacity:.9;
  letter-spacing:.035em;
}

/* The image itself is a 16:9 container. Every overlay size uses cqw
   so the HUD scales with the actual picture, not with page width. */
.world-visual .rpg-ui,
.world-visual[data-tone="valley"] .rpg-ui{
  display:block;
  position:absolute;
  inset:0;
  z-index:5;
  overflow:hidden;
  user-select:none;
  pointer-events:none;
  color:#fff;
  font-family:var(--sans);
  font-size:clamp(6px,1.17cqw,15px);
  text-shadow:0 1px 3px #030c18,0 0 2px #030c18;
}

/* Big level and two slim bars — top-left reference silhouette. */
.world-visual .rpg-ui .rpg-status,
.world-visual[data-tone="valley"] .rpg-ui .rpg-status{
  position:absolute;
  left:1.6cqw;top:1.5cqw;
  width:31.5cqw;
  padding:0;
  display:flex;
  align-items:center;
  gap:1.3cqw;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  transform:none!important;
}
.world-visual .rpg-level{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 6.8cqw;
  color:#fff;
  line-height:.84;
  font-weight:900;
  font-size:clamp(17px,4.9cqw,60px);
  letter-spacing:-.07em;
  filter:drop-shadow(0 2px 4px #000c);
}
.world-visual .rpg-level small{
  font:900 clamp(5px,1cqw,11px)/1 var(--sans);
  color:#e2eaf2;letter-spacing:.14em;
}
.world-visual .rpg-ui .rpg-avatar{display:none}
.world-visual .rpg-ui .rpg-health{
  display:flex;flex-direction:column;
  gap:.6cqw;
  width:22.8cqw;min-width:0;
  padding:0;
}
.world-visual .rpg-ui .rpg-nameplate{
  display:flex;justify-content:space-between;align-items:center;
  gap:.8cqw;
  font-size:clamp(6px,1.1cqw,13px);
}
.world-visual .rpg-ui .rpg-nameplate b{
  font:900 clamp(5px,.92cqw,10px)/1 var(--sans);
  color:#fff1a7;
}
.world-visual .rpg-ui .rpg-nameplate strong{
  font:800 clamp(7px,1.28cqw,16px)/1 var(--sans);
  color:white;letter-spacing:.025em;
}
.world-visual .rpg-ui .rpg-nameplate .nameplate-star{display:none}
.world-visual .rpg-ui .rpg-stat{gap:.35cqw}
.world-visual .rpg-ui .stat-symbol{display:none}
.world-visual .rpg-ui .rpg-hp,
.world-visual .rpg-ui .rpg-mp{
  height:clamp(5px,1.17cqw,14px);
  border:1px solid #d9eeeaba;
  border-radius:1px;
  background:#071327dc;
  box-shadow:0 1px 3px #0009;
}
.world-visual .rpg-ui .rpg-hp>i{width:100%;background:linear-gradient(#6bfaaa,#19c978 55%,#098551)}
.world-visual .rpg-ui .rpg-mp>i{width:100%;background:linear-gradient(#95e8ff,#349ee7 58%,#155ebc)}
.world-visual .rpg-ui .rpg-stat small{
  font:800 clamp(4px,.7cqw,9px)/1 var(--sans);
  letter-spacing:.015em;text-shadow:0 1px 3px #000f;
}
.world-visual .rpg-ui .rpg-xp{display:none}
.world-visual .rpg-buffs{display:flex;gap:.4cqw;padding-top:.1cqw}
.world-visual .rpg-buffs i{
  width:clamp(9px,1.7cqw,21px);
  height:clamp(9px,1.7cqw,21px);
  border:1px solid #d6e6d8c7;border-radius:2px;
  box-shadow:0 1px 4px #000c,inset 0 1px 3px #fff9;
  background:radial-gradient(circle at 40% 30%,#e1ffe1,#29b75f 48%,#123e69);
}
.world-visual .rpg-buffs i:nth-child(2){background:radial-gradient(circle at 40% 30%,#fff2ab,#e5a132 50%,#57215b)}
.world-visual .rpg-buffs i:nth-child(3){background:radial-gradient(circle at 40% 30%,#ffd4ef,#9d5fd9 50%,#192b62)}
.world-visual .rpg-buffs i:nth-child(4){background:radial-gradient(circle at 40% 30%,#baf7ff,#37a9c9 50%,#173c64)}

/* Two allied character frames, neatly under the player's own HP. */
.world-visual .rpg-ui .rpg-party{
  position:absolute;
  top:11.3cqw;left:2.3cqw;
  width:25cqw;
  gap:.45cqw;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.world-visual .rpg-party .party-label{
  color:#fff0c3;font:900 clamp(5px,.86cqw,10px)/1 var(--sans);
  letter-spacing:.15em;margin-bottom:.4cqw;
}
.world-visual .rpg-party .party-member{
  gap:.7cqw;
  padding:.32cqw .6cqw .32cqw 0;
  background:linear-gradient(90deg,#061c2cb8,#0a1c2f64 70%,transparent);
  border-radius:2px;
}
.world-visual .rpg-party .party-avatar{
  flex:none;
  width:4.2cqw;height:4.2cqw;
  display:grid;place-items:center;
  color:#f5e8b2;
  font-size:clamp(9px,2.2cqw,25px);
  border:1px solid #eee0b8;
  transform:none;
  background:linear-gradient(145deg,#385d82,#16243e);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.world-visual .rpg-party .party-member:nth-child(3) .party-avatar{
  background:linear-gradient(145deg,#b78b4a,#243d63)
}
.world-visual .rpg-party .party-member b{font:800 clamp(6px,1.03cqw,12px)/1.1 var(--sans)}
.world-visual .rpg-party .party-member small{font:800 clamp(5px,.84cqw,10px)/1 var(--sans)}
.world-visual .rpg-party .party-life{
  height:clamp(3px,.7cqw,8px);margin-top:.4cqw;
  border-radius:1px;border:1px solid #ffffffa6;
  background:#13243c;
}
.world-visual .rpg-party .party-life em{background:linear-gradient(#81f7b3,#1ca969)}

/* Party/auto/interaction ribbon follows the left edge. */
.world-visual .rpg-side-actions{
  position:absolute;top:31cqw;left:1.7cqw;
  display:flex;flex-direction:column;gap:1.2cqw;
}
.world-visual .rpg-side-action{
  display:flex;flex-direction:column;align-items:center;gap:.2cqw;
  min-width:6.8cqw;
  color:#fff;
}
.world-visual .rpg-side-action .side-symbol{
  width:clamp(17px,4.3cqw,50px);
  height:clamp(17px,4.3cqw,50px);
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid #dce7e0a8;
  background:radial-gradient(circle at 30% 18%,#c7e6f76b,#183044c7 61%,#051526d9);
  box-shadow:0 0 0 1px #0b253795,0 2px 5px #0008;
  font-size:clamp(11px,2.7cqw,31px);
}
.world-visual .rpg-side-action small{
  font:800 clamp(5px,.93cqw,11px)/1 var(--sans);
}

/* Compact quest strip and large circular minimap at upper-right. */
.world-visual .rpg-ui .rpg-quest,
.world-visual[data-tone="valley"] .rpg-ui .rpg-quest{
  position:absolute;
  display:flex;
  flex-direction:column;
  top:2cqw;
  left:auto;right:17.4cqw;
  width:24.5cqw;max-width:24.5cqw;
  padding:.4cqw .8cqw;
  gap:.55cqw;
  border:0;border-radius:0;
  border-right:1px solid #f1edda8a;
  background:linear-gradient(90deg,#07152314,#051626a8);
  box-shadow:none;
  text-align:right;
}
.world-visual .rpg-ui .rpg-quest b{
  display:block;color:#fff3bb;
  font:800 clamp(6px,1.1cqw,13px)/1.12 var(--sans);
  white-space:normal;
}
.world-visual .rpg-ui .rpg-quest small{
  color:#f6faff;
  font:700 clamp(6px,1.13cqw,14px)/1.2 var(--sans);
}
.world-visual .rpg-ui .quest-dots{display:none}
.world-visual .rpg-ui .rpg-minimap,
.world-visual[data-tone="valley"] .rpg-ui .rpg-minimap{
  position:absolute;top:1.5cqw;right:1.5cqw;
  display:block;
  width:14.2cqw;height:14.2cqw;
  border:1.2px solid #bde7e0;
  border-radius:50%;
  background:#274d44;
  box-shadow:0 0 0 2px #081826b3,0 0 0 3.5px #e0dac99a,
             0 5px 13px #000b,inset 0 0 10px #061827a8;
}
.world-visual .rpg-ui .rpg-minimap img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.world-visual .rpg-ui .rpg-minimap .rpg-north{top:-1.5cqw;font-size:clamp(7px,1.25cqw,16px)}
.world-visual .rpg-ui .rpg-minimap .rpg-coordinates{
  bottom:-1cqw;
  background:#081a2ecf;
  color:#f6e9b7;
  border:1px solid #d8d0b6a8;
  border-radius:3px;
  padding:.2cqw .5cqw;
  font:800 clamp(5px,.85cqw,11px)/1 var(--sans);
}
.world-visual .rpg-ui .rpg-shortcuts{
  position:absolute;top:17.6cqw;right:1.1cqw;
  display:flex;gap:1cqw;
}
.world-visual .rpg-shortcuts>span{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.24cqw;
  width:5.3cqw;height:5.3cqw;
  padding:.4cqw;
  border:1px solid #f5f5e5ba;
  border-radius:50%;
  background:radial-gradient(circle at 30% 15%,#adcde7b5,#1a2c47b9 70%,#11182e);
  box-shadow:0 0 0 1px #082438a9,0 2px 8px #020b1a9c;
}
.world-visual .rpg-shortcuts svg{
  width:47%;height:47%;
  filter:drop-shadow(0 1px 3px #000)
}
.world-visual .rpg-shortcuts .shortcut-symbol{
  font:900 clamp(11px,2.1cqw,25px)/1 var(--sans)
}
.world-visual .rpg-shortcuts small{color:white;font:800 clamp(4px,.78cqw,10px)/1 var(--sans)}
.world-visual .rpg-quick-target{
  position:absolute;right:12.5cqw;bottom:30cqw;
  display:grid;place-items:center;
  width:4.6cqw;height:4.6cqw;
  border-radius:50%;
  border:1px solid #effaf7bf;
  background:#05192db8;
  font:800 clamp(5px,.92cqw,11px)/1 var(--sans);
  box-shadow:0 0 0 2px #152d4b9c;
}

/* Subtle character name label instead of covering the player with text. */
.world-visual .rpg-world-name{
  position:absolute;left:48%;top:47%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:.3cqw;color:#96ebc8;
  font:800 clamp(6px,1.02cqw,12px)/1.05 var(--sans);
  letter-spacing:.015em;text-align:center;
  text-shadow:0 1px 3px #092219,0 0 4px #0b342f;
  opacity:.88;
}
.world-visual .rpg-world-name small{color:#f0f7ec;font-size:.8em;font-weight:600}

/* The dark dialogue bar, NPC portrait and two-line party chat replicate
   the visual hierarchy of the reference without copying its game assets. */
.world-visual .rpg-npc-dialogue{
  position:absolute;left:11cqw;right:28cqw;bottom:6.4cqw;
  display:flex;align-items:center;gap:.75cqw;
  height:6.8cqw;min-height:30px;
  padding:.6cqw 1cqw .6cqw 3.8cqw;
  background:linear-gradient(90deg,#05111fd9,#061b2bbd 84%,#06192b39);
  border:1px solid #d2e2d66b;
  border-left:0;border-radius:2px 13px 13px 2px;
  box-shadow:0 2px 8px #010b18bd;
}
.world-visual .rpg-npc-portrait{
  position:absolute;left:-4.2cqw;bottom:-.7cqw;
  width:7.2cqw;height:7.2cqw;
  border:1px solid #a3cbd1cc;border-radius:50%;
  overflow:hidden;
  background:#213655;
  box-shadow:0 0 0 2px #102c48,0 0 10px #000b;
}
.world-visual .rpg-npc-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 10%;
}
.world-visual .rpg-npc-copy{display:flex;flex-direction:column;gap:.25cqw;min-width:0}
.world-visual .rpg-npc-copy b{
  align-self:flex-start;
  color:#fce4aa;
  background:#172d36db;
  border:1px solid #e4c9938f;
  border-radius:10px;
  padding:.15cqw .7cqw;
  font:800 clamp(5px,.95cqw,11px)/1 var(--sans);
}
.world-visual .rpg-npc-copy span{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  color:#fff;
  font:500 clamp(6px,1.15cqw,15px)/1.22 var(--sans);
}
.world-visual .rpg-ui .rpg-chat{
  position:absolute;
  left:22cqw;bottom:.4cqw;
  display:flex;gap:.8cqw;
  width:40cqw;max-width:40cqw;
  padding:.35cqw .65cqw;
  border:0;border-radius:0;
  border-top:1px solid #cee8d776;
  background:linear-gradient(90deg,#051423a8,#07152999,transparent);
  box-shadow:none;
}
.world-visual .rpg-chat b{color:#8cecd6;font:800 clamp(5px,1cqw,11px)/1 var(--sans)}
.world-visual .rpg-chat span{color:#f0f6f8;font:600 clamp(5px,.98cqw,11px)/1 var(--sans)}

/* Left thumb: large translucent movement pad. */
.world-visual .rpg-ui .rpg-joystick,
.world-visual[data-tone="valley"] .rpg-ui .rpg-joystick{
  display:grid;
  position:absolute;
  left:2.2cqw;bottom:3.5cqw;
  width:12.5cqw;height:12.5cqw;
  border:1px solid #bce4ebb0;
  border-radius:50%;
  opacity:.85;
  background:radial-gradient(circle,#3d789445 0 24%,#2854787a 26% 50%,#1a304cbb 52% 66%,#badbdb38 70%);
  box-shadow:0 0 0 2px #16324c8a,inset 0 0 15px #f7fdff57;
}
.world-visual .rpg-ui .joystick-ring{width:100%;height:100%}
.world-visual .rpg-ui .joystick-directions{opacity:.4;fill:#dffcff}
.world-visual .rpg-ui .joystick-knob{width:38%;height:38%;background:radial-gradient(circle,#9fe7f8,#366e9d 70%)}
.world-visual .rpg-ui .movement-label{display:none}

/* Right thumb: a prominent primary combat skill and a surrounding arc. */
.world-visual .rpg-ui .rpg-hotbar,
.world-visual[data-tone="valley"] .rpg-ui .rpg-hotbar{
  position:absolute;right:.8cqw;bottom:.4cqw;
  display:block;
  width:31.5cqw;height:26.5cqw;
  margin:0;padding:0;
  opacity:1;transform:none;
  background:none;border:0;box-shadow:none;
}
.world-visual .rpg-ui .rpg-skills{
  position:relative;display:block;
  width:100%;height:100%;
  border:0;border-radius:0;
  margin:0;padding:0;background:none;box-shadow:none;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability{
  position:absolute;
  display:grid;place-items:center;
  width:7.2cqw;height:7.2cqw;
  padding:.25cqw;
  overflow:visible;
  border:2px solid #e4eada;
  border-radius:50%;
  background:#111c36;
  box-shadow:0 0 0 1.4px #091a2f,0 2px 8px #000c,inset 0 0 4px #c6f2ff99;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;
  position:relative;z-index:1;
  filter:brightness(1.1) contrast(1.1) saturate(1.17);
}
.world-visual .rpg-ui .rpg-skills .rpg-ability .ability-inner{inset:.2cqw;z-index:2}
.world-visual .rpg-ui .rpg-skills .rpg-ability .ability-key{
  position:absolute;right:-.6cqw;bottom:-.5cqw;
  min-width:1.8cqw;height:1.8cqw;
  display:grid;place-items:center;
  background:#0a1629dd;
  border:1px solid #edf3e9e0;
  border-radius:50%;
  color:#fff;
  font:800 clamp(5px,.92cqw,11px)/1 var(--sans);
  z-index:5;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(1){
  width:10.2cqw;height:10.2cqw;
  right:2%;bottom:6%;
  border:3px solid #f5f5e3;
  box-shadow:0 0 0 2px #172f44,0 0 13px #ffeec276,0 4px 13px #020913d6;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(2){right:45%;bottom:0}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(3){right:67%;bottom:22%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(4){right:61%;bottom:60%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(5){right:30%;bottom:71%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(6){right:2%;bottom:70%}

/* A functional fullscreen preview helps people inspect fine UI details. */
.world-visual .rpg-fullscreen{
  position:absolute;z-index:20;
  right:33cqw;bottom:.8cqw;
  display:grid;place-items:center;
  width:4.1cqw;height:4.1cqw;
  min-width:22px;min-height:22px;
  color:#fff;font:900 clamp(11px,2.1cqw,22px)/1 var(--sans);
  background:#09263da8;
  border:1px solid #eff4e3ac;
  border-radius:50%;
  cursor:pointer;
  opacity:.72;
  transition:opacity .2s,background .2s;
}
.world-visual .rpg-fullscreen[hidden]{display:none!important}
.world-visual .rpg-fullscreen:hover,
.world-visual .rpg-fullscreen:focus-visible{opacity:1;background:#1d507b}
.world-visual .image-border:fullscreen{
  width:100vw;height:100vh;max-height:none;
  aspect-ratio:auto;padding:0;border:0;
  background:#05101b;box-shadow:none;
}
.world-visual .image-border:fullscreen > #world-image{object-fit:cover}

@media(max-width:860px){
  .world-content{grid-template-columns:1fr;gap:20px}
  .world-visual{width:100%}
  .world-visual .image-border{aspect-ratio:16/9}
  .world-disclaimer{font-size:10px}
}
@media(max-width:560px){
  .world-visual .rpg-npc-dialogue{min-height:0}
  .world-visual .rpg-npc-copy span{font-size:clamp(5px,1.14cqw,7px)}
  .world-visual .rpg-ui .rpg-status{gap:.8cqw}
  .world-visual .rpg-party .party-member b{font-size:clamp(5px,.92cqw,7px)}
  .world-visual .rpg-side-actions{gap:.8cqw}
  .world-visual .rpg-side-action .side-symbol{min-width:16px;min-height:16px}
  .world-visual .rpg-ui .rpg-skills .rpg-ability{border-width:1px}
  .world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(1){border-width:2px}
  .world-visual .rpg-quest small{font-size:5px}
}
@media(prefers-reduced-motion:reduce){
  .world-visual .rpg-fullscreen{transition:none}
}


/* === Two-scene HUD fidelity pass: screenshot reference (Nov 9, 2026) ===
   Keep the actual Aetheria artwork, not any Revelation game image.
   All interface elements remain illustrative, not actual game controls. */
.world-content{
  grid-template-columns:minmax(0,1.75fr) minmax(260px,.70fr);
  gap:clamp(15px,2vw,28px);
}
.world-visual .image-border{
  aspect-ratio:1200 / 625;
  box-shadow:0 0 0 2px #4884b4,0 0 0 3px #e2cc8d,0 8px 20px #091a317a;
}
.world-visual .image-border>#world-image{
  object-position:center 51%;
}

/* Screenshot-style slim navy game window header. */
.world-visual .rpg-window-chrome{
  position:absolute;left:0;right:0;top:0;z-index:6;
  height:1.9cqw;min-height:7px;
  display:flex;align-items:center;
  gap:.55cqw;padding:0 .65cqw;
  font:700 clamp(5px,.85cqw,11px)/1 var(--sans);
  letter-spacing:.02em;
  background:linear-gradient(180deg,#244f6b,#153c58 79%,#092841a6);
  color:#f0fbff;
  border-bottom:1px solid #a6c2ceaa;
  text-shadow:0 1px 2px #000b;
}
.world-visual .rpg-chrome-logo{
  color:#dff4ff;
  font-size:1.2em;
  opacity:.9;
}
.world-visual .rpg-chrome-spacer{flex:1}
.world-visual .rpg-window-chrome small{
  color:#d8e9ef;
  font-size:.84em;
  font-weight:700;
  white-space:nowrap;
}
.world-visual .rpg-window-chrome small b{color:#f2e0aa;font-weight:900}
.world-visual .rpg-window-glyphs{
  opacity:.7;
  letter-spacing:.42em;
  font:600 clamp(5px,.82cqw,10px)/1 var(--sans);
}

/* Space status and minimap below window title, like the gameplay capture. */
.world-visual .rpg-ui .rpg-status,
.world-visual[data-tone="valley"] .rpg-ui .rpg-status{
  top:2.85cqw;left:1.4cqw;
}
.world-visual .rpg-ui .rpg-party{
  top:13.2cqw;left:2.5cqw;
  width:23.5cqw;
}
.world-visual .rpg-party-actions{
  display:flex;justify-content:space-around;
  gap:.6cqw;margin:.5cqw 0 0 1.5cqw;
  color:#e9f5f6;
  font:800 clamp(5px,.94cqw,12px)/1 var(--sans);
  text-shadow:0 1px 3px #000;
  white-space:nowrap;
}
.world-visual .rpg-party-actions span{
  padding:.25cqw .2cqw;
  background:#06243b45;
}
.world-visual .rpg-party-actions span:first-child{color:#77f4bd}
.world-visual .rpg-ui .rpg-minimap,
.world-visual[data-tone="valley"] .rpg-ui .rpg-minimap{
  top:2.6cqw;right:1.45cqw;
  width:15cqw;height:15cqw;
  border:1.3px solid #e1ebe3;
  box-shadow:0 0 0 2px #142d3b,0 0 0 3.8px #afc7cfaf,0 3px 8px #000b;
}
.world-visual .rpg-ui .rpg-quest,
.world-visual[data-tone="valley"] .rpg-ui .rpg-quest{
  top:3cqw;
  right:18.5cqw;
  max-width:24cqw;
  padding:.35cqw .65cqw;
  border-right:0;
  background:linear-gradient(90deg,transparent,#092238c9);
}
.world-visual .rpg-game-clock{
  position:absolute;
  top:17.8cqw;right:5cqw;
  color:#f4faff;
  font:700 clamp(5px,.9cqw,11px)/1 var(--sans);
  text-shadow:0 1px 3px #000f;
}
.world-visual .rpg-ui .rpg-shortcuts{top:21cqw;right:1.2cqw}
.world-visual .rpg-ui .rpg-quick-target{
  top:29.9cqw;bottom:auto;right:17cqw;
  width:4.4cqw;height:4.4cqw;
}
.world-visual .rpg-side-actions{
  top:31.5cqw;
  left:1.2cqw;
  gap:.95cqw;
}
.world-visual .rpg-side-action .side-symbol{
  border-color:#faf7e3bb;
  background:radial-gradient(circle at 35% 20%,#f7ffffa0,#21394dd1 55%,#091826dd);
}

/* Reference image: long dialogue banner at the bottom, face floating to its left. */
.world-visual .rpg-npc-dialogue{
  left:10.7cqw;
  right:19cqw;
  bottom:8.4cqw;
  height:7.2cqw;
  min-height:0;
  background:linear-gradient(90deg,#0a151ee8,#101d23d3 74%,#0c171d3a);
  border:0;
  border-radius:0 1.8cqw 1.8cqw 0;
  padding:1.1cqw 1.1cqw .7cqw 4.1cqw;
}
.world-visual .rpg-npc-portrait{
  left:-3.5cqw;bottom:-.35cqw;
  width:7.7cqw;height:7.7cqw;
}
.world-visual .rpg-npc-copy b{
  color:#f9db8f;
  border:0;
  border-radius:1cqw;
  background:#0a1d22a6;
  padding:.1cqw .9cqw;
}
.world-visual .rpg-npc-copy span{
  font-size:clamp(6px,1.15cqw,15px);
  line-height:1.15;
}
.world-visual .rpg-ui .rpg-chat{
  left:28cqw;
  bottom:.6cqw;
  width:35cqw;max-width:35cqw;
  border-top:0;
  padding:.3cqw .4cqw;
  background:linear-gradient(90deg,#08152476,#081524aa,transparent);
}
/* Desktop reference is keyboard-and-mouse gameplay, so hide the touch joystick.
   Show it at compact/touch breakpoints as the illustrative mobile control. */
.world-visual .rpg-ui .rpg-joystick,
.world-visual[data-tone="valley"] .rpg-ui .rpg-joystick{
  display:none;
}
@media(hover:none), (max-width:860px){
  .world-visual .rpg-ui .rpg-joystick,
  .world-visual[data-tone="valley"] .rpg-ui .rpg-joystick{
    display:grid;
    width:11cqw;height:11cqw;
    left:2cqw;bottom:3.7cqw;
    opacity:.44;
  }
}

/* Large circular healing/combat wheel and recognizable class skill labels. */
.world-visual .rpg-ui .rpg-hotbar,
.world-visual[data-tone="valley"] .rpg-ui .rpg-hotbar{
  width:35cqw;height:29cqw;
  bottom:.5cqw;right:0.4cqw;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(1){
  width:11cqw;height:11cqw;
  right:7%;bottom:5%;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(2){right:47%;bottom:7%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(3){right:74%;bottom:26%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(4){right:67%;bottom:59%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(5){right:34%;bottom:74%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(6){right:2%;bottom:66%}
.world-visual .rpg-ui .rpg-skills .rpg-ability::after{
  content:attr(data-skill-name);
  display:block;
  position:absolute;
  left:50%;bottom:-1.3cqw;
  transform:translateX(-50%);
  color:#fff4dc;
  font:700 clamp(5px,.78cqw,10px)/1.1 var(--sans);
  white-space:nowrap;
  letter-spacing:-.02em;
  z-index:9;
  text-shadow:0 1px 3px #000,0 0 3px #000;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(3)::after,
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(5)::after{
  bottom:-1.7cqw;
}
.world-visual .rpg-motion-controls{
  position:absolute;inset:0;pointer-events:none;
}
.world-visual .rpg-motion-controls span{
  position:absolute;
  bottom:.45cqw;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  gap:.1cqw;
  width:4.3cqw;height:4.3cqw;
  color:white;
  border:1px solid #ffffff8c;
  border-radius:50%;
  background:#081d30aa;
  box-shadow:0 1px 4px #000b;
  font-size:clamp(9px,2.15cqw,26px);
  line-height:1;
}
.world-visual .rpg-motion-controls span:first-child{right:30cqw}
.world-visual .rpg-motion-controls span:last-child{right:.9cqw}
.world-visual .rpg-motion-controls small{
  font:800 clamp(4px,.72cqw,9px)/1 var(--sans);
}

/* Keep foreground HUD legible without obscuring character / pathways. */
.world-visual .rpg-world-name{top:44%;left:49%;opacity:.75;}
.world-visual .image-border:fullscreen{
  display:block;
  width:100vw;height:100vh;aspect-ratio:auto;
}
.world-visual .image-border:fullscreen .rpg-ui{
  inset:0;
}
@media(max-width:1100px) and (min-width:861px){
  .world-content{grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr)}
}
@media(max-width:860px){
  .world-content{grid-template-columns:1fr}
  .world-visual .image-border{aspect-ratio:1200 / 625}
  .world-visual .rpg-window-chrome{min-height:6px}
}
@media(max-width:480px){
  .world-visual .rpg-window-chrome small{display:none}
  .world-visual .rpg-chrome-spacer{flex:1}
  .world-visual .rpg-npc-copy span{font-size:5px;line-height:1.18}
  .world-visual .rpg-npc-dialogue{height:8cqw;bottom:8cqw}
  .world-visual .rpg-game-clock{display:none}
  .world-visual .rpg-ui .rpg-skills .rpg-ability::after{font-size:4px}
  .world-visual .rpg-motion-controls span{border-width:0}
}