/* OHANA V36 · CINEMATIC TITLE SYSTEM
   Canonical, fully-scoped composition. Legacy menu rules in style.css are neutralized here. */
#char-select{
  --hero-tint:#ffd36a;
  position:fixed!important;inset:0!important;z-index:40!important;
  display:grid!important;grid-template-rows:42px minmax(0,1fr) 22px!important;grid-template-areas:none!important;grid-auto-flow:row!important;
  width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;gap:0!important;
  overflow:hidden!important;isolation:isolate;background:#030712!important;color:#fff;
  font-family:Outfit,system-ui,sans-serif;
}
body.playing #char-select{display:none!important}
#char-select .title-sky,#char-select #title-fx{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
#char-select .title-sky{z-index:0!important;pointer-events:none!important}
#char-select::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse at 50% 32%,transparent 0 25%,rgba(3,7,18,.08) 52%,rgba(1,3,9,.54) 100%),
  linear-gradient(180deg,rgba(1,4,12,.14),transparent 28%,transparent 62%,rgba(1,4,10,.72))}
#char-select::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 170px rgba(0,0,0,.44)}

#char-select .brand-bar{
  grid-area:auto!important;position:relative!important;inset:auto!important;top:auto!important;z-index:12!important;
  order:0!important;width:auto!important;height:42px!important;margin:0!important;padding:0 28px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:18px!important;
  background:linear-gradient(180deg,rgba(2,5,13,.7),rgba(2,5,13,.28))!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;
  backdrop-filter:blur(16px);
}
#char-select .brand-bar a{color:rgba(255,255,255,.58)!important;font:800 9px/1 Outfit,sans-serif!important;letter-spacing:.16em!important;text-decoration:none!important;text-transform:uppercase}
#char-select .brand-bar a:hover,#char-select .brand-bar a:focus-visible{color:#fff!important}
#char-select .brand-gb{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:6px!important;color:#fff!important}

#char-select .title-shell{
  position:relative!important;inset:auto!important;z-index:5!important;order:0!important;
  align-self:stretch!important;justify-self:center!important;
  width:min(1360px,calc(100vw - 80px))!important;min-width:0!important;min-height:0!important;height:auto!important;
  margin:0!important;padding:clamp(18px,2.6vh,28px) 0 clamp(12px,2vh,20px)!important;
  display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr) auto!important;
  align-items:stretch!important;justify-items:stretch!important;gap:0!important;
  transform:none!important;
}

#char-select .title-stack{
  grid-area:auto!important;position:relative!important;inset:auto!important;grid-column:1!important;grid-row:1!important;
  order:0!important;z-index:8!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;justify-self:stretch!important;
  display:grid!important;justify-items:center!important;align-content:start!important;text-align:center!important;
  transform:none!important;filter:none!important;isolation:isolate;
}
#char-select .eyebrow{margin:0 0 3px!important;color:#ffe09a!important;font:800 clamp(8px,.62vw,10px)/1.2 Outfit,sans-serif!important;letter-spacing:.42em!important;text-transform:uppercase}
#char-select .title-stack h1{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;margin:0!important;padding:0!important;line-height:.78!important}
#char-select .title-stack h1 .word.project,#char-select .word.project{
  margin:0 0 3px!important;padding:0!important;color:rgba(238,246,255,.72)!important;
  font:800 clamp(10px,.85vw,13px)/1 Outfit,sans-serif!important;letter-spacing:.72em!important;text-indent:.72em!important;
}
#char-select .title-stack h1 .word.ohana,#char-select .word.ohana{
  display:block!important;margin:0!important;padding:0!important;
  font:700 clamp(68px,7.3vw,118px)/.78 Fredoka,sans-serif!important;font-size:clamp(68px,7.3vw,118px)!important;
  letter-spacing:-.065em!important;text-indent:0!important;
  background:linear-gradient(180deg,#fff 0%,#fff3c3 44%,color-mix(in srgb,var(--hero-tint) 72%,#8eeaff) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  text-shadow:none!important;filter:drop-shadow(0 18px 34px rgba(0,0,0,.34))!important;
  animation:none!important;
}
#char-select .tagline{position:relative!important;margin:11px 0 0!important;max-width:none!important;color:rgba(244,248,255,.83)!important;font:600 clamp(13px,1vw,16px)/1.25 Outfit,sans-serif!important;letter-spacing:.02em!important}

