/* ============================================================
   CHARACTER SHOWCASE V64 — isolated from 8 themes and V61 hero
   ============================================================ */
.character-showcase64{margin-top:42px;padding:30px 0 10px;position:relative}
.char64-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.char64-heading h2{font-size:clamp(28px,4vw,46px);margin:5px 0 7px}.char64-heading p{color:var(--muted);margin:0;max-width:720px}
.char64-counter{display:flex;align-items:baseline;gap:4px;color:var(--muted)}.char64-counter strong{font-size:30px;color:var(--accent)}
.char64-stage-wrap{position:relative;padding:0 42px}
.char64-viewport{overflow:hidden;width:100%;padding:8px 0 18px}
.char64-track{display:flex;gap:18px;transition:transform .52s cubic-bezier(.2,.8,.2,1);will-change:transform}
.char64-card{position:relative;flex:0 0 calc((100% - 36px)/3);min-width:0;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:22px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,var(--accent) 6%),var(--panel));box-shadow:0 16px 36px rgba(0,0,0,.16);cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.char64-card:hover,.char64-card:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 20px 46px color-mix(in srgb,var(--accent) 13%,rgba(0,0,0,.28));outline:none}
.char64-art{position:relative;height:310px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 68%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 48%),linear-gradient(180deg,color-mix(in srgb,var(--panel2) 92%,transparent),var(--panel))}
.char64-art img{position:relative;z-index:3;display:block;max-height:96%;max-width:88%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));transition:transform .35s ease,filter .35s ease}.char64-card:hover .char64-art img{transform:scale(1.035);filter:drop-shadow(0 22px 24px rgba(0,0,0,.50)) drop-shadow(0 0 13px color-mix(in srgb,var(--accent) 20%,transparent))}
.char64-aura{position:absolute;width:170px;height:170px;border-radius:50%;bottom:20px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);filter:blur(12px)}
.char64-placeholder{position:relative;z-index:2;display:grid;place-items:center;gap:7px;height:100%;color:var(--muted)}.char64-placeholder span{font-size:70px;font-weight:900;color:color-mix(in srgb,var(--accent) 25%,transparent)}.char64-placeholder small{font-size:11px}
.char64-body{padding:17px}.char64-name small{display:block;color:var(--accent);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.char64-name h3{font-size:22px;margin:4px 0 14px}
.char64-stats{display:grid;gap:9px}.char64-stat-label{display:flex;justify-content:space-between;align-items:center;font-size:11px}.char64-stat-label span{color:var(--muted);font-weight:700}.char64-stat-label b{font-size:11px;color:var(--text)}
.char64-bar{height:7px;border-radius:999px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}.char64-bar i{display:block;width:var(--value);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--char-stat-a,var(--accent)),var(--char-stat-b,var(--accent2)));box-shadow:0 0 10px color-mix(in srgb,var(--char-stat-a,var(--accent)) 35%,transparent);transition:width .35s ease}
.char64-stat-strength{--char-stat-a:#ff574a;--char-stat-b:#ffb13d}.char64-stat-agility{--char-stat-a:#5ee8a4;--char-stat-b:#48cfff}.char64-stat-hp{--char-stat-a:#ff3e6c;--char-stat-b:#ff795d}.char64-stat-mana{--char-stat-a:#7a6cff;--char-stat-b:#53d7ff}
.char64-info-btn{margin-top:15px;padding:0;border:0;background:none;color:var(--accent);font-weight:900;font-size:11px;cursor:pointer}
.char64-nav{position:absolute;top:47%;z-index:10;width:42px;height:64px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.20);backdrop-filter:blur(10px);transition:.2s ease}.char64-nav span{font-size:35px;line-height:1}.char64-nav:hover{background:color-mix(in srgb,var(--accent) 15%,var(--panel));border-color:var(--accent);transform:scale(1.04)}.char64-prev{left:-2px}.char64-next{right:-2px}
.char64-footer{text-align:center;margin-top:3px}.char64-view-all{min-width:180px}
.char64-modal[hidden]{display:none}.char64-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px}.char64-modal-backdrop{position:absolute;inset:0;background:rgba(2,5,10,.78);backdrop-filter:blur(8px)}.char64-modal-box{position:relative;z-index:2;width:min(940px,96vw);max-height:88vh;overflow:auto;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,var(--accent) 8%),var(--panel));box-shadow:0 28px 80px rgba(0,0,0,.48)}.char64-modal-close{position:absolute;right:12px;top:12px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:23px;cursor:pointer}.char64-modal-art{min-height:470px;display:grid;place-items:end center;padding:20px;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 50%)}.char64-modal-art img{max-width:92%;max-height:440px;object-fit:contain;filter:drop-shadow(0 20px 25px rgba(0,0,0,.5))}.char64-modal-content{padding:56px 34px 30px}.char64-modal-content h2{font-size:38px;margin:7px 0}.char64-modal-content>b{display:block;color:var(--accent);margin-bottom:14px}.char64-modal-content p{color:var(--muted);line-height:1.75}.char64-modal-stats{display:grid;gap:13px;margin-top:24px}
/* Light mode */
html[data-mode="light"] .char64-card{background:linear-gradient(180deg,color-mix(in srgb,#fff 94%,var(--accent) 6%),#fff);box-shadow:0 15px 34px rgba(35,52,70,.10)}html[data-mode="light"] .char64-art{background:radial-gradient(circle at 50% 68%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 48%),linear-gradient(180deg,color-mix(in srgb,#fff 90%,var(--accent) 10%),#fff)}html[data-mode="light"] .char64-modal-box{background:linear-gradient(145deg,color-mix(in srgb,#fff 94%,var(--accent) 6%),#fff)}
/* Admin */
.char64-master-toggle{margin-bottom:14px}.char64-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.char64-admin-card{min-width:0}.char64-admin-head{display:flex;justify-content:space-between;align-items:start;gap:12px}.char64-admin-head small{color:var(--muted)}.char64-admin-head h2{margin:3px 0 10px}.char64-admin-image{height:210px;border:1px dashed var(--line);border-radius:13px;margin-bottom:10px;display:grid;place-items:center;overflow:hidden;background:var(--panel2);color:var(--muted)}.char64-admin-image img{max-width:90%;max-height:100%;object-fit:contain}.char64-lang-tabs{display:flex;gap:5px;margin:13px 0 8px}.char64-tab{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--muted);cursor:pointer}.char64-tab.is-active{color:var(--text);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}.char64-lang-panel{display:none}.char64-lang-panel.is-active{display:block}.char64-admin-stats{margin-top:13px;padding:11px;border:1px solid var(--line);border-radius:11px}.char64-slider-row{display:grid;grid-template-columns:85px 1fr 38px;gap:9px;align-items:center;margin:9px 0;font-size:11px}.char64-slider-row input{width:100%;accent-color:var(--accent)}.char64-slider-row output{text-align:right;color:var(--accent);font-weight:900}
@media(max-width:980px){.char64-card{flex-basis:calc((100% - 18px)/2)}.char64-admin-grid{grid-template-columns:1fr}}
@media(max-width:650px){.char64-heading{align-items:start}.char64-counter{display:none}.char64-stage-wrap{padding:0 28px}.char64-card{flex-basis:100%}.char64-art{height:300px}.char64-nav{width:36px;height:56px}.char64-prev{left:-5px}.char64-next{right:-5px}.char64-modal-box{grid-template-columns:1fr}.char64-modal-art{min-height:320px}.char64-modal-content{padding:28px 20px}.char64-modal-content h2{font-size:30px}}


/* ============================================================
   V65 — TRUE FULL-WIDTH SHOWCASE + DARK LORD COMMAND
   ============================================================ */

/* Break out of the parent .wrap and span the whole viewport. */
.character-showcase64{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:38px max(24px,calc((100vw - 1180px)/2)) 18px!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 34%,transparent),transparent)!important;
  border-top:1px solid color-mix(in srgb,var(--accent) 10%,var(--line))!important;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,var(--line))!important;
}

