/* Jannah Jewels — page additions (Oct 2026). Chrome comes from salam-arcade.css. */

#jjCanvasWrap {
  border-radius: 14px; overflow: hidden; line-height: 0;
  background: #d9f99d; touch-action: none; cursor: pointer;
}
#jjCanvasWrap canvas { width: 100% !important; height: auto !important; display: block; }

.jj-word {
  display: flex; gap: 7px; align-items: center; justify-content: center;
  direction: rtl; margin: 2px 0;
}
.jj-letter {
  font-family: Amiri, serif; font-size: 1.7rem; line-height: 1.15;
  width: 46px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .75);
  border: 2.5px dashed rgba(23, 53, 83, .35); border-radius: 12px; color: #94a3b8;
}
.jj-letter.got {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 2.5px solid #b45309; color: #451a03;
  box-shadow: 0 3px 10px rgba(245, 158, 11, .45);
}
.jj-word-wrap { text-align: center; }
.jj-word-label { font-size: .78rem; font-weight: 800; letter-spacing: .09em; color: #4d7c0f; }

.jj-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jj-chip {
  background: rgba(255, 255, 255, .82);
  border: 2px solid rgba(23, 53, 83, .14);
  border-radius: 999px; padding: 3px 12px;
  font-weight: 800; color: #173653; font-size: .95rem; white-space: nowrap;
}
.jj-chip.jj-low { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

.jj-levels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.jj-level-btn {
  font: inherit; font-weight: 800; color: #173653;
  background: rgba(255, 255, 255, .9);
  border: 2px solid rgba(23, 53, 83, .2); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  font-family: Amiri, Nunito, serif; font-size: 1.05rem;
}
.jj-level-btn:disabled { opacity: .38; cursor: default; }
.jj-level-btn:not(:disabled):hover { border-color: #65a30d; }

@media (max-width: 560px) {
  .jj-letter { width: 38px; height: 44px; font-size: 1.4rem; }
  .jj-chip { font-size: .86rem; padding: 2px 9px; }
}

/* During play the painted scene steps aside so the board owns the stage. */
#jjStage[data-state="play"], #jjStage[data-state="win"], #jjStage[data-state="over"] {
  background-image: none;
  background-color: #e9f7d8;
}
#jjPlay { background: transparent; }
.jj-levels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.jj-level-btn {
  font: inherit; font-size: 13px; font-weight: 1000; cursor: pointer;
  border: 2px solid #bbf7d0; background: #f0fdf4; color: #166534;
  border-radius: 999px; padding: 8px 14px; min-height: 40px;
}
.jj-level-btn:disabled { opacity: .45; cursor: default; }
.jj-level-btn:not(:disabled):hover { background: #dcfce7; }