/* Sharper game visuals and full-width celestial wing — November 2026 */
@media (min-width: 1200px) {
  /* The character group previously capped at 1560px, leaving a blank strip on wide monitors.
     Let the wing fan reach the left edge while keeping the other heroes together. */
  .hero-art { top: clamp(78px, 6.7vw, 106px); }
  .hero-art img {
    width: max(100vw, 1560px);
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center top;
    filter: drop-shadow(0 10px 18px rgba(13, 32, 52, .28));
  }
}
@media (min-width: 1700px) {
  .hero-art img { width: 100vw; }
}
.world-visual .image-border { position: relative; overflow: hidden; background: #183e65; }
.world-visual .image-border > img#world-image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 48%;
  image-rendering: auto;
  filter: saturate(1.12) contrast(1.08);
  transition: opacity .28s ease;
  transform: translateZ(0);
}
.world-visual .image-shine { z-index: 1; pointer-events: none; }
.rpg-ui {
  position: absolute; inset: 5px; z-index: 4;
  color: #fff; user-select: none; pointer-events: none;
  font-family: var(--sans);
  text-shadow: 0 1px 4px #071b37, 0 1px 1px #000;
}
.rpg-status { position: absolute; top: 6px; left: 6px; display: flex; align-items: center; gap: 5px; }
.rpg-avatar {
  display: grid; place-items: center; flex: none;
  width: clamp(25px, 2.8vw, 38px); height: clamp(25px, 2.8vw, 38px);
  border: 2px solid #dec18a; box-shadow: 0 0 0 2px #183a5a, 0 2px 7px #071a2a99;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 34%,#ddeeff,#9bbed8 33%,#344d80 65%,#12223c);
}
.rpg-avatar span { color: #ffedc0; font-size: clamp(13px,1.6vw,21px); }
.rpg-health { display:flex;flex-direction:column;gap:3px;width: clamp(66px, 8.2vw, 115px); }
.rpg-health > span { font-size: clamp(6px,.7vw,10px);font-weight:700;letter-spacing:.03em;white-space:nowrap; }
.rpg-health > span b { color:#ffedb8;font-family:var(--serif); }
.rpg-hp,.rpg-mp { display:block;height:clamp(3px,.47vw,6px);border:1px solid #e4e9eb8c;border-radius:9px;box-shadow:0 1px 4px #021c2cb3;background:#0d1a2b }
.rpg-hp > i { display:block;width:90%;height:100%;border-radius:6px;background:linear-gradient(#ffb4a9,#ec3b5c 58%,#a31847) }
.rpg-mp > i { display:block;width:78%;height:100%;border-radius:6px;background:linear-gradient(#c4f4ff,#2aacf7 58%,#1862bd) }
.rpg-tools { position:absolute;top:5px;right:clamp(49px,5.6vw,77px);display:flex;gap:3px; }
.rpg-tools span {
  width:clamp(12px,1.5vw,23px);height:clamp(12px,1.5vw,23px);
  display:grid;place-items:center;font-size:clamp(8px,.9vw,14px);
  border:1px solid #e3d3ab77;background:linear-gradient(140deg,#355b78c9,#132c4bcc);
  border-radius:3px;color:#ffeab1;
}
.rpg-minimap {
  position:absolute;right:5px;top:5px;
  width:clamp(37px,4.6vw,64px);height:clamp(37px,4.6vw,64px);
  border:2px solid #d6b875;border-radius:50%;
  box-shadow:0 0 0 2px #123c587e,inset 0 0 11px #bfeefd9c,0 3px 8px #07192e70;
  background:
    radial-gradient(circle at 58% 48%,#f4e9bd 0 3%,transparent 3.5%),
    linear-gradient(135deg,transparent 35%,#dbeaaa65 36% 40%,transparent 42%),
    linear-gradient(30deg,#305d4d 24%,#6a9774 25% 36%,#234f62 37% 54%,#8eb38e 55% 66%,#1d4a56 68%);
  display:grid;place-items:center;
}
.rpg-minimap span {color:#fff0af;font-size:clamp(10px,1.4vw,21px);filter:drop-shadow(0 1px 2px #000)}
.rpg-quest {
  position:absolute;top:clamp(39px,4.6vw,63px);left:5px;
  display:flex;flex-direction:column;gap:2px;max-width:40%;
  padding:3px 6px 4px 5px;
  background:linear-gradient(90deg,#0b1d32b9,#18354b43 80%,transparent);
  border-left:2px solid #ddc081;
}
.rpg-quest b {font:700 clamp(6px,.64vw,9px)/1 var(--serif);color:#ffdc91;letter-spacing:.03em}
.rpg-quest small {font-size:clamp(6px,.68vw,10px);line-height:1.18;color:#e5f8ff}
.rpg-skills { position:absolute;right:7px;bottom:7px;display:flex;align-items:end;gap:clamp(3px,.48vw,7px) }
.rpg-skills span {
  width:clamp(16px,2.1vw,31px);height:clamp(16px,2.1vw,31px);
  display:grid;place-items:center;
  border:1px solid #ffe5acb8;border-radius:50%;
  box-shadow:inset 0 0 8px #ade8fb8c,0 0 0 2px #15324a9c,0 3px 9px #071729a8;
  font-size:clamp(9px,1.2vw,18px);color:#effcff;
}
.rpg-skills .skill-one {background:radial-gradient(circle at 34% 27%,#c0dfff,#428fe7 42%,#194d83 80%)}
.rpg-skills .skill-two {background:radial-gradient(circle at 34% 27%,#e0b3ff,#8151d4 45%,#382672 80%)}
.rpg-skills .skill-three {background:radial-gradient(circle at 34% 27%,#dcffff,#5fc8ef 45%,#1865a1 80%)}
.rpg-skills .skill-four {background:radial-gradient(circle at 34% 27%,#ffe8b4,#f6a22e 45%,#984223 80%)}
.rpg-skills .skill-five {background:radial-gradient(circle at 34% 27%,#fbb9fb,#bc54d4 45%,#542482 80%)}
.rpg-joystick {
  position:absolute;left:6px;bottom:7px;
  width:clamp(24px,3.2vw,47px);height:clamp(24px,3.2vw,47px);
  border:1px solid #d5e4e1a4;border-radius:50%;
  background:radial-gradient(circle,#9dc7d844 15%,#2b567a63 35%,#172e4b72 58%,#b4d4d825 60%);
  display:grid;place-items:center;
}
.rpg-joystick span {font-size:clamp(12px,1.4vw,20px);opacity:.7}
.rpg-hud-note {display:none}
.world-visual .image-caption {
  z-index:6;
  bottom:8px;
  left:clamp(29px,4vw,60px);
  font-size:clamp(6px,.65vw,9px);
  background:linear-gradient(90deg,#0e264abb,#1335527d);
  color:#f2e4be;
  letter-spacing:.055em;
}
@media (max-width: 560px) {
  .rpg-avatar{width:20px;height:20px;border-width:1px}
  .rpg-avatar span{font-size:11px}
  .rpg-health {width:57px;gap:2px}
  .rpg-health > span{font-size:6px}
  .rpg-hp,.rpg-mp{height:3px}
  .rpg-minimap{width:33px;height:33px;right:4px;top:4px;border-width:1px}
  .rpg-tools{right:40px;top:4px;gap:2px}
  .rpg-tools span{width:12px;height:12px;font-size:8px}
  .rpg-quest{top:34px;max-width:42%;padding:2px 4px}
  .rpg-quest b{font-size:5px}
  .rpg-quest small{font-size:5px}
  .rpg-skills{gap:3px;bottom:5px;right:5px}
  .rpg-skills span{width:16px;height:16px;font-size:10px}
  .rpg-joystick{width:25px;height:25px}
  .world-visual .image-caption{font-size:5px;left:30px;bottom:4px}
}
@media (prefers-reduced-motion: reduce) {
  .world-visual .image-border img#world-image{transition:none}
}

/* Five playable-looking but explicitly illustrative character concept scenes. */
.world-visual .rpg-status,
.world-visual .rpg-tools,
.world-visual .rpg-minimap,
.world-visual .rpg-quest,
.world-visual .rpg-skills,
.world-visual .rpg-joystick { transition: filter .24s ease, border-color .24s ease; }
.world-visual[data-tone="celestial"] .rpg-avatar {
  border-color:#e5d1ff;background:radial-gradient(circle at 35% 32%,#fff7ff,#b5a5eb 39%,#594f9a 79%);
}
.world-visual[data-tone="ember"] .rpg-avatar {
  border-color:#ffcc84;background:radial-gradient(circle at 35% 32%,#ffedbd,#e76b36 38%,#56213d 82%);
}
.world-visual[data-tone="golden"] .rpg-avatar {
  border-color:#f1d49b;background:radial-gradient(circle at 35% 32%,#fff8ca,#d1a14d 42%,#73472b 82%);
}
.world-visual[data-tone="arcane"] .rpg-avatar {
  border-color:#c5a8ff;background:radial-gradient(circle at 35% 32%,#f1dfff,#7653bf 42%,#263f7e 82%);
}
.world-visual[data-tone="frost"] .rpg-avatar {
  border-color:#caf7ff;background:radial-gradient(circle at 35% 32%,#fff,#95e8f9 42%,#285ba2 82%);
}
.world-visual[data-tone="ember"] .rpg-skills .skill-one { background:radial-gradient(circle at 33% 24%,#fff1b0,#ee8a35 40%,#842b29 83%); }
.world-visual[data-tone="golden"] .rpg-skills .skill-one { background:radial-gradient(circle at 33% 24%,#fff9c8,#e2bc50 40%,#785031 83%); }
.world-visual[data-tone="arcane"] .rpg-skills .skill-one { background:radial-gradient(circle at 33% 24%,#e8e1ff,#9562db 40%,#322783 83%); }
.world-visual[data-tone="frost"] .rpg-skills .skill-one { background:radial-gradient(circle at 33% 24%,#ffffff,#6cdaf0 40%,#2b70b4 83%); }
.world-dots .dot { touch-action:manipulation;position:relative; }
.world-dots .dot[aria-selected="true"] { border-color:#ffe9b0;box-shadow:0 0 8px #fff3d6; }
@media (hover:hover) {
  .world-dots .dot:hover { background:#edddb5;border-color:#fff5d5;transform:rotate(45deg) scale(1.18); }
}
@media (max-width:560px) {
  .world-visual .rpg-status { gap:3px; }
  .world-description .world-kicker { letter-spacing:.09em; }
  .world-dots { gap:10px; }
}

/* Keep carousel arrow hit targets fully INSIDE the clipped frame on narrow screens.
   Previously the negative left/right offsets made the section intercept taps. */
@media(max-width:560px) {
  .world-panel-inner .carousel-arrow { z-index:30; top:52%; width:34px; height:34px; }
  .world-panel-inner .carousel-arrow.prev { left:2px; right:auto; }
  .world-panel-inner .carousel-arrow.next { right:2px; left:auto; }
  .world-panel-inner .world-content { position:relative; z-index:1; }
}