/* --- Fonts --- */
@font-face {
  font-family: Hellenica;
  src: url("assets/fonts/PF Hellenica Serif Pro Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Hellenica;
  src: url("assets/fonts/PF Hellenica Serif Pro Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Papyrus;
  src: url("assets/fonts/papyrus.ttf") format("truetype");
}

/* --- Tokens --- */
:root {
  --color-bg: #e6bf95;
  --color-ink: #23150f;
  --color-ink-muted: #5f3f30;
  --color-ink-faint: #23150f2b;
  --color-ink-wall: #23150f12;
  --color-ink-overlay: #140c08b3;
  --color-ink-hover: #23150f14;
  --color-ink-border-strong: #23150f4a;
  --color-primary-hover: #4f2e21;
  --color-transparent: #0000;
  --font-display: Hellenica;
  --font-body: Papyrus;
  --button-text-nudge-y: 0.1em;
  --shadow-soft: 0 12px 40px #1a17141f;
  --radius-image: 6px;
  --radius-btn: 4px;
  /* Meander tiles: strokes act as mask stencils; ink color comes from
  background-color on ::before. This technique is used because SVG data URIs
  cannot read CSS variables. Otherwise, we'd have to repeat the meander
  definitions for each theme as we do for the corner-theta. */
  --meander-tile-h-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 25 20'%3E%3Cpath d='M0,15 H5 V0 H20 V10 H15 V5 H10 V15 H25' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --meander-tile-h-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 25 20'%3E%3Cpath d='M0,1 H5 V16 H20 V6 H15 V11 H10 V1 H25' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --meander-tile-v-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 20 25'%3E%3Cpath d='M15,0 V15 H5 V10 H10 V5 H0 V20 H15 V25' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --meander-tile-v-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 20 25'%3E%3Cpath d='M1,0 V15 H11 V10 H6 V5 H16 V20 H1 V25' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
  /* Theta fill must match --color-bg exactly; SVG data URIs cannot read CSS
  variables. This one is for the default light theme. The tencil technique could
  be used here too, but is more complicated to implement due to the fact that
  the theta is imposed on a corner disk rather than directly on the background.
  A little repetition seemed preferable in this case. */
  --corner-theta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ctext x='14' y='14' font-family='Georgia%2Cserif' font-size='14' font-weight='bold' text-anchor='middle' dominant-baseline='central' fill='%23e6bf95'%3E%CE%98%3C/text%3E%3C/svg%3E");
  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-bg: #1a0f0a;
  --color-ink: #e7bc92;
  --color-ink-muted: #c69163;
  --color-ink-faint: #e7bc9236;
  --color-ink-wall: #e7bc9228;
  --color-ink-overlay: #000000ad;
  --color-ink-hover: #e7bc9214;
  --color-ink-border-strong: #e7bc9261;
  --color-primary-hover: #f1d2b3;
  --shadow-soft: 0 12px 40px #00000059;
  --corner-theta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ctext x='14' y='14' font-family='Georgia%2Cserif' font-size='14' font-weight='bold' text-anchor='middle' dominant-baseline='central' fill='%231a0f0a'%3E%CE%98%3C/text%3E%3C/svg%3E");
  color-scheme: dark;
}

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

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

.maze-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Main --- */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.menu-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 40;
  opacity: 0;
  animation: fade-in-up 0.9s ease 0.4s forwards;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  letter-spacing: 0.06em;
  line-height: 1.15;
  opacity: 0;
  animation: fade-in-up 0.9s ease forwards;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--color-bg) 75%, var(--color-transparent)),
    0 2px 10px
      color-mix(in srgb, var(--color-ink) 42%, var(--color-transparent));
}

.hero-tagline {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--color-bg) 75%, var(--color-transparent)),
    0 2px 10px
      color-mix(in srgb, var(--color-ink) 42%, var(--color-transparent));
  opacity: 0;
  animation: fade-in-up 0.9s ease 0.1s forwards;
}

/* Hero section screenshot frame (main game image on landing view). */
.hero-image {
  --meander-unit: 25px;
  --meander-gap: 20px;
  margin: 2.75rem 0 2.5rem;
  position: relative;
  width: 100%;
  max-width: min(36rem, 92vw);
  padding: var(--meander-gap);
  opacity: 0;
  animation: fade-in-up 0.9s ease 0.2s forwards;
}

