/*
 * Game-specific overrides for "Mini sudoku". The shared look, the
 * hud/stage/pad grid and the background live in shared/shell.css - only
 * the board, the number keys and the controls are defined here.
 *
 * Same family as puzles/ and shikaku/: a cream board in a deep purple
 * frame, flat and calm. Givens are raised cream tiles with bold ink; the
 * child's own numbers are lighter purple on the flat board - told apart by
 * shape and weight, not by colour alone.
 */

:root {
  --ms-frame: #6f4a86;
  --ms-ink: #553669;
  --ms-own: #8d55b3;
  --ms-floor: #fbf2e2;
  --ms-tile: #f1e1c0;
  --ms-tile-edge: #d9c193;
  --ms-line: rgba(111, 74, 134, .22);
  --ms-good: #3cb54a;
  --ms-bad: #d8433e;
  --ms-hint: #e8912e;
  --ms-wall: 10px;
}

/* the site-wide feedback bubble (fixed bottom-left) would sit on the
   controls during play, same as in carrera/ and atrapamates/ */
body:has(#screen-game:not([hidden])) .am-fb-fab { display: none; }

/* ---- start screen ---- */
.start-hint {
  margin: -6px 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.25;
  color: var(--purple-dark);
  opacity: .9;
}
.ms-steps {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  gap: clamp(14px, 4vw, 34px);
  justify-content: center;
  counter-reset: step;
}
.ms-steps li {
  position: relative;
  width: clamp(92px, 27vw, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  counter-increment: step;
}
.ms-steps svg { width: 100%; height: auto; display: block; }
.ms-steps span {
  font-size: clamp(13px, 3.3vw, 16px);
  line-height: 1.2;
  color: var(--purple-dark);
}
.ms-steps span::before { content: counter(step) ". "; opacity: .7; }

/* ---- the rule / message line above the board ---- */
.ms-msg {
  flex: none;
  margin: 0 0 8px;
  min-height: 2.5em;
  max-width: 40ch;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 3.9vw, 21px);
  line-height: 1.2;
  color: var(--purple-dark);
}
.ms-msg.is-warn { color: var(--ms-bad); }
.ms-msg.is-hint { color: #b06d17; }
.ms-msg.is-info { color: var(--ms-ink); font-weight: bold; }

/* ---- board ----------------------------------------------------------
 * .board-wrap takes whatever room the stage has left; game.js (fitBoard)
 * measures it and sets --cell to the largest square cell that fits. */
.board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  width: 100%;
}
.ms-board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), var(--cell, 64px));
  grid-template-rows: repeat(var(--rows, 4), var(--cell, 64px));
  background: var(--ms-floor);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 var(--ms-wall) var(--ms-frame),
    0 0 0 calc(var(--ms-wall) + 3px) rgba(85, 54, 105, .32);
  user-select: none;
  -webkit-user-select: none;
}

.ms-cell {
  position: relative;
  box-sizing: border-box;
  border: none;
  border-right: 1.5px solid var(--ms-line);
  border-bottom: 1.5px solid var(--ms-line);
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .12s;
}
/* the last column/row sit against the frame */
.ms-cell.edge-r { border-right: none; }
.ms-cell.edge-b { border-bottom: none; }
.ms-cell.bx-r { border-right: 4px solid var(--ms-frame); }
.ms-cell.bx-b { border-bottom: 4px solid var(--ms-frame); }
.ms-cell:focus { outline: none; }
.ms-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--ms-ink); }

.ms-val {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(var(--cell, 64px) * .52);
  line-height: 1;
  pointer-events: none;
}
.ms-shape { width: 62%; height: 62%; display: block; }
.is-given .ms-val {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 8px;
  background: var(--ms-tile);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -4px 0 var(--ms-tile-edge);
  font-weight: 800;
  color: var(--ms-ink);
}
.is-own .ms-val { font-weight: 600; color: var(--ms-own); }
.is-own .ms-shape { width: 54%; height: 54%; }

