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

/* Registered, so that the width of the card can change smoothly: card, board and stones are all measured from it
   and grow together, frame by frame. */
@property --m3-card {
  syntax: '<length>';
  inherits: true;
  initial-value: 500px;
}

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

.page-match3 .game-clip {
  --m3-card: 500px;
  aspect-ratio: auto;
  transition: width 0.3s ease, --m3-card 0.3s ease;
}

.page-match3 .game-clip--large {
  --m3-card: 640px;
}

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

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

/* Game */

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

/* The board is a square as wide as the card allows and as high as the window allows (--m3-chrome is everything
   else on the screen), never under 240px; eight cells a side. */
#m3-game {
  --m3-pad: 16px;
  --m3-chrome: 210px;
  --m3-w: min(var(--m3-card), calc(100vw - 20px));
  --m3-board: max(240px, min(calc(var(--m3-w) - 2 * var(--m3-pad)), calc(100vh - var(--m3-chrome))));
  --m3-cell: calc(var(--m3-board) / 8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "levels new" "score score" "stage stage";
  justify-items: center;
  gap: 10px 8px;
  box-sizing: border-box;
  width: var(--m3-w);
  padding: var(--m3-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). */
#m3-game button {
  text-transform: inherit;
}

/* The levels as one row of buttons; the one in play is lit (as on the Sokoban page). */
#m3-levels {
  grid-area: levels;
  justify-self: stretch;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: #edf1ed;
  border: 1px solid #d6ded6;
  border-radius: 8px;
}

#m3-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;
}

#m3-levels button.m3-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. */
#m3-new,
#m3-over-buttons 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;
}

#m3-new {
  grid-area: new;
  align-self: stretch;
  display: grid;
  align-items: center;
}

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

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

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

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

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

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

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

.m3-score-value {
  font-size: min(20px, 6cqw);
  font-weight: 600;
  line-height: 1.1;
}

/* The points just won rise out of the score and fade. */
.m3-plus {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #179a4b;
  text-align: center;
  pointer-events: none;
  animation: m3-rise 0.6s ease-out forwards;
}

/* The board and, above it, the message at the end and the short note after a shuffle. */
#m3-stage {
  grid-area: stage;
  position: relative;
}

/* A dark green board in squares; the stones lie above it. */
#m3-board {
  position: relative;
  width: var(--m3-board);
  height: var(--m3-board);
  overflow: hidden;
  background: repeating-conic-gradient(#26432f 0 25%, #1d3626 0 50%) 0 0 / calc(var(--m3-cell) * 2) calc(var(--m3-cell) * 2);
  border-radius: 10px;
  touch-action: none;
  cursor: pointer;
}

#m3-board.m3-done {
  cursor: default;
}

.m3-defs {
  position: absolute;
}

#m3-stones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A stone stands at column --x and row --y (set by the script) and falls or slides there. Size and place are parts
   of the board, not lengths: when the board grows, the stones grow with it in the same frame, and their transition
   (which is for falling and swapping) does not start, because the value of the transform stays the same. */
.m3-stone,
#m3-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
}

.m3-stone {
  transition: transform 0.28s ease-in;
}

.m3-swap .m3-stone {
  transition: transform 0.16s ease-in-out;
}

.m3-stone > svg,
.m3-rainbow {
  position: absolute;
  left: 7%;
  top: 7%;
  width: 86%;
  height: 86%;
  transition: transform 0.15s;
}

.m3-stone > svg {
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}

.m3-body {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 3;
  stroke-linejoin: round;
}

.m3-shine {
  fill: #fff;
  opacity: 0.5;
}

/* A bomb: a white spark in the stone, which glows. */
.m3-spark {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 2;
  stroke-linejoin: round;
}

.m3-bomb > svg {
  animation: m3-glow 1.1s ease-in-out infinite alternate;
}

/* A cross: a white cross on the stone. */
.m3-bar-under,
.m3-bar {
  fill: none;
  stroke-linecap: round;
}

.m3-bar-under {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 13;
}

.m3-bar {
  stroke: #fff;
  stroke-width: 8;
}