#char-select .hero-stage{
  grid-area:auto!important;position:relative!important;inset:auto!important;grid-column:1!important;grid-row:2!important;order:0!important;
  align-self:stretch!important;justify-self:stretch!important;display:grid!important;place-items:center!important;
  width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:visible!important;isolation:isolate;
}
#char-select .hero-stage::before{content:"";position:absolute;left:50%;top:62%;width:min(620px,50vw);height:min(150px,18vh);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--hero-tint) 24%,transparent),rgba(0,0,0,0) 70%);filter:blur(14px);pointer-events:none}
#char-select .hero-stage::after{content:"";position:absolute;left:50%;bottom:8%;width:min(760px,58vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--hero-tint) 45%,transparent),transparent);opacity:.7;pointer-events:none}

#char-select #chars{
  grid-area:auto!important;position:absolute!important;inset:0!important;order:0!important;z-index:4!important;
  display:block!important;flex:none!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;overflow:visible!important;isolation:isolate!important;perspective:1400px;
  animation:none!important;transform:none!important;
}
#char-select #chars .chars-grid,#char-select .chars-grid{
  position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;overflow:visible!important;grid-template-columns:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;transform:none!important;
}
#char-select #chars .char-card{
  position:absolute!important;left:50%!important;top:47%!important;z-index:1!important;
  display:none!important;flex:none!important;width:min(360px,29vw)!important;min-width:0!important;height:min(350px,43vh)!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;outline:0;overflow:visible!important;opacity:0!important;filter:none!important;
  transform:translate(-50%,-50%)!important;transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .4s ease,filter .4s ease!important;
  cursor:pointer!important;animation:none!important;
}
#char-select #chars .char-card.selected{
  display:flex!important;z-index:6!important;opacity:1!important;pointer-events:auto!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  transform:translate(-50%,-50%) scale(1)!important;filter:none!important;
}
#char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{
  display:flex!important;z-index:3!important;opacity:.42!important;pointer-events:auto!important;
  width:min(180px,15vw)!important;height:min(230px,30vh)!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  filter:none!important;
}
#char-select #chars .char-card.is-prev{transform:translate(calc(-50% - clamp(250px,24vw,380px)),-50%) scale(.82)!important}
#char-select #chars .char-card.is-next{transform:translate(calc(-50% + clamp(250px,24vw,380px)),-50%) scale(.82)!important}
#char-select #chars .char-card.is-prev2,#char-select #chars .char-card.is-next2{display:none!important;opacity:0!important;pointer-events:none!important}
#char-select #chars .char-card:hover{box-shadow:none!important}
#char-select #chars .char-card.selected:hover{transform:translate(-50%,-50%) scale(1.015)!important}
#char-select #chars .portrait{
  position:relative!important;order:0!important;display:block!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;overflow:visible!important;filter:none!important;
}
#char-select #chars .char-card.is-prev .portrait,#char-select #chars .char-card.is-next .portrait{height:100%!important;filter:none!important}
#char-select #chars .portrait canvas{display:block!important;width:100%!important;height:100%!important;image-rendering:auto!important;filter:none}
#char-select #chars .char-card h3,#char-select #chars .char-card .role,#char-select #chars .char-card .h-move,#char-select #chars .char-card small,#char-select #chars .char-card .hint,#char-select #chars .char-card .swatch,#char-select #chars .form-rail{display:none!important}

