/* ===== Arknights: Endfield — one-screen prelander ===== */
:root {
  --art: url("Gemini_Generated_Image_rxys1wrxys1wrxys.jpeg");

  --paper: #11141c;
  --text: #f7f3e8;
  --ink: #111111;
  --muted: #b9b5a9;
  --gold: #c9a24a;
  --yellow: #ffe600;       /* CTA yellow */
  --yellow-hi: #fff59a;
  --yellow-dark: #c9b400;
  --shu: #d0372a;
  --win: #0078d4;
  --font: "Noto Sans", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic", "PingFang SC", "Microsoft YaHei", Tahoma, Arial, sans-serif;
  --serif: "Noto Serif", Georgia, "Times New Roman", "Batang", "Yu Mincho", "SimSun", serif;

  /* viewport + size of the 1409x736 artwork when fully visible */
  --vh: 100vh;
  --fw: min(100vw, calc(var(--vh) * 1409 / 736));
  --fh: calc(var(--fw) * 736 / 1409);
}
@supports (height: 100svh) {
  :root { --vh: 100svh; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;          /* one screen, no scroll */
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[lang="en"] { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }

/* ---------- Page ---------- */
.page {
  position: relative;
  width: 100vw;
  height: var(--vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.backdrop {
  position: absolute;
  inset: -40px;
  background: var(--art) center / cover no-repeat, var(--paper);
  filter: blur(28px) saturate(1.1) brightness(1.05);
  opacity: 0.85;
}

/* ---------- Artwork frame (portrait default) ---------- */
.frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* Portrait: zoom on the character on the right of the artwork */
.art {
  position: absolute;
  inset: 0;
  background: var(--art) 91% 0 / cover no-repeat;
  animation: kenburns 16s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.frame .cta--art,
.frame .win-badge--art,
.headline,
.note--art { display: none; }

/* English is shown once only: no secondary line for English visitors */
html.is-en .js-en { display: none; }

/* Short disclosure line */
.note {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
}

/* ---------- Headline on the artwork ---------- */
.headline__local,
.headline__en { display: block; }
.headline__local {
  font-family: var(--serif);
  font-size: calc(var(--fw) * 0.036);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.headline__en {
  font-size: calc(var(--fw) * 0.011);
  font-weight: 700;
  letter-spacing: 0.3em;
}

/* ---------- "WINDOWS ONLY" badge ---------- */
.win-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.8em 0.4em 0.6em;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border: 2px solid var(--win);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 120, 212, 0.3);
  white-space: nowrap;
  line-height: 1.1;
  animation: winGlow 2.2s ease-in-out infinite;
}
.win-badge__logo { width: 1.7em; height: 1.7em; fill: var(--win); flex: none; }
.win-badge__text { display: flex; flex-direction: column; align-items: flex-start; }
.win-badge__text strong { font-size: 0.95em; font-weight: 900; letter-spacing: 0.08em; color: var(--win); }
.win-badge__text small { font-size: 0.72em; font-weight: 700; }

@keyframes winGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 120, 212, 0.25); }
  50%      { box-shadow: 0 4px 22px rgba(0, 120, 212, 0.6); }
}

/* ---------- Bottom panel (portrait) ---------- */
.panel {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(to bottom, rgba(17, 20, 28, 0) 0%, rgba(17, 20, 28, 0.96) 22%, var(--paper) 100%);
  margin-top: -60px;
}

.panel__title { margin: 0; display: flex; flex-direction: column; line-height: 1.15; }
.panel__local { font-family: var(--serif); font-size: clamp(24px, 7vw, 36px); font-weight: 800; }
.panel__en { font-size: 11px; letter-spacing: 0.3em; color: var(--muted); font-weight: 700; }

.bubble {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 900;
  animation: bounce 1.2s ease-in-out infinite;
}
.bubble strong { color: var(--yellow); font-size: 1.2em; }
.bubble span[lang="en"] { font-size: 0.75em; font-weight: 700; color: var(--muted); }

.panel__platforms { margin: 2px 0 0; font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }

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

/* CTA + Windows badge side by side */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
}
.win-badge--panel {
  flex: none;
  font-size: 11px;
}

