/* The moving parts of the landing page: bestiary, Yêu Vương, maps, events, the cursor and the motes.
   Sprites and map views come from tools/promo/site_media.py; promo/fx.js renders them from media.js.
   Same tokens and font steps as site.css. */

/* fx.js writes both languages side by side; the html class picks one. */
.lang-vi .l-en, .lang-en .l-vi { display: none; }

/* --- Cursor: the game's jade sword pointer (kit/cursor.png, tip at 0 0) --- */

@media (pointer: fine) {
  html, a, button, summary, label, .btn, [role="tab"], .boss-card, .beast {
    cursor: url(kit/cursor.png) 0 0, auto;
  }
}
.fx-trail { position: fixed; inset: 0; z-index: 80; pointer-events: none; image-rendering: pixelated; }

/* --- Hero motes and hover glow -------------------------------------------- */

/* site.css lifts every hero child to position: relative, which collapses the art to 0 height. */
.hero > .hero-art, .hero > .hero-fade { position: absolute; }

/* site.css slices the button without fill, so its lacquer centre stayed empty over the cover. */
.btn { border-image: url(kit/button.png) 8 fill stretch; }

/* --- Header on one row ---------------------------------------------------- */

/* The section list sits beside the logo where it fits on one line (about 1600px in VI). */
@media (min-width: 1600px) {
  :root { --head: 78px; }
  .head { display: flex; align-items: center; gap: 16px; }
  .head-row { display: contents; }
  .head .brand { order: 1; }
  .head .nav { order: 2; flex: 1; flex-wrap: nowrap; margin: 0; }
  .head .lang { order: 3; }
  .head-row .btn { order: 4; }
}
/* Below that the list folds into the Menu button, as site.css does under 1080px. */
@media (min-width: 1081px) and (max-width: 1599px) {
  :root { --head: 78px; }
  .head .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 4px var(--pad) 12px;
    background: rgba(15, 19, 32, .97);
    border-bottom: 2px solid var(--bronze-700);
  }
  .head .nav[hidden] { display: none; }
  .head .nav a { padding: 8px 0; }
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font: inherit;
    font-size: var(--fs);
    line-height: var(--lh);
    color: var(--bronze-100);
    background: var(--lacquer-700);
    border: 2px solid var(--bronze-700);
    cursor: pointer;
  }
  .nav-toggle::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
}
.hero-art .drift { animation: drift 40s linear infinite alternate; }
@keyframes drift { from { translate: -3% 0; } to { translate: 3% 0; } }
.hero-art .crane {
  --px: 2;
  position: absolute; top: 22%; left: 0;
  width: calc(32px * var(--px)); height: calc(20px * var(--px));
  background: url(img/title_crane.png) 0 0 / calc(128px * var(--px)) 100%;
  image-rendering: pixelated;
  animation: flap .7s steps(4) infinite, cross 26s linear infinite;
}
@keyframes flap { to { background-position: calc(-128px * var(--px)) 0; } }
@keyframes cross { from { transform: translateX(-20vw); } 50% { transform: translateX(50vw) translateY(-3vh); } to { transform: translateX(120vw) translateY(1vh); } }
.hero .tagline span { animation: rise .9s both; }
.hero .tagline span + span { color: var(--jade-100); animation-delay: .7s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* The paper frame has no fill, so the sheet takes the paper inside too and the ink reads. */
.sheet { border-image: url(kit/paper.png) 16 fill repeat; padding: 8px 24px 16px; }
.sheet h3 { color: var(--seal-500); }

/* Illustrations at the top of a card or a step. */
.card > .art {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 16px;
  object-fit: cover; image-rendering: pixelated;
  border: 2px solid var(--lacquer-600);
}

/* UI windows keep their whole frame instead of a 16:9 cover crop. */
.card > .art.whole { aspect-ratio: auto; object-fit: contain; background: var(--lacquer-900); }
.craft-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.craft-pics li { position: relative; }
.craft-pics img { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 2px solid var(--lacquer-600); }
.craft-pics span {
  position: absolute; left: 2px; right: 2px; bottom: 2px; padding: 0 6px;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--paper-100);
  background: rgba(11, 15, 26, .8);
}

/* The boss band keeps the shot's own 2.25:1 frame, so the wing tips and the hero's feet stay in. */
.band.boss img { max-height: 640px; image-rendering: pixelated; }

