/*
 * PigWars website styling.
 *
 * Colours mirror the in-game palette defined in /CLAUDE.md so the site and the
 * game read as one product — the loading screen in particular sits directly
 * against the game's own UI, and a mismatch there is very visible.
 *   C_BG #0f0a08  C_PANEL #1f170f  C_TITLE #facc40  C_SUBTITLE #b39966
 *   C_DIM #b3b3b3  C_BTN_PLAY #2e9e40  C_BTN_WIKI #3861a6  C_CLOSE #8c2626
 */

:root {
  --bg: #0f0a08;
  --panel: #1f170f;
  --title: #facc40;
  --subtitle: #b39966;
  --text: #ffffff;
  --dim: #b3b3b3;
  --play: #2e9e40;
  --info: #3861a6;
  --danger: #8c2626;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--title); }

.wrap {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.wrap--wide { max-width: 44rem; }

h1 {
  color: var(--title);
  font-size: 2.25rem;
  margin: 0 0 .25rem;
  letter-spacing: .02em;
}

h2 { color: var(--title); font-size: 1.35rem; margin: 2rem 0 .5rem; }

.tagline { color: var(--subtitle); margin: 0 0 2rem; }

.panel {
  background: var(--panel);
  border: 1px solid rgba(250, 204, 64, .15);
  border-radius: var(--radius);
  padding: 1.5rem;
}

label {
  display: block;
  font-size: .8rem;
  color: var(--subtitle);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1rem 0 .35rem;
}

input {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  color: var(--text);
  background: #0b0705;
  border: 1px solid #3a2f22;
  border-radius: 6px;
}

input:focus { outline: 2px solid var(--title); outline-offset: 1px; }

button {
  width: 100%;
  padding: .8rem 1rem;
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--play);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button:hover:not(:disabled) { filter: brightness(1.2); }
button:active:not(:disabled) { filter: brightness(.8); }
button:disabled { opacity: .55; cursor: default; }

button.secondary { background: var(--info); }
button.danger { background: var(--danger); }
button.ghost { background: transparent; border: 1px solid #3a2f22; }

.alt {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0 0;
  color: var(--dim);
  font-size: .8rem;
}
.alt::before, .alt::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #3a2f22;
}

.links {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: var(--dim);
  text-align: center;
}
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* Status line — aria-live so screen readers announce auth errors. */
.status {
  margin-top: 1rem;
  padding: .7rem .8rem;
  border-radius: 6px;
  font-size: .9rem;
  display: none;
}
.status[data-kind="error"] { display: block; background: rgba(140, 38, 38, .25); border: 1px solid var(--danger); }
.status[data-kind="info"]  { display: block; background: rgba(56, 97, 166, .2); border: 1px solid var(--info); }
.status[data-kind="ok"]    { display: block; background: rgba(46, 158, 64, .2); border: 1px solid var(--play); }

.muted { color: var(--dim); font-size: .9rem; }

/* Hide content until the auth guard has decided — prevents a flash of the
   signed-in view before a redirect fires. */
[data-requires-auth] { visibility: hidden; }
[data-requires-auth][data-auth-ready] { visibility: visible; }