/* Zenogród (folder kosiarka): one full-viewport canvas plus a small HUD pill and the mute button, the start and consent
   cards over it, and the site's text pages (body.page, at the end). No scrolling, no zoom, no bounce in the game. */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #22391f; /* the hedge colour, so any letterbox around the canvas blends in */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
}

#view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
  outline: none;
}

/* The evening light (moment.js): a golden-hour gradient over the canvas, blended by the compositor (soft-light keeps
   the stripes' contrast: peach and lighter towards the low sun at the top-left, a touch of dusk in the far corner;
   a peach rather than a yellow tint, which turned the grass lime).
   moment.js sets only its opacity, in coarse steps; the transition does the rest. Below the HUD, so the pill and the
   button keep their colours. */
#light {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(
      120% 90% at 8% 0%,
      rgba(255, 196, 150, 0.95) 0%,
      rgba(255, 176, 130, 0.6) 45%,
      rgba(255, 170, 130, 0) 80%
    ),
    linear-gradient(160deg, rgba(255, 190, 140, 0.55) 0%, rgba(240, 160, 130, 0.45) 55%, rgba(110, 70, 120, 0.55) 100%);
  transition: opacity 2.5s ease-in-out;
}

/* Reads the safe-area insets for the layout (main.js): its padding is the inset on each side. */
#safe {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* The cream HUD look, shared by the pill and the mute button. */
.hud,
.mute {
  position: fixed;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(255, 247, 228, 0.93);
  color: #4a3420;
  border: 2px solid rgba(92, 64, 36, 0.28);
  box-shadow: 0 2px 0 rgba(28, 20, 10, 0.22);
}

/* main.js places the pill below the top inset and above the lawn; this top is only the pre-script fallback. */
.hud {
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.38em 0.95em 0.42em;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 2;
}

/* The 100% moment's line: a touch warmer, faded in (as is the percentage coming back after it). */
.hud.hud-say {
  color: #6a3a14;
  background: rgba(255, 238, 206, 0.95);
}

.hud-fade-a {
  animation: hud-fade-a 0.7s ease-out;
}

.hud-fade-b {
  animation: hud-fade-b 0.7s ease-out;
}

@keyframes hud-fade-a {
  from {
    opacity: 0.25;
  }
}

@keyframes hud-fade-b {
  from {
    opacity: 0.25;
  }
}

@media (max-width: 480px), (max-height: 480px) {
  .hud {
    font-size: 14px;
  }
}

/* The mute button: a round cream button in the top-right corner holding a pixel-art speaker. hud.js sizes it to the
   pill's height and puts it on the pill's row; this corner position is only the pre-script fallback. */
.mute {
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  z-index: 3;
}

.mute svg {
  display: block;
  width: 18px;
  height: 18px;
}

.mute .mute-gap {
  fill: #fff7e4; /* the button's cream: separates the slash from the speaker */
}

.mute .mute-off,
.mute[aria-pressed='true'] .mute-on {
  display: none;
}

.mute[aria-pressed='true'] .mute-off {
  display: inline;
}

.mute:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(28, 20, 10, 0.22);
}

.mute:focus-visible {
  outline: 2px solid #4a3420;
  outline-offset: 2px;
}

/* ---------- the start and consent cards (start.js, consent.js) ---------- */

/* A layer over the garden, dimmed so the lawn shows through. The start card's layer sits under the HUD pill and the
   mute button (same z-index as the pill, earlier in the page), so both stay readable and the sound can be muted
   before the first press; its top padding keeps the card below their row. The consent card covers everything. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 20px) calc(env(safe-area-inset-left, 0px) + 16px);
  background: radial-gradient(120% 90% at 50% 45%, rgba(20, 34, 16, 0.22) 0%, rgba(16, 26, 12, 0.5) 100%);
  overflow: auto;
  touch-action: manipulation;
  animation: overlay-in 0.5s ease-out;
}

.overlay[hidden] {
  display: none;
}

.overlay.consent {
  z-index: 5;
  padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
  background: rgba(16, 26, 12, 0.55);
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
}

.card {
  box-sizing: border-box;
  width: min(100%, 360px);
  margin: auto;
  padding: 22px 22px 14px;
  border-radius: 24px;
  background: #fff7e4;
  color: #4a3420;
  border: 2px solid rgba(92, 64, 36, 0.28);
  box-shadow:
    0 3px 0 rgba(28, 20, 10, 0.25),
    0 14px 36px rgba(10, 18, 8, 0.32);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  outline: none;
  animation: card-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  -webkit-user-select: text;
  user-select: text;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.start-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 8px;
  border-radius: 10px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 2px 0 rgba(28, 20, 10, 0.22);
}

/* The name: system fonts only, a rounded face where there is one (SF Rounded on Apple), heavy and warm; "Zen" in the
   lawn's green and "ogród" in the HUD's brown, the two words the name is made of. */
