/* Page: green table on every width; the clip grows with the game instead of keeping 4:3,
   and "Spiel vergrößern" enlarges the pegs instead of zooming the whole game. */

/* Registered, so that card and pegs can change smoothly: the card is measured from --mmd-card, the board and the
   pegs from --mmd-max, and both change together, frame by frame. */
@property --mmd-card {
  syntax: '<length>';
  inherits: true;
  initial-value: 600px;
}

@property --mmd-max {
  syntax: '<length>';
  inherits: true;
  initial-value: 44px;
}

.page-mastermind .game-section {
  background: #005000;
}

.page-mastermind .game-clip {
  --mmd-card: 600px;
  --mmd-max: 44px;
  aspect-ratio: auto;
  transition: width 0.3s ease, --mmd-card 0.3s ease, --mmd-max 0.3s ease;
}

.page-mastermind .game-clip--large {
  --mmd-card: 700px;
  --mmd-max: 56px;
}

.page-mastermind .game-clip--large .game-inner {
  zoom: 1;
}

@media (max-width: 850px) {
  .page-mastermind .game-section {
    padding: 20px 5px;
  }
}

/* Game */

#mmd-app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* One unit, --mmd-row, sizes the board: a row of holes is that high and each hole that wide. The board is twelve
   units high (ten rows, the hidden code, its gap and the edge) and as high as the window allows (--mmd-chrome is
   everything else above and below it); its column is always as wide as the five holes of Schwer, so that switching
   the level moves nothing. Beside the board stand levels, score, colours and buttons. */
#mmd-game {
  --mmd-pad: 16px;
  --mmd-chrome: 80px;
  --mmd-w: min(var(--mmd-card), calc(100vw - 20px));
  --mmd-row: max(22px, min(var(--mmd-max), calc((100vh - var(--mmd-chrome)) / 12)));
  --mmd-pp: max(30px, min(42px, calc(var(--mmd-row) * 0.95)));
  display: grid;
  grid-template-columns: calc(6.8 * var(--mmd-row)) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto auto 1fr;
  grid-template-areas: "board levels" "board new" "board score" "board palette" "board legend" "board tools" "board status" "board .";
  align-items: start;
  gap: 10px 20px;
  box-sizing: border-box;
  width: var(--mmd-w);
  padding: var(--mmd-pad);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  color: #1f2d1f;
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  user-select: none;
}

/* Buttons do not inherit the capitals on their own (the browser sets text-transform: none on them). */
#mmd-game button {
  text-transform: inherit;
}

/* The levels as one row of buttons; the one in play is lit (as the levels of Tic Tac Toe). */
#mmd-levels {
  grid-area: levels;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #edf1ed;
  border: 1px solid #d6ded6;
  border-radius: 8px;
}

#mmd-levels button {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  font: 600 13px 'Inter', system-ui, sans-serif;
  color: #556355;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#mmd-levels button.mmd-on {
  color: #005000;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: default;
}

/* The buttons of the other games (Games/shared/ui.css) as on the Sokoban page: light green with a green glow; under
   the mouse white with green letters and a thin green ring, no glow, because the card is white. */
#mmd-new,
#mmd-tools button {
  padding: 10px 14px;
  font: 600 14px 'Inter', system-ui, sans-serif;
  color: #fff;
  background: #00b050;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 176, 80, 0.8);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

#mmd-new {
  grid-area: new;
  display: grid;
  align-items: center;
}

/* "Neuer Code" and "Wirklich neu?" lie on one another; the button is as wide as the longer one. */
#mmd-new span {
  grid-area: 1 / 1;
}

#mmd-new span + span,
#mmd-new.mmd-ask span:first-child {
  visibility: hidden;
}

#mmd-new.mmd-ask span + span {
  visibility: visible;
}

/* the question: red with a red glow */
#mmd-new.mmd-ask {
  background: #e5534b;
  box-shadow: 0 0 8px rgba(229, 83, 75, 0.8);
}

#mmd-score {
  grid-area: score;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  container-type: inline-size;
}

.mmd-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 5px 2px;
  background: #f1f4f1;
  border-radius: 8px;
}

.mmd-score-label {
  font-size: min(12px, 4.8cqw);
  color: #556355;
  white-space: nowrap;
}

.mmd-score-value {
  font-size: min(20px, 7.6cqw);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

/* The board: the hidden code on top, below it the ten rows; each row has its holes and, beside them, a small box
   with one pin hole per peg. */
#mmd-board {
  --r: var(--mmd-row);
  grid-area: board;
  justify-self: center;
  display: flex;
  flex-direction: column;
  padding: calc(var(--r) * 0.3);
  background: #e3ebe3;
  border-radius: calc(var(--r) * 0.4);
}