/* ---------- CTA: big, yellow, black text, animated ---------- */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  background: linear-gradient(180deg, var(--yellow-hi) 0%, var(--yellow) 45%, #ffd400 100%);
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(255, 230, 0, 0.9);
  animation: ctaPulse 1.1s ease-in-out infinite, ctaGlow 1.1s ease-out infinite, ctaBlink 1.1s steps(1, end) infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta:hover { animation-play-state: paused; transform: translateY(3px) scale(1.03); box-shadow: 0 3px 0 var(--ink), 0 0 24px rgba(255, 230, 0, 0.9); }
.cta:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink); }

.cta__local { font-size: 1em; letter-spacing: 0.04em; }
.cta__en { font-size: 0.5em; letter-spacing: 0.14em; font-weight: 800; }
.cta__arrow { font-size: 0.7em; animation: nudge 0.8s ease-in-out infinite; }

.cta__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3em;
  height: 2.3em;
  padding: 0 0.7em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 0.5em;
  font-weight: 900;
}

/* light sweep across the button */
.cta__shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 25%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: shine 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes ctaGlow {
  0%   { box-shadow: 0 6px 0 var(--ink), 0 0 0 0 rgba(255, 230, 0, 0.95); }
  100% { box-shadow: 0 6px 0 var(--ink), 0 0 0 22px rgba(255, 230, 0, 0); }
}
@keyframes ctaBlink {
  0%  { filter: brightness(1); }
  50% { filter: brightness(1.18) saturate(1.2); }
}
@keyframes shine {
  0%   { left: -60%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

.cta--panel {
  flex: none;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 0;
  padding: 12px 14px 10px;
  font-size: clamp(18px, 5.4vw, 28px);
}
.cta--panel .cta__badge,
.cta--panel .cta__arrow { display: none; }
.cta--panel .cta__en { order: 5; flex-basis: 100%; text-align: center; font-size: 0.5em; }

/* ---------- Draggable mini video player ---------- */
.player {
  position: fixed;
  z-index: 20;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: min(46vw, 300px);
  background: #000;
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 230, 0, 0.85);
  direction: ltr;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: playerIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.3s both;
}
.player.is-dragging {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--yellow), 0 0 26px rgba(255, 230, 0, 0.7);
}

@keyframes playerIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.player__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000 var(--art) center / cover no-repeat;
  cursor: grab;
}
.player.is-dragging .player__screen { cursor: grabbing; }

.player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.player__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 7px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}

.player__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: rgba(255, 230, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.player.is-paused .player__center { display: flex; }

.player__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 8px;
  background: var(--ink);
}

.player__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #2a2a2a;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.player__btn:hover { background: var(--yellow); color: var(--ink); }
.player__btn--expand { margin-left: auto; }

.player__volume {
  flex: 1 1 auto;
  min-width: 40px;
  height: 4px;
  accent-color: var(--yellow);
  cursor: pointer;
}

.player__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #333;
}
.player__progress-bar { width: 0; height: 100%; background: var(--yellow); }

/* CSS icons */
.icon-play {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--ink);
}
.player__btn .icon-play { border-width: 6px 0 6px 10px; border-left-color: currentColor; margin-left: 2px; }

.icon-pause {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.icon-expand {
  position: relative;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  clip-path: polygon(0 0, 40% 0, 40% 2px, 2px 2px, 2px 40%, 0 40%, 0 100%, 40% 100%, 40% calc(100% - 2px), 2px calc(100% - 2px), 2px 60%, 0 60%, 0 0,
                     100% 0, 100% 40%, calc(100% - 2px) 40%, calc(100% - 2px) 2px, 60% 2px, 60% 0, 100% 0,
                     100% 100%, 60% 100%, 60% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 60%, 100% 60%, 100% 100%);
}
.player.is-expanded .icon-expand {
  border: none;
  clip-path: none;
}
.player.is-expanded .icon-expand::before,
.player.is-expanded .icon-expand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 14px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.player.is-expanded .icon-expand::after { transform: rotate(-45deg); }

/* Enlarged player (user choice) */
.player.is-expanded {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(94vw, calc((var(--vh) - 70px) * 16 / 9));
  transform: translate(-50%, -50%);
  z-index: 100;
  animation: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--yellow);
}
.player.is-expanded .player__screen { cursor: pointer; }
.player.is-expanded .player__video { object-fit: contain; }
.player.is-expanded .player__btn { width: 36px; height: 32px; font-size: 16px; }
.player.is-expanded .player__volume { max-width: 180px; }

