/* Name Lab (index) */
.center { justify-content: center; text-align: center; }
.hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 40px 18px 30px;
  background: linear-gradient(180deg, rgba(10, 40, 20, .9), rgba(6, 20, 12, .95));
  border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; color: #eaf6ec;
}
.hero .lead { color: #b5cfbb; margin: 0 auto 20px; }
.hero .kicker { color: #8fe0a2; }
.hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero h1 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.hero h1 .hw { display: inline-flex; align-items: center; white-space: nowrap; }
.hero-tile { margin: 0 4px; }
.hero-tile .sym { font-size: 32px; }
.name-form { display: grid; gap: 14px; max-width: 560px; margin: 0 auto; }
.hero .big-input { background: rgba(0, 0, 0, .35); color: #fff; border-color: rgba(140, 220, 160, .3); }
.hero .btn.ghost { color: #eaf6ec; border-color: rgba(140, 220, 160, .35); }
.try { margin-top: 18px; }
.hero .chip { background: rgba(0, 0, 0, .3); color: #eaf6ec; border-color: rgba(140, 220, 160, .25); }
@media (max-width: 520px) {
  .hero { padding: 28px 14px 22px; }
  .hero-tile { --t: 50px !important; }
  .hero-tile .sym { font-size: 25px; }
}

#result { margin-top: 26px; }
.panel-head h2 { margin-bottom: 4px; }
.credits-card {
  position: relative; overflow: hidden; border-radius: 18px; min-height: 240px;
  background: #06130b; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 16px; margin-top: 14px; border: 1px solid rgba(140, 220, 160, .2);
}
.credits-words { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; align-items: center; }
.cw {
  font: inherit; background: none; border: 0; cursor: pointer; padding: 6px 4px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 4px; color: #f2f7f0;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.8rem); letter-spacing: .01em;
}
.cw:hover { background: rgba(255, 255, 255, .06); }
.cw .tile { --t: clamp(52px, 11vw, 78px) !important; margin: 0 2px; }
.cw .tile .sym { font-size: calc(var(--t) * .5); }
.cw.no-hl { opacity: .8; cursor: default; }
.credits-caption { position: relative; z-index: 1; margin: 18px 0 0; color: #a9c4ae; font-size: .95rem; text-align: center; min-height: 1.4em; }

.verdict-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.meter { position: relative; width: 110px; height: 110px; flex: 0 0 auto; }
.meter svg { transform: rotate(-90deg); }
.meter-bg { fill: none; stroke: var(--line); stroke-width: 12; }
.meter-fg { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .2, 1); }
.meter-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; }
.verdict-text { font-size: 1.1rem; }
.full-row { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; margin-top: 10px; }
.full-row .gap { width: 22px; }
@media (max-width: 520px) { .full-row .tile { --t: 46px !important; } .full-row .gap { width: 12px; } }

.persona { position: relative; overflow: hidden; }
.persona::before {
  content: ""; position: absolute; inset: -40% -40% auto auto; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--pc, var(--accent)), transparent 70%); opacity: .25; pointer-events: none;
}
.persona h2 { color: var(--pc, var(--accent)); }
.persona-tag { font-weight: 700; font-size: 1.05rem; }
.mix { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin: 14px 0 8px; background: var(--line); }
.mix span { height: 100%; transition: flex-grow .6s ease; }
.mix-legend { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--muted); }
.mix-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.formula-line { margin-top: 16px; color: var(--muted); }
.formula { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 1.1rem; word-break: break-word; }

.el-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.el-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; }
.el-card .tile { --t: 64px; }
.el-card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.el-card p { margin: 0; font-size: .9rem; color: var(--muted); }
.el-card .meta { font-size: .8rem; margin-top: 4px; }

.fact { text-align: left; }
.fact-tiles { display: flex; gap: 6px; margin-bottom: 10px; min-height: 52px; align-items: center; }
.fact-tiles .tile { --t: 52px; }
.loose-big { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 2px dashed var(--bad); color: var(--bad); border-radius: 4px; font-family: var(--font-display); font-size: 1.6rem; }
.cta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cta { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s; }
.cta:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--text); }
.cta-k { font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); }
@media (max-width: 820px) { .cta-row { grid-template-columns: 1fr; } }