.mmd-row {
  display: flex;
  align-items: center;
  height: var(--r);
  border-radius: calc(var(--r) / 2);
  transition: background 0.2s, box-shadow 0.2s;
}

.mmd-secret {
  margin-bottom: calc(var(--r) * 0.4);
  transition: background 0.3s;
}

.mmd-holes {
  display: flex;
}

.mmd-hole {
  position: relative;
  flex: none;
  width: var(--r);
  height: var(--r);
}

/* an empty hole */
.mmd-hole::before {
  content: '';
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: #c3cfc3;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* A peg: a glossy ball in its colour. */
.mmd-peg::before,
.mmd-color {
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 45%), var(--c);
}

.mmd-hole.mmd-peg::before {
  inset: 11%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 calc(var(--r) * -0.06) calc(var(--r) * 0.08) rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* The colours, picked so that they stay apart for colour-blind eyes too (mmdColors.mjs in the scratchpad). */
.mmd-c0 { --c: #de0d0c; }
.mmd-c1 { --c: #ffca00; }
.mmd-c2 { --c: #46b96c; }
.mmd-c3 { --c: #1137cc; }
.mmd-c4 { --c: #ffffff; }
.mmd-c5 { --c: #9e2e88; }
.mmd-c6 { --c: #f09c37; }
.mmd-c7 { --c: #10e4ff; }

/* The row in play: white, with a green ring; its holes take clicks, the active one has a green ring of its own. */
.mmd-row.mmd-cur {
  background: #fff;
  box-shadow: inset 0 0 0 2px #00b050;
}

.mmd-cur .mmd-hole {
  cursor: pointer;
}

.mmd-cur .mmd-hole.mmd-act::after {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #00b050;
}

.mmd-cur .mmd-hole.mmd-act:not(.mmd-peg)::before {
  inset: 11%;
  background: #e2f5e9;
  box-shadow: none;
}

/* The hidden code: dark covers with a question mark, until the round is over. */
.mmd-secret .mmd-hole:not(.mmd-peg)::before {
  inset: 11%;
  background: #3c4a3c;
  box-shadow: inset 0 calc(var(--r) * -0.06) calc(var(--r) * 0.08) rgba(0, 0, 0, 0.4);
}

.mmd-secret .mmd-hole:not(.mmd-peg)::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--r) * 0.38);
  font-weight: 600;
  color: #fff;
}

.mmd-won .mmd-secret {
  background: #d5f0dc;
  box-shadow: inset 0 0 0 2px #00b050;
}

.mmd-open .mmd-secret .mmd-peg::before {
  animation: mmd-pop 0.3s ease both;
}

.mmd-open .mmd-secret .mmd-peg:nth-child(2)::before { animation-delay: 0.08s; }
.mmd-open .mmd-secret .mmd-peg:nth-child(3)::before { animation-delay: 0.16s; }
.mmd-open .mmd-secret .mmd-peg:nth-child(4)::before { animation-delay: 0.24s; }
.mmd-open .mmd-secret .mmd-peg:nth-child(5)::before { animation-delay: 0.32s; }

/* A peg just put in pops. */
.mmd-hole.mmd-pop::before {
  animation: mmd-pop 0.16s ease;
}

/* The pins: two columns (three for five pegs), in a square beside the holes. */
.mmd-keys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  box-sizing: border-box;
  width: var(--r);
  height: var(--r);
  margin-left: calc(var(--r) * 0.2);
  padding: calc(var(--r) * 0.12);
}

.mmd-five .mmd-keys {
  grid-template-columns: repeat(3, 1fr);
  padding: calc(var(--r) * 0.04);
}

.mmd-five .mmd-keys .mmd-pin {
  width: calc(var(--mmd-row) * 0.19);
  height: calc(var(--mmd-row) * 0.19);
}

.mmd-pin {
  width: calc(var(--mmd-row) * 0.22);
  height: calc(var(--mmd-row) * 0.22);
  border-radius: 50%;
  background: #c3cfc3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}

.mmd-pin.mmd-black {
  background: #1f2d1f;
  box-shadow: none;
}

.mmd-pin.mmd-white {
  background: #fff;
  box-shadow: inset 0 0 0 1px #6f7f6f;
}

/* The pins of a guess just checked come one by one. */
.mmd-fresh .mmd-pin.mmd-black,
.mmd-fresh .mmd-pin.mmd-white {
  animation: mmd-pop 0.22s ease both;
}

.mmd-fresh .mmd-pin:nth-child(2) { animation-delay: 0.07s; }
.mmd-fresh .mmd-pin:nth-child(3) { animation-delay: 0.14s; }
.mmd-fresh .mmd-pin:nth-child(4) { animation-delay: 0.21s; }
.mmd-fresh .mmd-pin:nth-child(5) { animation-delay: 0.28s; }

/* What the pins mean, once and for all under the board. */
#mmd-legend {
  grid-area: legend;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: #556355;
}

#mmd-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#mmd-legend .mmd-pin {
  flex: none;
  width: 11px;
  height: 11px;
}

/* The colours to choose from, in two rows (the script sets --mmd-pcols to half of them). */
#mmd-palette {
  grid-area: palette;
  display: grid;
  grid-template-columns: repeat(var(--mmd-pcols, 4), var(--mmd-pp));
  justify-content: center;
  gap: 8px 10px;
}

.mmd-color {
  width: var(--mmd-pp);
  height: var(--mmd-pp);
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -3px 5px rgba(0, 0, 0, 0.22), 0 2px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.12s, opacity 0.15s;
}

.mmd-color:active:not(:disabled) {
  transform: scale(0.92);
}

/* On Einfach a colour already in the row is pale; at the end of a round all of them are. */
#mmd-palette .mmd-color:disabled {
  opacity: 0.25;
  cursor: default;
}

#mmd-tools {
  grid-area: tools;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#mmd-tools button {
  min-width: 0;
}

#mmd-tools button[hidden] {
  display: none;
}

