/* Last Torch: the game's site. The page is the road: a painted world stands still behind it while you walk down through the text.
   Clean white text and smooth pieces, as in the game's interface; the frames and the parchment are the game's own. */
@font-face {
  font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --night: #0d0b12;
  --deep: #151120;
  --text: rgba(255, 255, 255, 0.9);
  --soft: rgba(255, 255, 255, 0.74);
  --gold: #eebf6a;
  --gold-deep: #b9852f;
  --ember: #ff8f3f;
  --blood: #b3202a;
  --paper: #f0dfb9;
  --ink: #2a1408;
  --line: rgba(238, 191, 106, 0.34);
  --panel: rgba(13, 10, 18, 0.78);
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1.12);
  --reach-top: 0px;
  --reach-bottom: 0px;
}
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--text); font: 600 17px/1.6 var(--sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
figure { margin: 0; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; color: #fff; }
h2 { font-size: clamp(32px, 4.6vw, 54px); text-shadow: 0 2px 22px rgba(0, 0, 0, 0.75); }
h3 { font-size: 23px; }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.narrow { max-width: 760px; }
.visually-hidden { position: absolute; left: -9999px; }
.visually-hidden:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.eyebrow {
  display: inline-block; font: 600 13px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); max-width: 680px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.section { padding: clamp(90px, 14vw, 200px) 0; position: relative; }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(30px, 4vw, 52px); max-width: 720px; }
.section-head.center { text-align: center; justify-items: center; margin-inline: auto; }
.center-text { text-align: center; margin-inline: auto; }

/* ------------------------------------------------------------ the world behind the page */
.stage { position: fixed; inset: calc(-1 * var(--reach-top)) 0 auto 0; height: 100vh; height: calc(100lvh + var(--reach-top) + var(--reach-bottom)); z-index: -1; overflow: hidden; }
.stage img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.stage img { object-fit: cover; image-rendering: pixelated; }
.stage canvas { image-rendering: pixelated; opacity: 0; transition: opacity 0.9s ease; }
.stage.live canvas { opacity: 1; }
.veil { position: absolute; inset: 0; pointer-events: none; }

/* ------------------------------------------------------------ pieces */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; min-height: 56px; padding: 0 34px;
  font: 700 19px/1 var(--serif); color: #2c1705; letter-spacing: 0.01em; transition: transform 0.16s var(--ease), filter 0.16s;
  background: url("../ui/ui_boton.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
.btn:hover { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 8px 22px rgba(255, 150, 60, 0.45)) brightness(1.06); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn svg { width: 18px; height: 18px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; color: #fff; text-decoration: none;
  background: rgba(13, 10, 18, 0.74); border: 1px solid var(--line); font: 600 13.5px/1.25 var(--sans); text-align: left;
}
.pill .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(255, 143, 63, 0.22), 0 0 12px rgba(255, 143, 63, 0.9); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 6px rgba(255, 143, 63, 0.12), 0 0 18px rgba(255, 143, 63, 0.9); } }