#char-select .hero-dossier{
  position:absolute!important;left:50%!important;right:auto!important;bottom:clamp(8px,2vh,18px)!important;top:auto!important;z-index:9!important;
  transform:translateX(-50%)!important;width:min(460px,72vw)!important;max-width:none!important;margin:0!important;padding:10px 18px!important;
  display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto auto!important;column-gap:12px!important;row-gap:2px!important;
  justify-content:center!important;justify-items:center!important;align-items:center!important;text-align:center!important;
  background:linear-gradient(180deg,rgba(5,10,21,.38),rgba(5,10,21,.64))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.24)!important;backdrop-filter:blur(14px);pointer-events:none!important;
}
#char-select .dossier-kicker{grid-column:1/-1!important;color:color-mix(in srgb,var(--hero-tint) 76%,white)!important;font:800 8px/1 Outfit,sans-serif!important;letter-spacing:.32em!important;text-transform:uppercase}
#char-select .hero-dossier strong{grid-column:1!important;grid-row:2/4!important;margin:0!important;color:#fff!important;font:700 clamp(27px,2.5vw,38px)/.92 Fredoka,sans-serif!important;text-shadow:0 8px 24px #000!important}
#char-select .hero-dossier>span:not(.dossier-kicker){grid-column:2!important;grid-row:2!important;justify-self:start!important;color:rgba(255,255,255,.64)!important;font:600 10px/1.2 Outfit,sans-serif!important}
#char-select .dossier-meta{grid-column:2!important;grid-row:3!important;display:flex!important;gap:6px!important;margin:3px 0 0!important;justify-self:start!important}
#char-select .dossier-line{grid-column:1/-1!important;grid-row:4!important;max-width:390px!important;margin:6px 0 0!important;color:rgba(232,241,251,.58)!important;font:600 9px/1.35 Outfit,sans-serif!important;letter-spacing:.01em!important;text-align:center!important}
#char-select .dossier-meta span{padding:3px 7px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:99px!important;background:rgba(0,0,0,.18)!important;color:rgba(255,255,255,.76)!important;font:800 7px/1 Outfit,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase}

#char-select .roster-arrow{
  position:absolute!important;top:47%!important;z-index:12!important;width:44px!important;height:58px!important;margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:15px!important;
  background:rgba(3,8,18,.42)!important;color:#fff!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important;backdrop-filter:blur(14px);
  font:400 34px/1 system-ui!important;cursor:pointer!important;transform:translateY(-50%)!important;transition:.2s ease!important;
}
#char-select .roster-arrow.prev{left:clamp(12px,8vw,110px)!important}
#char-select .roster-arrow.next{right:clamp(12px,8vw,110px)!important}
#char-select .roster-arrow:hover,#char-select .roster-arrow:focus-visible{border-color:color-mix(in srgb,var(--hero-tint) 72%,white)!important;background:rgba(7,14,28,.7)!important;outline:0!important;box-shadow:0 0 28px color-mix(in srgb,var(--hero-tint) 18%,transparent)!important}
#char-select .chars-dots{position:absolute!important;left:50%!important;right:auto!important;bottom:3px!important;z-index:10!important;display:flex!important;gap:6px!important;width:auto!important;margin:0!important;padding:0!important;transform:translateX(-50%)!important}
#char-select .chars-dots i{display:block!important;width:5px!important;height:5px!important;border-radius:99px!important;background:rgba(255,255,255,.2)!important;transition:.25s ease!important}
#char-select .chars-dots i.on{width:24px!important;background:var(--dot,#fff)!important;box-shadow:0 0 12px var(--dot,#fff)!important}