/* The flight clip keeps its whole 8:3 frame, so the island edge and the hero both stay in. */
.band.fly img { height: auto; min-height: 0; max-height: none; aspect-ratio: 8 / 3; image-rendering: pixelated; }

/* The thuật clips keep their 3:2 frame so the rising VFX is not cut. */
.card > .art.anim { aspect-ratio: 3 / 2; }

/* Realm tabs: each shows its own clip of the hero, scaled 3x like the game view. */
/* The card's bullet indent and row gap are for plain lists; a styled list sets its own. */
.card ul[class] { padding-left: 0; }
.card ul[class] li + li { margin-top: 0; }
.ladder li[role="tab"] { cursor: pointer; }
.ladder li[role="tab"]:hover { border-color: var(--bronze-300); }
.ladder li[role="tab"]:focus-visible { outline: 2px solid var(--jade-300); outline-offset: 2px; }
.realm-view figure { display: flex; align-items: center; gap: 24px; margin: 0 0 16px; }
.realm-view figure[hidden] { display: none; }
.realm-view img {
  flex: none; width: 240px; height: 276px; image-rendering: pixelated;
  border: 2px solid var(--lacquer-600);
}
.realm-view figcaption { color: var(--paper-100); }
.bar-wrap .bar i { transition: width .6s ease-out; }
@media (max-width: 600px) {
  .realm-view figure { flex-direction: column; align-items: flex-start; gap: 12px; }
  .realm-view img { width: 160px; height: 184px; }
}

.hero-motes { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.card { transition: box-shadow .25s ease-out; }
.card:hover { box-shadow: 0 0 0 2px rgba(159, 232, 208, .18), 0 0 24px rgba(159, 232, 208, .12); }
.shots img, .journey img { transition: filter .25s ease-out, transform .25s ease-out; }
.shots figure:hover img, .journey figure:hover img { filter: brightness(1.12) saturate(1.1); transform: translateY(-2px); }

/* The plate over each section title catches a glint once it scrolls in. */
.sec-head .plate { position: relative; overflow: hidden; }
.sec-head .plate::after {
  content: "";
  position: absolute;
  inset: -24px auto -10px -40px;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(240, 216, 148, .55), transparent);
  transform: skewX(-20deg);
}
.js .sec-head.on .plate::after { animation: glint 1.2s .3s ease-out 1 both; }
@keyframes glint { from { left: -40px; } to { left: calc(100% + 40px); } }

/* --- Journey strip ---------------------------------------------------------- */

.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 40px 0 0; padding: 0; list-style: none; counter-reset: stop; }
.journey figure { margin: 0; }
.journey img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--bronze-700); }
.journey figcaption { margin-top: 8px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--paper-300); }
.journey figcaption b { display: block; color: var(--bronze-100); font-family: var(--title); font-weight: 400; }
.journey li { counter-increment: stop; position: relative; }
.journey li::before {
  content: counter(stop);
  position: absolute;
  top: 8px; left: 8px;
  z-index: 1;
  width: 32px; height: 32px;
  background: url(kit/seal.png) 0 0 / 32px 32px;
  color: var(--paper-100);
  font-family: var(--title);
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  image-rendering: pixelated;
}

img.px { image-rendering: pixelated; }

/* --- Bestiary ------------------------------------------------------------- */

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.tabs button {
  font: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  padding: 4px 12px;
  color: var(--text-2);
  background: var(--lacquer-700);
  border: 2px solid var(--bronze-700);
}
.tabs button:hover { color: var(--bronze-100); }
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--bronze-300); border-color: var(--bronze-100); }

