/* One look only, the game's own: parchment panels over a deep Aegean sea, the route read right to left. */
@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/AlegreyaSans-Italic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --sea: #17333f;
  --sea-deep: #102630;
  --foam: #e9dfc8;
  --foam-dim: #b3bfb6;
  --stone: #d9c6a0;
  --ink: #2c2a2c;
  --ink-soft: #55493c;
  --crimson: #7c2420;
  --gold: #e4b85c;
  --bronze: #8a6a3f;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sea); color: var(--foam); font: 500 1.15rem/1.5 var(--body); }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h2 { font: 700 clamp(1.7rem, 4vw, 2.6rem)/1.15 var(--display); text-wrap: balance; }
h3 { font: 700 1.2rem/1.25 var(--display); }
a { color: inherit; }
a:focus-visible, video:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap {
  width: 100%; max-width: 1180px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
section { padding-block: clamp(48px, 8vw, 88px); }
section .wrap { display: grid; gap: 28px; }
.sea { background: var(--sea); }
.stone { background: var(--stone); color: var(--ink); }
.note { color: var(--foam-dim); max-width: 60ch; }

/* The panel texture is the game's ui_parchment.png, nine-sliced so the corner scrolls survive any size. */
.parchment {
  color: var(--ink);
  border-style: solid;
  border-width: clamp(44px, 7vw, 84px);
  border-image: url("img/ui_parchment.png") 200 fill / 1 / 0 stretch;
  filter: drop-shadow(0 14px 26px rgb(8 20 26 / .55));
}

/* The tan button is the game's secondary button; it marks the guide as the page's way in. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sea-deep); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--sea-deep); border-bottom: 2px solid var(--bronze); }
.top .wrap { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); min-height: 60px; }
.top a { font: 700 1rem/1.2 var(--display); color: var(--foam); text-decoration: none; white-space: nowrap; }
.top a:hover { color: var(--gold); }
.top .brand { font-size: 1.2rem; color: #f4dba0; margin-right: auto; }
.top .lead { padding: 9px 16px; border-radius: 14px; background: #dcc9a4; color: var(--ink); border: 2px solid var(--gold); }
.top .lead:hover { background: #ecdcb8; color: var(--ink); }
section { scroll-margin-top: 64px; }

.hero { position: relative; display: grid; justify-items: center; align-items: center; min-height: clamp(560px, 62vw, 760px); padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.hero-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-panel { position: relative; width: min(600px, 100%); display: grid; gap: 18px; justify-items: center; text-align: center; }
.hero-panel h1 { width: 100%; }
.hero-panel img { width: 100%; height: auto; }
.lede { font-size: 1.22rem; color: var(--ink); max-width: 44ch; text-wrap: pretty; }

.btn {
  display: inline-block; padding: 13px 28px; border-radius: 16px;
  background: var(--crimson); color: #f7e7c0; border: 2px solid var(--gold);
  font: 700 1.02rem/1.2 var(--display); letter-spacing: .03em; text-decoration: none;
}
a.btn:hover { background: #8f2b26; }
.btn.is-soon { border-color: var(--bronze); background: #6a2a25; }

video { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: var(--sea-deep); }

.fight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.fight h2 { grid-column: 1 / -1; max-width: 22ch; }
.beat { display: grid; gap: 14px; align-content: start; }
.beat img { border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.beat figcaption { display: grid; gap: 4px; min-width: 0; }
.beat p { color: var(--ink-soft); max-width: 48ch; }

/* The list runs east to west, so Kilikia sits at the right edge and the dashed sea road crosses leftward. */
.route { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); direction: rtl; position: relative; padding-top: 30px; }
.route::before { content: ""; position: absolute; top: 8px; left: 6%; right: 6%; border-top: 3px dashed var(--gold); }
.route li { direction: ltr; position: relative; display: grid; gap: 3px; justify-items: center; align-content: start; text-align: center; padding-inline: 6px; min-width: 0; }
.route li::before { content: ""; position: absolute; top: -29px; width: 15px; height: 15px; border-radius: 50%; background: var(--crimson); border: 2px solid var(--gold); }
.route b { font: 700 1.02rem/1.2 var(--display); color: #f4dba0; }
.route span { font-size: .92rem; color: var(--foam-dim); font-variant-numeric: tabular-nums; }
.route em { font-size: 1rem; line-height: 1.25; }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shots img { border-radius: 14px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.shots a { display: block; border-radius: 14px; }
.shots a:hover img { filter: brightness(1.08); }

.press { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 36px; }
.press-card h2 { font-size: 1.8rem; margin-bottom: 16px; }
dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
dt { font-weight: 700; color: var(--ink-soft); }
.press-text { display: grid; gap: 14px; min-width: 0; }
.press-text h3 { color: #f4dba0; }
.press-text h3:not(:first-child) { margin-top: 10px; }
.press-text .btn { justify-self: start; margin-top: 8px; }
.zip-note { color: var(--foam-dim); font-size: 1rem; }
.media-block { grid-column: 1 / -1; display: grid; gap: 14px; min-width: 0; }
.media-block h3 { color: #f4dba0; }
.media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.media a { display: grid; gap: 2px; text-decoration: none; border-radius: 12px; }
.media img, .logo-tile { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 6px; }
.logo-tile { display: grid; place-items: center; background: #e9dcc0; padding: 10px; }
.logo-tile img { object-fit: contain; aspect-ratio: auto; height: 100%; margin: 0; border-radius: 0; }
.media span:not(.logo-tile) { font-size: .95rem; color: var(--foam-dim); }
.media a:hover b { color: var(--gold); }
.todo { background: var(--gold); color: var(--ink); padding: 0 6px; border-radius: 6px; }

.foot { background: var(--sea-deep); padding-block: 22px; font-size: 1rem; color: var(--foam-dim); }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.legal main { padding-block: 32px; }
.legal-card { max-width: 780px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.legal-card h1 { font: 700 2rem/1.2 var(--display); }
.legal-card h2 { font-size: 1.25rem; margin-top: 12px; }
.legal-card .note { color: var(--ink-soft); }

.legal-card.guide { max-width: 980px; }
.guide li { margin-bottom: 6px; }
.guide ul { list-style: disc; padding-left: 22px; }
.guide ol { list-style: decimal; padding-left: 24px; }
.table { overflow-x: auto; }
.table table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.table th { text-align: left; font-family: var(--display); font-size: .95rem; border-bottom: 2px solid var(--bronze); }
.table th, .table td { padding: 7px 12px 7px 0; vertical-align: top; }
.table td { border-bottom: 1px solid rgb(138 106 63 / .4); }
.table td:first-child { font-weight: 700; min-width: 7.5em; }

@media (max-width: 820px) {
  .fight, .press { grid-template-columns: minmax(0, 1fr); }
  .shots, .media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* On a phone the route becomes a voyage down the page, east at the top. */
  .route { grid-template-columns: minmax(0, 1fr); direction: ltr; padding-top: 0; gap: 18px; padding-left: 30px; }
  .route::before { top: 6px; bottom: 6px; left: 7px; right: auto; border-top: 0; border-left: 3px dashed var(--gold); }
  .route li { justify-items: start; text-align: left; padding-inline: 0; }
  .route li::before { top: 4px; left: -30px; }
}

@media (max-width: 460px) {
  .top .brand { display: none; }
  .top .wrap { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }