/* Built for one hand, outdoors, in the cold, on a phone.
 *
 * Everything tappable is at least 48px tall and high contrast. That is not a
 * style preference: this app gets used at five to kickoff by somebody holding
 * a boot in the other hand, and a 32px row is a mis-tap that binds the wrong
 * player's left foot.
 */

:root {
  --bg:      #0b1220;
  --panel:   #131c2e;
  --line:    #24314b;
  --ink:     #e9eefb;
  --dim:     #93a1bd;
  --accent:  #3ddc84;
  --warn:    #ffb020;
  --err:     #ff6b6b;
  --tap: 52px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 18px; letter-spacing: .18em; }
#who { color: var(--dim); font-size: 13px; }

main { padding: 16px; max-width: 720px; margin: 0 auto; }
.screen h2 { margin: 4px 0 6px; font-size: 20px; }
.note { color: var(--dim); margin: 0 0 14px; font-size: 15px; }

input, select, button {
  font: inherit; min-height: var(--tap); border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 10px 14px;
}
input { width: 100%; }
button { cursor: pointer; }
button.primary, button[type=submit] {
  background: var(--accent); color: #06210f; border-color: transparent;
  font-weight: 650;
}
button:active { filter: brightness(.88); }

form { display: flex; gap: 10px; flex-wrap: wrap; }
form input { flex: 1 1 160px; }
form button { flex: 0 0 auto; }

.row { display: flex; gap: 10px; margin-bottom: 14px; }
.row select { flex: 1 1 auto; }
.row button { flex: 0 0 auto; }

/* roster ------------------------------------------------------------------ */

.players { list-style: none; margin: 0 0 18px; padding: 0; }
.players li {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap); padding: 8px 12px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.pick li { cursor: pointer; }
.pick li:active { border-color: var(--accent); }

.num {
  flex: 0 0 44px; height: 36px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font-variant-numeric: tabular-nums; font-weight: 650;
}
.name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; }

/* Sites read as three fixed slots, always in the same order and the same
 * place, so "the middle one is missing" is legible at a glance across a whole
 * squad without reading a word.
 */
.slots { display: flex; gap: 6px; flex: 0 0 auto; }
.slot {
  width: 30px; height: 30px; border-radius: 8px; display: grid;
  place-items: center; font-size: 11px; font-weight: 650;
  border: 1px solid var(--line); color: var(--dim); background: var(--bg);
}
.slot.on     { background: var(--accent); color: #06210f; border-color: transparent; }
.slot.nokey  { background: var(--warn);   color: #2a1c00; border-color: transparent; }

.add { margin-top: 6px; }

/* camera ------------------------------------------------------------------ */

.camwrap {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #000; aspect-ratio: 3 / 4; margin-bottom: 14px;
}
#cam { width: 100%; height: 100%; object-fit: cover; display: block; }
.reticle {
  position: absolute; inset: 18%; border: 3px solid var(--accent);
  border-radius: 16px; opacity: .85; pointer-events: none;
}

details { margin: 14px 0; color: var(--dim); }
details summary { min-height: var(--tap); display: flex; align-items: center; }
details form { margin-top: 10px; }

.sites { display: grid; gap: 12px; margin-bottom: 18px; }
.site { min-height: 76px; font-size: 19px; font-weight: 600; }

/* feedback ---------------------------------------------------------------- */

.err { color: var(--err); margin: 12px 0 0; }

#toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); max-width: 92vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#toast.bad { border-color: var(--err); color: var(--err); }
#toast.warn { border-color: var(--warn); color: var(--warn); }

@media (prefers-reduced-motion: no-preference) {
  #toast { animation: rise .18s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } }
}