.studio-layout-switch {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-left: auto;
  padding: 8px 11px;
  border: 2px solid var(--studio-red);
  border-radius: 999px;
  color: var(--studio-red);
  background: var(--studio-cream);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 3px 0 rgba(255,54,68,.18);
}

.studio-layout-dev .studio-layout-switch {
  display: inline-flex;
}

.studio-layout-switch:hover,
.studio-layout-switch:focus-visible {
  transform: translate(-1px,-1px);
  box-shadow: 3px 4px 0 rgba(255,54,68,.24);
}

/* Shared Studio cleanup for both compositions. */
.studio-kicker,
.studio-brand,
.studio-edition,
.studio-art-footer,
.studio-eyebrow,
.studio-character-rail__label {
  display: none !important;
}

/* Match the alpha-page backdrop: repeated, translucent CharaSelect marks
   without the arrow. Top-align the tile grid so intro row masks can move whole
   logo rows without slicing a mark across two opposite-moving bands. */
.studio-pattern {
  inset: -10vh -24vw;
  background: rgba(255,54,68,.11);
  color: transparent;
  font-size: 0;
  line-height: 0;
  transform: rotate(-4deg) scale(1.04);
  -webkit-mask-image: url('/assets/charaselect/logos/charaselect-no-arrow.svg');
  -webkit-mask-position: center top;
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 128px 118px;
  mask-image: url('/assets/charaselect/logos/charaselect-no-arrow.svg');
  mask-position: center top;
  mask-repeat: repeat;
  mask-size: 128px 118px;
}

.studio-pattern span {
  display: none !important;
}

.studio-pattern::after {
  content: none !important;
}

/* Keep Home attached to the page rather than the Studio header flow. */
.studio-home {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  left: max(12px, calc(env(safe-area-inset-left) + 8px));
  z-index: 70;
}

/* Game-select header: keep the red wordmark still and animate the exact arrow
   artwork from the official logo with only a small cursor-like bob. */
.studio-topbar {
  --studio-logo-y: 50%;
  --studio-logo-width: 112px;
  --studio-logo-height: 103px;
  position: relative;
  min-height: 96px;
}

.studio-topbar::after {
  position: absolute;
  z-index: 1;
  top: var(--studio-logo-y);
  left: 50%;
  width: var(--studio-logo-width);
  height: var(--studio-logo-height);
  background: var(--studio-red);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask: url('/assets/charaselect/logos/charaselect-no-arrow.svg') center / contain no-repeat;
  mask: url('/assets/charaselect/logos/charaselect-no-arrow.svg') center / contain no-repeat;
}

.studio-topbar::before {
  position: absolute;
  z-index: 2;
  top: var(--studio-logo-y);
  left: 50%;
  width: var(--studio-logo-width);
  height: var(--studio-logo-height);
  background: var(--studio-red);
  content: "";
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-mask: url('/assets/charaselect/logos/charaselect-arrow.svg') center / contain no-repeat;
  mask: url('/assets/charaselect/logos/charaselect-arrow.svg') center / contain no-repeat;
  animation: studio-logo-arrow-yoyo .9s ease-in-out infinite alternate;
}

@keyframes studio-logo-arrow-yoyo {
  from { transform: translate(-50%, -50%) translateY(-1px); }
  to { transform: translate(-50%, -50%) translateY(3px); }
}

.studio-topbar > :not(.studio-home) {
  position: relative;
  z-index: 3;
}

/* Keep dev-only controls usable without covering the centered brand. */
.studio-layout-dev .studio-topbar {
  --studio-logo-y: calc(100% - 51px);
  min-height: 126px;
  align-items: flex-start;
}

/* The old footer occupied the bottom of the art pane; let the portrait use it. */
.studio-portrait-window {
  bottom: 0 !important;
}

@media (max-width: 760px) {
  .studio-layout-switch {
    min-height: 32px;
    padding: 7px 9px;
    font-size: .54rem;
    letter-spacing: .045em;
  }

  .studio-topbar {
    --studio-logo-width: 104px;
    --studio-logo-height: 95px;
    min-height: 94px;
  }

  .studio-layout-dev .studio-topbar {
    --studio-logo-y: calc(100% - 48px);
    min-height: 120px;
  }

  .studio-pattern {
    -webkit-mask-size: 112px 103px;
    mask-size: 112px 103px;
  }
}