/* pencil notes: a fixed spot per number (2 rows x 3 on 6x6) */
.ms-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  padding: 3px 4px;
  box-sizing: border-box;
  pointer-events: none;
}
.ms-notes i {
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: max(10px, calc(var(--cell, 64px) * .22));
  line-height: 1;
  color: var(--ms-ink);
  opacity: .75;
}

/* ---- states ---- */
.ms-cell.is-peer { background-color: rgba(111, 74, 134, .07); }
.ms-cell.is-sel { background-color: rgba(111, 74, 134, .2); box-shadow: inset 0 0 0 3px var(--ms-ink); }
.ms-cell.is-same .ms-val { text-decoration: underline 3px rgba(111, 74, 134, .45); text-underline-offset: 4px; }
.ms-cell.is-same.is-given .ms-val { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 0 var(--ms-tile-edge), 0 0 0 2px rgba(111, 74, 134, .35); }
.ms-cell.is-focus { background-color: rgba(60, 181, 74, .16); }
/* the unit the red line names: clearly tinted, so line and board agree */
.ms-cell.is-warn-unit, .ms-cell.is-warn-unit.is-peer { background-color: rgba(216, 67, 62, .2); }
.ms-cell.is-conflict { box-shadow: inset 0 0 0 3px var(--ms-bad); }
.ms-cell.is-conflict.is-own .ms-val { color: var(--ms-bad); }
.ms-cell.is-hint-unit { background-color: rgba(232, 145, 46, .16); }
.ms-cell.is-hint { background-color: rgba(232, 145, 46, .24); }
.ms-cell.is-hint::after, .ms-cell.is-wrong::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 3px dashed var(--ms-hint);
  animation: msPulse 1.1s ease-in-out infinite;
  pointer-events: none;
}
.ms-cell.is-wrong::after { border-color: var(--ms-bad); }
.ms-cell.is-blocker { box-shadow: inset 0 0 0 3px var(--ms-hint); }

/* first 6x6 of a session: the box lines pulse once to show the new shape */
.ms-board.is-intro .bx-r, .ms-board.is-intro .bx-b { animation: msBoxes 1.2s ease-in-out 2; }

.ms-board.is-solved .ms-val { animation: msCheer .5s ease-out both; animation-delay: var(--delay, 0s); }

/* ---- the lesson demo finger ---- */
.ms-finger {
  position: fixed;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 30;
  transition: left .6s ease-in-out, top .6s ease-in-out, transform .15s;
}
.ms-finger.is-still { transition: none; }
.ms-finger.is-tap { transform: scale(.75); }

