main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.login { max-width: 380px; margin: 10vh auto 0; }
.login form { display: flex; gap: 8px; }
.login input { flex: 1; min-width: 0; }

.profs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
}
.prof {
  text-align: left;
  padding: 12px;
  display: block;
  width: 100%;
}
.prof.active { border-color: var(--accent); background: #3a3420; }
.prof .icon { font-size: 1.6rem; }
.prof .name { font-weight: 600; }
.prof .meta { font-size: .85em; color: var(--muted); margin: 2px 0 8px; }

.action-wrap { text-align: center; padding: 8px 0; }
.action {
  width: 100%;
  max-width: 320px;
  font-size: 1.25rem;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.action .cool {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}
.gathered { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 1.05rem; }
.feed { list-style: none; padding: 0; margin: 0; max-height: 220px; overflow: auto; font-size: .9em; }
.feed li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.feed li.levelup { color: var(--accent); }
.siege { border-color: var(--bad); }
.versus { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--bg); }
.versus .atk { background: var(--bad); transition: width .3s; }
.versus .def { background: #6aa7ef; flex: 1; }
button.danger-fill { background: var(--bad); border-color: var(--bad); color: #2a0b07; font-weight: 600; }
.feed li.raid, .feed li.battle { color: var(--bad); }
.feed li.repair { color: var(--good); }
.vote { border-color: var(--accent); }
.versus .help { background: var(--good); transition: width .3s; }
.vote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vote-buttons .action { font-size: 1.05rem; padding: 14px 8px; }
.vote-buttons.voted .action:not(.chosen) { opacity: .6; }
.vote-buttons .action.chosen { outline: 3px solid var(--text); outline-offset: 2px; opacity: 1; }
.feed li.vote { color: var(--accent); }

h3.sub { font-size: .95rem; color: var(--muted); margin: 6px 0 0; }

.level-card { display: flex; gap: 14px; align-items: center; }
.purse { color: var(--accent); font-weight: 800; white-space: nowrap; }
.perk-pick { border: 1px solid var(--gold-line); border-radius: 10px; padding: 12px; background: rgba(227, 180, 72, .08); }
.perk-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.perk-options button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; font-size: .9em; }
.perk-icon { font-size: 1.5rem; }
.perk-list { gap: 6px; font-size: .9em; }
.chip { border: 1px solid var(--gold-line); border-radius: 99px; padding: 1px 8px; }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.shop-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: .9em; }
.shop-item.owned { border-color: var(--accent); }
.shop-item button { margin-top: auto; width: 100%; padding: .35em .6em; font-size: .9em; }
.shop-icon { font-size: 1.5rem; height: 32px; display: flex; align-items: center; }
.swatch { display: inline-block; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .4); }
button.small { padding: .25em .6em; font-size: .85em; }
.level-badge {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #f6d77a, #c08a1e);
  color: var(--accent-ink);
  font: 800 1.6rem/1 var(--display);
  box-shadow: inset 0 2px 0 rgba(255, 250, 225, .6), 0 3px 8px rgba(0, 0, 0, .45);
}
.level-badge small { font: 700 .55rem/1 "Nunito", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.level-body { flex: 1; min-width: 0; }
.points { color: var(--accent); font-weight: 800; }

.tree-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tree-tabs .tab { flex: none; padding: .4em .8em; font-size: .9em; position: relative; }
.tree-tabs .tab.on { border-color: var(--accent); background: linear-gradient(#4a3a20, #3a2d18); }
.tree-tabs .dot {
  display: inline-grid; place-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: .75em;
}
.tier { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: rgba(0, 0, 0, .15); }
.tier.locked { opacity: .55; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tier-head h3 { margin: 0; }
.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.node { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel-2); }
.node.learned { border-color: var(--gold-line); }
.node-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.node .desc { font-size: .82em; margin: 2px 0 6px; }
.node .learn { padding: 0; width: 28px; height: 28px; line-height: 1; font-size: 1.1rem; flex: none; }
.pips { display: flex; gap: 4px; }
.pips span { width: 14px; height: 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--line); }
.pips span.on { background: var(--accent); border-color: var(--accent); }
.unlock { text-align: center; font-weight: 800; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 8px; }
.unlock.done { color: var(--accent); border-color: var(--gold-line); }
.feed li.skill, .feed li.skilled { color: var(--accent); }
.toggle-row.disabled { opacity: .5; }

.upgrade-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.upgrade { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--panel-2); display: grid; gap: 6px; }
.upgrade.mine { border-color: var(--accent); }
.upgrade-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.upgrade-head .votes { margin-left: auto; color: var(--accent); font-weight: 800; }
.upgrade-cost { display: flex; gap: 10px; flex-wrap: wrap; font-size: .85em; }
.upgrade-cost .short { color: var(--bad); }
.upgrade button { justify-self: start; padding: .35em .9em; font-size: .9em; }

.shift { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(0, 0, 0, .15); display: grid; gap: 6px; }
.shift .bar > span { transition: width 1s linear; }