#char-select .title-controls{
  grid-area:auto!important;position:relative!important;inset:auto!important;grid-column:1!important;grid-row:3!important;order:0!important;z-index:11!important;
  width:min(920px,100%)!important;margin:0 auto!important;padding:9px 12px!important;
  display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;justify-content:center!important;gap:12px!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(4,9,20,.58),rgba(3,7,16,.78))!important;box-shadow:0 20px 50px rgba(0,0,0,.28)!important;backdrop-filter:blur(16px);
  transform:none!important;
}
#char-select #difficulty{
  grid-area:auto!important;position:static!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;
  min-height:0!important;margin:0!important;padding:3px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:99px!important;background:rgba(255,255,255,.035)!important;transform:none!important;
}
#char-select #difficulty button{min-height:34px!important;margin:0!important;padding:0 11px!important;border:0!important;border-radius:99px!important;background:transparent!important;color:rgba(255,255,255,.5)!important;font:800 8px/1 Outfit,sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important}
#char-select #difficulty button.on{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-tint) 52%,transparent)!important}
#char-select #menu-row{
  grid-area:auto!important;position:static!important;inset:auto!important;order:0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;justify-content:stretch!important;gap:7px!important;
  width:100%!important;margin:0!important;padding:0!important;transform:none!important;
}
#char-select #menu-row .cta,#char-select .cta{
  position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:40px!important;height:auto!important;margin:0!important;padding:0 12px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;background:rgba(7,13,25,.6)!important;color:#fff!important;
  box-shadow:none!important;backdrop-filter:blur(8px);font:800 9px/1.1 Outfit,sans-serif!important;letter-spacing:.02em!important;text-align:center!important;text-decoration:none!important;text-transform:none!important;
  transform:none!important;transition:transform .16s ease,border-color .16s ease,background .16s ease!important;animation:none!important;
}
#char-select #menu-row .cta.primary{background:linear-gradient(135deg,#ffe49e,#f4b33e)!important;border-color:#ffd879!important;color:#181006!important;box-shadow:0 10px 28px color-mix(in srgb,var(--hero-tint) 16%,transparent)!important}
#char-select #menu-row .cta:hover,#char-select #menu-row .cta:focus-visible{transform:translateY(-2px)!important;border-color:rgba(255,255,255,.32)!important;outline:0!important}
#char-select .hidden{display:none!important}

#char-select .legal{
  grid-area:auto!important;position:relative!important;inset:auto!important;z-index:6!important;order:0!important;align-self:center!important;justify-self:center!important;
  width:auto!important;height:auto!important;margin:0!important;padding:0!important;opacity:1!important;transform:none!important;animation:none!important;
  color:rgba(255,255,255,.27)!important;font:600 7px/1 Outfit,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;text-align:center!important;
}
#char-select .legal p{margin:0!important;padding:0!important}

