:root{--bg:#0b0f12;--panel:#0f1720;--muted:#94a3b8;--accent:#7c3aed;--accent-2:#06b6d4;--glass: rgba(255,255,255,.04);--card-shadow: 0 6px 18px rgba(2,6,23,.7);--radius: 12.6px;--focus: 3.15px;--success: #16a34a;--danger: #ef4444;--max-width: 1100px;--gap: 16.8px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color-scheme:dark;overflow-y:hidden}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%;background:linear-gradient(180deg,var(--bg),#050607);margin:0;padding:0}.game{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:33.6px;gap:var(--gap)}.container{width:100%;max-width:var(--max-width);display:flex;flex-direction:column;gap:var(--gap)}.controls{width:100%;display:flex;gap:12.6px;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);padding:14.7px;border-radius:calc(var(--radius) - 4px);border:1px solid rgba(255,255,255,.03);box-shadow:var(--card-shadow)}.controls .searchable-dropdown{flex:1 1 60%;max-width:70%;position:relative}.controls .searchable-dropdown-input{width:100%;padding:10.5px 12.6px;background:var(--panel);border:1px solid rgba(255,255,255,.04);color:var(--muted);border-radius:10.5px;font-size:14.7px;outline:none;transition:all .14s ease;box-shadow:0 2.1px 8.4px #0009 inset}.controls .searchable-dropdown-input::placeholder{color:#94a3b880}.controls .searchable-dropdown-input:focus{border-color:#7c3aede6;box-shadow:0 0 0 var(--focus) #7c3aed1f;color:#e6eef8}.controls .score-badge{min-width:126px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#ffffff05,#ffffff03);padding:8.4px 12.6px;border-radius:10.5px;border:1px solid rgba(255,255,255,.03);color:var(--muted);font-weight:600;letter-spacing:.21px}.card{width:100%;max-width:var(--max-width);background:linear-gradient(180deg,#ffffff05,#ffffff03);border-radius:var(--radius);padding:21px;border:1px solid rgba(255,255,255,.04);box-shadow:var(--card-shadow);display:grid;grid-template-columns:1fr 273px;grid-template-areas:"reactants arrow" "productsfield productsfield" "actions actions" "feedback feedback";gap:18.9px;align-items:start}@media (max-width:920px){.card{grid-template-columns:1fr;grid-template-areas:"reactants" "arrow" "productsfield" "actions" "feedback";padding:16.8px}.controls .searchable-dropdown{max-width:100%}}.reactants{grid-area:reactants;background:linear-gradient(180deg,rgba(255,255,255,.01),transparent);padding:16.8px;border-radius:10.5px;color:#e6eef8;font-weight:600;font-size:16.8px;border:1px solid rgba(255,255,255,.02);word-break:break-word}.arrow-select{grid-area:arrow;display:flex;gap:10.5px;justify-content:flex-end;align-items:center}#arrowbtn{background:var(--glass);color:var(--muted);padding:8.4px 12.6px;border-radius:10.5px;border:1px solid rgba(255,255,255,.03);cursor:pointer;font-weight:700;transition:all .12s ease;box-shadow:0 4.2px 10.5px #02061773}#arrowbtn:hover{transform:translateY(-2.1px);color:#fff;border-color:#7c3aede6;box-shadow:0 8.4px 21px #7c3aed14}#productsfield{grid-area:productsfield;width:100%;padding:12.6px;background:transparent;border:1px dashed rgba(255,255,255,.04);color:var(--muted);border-radius:8.4px;font-size:15.75px;outline:none}#productsfield:focus{border-style:solid;border-color:#06b6d41f;box-shadow:0 0 0 var(--focus) #06b6d40f;color:#fff}#productsfield::placeholder{color:#94a3b880}.card-actions{grid-area:actions;display:flex;gap:10.5px;justify-content:flex-end;align-items:center}.card-actions button{padding:10.5px 14.7px;border-radius:10.5px;background:linear-gradient(180deg,var(--accent),#5b21b6);color:#fff;border:none;cursor:pointer;font-weight:700;letter-spacing:.21px;transition:transform .12s ease,box-shadow .12s;box-shadow:0 8.4px 18.9px #7c3aed24}.card-actions button:hover{transform:translateY(-3.15px)}.card-actions button.secondary{background:transparent;border:1px solid rgba(255,255,255,.04);color:var(--muted);box-shadow:none}.card-actions button.secondary:hover{border-color:#ffffff0f;color:#fff}.dropdown-menu{position:absolute;left:0;top:calc(100% + 8.4px);z-index:40;width:100%;background:linear-gradient(180deg,#0b1220,#071019);border:1px solid rgba(255,255,255,.04);border-radius:10.5px;box-shadow:0 10.5px 31.5px #020617b3;max-height:336px;overflow:auto}.open{max-height:336px}.dropdown-menu .option{padding:10.5px 12.6px;color:var(--muted);cursor:pointer;transition:background .08s ease,color .08s}.dropdown-menu .option:hover{background:#7c3aed17;color:#fff}.dropdown-menu .no-results{padding:10.5px 12.6px;color:#94a3b899}.feedback{grid-area:feedback;padding:12px;border-radius:8px;font-weight:600;text-align:center;font-size:1.1rem}.feedback.success{background:#7c3aed1f;color:var(--accent);border:1px solid rgba(124,58,237,.12)}.feedback.warning{background:#ffffff14;color:#fff;border:1px solid rgba(255,255,255,.12)}.feedback.error{background:#ef444414;color:var(--danger);border:1px solid rgba(239,68,68,.06)}@media (max-width:920px){.card{grid-template-columns:1fr;padding:16.8px}.controls .searchable-dropdown{max-width:100%}}@media (max-width:600px){.controls{padding:10.5px;flex-direction:column;align-items:stretch}.controls .score-badge{align-self:flex-end;margin-top:6.3px}.card{padding:14.7px;gap:12.6px}.arrow-select{justify-content:flex-start}.card-actions{justify-content:space-between}.controls .searchable-dropdown-input{font-size:15.75px;padding:12.6px}}.title{font-size:3rem;font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:.5rem;text-align:center}.description{font-size:1.1rem;font-weight:400;color:var(--muted);margin-bottom:2rem;text-align:center}@media (max-width: 600px){.title{font-size:2.2rem}.description{font-size:1rem}*{max-height:100dvh;--bg:#0b0f12}}