/* ==========================================================================
   THE ROPE KNIGHT — page-specific "chaotic comic" skin
   Scoped to body.rk-page so it never leaks into the rest of the site.
   ========================================================================== */



body.rk-page {
  /* Decorative character art may extend beyond the main container,
     but must be clipped only by the browser viewport. */
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(242,236,226,0.05) 1.4px, transparent 1.4px),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(143, 36, 56, 0.22), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 10%, rgba(201, 162, 75, 0.14), transparent 55%);
  background-size: 16px 16px, auto, auto;
}

.rk-page h1,
.rk-page h2,
.rk-page h3,
.rk-page .rk-wishlist-label,
.rk-page .rk-more-info span,
.rk-page .rk-media-label,
.rk-page .btn-lg {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- hero -- */

.rk-page .game-hero h1 {
  font-size: clamp(2.6rem, 8vw, 5rem);
  display: inline-block;
  transform: rotate(-2deg);
  text-shadow: 4px 4px 0 var(--crimson);
}

.rk-page .rating-badge {
  transform: rotate(2deg);
}

.rk-hero-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 6px;
  min-height: 500px;
}

@media (max-width: 860px) {
  .rk-hero-row {
    flex-direction: column;
    text-align: center;
    min-height: 0;
  }
}

.rk-cta-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rk-cta-col .cta-row {
  flex-direction: column;
}

.rk-wishlist-label {
  display: block;
  color: var(--crimson);
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  text-transform: uppercase;
  transform: rotate(-2deg);
  margin-bottom: 18px;
}

.rk-page .btn-lg {
  padding: 28px 26px;
  font-size: 1.4rem;
  width: 420px;
}

.rk-steam-btn {
  gap: 16px;
}

.rk-steam-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

/* side images — positioned independently, out of normal flow,
   so resizing them can never push or overlap the CTA buttons */

.rk-side-img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.rk-logo-wrap { left: 40px; }
.rk-looney-wrap { right: 0; }

@media (max-width: 860px) {
  .rk-side-img {
    position: static;
    transform: none;
    margin: 0 auto 18px;
  }
}

.rk-logo-wrap {
  aspect-ratio: 3 / 4;
  width: 480px;
  max-width: 46vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 35%, transparent 88%);
}

.rk-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}

.rk-logo-b { opacity: 0; }
.rk-logo-wrap:hover .rk-logo-a { opacity: 0; }
.rk-logo-wrap:hover .rk-logo-b { opacity: 1; }

.rk-looney-frame {
  position: relative;
  width: 340px;
  max-width: 34vw;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
}

.rk-looney {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.rk-looney-b { opacity: 0; }
.rk-looney-wrap:hover .rk-looney-a { opacity: 0; }
.rk-looney-wrap:hover .rk-looney-b { opacity: 1; }

/* more info */

.rk-more-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--parchment);
  margin: -10px auto 6px;
  width: fit-content;
  transition: transform 0.2s ease, color 0.2s ease;
}

.rk-more-info span:first-child {
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rk-more-info .rk-arrow {
  font-size: 2rem;
  animation: rk-bounce 1.6s infinite;
}

.rk-more-info:hover { color: var(--gold); transform: translateY(2px); }

@keyframes rk-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ------------------------------------------------------------ media row */

.rk-media {
  position: relative;
  padding: 30px 0 60px;
}

.rk-media-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

@media (max-width: 860px) {
  .rk-media-row { grid-template-columns: 1fr; gap: 90px; }
}

.rk-media-col { min-width: 0; }

.rk-media-label {
  display: inline-block;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--surface);
  border: 3px solid var(--parchment);
  box-shadow: 5px 5px 0 var(--crimson);
  padding: 4px 16px;
  margin-bottom: 14px;
  transform: rotate(-1.5deg);
}

.rk-media-col--trailer .rk-media-label { transform: rotate(1.5deg); }

