/* DGOSA farm — the PIN pad on /login. Served from static/. */

:root{
  --deep:#10281a;        /* tunnel shade */
  --leaf:#2f6b3f;        /* growing green */
  --dust:#c9c2ac;        /* the valley in September */
  --sand:#efece2;
  --sun:#e8a317;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--deep);color:var(--sand);
  display:flex;align-items:center;justify-content:center;
  padding:24px 18px;overflow-x:hidden;overflow-y:auto;
}

/* the tunnels, seen end-on */
.field{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:.5}
.field span{position:absolute;bottom:-14%;width:38%;height:62%;
  border-radius:50% 50% 0 0 / 88% 88% 0 0;
  border:1.5px solid rgba(201,194,172,.16);border-bottom:0}
.field .t1{left:-14%}
.field .t2{left:16%;height:70%}
.field .t3{left:46%;height:58%}
.field .t4{left:76%;height:66%}

.wrap{position:relative;width:100%;max-width:340px;text-align:center}
.mark{font-size:13px;letter-spacing:.34em;color:var(--dust);font-weight:600;
  margin-bottom:6px;padding-left:.34em}
h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;
  margin-bottom:5px}
.place{font-size:14.5px;color:var(--dust);margin-bottom:30px}

.dots{display:flex;gap:13px;justify-content:center;height:17px;margin-bottom:26px}
.dots i{width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(201,194,172,.42);transition:all .16s}
.dots i.on{background:var(--sun);border-color:var(--sun);transform:scale(1.12)}
.dots.wrong i{border-color:#d9694a;animation:no .42s}
@keyframes no{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.pad button{
  height:68px;border:0;border-radius:20px;
  background:rgba(239,236,226,.07);color:var(--sand);
  font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:background .1s,transform .1s;
}
.pad button:active{background:rgba(239,236,226,.2);transform:scale(.95)}
.pad button.act{font-size:15px;font-weight:700;color:var(--dust);background:transparent}
.pad button.go{background:var(--leaf);color:#fff;
  display:flex;align-items:center;justify-content:center}
.pad button.go svg{width:26px;height:26px}
.pad button.go:active{background:#3d8551}
.pad button:focus-visible{outline:2.5px solid var(--sun);outline-offset:2px}

.msg{margin-top:20px;font-size:14px;min-height:20px;color:var(--dust)}
.msg.bad{color:#f0917a}
.foot{margin-top:26px;font-size:12.5px;color:rgba(201,194,172,.5)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* a short screen — landscape on a phone, or enlarged text — must still reach
   the lower keys */
@media (max-height:650px){
  body{align-items:flex-start}
}