/* Layout: a walk through one building. Red roof + blue awning up top, a faint tiled floor,
   then solid "stations" (patch counter, rules shelf, nurse desk). The tip counter is its own page.
   Pixel type only at 20px+; everything read closely is set in Atkinson Hyperlegible. */
:root {
  --roof: #cf3a30;
  --roof-dk: #9a241e;
  --awning: #2a62c0;
  --awning-dk: #1b438a;
  --ink: #1f2338;
  --paper: #ffffff;
  --panel-line: #b9c6e3;
  --tile-a: #eef4f1;
  --tile-b: #e5eee9;
  --wood: #b77a45;
  --wood-dk: #7a4b25;
  --tag: #f6cf3a;
  --ok: #24804a;
  --ok-bg: #e3f3e8;
  --bad: #b8291f;
  --bad-bg: #fbe7e4;
  --muted: #464c63;
  --display: "Pixelify Sans", ui-monospace, monospace;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background-color: var(--tile-a);
  background-image:
    linear-gradient(45deg, var(--tile-b) 25%, transparent 25%, transparent 75%, var(--tile-b) 75%),
    linear-gradient(45deg, var(--tile-b) 25%, transparent 25%, transparent 75%, var(--tile-b) 75%);
  background-size: 64px 64px;
  background-position: 0 0, 32px 32px;
  color: var(--ink);
  font: 18px/1.6 var(--body);
}
.wrap {
  max-width: 1040px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--awning-dk); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--awning); outline-offset: 3px; }
.label { font: 700 14px/1.2 var(--body); letter-spacing: .07em; text-transform: uppercase; }

