/* November 2026 refinement — retain ONLY the lower open-page character profile.
   Official platform artwork and static trailer affordance replace placeholder glyphs. */
.character-accessible-title {
  position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important;
}
.characters-section {
  padding-top:clamp(35px,5vw,80px);
  background:
    radial-gradient(ellipse at 80% 20%,#fff7fc88,transparent 42%),
    radial-gradient(ellipse at 5% 64%,#e6dae066,transparent 45%),
    var(--hero-paper);
}
.characters-section .character-feature{
  width:min(1450px,100%);
  padding-top:0;
  gap:clamp(16px,2.5vw,45px);
  align-items:center;
}
.characters-section .character-feature-art{
  min-height:560px;
  height:clamp(570px,52vw,760px);
}
.characters-section #character-active-art{
  height:110%;inset:-4% 0 0;
  object-position:center 50%;
  -webkit-mask-image:radial-gradient(ellipse 74% 72% at 50% 49%,#000 49%,transparent 94%);
  mask-image:radial-gradient(ellipse 74% 72% at 50% 49%,#000 49%,transparent 94%);
}
.characters-section .character-feature-details{
  padding-left:8px;
}
.characters-section .character-arrow{
  top:clamp(270px,31vw,445px);
  z-index:10;
}
.characters-section .character-prev{left:clamp(10px,1.6vw,24px)}
.characters-section .character-next{right:clamp(10px,1.6vw,24px)}
.characters-section .character-role-emblem{
  position:relative;display:grid;place-items:center;overflow:hidden;
  width:clamp(69px,6vw,84px);height:clamp(69px,6vw,84px);
  background:#0e1328;
  border-radius:13px;
  padding:0;
  border:2px solid #dcc38c;
  box-shadow:0 4px 12px #23172163,0 0 0 2px #a58553b3,inset 0 0 9px #fff2bc3b;
}
.characters-section .character-role-emblem img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:10px;
  image-rendering:auto;
  filter:contrast(1.07) saturate(1.12);
}
.characters-section .character-role-emblem:after{
  content:"";pointer-events:none;position:absolute;inset:1px;border-radius:10px;
  border:1px solid #fcdfac9c;box-shadow:inset 0 1px 3px #ffe1b072;
}
.characters-section .character-feature-title-row .character-identity{gap:clamp(13px,1.5vw,20px)}
.characters-section .character-pagination{margin-top:12px}
.play-button--decorative,
.play-button--decorative:hover,
.play-button--decorative:active {
  display:grid;place-items:center;
  transform:none!important;
  cursor:default;
  pointer-events:none;
  transition:none!important;
  user-select:none;
}
.platform-static{
  cursor:default!important;
  pointer-events:none;
}
.platform-static:hover{background:#0b121c9e!important;transform:none!important}
.platform-static svg{
  display:block;width:clamp(17px,1.7vw,24px);height:clamp(17px,1.7vw,24px);
  flex:none;overflow:visible;
}
.platform-static .platform-windows{filter:drop-shadow(0 0 3px #ffffff6b)}
.store-badges{
  gap:clamp(8px,.8vw,12px);
  display:flex;align-items:flex-start;justify-content:center;
  flex-wrap:nowrap;
  margin-top:clamp(5px,.6vw,10px);
  min-height:0;
}
.store-coming-badge{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;flex:none;gap:2px;
  color:#fff;cursor:default;user-select:none;
}
.store-coming-badge img{
  display:block;max-width:none;width:auto;
  height:clamp(31px,3vw,42px);object-fit:contain;
}
.store-coming-badge:nth-child(2) img{
  height:clamp(34px,3.2vw,45px);
  margin-top:-2px;
}
.store-coming-label{
  font:700 clamp(7px,.6vw,9px)/1 var(--sans);
  letter-spacing:.1em;
  color:#ffe3b1;text-shadow:0 1px 5px #15283a;
}
.reward-card .milestone{
  font-size:clamp(11px,1.25vw,17px);
  padding:clamp(6px,.7vw,10px) clamp(9px,1vw,15px);
}
@media(max-width:1050px){
  .characters-section .character-feature-art{min-height:500px;height:clamp(500px,59vw,630px)}
  .characters-section .character-arrow{top:clamp(250px,31vw,350px)}
  .characters-section .character-role-emblem{width:68px;height:68px}
}
@media(max-width:720px){
  .characters-section{padding-top:24px}
  .characters-section .character-feature{
    display:flex;flex-direction:column;gap:0;
    padding:0 clamp(13px,4vw,24px);
  }
  .characters-section .character-feature-art{
    width:100%;min-height:0;height:clamp(395px,108vw,600px);
  }
  .characters-section .character-feature-details{padding:3px 11px 17px}
  .characters-section .character-role-emblem{width:64px;height:64px}
  .characters-section .character-arrow{top:clamp(195px,52vw,285px)}
  .store-badges{gap:8px}
  .store-coming-badge img{height:36px}
  .store-coming-badge:nth-child(2) img{height:39px}
  .store-coming-label{font-size:7px}
}
@media(max-width:440px){
  .characters-section .character-feature-art{height:385px}
  .characters-section .character-feature-details{padding:0 6px 13px}
  .characters-section .character-role-emblem{width:55px;height:55px;border-radius:10px}
  .characters-section .character-role-emblem img{border-radius:8px}
  .characters-section .character-arrow{top:205px}
  .platform-static svg{width:17px;height:17px}
  .store-badges{gap:5px}
  .store-coming-badge img{height:30px}
  .store-coming-badge:nth-child(2) img{height:34px}
  .store-coming-label{font-size:6px}
  .reward-card .milestone{font-size:clamp(7px,1.9vw,10px);padding:6px 5px;white-space:nowrap}
}

/* Final overlap corrections seen in full-page browser screenshots. */
@media(min-width:1051px){
  .characters-section #character-active-art{inset:0;height:100%}
  .characters-section .character-ability-section{margin-top:27px}
}
@media(min-width:801px){
  .store-badges{transform:translateY(-12px);margin-bottom:-12px}
}

/* Every ability is now a rendered high-detail 3D MMORPG icon, not an SVG glyph. */
.characters-section .character-ability-section .character-skill-icon {
  display:grid;
  place-items:center;
  width:clamp(84px,7.7vw,108px);
  height:clamp(84px,7.7vw,108px);
  flex:0 0 auto;
  border:none!important;
  border-radius:17px;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:visible;
}
.characters-section .character-ability-section .character-skill-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:15px;
  image-rendering:auto;
  box-shadow:0 5px 13px #1e213553,0 0 0 1px #dcc9a6;
  filter:contrast(1.06) saturate(1.10);
}
.characters-section .character-skill {
  gap:14px;
  align-items:center;
}
.characters-section .character-skill span:last-child {
  max-width:190px;
  text-align:center;
  line-height:1.3;
}
@media(max-width:720px){
  .characters-section .character-ability-section .character-skill-icon {
    width:clamp(66px,15vw,84px);
    height:clamp(66px,15vw,84px);
  }
}
@media(max-width:440px){
  .characters-section .character-ability-section .character-skill-icon{
    width:clamp(65px,19vw,75px);
    height:clamp(65px,19vw,75px);
  }
  .characters-section .character-feature-skills{gap:9px}
  .characters-section .character-skill{gap:10px}
}

/* Cinematic illustration skill tiles: artwork is baked into full-square gold framed
   painted scenes. Avoid extra fake bevels and keep distinct silhouettes at 80-120px. */
.characters-section .character-ability-section .character-skill-icon{
  width:clamp(92px,8vw,116px);
  height:clamp(92px,8vw,116px);
  border-radius:5px;
}
.characters-section .character-ability-section .character-skill-icon img{
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 6px 13px #23163746,0 0 0 1px #997749,
             inset 0 0 0 1px #fae5a7;
  filter:saturate(1.07) contrast(1.045);
}
.characters-section .character-ability-heading h3{
  letter-spacing:.08em;
}
@media(max-width:720px){
  .characters-section .character-ability-section .character-skill-icon{
    width:clamp(74px,14vw,94px);
    height:clamp(74px,14vw,94px);
  }
}
@media(max-width:440px){
  .characters-section .character-ability-section .character-skill-icon{
    width:clamp(68px,19vw,81px);
    height:clamp(68px,19vw,81px);
  }
}

/* November 9: allow horizontal swipes while preserving vertical page scrolling. */
.world-visual .image-border,
.characters-section .character-feature-art {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.world-panel:focus-visible {
  outline: 2px solid #e9c77b;
  outline-offset: 4px;
}