/* A star: all the colours, with a white heart. */
.m3-rainbow {
  background:
    radial-gradient(circle at 50% 56%, #fff 0 13%, transparent 14%),
    conic-gradient(#ff5252, #ffd740, #69f0ae, #40c4ff, #b388ff, #ff4081, #ff5252);
  clip-path: polygon(50% 3%, 62% 37%, 97% 37%, 68% 58%, 79% 93%, 50% 72%, 21% 93%, 32% 58%, 3% 37%, 38% 37%);
}

/* The stone picked: larger, with a white ring. */
.m3-sel::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 22%;
  box-shadow: 0 0 0 3px #fff, 0 0 12px 3px rgba(255, 255, 255, 0.55);
}

.m3-sel > svg,
.m3-sel > .m3-rainbow {
  transform: scale(1.12);
}

/* The two stones of a possible move, after a while without a move. */
.m3-hint > svg,
.m3-hint > .m3-rainbow {
  animation: m3-nudge 0.9s ease-in-out infinite;
}

/* Going: they swell a little and are gone; coming: they grow out of nothing. */
.m3-gone > svg,
.m3-gone > .m3-rainbow {
  animation: m3-vanish 0.23s ease-in forwards;
}

.m3-born > svg,
.m3-born > .m3-rainbow {
  animation: m3-appear 0.25s ease-out;
}

/* The frame of the keyboard, shown only once the keys are used. */
#m3-cursor {
  display: none;
  box-sizing: border-box;
  border: 3px dashed #ffd54f;
  border-radius: 18%;
  pointer-events: none;
}

.m3-kb #m3-cursor:not([hidden]) {
  display: block;
}

/* A bomb going off lights its square of nine, a cross its row and column. */
.m3-burst,
.m3-beam {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  animation: m3-flash 0.45s ease-out forwards;
}

.m3-burst {
  width: calc(var(--m3-cell) * 3);
  height: calc(var(--m3-cell) * 3);
  transform: translate(calc((var(--x) - 1) * var(--m3-cell)), calc((var(--y) - 1) * var(--m3-cell)));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 214, 90, 0.55) 45%, transparent 70%);
}

.m3-beam-row {
  width: 100%;
  height: var(--m3-cell);
  transform: translateY(calc(var(--y) * var(--m3-cell)));
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.9), transparent);
}

.m3-beam-col {
  width: var(--m3-cell);
  height: 100%;
  transform: translateX(calc(var(--x) * var(--m3-cell)));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

/* centred by margin, not by left: 50%, which would leave it only half the board to wrap in */
#m3-toast {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  z-index: 4;
  width: fit-content;
  max-width: 88%;
  margin: 0 auto;
  padding: 8px 14px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  background: rgba(31, 45, 31, 0.92);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

#m3-toast.m3-show {
  opacity: 1;
}

#m3-over {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(238, 243, 238, 0.92);
  border-radius: 10px;
  text-align: center;
  animation: m3-fade 0.4s ease 0.15s both;
}

#m3-over.m3-show {
  display: flex;
}

#m3-over-title {
  margin: 0;
  font-size: calc(var(--m3-board) * 0.08);
  font-weight: 600;
  line-height: 1.2;
  color: #1d7f42;
}

/* the points on one line, the record on the next */
#m3-over-text {
  max-width: 30em;
  margin: 0 0 4px;
  white-space: pre-line;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

#m3-over-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Said to screen readers only; the board says it to the eye. */
#m3-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#m3-new:focus-visible,
#m3-over-buttons button:focus-visible,
#m3-levels button: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) {
  /* white with green letters as in the other games; on the white card a thin green ring and no glow */
  #m3-new:not(.m3-ask):hover,
  #m3-over-buttons button:hover {
    color: #00b050;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00b050;
  }

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

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

@keyframes m3-glow {
  0% { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)); }
  100% { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.95)); }
}

@keyframes m3-nudge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes m3-vanish {
  0% { opacity: 1; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(0); }
}

@keyframes m3-appear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m3-flash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes m3-rise {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

@keyframes m3-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .page-match3 .game-clip,
  .m3-stone,
  .m3-stone > svg,
  .m3-rainbow,
  #m3-toast,
  #m3-over {
    transition: none !important;
    animation: none !important;
  }
}

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

/* The narrowest phones: a little less padding. */
@media (max-width: 360px) {
  #m3-game {
    --m3-pad: 12px;
  }

  #m3-levels button {
    font-size: 12px;
  }
}

/* On phones the three levels need the whole row: "Neues Spiel" goes below the board. */
@media (max-width: 480px) {
  #m3-game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "levels" "score" "stage" "new";
  }

  #m3-new {
    justify-self: stretch;
  }
}

/* Phones held sideways: board on the left, everything else beside it. */
@media (orientation: landscape) and (max-height: 500px) {
  #m3-game {
    --m3-w: min(760px, calc(100vw - 20px));
    --m3-board: max(200px, calc(100vh - 96px));
    grid-template-areas: "stage levels" "stage new" "stage score" "stage .";
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: 16px;
    row-gap: 8px;
  }

  #m3-new {
    align-self: start;
    justify-self: stretch;
  }

  .m3-score-label {
    font-size: min(12px, 7cqw);
  }

  .m3-score-value {
    font-size: min(18px, 10cqw);
  }
}