/* Keep the 3-column premium layout while using the full browser width. */
.character-showcase64 .char64-stage-wrap{
  width:100%!important;
}
.character-showcase64 .char64-viewport{
  width:100%!important;
}
.character-showcase64 .char64-card{
  flex-basis:calc((100% - 36px)/3)!important;
}

.char64-stat-command{
  --char-stat-a:#f6d36a;
  --char-stat-b:#a56cff;
}
.char64-command-row{
  padding-top:7px;
  border-top:1px dashed color-mix(in srgb,var(--accent) 20%,var(--line));
}
.char64-command-note{
  display:block;
  margin-top:7px;
}

html[data-mode="light"] .character-showcase64{
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,#fff 91%,var(--accent) 9%),#fff)!important;
}

@media(max-width:980px){
  .character-showcase64{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .character-showcase64 .char64-card{
    flex-basis:calc((100% - 18px)/2)!important;
  }
}
@media(max-width:650px){
  .character-showcase64{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .character-showcase64 .char64-card{
    flex-basis:100%!important;
  }
}


/* V66 — immediate character image uploader */
.char66-upload-zone{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
  margin-top:9px;
}
.char66-file-field{margin:0!important}
.char66-upload-btn{
  min-height:42px;
  white-space:nowrap;
  font-weight:900;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line))!important;
  background:color-mix(in srgb,var(--accent) 12%,var(--panel))!important;
  color:var(--text)!important;
}
.char66-upload-btn:hover{
  background:color-mix(in srgb,var(--accent) 22%,var(--panel))!important;
}
.char66-upload-btn:disabled{opacity:.55;cursor:wait}
.char66-upload-status{
  grid-column:1/-1;
  min-height:18px;
  font-size:11px;
  color:var(--muted);
}
.char66-upload-status.is-success{color:#57d890;font-weight:800}
.char66-upload-status.is-error{color:#ff6577;font-weight:800}
.char66-upload-status.is-loading{color:var(--accent)}
.char66-upload-status.is-ready{color:var(--muted)}
@media(max-width:620px){
  .char66-upload-zone{grid-template-columns:1fr}
  .char66-upload-btn{width:100%}
}


/* ============================================================
   V69 — CHARACTER CARD VISUAL ONLY
   Safe CSS-only refinement: no PHP/JS/data/theme logic changed.
   - Remove card borders
   - Let character artwork flow behind/into the text area
   - Increase character size
   ============================================================ */
.character-showcase64 .char64-card{
  border:0!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 44%),
    linear-gradient(180deg,color-mix(in srgb,var(--panel) 97%,var(--accent) 3%),var(--panel))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}
.character-showcase64 .char64-card:hover,
.character-showcase64 .char64-card:focus-visible{
  border:0!important;
  box-shadow:0 24px 54px color-mix(in srgb,var(--accent) 12%,rgba(0,0,0,.30))!important;
}

/* Artwork is taller and deliberately overlaps the information area. */
.character-showcase64 .char64-art{
  height:390px!important;
  margin-bottom:-76px!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 53%)!important;
  pointer-events:none;
}
.character-showcase64 .char64-art img{
  max-height:112%!important;
  max-width:108%!important;
  transform:translateY(-4px) scale(1.08)!important;
  transform-origin:center bottom!important;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.48))!important;
}
.character-showcase64 .char64-card:hover .char64-art img{
  transform:translateY(-8px) scale(1.12)!important;
  filter:
    drop-shadow(0 26px 26px rgba(0,0,0,.52))
    drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 18%,transparent))!important;
}
.character-showcase64 .char64-aura{
  bottom:68px!important;
  width:220px!important;
  height:220px!important;
}