/* ------------------------------------------------------------ header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 10px 0; transition: background 0.3s, padding 0.3s, box-shadow 0.3s; padding-top: max(10px, env(safe-area-inset-top)); }
.site-header.solid { background: rgba(13, 10, 18, 0.9); box-shadow: 0 1px 0 var(--line); padding-block: 6px; padding-top: max(6px, env(safe-area-inset-top)); }
.site-header .wrap { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; }
.brand img { height: 44px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); opacity: 0; transition: opacity 0.3s; }
.site-header.solid .brand img, .page .brand img { opacity: 1; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: #fff; text-decoration: none; font: 600 14px/1 var(--sans); padding: 10px 12px; border-radius: 999px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.nav a:hover { background: rgba(255, 255, 255, 0.14); }
.sound {
  width: 38px; height: 38px; padding: 8px; border: 0; cursor: pointer; color: #fff; background: rgba(13, 10, 18, 0.5); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line); flex: none;
}
.sound svg { display: block; }
.sound .waves { display: none; }
.sound[aria-pressed="true"] .waves { display: block; }
.sound[aria-pressed="true"] .mute { display: none; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: rgba(13, 10, 18, 0.5); flex: none; }
.lang a { font: 600 12px/1 var(--sans); padding: 8px 9px; color: #fff; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--gold); color: #24140a; }
@media (max-width: 760px) { .nav .hide-sm { display: none; } .nav a { padding: 8px 8px; } .brand img { height: 36px; } }
@media (max-width: 400px) { .nav { display: none; } .sound { margin-left: auto; } }

/* ------------------------------------------------------------ the first screen */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: start; text-align: center; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 52% at 50% 46%, rgba(8, 5, 12, 0.5), rgba(8, 5, 12, 0) 100%); }
.hero-inner { position: relative; display: grid; justify-items: center; gap: 12px; padding-top: max(64px, 7svh); }
.hero .logo { width: min(440px, 76vw, 58vh); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.7)); animation: land 1s var(--ease) both; }
.hero h1 { font-size: clamp(25px, 3.1vw, 42px); max-width: 860px; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.6); animation: land 1s 0.12s var(--ease) both; }
.hero p { font-size: clamp(16px, 1.45vw, 19px); max-width: 620px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.7); animation: land 1s 0.2s var(--ease) both; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-top: 10px; animation: land 1s 0.28s var(--ease) both; }
.platforms { display: flex; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; animation: land 1s 0.34s var(--ease) both; }
.platforms span { padding: 6px 10px; border-radius: 999px; background: rgba(13, 10, 18, 0.5); border: 1px solid var(--line); }
@keyframes land { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.walk {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px;
  color: #fff; text-decoration: none; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 8px #000; white-space: nowrap;
}
.walk svg { width: 24px; height: 24px; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ------------------------------------------------------------ the story, line by line */
.story { padding-block: 16vh 22vh; }
.beat {
  font: 500 clamp(28px, 4.4vw, 52px)/1.2 var(--serif); color: #fff; text-align: center; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.6);
  min-height: 62vh; display: grid; align-items: start; padding-top: 6vh;
}
.beat-more { text-align: center; color: var(--text); max-width: 560px; margin: 0 auto; text-shadow: 0 1px 10px #000; }

/* ------------------------------------------------------------ the demo */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 6vw, 90px); align-items: center; }
.gestures { list-style: none; padding: 0; margin: 22px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gestures li {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); line-height: 1.25; font-size: 15px;
}
.gestures img { width: 48px; height: 48px; flex: none; }
.gestures b { display: block; color: #fff; font-weight: 600; }
.gestures span { color: var(--soft); }
.keys { font-size: 14px; color: var(--soft); text-shadow: 0 1px 6px #000; max-width: 520px; }
.frame {
  position: relative; width: min(390px, calc((100vh - 110px) * 0.4615), 86vw); aspect-ratio: 9 / 19.5; border-radius: 30px; overflow: hidden; background: #000; isolation: isolate; margin-inline: auto;
  box-shadow: 0 0 0 2px #6d5126, 0 0 0 5px #17110b, 0 0 0 6px rgba(238, 191, 106, 0.6), 0 24px 70px rgba(0, 0, 0, 0.75), 0 0 90px rgba(255, 130, 40, 0.16);
}
.frame-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-start { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: 18px; padding: 24px; background: linear-gradient(to bottom, rgba(10, 6, 14, 0.2), rgba(10, 6, 14, 0.5)); }
.frame-start img { width: 74%; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.8)); }
.plaque {
  min-width: 190px; min-height: 58px; padding: 0 30px; border: 0; cursor: pointer; color: #fff; font: 600 19px/1 var(--sans); text-shadow: 0 1px 2px #000;
  background: url("../ui/ui_placa.webp") center / 100% 100% no-repeat; transition: transform 0.16s var(--ease), filter 0.16s;
}
.plaque:hover { transform: scale(1.04); filter: brightness(1.2); }
.plaque:active { transform: scale(0.97); }
.frame-note { text-align: center; color: #fff; text-shadow: 0 1px 6px #000; font-size: 15px; }
.frame.playing .frame-start, .frame.playing .frame-poster { display: none; }

/* ------------------------------------------------------------ cards */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.card img { width: 56px; height: 56px; margin-bottom: 12px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15.5px; line-height: 1.5; color: var(--soft); }
@media (max-width: 980px) { .cards, .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .cards.three { grid-template-columns: 1fr; } .card { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; padding: 16px; } .card img { grid-row: span 2; margin: 0; } .card h3 { margin-bottom: 4px; font-size: 21px; } }

/* ------------------------------------------------------------ the map */
.map-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.map img { border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7); transform: rotate(-1.2deg); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat { text-align: center; padding: 12px 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.stat b { display: block; font: 700 34px/1.1 var(--serif); color: var(--gold); }
.stat span { font-size: 13px; color: var(--soft); line-height: 1.2; display: block; }
.places { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.places li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; }
.skulls { display: inline-flex; flex: none; }
.skulls img { width: 15px; height: 15px; }
.sheet {
  display: flex; gap: 16px; align-items: center; padding: 26px 30px; color: var(--ink); border-image: url("../ui/ui_pergamino.webp") 92 fill / 30px stretch; border-style: solid; border-width: 30px;
}
.sheet img { width: 64px; height: 64px; flex: none; }
.sheet h3 { color: var(--ink); margin-bottom: 4px; }
.sheet p { font-size: 15.5px; line-height: 1.45; color: #4b2d15; }
@media (max-width: 860px) { .map-grid { grid-template-columns: 1fr; } .map { max-width: 320px; margin-inline: auto; } }
@media (max-width: 460px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .places { grid-template-columns: 1fr; } .sheet { padding: 8px; border-width: 24px; } }

/* ------------------------------------------------------------ warrior or mage */
.classes { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 22px; justify-content: center; margin-bottom: 26px; }
.class { display: grid; gap: 14px; }
.class img { border-radius: 8px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.7)); transition: transform 0.3s var(--ease); }
.class:hover img { transform: translateY(-6px) scale(1.015); }
.class div { padding: 0 8px; }
.class h3 { font-size: 28px; margin-bottom: 4px; text-align: center; }
.class p { font-size: 16px; line-height: 1.5; text-align: center; text-shadow: 0 1px 8px #000; }
@media (max-width: 640px) { .classes { grid-template-columns: minmax(0, 340px); } }

/* ------------------------------------------------------------ the chiefs */
.chiefs-section { padding-bottom: clamp(60px, 8vw, 120px); }
.chiefs { display: flex; gap: 10px; overflow-x: auto; padding: 10px max(16px, calc(50vw - 580px)) 24px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chiefs::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .chiefs { scroll-snap-type: none; overflow-x: hidden; } }
.chief { flex: none; width: 232px; scroll-snap-align: center; text-align: center; position: relative; }
.chief img { height: 420px; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; margin: 0 auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.8)); transition: transform 0.25s var(--ease); }
.chief:hover img { transform: scale(1.04); }
.chief figcaption { font: 700 19px/1.15 var(--serif); color: #fff; text-shadow: 0 1px 8px #000; margin-top: 6px; }
.chief small { display: block; font: 600 13px/1.3 var(--sans); color: var(--soft); margin-top: 3px; }

/* ------------------------------------------------------------ hours */
.hours-section .wrap { padding: clamp(22px, 4vw, 36px); border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.hours-section .section-head { margin-bottom: 18px; }
.hours { margin-top: 8px; }
.hours[hidden] { display: none; }
.hours p { margin-bottom: 12px; color: var(--soft); text-shadow: 0 1px 8px #000; }
.hours div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hours button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.hours button[aria-pressed="true"] { background: var(--gold); color: #24140a; }

/* ------------------------------------------------------------ the end of the road */
.finale { min-height: 90vh; display: grid; align-items: center; text-align: center; padding: 120px 0; }
.finale .wrap { display: grid; justify-items: center; gap: 12px; }
.finale img { width: min(320px, 66vw); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)); }
.finale p { font-size: 19px; text-shadow: 0 1px 10px #000; }
.site-footer { background: rgba(8, 6, 12, 0.92); border-top: 1px solid var(--line); padding: 26px 0 max(26px, env(safe-area-inset-bottom)); }
.site-footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.site-footer img { height: 54px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer nav a { color: #fff; text-decoration: none; font-size: 15px; }
.site-footer nav a:hover { color: var(--gold); }
.site-footer small { color: var(--soft); font-size: 12.5px; line-height: 1.5; display: block; }

/* ------------------------------------------------------------ pages of text */
.page { background: var(--deep); }
.page .site-header { position: sticky; background: rgba(13, 10, 18, 0.92); box-shadow: 0 1px 0 var(--line); padding-block: 6px; }
.prose { max-width: 760px; padding: clamp(36px, 6vw, 64px) 0 80px; }
.prose h1 { font-size: clamp(34px, 5vw, 50px); margin-bottom: 10px; }
.prose h2 { font-size: 25px; margin: 34px 0 8px; text-shadow: none; }
.prose p, .prose li { color: var(--soft); font-size: 16px; line-height: 1.65; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose li { margin: 6px 0; }
.prose b { color: #fff; }
.updated { font-size: 14px; }
.faq { margin-top: 24px; display: grid; gap: 10px; }
.faq details { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.faq summary { cursor: pointer; color: #fff; font-size: 17px; }
.faq details p { margin-top: 8px; }
.contact { margin-top: 26px; padding: 18px 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; }
.contact h2 { margin: 0 0 4px; }
.nowhere { text-align: center; margin-inline: auto; }
.nowhere img { margin: 0 auto 18px; }
.nowhere .lead { margin: 10px auto 24px; text-shadow: none; display: grid; gap: 2px; justify-items: center; }
.nowhere p:last-child { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------ things come in as you reach them */
.reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s ease, transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.card.reveal:nth-child(2) { transition-delay: 0.06s; } .card.reveal:nth-child(3) { transition-delay: 0.12s; } .card.reveal:nth-child(4) { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .logo, .hero h1, .hero p, .ctas, .platforms { animation: none; }
  .walk svg, .pill .dot { animation: none; }
}
@media (max-height: 520px) {
  .hero-inner { grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; text-align: left; justify-items: start; align-items: center; padding-top: 62px; }
  .hero .logo { grid-row: span 4; width: min(36vw, 78vh); }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .ctas { justify-content: flex-start; }
  .walk { display: none; }
  .beat { min-height: 90vh; font-size: 28px; }
}
@media (max-width: 860px) {
  .demo-grid { grid-template-columns: 1fr; }
  .gestures { grid-template-columns: 1fr 1fr; }
  .gestures li { font-size: 14px; }
  .frame { width: min(320px, 82vw, calc((100vh - 110px) * 0.4615)); order: -1; }
  .demo-copy { display: contents; }
  .demo-copy > * { order: 0; }
}

/* ------------------------------------------------------------ Safari on an iPhone */
/* It lays out what is fixed between the status bar and its own address bar, paints nothing above the top of the document, and copies
   anything dark and fixed at the top into the status bar, where it stays. So the world reaches past both bars and has no colour of its
   own, the page rests a little below its top, with the status bar over the world, and the header is loose pieces with no backing.
   The resting place is the same lying down, so that turning the phone moves nothing. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 520px), (max-height: 520px) {
    .hero { margin-top: 72px; }
  }
  @media (orientation: portrait) and (max-width: 520px) {
    :root { --reach-top: 72px; --reach-bottom: 64px; }
    .home .site-header.solid { background: none; box-shadow: none; }
    .home .nav { padding: 0 3px; border-radius: 999px; background: rgba(13, 10, 18, 0.5); box-shadow: inset 0 0 0 1px var(--line); }
  }
}