/* Epic KAPIJA K4 — the gate page. The landing's language (src/landing/landing.css): green ground, bone text, one gold CTA,
   steel focus. The one bold thing is the putokaz (the trail-sign plate) that appears in the last 24 h. No backdrop-filter,
   no red (red = mines), no animation: the only thing that moves is the number. */
:root {
  --g0: #1D201E; --g1: #242724; --g3: #333631;
  --bone: #E8E4D4; --bone-2: #BAC0B0; --muted: #97A596;
  --accent: #e8c33a; --steel: #9aadbe;
  --edge: rgba(255, 255, 255, 0.14);
}
* { box-sizing: border-box; }
html { background: var(--g0); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--g0); color: var(--bone);
  font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.5;
}
main { width: 100%; max-width: 30rem; padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.znak { width: 40px; height: 40px; display: block; }
h1 {
  margin: .75rem 0 0; font-family: 'Fjalla One', 'Familjen Grotesk', sans-serif; font-weight: 400;
  font-size: 56px; line-height: 64px; letter-spacing: .04em;
}
.lede { margin: .5rem 0 0; max-width: 24rem; font-size: 1.0625rem; color: var(--bone-2); text-wrap: balance; }
.ruta { margin: .75rem 0 0; max-width: 24rem; color: var(--bone); text-wrap: balance; }

form { width: 100%; margin: 1.75rem 0 0; display: flex; gap: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
input[type="password"] {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 .875rem;
  background: var(--g1); color: var(--bone); border: 1px solid var(--edge); border-radius: 8px;
  font: inherit; font-size: 1rem; /* 16 px: no iOS zoom on focus */
}
input[type="password"]::placeholder { color: var(--muted); opacity: 1; }
button {
  flex: none; min-width: 5.5rem; min-height: 44px; padding: 0 1.5rem;
  background: var(--accent); color: var(--g0); border: 0; border-radius: 8px;
  font: inherit; font-weight: 700; cursor: pointer;
}
button:hover { filter: brightness(1.06); }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
@media (max-width: 359px) { form { flex-direction: column; } button { width: 100%; } }

.greska {
  margin: .75rem 0 0; padding: .125rem 0 .125rem .75rem; text-align: left; align-self: stretch;
  border-left: 2px solid var(--steel); color: var(--bone);
}

/* the putokaz: a bone plate with a pointed right end — a shape (clip-path), not a drawn icon */
.putokaz {
  width: 100%; margin: 2rem 0 0; padding: 1rem 3.25rem 1rem 1.25rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--bone); color: var(--g0);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%);
  font-family: 'Fjalla One', 'Familjen Grotesk', sans-serif; line-height: 1;
}
.putokaz[hidden] { display: none; }
.putokaz .cilj { font-size: 1.5rem; letter-spacing: .06em; }
.putokaz .vrijeme { font-size: 2.25rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }

.dno { margin: 2.5rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.mala { margin: 0; font-size: .8125rem; color: var(--muted); max-width: 26rem; text-wrap: balance; }

@media (min-width: 640px) {
  h1 { font-size: 72px; line-height: 80px; }
  .putokaz .vrijeme { font-size: 2.75rem; }
  .putokaz .cilj { font-size: 1.75rem; }
}
@media (max-width: 389px) { .putokaz .vrijeme { font-size: 1.875rem; } }