/* Jabr — numbers. */
.jb-col { gap: 18px; }
.jb-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 34px 12px;
  border-radius: 24px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(232, 182, 90, 0.22), rgba(17, 30, 90, 0.7));
  box-shadow: inset 0 0 0 1px rgba(232, 182, 90, 0.45), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.jb-target small { font-size: 12px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
html[lang="ar"] .jb-target small { letter-spacing: 0; }
.jb-target b { font-family: var(--font-display); font-size: clamp(3rem, 16vw, 4.6rem); line-height: 1; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.jb-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 360px);
}
.jb-tile {
  min-height: 74px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #F7F0DE, #E7D9B7);
  color: var(--lapis);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 0 #B89C63, 0 14px 24px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.jb-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 #B89C63, 0 6px 12px rgba(0, 0, 0, 0.3); }
.jb-tile.is-sel { background: linear-gradient(180deg, #FFE3A3, #E8B65A); transform: translateY(-3px); box-shadow: 0 9px 0 #A97E2E, 0 0 0 3px rgba(243, 212, 151, 0.6), 0 18px 30px rgba(0, 0, 0, 0.35); }
.jb-tile.is-hint { box-shadow: 0 6px 0 #B89C63, 0 0 0 3px var(--turquoise); }
.jb-tile.is-hit { background: linear-gradient(180deg, #A8F0C8, #47C285); }
.jb-tile.is-new { animation: kit-pop 0.35s var(--ease-out); }
.jb-ops { display: grid; grid-template-columns: repeat(4, 64px); gap: 12px; }
.jb-op {
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 30, 90, 0.85);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--parchment);
  font-size: 1.9rem;
  font-weight: 600;
  cursor: pointer;
}
.jb-op[aria-pressed="true"] { background: var(--gold); color: var(--lapis); box-shadow: 0 0 0 4px rgba(232, 182, 90, 0.25); }
.jb-op[disabled] { opacity: 0.4; }
.jb-fact {
  max-width: 340px;
  min-height: 3.2em;
  font-size: 0.9rem;
  color: var(--mist);
  text-align: center;
  opacity: 0;
}
.jb-fact.is-on { animation: fa-fade 0.5s linear forwards; }
@media (max-height: 680px) { .jb-tile { min-height: 60px; font-size: 1.6rem; } .jb-op { height: 52px; } .jb-fact { display: none; } }