/* Decorative Greek-key meander border strips around the screenshot frame. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius-image) + var(--meander-gap));
  pointer-events: none;
  background: var(--color-ink);
  -webkit-mask:
    var(--meander-tile-h-top) top left / var(--meander-unit) var(--meander-gap)
      repeat-x,
    var(--meander-tile-h-bottom) bottom left / var(--meander-unit)
      var(--meander-gap) repeat-x,
    var(--meander-tile-v-left) top left / var(--meander-gap) var(--meander-unit)
      repeat-y,
    var(--meander-tile-v-right) top right / var(--meander-gap)
      var(--meander-unit) repeat-y;
  mask:
    var(--meander-tile-h-top) top left / var(--meander-unit) var(--meander-gap)
      repeat-x,
    var(--meander-tile-h-bottom) bottom left / var(--meander-unit)
      var(--meander-gap) repeat-x,
    var(--meander-tile-v-left) top left / var(--meander-gap) var(--meander-unit)
      repeat-y,
    var(--meander-tile-v-right) top right / var(--meander-gap)
      var(--meander-unit) repeat-y;
}

/* Corner disks (ink) with a theta (bg color) centred on each, covering meander seam glitches. */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius-image) + var(--meander-gap));
  pointer-events: none;
  background:
    var(--corner-theta) top left / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat,
    var(--corner-theta) top right / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat,
    var(--corner-theta) bottom left / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat,
    var(--corner-theta) bottom right / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat,
    radial-gradient(
        circle,
        var(--color-ink) 0 72%,
        var(--color-transparent) 74%
      )
      top left / calc(var(--meander-gap) * 1.4) calc(var(--meander-gap) * 1.4)
      no-repeat,
    radial-gradient(
        circle,
        var(--color-ink) 0 72%,
        var(--color-transparent) 74%
      )
      top right / calc(var(--meander-gap) * 1.4) calc(var(--meander-gap) * 1.4)
      no-repeat,
    radial-gradient(
        circle,
        var(--color-ink) 0 72%,
        var(--color-transparent) 74%
      )
      bottom left / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat,
    radial-gradient(
        circle,
        var(--color-ink) 0 72%,
        var(--color-transparent) 74%
      )
      bottom right / calc(var(--meander-gap) * 1.4)
      calc(var(--meander-gap) * 1.4) no-repeat;
}

.hero-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 439;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-soft);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid #e7bc9261;
  border-radius: 999px;
  background: #1a0f0af0;
  color: #e7bc92;
  box-shadow:
    0 0 0 2px #1a0f0ac2,
    0 4px 12px #00000075,
    0 14px 34px #000000bf;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.carousel-arrow--left {
  left: calc(var(--meander-gap) + 0.35rem);
}

.carousel-arrow--right {
  right: calc(var(--meander-gap) + 0.35rem);
}

.carousel-arrow:hover {
  background: #4a2b1cf2;
  border-color: #f1ccaaa8;
  box-shadow:
    0 0 0 2px #1a0f0ad9,
    0 6px 14px #0000008c,
    0 18px 38px #000000cf;
}

.carousel-arrow:active {
  transform: translateY(calc(-50% + 1px));
}

.carousel-arrow:focus-visible {
  outline: 2px solid #e7bc92;
  outline-offset: 2px;
}

.carousel-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--color-transparent);
  border-radius: var(--radius-btn);
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--color-ink) 34%, var(--color-transparent));
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.btn:hover {
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--color-ink) 44%, var(--color-transparent));
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.btn--primary {
  padding: 0.95rem 1.75rem;
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 400;
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  padding: 0.55rem 1rem;
  background: var(--color-transparent);
  color: var(--color-ink);
  border-color: var(--color-ink-faint);
}

.btn--ghost:hover {
  background: var(--color-ink-hover);
  border-color: var(--color-ink-border-strong);
}

.btn svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn__label {
  display: inline-block;
  transform: translateY(var(--button-text-nudge-y));
}

.btn--primary svg {
  width: 1.15rem;
  height: 1.15rem;
}

.btn--ghost svg {
  width: 0.85rem;
  height: 0.85rem;
}

.btn svg.brand-icon {
  fill: currentColor;
  stroke: none;
}

.menu-toggle svg {
  width: 1rem;
  height: 1rem;
}

/* Square hit target: .btn--ghost alone uses wider horizontal padding. */
.btn--ghost.menu-toggle {
  padding: 0.55rem;
  /* For visibility contrast against the maze background. */
  background: var(--color-bg);
}

.btn--ghost.menu-toggle:hover {
  background: color-mix(in srgb, var(--color-bg) 88%, var(--color-ink));
}

.hero-cta {
  opacity: 0;
  animation: fade-in-up 0.9s ease 0.3s forwards;
}

.hero-nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: min(16rem, calc(100vw - 2.5rem));
  padding: 0.65rem;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-image);
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
}

.hero-nav[hidden] {
  display: none;
}

.downloads-page main {
  max-width: 42rem;
}

.downloads-nav {
  --downloads-flip-extra-duration: 0ms;
  position: static;
  margin-top: 1.75rem;
  width: min(32rem, 100%);
  opacity: 1;
}

.downloads-back-link {
  margin: 1.6rem 0 0;
  opacity: 0;
  animation: fade-in-up 0.9s ease 0.4s forwards;
}

