body.characters-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,138,195,.24), transparent 32rem),
    radial-gradient(circle at 90% 35%, rgba(153,113,255,.18), transparent 30rem),
    #0b0910;
  color: #fff;
}

.characters-shell { width: min(1380px, calc(100% - 48px)); margin: 0 auto; }
.characters-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.characters-logo { width:105px; display:block; }
.characters-nav-links { display:flex; align-items:center; gap:26px; }
.characters-nav-links a { color:#fff; font-weight:700; }
.characters-nav-links a[aria-current="page"] { color:var(--pink); }
.characters-lang { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:9px 14px; }

.characters-hero { padding:48px 0 28px; max-width:900px; }
.characters-kicker { color:var(--pink); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.characters-hero h1 { font-family:var(--font-heading); font-size:clamp(42px,5.5vw,76px); line-height:.95; margin:9px 0 13px; font-weight:400; }
.characters-hero p { max-width:720px; color:rgba(255,255,255,.72); font-size:clamp(15px,1.5vw,18px); margin:0; }

.characters-permission {
  position:absolute;
  z-index:20;
  top:88px;
  right:0;
}
.characters-permission summary {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.8);
  font-family:Georgia,serif;
  font-size:18px;
  font-weight:700;
  font-style:italic;
  cursor:pointer;
  list-style:none;
  transition:background .2s,color .2s,transform .2s;
}
.characters-permission summary::-webkit-details-marker { display:none; }
.characters-permission summary:hover,
.characters-permission[open] summary { background:var(--pink); color:#210b16; transform:scale(1.06); }
.characters-permission-panel {
  position:absolute;
  top:44px;
  right:0;
  width:min(340px,calc(100vw - 28px));
  padding:17px 18px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  background:#211a27;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.55;
}

.characters-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.character-filter { border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 17px; color:#fff; background:rgba(255,255,255,.04); }
.character-filter:first-child { background:var(--pink); border-color:var(--pink); color:#160910; }

.character-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-bottom:110px; }
.character-card { --card-bg:url("/assets/images/character-card-geometric-ice.png"); --character-scale:1.12; --character-y:50%; position:relative; overflow:hidden; width:100%; aspect-ratio:3/4; border:1px solid rgba(244,216,142,.8); border-radius:4px; background:#211836; color:#fff; box-shadow:0 16px 55px rgba(0,0,0,.32),0 0 0 2px rgba(180,129,255,.08); isolation:isolate; }
.character-card::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--card-bg) center/100% 100% no-repeat; }
.character-card::after { content:""; position:absolute; inset:0; z-index:0; border-radius:3px; background:linear-gradient(180deg,transparent 48%,rgba(13,8,20,.2) 62%,rgba(8,5,13,.94) 98%);
  box-shadow:inset 0 0 0 1px rgba(255,246,213,.25);
  pointer-events:none;
}
.character-card--ditto { --card-bg:url("/assets/images/character-card-geometric-ice.png"); --character-scale:1.06; --character-y:52%; }
.character-card--lionel { --card-bg:url("/assets/images/character-card-geometric-coral.png"); --character-scale:1.18; --character-y:51%; }
.character-card--elodie { --card-bg:url("/assets/images/character-card-geometric-teal.png"); --character-scale:1.28; --character-y:47%; }
.character-card--frank { --card-bg:url("/assets/images/character-card-lavender-gold.png"); --character-scale:1.20; --character-y:50%; }
.character-card--noa { --card-bg:url("/assets/images/character-card-geometric-amber.png"); --character-scale:1.18; --character-y:49%; }
.character-card img { width:100%; height:100%; object-fit:contain; object-position:center; position:absolute; left:50%; top:var(--character-y); z-index:-1; padding:5px; transform:translate(-50%,-50%) scale(var(--character-scale)); transform-origin:center; filter:drop-shadow(0 20px 18px rgba(45,25,4,.45)); transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease; }
.character-card:hover img { transform:translate(-50%,-51%) scale(calc(var(--character-scale) + .045)); filter:drop-shadow(0 27px 23px rgba(35,18,2,.55)); }
.character-card-badge {
  position:absolute;
  z-index:3;
  top:14px;
  left:14px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:3px;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#201321;
  background:rgba(255,244,250,.92);
  box-shadow:3px 4px 0 rgba(20,10,20,.3);
  backdrop-filter:blur(8px);
}
.character-card-badge--official { background:#ffe1ef; color:#5a1639; border-color:#ff9dca; }
.character-card-badge--player { background:#dff6ff; color:#123d58; border-color:#8ed8f4; }
.character-card-badge--winner { background:#fff0b8; color:#5b3b08; border-color:#e4bb52; }
.character-card-copy { position:absolute; z-index:1; left:25px; right:25px; bottom:24px; }
.character-card-copy h2 { font-family:var(--font-heading); font-weight:400; font-size:34px; margin:0 0 8px; }
.character-card-role { margin:0 0 10px; color:rgba(255,255,255,.75); font-size:14px; font-weight:700; }
.character-card-quote { max-height:0; opacity:0; overflow:hidden; margin:0; color:#fff; font-size:16px; line-height:1.45; transform:translateY(12px); transition:max-height .4s ease,opacity .3s ease,transform .4s ease,margin .4s ease; }
.character-card:hover .character-card-quote,
.character-card:focus-visible .character-card-quote { max-height:100px; opacity:1; transform:none; margin:12px 0 0; }
.character-card:hover .character-tags,
.character-card:focus-visible .character-tags { opacity:.55; }
.character-tags { display:flex; flex-wrap:wrap; gap:7px; }
.character-tags span { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); font-size:13px; }

.character-detail { position:relative; display:grid; grid-template-columns:minmax(300px,.82fr) minmax(380px,1.18fr); gap:72px; align-items:start; padding:112px 0 110px; }
.character-visual-column { position:sticky; top:24px; width:100%; max-width:480px; justify-self:end; }
.character-portrait { --detail-card-bg:url("/assets/images/character-card-geometric-ice.png"); --detail-character-scale:1.08; --detail-character-y:50%; position:relative; width:100%; aspect-ratio:3/4; background:#211836; border:1px solid rgba(244,216,142,.8); border-radius:5px; overflow:hidden; isolation:isolate; box-shadow:0 20px 65px rgba(0,0,0,.32); }
.character-portrait::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--detail-card-bg) center/100% 100% no-repeat; }
.character-portrait::after { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,transparent 62%,rgba(10,6,16,.36)); pointer-events:none; }
.character-portrait img { width:100%; height:100%; position:absolute; left:50%; top:var(--detail-character-y); object-fit:contain; object-position:center; padding:8px; z-index:-1; transform:translate(-50%,-50%) scale(var(--detail-character-scale)); transform-origin:center; filter:drop-shadow(0 26px 22px rgba(0,0,0,.42)); }
.character-portrait--ditto { --detail-card-bg:url("/assets/images/character-card-geometric-ice.png"); --detail-character-scale:1.06; --detail-character-y:52%; }
.character-portrait--lionel { --detail-card-bg:url("/assets/images/character-card-geometric-coral.png"); --detail-character-scale:1.18; --detail-character-y:51%; }
.character-portrait--elodie { --detail-card-bg:url("/assets/images/character-card-geometric-teal.png"); --detail-character-scale:1.28; --detail-character-y:47%; }
.character-portrait--frank { --detail-card-bg:url("/assets/images/character-card-lavender-gold.png"); --detail-character-scale:1.20; --detail-character-y:50%; }
.character-portrait--noa { --detail-card-bg:url("/assets/images/character-card-geometric-amber.png"); --detail-character-scale:1.18; --detail-character-y:49%; }
.character-back { position:absolute; top:48px; left:0; display:inline-block; margin:0; color:rgba(255,255,255,.72); }
.character-detail h1 { font-family:var(--font-heading); font-size:clamp(44px,5.5vw,78px); line-height:.95; margin:0 0 20px; font-weight:400; }
.character-lede { font-size:22px; color:rgba(255,255,255,.75); margin-bottom:28px; }
.character-detail section { margin-top:44px; }
.character-detail h2 { color:var(--pink); font-size:14px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px; }
.character-detail section p { font-size:18px; color:rgba(255,255,255,.82); }
.character-quote { border-left:3px solid var(--pink); padding:8px 0 8px 24px; font-size:26px; line-height:1.45; color:#fff; }
.character-credit { margin:11px 4px 0; padding:0; border:0; color:rgba(255,255,255,.36); font-size:11px; line-height:1.45; text-align:center; }
.character-creator { display:flex; justify-content:center; align-items:baseline; gap:7px; margin:13px 4px 0; color:rgba(255,255,255,.62); font-size:13px; line-height:1.4; }
.character-creator-label { color:rgba(255,255,255,.36); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.character-creator-name { color:rgba(255,255,255,.88); font-weight:750; }
.character-creator-name[href]:hover { color:var(--pink); }
.character-creator + .character-credit { margin-top:3px; }
.character-story p { color:rgba(255,255,255,.74); font-size:16px; }
.character-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.character-fact { padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.045); }
.character-fact strong { display:block; color:var(--pink); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }

.character-home-cta { padding:100px var(--page-padding); background:linear-gradient(125deg,#130d18,#3a1830); color:#fff; overflow:hidden; }
.character-home-cta-inner { max-width:1280px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.character-home-cta h2 { font-family:var(--font-heading); font-size:clamp(48px,7vw,92px); line-height:.95; font-weight:400; margin:0 0 20px; }
.character-home-cta p { color:rgba(255,255,255,.75); font-size:19px; max-width:620px; }
.character-home-cta-button { display:inline-flex; margin-top:20px; padding:15px 24px; border-radius:999px; background:var(--pink); color:#1b0a13; font-weight:800; }
.character-home-cta-images { display:grid; grid-template-columns:1fr 1fr; gap:14px; transform:rotate(3deg); }
.character-home-cta-images img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:22px; background:#24152b; }

.character-hero-sticker {
  position:absolute;
  z-index:8;
  left:-18px;
  top:auto;
  bottom:48px;
  width:252px;
  min-height:174px;
  padding:22px 50px 24px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#21101b;
  background:#ffe46d;
  border:3px solid #21101b;
  border-radius:0 26px 26px 0;
  box-shadow:-8px 10px 0 #ff8ac3,0 18px 45px rgba(38,8,28,.25);
  transform:rotate(-3deg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),left .3s ease,box-shadow .3s ease;
}
.character-hero-sticker::before {
  content:"";
  position:absolute;
  width:58px;
  height:19px;
  top:-10px;
  left:42%;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(40,20,35,.12);
  transform:rotate(-7deg);
}
.character-hero-sticker:hover,
.character-hero-sticker:focus-visible {
  left:0;
  color:#21101b;
  transform:rotate(0) translateY(-5px);
  box-shadow:-5px 7px 0 #ff8ac3,0 22px 55px rgba(38,8,28,.3);
}
.character-hero-sticker-kicker {
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.character-hero-sticker strong {
  display:block;
  margin:5px 0 7px;
  font-family:var(--font-heading);
  font-size:29px;
  line-height:.95;
  font-weight:400;
}
.character-hero-sticker-cta { font-size:13px; font-weight:850; }
.character-hero-sticker-faces {
  position:absolute;
  right:-46px;
  bottom:-38px;
  width:84px;
  height:84px;
  border-radius:50%;
  background:#fff1f6;
  border:3px solid #21101b;
  overflow:hidden;
}
.character-hero-sticker-faces img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }

.character-hero-sticker--ja {
  top:auto;
  bottom:48px;
}

.nav-link.character-nav-cta {
  border:1px solid #ff9dca;
  background:rgba(255,138,195,.14);
  color:#fff4fa;
  box-shadow:0 0 0 2px rgba(255,138,195,.08),0 5px 16px rgba(151,37,101,.16);
}
.nav-link.character-nav-cta:hover,
.nav-link.character-nav-cta:focus-visible {
  border-color:#ffe1ef;
  background:var(--pink);
  color:#2a0c1c;
}

@media (max-width:1150px) {
  .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .character-detail { grid-template-columns:1fr; }
  .character-visual-column { position:relative; top:auto; justify-self:center; }
  .character-home-cta-inner { grid-template-columns:1fr; }
  .character-hero-sticker { top:auto; bottom:50px; left:-10px; width:218px; min-height:145px; padding:18px 42px 20px 25px; }
  .character-hero-sticker--ja { bottom:52px; }
  .character-hero-sticker strong { font-size:24px; }
}
@media (max-width:600px) {
  .characters-shell { width:min(100% - 28px,1380px); }
  .characters-nav-links a:not(.characters-lang) { display:none; }
  .characters-hero { padding:30px 42px 22px 0; }
  .characters-hero .characters-kicker { display:none; }
  .characters-permission { top:76px; right:0; }
  .character-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .character-card { border-radius:3px; }
  .character-card-copy { left:14px; right:14px; bottom:14px; }
  .character-card-copy h2 { font-size:25px; }
  .character-tags span:nth-child(n+3) { display:none; }
  .character-card-role { font-size:12px; }
  .character-card-badge { top:9px; left:9px; padding:5px 7px; font-size:8px; }
  .character-card-quote { display:none; }
  .character-detail { padding-top:35px; gap:38px; }
  .character-portrait { border-radius:4px; }
  .character-home-cta { padding:70px 20px; }
  .character-hero-sticker { left:-6px; bottom:40px; width:190px; min-height:118px; padding:14px 36px 17px 17px; border-width:2px; border-radius:0 20px 20px 0; box-shadow:-5px 6px 0 #ff8ac3,0 14px 30px rgba(38,8,28,.22); }
  .character-hero-sticker--ja { bottom:42px; }
  .character-hero-sticker strong { font-size:20px; margin-block:3px 5px; }
  .character-hero-sticker-kicker { font-size:9px; }
  .character-hero-sticker-cta { font-size:11px; }
  .character-hero-sticker-faces { right:-32px; bottom:-27px; width:61px; height:61px; border-width:2px; }
}