/* ============================================================
   Jaliz — design tokens + base + shared atoms.
   The :root block is the Wooden design system (single visual source of
   truth), with a Jaliz game-theme layer added on top. Per-component sheets
   live under styles/ and are linked from index.html.
   ============================================================ */

:root {
  /* ── Wooden: brand palette ─────────────────────────────── */
  --color-gold: #D4AF37;
  --color-brown-strong: #654321;
  --color-brown-muted:  #6C4B2B;
  --color-brown-warm:   #5B3D24;
  --color-brown-dark:   #3D2817;
  --color-brown-deep:   #3B220F;
  --color-parchment:    #f6e7c3;
  --color-parchment-card: #fffdf6;

  /* ── Wooden: semantic feedback ─────────────────────────── */
  --color-success: #4CAF50;
  --color-error:   #F44336;
  --color-alert:   #D9534F;

  /* ── Wooden: gradients ─────────────────────────────────── */
  --gradient-button-primary:  linear-gradient(135deg, #583286 0%, #7a4ba8 100%);
  --gradient-button-hover:    linear-gradient(135deg, #7a4ba8 0%, #9a6bc8 100%);
  --gradient-panel-dark: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);

  /* ── Wooden: surfaces ──────────────────────────────────── */
  --surface-panel-soft:   rgba(255, 255, 255, 0.55);
  --surface-panel-card:   rgba(255, 253, 246, 0.95);
  --surface-panel-card-bright: rgba(255, 253, 246, 0.98);
  --border-subtle:        1px solid rgba(0, 0, 0, 0.08);

  /* ── Wooden: shadows ───────────────────────────────────── */
  --shadow-card:         0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-button:       0 2px 8px  rgba(0, 0, 0, 0.30);
  --shadow-button-hover: 0 6px 12px rgba(0, 0, 0, 0.40);
  --shadow-modal:        0 10px 30px rgba(0, 0, 0, 0.80);

  /* ── Wooden: radii ─────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-round: 50%;

  /* ── Wooden: spacing ───────────────────────────────────── */
  --space-1: 4px;  --space-2: 6px;  --space-3: 8px;  --space-4: 10px;
  --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 30px;

  /* ── Wooden: typography ────────────────────────────────── */
  --font-family-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  /* ── Jaliz theme layer (game pieces over Wooden chrome) ── */
  --sun-yellow:#FFD23F;
  --sun-orange:#F5921E;
  --hill-orange:#E8772E;
  --card-back:#7FC6D6;
  --card-back-deep:#4FA3B5;
  --fence-red:#C0392B;
  --mest:#7A4B25;
  --tractor:#7A3FA0;

  /* Seat colours, indexed by PLAYER_COLORS in constants.js */
  --p-green:#3FA34D;
  --p-blue:#2E78C7;
  --p-red:#C0392B;
  --p-purple:#8E44AD;
  --p-teal:#1F9E8E;
  --p-orange:#E8862E;
  --p-pink:#C2569C;

  /* Crop accent colours referenced by the mock (cards inline their own hex) */
  --crop-pepper:#D6453B;
  --crop-pea:#7CB342;
  --crop-aubergine:#6A3D9A;
  --crop-tomato:#E2462F;
  --crop-pumpkin:#E8862E;
  --crop-carrot:#EE8B2D;
}

/* ── Base reset ───────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-family-ui);
  color: var(--color-brown-strong);
  background:
    radial-gradient(120% 70% at 50% -8%, var(--sun-yellow) 0%, var(--sun-orange) 34%, transparent 60%),
    linear-gradient(180deg, var(--sun-orange) 0%, var(--hill-orange) 38%, #C75E22 100%);
  background-attachment: fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
#app, .app-root { height: 100%; }
svg { display: block; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* Icon wrapper span used across chrome (icons.js returns SVG strings). */
.i { display: inline-flex; align-items: center; justify-content: center; }
.i svg { width: 16px; height: 16px; }

/* ── Shared: brand wordmark ───────────────────────────────── */
.brand {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-brown-warm);
  border: 2px solid #8a5a2b;
  border-radius: 10px;
  padding: 5px 10px 6px;
  box-shadow: 0 3px 0 #3b220f, var(--shadow-button);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 7px, rgba(0,0,0,.06) 7px 14px);
}
.brand b {
  color: #FFE08A; font-weight: var(--font-weight-heavy);
  font-size: 17px; letter-spacing: .04em; line-height: 1;
  text-shadow: 0 1px 0 #2c1908;
}
.brand .sprout svg { width: 14px; height: 14px; }
.brand-big { padding: 10px 18px 12px; gap: 9px; }
.brand-big b { font-size: 30px; }
.brand-big .sprout svg { width: 24px; height: 24px; }

/* ── Shared: stat pill ────────────────────────────────────── */
.stat {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-panel-card);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  box-shadow: var(--shadow-card);
  font-size: 12px; font-weight: var(--font-weight-bold);
  color: var(--color-brown-strong);
}
.stat .i svg { width: 14px; height: 14px; }
.stat .coin-num { font-variant-numeric: tabular-nums; color: var(--color-brown-deep); }

/* ── Shared: buttons ──────────────────────────────────────── */
.btn-primary {
  background: var(--gradient-button-primary);
  color: #fff; border: none;
  border-radius: var(--radius-lg);
  padding: 13px 14px;
  font-size: 15px; font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-button);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-primary .i svg { width: 18px; height: 18px; }
.btn-primary:disabled { opacity: .55; filter: saturate(.6); cursor: not-allowed; }
.btn-primary.cancel { background: linear-gradient(135deg, #8a5a2b 0%, #6C4B2B 100%); font-size: 13px; }

.btn-secondary {
  background: var(--surface-panel-card);
  color: var(--color-brown-strong);
  border: 1px solid rgba(101,67,33,.22);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: 14px; font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-card);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-secondary .i svg { width: 18px; height: 18px; }
.btn-secondary.full { width: 100%; }
.btn-secondary.danger { color: var(--color-alert); }

.icon-btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: var(--surface-panel-card);
  border: 1px solid rgba(101,67,33,.22);
  box-shadow: var(--shadow-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-brown-strong);
}
.icon-btn .i svg { width: 22px; height: 22px; }
.icon-btn.gold { background: var(--color-gold); color: #3b2a07; border-color: #b8941f; }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Shared: tags ─────────────────────────────────────────── */
.tag {
  font-size: 8px; font-weight: var(--font-weight-bold); color: #fff;
  border-radius: 4px; padding: 1px 4px; letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: 3px;
}
.tag.bot { background: var(--tractor); }
.tag.host { background: var(--color-brown-warm); }
.tag.me { background: var(--p-green); }
.tag.tractor-tag { background: var(--tractor); font-size: 9px; padding: 1px 5px; }
.tag.tractor-tag .i svg { width: 9px; height: 9px; stroke: #fff; }

/* ── Shared: inputs ───────────────────────────────────────── */
.text-input {
  width: 100%;
  background: #fffdf6;
  border: 2px solid rgba(101,67,33,.25);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: 16px; color: var(--color-brown-deep);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08);
}
.text-input:focus { outline: none; border-color: var(--color-gold); }
.field-lbl {
  font-size: 11px; font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .06em; color: #5a3a1a;
}
.divider {
  text-align: center; font-size: 11px; color: var(--color-brown-muted);
  position: relative; margin: 2px 0;
}

/* ── Loading overlay (template-provided element) ──────────── */
.loading-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: rgba(59,34,15,.6); color: #FFE9B8;
}
.loading-overlay--hidden { display: none; }
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #FFE9B8;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }