/* =========================================================
   Jeux : style aligné sur le thème (compatibilité large)
   Utilise les variables CSS déjà gérées par Ma Bulle :
   --card-bg, --accent, --accent-soft, --accent-strong, --text-main,
   --text-soft, --border-soft, --shadow-soft, --radius-lg
   ========================================================= */

/* Bouton "Jeux" */
.btn-jeux{
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  color: var(--text-main);
}
.btn-jeux:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}
.btn-jeux .btn-ic{ margin-right: 8px; }

/* Modal */
.mb-modal{ position: fixed; inset: 0; z-index: 99999; display: none; }
.mb-modal.is-open{ display: block; }

.mb-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}

.mb-modal__panel{
  position: relative;
  width: min(1120px, calc(100vw - 18px));
  height: min(86vh, 860px);
  margin: 8vh auto 0;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mb-modal.is-max .mb-modal__panel{
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);
  margin: 5px auto 0;
}

/* Head */
.mb-modal__head{
  padding: 14px 16px;
  display:flex; align-items:center; justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(90deg, var(--accent-soft), rgba(255,255,255,.35));
}

.mb-modal__title{
  display:flex; align-items:center; gap: 10px;
  font-weight: 900;
  font-size: 18px;
  color: var(--text-main);
}
.mb-title-ic{
  width: 32px; height: 32px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
}

.mb-modal__head-actions{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }

/* Body */
.mb-modal__body{
  padding: 14px 16px 18px;
  overflow: auto;
}

/* Tabs */
.mb-tabs{
  display:flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.28);
}
.mb-tab{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  color: var(--text-main);
}
.mb-tab.is-active{
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 800;
}

.mb-tabpanel{ display: none; }
.mb-tabpanel.is-active{ display: block; }

/* Cards */
.mb-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.mb-card__row{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mb-card__title{ font-weight: 900; color: var(--text-main); }
.mb-card__hint{ font-size: 10px; color: var(--text-soft); }

.mb-row{ display:flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: end; }

.mb-field{ display:flex; flex-direction: column; gap: 6px; }
.mb-field span{ font-weight: 800; font-size: 10px; color: var(--text-soft); }
.mb-field input, .mb-field select{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  background: rgba(255,255,255,.9);
  color: var(--text-main);
}

/* Status */
.mb-status{ margin-top: 10px; font-size: 13px; color: var(--text-soft); }
.mb-status[data-kind="ok"]{ color: #0c5f3a; }
.mb-status[data-kind="warn"]{ color: #8a5a00; }
.mb-status[data-kind="err"]{ color: #7a1d2a; }

/* Toast */
.mb-toast{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  font-weight: 800;
  color: var(--text-main);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.mb-toast.is-show{ opacity: 1; transform: translateX(-50%) translateY(-4px); }
.mb-toast[data-kind="ok"]{ border-color: rgba(0,200,120,.35); }
.mb-toast[data-kind="warn"]{ border-color: rgba(178,107,0,.35); }

/* Crossword */
.mb-crossword__controls{
  display:flex; gap: 10px; align-items:flex-end; flex-wrap: wrap;
  margin-top: 12px;
}

.mb-crossword{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .mb-crossword{ grid-template-columns: 1fr; }
}

.mb-crossword__grid{
  display:grid;
  gap: 3px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  aspect-ratio: 1 / 1;
  max-width: 720px;
  min-height: 420px;
}

.cw-cell{
  position: relative;
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  min-width: 22px;
}
.cw-cell.is-black{
  background: #1f1f1f;
  border-color: #1f1f1f;
}
.cw-cell.is-focus{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.cw-num{
  position:absolute;
  top: 3px; left: 4px;
  font-size: 10px;
  opacity: .65;
  pointer-events: none;
  color: var(--text-main);
}
.cw-inp{
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text-main);
}

.mb-crossword__clues{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.mb-clues{
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  max-height: 360px;
  overflow: auto;
}
.mb-clues__title{ font-weight: 900; margin-bottom: 6px; color: var(--text-main); }

.cw-clue{
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 8px;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  color: var(--text-main);
}

/* Word Search */
.mb-wordsearch{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .mb-wordsearch{ grid-template-columns: 1fr; }
}

.mb-wordsearch__grid{
  display:grid;
  gap: 3px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  width: 100%;
  max-width: none;
  /* the height is set dynamically in JS to avoid scrolling */
  overflow: hidden;
  touch-action: none;
}

.ws-cell{
  border-radius: 10px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  font-weight: 900;
  user-select:none;
  color: var(--text-main);
  padding: 0;
  height: var(--ws-cell, 28px);
  /* Larger, readable letters across devices */
  font-size: clamp(14px, calc(var(--ws-cell, 28px) * 0.72), 24px);
}
.ws-cell.is-sel{
  outline: 2px dashed var(--accent);
  outline-offset: 1px;
}
.ws-cell.is-answer{
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Persistently highlighted (found) words */
.ws-cell.is-found{
  background: rgba(0, 200, 120, 0.14);
  border-color: rgba(0, 200, 120, 0.35);
}

.ws-word.is-found{
  text-decoration: line-through;
  opacity: .55;
  color: rgba(0,0,0,.45);
  background: rgba(0,0,0,.04);
}

.ws-word{
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
  font-weight: 900;
  font-size: 10px;
  margin-bottom: 6px;
  color: var(--text-main);
}

@media (max-width: 480px){
  .ws-word{ font-size: 11px; padding: 6px 8px; }
}

/* Word list (right) – 1 word per line (requested) */
.mb-wordsearch__side .mb-clues__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  padding-right: 6px;
}

@media (max-width: 900px){
  .mb-wordsearch__side .mb-clues__list{
    max-height: 260px;
  }
}

/* CrossMath (type Calcudoku/KenKen) */
.mb-crossmath{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  max-width: 640px;
}

.cm-cell{
  position: relative;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(0,0,0,.10);
  border-radius: 14px;
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.cm-cell input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-weight: 900;
  font-size: 26px;
  color: var(--text-main);
}

.cm-label{
  position:absolute;
  left: 8px;
  top: 6px;
  font-size: 11px;
  font-weight: 900;
  color: var(--text-soft);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
}

/* Quiz */
.mb-quiz{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.mb-quiz__question{
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.92));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 38px rgba(0,0,0,.08);
}

.mb-quiz__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 12px;
  color: var(--text-main);
}

.mb-quiz__text{
  margin-top: 10px;
  font-weight: 900;
  font-size: 16px;
  color: var(--text-main);
}

.mb-quiz__meta{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.mb-quiz__answers{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px){
  .mb-quiz__answers{ grid-template-columns: 1fr; }
}

.cm-cell.is-bad{ border-color: rgba(220, 50, 50, .55); background: rgba(220,50,50,.08); }
.cm-cell.is-ok{ border-color: rgba(0, 200, 120, .45); background: rgba(0,200,120,.10); }

@media (max-width: 480px){
  .cm-cell{ height: 56px; }
  .cm-cell input{ font-size: 24px; }
}

/* Memory */
.mb-memory{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 640px;
}
.mem-card{
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.92);
  padding: 18px 10px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  color: var(--text-main);
}
.mem-card.is-open{ background: var(--accent-soft); }
.mem-card.is-done{
  background: rgba(0,200,120,.14);
  border-color: rgba(0,200,120,.35);
}

/* Save feedback */
button.mb-saving{ opacity: .88; }
button.mb-saved{
  background: rgba(0,200,120,.18) !important;
  border-color: rgba(0,200,120,.35) !important;
  color: #0c5f3a !important;
}

/* Small text */
.mb-muted{ margin-top: 10px; font-size: 10px; color: var(--text-soft); }

/* Défi fun */
.mb-challenge{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
}
@media (max-width: 900px){
  .mb-challenge{ grid-template-columns: 1fr; }
}

.mb-challenge__card{
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.85));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 38px rgba(0,0,0,.08);
}

.mb-challenge__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 900;
  color: var(--text-main);
}

.mb-challenge__text{
  margin-top: 12px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--text-main);
}