#mmd-next {
  grid-column: 1 / -1;
}

#mmd-tools button:disabled {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
}

/* What the level asks for, or what just happened; room for two lines, so that a longer message moves nothing. */
#mmd-status {
  grid-area: status;
  min-height: 36px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* Said to screen readers only: each guess's pins in words. */
#mmd-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#mmd-new:focus-visible,
#mmd-tools button:focus-visible,
#mmd-levels button:focus-visible,
.mmd-color:focus-visible {
  outline: 3px solid #00b050;
  outline-offset: 2px;
}

/* Hover only where there is a mouse: after a tap on a phone it would stick. */
@media (hover: hover) {
  #mmd-new:not(.mmd-ask):hover,
  #mmd-tools button:not(:disabled):hover {
    color: #00b050;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00b050;
  }

  #mmd-new.mmd-ask:hover {
    background: #ef6a62;
  }

  /* as in the other games: while one button is under the mouse, the others lose their glow */
  #mmd-game:has(#mmd-new:hover, #mmd-tools button:not(:disabled):hover) :is(#mmd-new, #mmd-tools button):not(:hover) {
    box-shadow: none;
  }

  #mmd-levels button:not(.mmd-on):hover {
    color: #1f2d1f;
    background: rgba(0, 0, 0, 0.05);
  }

  .mmd-color:not(:disabled):hover {
    transform: scale(1.1);
  }

  .mmd-cur .mmd-hole:not(.mmd-act):hover::after {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 176, 80, 0.4);
  }
}

@keyframes mmd-pop {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-mastermind .game-clip,
  .mmd-hole::before,
  .mmd-pin,
  .mmd-row,
  .mmd-color {
    transition: none !important;
    animation: none !important;
  }
}

/* Tablets: the page header stands above the game. */
@media (min-width: 851px) and (max-width: 1024px) {
  #mmd-game {
    --mmd-chrome: 190px;
  }
}

/* Phones and other narrow windows: one column, the board in the middle, the colours in one row below it. */
@media (max-width: 560px) {
  #mmd-game {
    --mmd-pad: 12px;
    --mmd-chrome: 450px;
    --mmd-row: max(22px, min(var(--mmd-max), calc((100vh - var(--mmd-chrome)) / 12), calc((var(--mmd-w) - 2 * var(--mmd-pad)) / 6.8)));
    --mmd-pp: max(26px, min(42px, calc((var(--mmd-w) - 2 * var(--mmd-pad) - 7 * 6px) / 8)));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "levels" "score" "board" "legend" "palette" "tools" "new" "status";
    align-items: stretch;
  }

  #mmd-palette {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--mmd-pp);
    gap: 6px;
  }

  #mmd-status {
    min-height: 18px;
  }
}

@media (max-width: 360px) {
  #mmd-levels button {
    font-size: 12px;
  }
}

/* Phones held sideways: the board on the left, everything else beside it in two columns. */
@media (orientation: landscape) and (max-height: 500px) {
  #mmd-game {
    --mmd-w: min(760px, calc(100vw - 20px));
    --mmd-row: max(18px, calc((100vh - 96px) / 12));
    grid-template-columns: calc(6.8 * var(--mmd-row)) minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto auto 1fr;
    grid-template-areas: "board levels new" "board score score" "board palette palette" "board legend legend" "board tools tools" "board status status" "board . .";
    row-gap: 8px;
    column-gap: 16px;
  }

  #mmd-palette {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--mmd-pp);
    gap: 6px;
  }

  #mmd-status {
    min-height: 18px;
  }
}