:root {
  --wood: #2f9e5b;
  --fire: #e0533d;
  --earth: #c08a1e;
  --metal: #7d8796;
  --water: #2f63c9;
}
@media (prefers-color-scheme: dark) {
  :root { --wood: #4cc27f; --fire: #ff7a62; --earth: #e2ad45; --metal: #a9b3c2; --water: #6b9bff; }
}
.e0 { --ec: var(--wood); } .e1 { --ec: var(--fire); } .e2 { --ec: var(--earth); }
.e3 { --ec: var(--metal); } .e4 { --ec: var(--water); }

.seg { display: flex; gap: 6px; }
.seg label {
  flex: 1; margin: 0; text-align: center; padding: 9px 0; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: .95rem;
}
.seg input { display: none; }
.seg input:checked + span { font-weight: 700; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.row3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: .9rem; }
.check input { width: auto; }
details.opts { margin-top: 12px; font-size: .9rem; }
details.opts summary { margin-top: 0; }

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.pillars .head { font-size: .8rem; color: var(--muted); }
.pillars .god { font-size: .75rem; color: var(--muted); min-height: 1.2em; }
.pillars .ch {
  font-size: 1.9rem; font-weight: 700; padding: 6px 0 2px; border-radius: 10px;
  color: var(--ec); background: color-mix(in srgb, var(--ec) 12%, transparent);
}
.pillars .ch small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); padding-bottom: 4px; }
.pillars .empty { color: var(--muted); font-size: 1rem; padding: 18px 0; border: 1px dashed var(--line); border-radius: 10px; }
.pillars .me { outline: 2px solid var(--accent); outline-offset: 2px; }

.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 8px; font-size: .9rem; }
.bar .track { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.bar .fill { height: 100%; background: var(--ec); border-radius: 6px; }
.bar b { color: var(--ec); }

.hero { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.hero .emoji { font-size: 2.6rem; }
.hero h2 { margin: 0; font-size: 1.25rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tags span { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.section-title { font-size: 1.05rem; margin: 0 0 8px; }
.card p { margin: 6px 0; }
.stars { color: #f0a500; letter-spacing: 2px; }
.share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share button { margin-top: 0; }
.share button.secondary { background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
.notice { font-size: .85rem; color: var(--fire); }
.score { font-size: 2.6rem; font-weight: 800; color: var(--accent); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .vs { grid-template-columns: 1fr; } }