/* Page: green table on every width; the clip grows with the game instead of keeping 4:3,
   and "Powiększ grę" 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) - 4 * var(--wdl-key) - 6px) / 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;
  /* the glow and the ring of the hover state in both states, so that they fade into each other */
  box-shadow: 0 0 8px rgba(0, 176, 80, 0.8), inset 0 0 0 1px rgba(0, 176, 80, 0);
  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: #fff;
  background: #2f7fd8;
  border-color: #2f7fd8;
}

.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;
}

/* The next free tile of the row in play: a blinking bar where the next letter goes. */
.wdl-tile.wdl-next::after {
  content: '';
  width: 2px;
  height: 1em;
  background: #00a050;
  animation: wdl-blink 1s steps(1) infinite;
}

/* A full row: Enter lights up, it is the next step; green with the still glow "Nowe słowo" has during a game. */
#wdl-keyboard .wdl-ready {
  color: #fff;
  background: #00b050;
  box-shadow: 0 0 8px rgba(0, 176, 80, 0.8);
}

/* Enter fades into and out of it, glow and all, instead of the glow jumping while the colour fades. */
#wdl-keyboard [data-key="Enter"] {
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, font-size 0.3s ease;
}

.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;
}

/* QWERTY and a fourth row Ą to Ż in a grid of 22 half columns: a key spans two (as wide as on the German keyboard of
   eleven columns), Enter and Delete four; every row starts where it stands centred. */
#wdl-keyboard {
  grid-area: keys;
  display: grid;
  grid-template-columns: repeat(22, minmax(0, 1fr));
  gap: 6px 5px;
  width: 100%;
}

.wdl-keyrow {
  display: contents;
}

#wdl-keyboard button {
  grid-column: span 2;
}

/* the ten keys of the first row from the second half column, the nine of the second and of the Polish row from the
   third, Enter, seven letters and Delete over the whole width */
#wdl-keyboard .wdl-keyrow > :first-child {
  grid-column: 2 / span 2;
}

#wdl-keyboard .wdl-keyrow:nth-child(2) > :first-child,
#wdl-keyboard .wdl-keyrow:nth-child(4) > :first-child {
  grid-column: 3 / span 2;
}

#wdl-keyboard .wdl-keyrow:nth-child(3) > :first-child {
  grid-column: 1 / span 4;
}

#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 4;
  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: 0 0 8px rgba(0, 176, 80, 0), 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):not(.wdl-ready):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); }
}

@keyframes wdl-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wdl-tile,
  .wdl-tile.wdl-next::after,
  .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, "Nowe słowo" goes under the keyboard. */
@media (max-width: 480px) {
  #wdl-game {
    --wdl-key: 44px;
    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-key: 37px;
  }

  #wdl-keyboard {
    row-gap: 5px;
  }

  #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: 28px;
    --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;
  }

  #wdl-keyboard {
    row-gap: 5px;
  }

  /* 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;
  }
}