body.intro-complete #char-select .title-stack{animation:v36-title-arrive .72s cubic-bezier(.16,1,.3,1) both!important}
body.intro-complete #char-select .hero-stage{animation:v36-hero-arrive .88s cubic-bezier(.16,1,.3,1) .08s both!important}
body.intro-complete #char-select .title-controls{animation:v36-controls-arrive .62s ease .2s both!important}
@keyframes v36-title-arrive{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes v36-hero-arrive{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes v36-controls-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  #char-select .title-shell{width:min(760px,calc(100vw - 28px))!important;padding:12px 0 10px!important}
  #char-select .title-stack h1 .word.ohana,#char-select .word.ohana{font-size:clamp(58px,12vw,84px)!important}
  #char-select #chars .char-card{width:min(300px,52vw)!important;height:min(300px,39vh)!important}
  #char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{width:min(105px,18vw)!important;height:min(160px,24vh)!important;opacity:.18!important}
  #char-select #chars .char-card.is-prev{transform:translate(calc(-50% - 31vw),-50%) scale(.76)!important}
  #char-select #chars .char-card.is-next{transform:translate(calc(-50% + 31vw),-50%) scale(.76)!important}
  #char-select .hero-dossier{bottom:6px!important;width:min(390px,74vw)!important}
  #char-select .title-controls{width:min(720px,100%)!important;grid-template-columns:1fr!important;gap:6px!important;padding:7px!important}
  #char-select #difficulty{justify-self:center!important}
}
@media(max-width:560px){
  #char-select{grid-template-rows:38px minmax(0,1fr) 18px!important}
  #char-select .brand-bar{height:38px!important;padding:0 10px!important;gap:11px!important}
  #char-select .brand-bar a{font-size:7px!important}.brand-gb{width:24px!important;height:24px!important}
  #char-select .title-shell{width:calc(100vw - 14px)!important;padding:8px 0 6px!important}
  #char-select .eyebrow{font-size:7px!important}.title-stack .word.project{font-size:8px!important}
  #char-select .title-stack h1 .word.ohana,#char-select .word.ohana{font-size:50px!important}
  #char-select .tagline{margin-top:6px!important;font-size:11px!important}
  #char-select #chars .char-card{top:45%!important;width:220px!important;height:min(235px,35vh)!important}
  #char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{width:72px!important;height:120px!important;opacity:.12!important}
  #char-select #chars .char-card.is-prev{transform:translate(calc(-50% - 39vw),-50%) scale(.65)!important}
  #char-select #chars .char-card.is-next{transform:translate(calc(-50% + 39vw),-50%) scale(.65)!important}
  #char-select .roster-arrow{top:45%!important;width:36px!important;height:48px!important;font-size:26px!important}
  #char-select .roster-arrow.prev{left:2px!important}#char-select .roster-arrow.next{right:2px!important}
  #char-select .hero-dossier{bottom:2px!important;width:min(330px,86vw)!important;padding:7px 10px!important;border-radius:14px!important}
  #char-select .hero-dossier strong{font-size:24px!important}.dossier-meta{display:none!important}
  #char-select .title-controls{padding:5px!important;border-radius:14px!important}
  #char-select #menu-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #char-select #menu-row .cta{min-height:34px!important;font-size:8px!important}
  #char-select #difficulty button{min-height:28px!important;padding:0 8px!important;font-size:7px!important}
}
@media(max-height:690px) and (min-width:901px){
  #char-select .title-shell{padding:10px 0 8px!important}
  #char-select .title-stack h1 .word.ohana,#char-select .word.ohana{font-size:76px!important}
  #char-select .tagline{margin-top:6px!important}
  #char-select #chars .char-card{height:300px!important;width:320px!important}
  #char-select .hero-dossier{bottom:2px!important}
  #char-select .title-controls{padding:6px 9px!important}
}
@media(prefers-reduced-motion:reduce){
  body.intro-complete #char-select .title-stack,body.intro-complete #char-select .hero-stage,body.intro-complete #char-select .title-controls{animation:none!important}
  #char-select *{scroll-behavior:auto!important}
}


/* ==========================================================================
   V45 · LIVING HERO SELECT
   Native coverflow inspired by centeredSlides / depth / rotateY patterns.
   ========================================================================== */
#char-select .hero-stage{
  perspective:1600px!important;
  perspective-origin:50% 46%!important;
}
#char-select #chars{perspective:1600px!important;transform-style:preserve-3d!important}
#char-select #chars .chars-grid{transform-style:preserve-3d!important}
#char-select #chars .char-card{
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,opacity,filter!important;
  transition:
    transform .62s cubic-bezier(.16,1,.3,1),
    opacity .48s ease,
    filter .48s ease!important;
}
#char-select #chars .char-card::before{
  content:"";position:absolute;left:50%;top:55%;width:82%;height:72%;z-index:-1;
  transform:translate(-50%,-50%) scale(.86);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tint) 24%,transparent),transparent 66%);
  opacity:0;filter:blur(16px);transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