/* Text/stats become the foreground layer over the lower part of the character. */
.character-showcase64 .char64-body{
  position:relative!important;
  z-index:5!important;
  padding:88px 18px 20px!important;
  background:
    linear-gradient(180deg,
      transparent 0,
      color-mix(in srgb,var(--panel) 68%,transparent) 20%,
      color-mix(in srgb,var(--panel) 94%,transparent) 43%,
      var(--panel) 68%)!important;
}
.character-showcase64 .char64-name,
.character-showcase64 .char64-stats,
.character-showcase64 .char64-info-btn{
  position:relative;
  z-index:6;
}
.character-showcase64 .char64-name h3{
  font-size:24px!important;
  margin-top:5px!important;
}
.character-showcase64 .char64-bar{
  background:color-mix(in srgb,var(--text) 10%,transparent)!important;
}

/* Light mode remains readable while preserving the same integrated layout. */
html[data-mode="light"] .character-showcase64 .char64-card{
  border:0!important;
  background:
    radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 44%),
    linear-gradient(180deg,color-mix(in srgb,#fff 96%,var(--accent) 4%),#fff)!important;
  box-shadow:0 18px 40px rgba(35,52,70,.11)!important;
}
html[data-mode="light"] .character-showcase64 .char64-body{
  background:
    linear-gradient(180deg,
      transparent 0,
      rgba(255,255,255,.68) 20%,
      rgba(255,255,255,.94) 43%,
      #fff 68%)!important;
}

/* Keep mobile proportions controlled. */
@media(max-width:650px){
  .character-showcase64 .char64-art{
    height:360px!important;
    margin-bottom:-72px!important;
  }
  .character-showcase64 .char64-art img{
    max-height:110%!important;
    max-width:108%!important;
    transform:translateY(-2px) scale(1.06)!important;
  }
  .character-showcase64 .char64-card:hover .char64-art img{
    transform:translateY(-5px) scale(1.09)!important;
  }
  .character-showcase64 .char64-body{
    padding:84px 17px 19px!important;
  }
}


/* ============================================================
   V70 — FULL BODY INTEGRATED CHARACTER CARD
   Goal: show the WHOLE PNG inside the card, then let the lower
   body blend naturally behind the name/stats area.
   CSS-only visual fix. No data/upload/carousel/theme logic touched.
   ============================================================ */

.character-showcase64 .char64-card{
  overflow:hidden!important;
}

/* Give the artwork enough vertical room to contain the full character. */
.character-showcase64 .char64-art{
  height:470px!important;
  margin:0!important;
  padding:12px 10px 0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 56%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 54%)!important;
}

/* IMPORTANT: contain the PNG, never scale beyond its art box. */
.character-showcase64 .char64-art img{
  width:auto!important;
  height:auto!important;
  max-width:96%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  transform-origin:center bottom!important;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.48))!important;
}

