/* Ibrahim Games — math-game UI (fractions, teach card, number pad), shared by
   the ten 3D math games. Layered over kit.css; built by assets/3d/mathkit.js. */

/* ---------- Numbers & stacked fractions ---------- */
.mnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mfrac {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  line-height: 1; margin: 0 0.12em; font-variant-numeric: tabular-nums;
}
.mfrac b, .mfrac i { font-style: normal; font-weight: inherit; padding: 0 0.12em; font-size: 0.82em; }
.mfrac b { border-bottom: 0.09em solid currentColor; padding-bottom: 0.06em; }
.mfrac i { padding-top: 0.06em; }

/* ---------- Teach card: a wrong answer becomes a short picture-explanation ---------- */
#teach {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center;
  padding: 0 12px calc(14px + env(safe-area-inset-bottom)); pointer-events: none;
  transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#teach.on { transform: none; }
#teach:not(.on) .tc-card { pointer-events: none; } /* no swallowed taps while it slides away */
#teach .tc-card {
  pointer-events: auto; width: min(560px, 100%); max-height: 70vh; overflow: auto;
  padding: 16px 18px 14px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(28, 34, 70, 0.96), rgba(14, 18, 40, 0.96));
  border: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
#teach h3 { font: 400 clamp(26px, 6vw, 34px)/1 var(--display); color: var(--accent); letter-spacing: 0.02em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
#teach .tc-body { margin: 10px 0 12px; font-size: clamp(17px, 4.4vw, 21px); line-height: 1.45; color: #fff; }
#teach .tc-body b { color: var(--accent); }
#teach .tc-body .mfrac b { color: inherit; } /* a numerator is not emphasis */
#teach .tc-body .big { display: block; margin: 6px 0; font: 400 clamp(28px, 7vw, 40px)/1.15 var(--display); }
#teach .tc-btn {
  min-width: 170px; height: 54px; padding: 0 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1b1200;
  font: 400 24px var(--display); letter-spacing: 0.03em; box-shadow: 0 5px 0 var(--accent-deep);
}
#teach .tc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-deep); }
@media (max-height: 460px) and (orientation: landscape) {
  #teach .tc-card { padding: 10px 14px; max-height: 84vh; }
  #teach .tc-body { margin: 6px 0 8px; font-size: 17px; }
  #teach .tc-btn { height: 46px; font-size: 21px; }
}

/* ---------- Number pad ---------- */
.mk-pad {
  position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 35;
  display: none; flex-direction: column; gap: 6px; width: min(300px, 92vw); padding: 10px;
  border-radius: 20px; background: rgba(10, 14, 30, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.12); touch-action: manipulation;
}
.mk-pad.on { display: flex; }
.mk-pad.shake { animation: mk-shake 0.32s; }
@keyframes mk-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }
.mk-top { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); }
.mk-label { font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.mk-label:empty { display: none; }
.mk-disp { flex: 1; text-align: right; font: 400 32px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; overflow: hidden; }
.mk-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-key, .mk-gap { height: 56px; }
.mk-key {
  border-radius: 14px; background: linear-gradient(180deg, #fff9ea, #f1dfb8); color: #2d1d0c;
  font: 400 28px var(--display); box-shadow: 0 4px 0 #b89a62; transition: transform 0.06s;
}
.mk-key.down { transform: translateY(3px); box-shadow: 0 1px 0 #b89a62; }
.mk-key.k-back { background: linear-gradient(180deg, #ffd6d6, #f3a9a9); box-shadow: 0 4px 0 #b86a6a; }
.mk-key.k-enter { grid-column: span 2; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1b1200; box-shadow: 0 4px 0 var(--accent-deep); }
/* Portrait phones: full-width pad along the bottom. */
@media (max-width: 520px) and (orientation: portrait) {
  .mk-pad { left: 8px; right: 8px; width: auto; }
  .mk-key, .mk-gap { height: 52px; }
}
/* Landscape phones: short, wide keys on the right. */
@media (max-height: 460px) and (orientation: landscape) {
  .mk-pad { width: 280px; gap: 4px; padding: 7px; }
  .mk-top { min-height: 38px; }
  .mk-disp { font-size: 26px; }
  .mk-keys { gap: 4px; }
  .mk-key, .mk-gap { height: 40px; }
  .mk-key { font-size: 23px; }
}