/* 09: preserve the right-hand character when a tall window crops the 16:9 art.
   Load after home-video.css. The poster and video must share every crop rule. */
.video-draft .hero {
 height: 100svh;
 min-height: 0;
}
.video-draft .hero-footer {
 bottom: max(16px, min(3svh, 32px), env(safe-area-inset-bottom));
}
.video-draft .world-shade {
 background: linear-gradient(90deg, rgba(13,21,43,.68), rgba(18,26,48,.42) 32%, rgba(24,30,49,.08) 62%, rgba(22,28,46,.02));
}
.video-draft .world-vignette {
 background: linear-gradient(180deg, rgba(17,24,46,.28), transparent 22%, transparent 65%, rgba(15,23,42,.40));
}
/* Ultrawide windows crop the top sky before cutting off the character's boots. */
@media (min-aspect-ratio: 19/10) {
 .video-draft .anime-background,
 .video-draft #anime-video {
  object-position: 50% 100%;
  background-position: 50% 100%;
 }
}

/* A normal 16:9 desktop retains the original 50% 55% crop and layout.
   3:2, 4:3 and 5:4 windows instead crop the expendable left scenery first. */
@media (max-aspect-ratio: 3/2) and (min-width: 701px) {
 .video-draft .anime-background,
 .video-draft #anime-video {
  object-position: 92% 55%;
  background-position: 92% 55%;
 }
 .video-draft .hero-copy {
  left: clamp(32px, 6vw, 110px);
  max-width: min(44vw, 570px);
 }
 .video-draft .hero h1 {
  font-size: clamp(34px, 4.6vw, 70px);
 }
 .video-draft .portal-wrap {
  left: 48%;
  top: 68%;
 }
 .video-draft .hero-footer {
  right: auto;
  width: min(64vw, 880px);
  gap: 20px;
 }
 .video-draft .world-shade {
  background: linear-gradient(90deg, rgba(13,21,43,.82), rgba(18,26,48,.49) 32%, rgba(24,30,49,.10) 61%, transparent 82%);
 }
}

/* Tablet portrait / a narrow desktop panel: keep the face on the right and
   put the entry point in the open left foreground, away from face and boots. */
@media (max-aspect-ratio: 1/1) and (min-width: 701px) {
 .video-draft .anime-background,
 .video-draft #anime-video {
  object-position: 94% 55%;
  background-position: 94% 55%;
 }
 .video-draft .hero-copy {
  top: 20%;
  max-width: 46%;
 }
 .video-draft .hero h1 {
  font-size: clamp(32px, 4.3vw, 44px);
 }
 .video-draft .portal-wrap {
  left: 31%;
  top: 68%;
 }
 .video-draft .preview-label {
  max-width: 210px;
 }
 .video-draft .hero-footer {
  width: min(46vw, 420px);
  flex-wrap: wrap;
  gap: 10px 16px;
 }
}

/* Mobile still shows the original full-height character. The smaller copy
   occupies the upper left, leaving the eye line clear on the right. */
@media (max-width: 700px) {
 .video-draft .anime-background,
 .video-draft #anime-video {
  object-position: 94% 55%;
  background-position: 94% 55%;
 }
 .video-draft .hero-copy {
  top: max(102px, 14svh);
  left: 22px;
  right: auto;
  max-width: 56%;
 }
 .video-draft .hero-intro {
  font-size: 10px;
  letter-spacing: .025em;
  line-height: 1.6;
  margin-bottom: 13px;
 }
 .video-draft .hero h1 {
  font-size: clamp(24px, 6.9vw, 38px);
  line-height: 1.38;
  margin-bottom: 16px;
  letter-spacing: 0;
 }
 .video-draft .hero-description {
  font-size: 12px;
  line-height: 1.85;
 }
 .video-draft .hero-rule {
  margin: 20px 0 12px;
 }
 .video-draft .hero-japanese {
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .025em;
 }
 .video-draft .portal-wrap {
  left: 28%;
  top: min(71%, calc(100svh - 230px));
 }
 .video-draft .portal-enter {
  width: 110px;
  height: 110px;
  gap: 8px;
 }
 .video-draft .portal-title {
  font-size: 14px;
 }
 .video-draft .portal-hint {
  font-size: 9px;
  margin-top: 20px;
 }
 .video-draft .world-shade {
  background: linear-gradient(90deg, rgba(17,24,44,.70), rgba(20,28,46,.32) 44%, rgba(19,27,44,.04) 76%);
 }
 .video-draft .hero-footer {
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 18px;
  right: auto;
  width: 118px;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
 }
 .video-draft .learning-features {
  gap: 5px;
  font-size: 9px;
  letter-spacing: 0;
 }
 .video-draft .preview-label {
  max-width: none;
  text-align: left;
 }
}

/* Short browser windows used to inherit a 600/720/760px minimum, putting the
   controls below the viewport. Compact the copy instead of cropping controls. */
@media (max-height: 620px) {
 .video-draft .hero-copy {
  top: 100px;
 }
 .video-draft .hero-intro {
  margin-bottom: 10px;
 }
 .video-draft .hero h1 {
  font-size: clamp(24px, 4.8vw, 38px);
  line-height: 1.23;
  margin-bottom: 13px;
 }
 .video-draft .hero-description {
  font-size: 12px;
  line-height: 1.7;
 }
 .video-draft .hero-rule,
 .video-draft .hero-japanese {
  display: none;
 }
 .video-draft .portal-wrap {
  top: min(68%, calc(100svh - 222px));
 }
 .video-draft .portal-enter {
  width: 106px;
  height: 106px;
  gap: 7px;
 }
 .video-draft .portal-hint {
  margin-top: 15px;
 }
}

@media (max-height: 480px) and (min-width: 701px) {
 .video-draft .home-header {
  padding-top: 16px;
  padding-bottom: 12px;
 }
 .video-draft .hero-copy {
  top: 86px;
 }
 .video-draft .hero h1 {
  font-size: 32px;
 }
 .video-draft .portal-wrap {
  top: 58%;
 }
 .video-draft .portal-hint {
  display: none;
 }
 .video-draft .hero-footer {
  bottom: 12px;
 }
}