/* ====== assets/wpmmg.css (v1.8 – clean & placevalue pv-*) ====== */
.wpmmg{
  --ring: 0 0 0 4px rgba(147,197,253,.25);
  --bd:#e5e7eb; --bg:#fff; --muted:#fafafa; --fg:#111827;
  --pri:#4f46e5; --pri-600:#4338ca; --pri-50:#eef2ff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  border:1px solid var(--bd); border-radius:16px; padding:16px; margin:16px auto; background:var(--bg);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  width:min(100%, 980px);
}

/* Header */
.wpmmg header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.wpmmg .title{font-weight:800;font-size:20px;color:var(--fg)}
.wpmmg .meta{font-size:12px;opacity:.7}

/* 2 cột */
.wpmmg .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
@media (max-width: 960px){
  .wpmmg .layout{grid-template-columns:1fr}
  .wpmmg .pane-right{order:-1}
}
.wpmmg .pane-left{padding-left:14px}
.wpmmg .pane-right{border:1px solid var(--bd);border-radius:14px;padding:14px;background:var(--muted)}
.wpmmg .sb-title{font-weight:700;margin-bottom:8px}
.wpmmg .sb-item{display:flex;justify-content:space-between;align-items:center;border:1px dashed var(--bd);border-radius:12px;padding:10px;margin-bottom:8px;background:#fff}
.wpmmg .time,.wpmmg .pts,.wpmmg .best{font-weight:800}

/* Switch iOS (Phạt sai) */
.wpmmg .sb-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.wpmmg .switch{position:relative;display:inline-flex;align-items:center;gap:8px}
.wpmmg .switch input{opacity:0;inline-size:0;block-size:0;position:absolute}
.wpmmg .switch .slider{
  inline-size:46px; block-size:26px; background:#e5e7eb; border-radius:999px; position:relative;
  transition:.2s; border:1px solid #d1d5db;
}
.wpmmg .switch .slider::after{
  content:""; position:absolute; inline-size:20px; block-size:20px; background:#fff; border-radius:999px;
  top:2px; left:2px; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:.2s;
}
.wpmmg .switch input:checked + .slider{background:var(--pri);border-color:var(--pri)}
.wpmmg .switch input:checked + .slider::after{transform:translateX(18px)}

/* Timer dropdown */
.wpmmg .sb-select select{
  appearance:none; border:1px solid var(--bd); border-radius:10px; padding:6px 10px;
  background:#fff; font-weight:600; color:#111827; min-width:130px; cursor:pointer;
}
.wpmmg .sb-select select:focus{outline:none; box-shadow:var(--ring); border-color:#93c5fd}

/* Buttons */
.wpmmg .btn{appearance:none;border:1px solid var(--bd);border-radius:12px;padding:10px 14px;cursor:pointer;
  background:#f8fafc;color:#111827;transition:.2s;font-weight:600}
.wpmmg .btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.wpmmg .btn:active{transform:translateY(0)}
.wpmmg .btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.wpmmg .btn.primary:hover{background:var(--pri-600);border-color:var(--pri-600)}
.wpmmg .btn.ghost{background:#fff}
.wpmmg .btn.toggle{border-radius:999px;padding:8px 12px}
.wpmmg .btn.toggle.active{background:var(--pri-50);border-color:#c7d2fe;color:#3730a3}

/* Cụm nút/hiển thị kết quả */
.wpmmg .actions{justify-content:center}

/* Khu trái */
.wpmmg .screen{min-height:160px}
.wpmmg .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wpmmg .stack{display:flex;flex-direction:column;gap:12px}
.wpmmg .card{border:1px solid var(--bd);border-radius:14px;padding:18px;background:#fff}

/* Prompt & Answer */
.wpmmg .prompt{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:.3px;margin-bottom:8px}
.wpmmg .answer{
  padding:12px 14px;border:2px solid var(--bd);border-radius:12px;
  inline-size:clamp(220px, 50%, 480px); font-size:18px; outline:none; background:#fff; box-shadow:none;
}
.wpmmg .answer:focus{border-color:#93c5fd;box-shadow:var(--ring)}
.wpmmg .pill{border:1px solid var(--bd);border-radius:999px;padding:6px 10px}
.wpmmg .ok{background:#ecfdf5;border-color:#a7f3d0}
.wpmmg .bad{background:#fef2f2;border-color:#fecaca}
.wpmmg .hidden{display:none}

/* Bộ chọn phép tính, bảng cửu chương & ẩn đề sau ... */
.wpmmg .ops{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wpmmg .ops label{font-weight:700;margin-right:4px}
.wpmmg .tables{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.wpmmg .tables .chip{border:1px solid var(--bd);border-radius:999px;padding:6px 10px;cursor:pointer;background:#fff}
.wpmmg .tables .chip.active{background:var(--pri-50);border-color:#c7d2fe;color:#3730a3}
.wpmmg .memo{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wpmmg .memo label{font-weight:700;margin-right:4px}

/* Bong bóng “Cố lên!” khi ẩn đề */
.wpmmg .mask-bubble{
  display:inline-flex;align-items:center;gap:8px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;
  padding:8px 14px;font-size:22px;font-weight:800;color:#374151
}
.wpmmg .mask-bubble .emoji{font-size:24px}

/* --- Find Number grid --- */
.wpmmg .num-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap:10px;
  margin-top:8px;
}
.wpmmg .num-dot{
  display:flex; align-items:center; justify-content:center;
  inline-size:58px; block-size:58px; border-radius:9999px;
  border:1px solid var(--bd); background:#fff; font-weight:700; cursor:pointer;
  transition:.15s;
}
.wpmmg .num-dot:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.06); }

/* --- ABC grid for picklargest --- */
.wpmmg .abc-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin:10px 0 6px;
}
.wpmmg .abc-item{ border:1px solid var(--bd); border-radius:14px; background:#fff; padding:12px; text-align:center; }
.wpmmg .abc-item .letter{ font-weight:800; font-size:14px; opacity:.7; }
.wpmmg .abc-item .num{ font-weight:800; font-size:22px; margin-top:6px; }

/* === Place Value (pv- layout giống giao diện cũ) === */
.wpmmg .pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.wpmmg .pv-left{padding:6px 8px}
.wpmmg .pv-right .pv-target{
  height:180px;border-radius:28px;background:#edf1f5;
  display:flex;align-items:center;justify-content:center
}
.wpmmg .pv-tags{display:flex;gap:12px;margin:2px 0 8px}
.wpmmg .pv-tag{
  padding:8px 12px;border:1px solid var(--bd);
  border-radius:12px;background:#fff;font-weight:700
}
.wpmmg .pv-slots{display:flex;gap:12px;margin-bottom:10px}
.wpmmg .pv-slot{display:flex;flex-direction:column;align-items:center;gap:6px}
.wpmmg .pv-box{
  width:86px;height:56px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--bd);border-radius:12px;background:#fff;
  font-weight:800;font-size:20px
}
.wpmmg .pv-pieces{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 6px}
.wpmmg .pv-piece{
  user-select:none;cursor:grab;padding:8px 14px;background:#fff;
  border:1px solid var(--bd);border-radius:12px;font-weight:700
}
.wpmmg .pv-piece.sel{outline:2px solid #6366f1}
.wpmmg .pv-piece.used{opacity:.45;cursor:default}


/* Tăng kích cỡ số đề bài ở khối bên phải */
.wpmmg .pv-right .pv-target .big{
  font-size:64px;        /* trước đây nhỏ quá */
  font-weight:900;
  color:#374151;
}


/* Number Bonds – vòng tròn cho ô trống và input dạng pill */
.wpmmg .prompt-eq{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wpmmg .nb-hole{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:56px; block-size:56px; border-radius:9999px;
  background:#fff; border:2px dashed var(--bd);
  font-weight:800; font-size:22px; color:#9ca3af; /* màu xám nhạt cho dấu ? */
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.wpmmg .pill-input{
  border-radius:9999px; height:46px; padding-inline:16px;
  font-size:16px; inline-size:clamp(220px,40%,360px);
}


/* ====== Launcher Grid (compact) ====== */
.wpmmg-grid { gap: 12px; }

.wpmmg-grid .game-card{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--bd); border-radius:12px;
  padding:10px; min-height:72px; background:#fff;
  cursor:pointer; transition:.15s;
}
.wpmmg-grid .game-card:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.06); }
.wpmmg-grid .game-card.active{ outline:2px solid var(--pri); box-shadow:0 0 0 4px rgba(79,70,229,.08); }

.wpmmg-grid .emoji-icon{ font-size:22px; line-height:1; }
.wpmmg-grid .game-icon{ width:40px; height:40px; object-fit:contain; display:block; }
.wpmmg-grid .game-title{ font-weight:700; font-size:14px; }

/* Biến thể compact: nhỏ hơn nữa */
.wpmmg-grid.compact .game-card{ padding:8px; gap:8px; min-height:60px; }
.wpmmg-grid.compact .emoji-icon{ font-size:18px; }
.wpmmg-grid.compact .game-icon{ width:32px; height:32px; }
.wpmmg-grid.compact .game-title{ font-size:13px; }


/* ===== Skipcount sequence ===== */
.wpmmg .seq-wrap{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.wpmmg .seq-item{
  font-weight:800; font-size:36px; letter-spacing:.5px; color:#111827;
}
.wpmmg .seq-comma{
  font-size:28px; opacity:.35;
}

/* Hộp trống giống input – đẹp, hiện đại */
.wpmmg .seq-missing{
  min-width:64px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--bd); border-radius:12px; background:#fff;
  box-shadow: inset 0 0 0 3px #f9fafb;
}
.wpmmg .seq-missing::after{
  content:"?"; font-weight:800; font-size:22px; color:#9ca3af;
}