/* Third-person MMORPG gameplay presentation for ABOUT THE GAME, November 2026.
   Original 3D scene concepts plus an independent responsive, noninteractive HUD.
   The character is part of the environment, not poster-style close-up artwork. */
.world-content{
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(16px,2.5vw,34px);
  align-items:center;
}
.world-visual .image-border{
  position:relative;
  height:auto;
  aspect-ratio:16/9;
  max-height:none;
  min-height:200px;
  padding:3px;
  border:2px solid #e3c78d;
  background:#10263d;
  box-shadow:0 0 0 2px #79a9cd,0 7px 20px #122c538c;
  overflow:hidden;
  isolation:isolate;
}
.world-visual .image-border > img#world-image{
  display:block;width:100%;height:100%;
  object-fit:cover;
  object-position:center 50%;
  filter:saturate(1.05) contrast(1.045) brightness(1.005);
  image-rendering:auto;
  transform:none;
}
.world-visual .image-shine{
  z-index:1;
  background:linear-gradient(135deg,#e5ffff0a,transparent 42%,#e0c29308);
}
.world-visual .rpg-ui{
  display:block;
  position:absolute;
  inset:4px;
  z-index:5;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  font-family:var(--sans);
  color:#fff;
  text-shadow:0 1px 2px #000,0 0 4px #122231b8;
}
/* compact party frame in the upper-left, like a real multiplayer MMO HUD */
.world-visual .rpg-ui .rpg-status{
  left:5px;top:4px;transform:none!important;
  background:linear-gradient(90deg,#091423e8,#172e468c 82%,transparent);
  padding:3px 7px 6px 3px;
  border:0;border-left:2px solid var(--hud-accent);
  border-radius:24px 5px 6px 24px;
  box-shadow:0 2px 6px #0713219c;
}
.world-visual .rpg-ui .rpg-avatar{
  width:clamp(24px,6.2cqw,44px);
  height:clamp(24px,6.2cqw,44px);
  border:2px solid #e3d3a5;
}
.world-visual .rpg-ui .rpg-health{
  width:clamp(78px,20cqw,143px);
}
.world-visual .rpg-ui .rpg-nameplate b{
  font:700 clamp(6px,1.4cqw,12px)/1.1 var(--sans);
}
.world-visual .rpg-ui .rpg-nameplate strong{
  font:700 clamp(7px,1.35cqw,12px)/1.1 var(--sans);
}
.world-visual .rpg-ui .rpg-hp,.world-visual .rpg-ui .rpg-mp{
  height:clamp(5px,1cqw,9px);
  border-radius:3px;
}
.world-visual .rpg-ui .rpg-stat small{font-size:clamp(4px,.75cqw,8px)}
.world-visual .rpg-ui .rpg-party{
  display:flex;flex-direction:column;
  gap:clamp(2px,.4cqw,4px);
  position:absolute;
  top:clamp(36px,8.4cqw,64px);
  left:6px;
  width:clamp(112px,23cqw,166px);
  padding:clamp(3px,.55cqw,6px);
  background:linear-gradient(90deg,#0a1825be,#142d417a 76%,transparent);
  border-left:2px solid #d8d6b99c;
  border-radius:2px 4px 4px 2px;
  box-shadow:0 2px 4px #0612214d;
}
.rpg-party .party-label{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px;color:#f5e4ad;
  font:800 clamp(5px,.85cqw,9px)/1 var(--sans);letter-spacing:.11em;
}
.rpg-party .party-label b{color:#a8e5d7;font-size:inherit}
.rpg-party .party-member{
  display:flex;align-items:center;gap:clamp(3px,.5cqw,5px);
  min-width:0;
}
.rpg-party .party-avatar{
  width:clamp(13px,2.6cqw,20px);
  height:clamp(13px,2.6cqw,20px);
  flex:none;
  display:grid;place-items:center;
  border:1px solid #b7dddbb9;border-radius:3px;
  background:linear-gradient(140deg,#7cb8b4,#284e76 50%,#162d48);
  color:#fcf7c9;font-size:clamp(7px,1.5cqw,13px);
}
.rpg-party .party-member>div{flex:1;min-width:0}
.rpg-party .party-member b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:800 clamp(5px,.85cqw,9px)/1.15 var(--sans);color:#e9f2ff;
}
.rpg-party .party-life{
  display:block;height:clamp(3px,.6cqw,6px);
  margin-top:2px;border:1px solid #a1baa8;
  background:#182b37;border-radius:2px;overflow:hidden;
}
.rpg-party .party-life em{display:block;height:100%;width:89%;background:linear-gradient(90deg,#60d79b,#22ab5c)}
.rpg-party .party-member:nth-child(3) .party-life em{width:72%}
.rpg-party .party-member small{font:700 clamp(4px,.6cqw,7px) var(--sans);color:#fff0c3}
/* Top-right minimap and small inventory controls */
.world-visual .rpg-ui .rpg-minimap,
.world-visual[data-tone="valley"] .rpg-ui .rpg-minimap{
  display:block;
  top:6px;right:6px;
  width:clamp(45px,15.7cqw,104px);
  height:clamp(45px,15.7cqw,104px);
  border:2px solid #c9d7d3;border-radius:50%;
  box-shadow:0 0 0 2px #18394ec9,0 1px 10px #081b2bab;
}
.world-visual .rpg-ui .rpg-shortcuts{
  position:absolute;
  right:5px;top:clamp(58px,17.5cqw,118px);
  display:flex;gap:clamp(4px,1cqw,9px);
}
.rpg-shortcuts>span{
  display:grid;place-items:center;
  width:clamp(22px,4.7cqw,36px);
  height:clamp(22px,4.7cqw,36px);
  padding:3px;border:1px solid #f3faf4aa;border-radius:50%;
  background:radial-gradient(circle at 30% 24%,#7f9bb393,#0b1823e8);
  box-shadow:0 0 0 2px #091f3290,0 2px 8px #020d19bb;
}
.rpg-shortcuts svg{width:55%;height:55%;filter:drop-shadow(0 1px 2px #000)}
.rpg-shortcuts small{font:700 clamp(4px,.65cqw,7px)/1 var(--sans);color:#fff;letter-spacing:0}
/* Preserve main quest panel but place it below party frames */
.world-visual .rpg-ui .rpg-quest,
.world-visual[data-tone="valley"] .rpg-ui .rpg-quest{
  display:flex;
  left:6px;
  top:clamp(105px,21cqw,158px);
  width:clamp(105px,24cqw,190px);
  max-width:38%;
  padding:4px 7px;
  border-left:2px solid #e4cf9e;
  background:linear-gradient(90deg,#091b2ece,#14314277);
  box-shadow:0 2px 9px #01182b70;
}
.world-visual .rpg-ui .rpg-quest b{font-family:var(--sans);font-weight:900;letter-spacing:.045em}
.world-visual .rpg-ui .rpg-quest small{font:600 clamp(5px,1cqw,9px)/1.24 var(--sans);white-space:normal}
.world-visual .rpg-ui .rpg-tools,
.world-visual[data-tone="valley"] .rpg-ui .rpg-tools{
  display:none;
}
/* Analog on the left, chat above lower edge. */
.world-visual .rpg-ui .rpg-joystick,
.world-visual[data-tone="valley"] .rpg-ui .rpg-joystick{
  display:grid;
  width:clamp(34px,10cqw,72px);
  height:clamp(34px,10cqw,72px);
  left:clamp(7px,1.4cqw,12px);
  bottom:clamp(13px,3cqw,25px);
  background:radial-gradient(circle,#21384f28 0 18%,#284c6173 20% 49%,#101e31bb 53% 70%,#9caacb46 71%);
  border:1px solid #e8e8e5ab;
  opacity:.85;
}
.world-visual .rpg-ui .rpg-chat{
  position:absolute;
  left:clamp(50px,13cqw,98px);
  bottom:7px;
  width:clamp(95px,38cqw,250px);
  max-width:40%;
  display:flex;gap:5px;align-items:center;
  padding:clamp(3px,.6cqw,6px) clamp(4px,.85cqw,9px);
  background:linear-gradient(90deg,#0b1b2fd4,#111f339c 75%,#101a2c1c);
  border-left:2px solid #7edada;
  border-radius:3px;
  overflow:hidden;
  white-space:nowrap;
  box-shadow:0 1px 5px #0008;
}
.rpg-chat b{font:800 clamp(6px,.8cqw,10px) var(--sans);color:#7ef3d1}
.rpg-chat span{font:500 clamp(5px,.8cqw,9px) var(--sans);text-overflow:ellipsis;overflow:hidden;color:#f5f8ff}
/* Wheel of five cinematic circular skills, arranged along the bottom right */
.world-visual .rpg-ui .rpg-hotbar,
.world-visual[data-tone="valley"] .rpg-ui .rpg-hotbar{
  position:absolute;display:block;
  width:clamp(110px,26cqw,180px);
  height:clamp(87px,20cqw,130px);
  right:clamp(4px,.7cqw,9px);
  bottom:clamp(3px,.55cqw,7px);
  margin:0;padding:0;
  opacity:1;
  transform:none;
  background:none;border:0;box-shadow:none;
}
.world-visual .rpg-ui .hotbar-upper{display:none}
.world-visual .rpg-ui .rpg-skills{
  position:relative;
  display:block;
  width:100%;height:100%;
  margin:0;padding:0;
  background:none;border:0;box-shadow:none;border-radius:0;
  right:auto;bottom:auto;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability{
  position:absolute;
  display:grid;place-items:center;
  width:clamp(26px,6.5cqw,47px);
  height:clamp(26px,6.5cqw,47px);
  padding:2px;
  border:2px solid #e6e6ce;
  border-radius:50%;
  background:#172b42;
  overflow:visible;
  box-shadow:0 0 0 2px #0e283dc9,0 2px 7px #000b,inset 0 0 6px #b8eff7b3;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability img{
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;filter:saturate(1.12) brightness(1.03);
  position:relative;z-index:1;
}
.world-visual .rpg-ui .rpg-skills .rpg-ability .ability-inner{inset:1px;z-index:2}
.world-visual .rpg-ui .rpg-skills .rpg-ability .ability-key{
  right:-2px;bottom:-2px;
  border-radius:50%;background:#0e2138;border:1px solid #dcd6b7;color:#fff;
  width:clamp(9px,1.9cqw,15px);height:clamp(9px,1.9cqw,15px);
  font-size:clamp(5px,.9cqw,8px);z-index:5
}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(1){right:7%;bottom:1%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(2){right:31%;bottom:6%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(3){right:57%;bottom:22%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(4){right:48%;bottom:58%}
.world-visual .rpg-ui .rpg-skills .rpg-ability:nth-child(5){right:10%;bottom:56%}
.world-visual .image-caption{
  z-index:7;left:7px;bottom:5px;max-width:38%;
  padding:2px 5px;font-size:clamp(5px,.78cqw,8px);
  background:#1023339c;color:#f5ead8;
  border:1px solid #cad7d173;
  letter-spacing:.045em;
}
/* At smaller screen sizes, show the complete landscape first and keep HUD legible. */
@media(max-width:860px){
  .world-content{grid-template-columns:1fr;gap:19px}
  .world-visual .image-border{min-height:0;aspect-ratio:16/9}
  .world-description{padding:0 4px}
}
@media(max-width:560px){
  .world-visual .rpg-ui{inset:3px}
  .world-visual .rpg-ui .rpg-status{top:3px;left:3px;padding:2px 4px 3px 2px}
  .world-visual .rpg-ui .rpg-avatar{width:clamp(20px,6cqw,26px);height:clamp(20px,6cqw,26px)}
  .world-visual .rpg-ui .rpg-health{width:clamp(64px,19cqw,80px)}
  .world-visual .rpg-ui .rpg-party{top:clamp(32px,9.5cqw,41px);left:4px;width:clamp(88px,29cqw,115px);gap:1px;padding:3px}
  .rpg-party .party-avatar{width:13px;height:13px}
  .rpg-party .party-member b{font-size:6px}
  .rpg-party .party-life{height:3px}
  .world-visual .rpg-ui .rpg-quest,
  .world-visual[data-tone="valley"] .rpg-ui .rpg-quest{
    display:flex;top:clamp(90px,26cqw,113px);left:3px;
    padding:2px 4px;max-width:37%;width:114px;min-height:0;
  }
  .world-visual .rpg-ui .rpg-quest b{font-size:6px}
  .world-visual .rpg-ui .rpg-quest small{font-size:5px}
  .world-visual .rpg-ui .rpg-minimap,
  .world-visual[data-tone="valley"] .rpg-ui .rpg-minimap{
    width:clamp(40px,15cqw,54px);height:clamp(40px,15cqw,54px);
    top:4px;right:4px;
  }
  .world-visual .rpg-ui .rpg-shortcuts{top:clamp(48px,17cqw,60px);right:3px;gap:4px}
  .rpg-shortcuts>span{width:19px;height:19px;padding:2px}
  .rpg-shortcuts svg{width:55%;height:55%}
  .rpg-shortcuts small{font-size:4px}
  .world-visual .rpg-ui .rpg-joystick,
  .world-visual[data-tone="valley"] .rpg-ui .rpg-joystick{
    width:clamp(28px,10cqw,39px);height:clamp(28px,10cqw,39px);
    left:5px;bottom:13px;
  }
  .world-visual .rpg-ui .rpg-chat{left:clamp(39px,14cqw,55px);width:37%;max-width:37%;bottom:4px;padding:2px 4px}
  .rpg-chat b,.rpg-chat span{font-size:5px}
  .world-visual .rpg-ui .rpg-hotbar,
  .world-visual[data-tone="valley"] .rpg-ui .rpg-hotbar{
    right:1px;bottom:2px;width:clamp(94px,28cqw,120px);height:clamp(72px,22cqw,88px)
  }
  .world-visual .rpg-ui .rpg-skills .rpg-ability{
    width:clamp(21px,7cqw,29px);height:clamp(21px,7cqw,29px);border-width:1px
  }
  .world-visual .image-caption{left:3px;bottom:3px;font-size:5px;max-width:49%}
}
/* Keep carousel controls over the picture, not the prose, on small screens. */
@media(max-width:860px){
  .world-panel-inner .carousel-arrow{
    top:clamp(160px,28vw,225px);
  }
}
@media(max-width:560px){
  .world-panel-inner .carousel-arrow{
    top:clamp(117px,38vw,154px);
  }
}
@media(prefers-reduced-motion:reduce){
  .world-visual .image-border #world-image{transition:none}
}