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

/* Registered, so that tiles, keys and card can change smoothly, all together, frame by frame. */
@property --wdl-max {
  syntax: '<length>';
  inherits: true;
  initial-value: 62px;
}

@property --wdl-key {
  syntax: '<length>';
  inherits: true;
  initial-value: 54px;
}

@property --wdl-card {
  syntax: '<length>';
  inherits: true;
  initial-value: 500px;
}

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

.page-wordle .game-clip {
  --wdl-max: 62px;
  --wdl-key: 54px;
  --wdl-card: 500px;
  aspect-ratio: auto;
  transition: width 0.3s ease, --wdl-max 0.3s ease, --wdl-key 0.3s ease, --wdl-card 0.3s ease;
}

.page-wordle .game-clip--large {
  --wdl-max: 80px;
  --wdl-key: 62px;
  --wdl-card: 620px;
}

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

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

/* Game */

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

/* The tile size comes from the window: the height left over for the six rows (--wdl-chrome is everything
   else on the screen but the keyboard), the width of the card for seven letters, and at most --wdl-max.
   It is the same for every word length, so that switching the length does not move the keyboard. */
#wdl-game {
  --wdl-pad: 16px;
  --wdl-chrome: 253px;
  --wdl-w: min(var(--wdl-card), calc(100vw - 20px));
  --wdl-tile: max(30px, min(var(--wdl-max),
    calc((100vh - var(--wdl-chrome) - 3 * var(--wdl-key)) / 6.5),
    calc((var(--wdl-w) - 2 * var(--wdl-pad)) / 7.6)));
  --wdl-gap: calc(var(--wdl-tile) / 10);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "score new" "lens lens" "board board" "status status" "keys keys";
  justify-items: center;
  gap: 10px 8px;
  box-sizing: border-box;
  width: var(--wdl-w);
  padding: var(--wdl-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). */
#wdl-game button {
  text-transform: inherit;
}

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

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

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

.wdl-score-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

/* 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. */
#wdl-new {
  grid-area: new;
  align-self: stretch;
  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;
}

#wdl-new.wdl-pulse {
  animation: wdl-pulse 1.2s ease-in-out infinite;
}

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

/* The word length: a caption and four buttons, the one in play white (as the levels of Tic Tac Toe). */
#wdl-lens {
  grid-area: lens;
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #edf1ed;
  border: 1px solid #d6ded6;
  border-radius: 8px;
}

.wdl-lens-label {
  flex: 0 0 auto;
  padding: 0 10px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #556355;
}

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

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

/* Six rows of as many tiles as the word has letters (--wdl-len, set by the script). */
#wdl-board {
  grid-area: board;
  display: grid;
  grid-template-rows: repeat(6, var(--wdl-tile));
  gap: var(--wdl-gap);
}

.wdl-row {
  display: grid;
  grid-template-columns: repeat(var(--wdl-len, 6), var(--wdl-tile));
  gap: var(--wdl-gap);
}

.wdl-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: calc(var(--wdl-tile) * 0.52);
  font-weight: 600;
  line-height: 1;
  color: #1f2d1f;
  background: #fff;
  border: 2px solid #d3dcd3;
  border-radius: 4px;
}

.wdl-tile.wdl-filled {
  border-color: #6b786b;
}

/* Right letter in the right place, a letter of the word in another place, not in the word. */
.wdl-tile.wdl-c,
#wdl-keyboard .wdl-c {
  color: #fff;
  background: #179a4b;
  border-color: #179a4b;
}

.wdl-tile.wdl-p,
#wdl-keyboard .wdl-p {
  color: #1f2d1f;
  background: #ffc233;
  border-color: #ffc233;
}

.wdl-tile.wdl-a,
#wdl-keyboard .wdl-a {
  color: #fff;
  background: #7b867b;
  border-color: #7b867b;
}

.wdl-tile.wdl-pop {
  animation: wdl-pop 0.1s ease-out;
}

.wdl-tile.wdl-flip {
  animation: wdl-flip 0.5s ease-in-out;
}