.player-shade {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.player-shade.is-visible { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }

/* ---------- Butterfly cursor + sparkle trail (mouse devices) ---------- */
html.fx-cursor,
html.fx-cursor * { cursor: none !important; }

.bf-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}
.bf-cursor.is-visible { opacity: 1; }
.bf-cursor svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  transition: transform 0.2s ease;
}
.bf-cursor.is-hover svg { transform: scale(1.45); }
.bf-cursor .bf-wings {
  transform-box: view-box;
  transform-origin: 16px 16px;
  animation: flap 0.24s ease-in-out infinite alternate;
}
.bf-cursor.is-hover .bf-wings { animation-duration: 0.12s; }
.bf-cursor .bf-up   { fill: var(--yellow); }
.bf-cursor .bf-down { fill: #f5b400; }
.bf-cursor.is-hover .bf-up   { fill: #ff8a00; }
.bf-cursor.is-hover .bf-down { fill: var(--shu); }

@keyframes flap {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0.25); }
}

.fx-spark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: var(--c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: spark var(--t) ease-out forwards;
}

@keyframes spark {
  from { transform: translate(var(--x), var(--y)) scale(1) rotate(0deg); opacity: 1; }
  to   { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(0.2) rotate(200deg); opacity: 0; }
}

/* ---------- Landscape / desktop: full artwork + CTA on its banner ---------- */
@media (min-aspect-ratio: 4/3) {
  .page { display: block; }

  .frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--fw);
    height: var(--fh);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
  }

  .art {
    background-position: center;
    animation: none;
  }

  /* Darkens the bottom of the artwork behind the headline and CTA */
  .frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to bottom, rgba(10, 12, 18, 0) 0%, rgba(10, 12, 18, 0.72) 62%, rgba(10, 12, 18, 0.92) 100%);
    pointer-events: none;
  }

  .panel { display: none; }

  .headline {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 19%;
    margin: 0;
    text-align: center;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.75);
    pointer-events: none;
  }

  .frame .cta--art {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 21%;
    bottom: 6%;
    width: 58%;
    height: 11.5%;
    font-size: calc(var(--fw) * 0.0235);
    border-width: calc(var(--fw) * 0.0025);
  }

  /* Windows badge to the right of the CTA */
  .frame .win-badge--art {
    display: inline-flex;
    position: absolute;
    left: 81%;
    bottom: 8.4%;
    font-size: calc(var(--fw) * 0.0105);
    border-width: max(1px, calc(var(--fw) * 0.0015));
    z-index: 3;
  }

  .note--art {
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 1.2%;
    margin: 0;
    text-align: center;
    font-size: max(9px, calc(var(--fw) * 0.0078));
    color: #d9d5ca;
  }

  /* Player on the sky, between the horse and the character on the right */
  .player {
    top: calc((var(--vh) - var(--fh)) / 2 + var(--fh) * 0.03);
    right: auto;
    left: calc((100vw - var(--fw)) / 2 + var(--fw) * 0.425);
    width: calc(var(--fw) * 0.2);
    min-width: 200px;
  }
}

/* very short landscape phones */
@media (min-aspect-ratio: 4/3) and (max-height: 430px) {
  .cta--art { border-width: 2px; }
  .player { min-width: 180px; }
  .player__btn { width: 24px; height: 22px; font-size: 11px; }
}

/* Right-to-left languages */
html[dir="rtl"] .cta__arrow { animation: none; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta__shine,
  .cta__arrow,
  .bubble,
  .art,
  .win-badge,
  .player,
  .bf-cursor .bf-wings { animation: none; }
}