/* ==========================================================
   Math Master Board – WordPress Plugin Stylesheet
   All rules scoped to #mmb-root to prevent theme conflicts
   ========================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Short+Stack&display=swap');

/* ── Root Scoping & CSS Variables ── */
#mmb-root,
#mmb-root * {
  box-sizing: border-box;
}

#mmb-root {
  --mmb-chalk-yellow:   #f6ec59;
  --mmb-chalk-blue:     #7dd3fc;
  --mmb-chalk-green:    #4ade80;
  --mmb-chalk-red:      #f87171;
  --mmb-board-green:    #0c3823;
  --mmb-board-dark:     #072417;
  --mmb-wood-brown:     #8B4513;
  --mmb-amber:          #f59e0b;
  --mmb-sky:            #38bdf8;
  --mmb-font-chalk:     'Short Stack', cursive;
  --mmb-font-ui:        'Fredoka', cursive, sans-serif;
  font-family: var(--mmb-font-ui);
  color: #fff;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px;
}

/* ── Chalkboard Slate ── */
.mmb-wood-border {
  border: 14px solid var(--mmb-wood-brown);
  border-image: linear-gradient(
    to right, #5c2c0c, #8B4513, #a0522d, #8B4513, #5c2c0c
  ) 14;
  border-radius: 4px;
}

.mmb-chalkboard-bg {
  background-color: var(--mmb-board-green);
  background-image:
    radial-gradient(rgba(255,255,255,.10) 15%, transparent 20%),
    radial-gradient(rgba(255,255,255,.05) 15%, transparent 20%);
  background-size: 4px 4px, 8px 8px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.8);
}

.mmb-slate {
  min-height: 560px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

/* ── Rope Decoration ── */
.mmb-rope {
  position: absolute;
  top: 0;
  width: 32px;
  height: 32px;
  opacity: .4;
  pointer-events: none;
}
.mmb-rope-left  { left: 40px; }
.mmb-rope-right { right: 40px; }

/* ── Header Panel ── */
.mmb-header-panel {
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(4,120,87,.4);
  border-radius: 10px;
  padding: 12px;
  z-index: 2;
}

.mmb-title-bar {
  text-align: center;
  margin-bottom: 12px;
}

.mmb-title {
  font-family: var(--mmb-font-ui);
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: .05em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mmb-badge {
  font-size: .6em;
  background: #b45309;
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Controls Grid ── */
.mmb-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .mmb-controls-grid { grid-template-columns: repeat(4, 1fr); }
}

.mmb-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mmb-label {
  font-size: .72rem;
  font-weight: 600;
  color: #fcd34d;
  display: block;
  margin-bottom: 2px;
}

.mmb-label-small {
  font-size: .65rem;
  color: #d1d5db;
  display: block;
  margin-bottom: 2px;
}

.mmb-select {
  width: 100%;
  background: var(--mmb-board-dark);
  border: 1px solid #065f46;
  color: #fff;
  border-radius: 6px;
  padding: 5px 6px;
  font-family: var(--mmb-font-ui);
  font-size: .78rem;
  appearance: auto;
}

/* ── Operation Buttons ── */
.mmb-op-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--mmb-board-dark);
  border: 1px solid #065f46;
  border-radius: 6px;
  padding: 4px;
}

.mmb-op-btn {
  padding: 4px 2px;
  border-radius: 4px;
  text-align: center;
  font-family: var(--mmb-font-ui);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  background: #374151;
  color: #fff;
  transition: background .15s, transform .1s;
}

.mmb-op-btn:hover   { background: #4b5563; }
.mmb-op-btn.mmb-op-active {
  background: #f59e0b;
  color: #1c1917;
}

/* ── Digits Config (2-col inside ctrl-group) ── */
#mmb-digits-config {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex-direction: unset;
}

#mmb-digits-config.mmb-disabled {
  opacity: .4;
  pointer-events: none;
}

/* ── Score Bar ── */
.mmb-score-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  z-index: 2;
}

.mmb-score-label {
  font-size: .75rem;
  color: #7dd3fc;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 6px;
}

#mmb-star-counter {
  font-size: .9rem;
  color: #fde68a;
  font-weight: 700;
}

.mmb-no-stars {
  color: #6b7280;
  font-size: .7rem;
  font-style: italic;
  font-weight: 400;
}

.mmb-preset-label {
  color: #fbbf24;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
}

.mmb-score-right {
  font-size: .7rem;
  color: #9ca3af;
  font-style: italic;
}

/* ── Workspace ── */
.mmb-workspace {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  min-height: 240px;
  z-index: 2;
}

/* ── Welcome Screen ── */
.mmb-welcome {
  text-align: center;
  border: 2px dashed #064e3b;
  border-radius: 14px;
  background: rgba(9,45,28,.6);
  padding: 28px 20px;
  max-width: 360px;
  width: 100%;
}

