:root {
  --villains-rose: #ff6f92;
  --villains-rose-deep: #bc3f70;
  --villains-violet: #f05a67;
  --villains-gold: #f6c96d;
}

.villains-page {
  background:
    radial-gradient(circle at 86% 8%, rgba(177, 48, 68, .18), transparent 28%),
    radial-gradient(circle at 14% 34%, rgba(174, 58, 103, .1), transparent 26%),
    #110b0e;
}

.villains-hero .hero-vignette {
  background:
    linear-gradient(90deg, rgba(14, 9, 17, .98) 2%, rgba(21, 12, 22, .8) 37%, rgba(18, 10, 18, .08) 72%),
    linear-gradient(0deg, rgba(15, 10, 16, .96), transparent 44%);
}
.villains-hero .hero-copy em { color: #ffa1b8; }
.villains-hero .hero-copy small { font: inherit; }
.villains-hero .hero-copy h1 small::before { background: linear-gradient(90deg,#ff8fae,rgba(255,143,174,.13)); box-shadow: 0 0 14px rgba(255,105,150,.4); }
.villains-hero .hero-kicker { border-left-color: #ff8eac; color: #ffd5e0; background: linear-gradient(90deg,rgba(255,104,150,.13),rgba(24,12,22,.56)); }
.villains-hero .hero-logline strong { color: #ffd0dc; }
.villains-hero .live-chip { border-color: rgba(255, 111, 146, .35); background: rgba(255, 111, 146, .12); }
.villains-hero .live-chip > span { background: var(--villains-rose); box-shadow: 0 0 12px var(--villains-rose); }
.villains-hero .hero-tags span { border-color: rgba(255, 159, 187, .16); background: rgba(255, 159, 187, .07); }

.villains-petal {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 27px;
  border-radius: 90% 10% 90% 10%;
  background: linear-gradient(145deg, rgba(255, 171, 190, .76), rgba(190, 71, 115, .22));
  filter: blur(.2px);
  pointer-events: none;
}
.petal-one { top: 22%; right: 10%; transform: rotate(24deg); }
.petal-two { top: 54%; right: 38%; width: 11px; height: 20px; transform: rotate(78deg); }

.villains-brief { border-color: rgba(255, 123, 158, .2); background: linear-gradient(145deg, rgba(40, 19, 35, .87), rgba(17, 13, 21, .92)); }
.villains-brief .brief-label { color: #ffadc0; }
.villains-brief .brief-goal i { color: #ff9db6; }
.villains-chat-cta,
.villains-side-card .side-play,
.villains-page .sticky-play > a,
.villains-page .webtoon-start-cta {
  color: #fff;
  background: linear-gradient(135deg, #ed4f64, #a9162c);
  box-shadow: 0 12px 30px rgba(178, 62, 113, .22);
}

.villains-webtoon { box-shadow: 0 35px 100px rgba(52, 13, 38, .38); }
.villains-webtoon .webtoon-episode-card { background: linear-gradient(145deg, #281324, #15121c); }
.villains-webtoon .webtoon-episode-card > span { color: #ff9fb8; }
.rose-system { border-color: rgba(255, 130, 165, .38); color: #ffd2dd; background: rgba(65, 17, 43, .78); }
.rose-system i { background: var(--villains-rose); box-shadow: 0 0 12px var(--villains-rose); }
.villains-whisper { left: 12%; top: 47%; color: rgba(113, 51, 86, .56); transform: rotate(-7deg); }
.villains-breath { background: linear-gradient(180deg, #fff9f5, #fae9ec); }
.villains-breath span { color: #b54a70; }
.villains-breath p { color: #4b2937; font-family: Georgia, "Times New Roman", serif; }
.villains-speech { max-width: 43%; }
.speech-seris { left: 5%; top: 9%; }
.speech-lucan { right: 5%; top: 18%; }
.speech-wrist { right: 6%; top: 10%; }
.speech-final { left: 5%; top: 12%; }
.villains-crack { right: 14%; bottom: 15%; color: #9b2e67; transform: rotate(-9deg); }
.villains-choice { right: 6%; bottom: 10%; background: rgba(255, 248, 252, .94); }

.villains-reaction-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  padding: 62px 7%;
  background: linear-gradient(110deg, #f5e9ef, #e7e6f0);
}
.villains-reaction-row .comic-speech { position: relative; max-width: none; margin: 0; }
.villains-reaction-row .is-dark { color: #f7f4fa; border-color: rgba(255,255,255,.13); background: rgba(30, 25, 39, .92); }
.villains-reaction-row .is-dark::after { border-top-color: rgba(30, 25, 39, .92); }

.villains-system-beat {
  display: grid;
  justify-items: center;
  min-height: 330px;
  align-content: center;
  padding: 58px 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 106, 151, .17), transparent 40%),
    linear-gradient(145deg, #1c111c, #0f1017);
}
.villains-system-beat > span { color: #ff91b0; font: 800 9px/1 ui-monospace, monospace; letter-spacing: .18em; }
.villains-system-beat > strong { margin-top: 12px; font-size: clamp(19px, 4vw, 29px); letter-spacing: -.045em; }
.villains-system-beat > div { display: flex; gap: 8px; margin-top: 30px; }
.villains-system-beat b { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.04); font-size: 9px; }
.villains-system-beat b:first-child { color: #24101a; border-color: transparent; background: #ff93af; }
.villains-final-cut::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(38, 17, 31, .74)); pointer-events: none; }
.villains-final-cut > *:not(img) { z-index: 2; }

.villains-setting-card { border-color: rgba(255, 116, 153, .18); }
.villains-setting-card .input-shell:focus-within { border-color: rgba(255, 111, 146, .5); box-shadow: 0 0 0 3px rgba(255, 111, 146, .08); }
.villains-setting-card .input-shell > i,
.villains-setting-card .setting-preview i { color: var(--villains-rose); }
.villains-role-grid .choice-card.is-selected { border-color: rgba(255, 111, 146, .4); background: rgba(255, 111, 146, .07); }
.villains-role-grid .choice-card.is-selected .choice-icon { color: #2b101a; background: #ff9ab4; }
.villains-role-grid .choice-card.is-selected > i { color: #ff9ab4; }

.villains-route-rescue::before { background: radial-gradient(circle at 35% 35%, #ffb8c8, #b13f79 55%, transparent 70%); }
.villains-route-truth::before { background: radial-gradient(circle at 35% 35%, #ffadb4, #8e2837 55%, transparent 70%); }
.villains-route-grid .route-card.is-selected { border-color: rgba(255, 153, 180, .46); }

.villains-cast-grid { display: grid; gap: 10px; }
.villain-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(28, 24, 32, .96), rgba(18, 17, 22, .96));
  transition: transform .24s, border-color .24s;
}
.villain-card:hover { transform: translateX(3px); border-color: rgba(255, 139, 170, .32); }
.villain-card.is-primary { border-color: rgba(255, 111, 146, .25); }
.villain-face { position: relative; background-image: url('/images/campaigns/villains-first-love-cover-v1.webp'); background-repeat: no-repeat; background-size: 340% auto; }
.villain-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 54%, rgba(24, 20, 28, .96)); }
.face-seris { background-position: 47% 20%; }
.face-lucan { background-position: 7% 16%; }
.face-eden { background-position: 70% 16%; }
.face-noa { background-position: 99% 21%; }
.villain-card > div { align-self: center; min-width: 0; padding: 19px 22px 19px 16px; }
.villain-card em { color: #ff97b2; font-size: 9px; font-style: normal; font-weight: 850; }
.villain-card:nth-child(2) em { color: #efca74; }
.villain-card:nth-child(3) em { color: #ff8c96; }
.villain-card:nth-child(4) em { color: #87d7b0; }
.villain-card h3 { margin: 4px 0 5px; font-size: 21px; letter-spacing: -.045em; }
.villain-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.villain-card dl { display: flex; gap: 30px; margin: 15px 0 0; }
.villain-card dl div { display: grid; }
.villain-card dt { color: var(--soft); font-size: 8px; }
.villain-card dd { margin: 2px 0 0; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 750; }
.villain-card a { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: #ffabc0; font-size: 9px; font-weight: 850; background: none; box-shadow: none; }
.villain-card a:hover { color: #fff; }

.villains-ending-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.villains-ending-grid .ending-card:first-child { grid-column: span 2; }
.ending-rose::before { background: radial-gradient(circle at 67% 15%, #ff9db7, transparent 37%), linear-gradient(145deg, #702d53, #18151b); }
.villains-side-card { border-color: rgba(255, 121, 157, .17); }
.villains-side-card .side-cover img { object-position: center 26%; }
.villains-page .content-note i { color: #ff9ab4; }

@media (max-width: 720px) {
  .villains-hero .hero-art { height: min(137vw, 690px); }
  .villains-hero .hero-art img { object-position: center 18%; }
  .villains-hero .hero-vignette {
    background: linear-gradient(0deg, #0f0c12 0%, rgba(15, 12, 18, .95) 17%, rgba(15, 12, 18, .18) 58%, rgba(15, 12, 18, .1));
  }
  .villains-speech { max-width: 52%; }
  .speech-seris { top: 6%; }
  .speech-lucan { top: 27%; }
  .speech-wrist { right: 4%; top: 7%; }
  .speech-final { top: 8%; }
  .villains-reaction-row { gap: 18px; padding: 46px 4%; }
  .villains-system-beat { min-height: 280px; }
  .villain-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 180px; }
  .villain-card > div { padding: 15px 14px 15px 8px; }
  .villain-card h3 { font-size: 18px; }
  .villain-card dl { gap: 13px; }
  .villains-ending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .villains-ending-grid .ending-card:first-child { grid-column: span 2; }
}

@media (max-width: 440px) {
  .villains-reaction-row { grid-template-columns: 1fr; gap: 27px; }
  .villains-reaction-row .comic-speech:nth-child(2) { justify-self: end; }
  .villain-card { grid-template-columns: 100px minmax(0, 1fr); }
}