.wdl-tile.wdl-bounce {
  animation: wdl-bounce 0.6s ease-out both;
}

.wdl-row.wdl-shake {
  animation: wdl-shake 0.4s;
}

#wdl-status {
  grid-area: status;
  min-height: 1.4em;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

#wdl-status.wdl-error {
  color: #c9443e;
}

/* QWERTZ in a grid of eleven equal columns; Enter and Delete take two each. */
#wdl-keyboard {
  grid-area: keys;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px 5px;
  width: 100%;
}

.wdl-keyrow {
  display: contents;
}

#wdl-keyboard button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wdl-key);
  min-width: 0;
  padding: 0;
  font: 600 17px 'Inter', system-ui, sans-serif;
  color: #1f2d1f;
  background: #e3e9e3;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  /* the letters grow with the key when the game is enlarged */
  transition: background 0.15s, color 0.15s, font-size 0.3s ease;
}

#wdl-keyboard .wdl-wide {
  grid-column: span 2;
  font-size: 13px;
}

#wdl-keyboard svg {
  width: 24px;
  height: 24px;
}

.game-clip--large #wdl-keyboard button {
  font-size: 20px;
}

.game-clip--large #wdl-keyboard .wdl-wide {
  font-size: 15px;
}

#wdl-keyboard button:focus-visible,
#wdl-lens button:focus-visible,
#wdl-new:focus-visible {
  outline: 3px solid #00b050;
  outline-offset: 1px;
}

/* Hover only where there is a mouse: after a tap on a phone it would stick to the key. */
@media (hover: hover) {
  #wdl-new:not(.wdl-confirm):hover {
    color: #00b050;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00b050;
  }

  #wdl-new.wdl-confirm:hover {
    background: #ef6a62;
  }

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

  #wdl-keyboard button:not(.wdl-c):not(.wdl-p):not(.wdl-a):hover {
    background: #d3ddd3;
  }
}

@keyframes wdl-pop {
  50% { transform: scale(1.1); }
}

@keyframes wdl-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

@keyframes wdl-bounce {
  0%, 20%, 50%, 100% { transform: translateY(0); }
  35% { transform: translateY(-30%); }
  70% { transform: translateY(-10%); }
}

@keyframes wdl-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

@keyframes wdl-pulse {
  50% { box-shadow: 0 0 0 4px rgba(0, 176, 80, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .wdl-tile,
  .wdl-row,
  #wdl-new.wdl-pulse {
    animation: none !important;
  }

  .page-wordle .game-clip {
    transition: none;
  }

  #wdl-keyboard button {
    transition: background 0.15s, color 0.15s;
  }
}

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

/* Phones: the score takes the whole top row, "Neues Wort" goes under the keyboard. */
@media (max-width: 480px) {
  #wdl-game {
    --wdl-key: 50px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "score" "lens" "board" "status" "keys" "new";
  }

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

  #wdl-keyboard {
    gap: 6px 4px;
  }

  #wdl-keyboard button {
    font-size: 16px;
  }
}

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

  #wdl-keyboard button {
    font-size: 15px;
  }

  #wdl-keyboard .wdl-wide {
    font-size: 11px;
  }
}

/* Phones held sideways: board on the left, everything else beside it. */
@media (orientation: landscape) and (max-height: 500px) {
  #wdl-game {
    --wdl-key: 38px;
    --wdl-w: min(760px, calc(100vw - 20px));
    --wdl-tile: max(26px, min(var(--wdl-max), calc((100vh - 110px) / 6.5)));
    grid-template-areas: "board score" "board lens" "board status" "board keys" "board new";
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    column-gap: 16px;
  }

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

  /* The board keeps the width of seven letters, so that the column beside it stays put for every length. */
  #wdl-board {
    width: calc(var(--wdl-tile) * 7 + var(--wdl-gap) * 6);
  }

  .wdl-row {
    justify-content: center;
  }

  .wdl-score-box {
    padding: 4px 2px;
  }

  .wdl-score-value {
    font-size: 18px;
  }
}