.mmb-welcome-title {
  font-family: var(--mmb-font-chalk);
  color: var(--mmb-chalk-yellow);
  text-shadow: 0 0 4px rgba(246,236,89,.4);
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.mmb-welcome-body {
  color: #d1d5db;
  font-size: .8rem;
  margin-bottom: 16px;
  font-family: var(--mmb-font-ui);
}

/* ── Generic Button Styles ── */
.mmb-btn {
  font-family: var(--mmb-font-ui);
  font-weight: 700;
  font-size: .72rem;
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mmb-btn:hover { transform: translateY(-1px); }

.mmb-btn-yellow  { background: #fbbf24; color: #1c1917; }
.mmb-btn-yellow:hover { background: #fde68a; }

.mmb-btn-blue    { background: #2563eb; color: #fff; }
.mmb-btn-blue:hover { background: #3b82f6; }

.mmb-btn-red     { background: #b91c1c; color: #fff; }
.mmb-btn-red:hover { background: #ef4444; }

.mmb-btn-green   { background: #065f46; color: #fff; }
.mmb-btn-green:hover { background: #047857; }

.mmb-btn-dark    { background: #1f2937; color: #6ee7b7; }
.mmb-btn-dark:hover { background: #374151; color: #fff; }

/* ── Action Bar ── */
.mmb-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed #064e3b;
  padding-top: 12px;
  z-index: 2;
}

.mmb-action-left,
.mmb-action-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mmb-alert {
  font-family: var(--mmb-font-ui);
  font-size: .85rem;
  font-weight: 600;
  color: #fde68a;
  text-align: center;
  min-width: 160px;
  flex: 1;
}

/* ── Chalk Inputs (shared) ── */
.mmb-chalk-input {
  background: rgba(255,255,255,.05);
  border: 2px dashed rgba(246,236,89,.35);
  color: var(--mmb-chalk-yellow);
  font-family: var(--mmb-font-chalk);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  transition: border .15s, background .15s, transform .1s;
  outline: none;
}

.mmb-chalk-input:focus {
  border: 2px solid var(--mmb-chalk-yellow);
  background: rgba(246,236,89,.1);
  transform: scale(1.06);
}

.mmb-input-correct {
  border: 2px solid #4ade80 !important;
  background: rgba(74,222,128,.2) !important;
  color: #86efac !important;
}

.mmb-input-wrong {
  border: 2px dashed #f87171 !important;
  background: rgba(239,68,68,.2) !important;
  color: #fca5a5 !important;
}

/* ── Standard Grid Layout ── */
.mmb-grid-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mmb-digit-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  font-family: var(--mmb-font-chalk);
  color: var(--mmb-chalk-yellow);
  text-shadow: 0 0 4px rgba(246,236,89,.4);
  font-weight: 700;
  position: relative;
  user-select: none;
}

.mmb-digit-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mmb-operator-label {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mmb-chalk-blue);
  text-shadow: 0 0 4px rgba(125,211,252,.4);
  font-weight: 700;
  user-select: none;
}

.mmb-chalk-line {
  width: 100%;
  border: none;
  border-top: 2px solid var(--mmb-sky);
  box-shadow: 0 1px 3px rgba(56,189,248,.4);
  margin: 8px 0;
}

.mmb-answer-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.mmb-carry-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 4px;
}

/* ── Multiplication Layout ── */
.mmb-mul-step-row {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 3px;
}

.mmb-mul-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  font-weight: 700;
  font-family: var(--mmb-font-chalk);
  user-select: none;
}

/* ── Division Layout ── */
.mmb-div-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: var(--mmb-font-chalk);
}

.mmb-div-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.mmb-div-num {
  font-weight: 700;
  color: var(--mmb-chalk-yellow);
  text-shadow: 0 0 4px rgba(246,236,89,.4);
  letter-spacing: .08em;
  user-select: none;
}

.mmb-div-bracket {
  color: #7dd3fc;
  font-size: 1.6em;
  line-height: 1;
  user-select: none;
  transform: scaleY(1.2);
  display: inline-block;
}

.mmb-div-quotient-row {
  display: flex;
  gap: 4px;
}

.mmb-div-steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 280px;
  font-size: 1rem;
}

.mmb-div-step-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

.mmb-div-minus {
  color: #7dd3fc;
  font-size: 1.2em;
  font-weight: 700;
  user-select: none;
}

.mmb-div-arrow {
  font-size: .75rem;
  user-select: none;
}

.mmb-remainder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-top: 6px;
}

.mmb-rem-label {
  font-size: .65rem;
  color: #7dd3fc;
  text-transform: uppercase;
  letter-spacing: .08em;
  user-select: none;
}

/* ── Responsive Tweaks ── */
@media (max-width: 480px) {
  #mmb-root            { padding: 4px; }
  .mmb-slate           { padding: 10px 8px; gap: 8px; }
  .mmb-action-bar      { flex-direction: column; align-items: stretch; }
  .mmb-action-left,
  .mmb-action-right    { justify-content: center; }
  .mmb-alert           { order: -1; }
  .mmb-wood-border     { border-width: 10px; }
  .mmb-controls-grid   { grid-template-columns: 1fr 1fr; }
}