/* ---------------- Quorridors page ----------------
   Loaded only by projects/quoridor.html, and every rule is scoped to body.page-quorridors,
   so nothing here can change another page. */

.page-quorridors {
  /* Blue and orange match the game's own pieces (quoridor-game/default.css): the blue hexagon and the
     burnt-orange triangle, so the page and the embedded game read as one piece */
  --q-blue: #2f6ab5;
  --q-orange: #ca4b0c;
  --q-text: #1b1b1f;
  --q-bg: #fafafb;

  /* Shared site variables follow the page palette (header links, back link, focus rings) */
  --color-accent: var(--q-blue);
  --color-text: var(--q-text);
  --color-bg: var(--q-bg);

  background: var(--q-bg);
  color: var(--q-text);
  overflow-x: clip;
}

/* Easter egg: blue and orange swap places across the page */
.page-quorridors.q-swapped {
  --q-blue: #ca4b0c;
  --q-orange: #2f6ab5;
}

.page-quorridors.q-swap-anim * {
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* ---------- 1. Hero: text runs the full width of the page ---------- */
.page-quorridors .q-hero {
  margin-bottom: var(--space-xl);
}

.page-quorridors .q-title {
  margin: 0 0 var(--space-xs);
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--q-text);
  /* Clicking the Q or the s repeatedly shouldn't highlight the heading */
  -webkit-user-select: none;
  user-select: none;
}

/* The two o's are the game's pieces, as in its own logo: a blue hexagon, then an orange triangle.
   Each sits on the baseline at roughly the height of a lowercase letter. */
.page-quorridors .q-title-hex,
.page-quorridors .q-title-tri {
  display: inline-block;
  margin: 0 0.03em;
}

.page-quorridors .q-title-hex {
  width: 0.55em;
  height: 0.635em;
  background: var(--q-blue);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.page-quorridors .q-title-tri {
  width: 0.64em;
  height: 0.56em;
  background: var(--q-orange);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.page-quorridors .q-subtitle {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: #4a4a52;
}

.page-quorridors .q-intro {
  margin: 0 0 var(--space-md);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a4a52;
}

/* ---------- Section headings ---------- */
.page-quorridors .q-section {
  scroll-margin-top: 84px;
}

.page-quorridors .q-h2 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.page-quorridors .q-h2--blue { color: var(--q-blue); }
.page-quorridors .q-h2--orange { color: var(--q-orange); }

.page-quorridors .q-lead {
  margin: 0 0 var(--space-md);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a4a52;
}

/* ---------- 2. Game frame: plain 3px blue border ---------- */
.page-quorridors .q-game-frame {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid var(--q-blue);
  border-radius: 6px;
  background: #fffffc;
}

.page-quorridors .q-game {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #fffffc;
}

.page-quorridors .q-open-full {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: 0.9rem;
}

.page-quorridors .q-open-full a {
  display: inline-block;
  padding: 10px 4px;
  color: var(--q-blue);
  font-weight: 500;
}

/* ---------- 3. How to play: a plain list across the full width, markers alternating blue and orange ---------- */
.page-quorridors .q-rules-list {
  margin: 0;
  padding-left: 1.3em;
  list-style: disc;
}

.page-quorridors .q-rules-list li {
  margin: 0 0 12px;
  padding-left: 0.3em;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #3a3a42;
}

.page-quorridors .q-rules-list li:last-child { margin-bottom: 0; }
.page-quorridors .q-rules-list li:nth-child(odd)::marker { color: var(--q-blue); }
.page-quorridors .q-rules-list li:nth-child(even)::marker { color: var(--q-orange); }

/* Scroll-in: each bullet zooms in from the left, 100ms after the one before (script sets --i) */
.page-quorridors .q-rules-list.is-waiting li {
  opacity: 0;
  transform: translateX(-48px) scale(0.92);
  transform-origin: left center;
}

.page-quorridors .q-rules-list.is-revealed li {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: calc(var(--i, 0) * 100ms);
}

/* ---------- 4. Under the hood: rows split by hairlines, no fills or boxes ---------- */
.page-quorridors .q-rows {
  border-bottom: 1px solid #e3e3e8;
}

.page-quorridors .q-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 48px;
  padding: 32px 0;
  border-top: 1px solid #e3e3e8;
}

.page-quorridors .q-row-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
  color: #1b1b1f;
}