/* Hover keeps the full figure visible; only a tiny scale is allowed. */
.character-showcase64 .char64-card:hover .char64-art img{
  transform:scale(1.015)!important;
  filter:
    drop-shadow(0 23px 24px rgba(0,0,0,.52))
    drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 16%,transparent))!important;
}

/* Pull information upward OVER the lower part of the artwork.
   This is the "lồng vào" effect: image and stats share one visual field. */
.character-showcase64 .char64-body{
  position:relative!important;
  z-index:8!important;
  margin-top:-142px!important;
  padding:150px 18px 20px!important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb,var(--panel) 18%,transparent) 14%,
      color-mix(in srgb,var(--panel) 68%,transparent) 35%,
      color-mix(in srgb,var(--panel) 92%,transparent) 54%,
      var(--panel) 74%)!important;
}

/* Keep the character visually behind text but still fully visible. */
.character-showcase64 .char64-name,
.character-showcase64 .char64-stats,
.character-showcase64 .char64-info-btn{
  position:relative!important;
  z-index:10!important;
}

/* Aura follows the full-body placement. */
.character-showcase64 .char64-aura{
  width:230px!important;
  height:230px!important;
  bottom:72px!important;
  opacity:.9!important;
}

/* Light mode uses a white fade instead of a dark panel fade. */
html[data-mode="light"] .character-showcase64 .char64-body{
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255,255,255,.16) 14%,
      rgba(255,255,255,.70) 35%,
      rgba(255,255,255,.94) 54%,
      #fff 74%)!important;
}

/* Tablet */
@media(max-width:980px){
  .character-showcase64 .char64-art{
    height:440px!important;
  }
  .character-showcase64 .char64-body{
    margin-top:-132px!important;
    padding-top:140px!important;
  }
}

