:root {
    --hbc-bg: #f9f9f9;
    --hbc-card-bg: #ffffff;
    --hbc-primary: #1e88e5;
    --hbc-secondary: #4caf50;
    --hbc-danger:   #d32f2f;
    --hbc-too-soon: #2979ff;
    --hbc-text-white: #ffffff;
    --hbc-text-dark: #424242;
    --hbc-shadow: rgba(0, 0, 0, 0.15);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--hbc-bg);
}

.hbc-title {
    font-size: 24px;
    color: var(--hbc-text-dark);
    text-align: center;
    margin-bottom: 8px;
}

.hbc-description {
    font-size: 16px;
    color: var(--hbc-text-dark);
    text-align: center;
    margin-bottom: 12px;
}

.hbc-start-button {
    display: block;
    margin: 0 auto 20px auto;
    background-color: var(--hbc-primary);
    color: var(--hbc-text-white);
    border: none;
    padding: 10px 24px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.hbc-start-button:hover {
    background-color: var(--hbc-secondary);
}


/* Reaction Test */
.hbc-reaction-wrapper {
  max-width: 960px;
  margin: 40px auto;
  background-color: var(--hbc-card-bg);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 20px var(--hbc-shadow);
  text-align: center;
}

.hbc-title { font-size: 28px; margin: 0 0 14px 0; }

.hbc-reaction-container { text-align: center; }

.hbc-reaction-box {
  position: relative;
  margin: 0 auto 20px auto;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background-color .25s ease;
}

.hbc-reaction-box.red { background-color: var(--hbc-danger); }
.hbc-reaction-box.green { background-color: var(--hbc-secondary); }

.hbc-reaction-text { font-size: 30px; color: var(--hbc-text-white); font-weight: 600; }

.hbc-start-button {
  display:inline-block;
  margin: 10px auto 18px;
  padding: 14px 26px;
  font-size: 18px;
  border-radius: 999px;
}

.hbc-reaction-extra { margin-top: 14px; }

.hbc-reaction-extra .hbc-message {
  display: none;
  font-size: 20px;
  color: var(--hbc-text-dark);
  margin-top: 10px;
}

.hbc-reaction-actions { margin-top: 16px; display:flex; gap:10px; justify-content:center; }

/* table */
.hbc-table {
  width:100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.hbc-table th, .hbc-table td {
  border:1px solid #ddd;
  padding:10px;
}
.hbc-table th{ background:#f3f3f3; }

@media (max-width: 640px){
  .hbc-title { font-size: 24px; }
  .hbc-reaction-text { font-size: 22px; }
  .hbc-start-button { font-size: 16px; padding: 12px 20px; }
}
/* Stats and About */

.hbc-reaction-stats-about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 20px;
}

.hbc-image-container, .hbc-about-container {
    width: 48%;
    margin-bottom: 20px;
}

.hbc-image-container img {
    max-width: 100%; border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.hbc-about-title {
    font-size: 20px; color: var(--hbc-text-dark); margin-bottom: 10px;
}

.hbc-about-container p {
    font-size: 14px; color: var(--hbc-text-dark); line-height: 1.6;
    margin-bottom: 8px;
}

/* Game container */
.hbc-game-container {
    max-width: 800px;
    margin: 30px auto;
    background-color: var(--hbc-card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px var(--hbc-shadow);
}

.hbc-card {
    background-color: var(--hbc-card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px var(--hbc-shadow);
    margin-bottom: 20px;
}

.hbc-result {
    margin-top: 15px;
    font-size: 18px;
    color: var(--hbc-text-dark);
    text-align: center;
}

/* Visual Memory 3x3 */
.hbc-visual-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 8px;
    justify-items: center;
    margin: 0 auto;
    width: max-content;
}

.hbc-visual-grid-3x3 .vm-tile {
    width: 60px; height: 60px;
    background-color: var(--hbc-secondary);
    border-radius: 8px; cursor: pointer;
    transition: background-color 0.2s ease;
    display: none;
}

.hbc-visual-grid-3x3 .vm-tile.active { background-color: var(--hbc-primary); }
.hbc-visual-grid-3x3 .vm-tile.guess { background-color: var(--hbc-danger); }

/* Aim Trainer */
.hbc-aim-canvas {
    display: block; margin: 0 auto; background-color: #e0e0e0;
    border-radius: 8px; box-shadow: 0 2px 4px var(--hbc-shadow);
}

/* Number Memory */
.hbc-number-display {
    font-size: 32px; font-weight: bold; text-align: center;
    margin-bottom: 15px; color: var(--hbc-too-soon);
}

.hbc-number-input {
    width: 100%; padding: 10px; font-size: 18px;
    border: 2px solid var(--hbc-secondary);
    border-radius: 8px; margin-bottom: 10px; text-align: center;
}

/* Verbal Memory */
.hbc-word-display {
    font-size: 28px; text-align: center; margin-bottom: 15px;
    color: var(--hbc-secondary);
}

/* Typing Speed */
.hbc-typing-text {
    background-color: #f7f7f7;
    border: 2px solid var(--hbc-secondary);
    border-radius: 8px; padding: 15px;
    font-size: 18px; margin-bottom: 15px; line-height: 1.6;
    display: none;
}

.hbc-typing-input {
    width: 100%; height: 120px; padding: 10px; font-size: 18px;
    border: 2px solid var(--hbc-secondary);
    border-radius: 8px; margin-bottom: 10px; resize: none;
    display: none;
}

.hbc-typing-timer {
    font-size: 20px; font-weight: bold; text-align: center;
    color: var(--hbc-primary); margin-bottom: 10px; display: none;
}

/* Chimp Test */






@media (max-width: 768px) {
    .hbc-image-container, .hbc-about-container { width: 100%; }
    .hbc-visual-grid-3x3 .vm-tile { width: 50px; height: 50px; }
    
}
/* Dynamic grid sizes for Visual Memory */
.hbc-visual-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 8px;
    justify-items: center;
    margin: 0 auto;
    width: max-content;
}
.hbc-visual-grid-5x5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 8px;
    justify-items: center;
    margin: 0 auto;
    width: max-content;
}
.hbc-visual-grid-6x6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 8px;
    justify-items: center;
    margin: 0 auto;
    width: max-content;
}
/* Ensure vm-tile sizes adjust */
.hbc-visual-grid-4x4 .vm-tile, .hbc-visual-grid-5x5 .vm-tile, .hbc-visual-grid-6x6 .vm-tile {
    width: 40px;
    height: 40px;
    background-color: var(--hbc-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.hbc-visual-grid-4x4 .vm-tile.active, .hbc-visual-grid-5x5 .vm-tile.active, .hbc-visual-grid-6x6 .vm-tile.active {
    background-color: var(--hbc-primary);
}
.hbc-visual-grid-4x4 .vm-tile.guess, .hbc-visual-grid-5x5 .vm-tile.guess, .hbc-visual-grid-6x6 .vm-tile.guess {
    background-color: var(--hbc-danger);
}
/* === Number Memory (Light) === */
.hbc-nm-wrapper {
  background: var(--hbc-bg, #f9f9f9);
  color: var(--hbc-text-dark, #424242);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px var(--hbc-shadow, rgba(0,0,0,.15));
  padding: 20px;
  max-width: 760px;
  margin: 24px auto;
}

.hbc-nm-hud { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.hbc-chip {
  background: #eef2ff;
  color: #1f2937;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #c7d2fe;
}

.hbc-nm-stage { text-align: center; }

.hbc-nm-screen {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 32px 20px;
  margin: 12px 0 16px;
}

.hbc-nm-number {
  font-weight: 700;
  font-size: clamp(28px, 6vw, 48px);
  letter-spacing: 2px;
  color: #111827;
  margin-bottom: 6px;
}

.hbc-nm-hint { color: #6b7280; font-size: 14px; }

.hbc-nm-input-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 14px 0 8px;
}

.hbc-input {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  min-width: 260px;
  text-align: center;
  color: #111827;
  outline: none;
}
.hbc-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.hbc-start-button {
  background: var(--hbc-primary, #1e88e5);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 4px 14px rgba(30,136,229,.25);
}
.hbc-start-button:hover { transform: translateY(-1px); }
.hbc-start-button:active { transform: translateY(0); opacity: .9; }

.hbc-message {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-block;
}
.hbc-message.ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.hbc-message.bad { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.hbc-actions { display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px; }

.hbc-nm-logwrap {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
}

.hbc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 14px;
  background: #fff;
}
.hbc-table th, .hbc-table td {
  border: 1px solid #e5e7eb;
  padding: 8px;
  text-align: center;
}
.hbc-table thead th {
  background: #f3f4f6;
  color: #111827;
  font-weight: 700;
}
.hbc-table td.ok { color: #065f46; font-weight: 700; }
.hbc-table td.bad { color: #991b1b; font-weight: 700; }
/* ===== Light Slab for game section (force white on dark themes) ===== */
.hbc-light-fullbleed {
  position: relative;
  z-index: 0;
  /* اگر کانتینر اصلی سایت padding دارد، این کلاس خودش فول‌بلید می‌شود */
}
.hbc-light-fullbleed::before {
  content: "";
  position: absolute;
  /* این ترفند کل عرض ویوپورت را سفید می‌کند حتی اگر کانتینر وسط‌چین باشد */
  inset: 0 calc(50% - 50vw);
  background: #ffffff;
  z-index: -1;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}

/* خود باکس بازی را هم روشن و سفید کن */
.hbc-nm-wrapper {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb;
}

/* برای اطمینان: اجزای داخلی هم روشن بمانند */
.hbc-nm-screen,
.hbc-nm-logwrap,
.hbc-table {
  background: #ffffff !important;
}
.hbc-table thead th {
  background: #f3f4f6 !important;
}

/* اگر قالب شما روی body کلاس dark/light دارد، باز هم مجبورش می‌کنیم سفید بماند */
body.dark .hbc-light-fullbleed::before,
[data-theme="dark"] .hbc-light-fullbleed::before {
  background: #ffffff !important;
}
/* ===== Full-bleed white background (force light on dark themes) ===== */
.hbc-light-fullbleed {
  position: relative;
  z-index: 0;
}
.hbc-light-fullbleed::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: #ffffff;
  z-index: -1;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
/* اگر سایت کلاس دارک دارد، باز هم سفید بماند */
body.dark .hbc-light-fullbleed::before,
[data-theme="dark"] .hbc-light-fullbleed::before {
  background: #ffffff !important;
}

/* ===== Number Memory (Light + Responsive) ===== */
.hbc-nm-wrapper {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 20px;
  max-width: 820px;
  margin: 24px auto;
}

.hbc-title {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 24px);
  color: #111827;
  text-align: center;
}

.hbc-nm-hud { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.hbc-chip {
  background: #eef2ff;
  color: #1f2937;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #c7d2fe;
}

.hbc-nm-stage { text-align: center; }

.hbc-nm-screen {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: clamp(18px, 4vw, 32px) 16px;
  margin: 12px 0 16px;
}

.hbc-nm-number {
  font-weight: 700;
  font-size: clamp(28px, 8vw, 48px);
  letter-spacing: 2px;
  color: #111827;
  margin-bottom: 6px;
}

.hbc-nm-hint { color: #6b7280; font-size: 14px; }

.hbc-nm-input-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}

.hbc-input {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 18px;
  min-width: 0;
  width: min(420px, 100%);
  text-align: center;
  color: #111827;
  outline: none;
}
.hbc-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.hbc-start-button {
  background: #1e88e5;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 4px 14px rgba(30,136,229,.25);
  white-space: nowrap;
}
.hbc-start-button:hover { transform: translateY(-1px); }
.hbc-start-button:active { transform: translateY(0); opacity: .9; }

.hbc-message {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-block;
}
.hbc-message.ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.hbc-message.bad { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.hbc-actions { display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px; flex-wrap: wrap; }

.hbc-nm-logwrap {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
}

/* جدول ریسپانسیو با اسکرول افقی در موبایل */
.hbc-table-scroll { overflow-x: auto; }
.hbc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 14px;
  background: #fff;
  min-width: 520px; /* تا موبایل اسکرول بخورد */
}
.hbc-table th, .hbc-table td {
  border: 1px solid #e5e7eb;
  padding: 8px;
  text-align: center;
}
.hbc-table thead th {
  background: #f3f4f6;
  color: #111827;
  font-weight: 700;
}
.hbc-table td.ok { color: #065f46; font-weight: 700; }
.hbc-table td.bad { color: #991b1b; font-weight: 700; }

/* فاصله و چیدمان بهتر در اسکرین‌های کوچک */
@media (max-width: 480px) {
  .hbc-nm-wrapper { padding: 14px; border-radius: 10px; }
  .hbc-start-button { width: 100%; }
}
/* ===== Reaction Time (Light + Responsive) ===== */
.hbc-reaction-wrapper {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 20px;
  max-width: 820px;
  margin: 24px auto;
}

.hbc-reaction-container {
  display: grid;
  gap: 12px;
}

/* باکس کلیک/فشردن (روشن بماند) */
.hbc-reaction-box {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  min-height: clamp(160px, 38vw, 260px);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}

/* حالات رنگی اما روشن (برای تم روشن) */
.hbc-reaction-box.red {
  background: #fef2f2;          /* قرمز خیلی روشن */
  border-color: #fecaca;
}
.hbc-reaction-box.green {
  background: #ecfdf5;          /* سبز خیلی روشن */
  border-color: #a7f3d0;
}
.hbc-reaction-box.wait {
  background: #fff7ed;          /* نارنجی خیلی روشن */
  border-color: #fed7aa;
}

.hbc-reaction-box:active { transform: scale(.997); }

.hbc-reaction-text {
  font-size: clamp(18px, 3.6vw, 24px);
  font-weight: 700;
  color: #111827;
  text-align: center;
  padding: 0 10px;
}

.hbc-dots { opacity: .35; font-size: 20px; margin-bottom: 6px; }

/* پیام‌ها */
.hbc-message {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-block;
}
.hbc-message.too-soon { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.hbc-message.result   { background: #eef2ff; color: #1e3a8a; border: 1px solid #c7d2fe; }
.hbc-message.avg      { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* دکمه‌ها */
.hbc-reaction-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hbc-start-button {
  background: #1e88e5;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 4px 14px rgba(30,136,229,.25);
  white-space: nowrap;
}
.hbc-start-button:hover { transform: translateY(-1px); }
.hbc-start-button:active { transform: translateY(0); opacity: .9; }

/* جدول تلاش‌ها که JS می‌سازد را هم قابل اسکرول کن */
.hbc-table-scroll { overflow-x: auto; }
.hbc-table-scroll table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
  margin-top: 6px;
}
.hbc-table-scroll th,
.hbc-table-scroll td {
  border: 1px solid #e5e7eb;
  padding: 8px;
  text-align: center;
}
.hbc-table-scroll thead th {
  background: #f3f4f6;
  color: #111827;
  font-weight: 700;
}

/* ریسپانسیو */
@media (max-width: 480px) {
  .hbc-reaction-wrapper { padding: 14px; border-radius: 10px; }
  .hbc-reaction-actions .hbc-start-button { width: 100%; }
}
/* ===== Full-bleed white (قبلاً اگر نگذاشتی) ===== */
.hbc-light-fullbleed { position: relative; z-index: 0; }
.hbc-light-fullbleed::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw);
  background: #ffffff; z-index: -1; box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
body.dark .hbc-light-fullbleed::before, [data-theme="dark"] .hbc-light-fullbleed::before { background:#fff !important; }

/* ===== Number Memory - Light + Responsive ===== */
.hbc-nm-wrapper {
  background:#ffffff !important; color:#111827 !important;
  border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:20px; max-width:820px; margin:24px auto;
}
.hbc-title { margin:0 0 10px; font-size:clamp(18px,2.4vw,24px); color:#111827; text-align:center; }

.hbc-actions { display:flex; gap:8px; justify-content:center; margin:8px 0 16px; flex-wrap:wrap; }
.hbc-actions-top { margin-top: 6px; margin-bottom: 12px; }

.hbc-start-button {
  background:#1e88e5; color:#fff; border:0; border-radius:12px; padding:10px 16px;
  font-weight:600; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 4px 14px rgba(30,136,229,.25); white-space:nowrap;
}
.hbc-start-button:hover{ transform: translateY(-1px); }
.hbc-start-button:active{ transform: translateY(0); opacity:.9; }

.hbc-nm-hud { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; justify-content:center; }
.hbc-chip{
  background:#eef2ff; color:#1f2937; border-radius:9999px; padding:6px 12px; font-size:14px; border:1px solid #c7d2fe;
}

.hbc-nm-stage { text-align:center; }

/* ✅ باکس عدد: بزرگ و مشخص */
.hbc-nm-screen {
  background:#ffffff; border:0; padding: 0; margin: 0 0 16px 0; /* صفر تا خود باکس را ببینیم */
}
.hbc-nm-numberbox{
  display:flex; align-items:center; justify-content:center;
  border: 3px dashed #cbd5e1; border-radius:18px;
  min-height: clamp(180px, 40vw, 320px);
  margin: 0 auto 8px auto; max-width: 680px; background: #fff;
  box-shadow: inset 0 0 0 6px #f8fafc;
}
.hbc-nm-number{
  font-weight:800;
  font-size: clamp(40px, 12vw, 72px); /* ← درشت‌تر از قبل */
  letter-spacing: 3px; color:#111827; line-height:1; user-select:none;
  padding: 0 12px;
}
.hbc-nm-hint { color:#6b7280; font-size:14px; }

.hbc-nm-input-row{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin:14px 0 8px; flex-wrap:wrap;
}
.hbc-input{
  background:#fff; border:1px solid #d1d5db; border-radius:10px; padding:10px 12px;
  font-size:20px; width:min(420px, 100%); text-align:center; color:#111827; outline:none;
}
.hbc-input:focus{ border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15); }

.hbc-message{
  margin:8px 0; padding:10px 12px; border-radius:10px; font-weight:600; display:inline-block;
}
.hbc-message.ok { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.hbc-message.bad{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.hbc-nm-logwrap{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:12px;
}
.hbc-table-scroll{ overflow-x:auto; }
.hbc-table{
  width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; background:#fff; min-width:520px;
}
.hbc-table th,.hbc-table td{ border:1px solid #e5e7eb; padding:8px; text-align:center; }
.hbc-table thead th{ background:#f3f4f6; color:#111827; font-weight:700; }
.hbc-table td.ok{ color:#065f46; font-weight:700; }
.hbc-table td.bad{ color:#991b1b; font-weight:700; }

/* ریسپانسیو */
@media (max-width: 480px){
  .hbc-nm-wrapper{ padding:14px; border-radius:10px; }
  .hbc-start-button{ width:100%; }
}
/* ===== Full-bleed white ===== */
.hbc-light-fullbleed{position:relative;z-index:0}
.hbc-light-fullbleed::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#fff;z-index:-1;box-shadow:inset 0 1px 0 rgba(0,0,0,.03)}
body.dark .hbc-light-fullbleed::before,[data-theme="dark"] .hbc-light-fullbleed::before{background:#fff !important}

/* ===== Visual Memory (Light + Responsive) ===== */
.hbc-vm-wrapper{
  background:#ffffff !important; color:#111827 !important;
  border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:20px; max-width:820px; margin:24px auto;
}
.hbc-title{margin:0 0 10px; font-size:clamp(18px,2.4vw,24px); color:#111827; text-align:center}

.hbc-actions{display:flex;gap:8px;justify-content:center;margin:8px 0 16px;flex-wrap:wrap}
.hbc-actions-top{margin-top:6px;margin-bottom:12px}
.hbc-start-button{
  background:#1e88e5; color:#fff; border:0; border-radius:12px; padding:10px 16px;
  font-weight:600; cursor:pointer; transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 4px 14px rgba(30,136,229,.25); white-space:nowrap
}
.hbc-start-button:hover{transform:translateY(-1px)}
.hbc-start-button:active{transform:translateY(0);opacity:.9}

.hbc-vm-hud{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;justify-content:center}
.hbc-chip{background:#eef2ff;color:#1f2937;border-radius:9999px;padding:6px 12px;font-size:14px;border:1px solid #c7d2fe}
.hbc-lives{display:flex;gap:6px;align-items:center}
.hbc-lives .life{width:14px;height:14px;border-radius:50%;background:#10b981;border:1px solid #34d399;box-shadow:0 0 0 2px #ecfdf5 inset}
.hbc-lives .life.off{background:#fca5a5;border-color:#fecaca;box-shadow:none}

.hbc-vm-stage{text-align:center}

/* گرید: آبی روشن پیش‌فرض */
.hbc-vm-grid{
  --hbc-vm-cols:3;
  display:grid; grid-template-columns:repeat(var(--hbc-vm-cols), minmax(56px, 1fr));
  gap:10px; max-width:680px; margin:0 auto 10px; width:100%
}
/* اندازهٔ خانه‌ها با بزرگ شدن گرید کمی کوچک‌تر می‌شود */
@media (min-width:720px){
  .hbc-vm-grid{ grid-template-columns:repeat(var(--hbc-vm-cols), minmax(64px, 1fr)); gap:12px; }
}

.hbc-vm-cell:hover{transform:translateY(-1px)}
.hbc-vm-cell:disabled{opacity:.75;cursor:not-allowed}


/* فاز ورود کاربر: قابل کلیک */
.hbc-vm-grid[data-state="input"] .hbc-vm-cell{cursor:pointer}


/* پیام‌ها */
.hbc-message{margin:8px 0;padding:10px 12px;border-radius:10px;font-weight:600;display:inline-block}
.hbc-message.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.hbc-message.bad{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* گزارش */
.hbc-vm-logwrap{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px}
.hbc-table-scroll{overflow-x:auto}
.hbc-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px;background:#fff;min-width:520px}
.hbc-table th,.hbc-table td{border:1px solid #e5e7eb;padding:8px;text-align:center}
.hbc-table thead th{background:#f3f4f6;color:#111827;font-weight:700}
.hbc-table td.ok{color:#065f46;font-weight:700}
.hbc-table td.bad{color:#991b1b;font-weight:700}

/* ریسپانسیو */
@media (max-width:480px){
  .hbc-vm-wrapper{padding:14px;border-radius:10px}
  .hbc-start-button{width:100%}
}



/* ===== Full-bleed white برای سازگاری با تم دارک ===== */
.hbc-light-fullbleed { position:relative; z-index:0; }
.hbc-light-fullbleed::before {
  content:""; position:absolute; inset:0 calc(50% - 50vw); background:#fff; z-index:-1;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
body.dark .hbc-light-fullbleed::before,[data-theme="dark"] .hbc-light-fullbleed::before{ background:#fff !important; }

/* ===== Wrapper و عناوین ===== */
.hbc-vm-wrapper{
  background:var(--vm-bg) !important; color:var(--vm-text) !important;
  border:1px solid var(--vm-border); border-radius: calc(var(--vm-radius) + 2px);
  box-shadow: var(--vm-shadow); padding:22px; max-width:860px; margin:28px auto;
}
.hbc-title{
  margin:0 0 12px; font-size:clamp(19px, 2.6vw, 26px); text-align:center; color:var(--vm-text);
}

/* ===== دکمه‌ها ===== */
.hbc-actions{ display:flex; gap:10px; justify-content:center; margin:10px 0 18px; flex-wrap:wrap; }
.hbc-start-button{
  background:var(--vm-primary); color:#fff; border:0; border-radius: calc(var(--vm-radius) + 2px);
  padding:11px 18px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(30,136,229,.25);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.hbc-start-button:hover{ transform: translateY(-1px); }
.hbc-start-button:active{ transform: translateY(0); opacity:.92; }
.hbc-start-button:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--vm-focus); }

/* ===== HUD (سطح/بهترین/جان‌ها) ===== */
.hbc-vm-hud{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; justify-content:center; }
.hbc-chip{
  background:#eef2ff; color:#1f2937; border:1px solid #c7d2fe;
  border-radius:9999px; padding:7px 12px; font-size:14px; font-weight:600;
}
.hbc-lives{ display:flex; gap:8px; align-items:center; }
.hbc-lives .life{
  width:14px; height:14px; border-radius:50%;
  background:#10b981; border:1px solid #34d399; box-shadow:0 0 0 2px #ecfdf5 inset;
}
.hbc-lives .life.off{ background:#fca5a5; border-color:#fecaca; box-shadow:none; }

/* ===== گرید همیشه روی صفحه، مدرن و یکنواخت ===== */
.hbc-vm-stage{ text-align:center; }
.hbc-vm-grid{
  --hbc-vm-cols: 3;
  display:grid; grid-template-columns: repeat(var(--hbc-vm-cols), minmax(58px, 1fr));
  gap:12px; max-width:720px; width:100%; margin: 0 auto 12px auto;
}
@media (min-width: 760px){ .hbc-vm-grid{ grid-template-columns: repeat(var(--hbc-vm-cols), minmax(68px, 1fr)); gap:14px; } }

.hbc-vm-cell{
  aspect-ratio:1/1;
  border-radius: var(--vm-radius);
  background: var(--vm-tile);
  border: 1px solid var(--vm-tile-border);
  box-shadow: inset 0 0 0 6px #f8fbff;
  transition: background-color .12s linear, border-color .12s linear, transform .06s ease, box-shadow .2s ease;
  cursor: default;
}
.hbc-vm-cell:hover{ transform: translateY(-1px); }
.hbc-vm-cell:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--vm-focus), inset 0 0 0 6px #f8fbff; }
.hbc-vm-cell:disabled{ opacity:.75; cursor:not-allowed; }



/* فاز انتخاب کاربر */
.hbc-vm-grid[data-state="input"] .hbc-vm-cell{ cursor: pointer; }


/* پیام‌ها */
.hbc-message{
  margin:10px 0; padding:10px 12px; border-radius: calc(var(--vm-radius) - 4px);
  font-weight:700; display:inline-block;
}
.hbc-message.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.hbc-message.bad{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* گزارش */
.hbc-vm-logwrap{
  background:#fff; border:1px solid var(--vm-border); border-radius: calc(var(--vm-radius) - 2px);
  padding:12px;
}
.hbc-table-scroll{ overflow-x:auto; }
.hbc-table{
  width:100%; min-width:520px; border-collapse:collapse; background:#fff; font-size:14px; margin-top:6px;
  border-radius: calc(var(--vm-radius) - 4px); overflow:hidden;
}
.hbc-table th,.hbc-table td{ border:1px solid var(--vm-border); padding:8px; text-align:center; }
.hbc-table thead th{ background:#f3f4f6; color:#111827; font-weight:700; }
.hbc-table td.ok{ color:#065f46; font-weight:700; } .hbc-table td.bad{ color:#991b1b; font-weight:700; }

/* ریسپانسیو */
@media (max-width: 500px){
  .hbc-vm-wrapper{ padding:16px; border-radius: calc(var(--vm-radius) - 2px); }
  .hbc-start-button{ width:100%; }
}

/* فول‌بلید سفید برای تم‌های دارک */
.hbc-light-fullbleed{position:relative;z-index:0}
.hbc-light-fullbleed::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#fff;z-index:-1;box-shadow:inset 0 1px 0 rgba(0,0,0,.03)}
body.dark .hbc-light-fullbleed::before,[data-theme="dark"] .hbc-light-fullbleed::before{background:#fff !important}

/* Wrapper */
.hbc-vm-wrapper{
  background:var(--vm-bg)!important;color:var(--vm-text)!important;
  border:1px solid var(--vm-border); border-radius:calc(var(--vm-radius) + 2px);
  box-shadow:var(--vm-shadow); padding:22px; max-width:860px; margin:28px auto;
}
.hbc-title{margin:0 0 12px; font-size:clamp(19px,2.6vw,26px); text-align:center}

/* Buttons */
.hbc-actions{display:flex;gap:10px;justify-content:center;margin:10px 0 18px;flex-wrap:wrap}
.hbc-start-button{
  background:var(--vm-primary); color:#fff; border:0; border-radius:calc(var(--vm-radius) + 2px);
  padding:11px 18px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(30,136,229,.25);
  transition:transform .06s, box-shadow .2s, opacity .2s;
}
.hbc-start-button:hover{transform:translateY(-1px)}
.hbc-start-button:active{transform:translateY(0);opacity:.92}
.hbc-start-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--vm-focus)}

/* HUD */
.hbc-vm-hud{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.hbc-chip{background:#eef2ff;color:#1f2937;border:1px solid #c7d2fe;border-radius:9999px;padding:7px 12px;font-size:14px;font-weight:600}
.hbc-lives{display:flex;gap:8px;align-items:center}
.hbc-lives .life{width:14px;height:14px;border-radius:50%;background:#10b981;border:1px solid #34d399;box-shadow:0 0 0 2px #ecfdf5 inset}
.hbc-lives .life.off{background:#fca5a5;border-color:#fecaca;box-shadow:none}

/* Grid */
.hbc-vm-stage{text-align:center}
.hbc-vm-grid{
  --hbc-vm-cols:3;
  display:grid; grid-template-columns:repeat(var(--hbc-vm-cols), minmax(58px, 1fr));
  gap:12px; max-width:720px; width:100%; margin:0 auto 12px;
}
@media (min-width:760px){ .hbc-vm-grid{ grid-template-columns:repeat(var(--hbc-vm-cols), minmax(68px, 1fr)); gap:14px; } }

/* Tiles */
.hbc-vm-cell{
  aspect-ratio:1/1; border-radius:var(--vm-radius);
  background:var(--vm-tile); border:1px solid var(--vm-tile-border);
  box-shadow:inset 0 0 0 6px #f8fbff;
  transition:background-color .12s linear, border-color .12s linear, transform .06s ease, box-shadow .2s ease;
  cursor:default;
}
.hbc-vm-cell:hover{transform:translateY(-1px)}
.hbc-vm-cell:focus-visible{outline:none;box-shadow:0 0 0 3px var(--vm-focus), inset 0 0 0 6px #f8fbff}
.hbc-vm-cell:disabled{opacity:.75;cursor:not-allowed}


/* انتخاب کاربر (اختیاری) */
.hbc-vm-grid[data-state="input"] .hbc-vm-cell{cursor:pointer}

/* Messages / Log */
.hbc-message{margin:10px 0;padding:10px 12px;border-radius:calc(var(--vm-radius) - 4px);font-weight:700;display:inline-block}
.hbc-message.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.hbc-message.bad{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

.hbc-vm-logwrap{background:#fff;border:1px solid var(--vm-border);border-radius:calc(var(--vm-radius) - 2px);padding:12px}
.hbc-table-scroll{overflow-x:auto}
.hbc-table{width:100%;min-width:520px;border-collapse:collapse;background:#fff;font-size:14px;margin-top:6px;border-radius:calc(var(--vm-radius) - 4px);overflow:hidden}
.hbc-table th,.hbc-table td{border:1px solid var(--vm-border);padding:8px;text-align:center}
.hbc-table thead th{background:#f3f4f6;color:#111827;font-weight:700}
.hbc-table td.ok{color:#065f46;font-weight:700}.hbc-table td.bad{color:#991b1b;font-weight:700}

@media (max-width:500px){
  .hbc-vm-wrapper{padding:16px;border-radius:calc(var(--vm-radius) - 2px)}
  .hbc-start-button{width:100%}
}
/* === COMPAT OVERRIDES (بدون var) — بگذار آخرِ فایل === */

/* بوم روشن برای تم‌های دارک */
.hbc-light-fullbleed{position:relative;z-index:0}
.hbc-light-fullbleed::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:#fff;z-index:-1;box-shadow:inset 0 1px 0 rgba(0,0,0,.03)}
body.dark .hbc-light-fullbleed::before,[data-theme="dark"] .hbc-light-fullbleed::before{background:#fff !important}

/* Wrapper و تیتر */
.hbc-vm-wrapper{
  background:#ffffff !important; color:#111827 !important;
  border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:22px; max-width:860px; margin:28px auto;
}
.hbc-title{margin:0 0 12px; font-size:clamp(19px,2.6vw,26px); text-align:center; color:#111827}

/* دکمه‌ها */
.hbc-actions{display:flex;gap:10px;justify-content:center;margin:10px 0 18px;flex-wrap:wrap}
.hbc-start-button{
  background:#1e88e5; color:#fff; border:0; border-radius:16px;
  padding:11px 18px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(30,136,229,.25);
  transition:transform .06s, box-shadow .2s, opacity .2s;
}
.hbc-start-button:hover{transform:translateY(-1px)}
.hbc-start-button:active{transform:translateY(0);opacity:.92}

/* HUD */
.hbc-vm-hud{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;justify-content:center}
.hbc-chip{background:#eef2ff;color:#1f2937;border:1px solid #c7d2fe;border-radius:9999px;padding:7px 12px;font-size:14px;font-weight:600}
.hbc-lives{display:flex;gap:8px;align-items:center}
.hbc-lives .life{width:14px;height:14px;border-radius:50%;background:#10b981;border:1px solid #34d399;box-shadow:0 0 0 2px #ecfdf5 inset}
.hbc-lives .life.off{background:#fca5a5;border-color:#fecaca;box-shadow:none}

/* Grid */
.hbc-vm-stage{text-align:center}
.hbc-vm-grid{
  --hbc-vm-cols:3; /* اگر مرورگر var رو نفهمه، 3 ثابت می‌مونه */
  display:grid; grid-template-columns:repeat(var(--hbc-vm-cols, 3), minmax(58px, 1fr));
  gap:12px; max-width:720px; width:100%; margin:0 auto 12px;
}
@media (min-width:760px){
  .hbc-vm-grid{ grid-template-columns:repeat(var(--hbc-vm-cols, 3), minmax(68px, 1fr)); gap:14px; }
}

/* Tile عادی */
.hbc-vm-cell{
  aspect-ratio:1/1; border-radius:14px;
  background:#dfeafe; border:1px solid #c7d2fe;
  box-shadow:inset 0 0 0 6px #f8fbff;
  transition:background-color .12s linear, border-color .12s linear, transform .06s ease, box-shadow .2s ease;
  cursor:default;
}
.hbc-vm-cell:hover{transform:translateY(-1px)}
.hbc-vm-cell:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(30,136,229,.18), inset 0 0 0 6px #f8fbff}
.hbc-vm-cell:disabled{opacity:.75;cursor:not-allowed}

/* ← فلش آبیِ 2s (غلبه قطعی) */
.hbc-vm-wrapper .hbc-vm-grid .hbc-vm-cell.flash{
  background:#60a5fa !important;
  border-color:#3b82f6 !important;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.6) !important;
}

/* انتخاب کاربر (اختیاری) */
.hbc-vm-grid[data-state="input"] .hbc-vm-cell{cursor:pointer}
.hbc-vm-wrapper .hbc-vm-grid .hbc-vm-cell.chosen{ background:#dcfce7; border-color:#bbf7d0 }

/* پیام‌ها و جدول (برای هماهنگی) */
.hbc-message{margin:10px 0;padding:10px 12px;border-radius:10px;font-weight:700;display:inline-block}
.hbc-message.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.hbc-message.bad{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

.hbc-vm-logwrap{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.hbc-table-scroll{overflow-x:auto}
.hbc-table{width:100%;min-width:520px;border-collapse:collapse;background:#fff;font-size:14px;margin-top:6px}
.hbc-table th,.hbc-table td{border:1px solid #e5e7eb;padding:8px;text-align:center}
.hbc-table thead th{background:#f3f4f6;color:#111827;font-weight:700}
.hbc-table td.ok{color:#065f46;font-weight:700}.hbc-table td.bad{color:#991b1b;font-weight:700}
/* === Visual Memory: رنگ "سبز پولداری" برای کاشیِ انتخاب‌شده (Override قطعی) === */
.hbc-vm-wrapper .hbc-vm-grid .hbc-vm-cell.chosen{
  background: #109e49 !important;   /* سبز پولداری / Emerald rich */
  border-color: #0b7a37 !important; /* حاشیه تیره‌تر برای عمق */
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35); /* درخشش لطیف داخل */
  transition: background-color .12s linear, border-color .12s linear;
}