#char-select #chars .char-card.selected{
  display:flex!important;z-index:10!important;opacity:1!important;
  width:min(410px,32vw)!important;height:min(400px,48vh)!important;
  transform:translate3d(-50%,-50%,90px) scale(1.04)!important;
  filter:saturate(1.08) brightness(1.04)!important;
}
#char-select #chars .char-card.selected::before{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
#char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{
  display:flex!important;z-index:6!important;opacity:.58!important;pointer-events:auto!important;
  width:min(230px,18vw)!important;height:min(290px,36vh)!important;
  filter:saturate(.72) brightness(.76)!important;
}
#char-select #chars .char-card.is-prev{
  transform:translate3d(calc(-50% - clamp(230px,22vw,350px)),-50%,-120px) rotateY(24deg) scale(.82)!important;
}
#char-select #chars .char-card.is-next{
  transform:translate3d(calc(-50% + clamp(230px,22vw,350px)),-50%,-120px) rotateY(-24deg) scale(.82)!important;
}
#char-select #chars .char-card.is-prev2,#char-select #chars .char-card.is-next2{
  display:flex!important;z-index:2!important;opacity:.20!important;pointer-events:auto!important;
  width:min(175px,14vw)!important;height:min(235px,30vh)!important;
  filter:saturate(.46) brightness(.54) blur(.2px)!important;
}
#char-select #chars .char-card.is-prev2{
  transform:translate3d(calc(-50% - clamp(390px,38vw,610px)),-50%,-300px) rotateY(38deg) scale(.68)!important;
}
#char-select #chars .char-card.is-next2{
  transform:translate3d(calc(-50% + clamp(390px,38vw,610px)),-50%,-300px) rotateY(-38deg) scale(.68)!important;
}
#char-select #chars .char-card.selected:hover{
  transform:translate3d(-50%,-50%,105px) scale(1.065)!important;
}
#char-select #chars .char-card.is-prev:hover{
  opacity:.80!important;
  transform:translate3d(calc(-50% - clamp(230px,22vw,350px)),-50%,-82px) rotateY(18deg) scale(.86)!important;
}
#char-select #chars .char-card.is-next:hover{
  opacity:.80!important;
  transform:translate3d(calc(-50% + clamp(230px,22vw,350px)),-50%,-82px) rotateY(-18deg) scale(.86)!important;
}
#char-select #chars .char-card.is-prev2:hover,#char-select #chars .char-card.is-next2:hover{opacity:.36!important}
#char-select #chars .portrait canvas{
  filter:drop-shadow(0 28px 26px rgba(0,0,0,.42)) drop-shadow(0 0 18px color-mix(in srgb,var(--tint) 14%,transparent))!important;
}
#char-select .hero-stage::before{
  top:60%!important;width:min(760px,58vw)!important;height:min(190px,21vh)!important;
  background:
    radial-gradient(ellipse,color-mix(in srgb,var(--hero-tint) 30%,transparent),rgba(0,0,0,0) 68%),
    radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.055),transparent 62%)!important;
  filter:blur(12px)!important;
}
#char-select .hero-stage::after{
  bottom:7%!important;width:min(920px,70vw)!important;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--hero-tint) 66%,transparent),transparent)!important;
  box-shadow:0 0 26px color-mix(in srgb,var(--hero-tint) 18%,transparent)!important;
}
#char-select .hero-dossier{
  width:min(520px,74vw)!important;
  background:linear-gradient(180deg,rgba(4,11,20,.42),rgba(3,8,16,.74))!important;
  border-color:color-mix(in srgb,var(--hero-tint) 18%,rgba(255,255,255,.08))!important;
}
#char-select .roster-arrow{top:46%!important}
#char-select[data-hero] .title-stack .tagline{color:color-mix(in srgb,var(--hero-tint) 34%,#e9f6ff)!important}

@media(max-width:900px){
  #char-select #chars .char-card.is-prev2,#char-select #chars .char-card.is-next2{display:none!important;opacity:0!important;pointer-events:none!important}
  #char-select #chars .char-card.selected{width:min(330px,54vw)!important;height:min(320px,41vh)!important}
  #char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{
    width:min(120px,19vw)!important;height:min(175px,25vh)!important;opacity:.28!important;
  }
  #char-select #chars .char-card.is-prev{transform:translate3d(calc(-50% - 31vw),-50%,-120px) rotateY(22deg) scale(.76)!important}
  #char-select #chars .char-card.is-next{transform:translate3d(calc(-50% + 31vw),-50%,-120px) rotateY(-22deg) scale(.76)!important}
}
@media(max-width:560px){
  #char-select #chars .char-card.selected{width:235px!important;height:min(245px,36vh)!important;transform:translate3d(-50%,-50%,40px) scale(1)!important}
  #char-select #chars .char-card.is-prev,#char-select #chars .char-card.is-next{width:78px!important;height:126px!important;opacity:.17!important}
  #char-select #chars .char-card.is-prev{transform:translate3d(calc(-50% - 39vw),-50%,-130px) rotateY(24deg) scale(.66)!important}
  #char-select #chars .char-card.is-next{transform:translate3d(calc(-50% + 39vw),-50%,-130px) rotateY(-24deg) scale(.66)!important}
}
@media(prefers-reduced-motion:reduce){
  #char-select #chars .char-card{transition-duration:.01ms!important}
}


