:root{
    --parchment:#efe7d5; --ink:#2a2116; --sea:#7aa7c9; --deep:#5b89ad;
    --coast:#f2eddc; --forest:#7a9b74; --plain:#b8c48a; --steppe:#c9b080; --rock:#9c8c7b; --snow:#f2f5f7;
    --accent:#836953; --panel:#f7f1e3;
  }
  *{box-sizing:border-box}
  body{margin:0;background:#e7decb;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
  main.wrap{display:grid;grid-template-columns:320px 1fr;gap:14px;max-width:1400px;margin:0 auto;padding:12px}
  @media (max-width: 980px){ main.wrap{grid-template-columns:1fr} }
  .board{position:relative;border-radius:18px;overflow:hidden;border:2px solid #cdbda0;box-shadow:0 10px 40px rgba(116,92,62,.25)}
  canvas{display:block;width:100%;height:auto;background:var(--parchment)}
  .side{background:#fff7e7;border:1px solid #e5d9c5;padding:12px;border-radius:14px;height:fit-content;display:flex;flex-direction:column;gap:10px}
  .side h3{margin:6px 0 4px;font-size:14px;color:#6c5e4d}
  .row{display:flex;flex-direction:column;gap:2px;margin:4px 0} 

  .layers-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: -2px;
    margin-left: 0px;
  }

  .small{font-size:12px;color:#6c5e4d}
  input,select,button{font-size:14px}
  input[type="text"],input[type="number"],select{background:#fff;border:1px solid #cabda6;border-radius:8px;padding:6px 8px; width: 100%;} /* Added width for consistency */
  input[type="range"]{width:100%}
  button{background:linear-gradient(180deg,#eadcc6,#decdb2);border:1px solid #c7b291;border-radius:8px;padding:6px 10px;color:#594b3a;cursor:pointer}
  button:hover{filter:brightness(1.05)}
  .scale{position:absolute;right:16px;bottom:12px;background:rgba(255,255,255,.7);border:1px solid #ccbfae;padding:6px 8px;border-radius:8px;font-size:12px;color:#5c4d3a}
  .badge{position:absolute;left:10px;bottom:10px;font-family:serif;font-style:italic;font-size:14px;color:#6a5a46;background:rgba(255,255,255,.75);border:1px solid #ccbfae;border-radius:8px;padding:4px 8px}

  .slider-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-row span {
  font-size: 12px;
  color: #6c5e4d;
  width: 30px;
  text-align: center;
}

.slider-container {
  position: relative;
  flex: 1;
}

.slider-value {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #594b3a;
  background: #fff;
  border: 1px solid #cabda6;
  border-radius: 6px;
  padding: 2px 5px;
  white-space: nowrap;
  pointer-events: none;
}
 
body {
  margin: 0;
  background: linear-gradient(45deg, #f5f0e5 25%, #eadbd0 25%, #eadbd0 50%, #f5f0e5 50%, #f5f0e5 75%, #eadbd0 75%, #eadbd0 100%);
  background-size: 80px 80px;
  color: var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

/* Styles for the info button and popup */
  .info-btn {
    position: fixed;
    top: 5px;
    right: 5px;
    background: rgba(234, 220, 198, 0.7);
    border: 1px solid #8f7e62;
    border-radius: 50%;
    padding: 4px 14px;
    color: #594b3a;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
    box-shadow: #81735b 0px 3px 6px;
  }

  .info-btn:hover {
    background: rgba(234, 220, 198, 0.8);
    padding: 5px 15px;
    top: 4px;
    right: 4px;
  }

  .info-popup {
    position: fixed;
    top: 15px;
    right: 40px;
    background: rgb(255, 247, 231, 0.7);
    border: 1px solid #e5d9c5;
    border-radius: 8px;
    padding: 6px;
    display: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 385px;
    max-height: 171px;
    overflow-y: auto;
    z-index: 1000;
  }

  .info-popup.active {
    display: block;
  }