/* Ristinolla – pääsysivun ja ylläpitopaneelin yhteinen tyyli.
   Samat värit ja kirjaimet kuin pelissä: ruutupaperi, risti punainen, nolla turkoosi. */
:root {
  --bg: #EDF0F5;
  --grid: rgba(56, 86, 140, .09);
  --surface: #FFFFFF;
  --surface-2: #F3F5F9;
  --ink: #18202F;
  --muted: #5D687D;
  --rule: #D3DAE5;
  --x: #D6452A;
  --x-soft: #FBE3DD;
  --o: #127C8F;
  --o-soft: #D5EDF1;
  --ok: #23845A;
  --ok-soft: #DDF2E7;
  --warn: #A86A00;
  --warn-soft: #FBEFD5;
  --focus: #3B5BDB;
  --shadow: 0 1px 2px rgba(20,30,50,.06), 0 18px 40px -18px rgba(20,30,50,.22);
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F131C; --grid: rgba(140,170,230,.06); --surface: #181E2C; --surface-2: #1F2637;
    --ink: #E7EBF3; --muted: #8E99AF; --rule: #2C3549;
    --x: #FF7859; --x-soft: #3B2421; --o: #47C3D7; --o-soft: #15323A;
    --ok: #4CC98B; --ok-soft: #173327; --warn: #F0B54A; --warn-soft: #3A2E15; --focus: #93A9FF;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font: 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--o); }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -.015em; text-wrap: balance; margin: 0; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand .word { font: 800 28px/1 var(--f-display); letter-spacing: -.02em; }
.brand .r { color: var(--x); } .brand .n { color: var(--o); }

.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); }

.label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--f-mono); }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 13.5px; font-weight: 600; }
.field .help { font-size: 12.5px; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--rule); background: var(--surface-2); border-radius: 11px;
  padding: 10px 12px; font-size: 15px;
}
textarea.input { resize: vertical; min-height: 96px; line-height: 1.5; }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.input.code { font: 700 22px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; text-align: center; }

.btn {
  border: 0; border-radius: 12px; padding: 10px 17px; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s, opacity .2s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.btn.x { background: var(--x); color: #fff; }
.btn.o { background: var(--o); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.danger { background: transparent; color: var(--x); border: 1px solid color-mix(in srgb, var(--x) 45%, transparent); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn.wide { width: 100%; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--o); flex: none; }
.check span { display: flex; flex-direction: column; }
.check small { color: var(--muted); font-size: 12.5px; }

.alert { border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; }
.alert.err { background: var(--x-soft); color: var(--x); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.info { background: var(--o-soft); color: var(--o); }

.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.off { background: var(--surface-2); color: var(--muted); }
.pill.bad { background: var(--x-soft); color: var(--x); }
.pill.info { background: var(--o-soft); color: var(--o); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001s !important; animation-duration: .001s !important; } }