/* Fábrica Infinita — game styles on the Lab shell. Accent: industrial amber #f59e0b. */

/* Override the Lab's shared --accent (purple) so the "?" help button + modal
   (both styled via var(--accent) in lab.css) pick up this toy's own color. */
:root { --accent: #f59e0b; }

.fabrica-intro { text-align: center; margin: 0 auto 1.6rem; max-width: 720px; }
.fabrica-intro__title { font-family: 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .45rem; }
.fabrica-intro__lead { color: var(--text-muted, #94a3b8); font-size: 1.02rem; margin: 0; }
.fabrica-nojs { color: var(--text-muted, #94a3b8); padding: 1rem; }

#fabrica-mount { text-align: left; }

.fi-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.fi-counter { font: 600 .82rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted, #94a3b8); }
.fi-counter b { color: #f59e0b; }
.fi-actions { display: flex; gap: .45rem; }

.fi-btn { display: inline-flex; align-items: center; gap: .38rem; cursor: pointer; border-radius: 999px;
  font: 600 .8rem 'Inter', sans-serif; padding: .42rem .85rem; border: 1px solid rgba(148,163,184,.25);
  background: transparent; color: inherit; transition: border-color .15s; }
.fi-btn:hover { border-color: #f59e0b; }

/* bench: [A] + [B] = [result] */
.fi-bench { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  padding: 1rem .6rem; border: 1px dashed rgba(148,163,184,.3); border-radius: 12px; margin-bottom: .9rem; }
.fi-op { font: 800 1.3rem 'Poppins', sans-serif; color: var(--text-muted, #94a3b8); }
.fi-slot { min-width: 128px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; padding: .5rem .8rem; cursor: pointer; border-radius: 12px;
  border: 2px dashed rgba(148,163,184,.35); background: transparent; color: inherit;
  font: 600 .95rem 'Inter', sans-serif; transition: border-color .15s, background .15s; }
.fi-slot.is-filled { border-style: solid; border-color: #f59e0b; background: rgba(245,158,11,.07); }
.fi-slot__empty { color: var(--text-muted, #94a3b8); font: 800 1.1rem 'Poppins', sans-serif; }
.fi-result { min-width: 128px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; padding: .5rem .8rem; border-radius: 12px; border: 2px solid transparent;
  font: 700 .95rem 'Inter', sans-serif; }
.fi-result.is-pop { animation: fi-pop .4s ease; border-color: rgba(148,163,184,.35); }
.fi-result.is-gold { border-color: #f59e0b; background: rgba(245,158,11,.1); }
@keyframes fi-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

.fi-chip__e { font-size: 1.15em; line-height: 1; }
.fi-chip__n { line-height: 1.2; }

/* toast */
.fi-toast { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .9rem;
  font: 600 .85rem 'Inter', sans-serif; border-radius: 10px; padding: .6rem .85rem;
  border: 1px solid rgba(148,163,184,.3); animation: fi-in .3s ease both; }
.fi-toast__tag { font: 700 .64rem ui-monospace, monospace; letter-spacing: .14em; padding: .16rem .5rem;
  border-radius: 999px; border: 1px solid currentColor; }
.fi-toast.is-gold { border-color: rgba(245,158,11,.6); background: rgba(245,158,11,.08); color: #f59e0b; }
.fi-toast.is-new { border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.07); color: #60a5fa; }
.fi-toast.is-known { color: var(--text-muted, #94a3b8); }
.fi-toast__n, .fi-toast__extra { color: var(--text, inherit); }
.fi-toast__extra { font-weight: 400; }
.fi-toast__link { color: inherit; font-weight: 700; }
@keyframes fi-in { from { opacity: 0; transform: translateY(-4px); } }

.fi-hint { margin: 0 0 .8rem; font-size: .85rem; color: var(--text-muted, #94a3b8); }
.fi-hint b { color: #f59e0b; }

.fi-searchwrap { margin-bottom: .6rem; }
.fi-search { width: 100%; box-sizing: border-box; font: 500 .9rem 'Inter', sans-serif; color: inherit;
  background: transparent; border: 1px solid rgba(148,163,184,.3); border-radius: 10px; padding: .5rem .75rem; }
.fi-search:focus { outline: none; border-color: #f59e0b; }

/* collection grid */
.fi-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.fi-chip { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; border-radius: 999px;
  font: 600 .88rem 'Inter', sans-serif; padding: .4rem .8rem;
  border: 1px solid rgba(148,163,184,.3); background: transparent; color: inherit;
  transition: border-color .15s, transform .12s; }
.fi-chip:hover { border-color: #f59e0b; transform: translateY(-1px); }
.fi-chip.is-gold { border-color: rgba(245,158,11,.55); }
.fi-chip.is-picked { transform: scale(.94); border-color: #f59e0b; }

@media (max-width: 560px) {
  .fi-bench { gap: .4rem; }
  .fi-slot, .fi-result { min-width: 104px; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-result.is-pop, .fi-toast { animation: none !important; }
  .fi-chip, .fi-chip.is-picked { transform: none !important; }
}