/*
 * Game-specific styles for dividir/. Two stage layouts share the one
 * .stage-area grid cell (only one is shown at a time, picked by game.js
 * from ?level=/?variant=): the written "caja" worksheet
 * (shared/division-grid.js), and the plain inverse ("prueba" variant)
 * equation + single answer box.
 *
 * No original C2 art exists for this game - dividir is a new mechanic
 * (game #9 of the design doc), not a port (same as puzles/, the other
 * non-ported game). A third "reparto" visual-sharing mechanic (drag items
 * into boxes) was built and cut after playtesting - see CLAUDE.md.
 */

.ws-prompt, .prueba-eq {
  font-size: clamp(16px, 3.8vw, 23px);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
  line-height: 1.15;
  margin: 0;
  min-height: 1.2em;
  max-width: 34ch;
  text-align: center;
}

/* The written-mode worksheet (dividend + staircase + prueba line) can run
   taller than the shell's plain `1fr` stage row on a short phone - same
   overflow shell.css's multiplicar/style.css already documents for its
   own worksheet. Let the row grow to fit its content instead of letting
   the worksheet silently overlap the keypad below it. */
.game-screen { grid-template-rows: auto minmax(min-content, 1fr) auto; }
.stage-area { min-height: min-content; gap: clamp(6px, 1.6vh, 14px); }

@media (min-width: 640px) and (orientation: landscape) {
  .game-screen { grid-template-rows: auto minmax(min-content, 1fr); }
}

/* ============================= written (caja) ======================= */
.written-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.dgrid {
  --digit: clamp(22px, 6vw, 38px);
  display: grid;
  grid-template-columns: repeat(var(--dcols, 3), var(--digit)) auto;
  grid-auto-rows: minmax(var(--digit), auto);
  gap: 6px 4px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .58);
  border: 2px solid #fff;
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(122, 67, 128, .18), inset 0 2px 6px rgba(0, 0, 0, .08);
  font-variant-numeric: tabular-nums;
}

.dg-dividend { display: contents; }
.dg-dcell {
  font: inherit;
  font-size: var(--digit);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dg-dcell.dg-sel { border-bottom-color: var(--purple); }
.dg-dcell.dg-locked { border-bottom-color: var(--green); cursor: default; }
.dg-dcell:disabled { cursor: default; }

.dg-bracket {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-left: 10px;
  border-left: 4px solid var(--purple-dark);
  justify-content: flex-start;
}
.dg-divisor {
  font-size: var(--digit);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
  border-bottom: 4px solid var(--purple-dark);
  padding: 0 6px 4px 2px;
}
.dg-qrow { display: flex; gap: 4px; }

.dg-row { display: flex; gap: 4px; align-items: center; }
.dg-bring {
  width: var(--digit);
  min-height: 1.34em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--digit);
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
}
.dg-bring.dg-drop { animation: dgDrop .35s ease-out; }
@keyframes dgDrop {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.dgrid .ws-input.dg-qbox,
.dgrid .ws-input.dg-rembox { width: var(--digit); min-height: 1.34em; }
.dgrid .ws-input.dg-qbox { background: #fff9ec; }

.dg-dim { opacity: .32; pointer-events: none; transition: opacity .3s; }

.dg-prueba {
  font-size: clamp(14px, 3vw, 18px);
  color: var(--green);
  font-weight: bold;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.dg-prueba.show { opacity: 1; transform: translateY(0); }

/* ============================= prueba variant ======================= */
.prueba-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.prueba-stage .ws-input {
  width: 110px;
  height: 56px;
  font-size: 30px;
  margin: 0 auto;
}

@media (min-width: 640px) and (orientation: landscape) {
  .ws-prompt, .prueba-eq { max-width: 15rem; font-size: clamp(13px, 1.6vw, 18px); }
}