.wordmark {
  margin: 0 0 6px;
  font-family:
    ui-rounded,
    'SF Pro Rounded',
    'Arial Rounded MT Bold',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #5a3a1c;
}

.wordmark .wm-zen {
  color: #4a7a2c;
}

.start-line {
  margin: 0 auto 18px;
  max-width: 290px;
  font-size: 16px;
  color: #5c4630;
}

.btn-go {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #4a7a2c;
  color: #fff7e4;
  box-shadow:
    0 3px 0 #2c4d1a,
    0 6px 14px rgba(44, 77, 26, 0.3);
  font: inherit;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.btn-go:hover {
  background: #548a32;
}

.btn-go:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #2c4d1a,
    0 3px 8px rgba(44, 77, 26, 0.3);
}

.btn-go:focus-visible,
.btn-answer:focus-visible,
.card a:focus-visible,
.link-btn:focus-visible {
  outline: 2px solid #4a3420;
  outline-offset: 3px;
}

.start-how {
  margin: 12px 0 4px;
  font-size: 13px;
  color: #7a654c;
}

.how-touch {
  display: none;
}

@media (pointer: coarse) {
  .how-touch {
    display: inline;
  }
  .how-keys {
    display: none;
  }
}

.start-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
  font-size: 14px;
  font-weight: 600;
}

/* who made the game, under the links: the hint's small text, the name a link like theirs */
.start-author {
  margin: 0;
  font-size: 13px;
  color: #7a654c;
}

.start-author a {
  font-weight: 600;
}

.start-links a,
.start-author a,
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #8a4a1c;
  text-decoration: underline;
  text-decoration-color: rgba(138, 74, 28, 0.35);
  text-underline-offset: 3px;
}

.link-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.link-btn[hidden] {
  display: none !important; /* also against the footer's display: inline-flex */
}