.hero-nav .btn {
  --flip-duration: 1180ms;
  position: relative;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  text-align: left;
  border-color: var(--color-transparent);
  background: var(--color-transparent);
  perspective: 900px;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(1) {
  --flip-duration: 200ms;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(2) {
  --flip-duration: 400ms;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(3) {
  --flip-duration: 800ms;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(4) {
  --flip-duration: 1600ms;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(5) {
  --flip-duration: 3200ms;
}

:is(.hero-nav, .downloads-nav) .btn:nth-child(6) {
  --flip-duration: 4800ms;
}

/* Theme toggle: label + icon reflect the mode you switch to (sun → light, moon → dark). */
.theme-toggle-views {
  display: grid;
  align-items: center;
  width: 100%;
}

.theme-toggle-view {
  display: none;
  grid-area: 1 / 1;
  align-items: center;
  gap: 0.4em;
}

:root[data-theme="dark"] [data-theme-toggle] .theme-toggle-view--to-light,
:root[data-theme="light"] [data-theme-toggle] .theme-toggle-view--to-dark {
  display: flex;
}

.menu-card {
  position: relative;
  display: block;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-duration) cubic-bezier(0.2, 0.75, 0.2, 1);
}

.hero-nav[data-menu-open="true"] .menu-card {
  transform: rotateX(180deg);
}

.menu-card__face {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;
  width: 100%;
  min-height: 2.1rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-btn);
  background: var(--color-transparent);
  backface-visibility: hidden;
  font-family: var(--font-display);
  font-weight: 400;
}

.menu-card__face--front {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg);
}

.hero-nav .btn:hover .menu-card__face {
  background: var(--color-ink-hover);
  border-color: var(--color-ink-border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .menu-card {
    transform: none !important; /* Here we use !important as a cascade safety net, ensuring that this reduced-motion rule overrides the open-state transform even if their relative order in this style sheet changes. */
    transition: none;
  }

  .menu-card__face--back {
    display: none;
  }

  .menu-card__face--front {
    position: static;
    transform: none;
  }
}

@media (width < 768px) {
  .menu-wrap {
    position: fixed;
    top: 1rem;
    right: 1rem;
  }

  .downloads-nav {
    width: min(30rem, calc(100vw - 2.5rem));
  }
}

@media (width >= 768px) {
  .hero-image {
    margin: 3.25rem 0 2.75rem;
    max-width: min(40rem, 88vw);
  }

  .btn--primary {
    padding: 1.05rem 2rem;
    font-size: 1rem;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Dialog --- */
dialog {
  margin: 0;
  padding: 1.5rem;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: none;
  background: var(--color-transparent);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

dialog:not([open]) {
  display: none;
}

dialog[open] {
  display: flex;
}

dialog::backdrop {
  background: var(--color-ink-overlay);
}

.dialog__panel {
  width: 100%;
  max-width: min(32rem, calc(100vw - 2rem));
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-image);
  background: var(--color-bg);
  box-shadow:
    inset 0 0 0 1px var(--color-ink-faint),
    var(--shadow-soft);
}

/* Contact dialog needs more width than the prose dialogs so the Turnstile
   widget can sit alongside the Send/Close buttons on a single row. */
.dialog__panel:has(.contact-form) {
  max-width: min(36rem, calc(100vw - 2rem));
}

.dialog__inner {
  padding: 1.5rem 1.5rem 1.25rem;
}

.dialog__body code {
  font-size: 0.9em;
  font-family: ui-monospace, monospace;
}

.dialog__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.dialog__body {
  margin: 0;
  /* font-family: "Times New Roman", serif; */
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-ink-muted);
  text-align: left;
}

.dialog__link {
  color: var(--color-ink);
  text-decoration: underline;
}

.dialog__footer {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.dialog__close {
  padding: 0.45rem 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  background: var(--color-transparent);
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.dialog__close:hover {
  background: var(--color-ink-hover);
}

.dialog__close:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* --- Contact form --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
  text-align: left;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-form__label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.contact-form__control {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-ink));
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-btn);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-form__control:focus {
  border-color: var(--color-ink-border-strong);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-ink) 18%, var(--color-transparent));
}

.contact-form__control[aria-invalid="true"],
.contact-form__control:invalid:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--color-ink) 60%, #c44);
}

textarea.contact-form__control {
  resize: vertical;
  min-height: 6em;
  line-height: 1.45;
}

/* Honeypot: visually hidden but still focusable for accessibility tools that
ignore display:none. Real users won't reach it; bots that auto-fill every
input will trip it. */
.contact-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-ink-muted);
}

.contact-form__status--pending {
  color: var(--color-ink-muted);
}

.contact-form__status--success {
  color: var(--color-ink);
}

.contact-form__status--error {
  color: color-mix(in srgb, var(--color-ink) 55%, #c44);
}

.contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.contact-form__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.contact-form__submit {
  padding: 0.55rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-bg);
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    opacity 0.2s ease;
}

.contact-form__submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.contact-form__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.contact-form__submit:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}