/* Mobile: still show full character, no top/head clipping. */
@media(max-width:650px){
  .character-showcase64 .char64-art{
    height:430px!important;
    padding:10px 8px 0!important;
  }
  .character-showcase64 .char64-art img{
    max-width:98%!important;
    max-height:100%!important;
    transform:none!important;
  }
  .character-showcase64 .char64-card:hover .char64-art img{
    transform:scale(1.01)!important;
  }
  .character-showcase64 .char64-body{
    margin-top:-128px!important;
    padding:136px 17px 19px!important;
  }
}


/* ============================================================
   V71 — CHARACTER IMAGE UNDER TEXT / NO CARD BACKGROUND
   Visual-only fix.
   - remove character card backgrounds completely
   - keep full PNG visible
   - place character artwork UNDER name + stat text
   - text/stats float above the lower body naturally
   ============================================================ */

.character-showcase64 .char64-card{
  position:relative!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.character-showcase64 .char64-card:hover,
.character-showcase64 .char64-card:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  transform:none!important;
}

/* One shared visual field for image + content. */
.character-showcase64 .char64-art{
  position:relative!important;
  z-index:1!important;
  height:520px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  background:transparent!important;
}

/* Full character is visible, centered, and sits behind text. */
.character-showcase64 .char64-art img{
  position:relative!important;
  z-index:1!important;
  width:auto!important;
  height:auto!important;
  max-width:104%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.50))!important;
}
.character-showcase64 .char64-card:hover .char64-art img{
  transform:scale(1.015)!important;
  filter:
    drop-shadow(0 24px 25px rgba(0,0,0,.52))
    drop-shadow(0 0 15px color-mix(in srgb,var(--accent) 15%,transparent))!important;
}

/* Body is transparent and overlaps the LOWER body of the character.
   This makes the PNG visually sit underneath the text/stats. */
.character-showcase64 .char64-body{
  position:relative!important;
  z-index:10!important;
  margin-top:-190px!important;
  padding:190px 18px 18px!important;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb,var(--page) 4%,transparent) 18%,
      color-mix(in srgb,var(--page) 42%,transparent) 40%,
      color-mix(in srgb,var(--page) 72%,transparent) 62%,
      color-mix(in srgb,var(--page) 90%,transparent) 84%,
      color-mix(in srgb,var(--page) 96%,transparent) 100%
    )!important;
  border:0!important;
  box-shadow:none!important;
}

/* Keep all text above the artwork. */
.character-showcase64 .char64-name,
.character-showcase64 .char64-stats,
.character-showcase64 .char64-info-btn{
  position:relative!important;
  z-index:20!important;
}
.character-showcase64 .char64-name h3,
.character-showcase64 .char64-name small,
.character-showcase64 .char64-stat-label,
.character-showcase64 .char64-info-btn{
  text-shadow:0 2px 5px rgba(0,0,0,.45);
}

/* Stat tracks remain readable over artwork without creating a card box. */
.character-showcase64 .char64-bar{
  background:color-mix(in srgb,var(--text) 14%,transparent)!important;
  backdrop-filter:blur(2px);
}

/* Remove aura background block so only the actual PNG is visible. */
.character-showcase64 .char64-aura{
  display:none!important;
}

/* Light mode: same transparent card, with only a soft readable fade under text. */
html[data-mode="light"] .character-showcase64 .char64-card{
  background:transparent!important;
  box-shadow:none!important;
}
html[data-mode="light"] .character-showcase64 .char64-body{
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,.05) 18%,
      rgba(255,255,255,.46) 40%,
      rgba(255,255,255,.76) 62%,
      rgba(255,255,255,.92) 84%,
      rgba(255,255,255,.97) 100%
    )!important;
}
html[data-mode="light"] .character-showcase64 .char64-name h3,
html[data-mode="light"] .character-showcase64 .char64-name small,
html[data-mode="light"] .character-showcase64 .char64-stat-label,
html[data-mode="light"] .character-showcase64 .char64-info-btn{
  text-shadow:none!important;
}

