/* assets/css/style.css
   Stijl van het avondspel: een donkere "tech HUD"-look (afgeschuinde
   vakken met gloeiende randen, hoofdletters in een condensed lettertype,
   een klein brug-icoon als merk) overgenomen uit de aangeleverde
   sfeerbeelden (assets/img/posters/ — "Digital Physical · Het
   Brugprotocol").

   Kleuren per team (Alfa/Bravo/Charlie/Delta) worden automatisch gezet via
   het data-team attribuut op <body> (zie js/team-theme.js). Een team met
   een andere naam krijgt gewoon de standaard cyaan kleur.
*/

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --bg: #05080f;
  --bg-card: #0b131f;
  --text: #eaf3fb;
  --text-muted: #7c8fa6;
  --border: #1c2a3a;

  /* Standaard (nog geen team / team niet herkend) */
  --accent: #33d6f0;
  --accent-glow: rgba(51, 214, 240, 0.45);
  --accent-ink: #04222a;

  --warning: #ffcf3f;
  --warning-glow: rgba(255, 207, 63, 0.35);
  --danger: #ff5c5c;
  --danger-glow: rgba(255, 92, 92, 0.35);
  --success: #3ddc97;
  --success-glow: rgba(61, 220, 151, 0.4);

  --chamfer: 14px;
  --chamfer-sm: 8px;
  --font-display: "Oswald", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Vaste teamkleuren (ook los bruikbaar, bv. voor het bolletje in de
     admin-teamlijst) -- de body[data-team=...]-regels hieronder zetten
     deze als --accent zodra dat team actief is. */
  --color-default: #33d6f0;
  --color-alfa: #ff5b3d;
  --color-bravo: #6dff3f;
  --color-charlie: #3f7dff;
  --color-delta: #ffb020;
}

/* Teamkleuren, herkend aan de naam (zie js/team-theme.js) */
body[data-team="alfa"] {
  --accent: var(--color-alfa);
  --accent-glow: rgba(255, 91, 61, 0.45);
  --accent-ink: #2a0e06;
}
body[data-team="bravo"] {
  --accent: var(--color-bravo);
  --accent-glow: rgba(109, 255, 63, 0.4);
  --accent-ink: #10240a;
}
body[data-team="charlie"] {
  --accent: var(--color-charlie);
  --accent-glow: rgba(63, 125, 255, 0.45);
  --accent-ink: #081326;
}
body[data-team="delta"] {
  --accent: var(--color-delta);
  --accent-glow: rgba(255, 176, 32, 0.4);
  --accent-ink: #2a1a02;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(51, 214, 240, 0.06), transparent 55%),
    var(--bg);
  /* VERVANG MIJ (optioneel): een subtiele achtergrondtextuur kan hier bij, bv.
     background: ... , var(--bg) url("../img/achtergrond.jpg") center/cover fixed; */
  color: var(--text);
  font-family: var(--font-body);
  display: flex;
  justify-content: center;
}

.wrap {
  width: 100%;
  max-width: 480px;
  padding: 1.5rem 1.25rem 3rem;
}

/* ---------- Merk / header ---------- */

.brand-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.bridge-logo {
  width: 64px;
  height: 40px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.brand-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.game-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.game-header--small {
  margin-bottom: 1rem;
}

.game-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.9rem;
  margin: 0 0 0.3rem;
  color: var(--text);
  text-shadow: 0 0 16px var(--accent-glow);
}

.subtitle {
  color: var(--text-muted);
  margin: 0;
}

.subtitle a {
  color: var(--accent);
}

.hint {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}

/* ---------- Chamfered "HUD"-panelen ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  filter: drop-shadow(0 0 10px var(--accent-glow));
  padding: 1.4rem 1.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.card-highlight {
  filter: drop-shadow(0 0 16px var(--success-glow));
  border-color: var(--success);
}

/* ---------- Knoppen ---------- */

.btn {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--accent);
  clip-path: polygon(
    var(--chamfer-sm) 0, calc(100% - var(--chamfer-sm)) 0,
    100% var(--chamfer-sm), 100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%, var(--chamfer-sm) 100%,
    0 calc(100% - var(--chamfer-sm)), 0 var(--chamfer-sm)
  );
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
  background: transparent;
  color: var(--accent);
}

.btn:hover {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.btn-ghost {
  border-color: var(--border);
  color: var(--text-muted);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-big {
  width: 100%;
  font-size: 1.05rem;
  padding: 1rem;
}

.btn-team {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  font-weight: 600;
}

.btn-team:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.team-name-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.4rem;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  margin: 0.25rem 0 1rem;
}

/* ---------- Meldingen ---------- */

.banner {
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  border: 1px solid;
}

.banner-warning {
  background: rgba(255, 207, 63, 0.12);
  border-color: var(--warning);
  color: var(--warning);
}

.banner-error {
  background: rgba(255, 92, 92, 0.12);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- Kompas (windrichting Operator Nova) ---------- */

.compass {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0.75rem auto 1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.compass-glow {
  position: absolute;
  inset: -25%;
  /* De achtergrond (een conic-gradient "waaier" rond de peiling) wordt
     per situatie in JS gezet (js/scan.js), afhankelijk van de berekende
     windrichting -- dit blurt 'm tot een zachte gloed i.p.v. scherpe pijl. */
  filter: blur(16px);
}

.compass-label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.compass-label--n { top: 8px; left: 50%; transform: translateX(-50%); }
.compass-label--o { right: 10px; top: 50%; transform: translateY(-50%); }
.compass-label--z { bottom: 8px; left: 50%; transform: translateX(-50%); }
.compass-label--w { left: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Voortgang ---------- */

.progress-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.digit-box {
  width: 2.9rem;
  height: 3.4rem;
  border: 1px solid var(--border);
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
}

.digit-box--filled {
  border-color: var(--success);
  color: var(--success);
  filter: drop-shadow(0 0 8px var(--success-glow));
}

.final-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.3em;
  color: var(--success);
  text-shadow: 0 0 18px var(--success-glow);
  margin: 0.25rem 0 0;
}

/* ---------- Modals ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 10, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 50;
}

.modal-inner {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  clip-path: polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
  filter: drop-shadow(0 0 14px var(--accent-glow));
  padding: 1.4rem 1.25rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.modal-inner h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.25rem;
}

.modal-close {
  float: right;
}

#qr-reader {
  width: 100%;
  margin-top: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Formulieren (ook gebruikt door de admin-omgeving) ---------- */

form .btn + .btn {
  margin-top: 0.6rem;
}

form label {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: var(--accent);
}