.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.beast {
  display: grid;
  grid-template-rows: 112px auto;
  justify-items: center;
  gap: 8px;
  padding: 12px 8px 16px;
  background: radial-gradient(ellipse at 50% 70%, rgba(95, 196, 160, .10), transparent 60%), var(--lacquer-800);
  border: 2px solid var(--lacquer-600);
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.beast:hover { border-color: var(--jade-300); transform: translateY(-3px); }
.beast .stage { display: flex; align-items: flex-end; justify-content: center; height: 112px; }
.beast b { display: block; color: var(--bronze-100); font-weight: 400; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.beast .ln { display: block; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.beast .tag { color: var(--jade-100); }
.beast[hidden] { display: none; }
.more { display: block; margin: 24px auto 0; padding: 0 16px; }

/* --- Yêu Vương ------------------------------------------------------------ */

.bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.boss-card {
  position: relative;
  display: grid;
  grid-template-rows: 200px auto;
  gap: 12px;
  padding: 16px 16px 20px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(208, 73, 59, .18), transparent 55%),
    linear-gradient(180deg, var(--lacquer-700), var(--lacquer-900));
  border: 2px solid var(--bronze-700);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.boss-card:hover { border-color: var(--seal-300); box-shadow: 0 0 28px rgba(208, 73, 59, .25); }
.boss-card .stage { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.boss-card .stage::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 70%; height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%);
}
.boss-card .stage img { position: relative; transition: filter .2s; }
.boss-card:hover .stage img { filter: drop-shadow(0 0 8px rgba(255, 120, 90, .45)); }
.boss-card .boss_plate {
  justify-self: center;
  border-style: solid;
  border-width: 8px;
  border-image: url(kit/boss_plate.png) 8 stretch;
  padding: 0 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--bronze-100);
  image-rendering: pixelated;
}
.boss-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.boss-card dt { color: var(--text-3); }
.boss-card dd { margin: 0; color: var(--paper-300); }
.badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 0 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--paper-100);
  background: var(--seal-500);
  border: 2px solid var(--seal-300);
}
.badge.late { background: var(--lacquer-600); border-color: var(--bronze-500); color: var(--bronze-100); }
.test-note {
  display: table;
  margin: 24px auto 0;
  padding: 4px 12px;
  color: var(--paper-100);
  font-size: var(--fs);
  line-height: var(--lh);
  text-align: center;
  background: var(--seal-700);
  border: 2px solid var(--seal-300);
}
.play-card .test-note { margin: 0 auto 24px; }
.hint { margin-top: 16px; color: var(--text-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* --- Maps ----------------------------------------------------------------- */

.maps { margin-top: 48px; }
.map-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--bronze-700);
  background: var(--lacquer-900);
}
.map-view img {
  position: absolute;
  top: 0; left: 0;
  width: 112%;
  max-width: none;
  height: auto;
  image-rendering: auto;
  animation: pan 36s ease-in-out infinite alternate;
}
/* The view shows nearly the whole 960x540 window, so the frame drifts only over the spare edge. */
@keyframes pan {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-10%, -5%); }
  100% { transform: translate(-5%, -10%); }
}
@keyframes pan-m {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-30%, -16%); }
  100% { transform: translate(-16%, -30%); }
}
.map-view figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 16px 12px;
  background: linear-gradient(180deg, transparent, rgba(11, 15, 26, .9));
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--paper-100);
}
.map-view figcaption b { font-family: var(--title); font-weight: 400; color: var(--bronze-100); margin-right: 12px; }
.map-view.swap img { animation: none; opacity: 0; }
.maps .tabs { margin: 16px 0 0; }

/* --- Events --------------------------------------------------------------- */

.next {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 24px;
}
.next .seal { width: 48px; height: 48px; background-size: 48px 48px; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(208, 73, 59, .6)); } }
.next b { display: block; font-family: var(--title); font-weight: 400; color: var(--bronze-100); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.next .clock { font-family: var(--title); color: var(--jade-100); font-size: var(--fs-h3); line-height: var(--lh-h3); text-align: right; white-space: nowrap; }
.next .live { color: var(--seal-300); }

.day { position: relative; margin: 8px 0 40px; padding-top: 24px; }
.day .track { position: relative; height: 32px; background: var(--lacquer-900); border: 2px solid var(--lacquer-600); }
.day .seg { position: absolute; top: 2px; bottom: 2px; min-width: 4px; }
.day .hours { position: relative; height: 24px; margin-top: 4px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-3); }
.day .hours span { position: absolute; transform: translateX(-50%); }
.day .now { position: absolute; top: 18px; bottom: 24px; width: 2px; background: var(--paper-100); box-shadow: 0 0 6px var(--paper-100); }
.day .now::before {
  content: attr(data-t);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--paper-100);
  white-space: nowrap;
}

