: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;

  /* reserve scroll space for the fixed Lab */
  --lab-safe: 180px; /* desktop; mobile override below */
}

/* base */
*{ 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 ——— */
.brand-only h1{
  margin:0;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color:#e5e9f5;
  background: linear-gradient(90deg, #7dd3fc, #c084fc, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-only .tag{color:#9aa3b2;font-size:13px}
.hdr-actions{display:flex;gap:8px}

/* buttons */
.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}

/* top chips */
.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 banner */
.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}

/* board + cards */
.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}

/* slots */
.slot{width:120px;height:80px;background:#0c1328;border:1px dashed #2b355f;border-radius:12px;display:grid;place-items:center}

/* tiles */
.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;
}

/* feedback colors */
.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 */
.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}

/* mobile tweaks */
@media (max-width: 540px){
  :root{ --lab-safe: 240px; } /* taller lab on phones */
  .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}
}

/* --------- MODALS ---------- */
/* Let showModal() use the browser's Top Layer; no position override here. */
.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;
  z-index: 200; /* harmless for top-layer modals; helps for fallback */
}
.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; }
}

/* Fallback for browsers without dialog top layer (older Safari) */
.modal.open-fallback {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* must sit above drawer/scrim */
}

/* how-to text */
.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 */
.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 */
.inline-hint {
  padding: 8px 12px;
  background: rgba(40, 49, 85, 0.5);
  border-radius: 8px;
  margin-top: 8px;
  font-size: 14px;
  color: #c9d4ff;
}

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

/* stack-slot counters */
.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) }
}
/* mobile sizing 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 when in slot */
.tile .symrow{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
}
/* keep count badge top-right in Lab, 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; }

/* ===== Drawer (slide-in menu) ===== */
.drawer{
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100dvh;
  background: rgba(15, 23, 50, 0.98);
  border-left: 1px solid var(--ring);
  box-shadow: -12px 0 28px rgba(0,0,0,0.45);
  transition: right .30s ease;
  z-index: 150; /* panel sits above page, below fallback modal */
}

/* --- LAYERING FIX: put scrim under the panel content inside the drawer --- */
.drawer::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;          /* off until open */
  transition: opacity .30s ease;
  z-index: 0;                    /* scrim layer */
}
.drawer.open{ right: 0; }
.drawer.open::before{ opacity:1; pointer-events:auto; }

/* ensure panel content is above the scrim */
.drawer-content{
  position: relative;
  z-index: 1;                    /* panel layer (clickable) */
  display:flex; flex-direction:column; gap:16px;
  padding:16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  max-height:100%;
  overflow-y:auto;
}
.close-btn{
  all:unset; align-self:flex-end; cursor:pointer; color:var(--ink);
  font-size:26px; line-height:1; padding:8px 10px; border-radius:10px;
}
.close-btn:hover{ background: rgba(255,255,255,0.06); }
.close-btn:focus-visible{ outline:2px solid var(--btn-border); outline-offset:2px; }

.drawer-item{
  all:unset;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  color:var(--ink);
  font-weight:700;
  min-height:44px;
}
.drawer-item:hover{ background: rgba(255,255,255,0.06); transform: translateX(2px); }
.drawer-item:active{ transform: translateX(1px) scale(0.99); }
.drawer-item:focus-visible{ outline:2px solid var(--btn-border); outline-offset:2px; }
.drawer-item svg, .drawer-item img{ flex:0 0 24px; }

@media (prefers-reduced-motion: reduce){
  .drawer, .drawer::before { transition:none; }
  .drawer-item:hover, .drawer-item:active { transform:none; }
}
@media (max-width: 540px){
  .drawer{ width:84vw; right:-84vw; }
  .drawer-item{ padding:14px 16px; }
}

/* ------- GLOBAL PATCHES ------- */
/* Lock background scroll when drawer open */
body.no-scroll { overflow: hidden; }

/* Fallback modal already defined above (.modal.open-fallback) */