/* ---- the options next to the tapped cell (game.js openPicker) ---- */
.ms-picker {
  position: fixed;
  z-index: 25;
  display: flex;
  gap: 6px;
  padding: 7px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--ms-frame), 0 8px 18px rgba(51, 32, 64, .3);
  animation: msPop .14s ease-out;
}
.ms-picker[hidden] { display: none; }
/* a small pointer at the cell it belongs to */
.ms-picker::before {
  content: "";
  position: absolute;
  left: var(--ax, 50%);
  top: -9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #fff;
  box-shadow: -3px -3px 0 0 var(--ms-frame);
  transform: rotate(45deg);
}
.ms-picker.is-above::before { top: auto; bottom: -9px; box-shadow: 3px 3px 0 0 var(--ms-frame); }
.ms-picker .ms-key {
  width: var(--pk, 48px);
  height: var(--pk, 48px);
  aspect-ratio: auto;
  font-size: calc(var(--pk, 48px) * .5);
  border-radius: 12px;
  position: relative;
}
.ms-picker .ms-key[hidden] { display: none; }
.ms-picker.is-notes .ms-key:not(.ms-key-del) { background: #fff; outline: 3px dashed var(--purple); outline-offset: -5px; font-size: calc(var(--pk, 48px) * .4); }
@keyframes msPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* ---- pad: number keys + controls ---- */
.ms-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.ms-keys {
  display: grid;
  grid-template-columns: repeat(calc(var(--n, 4) + 1), minmax(0, 60px));
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.ms-key {
  aspect-ratio: 1;
  width: 100%;
  border: none;
  border-radius: 14px;
  background: var(--key);
  color: var(--key-text);
  box-shadow: 0 4px 0 #c792b3;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .05s, opacity .15s;
}
.ms-key:active, .ms-key.is-demo { transform: translateY(3px); box-shadow: 0 1px 0 #c792b3; }
.ms-key.is-done { opacity: .4; }
.ms-key .ms-shape { width: 58%; height: 58%; }
.ms-key-del { background: #d88bb0; color: #fff; box-shadow: 0 4px 0 #b06a8f; }
.ms-key-del svg { width: 56%; height: 56%; }
/* note mode: the keys say so */
.ms-keys.is-notes .ms-key:not(.ms-key-del) { background: #fff; outline: 3px dashed var(--purple); outline-offset: -5px; font-size: 20px; }

.ms-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ms-btn {
  font-family: inherit;
  font-size: 17px;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: transform .05s, filter .12s;
}
.ms-btn[hidden] { display: none; }
.ms-btn:active { transform: translateY(3px); }
.ms-btn[disabled] { filter: grayscale(.6); opacity: .55; cursor: default; }
.ms-btn-undo, .ms-btn-restart, .ms-btn-notes { background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark); }
.ms-btn-notes.is-on { background: #fff; color: var(--purple-dark); box-shadow: 0 5px 0 var(--purple-dark), inset 0 0 0 3px var(--purple); }
.ms-btn-hint { background: var(--orange); box-shadow: 0 5px 0 #b06d17; }
.ms-btn-hint.is-place { background: var(--green); box-shadow: 0 5px 0 #2a8a35; }

@media (min-width: 640px) and (orientation: landscape) {
  .ms-keys { grid-template-columns: repeat(2, 70px); }
  .ms-keys.is-six { grid-template-columns: repeat(3, 70px); }
  .ms-key-del { grid-column: 1 / -1; aspect-ratio: auto; height: 52px; }
  .ms-controls { flex-direction: column; }
  .ms-btn { width: min(210px, 100%); }
}
@media (max-width: 400px) {
  .ms-btn { font-size: 15px; padding: 8px 13px; }
  .ms-controls { gap: 8px; }
  .ms-keys { gap: 6px; }
}
@media (min-width: 640px) and (orientation: landscape) and (max-height: 520px) {
  .ms-keys { grid-template-columns: repeat(3, 50px); gap: 6px; }
  .ms-keys.is-six { grid-template-columns: repeat(4, 46px); }
  .ms-key { font-size: 21px; }
  .ms-key-del { grid-column: auto; aspect-ratio: 1; height: auto; }
  .ms-controls { flex-direction: row; gap: 6px; }
  .ms-btn { width: auto; font-size: 14px; padding: 6px 11px; }
  .ms-pad { gap: 8px; }
  .feedback { min-height: 30px; }
  .ms-steps li { width: 100px; }
}

/* phone on its side: the rule line sits in the side column (see placeMsg) */
.ms-pad .ms-msg { margin: 0; min-height: 0; max-width: 26ch; font-size: 14px; }
.ms-pad .feedback { min-height: 30px; margin: -4px 0; }

@keyframes msPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes msBoxes { 0%, 100% { border-color: var(--ms-frame); } 50% { border-color: var(--ms-hint); } }
@keyframes msCheer {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-cell::after, .ms-board.is-intro .bx-r, .ms-board.is-intro .bx-b, .ms-board.is-solved .ms-val { animation: none !important; }
  .ms-finger { transition: none; }
  .ms-picker { animation: none; }
}