/* Tablet */
@media(max-width:980px){
  .character-showcase64 .char64-art{
    height:490px!important;
  }
  .character-showcase64 .char64-body{
    margin-top:-178px!important;
    padding-top:178px!important;
  }
}

/* Mobile */
@media(max-width:650px){
  .character-showcase64 .char64-art{
    height:455px!important;
  }
  .character-showcase64 .char64-art img{
    max-width:102%!important;
    max-height:100%!important;
  }
  .character-showcase64 .char64-body{
    margin-top:-165px!important;
    padding:165px 16px 16px!important;
  }
}


/* ============================================================
   V72 — TRUE EDGE-TO-EDGE CHARACTER MODULE
   Full width like header/menu/footer, while keeping the character
   content safely padded inside the viewport.
   ============================================================ */
.character-showcase64{
  position:relative!important;
  left:50%!important;
  right:50%!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:-50vw!important;
  margin-right:-50vw!important;
  box-sizing:border-box!important;

  /* module itself reaches both browser edges */
  padding-left:clamp(14px,2.2vw,34px)!important;
  padding-right:clamp(14px,2.2vw,34px)!important;
}

/* Do not re-limit the slider to the old .wrap width. */
.character-showcase64 .char64-stage-wrap,
.character-showcase64 .char64-viewport{
  width:100%!important;
  max-width:none!important;
}

/* Three characters use the available full-width module space. */
@media(min-width:981px){
  .character-showcase64 .char64-card{
    flex:0 0 calc((100% - 44px)/3)!important;
    max-width:none!important;
  }
}

