/* =============== THEME / BRAND =============== */
:root {
  /* Brand */
  --bg:#FEFEFC; --panel:#FFFFFF; --ink:#042E21; --muted:#6B8A7C;
  --accent:#319175; --warn:#F6A616; --bad:#E2564A; --good:#38C9A5;

  /* Layout */
  --tile:3.2rem; --gap:.25rem; --header-h:60px;
  --left-w:  clamp(280px, 25vw, 420px);
  --right-w: clamp(320px, 25vw, 480px);

  /* Tiles */
  --tile-forest:#CDE5D7; --tile-edge:#B5DAC9; --tile-clear:#F1E3D4; --tile-farm:#EAE6C7;
  --tile-char:#E2C4C4; --tile-replant:#D2E5D7; --tile-firebreak:#E0E2E8;
  --tile-vill:#EAE4EC; --tile-hut:#E4DEE9; --tile-burn:#F4C7C1;

  /* UI */
  --line:rgba(4,46,33,.10); --line-soft:rgba(4,46,33,.08);
  --pill-bg:#FFF; --pill-line:rgba(4,46,33,.12);
  --danger-bg:#FFF3F2; --danger-line:#F3C3BE;
  --dialog-bg:#FFF; --dialog-border:#319175;
  --trend-bg:#FEFEFC; --trend-border:#319175;

  /* Buttons */
  --btn-fg:#FFF; --btn-bg:var(--accent); --btn-border:var(--accent);
  --btn-bg-hover:#2A7D64; --btn-on-bg:rgba(49,145,117,.15); --btn-on-fg:var(--ink);
  --btn-good-bg:#2E8C70; --btn-good-bd:#2E8C70; --btn-warn-fg:#09310B;

  --shadow-card:0 6px 18px rgba(0,0,0,.06);
  --focus-ring:0 0 0 3px rgba(49,145,117,.35);
}

/* =============== BASE / RESET =============== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font: 16px/1.5 "Inter", sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =============== HEADER =============== */
header{
  display:flex;align-items:center;gap:.8rem;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel);height:var(--header-h);
}
.title{-size:16px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;font-family: "Nexa", sans-serif;}
.hud{display:flex;gap:.5rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.pill{padding:.25rem .5rem;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-line);font-size:12px}
.pill.red{background:var(--danger-bg);border-color:var(--danger-line);color:#8D2B22}

/* =============== LAYOUT (fixed left & right) =============== */
.app{
  height: calc(100vh - var(--header-h));
  padding-left:  calc(var(--left-w));
  padding-right: calc(var(--right-w));
}

/* Left sidebar — fixed */
.left{
  position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--left-w);
  background: var(--panel);
  padding: 14px;
  border-right: 1px solid var(--line-soft);
  display:flex; flex-direction:column;
  overflow:auto;
  z-index:20;
}

/* Center container */
.right{ height:100%; overflow:hidden; }

/* Center scroller (board area) */
.boardWrap{
  height:100%;
  display:flex; flex-direction:column; gap:1rem;
  overflow:auto; padding:1rem;
}

/* Right panel — fixed */
.sidepanel{
  position: fixed; top: var(--header-h); right: 0; bottom: 0; width: var(--right-w);
  min-width: 0 !important;
  display:flex; flex-direction:column; gap:.6rem;
  overflow:auto;
  padding:1rem .75rem 1rem 1rem;
  border-left:1px solid var(--line-soft);
  background:transparent;
  z-index:15;
}

/* Mobile: stack */
@media (max-width:900px){
  .app{height:auto;padding-left:1rem;padding-right:1rem}
  .left,.sidepanel{
    position:static;width:auto;height:auto;overflow:visible;border:0;padding:14px 0
  }
  .right{height:auto;overflow:visible;padding:0}
  .boardWrap{height:auto;padding:0;overflow:visible}
}

/* =============== CARDS & BUTTONS =============== */
.card{
  background:#FFF;border:1px solid var(--line-soft);border-radius:16px;
  padding:14px;margin-bottom:1rem;box-shadow:var(--shadow-card);color:var(--ink);
}
.btn{
  appearance:none;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);
  padding:.6rem 1rem;border-radius:999px;font-weight:700;cursor:pointer;
  transition:background-color .2s ease,filter .2s ease,box-shadow .2s ease;
}
.btn:hover{background:var(--btn-bg-hover)}
.btn.good{background:var(--btn-good-bg);border-color:var(--btn-good-bd)}
.btn.warn{background:var(--warn);border-color:var(--warn);color:var(--btn-warn-fg)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}
.btn.is-on{box-shadow:inset 0 0 0 2px var();background:var(--btn-on-bg);color:var(--btn-on-fg)}

.actions{display:flex;justify-content:flex-start;gap:.5rem;margin-top:.6rem}
.council{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tool-list{display:flex;flex-wrap: wrap; gap:.5rem; justify-content:flex-start;}

/* =============== BOARD + TILES =============== */
.board{
  display:grid;grid-template-columns:repeat(var(--w),var(--tile));grid-auto-rows:var(--tile);
  gap:var(--gap);
}
.tile{
  width:var(--tile);height:var(--tile);display:grid;place-items:center;border-radius:10px;
  font-size:1.6rem;user-select:none;position:relative;
}
.tile.t-forest{background:var(--tile-forest)}
.tile.t-edge{background:var(--tile-edge);box-shadow:inset 0 0 0 2px var(--accent)}
.tile.t-clear{background:var(--tile-clear)}
.tile.t-farm{background:var(--tile-farm)}
.tile.t-char{background:var(--tile-char)}
.tile.t-replant{background:var(--tile-replant)}
.tile.t-firebreak{background:var(--tile-firebreak)}
.tile.t-vill{background:var(--tile-vill)}
.tile.t-hut{background:var(--tile-hut)}
.tile.t-burn{background:var(--tile-burn);box-shadow:inset 0 0 0 2px var(--bad)}
.tile .flag{position:absolute;right:2px;bottom:2px;font-size:.95rem;opacity:.95}
.badge{position:absolute;left:2px;top:2px;font-size:.9rem;opacity:.9}

/* =============== DIALOG / MODAL =============== */
.modal{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:1000;
}
.modal.show{display:flex}
.dialog{
  width:min(960px,92vw);background:var(--dialog-bg);border:2px solid var(--dialog-border);
  border-radius:18px;padding:14px;color:var(--ink);
}

/* =============== TEXT HELPERS / CHART =============== */
.edge{color:var(--accent)}
.hint{font-size:11px;color:var(--muted)}
.log{max-height:240px;overflow:auto}
canvas#trend{display:block;width:100%;height:180px;background:var(--trend-bg);border:1px solid var(--trend-border);border-radius:10px}


/* =============== SLIDERS =============== */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}