@media (max-width: 390px) {
  .studio-layout-switch {
    padding-inline: 7px;
    font-size: .5rem;
  }

  .studio-topbar {
    --studio-logo-width: 98px;
    --studio-logo-height: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-topbar::before {
    animation: none;
    transform: translate(-50%, -50%) translateY(1px);
  }
}

/* Character themes sampled from the supplied CharaSelect reference frames.
   Theme variables are registered so the background gradient can interpolate
   instead of hard-cutting when the selected character changes. */
@property --theme-bg-a { syntax: '<color>'; inherits: true; initial-value: #180d22; }
@property --theme-bg-b { syntax: '<color>'; inherits: true; initial-value: #281436; }
@property --theme-bg-c { syntax: '<color>'; inherits: true; initial-value: #100714; }
@property --theme-glow { syntax: '<color>'; inherits: true; initial-value: rgba(93,52,132,.52); }
@property --theme-accent { syntax: '<color>'; inherits: true; initial-value: #74429f; }
@property --theme-accent-dark { syntax: '<color>'; inherits: true; initial-value: #382047; }
@property --theme-panel-a { syntax: '<color>'; inherits: true; initial-value: #6b3b91; }
@property --theme-panel-b { syntax: '<color>'; inherits: true; initial-value: #351b4c; }
@property --theme-highlight { syntax: '<color>'; inherits: true; initial-value: #c7a4e4; }
@property --theme-ink { syntax: '<color>'; inherits: true; initial-value: #3b2a42; }

/* Seed the first paint with the server-selected event palette. The data
   module still owns runtime changes, but this prevents the registered purple
   fallback from flashing before the initial character profile resolves. */
body[data-character="c01"] {
  --theme-bg-a: #210707;
  --theme-bg-b: #380b0d;
  --theme-bg-c: #100203;
  --theme-glow: rgba(216,60,60,.48);
  --theme-accent: #d83c3c;
  --theme-accent-dark: #791719;
  --theme-panel-a: #e34245;
  --theme-panel-b: #b3262b;
  --theme-highlight: #ffd0d0;
  --theme-ink: #3b1b1d;
}

body[data-character="c02"] {
  --theme-bg-a: #180d22;
  --theme-bg-b: #281436;
  --theme-bg-c: #100714;
  --theme-glow: rgba(93,52,132,.52);
  --theme-accent: #74429f;
  --theme-accent-dark: #382047;
  --theme-panel-a: #6b3b91;
  --theme-panel-b: #351b4c;
  --theme-highlight: #c7a4e4;
  --theme-ink: #3b2a42;
}

body[data-character="c03"] {
  --theme-bg-a: #091a27;
  --theme-bg-b: #102c42;
  --theme-bg-c: #06121b;
  --theme-glow: rgba(52,120,179,.46);
  --theme-accent: #3478b3;
  --theme-accent-dark: #235174;
  --theme-panel-a: #1788bb;
  --theme-panel-b: #315fa0;
  --theme-highlight: #aeb9f0;
  --theme-ink: #293846;
}

body[data-character="c04"] {
  --theme-bg-a: #14131b;
  --theme-bg-b: #22202d;
  --theme-bg-c: #0c0b10;
  --theme-glow: rgba(75,73,96,.46);
  --theme-accent: #625e79;
  --theme-accent-dark: #302d3d;
  --theme-panel-a: #514d66;
  --theme-panel-b: #2b2836;
  --theme-highlight: #b4afc8;
  --theme-ink: #34313e;
}

body {
  --studio-red: var(--theme-accent);
  --studio-red-dark: var(--theme-accent-dark);
  --studio-yellow: var(--theme-highlight);
  --studio-ink: var(--theme-ink);
  background:
    radial-gradient(90% 72% at 92% 0%, var(--theme-glow) 0%, transparent 58%),
    linear-gradient(155deg, var(--theme-bg-a) 0%, var(--theme-bg-b) 48%, var(--theme-bg-c) 100%);
  transition:
    --theme-bg-a .5s ease,
    --theme-bg-b .5s ease,
    --theme-bg-c .5s ease,
    --theme-glow .5s ease,
    --theme-accent .44s ease,
    --theme-accent-dark .44s ease,
    --theme-panel-a .5s ease,
    --theme-panel-b .5s ease,
    --theme-highlight .44s ease,
    --theme-ink .44s ease;
}

/* Dark reference themes use the white logo treatment from the supplied art. */
.studio-pattern {
  background: rgba(255,255,255,.07);
  transition: opacity .45s ease;
}

.studio-topbar::before,
.studio-topbar::after {
  background: #fff;
}

.studio-home {
  color: #fff;
  border-color: rgba(255,255,255,.82);
  background: color-mix(in srgb, var(--theme-bg-a) 82%, transparent);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--theme-bg-c) 58%, transparent);
  backdrop-filter: blur(7px);
  transition: background .44s ease, border-color .44s ease, box-shadow .44s ease;
}

.studio-layout-switch {
  border-color: rgba(255,255,255,.78);
  color: #fff;
  background: color-mix(in srgb, var(--theme-bg-a) 82%, transparent);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--theme-bg-c) 58%, transparent);
  backdrop-filter: blur(7px);
}

.studio-tune-launcher {
  color: #fff;
  background: color-mix(in srgb, var(--theme-bg-c) 88%, #000 12%);
}

/* Carry the active palette into the card and portrait pane. */
.studio-card,
.studio-ticket,
.studio-instagram,
#studio-character-name,
.studio-facts dt {
  transition: color .44s ease, background-color .44s ease, border-color .44s ease, box-shadow .44s ease;
}

/* Open up the display name so the Compact Disco letterforms read more clearly. */
#studio-character-name {
  letter-spacing: .015em;
}

.studio-art {
  background: linear-gradient(155deg, var(--theme-panel-a) 0%, var(--theme-panel-b) 100%);
  transition: background .5s ease;
}

.studio-portrait-window::after {
  background: linear-gradient(to bottom, transparent, var(--theme-panel-b));
  transition: background .5s ease;
}

.studio-art-disc {
  transition: background-color .44s ease, box-shadow .44s ease;
}

/* Selected session gets a small game-menu response while all theme colours
   crossfade through the registered variables above. */
.studio-character-card[aria-pressed="true"] {
  animation: studio-theme-select .34s ease-out;
}

@keyframes studio-theme-select {
  0% { transform: scale(.96); }
  58% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .studio-art,
  .studio-portrait-window::after,
  .studio-card,
  .studio-ticket,
  .studio-instagram,
  #studio-character-name,
  .studio-facts dt {
    transition: none !important;
  }

  .studio-character-card[aria-pressed="true"] {
    animation: none;
  }
}