/* Dominions 6 hosting dashboard.
   Dark, low-chrome, readable at a glance — the page people check to see
   whether it's their turn yet. */

:root {
  --bg:        #14110e;
  --panel:     #1e1a15;
  --panel-2:   #262119;
  --line:      #3a3227;
  --ink:       #e8e0d2;
  --ink-dim:   #a2988a;
  --gold:      #c9a961;
  --gold-dim:  #8a7440;
  --green:     #7fa66a;
  --red:       #c4694f;
  --blue:      #6f8fae;
  --radius:    6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- chrome ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.4rem;
  background: linear-gradient(180deg, #221d17, #1a1610);
  border-bottom: 1px solid var(--line);
}
.brand {
  color: var(--gold); text-decoration: none;
  font-size: 1.15rem; letter-spacing: .02em;
}
.brand-mark { color: var(--gold-dim); margin-right: .2rem; }
.topbar nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topbar nav a { color: var(--ink-dim); text-decoration: none; }
.topbar nav a:hover { color: var(--gold); }
.who { color: var(--ink-dim); margin-right: .6rem; }
.nav-badge {
  display: inline-block; min-width: 1.15rem; text-align: center;
  background: var(--gold-dim); color: #14110e;
  border-radius: 999px; padding: 0 .3rem; margin-left: .25rem;
  font-size: .72rem; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.inline { display: inline-flex; align-items: center; margin: 0; }

main {
  flex: 1;
  width: min(1080px, 100% - 2.4rem);
  margin: 1.6rem auto;
}

footer {
  padding: 1.2rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: .82rem;
}

.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.refresh-controls { display: flex; align-items: center; gap: .7rem; }
.refresh-note { color: var(--ink-dim); font-size: .8rem; white-space: nowrap; }
button:disabled { opacity: .5; cursor: default; }

h1 { font-size: 1.6rem; margin: 0 0 .3rem; color: var(--gold); font-weight: 600; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--gold-dim); font-weight: 600; }
.subtitle { color: var(--ink-dim); margin: 0 0 1.4rem; }

/* ---------- flashes ---------- */

.flashes { margin-bottom: 1.2rem; display: grid; gap: .5rem; }
.flash {
  padding: .7rem .95rem; border-radius: var(--radius);
  border-left: 3px solid var(--line); background: var(--panel);
}
.flash-error { border-left-color: var(--red); }
.flash-ok    { border-left-color: var(--green); }

/* ---------- panels & cards ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}

.game-grid { display: grid; gap: .9rem; }

.game-card {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: .95rem 1.15rem;
  text-decoration: none; color: inherit;
}
.game-card:hover { background: var(--panel-2); border-left-color: var(--gold); }
/* Games you can manage are marked so the list stays scannable when it holds
   everyone's games, not just yours. */
.game-card-mine { border-left-color: var(--gold); }
.tag-mine {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dim); border: 1px solid var(--gold-dim);
  border-radius: 3px; padding: .04rem .35rem; margin-left: .5rem;
  vertical-align: middle; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.game-card h3 { margin: 0 0 .2rem; font-size: 1.05rem; color: var(--ink); }
.game-meta { color: var(--ink-dim); font-size: .87rem; }
.game-right { text-align: right; }

.empty {
  text-align: center; padding: 3rem 1rem; color: var(--ink-dim);
  border: 1px dashed var(--line); border-radius: var(--radius);
}

/* ---------- status pills ---------- */

.pill {
  display: inline-block; padding: .12rem .6rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .03em;
  border: 1px solid var(--line); color: var(--ink-dim);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.pill-running { color: var(--green); border-color: #43563a; background: #1b2417; }
.pill-stopped { color: var(--red);   border-color: #5a382c; background: #241713; }
.pill-lobby   { color: var(--blue);  border-color: #3a4a5a; background: #161d24; }

/* ---------- join address ---------- */

.join {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1rem; margin: .9rem 0;
}
.join code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem; color: var(--gold); letter-spacing: .04em;
}
.join .hint { color: var(--ink-dim); font-size: .85rem; }

/* ---------- forms ---------- */

form { margin: 0 0 1rem; }
fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.15rem; margin: 0 0 1.1rem;
  background: var(--panel);
}
legend { color: var(--gold); padding: 0 .4rem; font-size: .95rem; }

label { display: block; margin-bottom: .25rem; color: var(--ink-dim); font-size: .88rem; }

input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: .5rem .65rem;
  background: #100e0b; color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: .92rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-dim);
}
input[type=checkbox] { accent-color: var(--gold-dim); margin-right: .45rem; }

.field { margin-bottom: .9rem; }
.field .help { color: var(--ink-dim); font-size: .8rem; margin-top: .25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .45rem; }
.checks label { display: flex; align-items: center; color: var(--ink); font-size: .9rem; }

/* ---------- buttons ---------- */

button, .btn {
  font: inherit; font-size: .92rem; cursor: pointer;
  padding: .5rem 1.05rem; border-radius: 4px;
  border: 1px solid var(--gold-dim);
  background: linear-gradient(180deg, #2e2719, #241e14);
  color: var(--gold); text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: #382f1e; }
.btn-danger { border-color: #5a382c; color: var(--red); background: #241713; }
.btn-danger:hover { background: #2e1c16; }
.btn-quiet { border-color: var(--line); color: var(--ink-dim); background: var(--panel-2); }
.btn-quiet:hover { color: var(--ink); }
.linkbtn {
  border: none; background: none; color: var(--ink-dim);
  padding: 0; font-size: .9rem;
}
.linkbtn:hover { color: var(--gold); background: none; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--ink-dim); font-weight: 600; font-size: .82rem; letter-spacing: .04em; }
td.num { font-family: ui-monospace, Menlo, Consolas, monospace; }

.nation-list { max-height: 22rem; overflow-y: auto; }
.ai-tag { color: var(--ink-dim); font-size: .8rem; }

/* ---------- auth pages ---------- */

.auth { max-width: 380px; margin: 3rem auto; }
.auth .panel { padding: 1.6rem; }
.auth h1 { text-align: center; margin-bottom: 1.4rem; }
.auth button { width: 100%; margin-top: .4rem; }
.auth .alt { text-align: center; margin-top: 1rem; color: var(--ink-dim); font-size: .88rem; }
.auth .alt a { color: var(--gold-dim); }

/* ---------- nation picker ---------- */

.nation-picker { max-height: 20rem; overflow-y: auto; border: 1px solid var(--line);
                 border-radius: 4px; padding: .6rem; background: #100e0b; }
.nation-row { display: grid; grid-template-columns: 1fr 130px; gap: .5rem;
              align-items: center; padding: .18rem 0; }
.nation-row span { font-size: .88rem; }
.nation-row select { padding: .2rem .4rem; font-size: .82rem; }
.water-tag {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue); border: 1px solid #3a4a5a; background: #161d24;
  border-radius: 3px; padding: .02rem .3rem; margin-left: .4rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}