/* Facade */
.roof { background: repeating-linear-gradient(90deg, var(--roof) 0 46px, var(--roof-dk) 46px 50px); border-bottom: 6px solid var(--roof-dk); }
.roof .wrap { padding-block: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.sign {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px var(--ink), 6px 10px 0 4px rgba(0,0,0,.25);
  padding: 8px 18px; margin: 8px;
}
.emblem { width: 34px; height: 34px; flex: none; }
.sign b { font: 700 clamp(24px, 4vw, 34px)/1 var(--display); letter-spacing: .02em; }
.sign b span { color: var(--ok); }
nav { display: flex; flex-wrap: wrap; gap: 8px; }
nav a {
  font: 700 15px/1 var(--body); letter-spacing: .04em; color: var(--paper); text-decoration: none;
  padding: 11px 14px; border: 3px solid var(--paper); background: var(--roof-dk);
}
nav a:hover { background: var(--ink); }
.awning {
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--awning) 0 40px, var(--paper) 40px 80px);
  -webkit-mask: radial-gradient(20px 14px at 20px 34px, transparent 98%, #000) 0 0/40px 100%;
          mask: radial-gradient(20px 14px at 20px 34px, transparent 98%, #000) 0 0/40px 100%;
  border-top: 4px solid var(--awning-dk);
}

/* Text box */
.box {
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 7px var(--panel-line);
  padding: 22px 26px; position: relative;
}
.box p { margin: 0 0 .7em; max-width: 62ch; }
.box p:last-child { margin-bottom: 0; }
.more { padding-bottom: 30px; }
.more::after { content: "▼"; position: absolute; right: 18px; bottom: 10px; font-size: 13px; color: var(--roof); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .more::after { animation: none; } }

/* Hero */
.hero .wrap { padding-block: 44px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.kicker { color: var(--roof-dk); margin: 0 0 12px; }
h1, h2 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
.hero h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; margin: 0 0 18px; }
.gba { margin: 0; background: #565b93; border-radius: 18px 18px 46px 18px; padding: 22px 22px 18px; box-shadow: inset -6px -8px 0 rgba(0,0,0,.18), 6px 10px 0 rgba(0,0,0,.18); }
.gba .screen { background: #111; padding: 10px; border-radius: 6px; }
.gba img { display: block; width: 100%; aspect-ratio: 3 / 2; image-rendering: pixelated; }
.gba figcaption { margin-top: 12px; font: 700 14px/1.3 var(--body); color: #eef0ff; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.menu { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 4px; }
.menu a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; text-decoration: none; color: var(--ink); font: 700 22px/1.2 var(--display); padding: 6px 4px; }
.menu a::before { content: "▶"; font-size: 15px; color: transparent; }
.menu a:hover::before, .menu a:focus-visible::before, .menu li:first-child a::before { color: var(--ink); }
.menu small { font: 400 16px var(--body); color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { padding: 8px 11px; background: var(--ink); color: var(--paper); }

/* Sections */
section.station { padding-block: 40px; }
.station-head { display: flex; align-items: center; gap: 14px 18px; margin-bottom: 20px; flex-wrap: wrap; }
.plate { margin: 0; font: 700 24px/1 var(--display); color: var(--paper); background: var(--awning); padding: 11px 16px; border: 4px solid var(--awning-dk); }
.plate.red { background: var(--roof); border-color: var(--roof-dk); }
.intro { margin: 0; max-width: 60ch; background: var(--paper); padding: 8px 14px; border-left: 4px solid var(--ink); }

/* Counter */
.counter .top { height: 18px; background: var(--wood); border: 4px solid var(--wood-dk); border-bottom-width: 0; }
.counter .front { background: repeating-linear-gradient(90deg, #c38550 0 60px, #b77a45 60px 64px); border: 4px solid var(--wood-dk); padding: 20px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; }
.drop { position: relative; border: 4px dashed var(--ink); background: var(--paper); padding: 26px 20px; text-align: center; cursor: pointer; display: grid; gap: 8px; place-items: center; min-height: 220px; }
.drop.over { background: #fff6cc; }
.drop strong { font: 700 24px/1.2 var(--display); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cart { width: 54px; height: 62px; background: var(--ink); clip-path: polygon(0 0, 78% 0, 100% 16%, 100% 100%, 0 100%); position: relative; }
.cart::after { content: ""; position: absolute; inset: 10px 9px 22px; background: #2f9a52; }
.steps { background: var(--paper); border: 4px solid var(--ink); padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; align-items: start; }
.step b { font: 700 16px/30px var(--body); background: var(--ink); color: var(--paper); text-align: center; }
.status { font-size: 16px; line-height: 1.45; padding: 11px 13px; border: 3px solid var(--ink); background: var(--tile-a); }
.status.ok { border-color: var(--ok); background: var(--ok-bg); }
.status.bad { border-color: var(--bad); background: var(--bad-bg); }
code, .mono { font: 600 15px/1.3 ui-monospace, "SF Mono", Menlo, monospace; }
.btn { font: 700 20px/1 var(--display); color: var(--paper); background: var(--roof); border: 4px solid var(--ink); padding: 13px 20px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
.btn:hover { background: var(--roof-dk); }
.btn:disabled { background: #8b91a6; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* Shelf */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
.item { background: var(--paper); border: 4px solid var(--ink); padding: 18px 18px 16px; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; position: relative; }
.item::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -16px; height: 8px; background: var(--wood-dk); }
.item h3 { margin: 0; font: 700 18px/1.3 var(--body); }
.item p { margin: 0; font-size: 16px; line-height: 1.5; }
.tag { justify-self: start; font-size: 12px; background: var(--tag); color: var(--ink); padding: 5px 9px 5px 16px; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.tag.kz { background: var(--ink); color: var(--paper); }
.tag.sv { background: var(--ok); color: var(--paper); }
.honor { margin-top: 34px; }

/* Desk + form */
.desk { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
form.box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
label.label { font-size: 13px; }
input[type=text], input[type=number], select, textarea { font: 17px/1.4 var(--body); color: var(--ink); background: #fff; border: 3px solid var(--ink); padding: 10px 11px; width: 100%; border-radius: 0; }
input[type=file] { font: 16px var(--body); max-width: 100%; }
textarea { min-height: 120px; resize: vertical; }
.hint { font-size: 15px; color: var(--muted); }
.why ul { margin: .4em 0 0; padding-left: 1.1em; }
.why li { margin-bottom: .45em; }

/* Log + FAQ */
.two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.log { background: var(--paper); border: 4px solid var(--ink); }
.log div { display: grid; grid-template-columns: 74px 104px minmax(0, 1fr); gap: 12px; padding: 13px 16px; border-top: 2px solid #dfe5f1; font-size: 16px; }
.log div:first-child { border-top: 0; }
.log b { font-weight: 700; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.faq { display: grid; gap: 10px; }
details { background: var(--paper); border: 4px solid var(--ink); padding: 13px 16px; }
summary { font: 700 17px/1.35 var(--body); cursor: pointer; }
details p { margin: .6em 0 0; font-size: 16px; max-width: 64ch; }

/* Tip button + modal */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: var(--tag); }
.nav-tip { background: var(--tag) !important; color: var(--ink) !important; border-color: var(--ink) !important; }
.fine { font-size: 15px; color: var(--muted); margin: 0; }
.tipmodal { padding: 0; border: 4px solid var(--ink); background: var(--paper); color: var(--ink); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 8px 10px 0 rgba(0,0,0,.35); }
.tipmodal::backdrop { background: rgba(31,35,56,.6); }
.tm-roof { height: 18px; background: repeating-linear-gradient(90deg, var(--roof) 0 34px, var(--roof-dk) 34px 38px); border-bottom: 4px solid var(--ink); }
.tm-body { padding: 22px 22px 20px; display: grid; gap: 16px; position: relative; }
.tm-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; font: 700 18px var(--body); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); cursor: pointer; }
.tm-close:hover { background: var(--tag); }
.tm-head { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 16px; align-items: start; padding-right: 40px; }
.tm-jar { width: 64px; height: auto; }
.tm-head h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.1; }
.tm-head p { margin: 0; font-size: 16px; }
.tm-checkout { border: 3px dashed var(--panel-line); background: #f6f8fd; padding: 16px; display: grid; gap: 10px; min-height: 190px; }
.tm-checkout .label { margin: 0; color: var(--muted); font-size: 12px; }
.tm-mock-amt { display: flex; justify-content: space-between; align-items: baseline; background: var(--paper); border: 2px solid #cfd6e6; padding: 10px 14px; }
.tm-mock-amt span:first-child { font: 700 30px/1 var(--body); }
.tm-checkout p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .tipmodal[open] { animation: pop .18s steps(3); } @keyframes pop { from { transform: scale(.92); opacity: 0; } } }

footer { background: var(--ink); color: #dde2f2; margin-top: 30px; }
footer .wrap { padding-block: 26px 32px; display: grid; gap: 8px; font-size: 15px; }
footer a { color: #fff; }

@media (max-width: 820px) {
  .hero .wrap, .counter .front, .desk, .two { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .shelf, form.box { grid-template-columns: 1fr; }
  .log div { grid-template-columns: 64px minmax(0,1fr); }
  .log div span { grid-column: 1 / -1; }
  nav a { padding: 9px 10px; font-size: 14px; }
}


/* Live-site additions */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.shots figure { margin: 0; background: var(--paper); border: 4px solid var(--ink); padding: 8px; }
.shots img { display: block; width: 100%; aspect-ratio: 3 / 2; image-rendering: pixelated; }
.shots figcaption { font-size: 15px; padding: 8px 4px 2px; }
.tm-checkout.live { border: 0; background: none; padding: 0; min-height: 380px; display: block; }
.thanks { background: var(--ok-bg); border-bottom: 4px solid var(--ok); }
.thanks .wrap { padding-block: 12px; font-weight: 700; }
@media (max-width: 820px) { .shots { grid-template-columns: 1fr; } }