/* A short landscape phone: a tighter card, no icon. */
@media (max-height: 480px) {
  .overlay {
    padding-top: calc(env(safe-area-inset-top, 0px) + 52px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  }
  .card {
    padding: 14px 20px 6px;
  }
  .start-icon {
    display: none;
  }
  .wordmark {
    font-size: 34px;
  }
  .start-line {
    margin-bottom: 12px;
    font-size: 15px;
  }
  .btn-go {
    min-height: 48px;
    padding: 8px 20px;
  }
  .start-how {
    margin-top: 8px;
  }
}

/* The consent card: the same card, text left-aligned, two answers of the same size, weight and colours. */
.consent-card {
  width: min(100%, 400px);
  padding: 20px 20px 18px;
  text-align: left;
}

.consent-card h2 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.consent-card p {
  margin: 0 0 10px;
}

.consent-card a {
  color: #8a4a1c;
  font-weight: 600;
  text-underline-offset: 3px;
}

.consent-btns {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn-answer {
  flex: 1;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid #4a3420;
  border-radius: 999px;
  background: #fff7e4;
  color: #4a3420;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .overlay,
  .card {
    animation: none;
  }
}

/* ---------- the site's text pages (tools/build-site.js: Jak grać, Polityka prywatności, 404) ---------- */

/* A page scrolls and selects like a page: undo the game's fixed, no-touch body. The ground is the mown lawn's
   stripes, darkened, under one cream card like the start card. */
html.page,
body.page {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: auto;
  touch-action: auto;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* on the root, so the stripes fill the whole window however short the page is */
html.page {
  background: repeating-linear-gradient(90deg, #2b4a25 0 56px, #31532a 56px 112px);
}

body.page {
  position: static;
  background: transparent;
  color: #4a3420;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

.page-wrap {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 24px) calc(env(safe-area-inset-left, 0px) + 16px);
  display: grid;
  gap: 12px;
}

.page-brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  text-decoration: none;
}

.page-brand img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.page-brand .wordmark {
  margin: 0;
  font-size: 30px;
  color: #fff7e4;
  text-shadow: 0 2px 0 rgba(10, 18, 8, 0.35);
}

.page-brand .wordmark .wm-zen {
  color: #c8e08a;
}

.page-box {
  background: #fff7e4;
  border: 2px solid rgba(92, 64, 36, 0.28);
  border-radius: 24px;
  box-shadow:
    0 3px 0 rgba(28, 20, 10, 0.25),
    0 14px 36px rgba(10, 18, 8, 0.32);
}

.page-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 22px;
  background: #fff7e4;
  border-bottom: 1px solid rgba(92, 64, 36, 0.18);
  border-radius: 22px 22px 0 0;
}

.page-head h1 {
  flex: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

/* the close button: a link dressed as the HUD's round mute button */
.page-x {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff7e4;
  border: 2px solid rgba(92, 64, 36, 0.28);
  box-shadow: 0 2px 0 rgba(28, 20, 10, 0.22);
  color: #4a3420;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.page-x:focus-visible,
.page-body a:focus-visible,
.page-foot a:focus-visible,
.page-brand:focus-visible {
  outline: 2px solid #fff7e4;
  outline-offset: 2px;
}

.page-body a:focus-visible,
.page-x:focus-visible {
  outline-color: #4a3420;
}

.page-body {
  padding: 16px 22px 22px;
}

.page-body > :first-child {
  margin-top: 0;
}

.page-body h2 {
  margin: 26px 0 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: #3e2a16;
}

.page-body p,
.page-body ul,
.page-body ol {
  margin: 0 0 10px;
}

.page-body ul,
.page-body ol {
  padding-left: 20px;
}

.page-body li {
  margin-bottom: 6px;
}

.page-body li::marker {
  color: #4a7a2c;
  font-weight: 800;
}

.page-body .lead {
  font-size: 17px;
}

.page-body .meta {
  color: #7a654c;
  font-size: 14px;
}

.page-body a,
.page-body .link-btn {
  color: #8a4a1c;
  text-underline-offset: 3px;
}

.page-body .link-btn {
  display: inline;
  min-height: 0;
  font-weight: 700;
}

.page-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: rgba(146, 187, 84, 0.22);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
}

.page-body .keys {
  white-space: nowrap;
}

.page-body kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 6px;
  border: 1px solid rgba(92, 64, 36, 0.35);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fffdf6;
  font-family: inherit;
  font-size: 0.88em;
  font-weight: 700;
  text-align: center;
}

.page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 15px;
}

.page-body th,
.page-body td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px 7px 0;
  border-top: 1px solid rgba(92, 64, 36, 0.18);
}

.page-body th {
  color: #7a654c;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  font-size: 15px;
  font-weight: 700;
}

.page-foot a,
.page-foot .link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff7e4;
  text-decoration-color: rgba(255, 247, 228, 0.4);
}

/* who made the game, under the footer: smaller and quieter than the links above it */
.page-author {
  margin: -6px 0 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 247, 228, 0.75);
}

.page-author a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff7e4;
  font-weight: 700;
  text-decoration-color: rgba(255, 247, 228, 0.4);
}

.page-author a:focus-visible {
  outline: 2px solid #fff7e4;
  outline-offset: 2px;
}

.page-foot a[aria-current] {
  color: #c8e08a;
  text-decoration: none;
}

/* a two-column table whose first column is a name (the policy's storage keys): on a phone each row stacks, the name
   on its own line and never broken, the text under it */
@media (max-width: 520px) {
  .page-body table.stack tr:first-child {
    display: none;
  }
  .page-body table.stack tr {
    display: block;
    padding: 8px 0;
    border-top: 1px solid rgba(92, 64, 36, 0.18);
  }
  .page-body table.stack td {
    display: block;
    padding: 0;
    border: 0;
  }
  .page-body table.stack td + td {
    margin-top: 3px;
  }
  .page-wrap {
    padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 8px)
      calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 8px);
  }
  .page-head {
    padding-left: 16px;
  }
  .page-head h1 {
    font-size: 21px;
  }
  .page-body {
    padding: 14px 16px 18px;
  }
}