/* Frankenballer's own parts. Everything else (colours, type, buttons, cards,
   tables) comes from site.css; the accent is data-feature="franken". */
[hidden] { display: none !important; }
:root { --bolt: #c99a12; }
@media (prefers-color-scheme: dark) { :root { --bolt: #e6c04a; } }

/* ---------- The slots: one card per body part ---------- */
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .slots { grid-template-columns: 1fr; } }
.slot { padding: 14px 16px 16px; }
.slot.filled { box-shadow: inset 2px 0 0 var(--accent); }
.slot h2 { font-size: 1rem; }
.slot .optional { margin-left: 6px; font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.slot .words { margin: 2px 0 12px; font-size: 0.8rem; color: var(--muted); }
.pick { display: flex; gap: 8px; }
.pick input { flex: 1; }
.chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chosen-name { flex: 1 1 100%; font-weight: 600; }
.chosen-name small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.chosen select { flex: 1; }
.remove { width: 34px; height: 34px; font-size: 1.1rem; line-height: 1; }
.slot-status { margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.slot-status:empty { display: none; }
.slot-status.error { color: var(--error); }
.slot .choices { margin: 8px 0 0; }
.slot .choices:empty { display: none; }
.slot .choices .btn { font-size: 0.8rem; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#build { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- The result: who you made ---------- */
.hero { position: relative; overflow: hidden; margin-top: 24px; padding: 20px 16px 24px; text-align: center; }
.hero .recipe { position: relative; font-size: 0.85rem; color: var(--muted); }
.hero .recipe:empty { display: none; }
.hero .made { font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.hero .who { margin: 2px 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.hero .about { color: var(--muted); font-size: 0.9rem; }

/* The jersey on its stage, with room around it for the arcs. */
.stage { position: relative; width: 240px; max-width: 100%; height: 150px; margin: 4px auto; }
.stage .jersey { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; transform: translate(-50%, -50%); }
.stage .arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arc { fill: none; stroke: var(--bolt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.arc.thin { stroke-width: 1; opacity: 0.6; }

/* Charging: the jersey is a grey "?" that shivers while the arcs crackle. */
.silhouette path { fill: var(--hover); stroke: var(--line-strong); }
.silhouette text { fill: var(--faint); }
.charging .stage .jersey { animation: shiver 0.12s infinite alternate; }
.charging .arcs { animation: flicker 0.18s infinite; }
@keyframes shiver { to { transform: translate(calc(-50% + 1px), calc(-50% - 0.5px)); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.35; } 60% { opacity: 0.9; } }

/* Reveal: a faint flash, the arcs spread and fade, the jersey pops in, the name rises. */
.flash { position: absolute; inset: 0; background: var(--bolt); opacity: 0; pointer-events: none; }
.reveal .flash { animation: flash 0.5s ease-out; }
.reveal .arcs { animation: burst 0.6s ease-out forwards; transform-origin: 50% 50%; }
.reveal .stage .jersey { animation: pop 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.reveal .made, .reveal .who, .reveal .about { animation: rise 0.45s ease-out both; }
.reveal .who { animation-delay: 0.1s; }
.reveal .about { animation-delay: 0.2s; }
@keyframes flash { 0% { opacity: 0.18; } 100% { opacity: 0; } }
@keyframes burst { 0% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Closest careers and the numbers ---------- */
.result-card { margin-top: 14px; }
.result-card .card-body h2 { font-size: 1rem; }
.how { margin-top: 4px; font-size: 0.8rem; color: var(--muted); }
table.data td.score { font-weight: 600; color: var(--accent); }
table.data tr.match { cursor: pointer; }
table.data tr.match:hover td { background: var(--hover); }
table.data tr.match.highlight:hover td { background: var(--accent-tint); }
details.numbers { border-top: 1px solid var(--line); }
details.numbers summary { padding: 10px 16px; cursor: pointer; font-size: 0.9rem; font-weight: 600; }