/* ==========================================================================
   V47A · CAROUSEL FIT + HOKU HERO GATE
   The canvas is now a showcase window, not a crop box.
   ========================================================================== */
#char-select::before{
  background:
    radial-gradient(ellipse at 50% 44%,transparent 0 30%,rgba(2,7,15,.04) 58%,rgba(1,3,9,.42) 100%),
    linear-gradient(180deg,rgba(1,4,12,.08),transparent 30%,transparent 72%,rgba(1,4,10,.58))!important;
}
#char-select::after{box-shadow:inset 0 0 130px rgba(0,0,0,.30)!important}
#char-select .hero-stage{perspective-origin:50% 48%!important}
#char-select .hero-stage::before{
  top:70%!important;
  width:min(680px,54vw)!important;
  height:min(120px,14vh)!important;
  background:
    radial-gradient(ellipse at center,color-mix(in srgb,var(--hero-tint) 18%,rgba(255,255,255,.05)),transparent 64%),
    radial-gradient(ellipse at center,rgba(0,0,0,.32),transparent 72%)!important;
  filter:blur(10px)!important;
}
#char-select .hero-stage::after{
  bottom:12%!important;
  width:min(640px,52vw)!important;
  opacity:.48!important;
}
#char-select #chars .char-card.selected{
  width:min(430px,34vw)!important;
  height:min(430px,50vh)!important;
}
#char-select #chars .char-card.selected .portrait{
  display:grid!important;
  place-items:center!important;
  contain:layout paint style!important;
}
#char-select #chars .char-card.selected .portrait canvas{
  width:100%!important;
  height:100%!important;
  filter:
    drop-shadow(0 28px 24px rgba(0,0,0,.38))
    drop-shadow(0 0 14px color-mix(in srgb,var(--hero-tint) 12%,transparent))!important;
}
#char-select #chars .char-card.selected[data-evo="4"] .portrait canvas{
  filter:
    drop-shadow(0 30px 26px rgba(0,0,0,.42))
    drop-shadow(0 0 18px color-mix(in srgb,var(--hero-tint) 18%,transparent))!important;
}
#char-select .hero-dossier{
  background:linear-gradient(180deg,rgba(5,12,20,.30),rgba(3,9,16,.66))!important;
  border-color:color-mix(in srgb,var(--hero-tint) 16%,rgba(255,255,255,.10))!important;
}
#char-select .roster-arrow{
  background:rgba(4,12,19,.36)!important;
}
@media(max-width:900px){
  #char-select #chars .char-card.selected{
    width:min(350px,58vw)!important;
    height:min(350px,43vh)!important;
  }
}
@media(max-width:560px){
  #char-select #chars .char-card.selected{
    width:245px!important;
    height:min(260px,38vh)!important;
  }
}


/* ==========================================================================
   V47B · SELECTOR PERFORMANCE + TIGHTER SPOTLIGHT
   Keep atmosphere, stop spending GPU on invisible glass.
   ========================================================================== */
#char-select .hero-stage::before{
  top:72%!important;
  width:min(420px,32vw)!important;
  height:min(82px,9vh)!important;
  filter:blur(7px)!important;
}
#char-select .hero-stage::after{width:min(500px,40vw)!important}
#char-select .brand-bar,
#char-select .hero-dossier,
#char-select .title-controls{backdrop-filter:blur(8px)!important}
#char-select .roster-arrow,
#char-select #menu-row .cta{backdrop-filter:none!important}
#char-select #chars .portrait canvas{
  filter:drop-shadow(0 24px 20px rgba(0,0,0,.36))!important;
}
#char-select #chars .char-card.selected .portrait canvas{
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.40))!important;
}
@media(max-width:900px){
  #char-select .hero-stage::before{width:min(340px,48vw)!important;height:72px!important}
}
@media(max-width:560px){
  #char-select .hero-stage::before{width:230px!important;height:58px!important}
}


