.vampire-page {
  min-height: 100%;
  padding: 48px;

  color: #ede6df;
  background:
    linear-gradient(
      180deg,
      rgba(121, 11, 28, 0.16),
      rgba(9, 9, 12, 0) 360px
    ),
    linear-gradient(145deg, #0d0d10, #1a1215 52%, #21181a);
}

.vampire-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(260px, 0.75fr);
  gap: 64px;
  align-items: center;

  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 48px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.015)
    );
  border: 1px solid rgba(179, 144, 96, 0.34);
  border-radius: 16px;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vampire-hero-content {
  min-width: 0;
}

.vampire-eyebrow,
.vampire-section-heading > span {
  display: block;
  margin-bottom: 12px;

  color: #c19a62;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vampire-hero h1 {
  max-width: 820px;
  margin: 0;

  color: #f0d7b0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: 0.96;
}

.vampire-tagline {
  max-width: 760px;
  margin: 24px 0 0;

  color: #dfc8b8;
  font-size: 1.28rem;
  line-height: 1.55;
}

.vampire-description {
  max-width: 760px;
  margin: 18px 0 0;

  color: #bfaea3;
  line-height: 1.75;
}

.vampire-overview-actions,
.vampire-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.vampire-enter-button,
.vampire-sheet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 50px;
  padding: 0 22px;

  color: #21160f;
  background:
    linear-gradient(
      135deg,
      #e1b56c,
      #bd8441
    );

  border: 1px solid #efc985;
  border-radius: 9px;

  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}

.vampire-enter-button:hover,
.vampire-sheet-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.vampire-enter-button:focus-visible,
.vampire-sheet-link:focus-visible,
.vampire-source-link:focus-visible {
  outline: 3px solid rgba(241, 211, 154, 0.55);
  outline-offset: 3px;
}

.vampire-source-link {
  color: #f0d7b0;
  text-decoration-color: rgba(240, 215, 176, 0.48);
  text-underline-offset: 4px;
}

.vampire-cover-frame,
.vampire-sheet-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;

  background: #0b0b0d;
  border: 1px solid rgba(179, 144, 96, 0.38);
  border-radius: 8px;
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.45),
    10px 10px 0 rgba(91, 15, 27, 0.22);
}

.vampire-cover-frame {
  width: min(100%, 340px);
  justify-self: center;
  transform: rotate(1.5deg);
}

.vampire-sheet-frame {
  width: min(100%, 430px);
  justify-self: center;
}

.vampire-cover-frame img,
.vampire-sheet-frame img {
  display: block;
  width: 100%;
  background: #0b0b0d;
}

.vampire-cover-frame img {
  aspect-ratio: 900 / 1182;
  max-height: 470px;
  object-fit: cover;
}

.hunter-cover-frame img {
  aspect-ratio: 603 / 783;
  object-fit: contain;
}

.vampire-sheet-frame img {
  aspect-ratio: 1290 / 1597;
  object-fit: contain;
  background: #d8d1c3;
}

.hunter-sheet-preview-frame img {
  aspect-ratio: 603 / 783;
}

.vampire-cover-frame.pending img,
.vampire-sheet-frame.pending img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vampire-asset-placeholder {
  display: grid;
  place-items: center;
  padding: 28px;

  color: #bfaea3;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(145deg, #141114, #211015);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 800;
}

.vampire-cover-frame .vampire-asset-placeholder {
  aspect-ratio: 900 / 1182;
}

.vampire-sheet-frame .vampire-asset-placeholder {
  aspect-ratio: 1290 / 1597;
}

.vampire-sheet-frame figcaption {
  padding: 14px 16px;

  color: #c9b9aa;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(179, 144, 96, 0.22);
  font-size: 0.9rem;
}

.vampire-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  width: min(1180px, 100%);
  margin: 28px auto 0;
}