.rk-frame {
  position: relative;
  z-index: 2;
  border: 3px solid var(--parchment);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
  background: var(--surface);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.rk-frame video,
.rk-frame .carousel { width: 100%; height: 100%; }

.rk-media-col--shots .carousel {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  border: 3px solid var(--parchment);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
}

.rk-media-col--trailer .rk-frame {
  /* Keep the native video controls above the overlapping Merc artwork. */
  z-index: 6;
}

.rk-media-col--trailer .rk-frame video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* peeking characters at the seam between the two panels */

.rk-peek {
  position: absolute;
  width: 300px;
  height: 400px;
  bottom: -160px;
  z-index: 1;
}

.rk-peek-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: opacity 0.25s ease;
}

.rk-peek-b { opacity: 0; }
.rk-peek:hover .rk-peek-a { opacity: 0; }
.rk-peek:hover .rk-peek-b { opacity: 1; }

.rk-peek--merc {
  /* Enlarge the Merc art so it reads clearly between the trailer and the
     Characters section, while the viewport still crops the far-right edge. */
  width: 500px;
  height: 560px;
  right: calc((100vw - 100%) / -2 - 28px);
  bottom: -340px;
  z-index: 3;
}

.rk-peek--merc {
  /* The artwork itself must not block the native video controls. */
  pointer-events: none;
  user-select: none;
}

.rk-peek--merc .rk-peek-img {
  pointer-events: none;
  object-fit: contain;
  object-position: right center;
  -webkit-user-drag: none;
}

/* A hover-only zone covers the visible lower part of Merc. It restores the
   merc1/merc2 swap without placing an interactive layer over the trailer. */
.rk-peek--merc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  pointer-events: auto;
}

.rk-story-section {
  position: relative;
  overflow: visible;
  min-height: 440px;
}

/* Keep the story copy above the decorative art where their transparent
   areas overlap. */
.rk-story-section .section-head,
.rk-story-section .prose {
  position: relative;
  z-index: 2;
}

.rk-story-section .rk-peek--fr {
  /* Start the artwork close to the story text, then let its right side run
     past the main container and slightly beyond the viewport. The page,
     rather than this element, now performs the final crop. */
  width: auto;
  height: 440px;
  left: calc(64% - 24px);
  right: calc((100vw - 100%) / -2 - 160px);
  bottom: auto;
  top: 0;
  transform: scaleX(-1);
}
.rk-story-section .rk-peek--fr .rk-peek-img {
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 900px) {
  .rk-story-section { min-height: 0; }
  .rk-story-section .rk-peek--fr { display: none; }
}


@media (max-width: 860px) {
  .rk-peek { display: none; }
}

/* --------------------------------------------------------- characters -- */

.rk-characters-head {
  text-align: center;
  margin-bottom: 26px;
}

.rk-characters-head h2 {
  display: inline-block;
  font-size: clamp(2rem, 5vw, 3rem);
  transform: rotate(1.5deg);
  text-shadow: 3px 3px 0 var(--crimson);
}

.rk-char-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 720px) {
  .rk-char-grid { grid-template-columns: 1fr; }
}

.rk-char-frame {
  border: 3px solid var(--parchment);
  background: var(--surface);
  box-shadow: 9px 9px 0 var(--crimson);
  overflow: hidden;
  transform: rotate(-1.2deg);
  transition: transform 0.25s ease;
}

.rk-char-grid > :nth-child(2) .rk-char-frame {
  transform: rotate(1.2deg);
  box-shadow: -9px 9px 0 var(--gold-dim);
}

.rk-char-frame:hover { transform: rotate(0deg) translateY(-4px); }

.rk-char-frame img {
  width: 100%;
  display: block;
}

/* -------------------------------------------------------- info section - */

.rk-page .section-head h2 {
  display: inline-block;
  transform: rotate(-1deg);
  text-shadow: 3px 3px 0 var(--crimson);
}

.rk-page .feature-grid {
  gap: 16px;
  background: none;
  border: none;
}

.rk-page .feature {
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  transform: rotate(-0.6deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.rk-page .feature:nth-child(even) { transform: rotate(0.6deg); }

.rk-page .feature:hover {
  transform: rotate(0deg) translateY(-3px);
  border-color: var(--gold);
}

.rk-page .feature .tag {
  display: inline-block;
  background: var(--crimson);
  color: var(--parchment);
  padding: 2px 10px;
  transform: rotate(-2deg);
}