/* Tablet keeps two columns but remains edge-to-edge. */
@media(min-width:651px) and (max-width:980px){
  .character-showcase64{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .character-showcase64 .char64-card{
    flex:0 0 calc((100% - 20px)/2)!important;
    max-width:none!important;
  }
}

/* Phone keeps one character with a small safe gutter. */
@media(max-width:650px){
  .character-showcase64{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .character-showcase64 .char64-card{
    flex:0 0 100%!important;
    max-width:none!important;
  }
}


/* ============================================================
   V73 — EDITABLE HEADING ALIGN + 20 CHARACTER HOVER EFFECTS
   Layered on top of V72. No data/carousel/upload logic changed.
   ============================================================ */

/* Heading alignment */
.character-showcase64 .char64-heading.char73-align-left{
  text-align:left!important;
}
.character-showcase64 .char64-heading.char73-align-left .char73-heading-copy{
  margin-right:auto!important;
}
.character-showcase64 .char64-heading.char73-align-center{
  text-align:center!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
}
.character-showcase64 .char64-heading.char73-align-center .char73-heading-copy{
  margin:0 auto!important;
  max-width:860px!important;
}
.character-showcase64 .char64-heading.char73-align-center .char64-counter{
  position:absolute!important;
  right:clamp(14px,2.2vw,34px)!important;
}
.character-showcase64 .char64-heading.char73-align-right{
  text-align:right!important;
  flex-direction:row-reverse!important;
}
.character-showcase64 .char64-heading.char73-align-right .char73-heading-copy{
  margin-left:auto!important;
}
.character-showcase64 .char64-heading.char73-align-right .char73-heading-copy p{
  margin-left:auto!important;
}
.character-showcase64 .char64-heading{
  position:relative!important;
}

/* FX foundation */
.character-showcase64 .char64-card{
  --char73-glow:color-mix(in srgb,var(--accent) 42%,transparent);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease,opacity .32s ease!important;
}
.character-showcase64 .char64-card::before,
.character-showcase64 .char64-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:30;
  transition:opacity .28s ease;
}

/* 01 none */
.char73-fx-none:hover{transform:none!important;filter:none!important}

/* 02 lift */
.char73-fx-lift:hover{transform:translateY(-10px)!important}

/* 03 zoom */
.char73-fx-zoom:hover .char64-art img{transform:scale(1.07)!important}

/* 04 glow */
.char73-fx-glow:hover .char64-art img{filter:drop-shadow(0 22px 24px rgba(0,0,0,.50)) drop-shadow(0 0 24px var(--char73-glow))!important}

/* 05 fire */
.char73-fx-fire:hover .char64-art img{filter:drop-shadow(0 20px 22px rgba(0,0,0,.5)) drop-shadow(0 0 10px #ff6a25) drop-shadow(0 0 25px #ff2d18)!important}

/* 06 ice */
.char73-fx-ice:hover .char64-art img{filter:drop-shadow(0 20px 22px rgba(0,0,0,.5)) drop-shadow(0 0 10px #9feaff) drop-shadow(0 0 24px #4fbfff)!important}

/* 07 electric */
.char73-fx-electric:hover .char64-art img{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #51dcff) drop-shadow(0 0 20px #6d7cff)!important}

/* 08 gold */
.char73-fx-gold:hover .char64-art img{filter:drop-shadow(0 20px 22px rgba(0,0,0,.5)) drop-shadow(0 0 11px #ffe183) drop-shadow(0 0 26px #ffb52e)!important}

/* 09 pulse */
.char73-fx-pulse:hover .char64-art img{animation:char73Pulse .85s ease-in-out infinite alternate}

/* 10 tilt left */
.char73-fx-tilt_left:hover{transform:perspective(900px) rotateY(-7deg) rotateX(2deg)!important}

/* 11 tilt right */
.char73-fx-tilt_right:hover{transform:perspective(900px) rotateY(7deg) rotateX(2deg)!important}

/* 12 float */
.char73-fx-float:hover .char64-art img{animation:char73Float 1.25s ease-in-out infinite alternate}

/* 13 shadow */
.char73-fx-shadow:hover .char64-art img{filter:drop-shadow(0 34px 20px rgba(0,0,0,.72))!important;transform:translateY(-5px) scale(1.02)!important}

/* 14 aura */
.char73-fx-aura::before{inset:10% 12% 24%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 25%,transparent),transparent 65%);filter:blur(12px);z-index:0}
.char73-fx-aura:hover::before{opacity:1;animation:char73Aura 1s ease-in-out infinite alternate}

/* 15 scan */
.char73-fx-scan::after{left:3%;right:3%;height:3px;top:8%;background:linear-gradient(90deg,transparent,#fff,var(--accent),#fff,transparent);box-shadow:0 0 14px var(--accent)}
.char73-fx-scan:hover::after{opacity:.9;animation:char73Scan 1.3s linear infinite}

/* 16 border */
.char73-fx-border::before{inset:0;border-radius:22px;border:1px solid var(--accent);box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 18%,transparent),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent)}
.char73-fx-border:hover::before{opacity:1}

/* 17 crystal */
.char73-fx-crystal:hover .char64-art img{filter:brightness(1.10) contrast(1.04) drop-shadow(0 0 9px #fff8) drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 45%,transparent))!important}

/* 18 shock */
.char73-fx-shock:hover .char64-art img{animation:char73Shock .28s linear 2}

/* 19 focus */
.character-showcase64:has(.char73-fx-focus:hover) .char64-card:not(.char73-fx-focus:hover){opacity:.52;filter:blur(1.2px)}
.char73-fx-focus:hover{transform:scale(1.025)!important;z-index:25!important}

/* 20 ghost */
.char73-fx-ghost:hover .char64-art img{opacity:.78;filter:grayscale(.25) brightness(1.2) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 38%,transparent))!important;transform:translateY(-5px)!important}

/* 21 flare (20 selectable effects + none) */
.char73-fx-flare::after{width:90px;height:90px;border-radius:50%;top:22%;left:15%;background:radial-gradient(circle,#fff, color-mix(in srgb,var(--accent) 68%,transparent) 18%,transparent 65%);filter:blur(2px)}
.char73-fx-flare:hover::after{opacity:.75;animation:char73Flare .9s ease-out infinite}

@keyframes char73Pulse{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes char73Float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes char73Aura{from{transform:scale(.92);opacity:.45}to{transform:scale(1.08);opacity:1}}
@keyframes char73Scan{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:78%;opacity:0}}
@keyframes char73Shock{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes char73Flare{0%{transform:translate(-20px,15px) scale(.6);opacity:0}35%{opacity:.85}100%{transform:translate(190px,-70px) scale(1.25);opacity:0}}

/* Admin */
.char73-heading-admin{margin-bottom:16px}.char73-align-row{max-width:320px}.char73-heading-panel{display:none}.char73-heading-panel.is-active{display:block}.char73-hover-select{margin-top:14px;padding:11px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--accent) 3%,var(--panel))}
.char73-hover-select .field{margin:0 0 6px}
@media(max-width:650px){
  .character-showcase64 .char64-heading.char73-align-center .char64-counter{display:none!important}
}


/* ============================================================
   V74 — CHARACTER DETAIL ARTICLE ASSIGNMENT
   ============================================================ */
.char74-article-assign{
  margin-top:13px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:11px;
  overflow:hidden;
  background:color-mix(in srgb,var(--accent) 3%,var(--panel));
}
.char74-article-toggle{
  width:100%!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  font-weight:900!important;
}
.char74-chevron{font-size:18px;transition:transform .2s ease}
.char74-article-toggle.is-open .char74-chevron{transform:rotate(180deg)}
.char74-article-panel{
  padding:0 11px 11px;
  border-top:1px solid var(--line);
}
.char74-article-panel[hidden]{display:none!important}
.char74-article-panel .field{margin-top:10px}
.char74-detail-article-btn{
  margin-top:22px!important;
  display:inline-flex!important;
  width:auto!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  color:var(--theme-btn-text,#071019)!important;
  border-color:transparent!important;
  font-weight:900!important;
}
.char74-detail-article-btn[hidden]{display:none!important}


/* ============================================================
   V75 — DETAIL ARTICLE BUTTON ALWAYS VISIBLE IN CHARACTER MODAL
   ============================================================ */
.char64-modal-content .char74-detail-article-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:24px!important;
  min-height:42px!important;
  padding:11px 17px!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  color:var(--theme-btn-text,#071019)!important;
  border:0!important;
  font-weight:900!important;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.char64-modal-content .char74-detail-article-btn.is-disabled{
  background:color-mix(in srgb,var(--panel2) 92%,var(--accent) 8%)!important;
  color:var(--muted)!important;
  border:1px solid var(--line)!important;
  cursor:not-allowed!important;
  opacity:.72!important;
}
.char64-modal-content .char74-detail-article-btn:not(.is-disabled):hover{
  filter:brightness(1.08)!important;
}


/* ============================================================
   V76 — MODAL PREV/NEXT CHARACTER NAVIGATION
   ============================================================ */
.char64-modal-box{
  overflow:visible!important;
}
.char76-modal-nav{
  position:absolute!important;
  top:50%!important;
  z-index:20!important;
  width:48px!important;
  height:72px!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line))!important;
  background:color-mix(in srgb,var(--panel) 90%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(10px)!important;
  cursor:pointer!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
.char76-modal-nav span{
  font-size:38px!important;
  line-height:1!important;
  transform:translateY(-2px);
}
.char76-modal-prev{left:-64px!important}
.char76-modal-next{right:-64px!important}
.char76-modal-nav:hover{
  background:color-mix(in srgb,var(--accent) 16%,var(--panel))!important;
  border-color:var(--accent)!important;
  transform:translateY(-50%) scale(1.05)!important;
}
html[data-mode="light"] .char76-modal-nav{
  background:rgba(255,255,255,.92)!important;
  color:var(--text)!important;
  box-shadow:0 12px 30px rgba(34,50,66,.16)!important;
}

@media(max-width:1080px){
  .char76-modal-prev{left:12px!important}
  .char76-modal-next{right:12px!important}
  .char76-modal-nav{
    width:42px!important;
    height:62px!important;
    background:color-mix(in srgb,var(--panel) 82%,transparent)!important;
  }
}
@media(max-width:650px){
  .char76-modal-nav{
    top:45%!important;
    width:36px!important;
    height:54px!important;
    border-radius:12px!important;
  }
  .char76-modal-prev{left:8px!important}
  .char76-modal-next{right:8px!important}
  .char76-modal-nav span{font-size:31px!important}
}