/* Dark, CE-inspired theme. Fixed-width so screenshots are consistent. */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #1a1814; color: #d8d2c4;
  font: 13px/1.4 "Segoe UI", system-ui, sans-serif;
}
body { overflow-x: hidden; }   /* zoom-to-fit (js/main.js fitToScreen) shrinks #app on small screens */
#app { width: 1000px; margin: 0 auto; padding: 10px 14px 16px; }

/* Top bar with the live point readout */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #3a342a; padding-bottom: 8px; margin-bottom: 10px;
}
#topbar .title { font-size: 18px; font-weight: 600; color: #efe9da; letter-spacing: .3px; }
.points { font-size: 18px; font-weight: 700; color: #cfc7b4; }
.points.over { color: #e2615a; }

/* Three columns */
#columns { display: grid; grid-template-columns: 240px 1fr 250px; gap: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 10px; }
.col-left { align-items: center; }

.panel {
  background: #23201a; border: 1px solid #34302704; border: 1px solid #342f27;
  border-radius: 6px; padding: 10px; width: 100%;
}
.panel h3 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: #b9a06a; border-bottom: 1px solid #342f27; padding-bottom: 5px;
}

/* Pawn canvas */
#pawn {
  background: radial-gradient(ellipse at center, #2c2820 0%, #1d1a15 100%);
  border: 1px solid #342f27; border-radius: 6px;
}

/* Form rows */
.row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.row label { flex: 0 0 70px; color: #a9a293; font-size: 12px; }
.row.name-row label { flex-basis: 52px; }
input[type=text], input[type=number], select {
  background: #15130f; color: #e6e0d2; border: 1px solid #3d3829; border-radius: 4px;
  padding: 4px 6px; font: inherit; min-width: 0; flex: 1;
}
input[type=number] { max-width: 64px; flex: 0 0 64px; }
select { cursor: pointer; }
.inline { display: flex; gap: 6px; }

/* ‹ › steppers flanking the appearance dropdowns */
.arrow {
  flex: 0 0 22px; background: #15130f; color: #b9a06a; border: 1px solid #3d3829;
  border-radius: 4px; font-size: 15px; line-height: 1; padding: 3px 0; cursor: pointer;
}
.arrow:hover { background: #2a261d; color: #efe9da; }

/* Skills */
.skill-row { display: grid; grid-template-columns: 1fr 70px 58px; gap: 6px; align-items: center; margin-bottom: 4px; }
.lvl-stepper { display: flex; align-items: center; justify-content: center; gap: 3px; }
.lvl-arrow { flex: 0 0 18px; font-size: 13px; padding: 2px 0; }
.lvl-num { min-width: 20px; text-align: center; color: #e6e0d2; font-variant-numeric: tabular-nums; }
.skill-head { margin-bottom: 6px; }
.skill-head span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #8a8273; text-align: center; }
.skill-head span:first-child { text-align: left; }
.skill-row .sk-name { color: #cfc7b4; text-transform: capitalize; }
.skill-row select { flex: none; }
.passion-btn {
  background: #15130f; border: 1px solid #3d3829; border-radius: 4px; color: #8a8273;
  padding: 3px 4px; cursor: pointer; font-size: 11px;
}
.passion-btn.minor { color: #e8c06a; border-color: #6a5a2a; }
.passion-btn.major { color: #f0a020; border-color: #8a5a10; font-weight: 700; }
.skill-row.disabled .sk-name { color: #6a6457; text-decoration: line-through; }
.sk-disabled { color: #8a5a4a; font-size: 11px; font-style: italic; }
.sk-locked { color: #8a5a4a; text-align: center; }
.sk-floor { color: #6a9a5a; font-size: 11px; font-weight: 600; cursor: help; }
.sk-penalty { color: #d07a5a; font-size: 11px; font-weight: 600; cursor: help; }
select option:disabled { color: #555; }

/* Collapsible color dropdown */
.color-dd { position: relative; margin-bottom: 8px; }
.dd-current {
  display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer;
  background: #15130f; color: #e6e0d2; border: 1px solid #3d3829; border-radius: 4px; padding: 4px 6px;
}
.dd-current:hover { border-color: #5a5240; }
.dd-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid #00000070; flex: 0 0 auto; }
.dd-text { flex: 1; text-align: left; font-size: 12px; }
.dd-caret { color: #8a8273; font-size: 10px; }
.dd-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 2px; display: none;
  background: #23201a; border: 1px solid #3d3829; border-radius: 4px; padding: 6px;
}
.dd-panel.open { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch {
  width: 20px; height: 20px; border-radius: 4px; border: 2px solid transparent; cursor: pointer;
}
.swatch.sel { border-color: #efe9da; box-shadow: 0 0 0 1px #000; }

/* Traits + backstory misc */
.incapable { font-size: 11px; color: #d08a6a; margin-top: 6px; min-height: 14px; }
.trait-cost { color: #8a8273; font-size: 11px; }
#foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid #342f27;
  display: flex; justify-content: space-between; color: #8a8273; font-size: 12px; }
#genline { color: #cfc7b4; }
.hint { font-style: italic; }