.vampire-info-card,
.vampire-session-card {
  padding: 24px;

  background: rgba(255, 255, 255, 0.038);
  border: 1px solid rgba(179, 144, 96, 0.24);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.vampire-info-card h2,
.vampire-session-card h3 {
  margin: 0 0 12px;

  color: #d5a96c;
  font-size: 1.18rem;
}

.vampire-info-card p,
.vampire-session-card p {
  margin: 0;

  color: #bfaea3;
  line-height: 1.68;
}

.vampire-session-card p + p {
  margin-top: 14px;
}

.vampire-tools {
  width: min(1180px, 100%);
  margin: 64px auto 0;
}

.vampire-section-heading {
  margin-bottom: 22px;
}

.vampire-section-heading h2 {
  margin: 6px 0 0;

  color: #f0d7b0;
  font-size: 2rem;
}

.vampire-tools-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, 0.8fr)
    minmax(300px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.vampire-session-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vampire-link-arrow {
  font-size: 1.1rem;
}

.vampire-sheet-app {
  background:
    linear-gradient(
      180deg,
      rgba(121, 11, 28, 0.14),
      rgba(9, 9, 12, 0) 260px
    ),
    #141114;
}

.vampire-sheet-scroll {
  background: transparent;
}

.vampire-sheet-stage {
  width: min(760px, calc(100vw - 320px));
  min-width: 560px;
  aspect-ratio: 1290 / 1597;
  background: #d8d1c3;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(179, 144, 96, 0.26);
}

.vampire-sheet-stage .sheet-image {
  object-fit: contain;
}

.hunter-sheet-stage {
  width: min(760px, calc(100vw - 320px));
  min-width: 520px;
  aspect-ratio: 603 / 783;
  background: #efe7d8;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(179, 144, 96, 0.28);
}

.hunter-sheet-stage .sheet-image {
  object-fit: contain;
}

.vampire-sheet-app.editing .field-control {
  border-color: rgba(190, 149, 86, 0.58);
  background: rgba(255, 250, 238, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(41, 14, 19, 0.12);
}

.vampire-sheet-app.editing .rating-control {
  border-color: rgba(190, 149, 86, 0.38);
  background: rgba(255, 250, 238, 0.05);
}

.vampire-sheet-app.editing .rating-control:hover {
  border-color: rgba(239, 201, 133, 0.78);
  background: rgba(225, 181, 108, 0.22);
}

.vampire-sheet-app.editing .rating-control.selected,
.vampire-sheet-app .rating-control.selected,
.vampire-sheet-app .preview-rating-control.selected {
  background: #111;
  border-color: #111;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 0 0 1px rgba(41, 14, 19, 0.2);
}

.vampire-sheet-app .field-control.vampire-line {
  padding: 0 4px;

  color: #111;
  -webkit-text-fill-color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.85cqw, 19px);
  line-height: 1.05;
}

.vampire-sheet-app .field-control.hunter-line {
  padding: 0 2px;

  color: #14110c;
  -webkit-text-fill-color: #14110c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 1.55cqw, 12px);
  font-weight: 700;
  line-height: 1;
}

.vampire-sheet-app .field-control.vampire-small-line {
  font-size: clamp(12px, 1.55cqw, 16px);
}

.vampire-sheet-app .field-control.hunter-small-line {
  font-size: clamp(7px, 1.25cqw, 10px);
  font-weight: 600;
}

.vampire-sheet-app .field-control.centered {
  text-align: center;
}

.vampire-sheet-app .field-control.vampire-notes {
  padding: 2px 4px 0;

  color: #111;
  -webkit-text-fill-color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.7cqw, 18px);
  line-height: 1.72;
}

.vampire-sheet-app .field-control.vampire-notes.compact {
  line-height: 1.25;
}

.vampire-sheet-app .field-control.hunter-notes {
  padding: 1px 3px;

  color: #14110c;
  -webkit-text-fill-color: #14110c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8px, 1.45cqw, 11px);
  font-weight: 650;
  line-height: 1.32;
}

.vampire-sheet-app .field-control.hunter-notes.compact {
  line-height: 1.08;
}

