/* Zil Kréol Games Night — shared styles. Swap the colours below for your brand palette. */
:root {
  --lagoon: #0e3b36;      /* deep green background */
  --lagoon-2: #154c45;    /* panels */
  --lagoon-3: #1f5f56;    /* borders */
  --sunset: #e8692b;      /* main accent / buzz */
  --gold: #f2b544;        /* highlights */
  --cream: #f6efe2;       /* text */
  --muted: #b9c9c3;
  --stone: #8a8378;
  --red: #d9483b;
  --ok: #3fae74;
  --radius: 14px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--lagoon); color: var(--cream);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
h1, h2, h3, .display { font-family: "Bricolage Grotesque", "Inter", sans-serif; letter-spacing: -0.01em; margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: 10px 14px; background: var(--lagoon-3); color: var(--cream); font-weight: 600; }
button:hover { filter: brightness(1.1); }
button.primary { background: var(--sunset); color: #fff; }
button.good { background: var(--ok); color: #fff; }
button.bad { background: var(--red); color: #fff; }
button.ghost { background: transparent; border: 1px solid var(--lagoon-3); }
button:disabled { opacity: .4; cursor: default; }
input, select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--lagoon-3); background: #0b302c; color: var(--cream); }
label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
.panel { background: var(--lagoon-2); border: 1px solid var(--lagoon-3); border-radius: var(--radius); padding: 16px; }
.muted { color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.err { color: #ffb4a8; min-height: 1.2em; margin-top: 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--sunset); display: grid; place-items: center; font-weight: 800; color: #fff; font-family: "Bricolage Grotesque", sans-serif; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lagoon-3); font-size: 13px; font-weight: 600; }
.tag.sabotage { background: var(--red); color: #fff; }

/* stone tower */
.tower { display: flex; flex-direction: column-reverse; gap: 3px; align-items: center; }
.tower i { display: block; height: 12px; border-radius: 50%; background: rgba(255,255,255,.08); }
.tower i.on { background: radial-gradient(ellipse at 35% 30%, #b8b0a4, var(--stone) 60%, #5e584f); }
.tower i:nth-child(1){width:60px}.tower i:nth-child(2){width:54px}.tower i:nth-child(3){width:50px}
.tower i:nth-child(4){width:44px}.tower i:nth-child(5){width:40px}.tower i:nth-child(6){width:34px}.tower i:nth-child(7){width:28px}