.mb-challenge__meta{
  margin-top: 10px;
  font-size: 13px;
  opacity: .85;
}

.mb-wheel{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  overflow: hidden;
}

.mb-wheel__pointer{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid var(--accent);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  z-index: 3;
}

.mb-wheel__disc{
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    rgba(255,105,180,.22),
    rgba(255,255,255,.85),
    rgba(255,105,180,.18),
    rgba(255,255,255,.85),
    rgba(255,105,180,.22)
  );
  border: 1px solid rgba(0,0,0,.06);
}

.mb-wheel__seg{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  color: var(--text-main);
  transform: rotate(calc(var(--i) * 51.428deg)) translateY(-42%);
  transform-origin: center;
  pointer-events: none;
  opacity: .9;
}

/* =========================
   2048 (Jeu de chiffres)
   ========================= */
.n2048-wrap{
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,105,180,.16);
  box-shadow: 0 14px 30px rgba(255,105,180,.08);
  touch-action: none;
}
.n2048-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.n2048-tile{
  height: 64px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 22px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
@media (max-width: 420px){
  .n2048-tile{ height: 54px; font-size: 20px; border-radius: 14px; }
}
.n2048-tile[data-v="0"]{ background: rgba(0,0,0,.03); }
.n2048-tile[data-v="2"]{ background: rgba(255,105,180,.10); }
.n2048-tile[data-v="4"]{ background: rgba(255,105,180,.14); }
.n2048-tile[data-v="8"]{ background: rgba(255,105,180,.18); }
.n2048-tile[data-v="16"]{ background: rgba(255,105,180,.22); }
.n2048-tile[data-v="32"]{ background: rgba(255,105,180,.26); }
.n2048-tile[data-v="64"]{ background: rgba(255,105,180,.30); }
.n2048-tile[data-v="128"]{ background: rgba(255,105,180,.34); font-size: 20px; }
.n2048-tile[data-v="256"]{ background: rgba(255,105,180,.38); font-size: 20px; }
.n2048-tile[data-v="512"]{ background: rgba(255,105,180,.42); font-size: 18px; }
.n2048-tile[data-v="1024"]{ background: rgba(255,105,180,.48); color:#4a1030; font-size: 18px; }
.n2048-tile[data-v="2048"]{ background: rgba(255,105,180,.58); color:#4a1030; }

.n2048-overlay{
  display:none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  font-weight: 800;
  align-items:center;
  justify-content:center;
}
.mb-scorebox{
  min-width: 92px;
  border-radius: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.9);
}
.mb-scorebox__lab{ font-size: 11px; opacity: .75; font-weight: 800; }
.mb-scorebox__val{ font-size: 18px; font-weight: 900; }
.mb-spacer{ flex:1; }