/* Vatharia , de pagina's om het spel heen. Dezelfde kleuren als in het spel,
   zodat de overgang van website naar wereldkaart niet schokt. */
:root{
  --bg:#0a0e15; --panel:#121823; --panel2:#182130; --line:#273142;
  --txt:#e8eaef; --txt2:#8d97a8; --amber:#f2b84b; --amber2:#c9933a;
  --leaf:#57c878; --blood:#c92a2a; --wood2:#b08a52;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b2434 0%, transparent 60%),
    linear-gradient(#0a0e15,#0b1017);
  color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:24px 16px 40px
}
.serif{font-family:Georgia,"Times New Roman",serif}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}

.logo{max-width:420px;width:72%;height:auto;display:block;margin:10px auto 6px;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.6))}
.tagline{color:var(--txt2);text-align:center;margin:0 0 22px;font-size:14px}

.kaart{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px;width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.kaart.breed{max-width:640px}

.tabs{display:flex;gap:6px;margin:0 0 16px}
.tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt2);font-size:14px;font-weight:600;cursor:pointer}
.tabs button.on{background:var(--amber);border-color:var(--amber);color:#221604}

label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt2);font-weight:700;margin:12px 0 5px}
input[type=text],input[type=password],input[type=email]{
  width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);
  background:#0e131b;color:#fff;font-size:15px}
input:focus{outline:none;border-color:var(--amber)}

.volken{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:5px}
.volk{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;font-size:13.5px}
.volk:hover{border-color:var(--amber2)}
.volk.on{border-color:var(--amber);background:rgba(242,184,75,.12)}
.volk b{font-weight:700}
.volk span{color:var(--txt2);font-size:11.5px;display:block;line-height:1.3}

.knop{display:block;width:100%;margin-top:18px;padding:12px;border-radius:10px;border:0;
  background:var(--amber);color:#221604;font-size:15px;font-weight:700;cursor:pointer}
.knop:hover{background:#ffcc6a}
.knop:disabled{opacity:.5;cursor:default}
.knop.rustig{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.knop.rustig:hover{border-color:var(--amber)}

.melding{margin-top:14px;padding:10px 12px;border-radius:9px;font-size:13.5px;display:none}
.melding.fout{display:block;background:rgba(201,42,42,.13);border:1px solid var(--blood);color:#ffb3b3}
.melding.goed{display:block;background:rgba(87,200,120,.12);border:1px solid var(--leaf);color:#b6ecc6}

.klein{font-size:12.5px;color:var(--txt2)}
.kop{display:flex;align-items:center;gap:12px;margin-bottom:18px;width:100%;max-width:640px}
.kop .wie{flex:1}
.kop .wie b{display:block;font-size:17px}

.wereld{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);margin-bottom:10px}
.wereld .ikoon{width:46px;height:46px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(145deg,#2a3448,#1d2635);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.wereld .mid{flex:1;min-width:0}
.wereld .mid b{display:block;font-size:16px}
.wereld .mid span{color:var(--txt2);font-size:12.5px}
.wereld .knop{width:auto;margin:0;padding:10px 18px}
.wereld.dicht{opacity:.55}

footer{margin-top:28px;color:var(--txt2);font-size:12px;text-align:center}
@media (max-width:520px){ .volken{grid-template-columns:1fr} }