.ev-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ev {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
  padding: 16px;
  background: var(--lacquer-800);
  border: 2px solid var(--lacquer-600);
  transition: border-color .2s;
}
.ev:hover { border-color: var(--bronze-500); }
.ev.is-live { border-color: var(--seal-300); box-shadow: 0 0 20px rgba(208, 73, 59, .18); }
.ev i { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid var(--bronze-900); }
.ev h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
.ev p { margin: 8px 0 0; color: var(--paper-300); }
.ev .times { display: block; color: var(--jade-100); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.ev-pic { position: relative; margin: 0; }
.ev-pic > img:first-child {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border: 2px solid var(--lacquer-600);
}
.ev-more { margin-top: 12px; }
.ev-more summary {
  display: inline-block; padding: 4px 12px; list-style: none;
  color: var(--bronze-100); font-size: var(--fs-sm); line-height: var(--lh-sm);
  border: 2px solid var(--bronze-700); background: var(--lacquer-900);
}
.ev-more summary::-webkit-details-marker { display: none; }
.ev-more summary::before { content: "+ "; }
.ev-more[open] summary::before { content: "- "; }
.ev-more summary:hover { border-color: var(--bronze-300); }
.ev-more h4 { margin: 16px 0 0; color: var(--bronze-300); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 400; }
.loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.loot li { display: flex; align-items: center; gap: 12px; color: var(--paper-100); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.ico-s {
  flex: none; width: 48px; height: 48px;
  background-color: var(--lacquer-900); background-repeat: no-repeat; image-rendering: pixelated;
  border: 2px solid var(--g, var(--lacquer-600));
}
.ico-s.dot { width: 16px; height: 16px; margin: 0 16px; background: var(--bronze-300); border-color: var(--bronze-900); }
.ev .times .on { color: var(--seal-300); }

/* One colour per event, shared by the track and the list. */
.c-tide { background: var(--jade-300); }
.c-lecture { background: var(--bronze-300); }
.c-bi_canh { background: var(--grade-thuong); }
.c-world_boss { background: var(--seal-300); }
.c-beast_tide { background: #e0883b; }
.c-dai_bi { background: var(--bronze-100); }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.week li {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 112px;
  padding: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--paper-300);
  background: var(--lacquer-900);
  border: 2px solid var(--lacquer-600);
}
.week li b { font-weight: 400; color: var(--text-2); }
.week li.today { border-color: var(--bronze-300); background: linear-gradient(180deg, rgba(212, 174, 98, .16), var(--lacquer-900)); }
.week li.today b { color: var(--bronze-100); }
.week li.big { border-color: var(--grade-thuong); }

@media (prefers-reduced-motion: reduce) {
  .map-view img, .next .seal, .hero-art .drift, .hero-art .crane, .hero .tagline span { animation: none; }
  .js .sec-head.on .plate::after { animation: none; }
  .card, .beast, .shots img, .journey img { transition: none; }
}

@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bestiary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .beast { grid-template-rows: 80px auto; }
  .beast .stage { height: 80px; }
  .boss-card { grid-template-rows: 150px auto; }
  .map-view img { width: 150%; animation-name: pan-m; }
  .next { grid-template-columns: auto 1fr; }
  .next .clock { grid-column: 1 / 3; text-align: left; }
  .ev { grid-template-columns: minmax(0, 1fr); }
  .ev-pic > img:first-child { aspect-ratio: 16 / 9; }
  .loot { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week li { min-height: 0; }
  .day .hours span:nth-child(even) { display: none; }
}

/* --- Bảo khố: the game's 16px item and skill atlases, scaled by whole numbers --- */

.icon-wall { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ico {
  width: calc(var(--s, 3) * 16px + 8px);
  height: calc(var(--s, 3) * 16px + 8px);
  padding: 4px;
  background: radial-gradient(circle, color-mix(in srgb, var(--g) 30%, transparent), var(--lacquer-900) 70%);
  border: 2px solid color-mix(in srgb, var(--g) 70%, var(--lacquer-900));
  transition: transform .15s, box-shadow .15s;
}
.ico:hover, .ico:focus-visible { transform: translateY(-2px); box-shadow: 0 0 12px var(--g); outline: none; }
.ico span { display: block; width: 100%; height: 100%; image-rendering: pixelated; background-repeat: no-repeat; }
.tip {
  position: fixed;
  z-index: 70;
  max-width: 320px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--paper-300);
  background: var(--lacquer-900);
  border: 2px solid var(--bronze-500);
  pointer-events: none;
}
.tip b { display: block; font-weight: 400; }
.tip i { display: block; font-style: normal; color: var(--text-3); }
@media (max-width: 900px) { .icon-wall { --s: 2; } }