/* ============================================================
   WP Jigblock Puzzles v4.0 — Full CSS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700&display=swap');

.jigblock-app, .jigblock-app * { box-sizing: border-box; }
.jigblock-app button, .jigblock-app input, .jigblock-app select { font-family: inherit; }

/* ── TOKENS ─────────────────────────────── */
.jigblock-app {
  --bg:      #0a0b0f;
  --surface: #111218;
  --card:    #18191f;
  --card2:   #1e1f27;
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --jb-piece-gap: 6px;
  --text:    #ebebf0;
  --muted:   rgba(235,235,240,.4);
  --accent:  #f0a500;
  --accent2: #e8441a;
  --green:   #3ddc84;
  --blue:    #4a90e2;
  --red:     #e84a4a;
  --side:    96px;
  --rad:     22px;

  position: relative;
  display: grid;
  grid-template-columns: var(--side) minmax(0,1fr);
  width: 100%;
  height: var(--jigblock-height, 820px);
  min-height: 620px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: var(--rad);
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 0 0 1px var(--border2), 0 50px 100px rgba(0,0,0,.7);
  isolation: isolate;
}

/* ── SIDEBAR ─────────────────────────────── */
.jb-sidebar {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 6px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.jb-logo {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  font-size: 24px;
  box-shadow: 0 4px 18px rgba(240,165,0,.3);
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* ── USER CHIP (sidebar button) ─────────── */
.jb-user-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  background: rgba(255,255,255,.04);
  border-radius: 11px;
  cursor: pointer;
  transition: background .14s;
  margin-bottom: 4px;
}
.jb-user-chip:hover { background: rgba(240,165,0,.08); }
.jb-user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card2) center/cover no-repeat;
  border: 2px solid rgba(240,165,0,.3);
  font-size: 17px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.jb-user-name {
  font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
  max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jb-user-chip.is-logged .jb-user-name { color: var(--accent); }

/* ── LEVEL BOX ──────────────────────────── */
.jb-level-box {
  width: 100%;
  padding: 6px 5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jb-level-label {
  font-size: 8px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.jb-size-select-sidebar {
  width: 100%; height: 28px;
  border: 1px solid var(--border2); border-radius: 7px;
  background: var(--card2); color: var(--text);
  font-size: 11px; font-weight: 700;
  padding: 0 18px 0 6px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(255,255,255,.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}

/* ── Custom level dropdown ───────────────── */
.jb-level-box { position: relative; width: 100%; }
.jb-lvdd-btn {
  width: 100%; height: 28px;
  border: 1px solid var(--border2); border-radius: 7px;
  background: var(--card2); color: var(--text);
  font-size: 11px; font-weight: 700; font-family: inherit;
  padding: 0 22px 0 7px;
  cursor: pointer; outline: none;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  white-space: nowrap; overflow: hidden;
}
.jb-lvdd-btn:hover { border-color: var(--accent); }
.jb-lvdd-btn[aria-expanded="true"] { border-color: var(--accent); }
.jb-lvdd-label { overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.jb-lvdd-btn svg { flex-shrink: 0; }
.jb-lvdd-list {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 9px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  padding: 4px;
  margin: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  min-width: 110px;
  overscroll-behavior: contain;
}
.jb-lvdd-list[hidden] { display: none; }
.jb-lvdd-item {
  padding: 6px 10px;
  font-size: 11px; font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}
.jb-lvdd-item:hover { background: rgba(255,255,255,.07); }
.jb-lvdd-item.is-selected { color: var(--accent); background: rgba(240,165,0,.1); }
.jb-lvdd-item.is-locked { opacity: .35; cursor: default; }

/* ── NAV ────────────────────────────────── */
.jb-nav-list { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; }
.jb-nav {
  width: 100%; min-height: 50px;
  border: 0; background: transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; border-radius: 10px;
  transition: background .14s, color .14s, transform .12s;
  padding: 4px 2px; position: relative;
}
.jb-nav-icon  { font-size: 18px; line-height: 1; }
.jb-nav-label { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.jb-nav:hover { background: rgba(255,255,255,.06); color: var(--text); transform: translateX(2px); }
.jb-nav.is-on { background: rgba(240,165,0,.1); color: var(--accent); }
.jb-nav.is-on::before {
  content: ''; position: absolute;
  left: 0; top: 22%; bottom: 22%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}

/* ── PROGRESS RING ──────────────────────── */
.jb-ring-wrap {
  margin-top: auto;
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-bottom: 2px;
}
.jb-ring-svg { width: 50px; height: 50px; transform: rotate(-90deg); }
.jb-ring-bg   { stroke: rgba(255,255,255,.06); }
.jb-ring-fill {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
  transition: stroke-dashoffset .45s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 4px rgba(240,165,0,.5));
}
.jb-ring-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 800; color: var(--accent);
  pointer-events: none;
}

/* ── MAIN ───────────────────────────────── */
.jb-main {
  position: relative; min-width: 0; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0,1fr);
  gap: 12px; padding: 24px 38px 16px;
}
.jb-main::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 85% 5%, rgba(240,165,0,.07), transparent),
    radial-gradient(ellipse 40% 55% at 5% 90%, rgba(74,144,226,.06), transparent),
    linear-gradient(165deg, #13141c 0%, #0a0b0f 65%, #111220 100%);
  pointer-events: none; z-index: 0;
}
.jb-main > * { position: relative; z-index: 1; }

/* ── HEADER ─────────────────────────────── */
.jb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.jb-title {
  margin: 0 0 10px;
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 2.8vw, 46px);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(120deg, #fff 30%, rgba(255,255,255,.5));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.jb-meta {
  display: flex; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; width: fit-content;
}
.jb-stat { display: flex; flex-direction: column; align-items: center; padding: 7px 16px; gap: 1px; }
.jb-stat-label { font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jb-stat-val { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1; min-width: 40px; text-align: center; }
.jb-stat-sep  { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.jb-best-el   { color: var(--accent) !important; }
.jb-diff-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap; user-select: none;
}
.diff-easy     { background: rgba(61,220,132,.1);   color: var(--green); border-color: rgba(61,220,132,.2); }
.diff-medium   { background: rgba(240,165,0,.1);    color: var(--accent); border-color: rgba(240,165,0,.2); }
.diff-hard     { background: rgba(232,68,26,.1);    color: #ff7a55; border-color: rgba(232,68,26,.2); }
.diff-expert   { background: rgba(232,74,74,.1);    color: var(--red); border-color: rgba(232,74,74,.25); }
.diff-master   { background: rgba(120,110,255,.12); color: #a8a2ff; border-color: rgba(120,110,255,.26); }
.diff-nightmare{ background: rgba(255,80,120,.12);  color: #ff7fa0; border-color: rgba(255,80,120,.28); }

/* ── PLAY AREA ──────────────────────────── */
.jb-play-area { position: relative; display: flex; justify-content: center; align-items: center; min-height: 0; width: 100%; }
.jb-board-wrap {
  position: relative;
  width: clamp(240px, 42vw, 560px);
  max-width: min(100%, calc(var(--jigblock-height,820px) - 230px));
  aspect-ratio: var(--jigblock-ratio, 1/1);
}
.jb-board {
  position: absolute; inset: 0; display: grid;
  border-radius: 10px; background: rgba(255,255,255,.02);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.1), 0 28px 70px rgba(0,0,0,.65);
  overflow: visible; touch-action: none;
}

/* ── SLOTS ──────────────────────────────── */
.jb-slot {
  position: relative; background: rgba(255,255,255,.025);
  border-radius: 2px; overflow: visible; transition: background .1s;
}
.jb-slot.is-over  { background: rgba(240,165,0,.12); box-shadow: inset 0 0 0 2px rgba(240,165,0,.45); }
.jb-slot.is-empty { background: rgba(255,255,255,.018); }

/* ── TILES ──────────────────────────────── */
.jb-tile {
  position: absolute;
  border-radius: 5px;
  background-repeat: no-repeat;
  cursor: grab;
  user-select: none;
  touch-action: none;
  /*
   * Viền đơn giản, gọn — xanh navy đậm như hình mẫu.
   * Không glow, không neon; chỉ 1 đường viền sáng mỏng + bóng nhẹ.
   */
  box-shadow:
    0 0 0 4px rgba(10,30,80,.92),      /* viền navy đậm bên ngoài */
    inset 0 0 0 1.5px rgba(255,255,255,.28); /* highlight trắng mỏng sát ảnh */
  outline: none;
  transition: box-shadow .15s, transform .18s, filter .18s;
  will-change: transform, left, top;
  clip-path: inset(0px round 5px);       /* JS sẽ ghi đè */
  z-index: 2;
}
.jb-tile:not(.is-grouped):not(.is-dragging):hover {
  box-shadow:
    0 0 0 4px rgba(10,30,80,1),
    inset 0 0 0 1.5px rgba(255,255,255,.38);
  transform: scale(1.028);
}

/* Khi đặt đúng chỗ: viền xanh lá mỏng */
.jb-tile.is-correct {
  box-shadow:
    0 0 0 4px rgba(40,180,100,.9),
    inset 0 0 0 1.5px rgba(255,255,255,.28);
}

/* Khi kéo */
.jb-tile.is-dragging {
  cursor: grabbing; z-index: 55;
  box-shadow:
    0 0 0 4px rgba(10,30,80,1),
    inset 0 0 0 1.5px rgba(255,255,255,.32),
    0 8px 24px rgba(0,0,0,.45);
  transform: rotate(-2.5deg) scale(1.06);
  transition: none; filter: brightness(1.05);
  clip-path: none !important;
}

/* ── GROUPED: bỏ toàn bộ viền, chỉ giữ shadow nhẹ ── */
.jb-tile.is-grouped {
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.jb-tile.is-group-dragging {
  transform: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  z-index: 53;
  transition: none;
}

/* border-radius góc: xóa bo tại cạnh join */
.jb-tile.join-left   { border-top-left-radius:0; border-bottom-left-radius:0; }
.jb-tile.join-right  { border-top-right-radius:0; border-bottom-right-radius:0; }
.jb-tile.join-top    { border-top-left-radius:0; border-top-right-radius:0; }
.jb-tile.join-bottom { border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* ── PREVIEW / HINT ─────────────────────── */
.jb-preview {
  position: absolute; inset: 0; border-radius: 10px;
  background: center/cover no-repeat;
  opacity: 0; pointer-events: none; transition: opacity .22s;
  box-shadow: 0 0 0 2px rgba(240,165,0,.35); z-index: 60;
}
.jigblock-app.is-hint .jb-preview { opacity: .8; }

/* ── PANEL BASE ─────────────────────────── */
/* ── Level complete image preview ─────────── */
.jb-win-preview {
  position: absolute; inset: 0; z-index: 90;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,14,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.jb-win-preview.is-visible { opacity: 1; }
.jb-win-preview img {
  max-width: 88%; max-height: 88%;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  transform: scale(.92);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.jb-win-preview.is-visible img { transform: scale(1); }

.jb-finish,
.jb-progress-panel,
.jb-auth-panel {
  position: absolute; inset: 0; z-index: 80;
  border-radius: 10px;
  background: rgba(8,9,14,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: jb-panel-in .25s cubic-bezier(.4,0,.2,1) both;
  display: flex; align-items: center; justify-content: center;
}
.jb-finish[hidden],
.jb-progress-panel[hidden],
.jb-auth-panel[hidden] { display: none; }

@keyframes jb-panel-in {
  from { opacity:0; transform:scale(.97); }
  to   { opacity:1; transform:scale(1);  }
}

/* ── FINISH ─────────────────────────────── */
.jb-finish-card { position: relative; text-align: center; padding: 18px 18px 16px; overflow: hidden; width: 100%; max-width: 300px; }
.jb-finish-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.jb-finish-confetti span {
  position: absolute; top: -10px; width: 7px; height: 7px; border-radius: 2px;
  animation: jb-confetti 1.2s ease-out both;
}
.jb-finish-confetti span:nth-child(1)  { left:8%;  background:#f0a500; animation-delay:.05s }
.jb-finish-confetti span:nth-child(2)  { left:16%; background:#3ddc84; animation-delay:.10s; transform:rotate(30deg) }
.jb-finish-confetti span:nth-child(3)  { left:24%; background:#4a90e2; animation-delay:.08s }
.jb-finish-confetti span:nth-child(4)  { left:32%; background:#e8441a; animation-delay:.14s; border-radius:50% }
.jb-finish-confetti span:nth-child(5)  { left:40%; background:#f0a500; animation-delay:.06s }
.jb-finish-confetti span:nth-child(6)  { left:48%; background:#3ddc84; animation-delay:.12s }
.jb-finish-confetti span:nth-child(7)  { left:56%; background:#e8441a; animation-delay:.04s; border-radius:50% }
.jb-finish-confetti span:nth-child(8)  { left:64%; background:#4a90e2; animation-delay:.16s }
.jb-finish-confetti span:nth-child(9)  { left:72%; background:#3ddc84; animation-delay:.18s; width:5px;height:10px }
.jb-finish-confetti span:nth-child(10) { left:80%; background:#f0a500; animation-delay:.09s; width:5px;height:10px }
.jb-finish-confetti span:nth-child(11) { left:88%; background:#e8441a; animation-delay:.15s }
.jb-finish-confetti span:nth-child(12) { left:20%; background:#4a90e2; animation-delay:.11s; width:5px;height:10px }
.jb-finish-confetti span:nth-child(13) { left:60%; background:#f0a500; animation-delay:.07s; border-radius:50% }
.jb-finish-confetti span:nth-child(14) { left:92%; background:#3ddc84; animation-delay:.13s; transform:rotate(45deg) }
.jb-finish-confetti span:nth-child(15) { left:4%;  background:#e8441a; animation-delay:.17s }
.jb-finish-confetti span:nth-child(16) { left:76%; background:#4a90e2; animation-delay:.03s; border-radius:50% }
@keyframes jb-confetti {
  0%   { transform:translateY(0) rotate(0deg) scale(0); opacity:1 }
  60%  { opacity:1 }
  100% { transform:translateY(200px) rotate(480deg) scale(.8); opacity:0 }
}
.jb-finish-emoji { display:block; font-size:36px; margin-bottom:6px; animation:jb-pop .5s .2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes jb-pop { from{transform:scale(0) rotate(-30deg)} to{transform:scale(1) rotate(0)} }
.jb-finish-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:900; margin:0 0 2px; }
.jb-finish-sub   { font-size:11px; color:var(--muted); margin:0 0 10px; }
.jb-finish-screenshot-wrap { position:relative; display:inline-block; margin-bottom:10px; border-radius:8px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.jb-finish-screenshot { display:block; width:200px; height:auto; border-radius:8px; }
.jb-finish-dl {
  position:absolute; bottom:5px; right:5px;
  width:24px; height:24px; border-radius:6px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  color:#fff; font-size:12px; line-height:24px; text-align:center;
  text-decoration:none; cursor:pointer; opacity:0; transition:opacity .15s;
}
.jb-finish-screenshot-wrap:hover .jb-finish-dl { opacity:1; }
.jb-finish-stats { display:flex; gap:4px; justify-content:center; margin-bottom:14px; }
.jb-finish-stat  { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 10px; background:var(--card); border:1px solid var(--border2); border-radius:9px; min-width:60px; }
.jb-finish-stat strong { font-family:'Syne',sans-serif; font-size:15px; font-weight:900; color:var(--accent); }
.jb-finish-stat span   { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.jb-finish-actions { display:flex; gap:8px; justify-content:center; }
.jb-finish-btn {
  padding:8px 16px; border-radius:9px; border:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff; font-family:'Syne',sans-serif; font-weight:800; font-size:13px;
  cursor:pointer; transition:transform .14s, box-shadow .14s;
  box-shadow:0 5px 18px rgba(240,165,0,.3);
}
.jb-finish-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(240,165,0,.4); }
.jb-finish-btn--secondary { background:rgba(255,255,255,.08); border:1px solid var(--border2); box-shadow:none; color:var(--text); font-family:inherit; font-weight:700; }
.jb-finish-btn--secondary:hover { background:rgba(255,255,255,.14); box-shadow:none; }

/* ── PROGRESS PANEL ─────────────────────── */
.jb-progress-panel { align-items: stretch; }
.jb-pp-inner { width:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; }
.jb-pp-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.jb-pp-user   { display:flex; align-items:center; gap:10px; }
.jb-pp-avatar { width:42px;height:42px;border-radius:50%;background:var(--card2) center/cover no-repeat;border:2px solid rgba(240,165,0,.35);font-size:20px;display:grid;place-items:center;flex-shrink:0; }
.jb-pp-name   { font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:var(--text); }
.jb-pp-sub    { font-size:11px;color:var(--muted);margin-top:2px; }
.jb-pp-close  { width:32px;height:32px;border:1px solid var(--border2);border-radius:8px;background:rgba(255,255,255,.05);color:var(--muted);font-size:13px;cursor:pointer;display:grid;place-items:center;transition:background .14s; }
.jb-pp-close:hover { background:rgba(255,255,255,.12);color:var(--text); }
.jb-pp-summary { display:flex;align-items:center;justify-content:space-around;padding:12px 18px;border-bottom:1px solid var(--border);flex-shrink:0; }
.jb-pp-sum-item { display:flex;flex-direction:column;align-items:center;gap:2px; }
.jb-pp-sum-val  { font-family:'Syne',sans-serif;font-size:24px;font-weight:900;color:var(--accent);line-height:1; }
.jb-pp-sum-label{ font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted); }
.jb-pp-levels { flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:5px; }
.jb-pp-levels::-webkit-scrollbar { width:4px; }
.jb-pp-levels::-webkit-scrollbar-track { background:transparent; }
.jb-pp-levels::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12);border-radius:4px; }
.jb-pp-level-row {
  display:grid; grid-template-columns:34px 1fr auto auto;
  align-items:center; gap:9px; padding:9px 11px;
  border-radius:9px; border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  cursor:pointer; text-align:left; color:inherit;
  transition:background .13s, border-color .13s;
}
.jb-pp-level-row:hover:not(:disabled) { background:rgba(240,165,0,.06);border-color:rgba(240,165,0,.2); }
.jb-pp-level-row:disabled { opacity:.4;cursor:not-allowed; }
.jb-pp-level-row.is-current { border-color:rgba(240,165,0,.4);background:rgba(240,165,0,.07); }
.jb-pp-lv-num { width:34px;height:34px;border-radius:8px;background:var(--card2);display:grid;place-items:center;font-family:'Syne',sans-serif;font-size:13px;font-weight:900;color:var(--muted); }
.jb-pp-level-row.is-beaten  .jb-pp-lv-num { background:rgba(61,220,132,.12);color:var(--green); }
.jb-pp-level-row.is-current .jb-pp-lv-num { background:rgba(240,165,0,.15);color:var(--accent); }
.jb-pp-lv-info  { display:flex;flex-direction:column;gap:2px;min-width:0; }
.jb-pp-lv-title { font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.jb-pp-lv-meta  { font-size:10px;color:var(--muted); }
.jb-pp-lv-best  { font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap; }
.jb-pp-lv-status{ font-size:15px;width:20px;text-align:center; }
.jb-pp-footer { display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--border);flex-shrink:0; }
.jb-pp-action-btn {
  flex:1;height:38px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:13px;
  cursor:pointer;transition:transform .13s,box-shadow .13s;
}
.jb-pp-action-btn:hover { transform:translateY(-1px);box-shadow:0 5px 15px rgba(240,165,0,.3); }
.jb-pp-action-btn--ghost { background:rgba(255,255,255,.06);border:1px solid var(--border2);color:var(--muted);font-family:inherit;font-weight:600; }
.jb-pp-action-btn--ghost:hover { background:rgba(255,80,80,.1);color:#ff8080;border-color:rgba(255,80,80,.2);box-shadow:none; }

/* ══════════════════════════════════════════
   AUTH PANEL
══════════════════════════════════════════ */
.jb-auth-panel { z-index: 90; align-items: center; }
.jb-auth-inner {
  width: min(100%, 340px);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  animation: jb-auth-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes jb-auth-pop {
  from { transform:scale(.88) translateY(16px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}

/* --- Logged-in view --- */
.jb-auth-logged { padding: 24px 22px 20px; }
.jb-auth-profile { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.jb-auth-profile-avatar {
  width:60px;height:60px;border-radius:50%;
  background:var(--card2) center/cover no-repeat;
  border:3px solid rgba(240,165,0,.4);
  font-size:28px;display:grid;place-items:center;flex-shrink:0;
}
.jb-auth-profile-name { font-family:'Syne',sans-serif;font-size:18px;font-weight:900;margin-bottom:3px; }
.jb-auth-profile-username { font-size:12px;color:var(--muted); }
.jb-auth-stats-row { display:flex;gap:10px;margin-bottom:20px; }
.jb-auth-stat { flex:1;padding:12px 10px;background:var(--card2);border:1px solid var(--border);border-radius:12px;text-align:center; }
.jb-auth-stat-val   { display:block;font-family:'Syne',sans-serif;font-size:22px;font-weight:900;color:var(--accent); }
.jb-auth-stat-label { display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:2px; }
.jb-auth-actions { display:flex;flex-direction:column;gap:8px; }
.jb-auth-btn {
  width:100%;height:40px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  transition:transform .13s,box-shadow .13s;
}
.jb-auth-btn:hover { transform:translateY(-1px);box-shadow:0 5px 14px rgba(240,165,0,.35); }
.jb-auth-btn--ghost {
  background:rgba(255,255,255,.06);border:1px solid var(--border2);
  color:var(--muted);
}
.jb-auth-btn--ghost:hover { background:rgba(255,255,255,.11);color:var(--text);box-shadow:none; }

/* --- Guest view: tabs + forms --- */
.jb-auth-guest { padding: 0; }
.jb-auth-tabs  { display:flex; border-bottom:1px solid var(--border); }
.jb-auth-tab {
  flex:1;height:46px;border:0;background:transparent;
  color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .14s,border-color .14s;
}
.jb-auth-tab.is-active { color:var(--accent);border-bottom-color:var(--accent); }

.jb-auth-form { padding:18px 20px 0; }
.jb-auth-form[hidden] { display:none; }

.jb-auth-field { display:flex;flex-direction:column;gap:5px;margin-bottom:13px; }
.jb-auth-field label { font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em; }
.jb-auth-hint  { font-weight:400;color:rgba(235,235,240,.25); }

.jb-auth-input {
  height:38px;border:1.5px solid var(--border2);border-radius:9px;
  background:var(--card2);color:var(--text);
  font-size:14px;padding:0 12px;outline:none;width:100%;
  transition:border-color .14s;
}
.jb-auth-input:focus { border-color:rgba(240,165,0,.5); }
.jb-auth-input.is-error { border-color:var(--red); }

/* Avatar picker */
.jb-avatar-picker { display:flex;flex-wrap:wrap;gap:5px; }
.jb-avatar-opt {
  width:34px;height:34px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--card2);font-size:17px;cursor:pointer;
  display:grid;place-items:center;transition:border-color .12s,transform .12s;
}
.jb-avatar-opt:hover { border-color:var(--accent);transform:scale(1.08); }
.jb-avatar-opt.is-selected { border-color:var(--accent);background:rgba(240,165,0,.12); }

.jb-auth-error {
  padding:9px 12px;border-radius:8px;background:rgba(232,74,74,.1);
  border:1px solid rgba(232,74,74,.25);color:#ff9090;
  font-size:12px;margin-bottom:10px;
}

.jb-auth-submit {
  width:100%;height:42px;border-radius:10px;border:0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:14px;
  cursor:pointer;margin-bottom:12px;
  transition:transform .13s,box-shadow .13s,opacity .13s;
  box-shadow:0 4px 16px rgba(240,165,0,.3);
}
.jb-auth-submit:hover { transform:translateY(-1px);box-shadow:0 7px 22px rgba(240,165,0,.4); }
.jb-auth-submit:disabled { opacity:.55;cursor:not-allowed;transform:none; }

.jb-auth-close-guest {
  display:block;width:100%;padding:11px;border:0;
  background:transparent;color:var(--muted);
  font-size:12px;cursor:pointer;
  border-top:1px solid var(--border);
  transition:color .13s;
}
.jb-auth-close-guest:hover { color:var(--text); }

/* Loading spinner for submit buttons */
.jb-auth-submit.is-loading::after {
  content:'';display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:jb-spin .6s linear infinite;margin-left:8px;vertical-align:middle;
}
@keyframes jb-spin { to{transform:rotate(360deg)} }

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:1100px){ .jb-board-wrap{width:clamp(240px,54vw,520px)} .jb-main{padding-left:26px;padding-right:26px} }
@media(max-width:860px){
  .jigblock-app{ --side:70px; height:min(var(--jigblock-height,760px),100dvh); min-height:560px; }
  .jb-sidebar{padding:12px 5px 10px}
  .jb-logo{width:38px;height:38px;font-size:19px;margin-bottom:6px}
  .jb-nav{min-height:46px} .jb-nav-icon{font-size:16px} .jb-nav-label{font-size:8px}
  .jb-main{padding:18px 16px 12px;gap:10px}
  .jb-title{font-size:24px} .jb-stat-val{font-size:15px}
  .jb-board-wrap{width:min(80vw,450px);max-width:100%}
}
@media(max-width:560px){
  .jigblock-app{--side:0px;grid-template-columns:1fr;height:auto;min-height:680px;border-radius:14px}
  .jb-sidebar{
    position:absolute;left:0;right:0;bottom:0;height:58px;
    flex-direction:row;justify-content:space-around;align-items:center;
    padding:0 4px;border-right:none;border-top:1px solid var(--border);z-index:20;gap:0;
  }
  .jb-logo,.jb-user-chip,.jb-level-box,.jb-ring-wrap{display:none}
  .jb-nav-list{flex-direction:row;width:auto;gap:0}
  .jb-nav{min-height:54px;min-width:46px;padding:4px 5px;border-radius:8px}
  .jb-nav.is-on::before{left:20%;right:20%;top:0;bottom:auto;width:auto;height:2px;border-radius:0 0 3px 3px}
  .jb-main{padding:14px 10px 66px;min-height:680px}
  .jb-title{font-size:18px;margin-bottom:7px}
  .jb-stat{padding:5px 9px} .jb-stat-val{font-size:13px;min-width:32px}
  .jb-diff-badge{display:none}
  .jb-board-wrap{width:100%;max-width:100%}
  .jb-auth-inner{width:calc(100% - 20px);border-radius:14px}
}


/* ── Block Puzzle Map mode ───────────────── */
.jb-block-map {
  position:absolute;
  inset:0;
  z-index:75;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(140,65,255,.35), transparent 48%),
    linear-gradient(180deg, rgba(42,14,82,.97), rgba(60,12,108,.97));
  border-radius:10px;
}
.jb-block-map[hidden] { display:none; }
.jb-bm-card {
  width:min(430px, 96%);
  padding:14px 14px 20px;
  border-radius:24px;
  background:linear-gradient(180deg,#6931c9,#3d0e7a);
  box-shadow:0 0 0 5px #ffc400, 0 0 0 9px #ff7b00, 0 22px 48px rgba(0,0,0,.55);
}
.jb-bm-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:8px 10px;
  border-radius:18px;
  background:linear-gradient(180deg,#8c62ff,#5425bd);
  color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), 0 5px 14px rgba(0,0,0,.28);
}
.jb-bm-title {
  font-family:'Syne',sans-serif;
  font-weight:900;
  font-size:18px;
  line-height:1;
}
.jb-bm-sub {
  margin-top:3px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.76);
}
.jb-bm-close {
  width:34px;height:34px;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;font-size:24px;font-weight:900;
  cursor:pointer;
}
.jb-bm-grid {
  display:grid;
  grid-template-columns:repeat(var(--bm-cols), 1fr);
  grid-template-rows:repeat(var(--bm-rows), 1fr);
  gap:6px;
  aspect-ratio:var(--bm-cols) / var(--bm-rows);
  padding:8px;
  border-radius:16px;
  background:#1bbf66;
  box-shadow:inset 0 0 0 3px #caff71, 0 8px 16px rgba(0,0,0,.22);
}
.jb-bm-cell {
  position:relative;
  border:0;
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  background:
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25% 50%, rgba(255,255,255,.12) 50% 75%, transparent 75%),
    linear-gradient(180deg,#41d979,#129d50);
  background-size:34px 34px, auto;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 3px 0 rgba(0,0,0,.25);
}
.jb-bm-cell span {
  position:absolute;
  inset:auto 50% 50% auto;
  transform:translate(50%,50%);
  min-width:30px;height:30px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(20,110,65,.72);
  color:#fff;
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.jb-bm-cell.is-open {
  background-repeat:no-repeat;
  background-color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.78), 0 3px 0 rgba(0,0,0,.22);
}
.jb-bm-cell.is-open span {
  opacity:0;
}
.jb-bm-cell.is-next:not(.is-open) {
  background:
    linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25% 50%, rgba(255,255,255,.12) 50% 75%, transparent 75%),
    linear-gradient(180deg,#ff6a6a,#d91e3b);
  background-size:34px 34px, auto;
  animation:jb-bm-pulse 1.1s infinite alternate;
}
.jb-bm-cell:disabled {
  cursor:not-allowed;
  filter:saturate(.75) brightness(.82);
}
.jb-bm-play {
  display:block;
  width:min(220px,70%);
  height:64px;
  margin:20px auto 0;
  border:0;border-radius:22px;
  background:linear-gradient(180deg,#bfff1e 0%,#28ca18 45%,#079b23 100%);
  box-shadow:0 0 0 4px #ffdf00, 0 0 0 7px #ff8c00, 0 10px 20px rgba(0,0,0,.38), inset 0 4px 0 rgba(255,255,255,.45);
  color:#fff;
  font-family:'Syne',sans-serif;
  font-size:34px;
  font-weight:900;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
  cursor:pointer;
}
@keyframes jb-bm-pulse {
  from { transform:scale(1); }
  to   { transform:scale(.96); }
}
.jigblock-app.is-block-map-open .jb-board,
.jigblock-app.is-block-map-open .jb-preview {
  pointer-events:none;
}


/* v4.2.2: bảo đảm Block Puzzle Map luôn phủ lên khu vực chơi */
.jb-play-area { position:relative; }
.jb-block-map {
  min-height: 100%;
  width: 100%;
}
.jigblock-app.is-block-map-open .jb-block-map {
  display:flex !important;
}
.jb-bm-cell--placeholder {
  pointer-events:none;
}