:root{
  --bg: #0b0f14;
  --panel: #121821;
  --panel-2:#0e141c;
  --fg: #e7edf5;
  --muted: #8ea0b1;
  --accent: #3aa0ff;
  --accent-2:#1e88e5;
  --danger:#e45252;
  --ok:#31c27d;
  --amber:#ffca28;
  --border: rgba(255,255,255,.12);
  --chip: rgba(255,255,255,.06);
  --chip-border: rgba(255,255,255,.18);
  --radius: 14px;
  --shadow: 0 14px 36px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Layout wrappers */
.wrap, .container{ max-width:1240px; margin:0 auto; padding:18px; }
footer{ margin-top:24px; color:var(--muted); }

/* Hero / header */
.hero{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); padding: 16px; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero h1{ margin: 0 0 8px 0; font-size: 2rem; letter-spacing:.3px }
.subtitle{ color: var(--muted); margin: 6px 0 12px; }
.badge{ background:#0e1620; color:#cde4ff; border:1px solid var(--chip-border); border-radius:10px; padding:.15rem .45rem; font-weight:700; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:.65rem 1rem; background:var(--accent-2); border:1px solid var(--accent-2); color:#08121a; font-weight:800; border-radius:12px; cursor:pointer; text-decoration:none; }
.btn.secondary{ background:#0f1722; border-color:var(--border); color:#cde4ff; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.game-controls{ display:flex; flex-wrap:wrap; gap:10px; margin: 8px 0 14px; }

/* Panels & grid */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:14px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:10px 0; }

/* Inputs */
.input, input[type="text"], input[type="search"], select, .num{
  width:100%;
  background:#0f1722;
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.6rem .7rem;
}
.num{ width:120px; }
.slot-label{ color:var(--muted); font-weight:700; letter-spacing:.2px; display:block; margin:6px 0 4px; }
.input-wrap{ position:relative; }
.suggestions{
  position:absolute; left:0; right:0; top: calc(100% + 4px);
  background:#0c131c; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  display:none; max-height:280px; overflow:auto; z-index:7;
}
.sugg-item{ padding:.45rem .6rem; cursor:pointer; }
.sugg-item:hover{ background:#0f1722; }

/* Result & chain list (explorer + tutorial) */
.result .error, .error{ padding:.7rem .8rem; border:1px solid #e57373; background:#2b0d0d; border-radius:10px; }
.result .success, .success{ padding:.7rem .8rem; border:1px solid #2d9f69; background:#0e231a; border-radius:10px; }
.warning{ padding:.7rem .8rem; border:1px solid var(--amber); background:#2a210a; border-radius:10px; }

.chains{ display:grid; gap:10px; margin:10px 0; }
.chain{ background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px; }
.row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.chip{ background:var(--chip); border:1px solid var(--chip-border); border-radius: 999px; padding:.4rem .6rem; font-weight:800; }
.chip.muted{ color:var(--muted); }
.arrow{ color:#9db4c3; }

/* Drag/drop compatible elements (for DnD page reuse) */
.board{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.slot{ background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px; min-height:110px; display:flex; flex-direction:column; gap:8px; justify-content:center; }
.slot.locked{ border-color: rgba(255,255,255,.22); }
.label{ font-size:.75rem; font-weight:900; color:#0b0f14; background:#cde4ff; align-self:flex-start; padding:.15rem .55rem; border-radius:8px; }
.content{ display:flex; align-items:center; justify-content:center; min-height:72px; padding-top:4px; }
.name{ font-weight:900; color:#dfe7f0; text-align:center; overflow-wrap:anywhere; }
.dropzone{
  width:100%; min-height:72px;
  border:2px dashed #2f3c4d; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; background:#0f1722; color:#9db4c3;
  transition: border-color .15s ease, background .15s ease, transform .12s ease, min-height .12s ease;
}
.dropzone.filled{ background:#0d1b2b; border-color:#2d9f69; color:#cfeadf; }
.dropzone.correct{ background:#0e231a !important; border-color:#2d9f69 !important; color:#bff2d6; }
.dropzone.close{ background:#2a210a !important; border-color:#ffca28 !important; color:#ffe082; }
.dropzone.incorrect{ background:#2b0d0d !important; border-color:#e57373 !important; color:#ffcdd2; }

/* Utility */
.center{ text-align:center; }
.hidden{ display:none !important; }
code{ background:#0e1620; border:1px solid var(--chip-border); border-radius:8px; padding:.1rem .35rem; }