.page-quorridors .q-row-text p {
  margin: 0 0 var(--space-sm);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #3a3a42;
}

.page-quorridors .q-row-text p:last-of-type {
  margin-bottom: 0;
}

/* Screenshot under the accessibility text, as wide as the text column */
.page-quorridors .q-row-media {
  margin: var(--space-md) 0 0;
}

/* Screenshot: a hairline edge so its white top doesn't melt into the page */
.page-quorridors .q-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e3e8;
  border-radius: 6px;
}

.page-quorridors .q-shot figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: #6b6b73;
}

/* Scroll-in: each row fades in and rises once (script adds the classes) */
.page-quorridors .q-row.is-waiting {
  opacity: 0;
  transform: translateY(16px);
}

.page-quorridors .q-row.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

@media (max-width: 767px) {
  .page-quorridors .q-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
}

/* ---------- Footer tooltip (easter egg) ---------- */
.page-quorridors .q-copy {
  position: relative;
}

.page-quorridors .q-copy::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--q-text);
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.page-quorridors .q-copy:hover::after {
  opacity: 1;
}

/* ---------- Easter egg overlays ---------- */
.page-quorridors .q-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10001;
  transform: translate(-50%, 16px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--q-text);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.page-quorridors .q-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Wall storm: covers the screen so a click anywhere clears it */
.page-quorridors .q-storm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  cursor: pointer;
}

.page-quorridors .q-storm-wall {
  position: absolute;
  border-radius: 999px;
  background: var(--q-orange);
  box-shadow: 0 2px 6px rgba(27, 27, 31, 0.18);
  animation: q-wall-pop 0.18s ease-out backwards;
}

/* Walls take the colour of the shape that was clicked */
.page-quorridors .q-storm--blue .q-storm-wall { background: var(--q-blue); }
.page-quorridors .q-storm--orange .q-storm-wall { background: var(--q-orange); }

@keyframes q-wall-pop {
  from { transform: scale(0.2); opacity: 0; }
}

/* Pawn rain */
.page-quorridors .q-rain {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  pointer-events: none;
}

.page-quorridors .q-rain-pawn {
  position: absolute;
  top: -40px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(27, 27, 31, 0.2);
  animation: q-fall 1.6s linear forwards;
}

.page-quorridors .q-rain-pawn--blue { background: var(--q-blue); }
.page-quorridors .q-rain-pawn--orange { background: var(--q-orange); }

@keyframes q-fall {
  to { transform: translateY(calc(100vh + 80px)); }
}

/* Reduced motion: nothing zooms, slides, rises or falls; the easter eggs fade in instead */
@media (prefers-reduced-motion: reduce) {
  .page-quorridors .q-storm-wall,
  .page-quorridors .q-rain-pawn {
    animation: none;
  }

  .page-quorridors .q-rules-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-quorridors .q-row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .page-quorridors .q-copy::after {
    transition: none;
  }

  /* The toast still fades in, it just doesn't slide */
  .page-quorridors .q-toast,
  .page-quorridors .q-toast.is-shown {
    transform: translate(-50%, 0);
    transition: opacity 0.25s ease;
  }
}

/* Reduced motion: walls still build up one by one, but fade in instead of popping */
.page-quorridors .q-storm-wall.is-still {
  animation: q-wall-fade 0.25s ease-out backwards;
}

@keyframes q-wall-fade {
  from { opacity: 0; }
}

.page-quorridors .q-rain-pawn.is-still {
  animation: none;
}