/* Portrait first: a slim vertical inscription replaces the old bottom card. */
.character-visual {
  background:
    radial-gradient(ellipse at 49% 32%, color-mix(in srgb, var(--character-aura) 22%, transparent), transparent 48%),
    linear-gradient(90deg, #0718247a, transparent 22%, transparent 76%, #07182491),
    url('./scene-benming.webp') center / cover no-repeat,
    #102934;
}
.character-visual::after {
  z-index: 1;
  background: linear-gradient(90deg, #07182444, transparent 18%, transparent 78%, #07182466) !important;
}
.character-visual::before {
  inset: 12% 10% 10%;
  background: radial-gradient(ellipse at 50% 35%, #f4d8a842, transparent 54%);
}
.character-art-window,
.character-art-window:has(.character-live-art) {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.character-reference-art.character-live-art {
  top: 2.5% !important;
  left: 0 !important;
  width: 100% !important;
  height: 93% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: brightness(1.2) saturate(1.06) drop-shadow(0 16px 24px #06121a8c) drop-shadow(0 0 23px #e3c88d72) !important;
}
.character-motion {
  top: 2.5% !important;
  left: 0 !important;
  width: 100% !important;
  height: 93% !important;
  filter: brightness(1.15) drop-shadow(0 16px 24px #06121a8c) drop-shadow(0 0 23px #e3c88d72);
}
.character-visual-top { z-index: 6; }
.character-visual-top > div:first-of-type {
  background: linear-gradient(90deg, #0b2636de, #0b26368c);
}
.character-visual-footer {
  top: clamp(155px, 20%, 215px);
  right: clamp(22px, 3%, 44px);
  bottom: clamp(68px, 9%, 100px);
  left: auto;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 9px;
  width: clamp(150px, 22%, 210px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  text-align: right;
  pointer-events: none;
}
.character-kicker {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  margin-bottom: 12px;
  color: #f2d99d;
  font-size: 10px;
  letter-spacing: .1em;
  text-shadow: 0 2px 8px #06131c, 0 0 14px #071824;
}
.character-visual-footer h2 {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 700 clamp(26px, 2.5vw, 35px)/1.15 var(--display);
  letter-spacing: .16em;
  white-space: nowrap;
  color: #ffe4a0;
  text-shadow: 0 2px 8px #06131c, 0 0 19px #c99e5c88;
}
.character-visual-footer h2 span { margin: 2px 0; }
.character-story {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  max-width: none;
  max-height: none;
  padding: 2px 9px 0 0;
  border: 0;
  border-right: 1px solid #e3bf7866;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: left;
  pointer-events: auto;
}
.character-story::before { content: none; }
.character-story-label {
  display: block;
  margin-left: 7px;
  color: #e2bd78;
  font-size: 10px;
  letter-spacing: .15em;
  text-shadow: 0 2px 8px #06131c;
}
.character-story p,
.character-visual-footer .character-live-intro {
  margin: 0;
  max-height: none;
  max-width: none;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  color: #f7eed7;
  font: 500 clamp(12px, 1.03vw, 15px)/1.65 var(--display);
  letter-spacing: .08em;
  white-space: pre-line;
  text-shadow: 0 2px 6px #03121d, 0 0 10px #061a26;
  scrollbar-width: thin;
  scrollbar-color: #d8b77866 transparent;
}
.character-identity-tags {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
}
.character-identity-tags span {
  padding: 2px 5px;
  border-color: #d6b77966;
  background: #102936a6;
  color: #eeddbb;
  font-size: 9px;
  text-shadow: 0 1px 4px #06131c;
}
@media (max-width: 760px) {
  .character-visual { min-height: 760px; }
  .character-reference-art.character-live-art,
  .character-motion {
    top: 9% !important;
    left: -10% !important;
    width: 95% !important;
    height: 78% !important;
  }
  .character-visual-footer {
    top: 23%;
    right: 13px;
    bottom: 11%;
    left: auto;
    width: clamp(102px, 29%, 145px);
    grid-template-columns: minmax(0, 1fr) 30px;
    column-gap: 3px;
    padding: 0;
  }
  .character-kicker { font-size: 8px; margin-bottom: 8px; }
  .character-visual-footer h2 { font-size: 23px; }
  .character-story { padding-right: 5px; }
  .character-story-label { font-size: 9px; }
  .character-story p,
  .character-visual-footer .character-live-intro { font-size: 11px; line-height: 1.45; }
  .character-identity-tags span { font-size: 8px; }
}
@media (max-width: 420px) {
  .character-visual { min-height: 690px; }
  .character-visual-top { margin: 18px 14px; }
  .character-visual-footer { right: 10px; top: 26%; bottom: 9%; }
  .character-reference-art.character-live-art,
  .character-motion { left: -13% !important; width: 100% !important; }
}
@media (max-width: 760px) {
  .character-visual { min-height: 930px; }
  .character-reference-art.character-live-art,
  .character-motion {
    top: 5% !important;
    left: 0 !important;
    width: 100% !important;
    height: 77% !important;
  }
  .character-visual-footer {
    top: auto;
    right: 18px;
    bottom: 26px;
    left: 18px;
    display: block;
    width: auto;
    max-height: 145px;
    text-align: left;
  }
  .character-kicker { margin-bottom: 3px; }
  .character-visual-footer h2 {
    display: block;
    margin: 0 0 5px;
    writing-mode: horizontal-tb;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: .1em;
  }
  .character-story {
    display: block;
    max-height: 45px;
    padding: 0 0 0 8px;
    border-right: 0;
    border-left: 1px solid #e3bf7880;
    writing-mode: horizontal-tb;
  }
  .character-story-label { display: none; }
  .character-story p,
  .character-visual-footer .character-live-intro {
    height: auto;
    max-height: 43px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.5;
  }
  .character-identity-tags { margin-top: 6px; justify-content: flex-start; }
}
@media (max-width: 420px) {
  .character-visual { min-height: 900px; }
  .character-visual-footer { right: 16px; bottom: 23px; left: 16px; }
  .character-reference-art.character-live-art,
  .character-motion { left: 0 !important; width: 100% !important; }
}
@media (min-width: 1101px) and (max-width: 1850px) {
  .character-reference-art.character-live-art,
  .character-motion {
    top: 7% !important;
    left: -7% !important;
    width: 100% !important;
    height: 82% !important;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .character-frame { grid-template-columns: 1fr; height: auto; }
  .character-visual { height: 880px; min-height: 880px; border-right: 0; border-bottom: 1px solid #b69b6366; }
  .character-sheet { height: auto; min-height: 620px; margin: 0 11px 11px; overflow: visible; }
  .character-reference-art.character-live-art,
  .character-motion {
    top: 3% !important;
    left: 0 !important;
    width: 100% !important;
    height: 91% !important;
  }
  .character-visual-footer { width: 185px; right: 25px; }
}
/* The inscription lives on the left; the beast owns the right side of the stage. */
@media (min-width: 761px) {
  .character-visual-footer {
    top: clamp(148px, 18%, 195px);
    right: auto;
    bottom: clamp(68px, 9%, 95px);
    left: clamp(22px, 3%, 42px);
    grid-template-columns: 45px minmax(0, 1fr);
    column-gap: 8px;
    width: clamp(146px, 17%, 170px);
    text-align: left;
  }
  .character-visual-footer h2 {
    grid-column: 1;
    justify-self: start;
  }
  .character-story {
    grid-column: 2;
    border-right: 0;
    border-left: 1px solid #e3bf7866;
    padding: 2px 0 0 8px;
  }
  .character-identity-tags { justify-content: flex-start; }
}
/* Anchor the companion to the stone floor, with a separate breathing silhouette. */
.character-side-beast {
  --beast-glow: #edca80;
  right: 2%;
  bottom: 5.5%;
  z-index: 4;
  width: clamp(132px, 18%, 205px);
  isolation: isolate;
  animation: none !important;
  transition: transform .22s ease, filter .22s ease;
}
.character-side-beast[data-element="木"] { --beast-glow: #a9dc9e; }
.character-side-beast[data-element="火"] { --beast-glow: #f0a172; }
.character-side-beast[data-element="水"] { --beast-glow: #8ec7e2; }
.character-side-beast[data-element="土"] { --beast-glow: #e6c381; }
.character-side-beast[data-element="金"] { --beast-glow: #f5dfa4; }
.character-side-beast::before,
.character-side-beast::after { content: ""; position: absolute; pointer-events: none; }
.character-side-beast::before {
  z-index: 0;
  left: -16%;
  right: -16%;
  bottom: -5px;
  height: 49px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #07151ee3 0 28%, color-mix(in srgb, var(--beast-glow) 44%, transparent) 46%, transparent 73%);
  filter: blur(7px);
  animation: beast-ground-breathe 4.8s ease-in-out infinite;
}
.character-side-beast::after {
  z-index: 1;
  left: -18%;
  right: -18%;
  bottom: -26px;
  height: 84px;
  border: 2px solid color-mix(in srgb, var(--beast-glow) 73%, transparent);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--beast-glow) 24%, transparent), transparent 68%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--beast-glow) 65%, transparent), inset 0 0 14px color-mix(in srgb, var(--beast-glow) 34%, transparent);
  transform: scaleY(.3);
  animation: beast-ground-ring 5.6s ease-in-out infinite;
}
.character-side-beast img {
  position: relative;
  z-index: 2;
  height: clamp(150px, 22vw, 240px);
  filter: brightness(1.1) drop-shadow(0 7px 6px #07131bc7) drop-shadow(0 0 13px color-mix(in srgb, var(--beast-glow) 53%, transparent));
  transform-origin: center 91%;
  animation: beast-breathe 4.8s ease-in-out infinite;
}
.character-side-beast .beast-mote {
  position: absolute;
  z-index: 3;
  left: 15%;
  bottom: 29%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--beast-glow);
  box-shadow: 0 0 8px 3px color-mix(in srgb, var(--beast-glow) 65%, transparent);
  pointer-events: none;
  animation: beast-mote-rise 4.2s ease-in-out infinite;
}
.character-side-beast .beast-mote:nth-child(2) { left: 76%; bottom: 41%; animation-delay: -1.5s; }
.character-side-beast .beast-mote:nth-child(3) { left: 53%; bottom: 21%; animation-delay: -3s; }
.character-side-beast:hover,
.character-side-beast:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }
@keyframes beast-breathe { 50% { transform: translateY(-2px) scale(1.018); } }
@keyframes beast-ground-breathe { 50% { opacity: .7; transform: scaleX(.88); } }
@keyframes beast-ground-ring { 50% { opacity: .48; transform: scale(.9, .27); } }
@keyframes beast-mote-rise { 0%, 100% { opacity: 0; transform: translate(0, 9px) scale(.6); } 45% { opacity: .85; } 75% { opacity: .25; transform: translate(9px, -28px) scale(1.15); } }
@media (max-width: 760px) {
  .character-side-beast { right: 3%; bottom: 20%; width: 112px; }
  .character-side-beast img { height: 154px; }
  .character-side-beast::after { bottom: -18px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .character-side-beast::before,
  .character-side-beast::after,
  .character-side-beast img,
  .character-side-beast .beast-mote { animation: none !important; }
}
@media (min-width: 1101px) and (max-width: 1500px) {
  .character-frame { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .character-reference-art.character-live-art,
  .character-motion {
    top: 7% !important;
    left: 6% !important;
    width: 100% !important;
    height: 79% !important;
  }
  .character-side-beast { right: 0; width: clamp(125px, 17%, 180px); }
}
@media (min-width: 1101px) and (max-width: 1500px) { .character-reference-art.character-live-art, .character-motion { top: 11% !important; } }
/* Companion scale and spacing: 10% larger, with the gap to the hero about 20% tighter. */
.character-side-beast { right: 1%; width: clamp(145px, 19.8%, 225px); }
.character-side-beast img { height: clamp(165px, 24.2vw, 264px); }
@media (min-width: 1101px) and (max-width: 1500px) {
  .character-side-beast { right: -1%; width: clamp(138px, 18.7%, 198px); }
}
@media (max-width: 760px) {
  .character-side-beast { right: 2.5%; width: 123px; }
  .character-side-beast img { height: 169px; }
}