/* ==========================================================================
   V81 · RENDERING CONTRACT: THREE CARDS, ZERO FILTER PASSES
   Applies AFTER V45/V47 selectors so legacy !important filters cannot override
   V80's low-cost carousel. The radial spotlights preserve the magical finish.
   ========================================================================== */
#char-select #chars .char-card{
  filter:none!important;
  will-change:auto!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s ease!important;
}
#char-select #chars .char-card.selected,
#char-select #chars .char-card.is-prev,
#char-select #chars .char-card.is-next{
  filter:none!important;
  will-change:transform,opacity!important;
}
#char-select:not(.atrium-on) #chars .char-card.is-prev2,
#char-select:not(.atrium-on) #chars .char-card.is-next2{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
#char-select #chars .char-card .portrait canvas,
#char-select #chars .char-card.selected .portrait canvas,
#char-select #chars .char-card.selected[data-evo="4"] .portrait canvas{
  filter:none!important;
}
#char-select #chars .char-card::before{
  filter:none!important;
  background:radial-gradient(circle,color-mix(in srgb,var(--tint) 19%,transparent),transparent 72%);
}
#char-select .hero-stage::before{
  filter:none!important;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--hero-tint) 18%,transparent),transparent 75%)!important;
}
#char-select .hero-dossier,
#char-select .title-controls,
#char-select .brand-bar{backdrop-filter:none!important}
@media(prefers-reduced-motion:reduce){
 #char-select #chars .char-card{transition:none!important;will-change:auto!important}
}

/* V99 · The old horizontal bridge across the sky is not a character connection.
   The radial hero stage retains depth without drawing a hairline across worlds. */
#char-select .hero-stage::after { display: none !important; }

/* V313 · Player chooses the real U companion, not a preselected cameo.
   Compact on desktop and phone, never overlapping the Play control. */
.u-partner-panel{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.35rem .65rem;width:min(100%,820px);margin:.5rem auto .8rem;
  padding:.48rem .9rem;border:1px solid rgba(255,229,176,.38);
  border-radius:14px;background:rgba(20,40,49,.78);color:#fff3dc;
  box-sizing:border-box;backdrop-filter:blur(8px);
}
.u-partner-panel label{font-weight:800;font-size:.82rem;letter-spacing:.025em}
.u-partner-panel select{
  max-width:100%;min-width:180px;min-height:36px;
  color:#143035;background:#f7eee1;border:1px solid #ecd9b0;
  border-radius:10px;padding:.36rem .6rem;font:700 .82rem system-ui;
}
.u-partner-panel select:focus-visible{outline:3px solid #fff2a8;outline-offset:2px}
#u-partner-technique{font-size:.76rem;opacity:.92}
#u-exp-hud{font-size:.76rem;letter-spacing:.015em;line-height:1.3}
@media(max-width:640px){
  .u-partner-panel{padding:.4rem .55rem;margin:.35rem auto .5rem;gap:.3rem}
  .u-partner-panel select{flex:1 1 165px;min-width:0}
  #u-partner-technique{flex:1 0 100%;text-align:center}
}

/* V314 · Bonded U preview: actual ally artwork, not a colored placeholder. */
#u-partner-portrait{
  display:block;width:84px;height:56px;flex:0 0 84px;
  border-radius:10px;border:1px solid rgba(255,231,167,.38);
  background:radial-gradient(ellipse at 50% 90%,rgba(255,232,168,.18),transparent 75%);
  object-fit:contain;
}
#u-partner-technique{flex:1 1 230px;line-height:1.35}
@media(max-width:640px){
 #u-partner-portrait{width:64px;height:49px;flex-basis:64px}
 .u-partner-panel label{flex:1 1 100%;text-align:center}
 #u-partner-technique{font-size:.72rem}
}