.hunter-sheet-stage .rating-control,
.hunter-sheet-stage .preview-rating-control {
  border-width: 0;
  border-color: transparent;
}

.vampire-sheet-app.editing .hunter-sheet-stage .rating-control {
  background: transparent;
  border-color: transparent;
}

.vampire-sheet-app.editing .hunter-sheet-stage .rating-control:hover {
  background: rgba(203, 170, 107, 0.42);
  box-shadow: 0 0 0 1px rgba(44, 28, 18, 0.34);
}

.vampire-sheet-app .hunter-sheet-stage .rating-control.selected,
.vampire-sheet-app.editing .hunter-sheet-stage .rating-control.selected,
.vampire-sheet-app .hunter-sheet-stage .preview-rating-control.selected {
  background: #050403;
  border-color: #050403;
  box-shadow: none;
}

.vampire-sheet-app.editing .hunter-sheet-stage .rating-control.selected:hover {
  background: #050403;
  border-color: #050403;
  box-shadow: none;
}

.sheet-phase-toggle {
  color: #efd7b4;
  background: #241716;
  border-color: rgba(193, 154, 98, 0.78);
}

.sheet-phase-toggle:hover {
  background: #321d20;
}

.vampire-sheet-empty-note {
  position: absolute;
  right: 18px;
  bottom: 18px;

  padding: 8px 10px;

  color: #efd7b4;
  background: rgba(20, 10, 13, 0.78);
  border: 1px solid rgba(179, 144, 96, 0.38);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.vampire-rules {
  border-color: rgba(179, 144, 96, 0.4);
  background:
    radial-gradient(
      circle at top right,
      rgba(121, 11, 28, 0.18),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(24, 17, 19, 0.98),
      rgba(34, 24, 24, 0.98)
    );
}

.hunter-rules {
  border-color: rgba(155, 124, 73, 0.46);
  background:
    radial-gradient(
      circle at top right,
      rgba(99, 84, 48, 0.2),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(21, 18, 16, 0.98),
      rgba(31, 23, 20, 0.98)
    );
}

.vampire-definition-list {
  grid-template-columns:
    150px minmax(0, 1fr);
}

.hunter-definition-list {
  grid-template-columns:
    132px minmax(0, 1fr);
}

.vampire-success-list li {
  grid-template-columns:
    52px minmax(0, 1fr);
}

.vampire-combat-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.hunter-creed-list li {
  grid-template-columns:
    72px minmax(0, 1fr);
}

.vampire-damage-list li {
  grid-template-columns:
    104px minmax(0, 1fr);
}

.vampire-notes-layout {
  align-items: stretch;
}

.vampire-rules-source-note {
  margin: 0 !important;
}

@media (max-width: 950px) {
  .vampire-page {
    padding: 28px;
  }

  .vampire-hero {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .vampire-cover-frame {
    order: -1;
    width: min(100%, 320px);
  }

  .vampire-details,
  .vampire-tools-grid {
    grid-template-columns: 1fr;
  }

  .vampire-combat-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .vampire-sheet-stage,
  .hunter-sheet-stage {
    width: min(760px, calc(100vw - 56px));
  }
}

@media (max-width: 650px) {
  .vampire-page {
    padding: 16px;
  }

  .vampire-hero {
    gap: 30px;
    padding: 22px;
    border-radius: 14px;
  }

  .vampire-hero h1 {
    font-size: 2.7rem;
  }

  .vampire-overview-actions,
  .vampire-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vampire-enter-button,
  .vampire-sheet-link {
    width: 100%;
  }

  .vampire-info-card,
  .vampire-session-card {
    padding: 20px;
  }

  .vampire-sheet-stage,
  .hunter-sheet-stage {
    width: min(100%, 520px);
    min-width: 0;
  }

  .vampire-definition-list,
  .vampire-damage-list li {
    grid-template-columns: 1fr;
  }

  .vampire-combat-grid {
    grid-template-columns: 1fr;
  }
}