:root{
  --bg:#0b1222; --panel:#0f1732; --ink:#e5e9f5; --muted:#9aa3b2; --ring:#283155;
  --ok-bg:#144429; --warn-bg:#4a3b13; --bad-bg:#0f1938;
  --btn:#131b3a; --btn-ink:#eef2ff; --btn-border:#2c3764;
  --btn-primary:#22306a; --btn-danger:#3a1a22;

  /* --- PATCH: reserve scroll space for the fixed Lab --- */
  --lab-safe: 180px; /* adjust if your Lab height changes on desktop */
}
*{box-sizing:border-box}
body{
    margin:0;
    background-color: var(--bg);
    color:var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    animation: bg-pan 20s linear infinite;
    background-image: linear-gradient(315deg, #0b1222 0%, #1a2347 74%);
    background-size: 400% 400%;
}

@keyframes bg-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.wrap{max-width:1100px;margin:18px auto;padding:0 12px 300px}
.hdr{
  display:flex;justify-content:space-between;align-items:center;padding:10px 12px;
  background:rgba(14, 21, 51, 0.7); border-bottom:1px solid var(--ring);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 100;
}

/* ——— EleMixer wordmark (gradient text) ——— */
.brand-only h1{
  margin:0;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;

  /* fallback color */
  color:#e5e9f5;

  /* gradient */
  background: linear-gradient(90deg, #7dd3fc, #c084fc, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}
.brand-only .tag{color:#9aa3b2;font-size:13px}
.hdr-actions{display:flex;gap:8px}

.pill{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:40px;padding:0 12px;border-radius:12px;background:var(--btn);
  color:var(--btn-ink);border:1px solid var(--btn-border); transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.pill:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(44, 55, 100, 0.4); }
.pill.primary{background:var(--btn-primary)}
.pill.danger{background:var(--btn-danger)}
.pill[disabled]{opacity:.5;cursor:not-allowed}

.topbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{padding:6px 10px;border-radius:12px;background:rgba(20, 29, 59, 0.8);}

.theme{
  text-align:center;margin:10px auto 12px;padding:18px;background: linear-gradient(145deg, #1a2347, #0f1732);
  border-radius:16px;max-width:820px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.theme .title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9d4ff;font-weight:800}
.theme .subtitle{font-size:26px;font-weight:900;color:#fff}
.theme .tagline{font-size:12px;color:#aab3cc}

/* --- PATCH APPLIED HERE: add padding-bottom to keep last card above the Lab --- */
.board{
  display:grid;
  gap:14px;
  padding-bottom: calc(var(--lab-safe) + env(safe-area-inset-bottom));
}

.card{
  padding:14px;border-radius:16px;background: linear-gradient(145deg, #1a2347, #0f1732);
  border:1px solid var(--ring); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card .q{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.card .q .left { display:flex; align-items:center; gap:8px; }
.grid{display:flex;gap:10px;flex-wrap:wrap}
.slot{width:120px;height:80px;background:#0c1328;border:1px dashed #2b355f;border-radius:12px;display:grid;place-items:center}
.tile{
  width:100%;height:100%;background:#161f41;border-radius:12px;display:grid;place-items:center;
  position:relative;border:1px solid var(--btn-border);transition: all .2s ease; user-select: none;
}
.tile:hover { transform: scale(1.05); }
.tile .sym{font-weight:800;font-size:22px}
.tile .name{font-size:12px}
.tile .xbtn{position:absolute;right:6px;top:6px;background:transparent;border:none;color:#e7edff;font-size:16px;cursor:pointer;opacity:.85}

.tile .icon, .tile .icon-fallback {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  display: block;
  object-fit: contain;
  text-align: center;
  pointer-events: none;
}
.tile .icon svg { width: 100%; height: 100%; }
.solved-icon svg {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

.ok .tile{background:var(--ok-bg);border-color:#1f7a3c}
.present .tile{background:var(--warn-bg);border-color:#7a5a15}
.bad .tile{background:var(--bad-bg);border-color:#2d364f}

.lab-dock{
  position:fixed;left:0;right:0;bottom:0;background:rgba(15, 23, 50, 0.8);
  border-top:1px solid var(--ring);box-shadow:0 -8px 24px rgba(0,0,0,.35);
  padding:10px 12px;transition:transform .25s ease;z-index:50;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lab-dock.hide{transform:translateY(100%)}
.lab-row{display:flex;gap:10px;align-items:center;flex-direction:column}
.pool{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;width:100%}
.pool .tile{flex:1 1 calc(33.33% - 8px);height:66px}
.controls{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;width:100%}
.meter-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.meter{flex:1;height:10px;border-radius:8px;background:#0d1328;border:1px solid var(--ring);position:relative;overflow:hidden}
.meter span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#80eec0,#6dd3ff);width:100%}
.tries{color:#9aa3b2}
.lab-handle{position:fixed;left:12px;bottom:12px;z-index:51;display:none;background:#18224a;color:#fff;padding:8px 12px;border-radius:999px;border:1px solid var(--ring)}
.lab-dock.hide + .lab-handle{display:block}

@media (max-width: 540px){
  /* --- PATCH: increase reserved space for taller mobile Lab --- */
  :root{ --lab-safe: 240px; }

  .slot{width:104px;height:72px}
  .tile .sym{font-size:20px}
  .tile .name{font-size:11px}
  .pool .tile{flex:1 1 calc(33.33% - 8px);height:64px}
  .controls{grid-template-columns:repeat(2, 1fr)}
  .wrap{padding-bottom:340px}
}

.modal{
  border:none;border-radius:16px;max-width:760px;width:min(96vw,760px);padding:18px;
  background: linear-gradient(145deg, #1a2347, #0f1732); color:#e5e9f5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3); animation: slide-up 0.3s ease-out;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

@keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.how .row{display:grid;grid-template-columns:140px 1fr;gap:12px;margin:10px 0}
.how .lbl{color:#9aa3b2}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;background:#1a2246;border:1px solid var(--ring);font-size:12px}
.badge.ok{background:#0f2a1b;border-color:#16492a;color:#bbf7d0}
.badge.warn{background:#2a210f;border-color:#5b4312;color:#fde68a}
.actions-right{display:flex;justify-content:flex-end;margin-top:12px}

.stats-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.stat-item { display: flex; align-items: center; background-color: rgba(11, 18, 34, 0.6); padding: 12px; border-radius: 12px; }
.stat-icon { font-size: 24px; margin-right: 12px; }
.stat-label { color: var(--muted); }
.stat-value { font-weight: 700; font-size: 20px; margin-left: auto; }

.inline-hint {
    padding: 8px 12px;
    background: rgba(40, 49, 85, 0.5);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
    color: #c9d4ff;
}

.pool-message {
    width: 100%;
    text-align: center;
    color: var(--muted);
    padding: 20px 0;
}

/* --- Stack counters (Option A) --- */
.stack-slot {
  min-width: 120px;
  height: 84px;
  background:#0c1328;
  border:1px dashed #2b355f;
  border-radius:12px;
  padding:8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.stack-slot .stack-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.stack-slot .sym {
  font-weight:800;
  font-size:22px;
}

.badge.count {
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--ring);
  background:#1a2246;
  color:#c9d4ff;
}

.stack-slot.ok {
  background: var(--ok-bg);
  border-color:#1f7a3c;
}

.stack-slot.bad {
  background: var(--bad-bg);
  border-color:#2d364f;
}

.stack-slot.shake {
  animation: slot-shake 0.18s linear;
}
@keyframes slot-shake {
  0% { transform: translateX(0) }
  25% { transform: translateX(-4px) }
  50% { transform: translateX(4px) }
  75% { transform: translateX(-2px) }
  100% { transform: translateX(0) }
}

/* --- Responsive adjustments for stack slots --- */
@media (max-width: 540px) {
  .stack-slot {
    min-width: 100px;
    height: 72px;
    padding: 6px;
  }
  .stack-slot .sym {
    font-size: 18px;
  }
  .badge.count {
    font-size: 11px;
    padding: 2px 6px;
  }
}

/* --- Sym + count inline row (used on placed tiles) --- */
.tile .symrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
}

/* Keep the count badge top-right in the Lab, but inline in slots */
.tile:not(.in-slot) .badge.count{
  position:absolute;
  top:6px;
  right:6px;
}
.tile.in-slot .badge.count{
  position:static;
  margin-left:4px;
}