/* Page: the game stands straight on the green table, without a card around it. The section grows with
   the game, so nothing inside it ever needs its own scroll bar. */

.page-crossword .game-section {
  background: #005000;
  height: auto;
}

@media (min-width: 1025px) {
  .page-crossword .game-section {
    min-height: 100vh;
  }
}

@media (max-width: 850px) {
  .page-crossword .game-section {
    padding: 12px 6px 28px;
  }
}

.page-crossword .game-col {
  container-type: inline-size;
}

/* At the top, not centred in the section: centred, a longer list of clues would move the board. */
.page-crossword .game-clip {
  width: 100%;
  margin: 0 auto;
  aspect-ratio: auto;
}

/* Full width, not as wide as its content: otherwise longer clues would widen it and shift the middle. */
.page-crossword .game-inner {
  width: 100%;
}

/* Game */

#kwr-app {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* The board is a square whose size depends on the window only, never on the puzzle; the puzzle sits in
   its middle, a cell is the board divided by the frame (--frame, from the script). Left of it the across
   and the down clues, one below the other, and the buttons with the status, level with the board's lower
   edge; below the board only the screen keys (touch only). A new puzzle therefore moves neither the board
   nor the buttons, as long as its clues fit above them; only the puzzle in the board and the clues beside
   it are centred anew. The board is as high as the window allows, never smaller than 440 px nor larger
   than 820 px. */
#kwr-game {
  --frame: 15;
  --cols: 15;
  --rows: 15;
  --kwr-vh: 100vh;
  --kwr-pad: 24px;
  /* The clues take the width the board cannot use (it is as high as the window allows), at least 320 and
     at most 420 px: wider lines wrap less, so the 25 clues fit beside the board in lower windows too. Below
     320 px they wrap so much that they no longer fit beside any board. */
  --kwr-lists-w: clamp(320px, 100cqw - 2 * var(--kwr-pad) - 40px - min(820px, var(--kwr-vh) - 2 * var(--kwr-pad) - var(--kwr-keys-h)), 420px);
  --kwr-side: calc(var(--kwr-lists-w) + 40px);
  --kwr-keys-h: 168px; /* the screen keys and the gap above them; 0 with a mouse */
  --kwr-board: min(100cqw - 2 * var(--kwr-pad) - var(--kwr-side), max(440px, var(--kwr-vh) - 2 * var(--kwr-pad) - var(--kwr-keys-h)), 820px);
  --kwr-pitch: calc((var(--kwr-board) - 2px) / var(--frame));
  /* What the clues column needs at its narrowest: the tallest clue lists (about 580 px at 320 px wide),
     the buttons with the status and the padding. Where the board is held back by the width (1280 x 720),
     the column takes the room the window has below the board, and the buttons stand at its foot. */
  --kwr-floor: min(var(--kwr-vh), 712px);
  display: grid;
  grid-template-columns: var(--kwr-lists-w) var(--kwr-board);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "lists board" "lists keys" "controls keys";
  justify-content: center;
  align-items: start;
  gap: 20px 40px;
  /* As high as board and keys: the clues take what the buttons leave of that height. With the screen keys
     (touch) the clues reach down beside them and the buttons stand level with their lower edge. */
  min-height: max(var(--kwr-board) + 2 * var(--kwr-pad) + var(--kwr-keys-h), var(--kwr-floor));
  box-sizing: border-box;
  width: 100%;
  padding: var(--kwr-pad);
  color: #fff;
  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). */
#kwr-game button {
  text-transform: inherit;
}

#kwr-board {
  grid-area: board;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kwr-board);
  height: var(--kwr-board);
}

/* The buttons sit at the bottom of their row, so on the lower edge of the board (of the keys with touch)
   as long as the clues fit above them. */
#kwr-controls {
  grid-area: controls;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

#kwr-status {
  align-self: stretch;
}

#kwr-keys {
  grid-area: keys;
}

/* The grid: white cells with dark lines in the gaps between them. The line is each cell's outline and
   lies in the gap, so no cell covers another cell's line, whatever the cell size. */
#kwr-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), calc(var(--kwr-pitch) - 2px));
  grid-auto-rows: calc(var(--kwr-pitch) - 2px);
  gap: 2px;
  padding: 2px;
  outline: none;
  touch-action: manipulation;
}

.kwr-cell {
  position: relative;
  background: #fff;
  outline: 2px solid #142814;
  color: #142814;
  cursor: pointer;
}

.kwr-num {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: max(9px, calc(var(--kwr-pitch) * 0.26));
  font-weight: 600;
  line-height: 1;
  color: #4a5a47;
  pointer-events: none;
}

.kwr-ch {
  display: block;
  height: 100%;
  padding-top: calc(var(--kwr-pitch) * 0.08);
  box-sizing: border-box;
  font-size: calc(var(--kwr-pitch) * 0.56);
  font-weight: 600;
  line-height: calc(var(--kwr-pitch) * 0.86);
  text-align: center;
}

.kwr-word {
  background: #d4ecd4;
}

.kwr-sel {
  background: #ffd966;
}

/* The cell that takes the next letter blinks like a text cursor: a bar in an empty cell, a line under
   the letter in a filled one. */
.kwr-sel .kwr-ch::after {
  content: '';
  position: absolute;
  background: #142814;
  pointer-events: none;
  animation: kwr-blink 1.1s steps(1) infinite;
}

.kwr-sel .kwr-ch:empty::after {
  left: 50%;
  top: 22%;
  width: max(2px, calc(var(--kwr-pitch) * 0.05));
  height: 56%;
  transform: translateX(-50%);
}

.kwr-sel .kwr-ch:not(:empty)::after {
  left: 24%;
  right: 24%;
  bottom: 11%;
  height: max(2px, calc(var(--kwr-pitch) * 0.05));
}

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

@media (prefers-reduced-motion: reduce) {
  .kwr-sel .kwr-ch::after {
    animation: none;
  }
}

.kwr-wrong .kwr-ch {
  color: #c62828;
}

.kwr-done {
  background: #f2faf2;
  cursor: default;
}

.kwr-done .kwr-ch {
  color: #00873c;
}

/* Uncovered by "Tipp": blue, and it stays blue when the puzzle is solved. */
.kwr-tip .kwr-ch {
  color: #1f5fa8;
}

/* QWERTZ in a grid of twenty half columns: a key spans two, the second row starts half a key in,
   the third one and a half, and the delete key takes the last three. Only on touch screens. */
#kwr-keys {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 8px 5px;
}

#kwr-keys button {
  grid-column: span 2;
  height: 44px;
  min-width: 0;
  padding: 0;
  font: 600 17px 'Inter', system-ui, sans-serif;
  color: #142814;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  touch-action: manipulation;
}

#kwr-keys .kwr-row1 {
  grid-column: 2 / span 2;
}

#kwr-keys .kwr-row2 {
  grid-column: 4 / span 2;
}

#kwr-keys .kwr-back {
  grid-column: span 3;
  font-size: 20px;
}

@media (hover: hover) and (pointer: fine) {
  #kwr-game {
    --kwr-keys-h: 0px;
    grid-template-rows: 1fr auto;
    grid-template-areas: "lists board" "controls board";
  }

  #kwr-keys {
    display: none;
  }
}

#kwr-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The buttons of the other games (.issTurnButton and .dropdown-btn in Games/shared/ui.css): light green
   with a green glow, white with green letters and a white glow under the mouse. */
#kwr-tools button {
  flex: 1 1 auto;
  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;
}

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

/* "Wirklich neu?": red until it is answered or the three seconds are over. */
#kwr-tools #kwr-new.kwr-ask {
  color: #fff;
  background: #e5534b;
  box-shadow: 0 0 8px rgba(229, 83, 75, 0.8);
}

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

/* One line in the column beside the board; a longer message would push the buttons up. */
#kwr-status {
  min-height: 1.3em;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* All clues, never cut and never in a box of their own that scrolls: across above down. The chosen
   clue is marked here; there is no bar of its own above the board. Beside the board they sit in the
   middle of the room above the buttons, as the puzzle sits in the middle of the board. */
#kwr-lists {
  /* Beside the board the clues are as large and as far apart as the room allows: 13 px without space
     between them on small laptops, 15.5 px with about 2 px above and below each on a 1920 screen. The
     line follows the largest size that still fits with that spacing (measured with kwrSpace.mjs over the
     tallest clues of 400 puzzles), so the buttons stay where they did at 13 px. */
  --kwr-clue: clamp(13px, var(--kwr-board) * 0.0145 + var(--kwr-lists-w) * 0.0172 - 3.6px, 16px);
  --kwr-clue-gap: calc((var(--kwr-clue) - 13px) * 0.75);
  grid-area: lists;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 32px;
}

.kwr-head {
  margin: 0 0 2px;
  padding-bottom: 2px;
  font-size: max(12px, var(--kwr-clue) * 0.85);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

#kwr-lists ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Compact beside the board, without room between the lines: so the 25 clues fit above the buttons.
   At 14 px with a pixel above and below each line they pushed the buttons down in most puzzles below
   1440 x 900. */
#kwr-lists li {
  display: flex;
  gap: 8px;
  padding: var(--kwr-clue-gap) 5px;
  font-size: var(--kwr-clue);
  line-height: 1.25;
  text-transform: none;
  border-radius: 5px;
  cursor: pointer;
}

#kwr-lists li b {
  flex: none;
  min-width: 1.5em;
  text-align: right;
  color: rgba(255, 255, 255, 0.65);
}

#kwr-lists li.kwr-active {
  background: rgba(255, 255, 255, 0.16);
}

#kwr-lists li.kwr-filled .kwr-text {
  color: rgba(255, 255, 255, 0.55);
}

#kwr-tools button:focus-visible,
#kwr-keys button:focus-visible {
  outline: 3px solid #ffd966;
  outline-offset: 1px;
}

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

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

  #kwr-tools #kwr-new.kwr-ask:hover {
    color: #fff;
    background: #ef6a62;
  }

  #kwr-keys button:hover {
    background: #fff;
  }

  #kwr-lists li:not(.kwr-active):hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

@keyframes kwr-pulse {
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35); }
}

/* Tablets lying down (851 to 1024 px): the site header and the section's padding take 80 px of the height. */
@media (min-width: 851px) and (max-width: 1024px) {
  #kwr-game {
    --kwr-lists-w: clamp(320px, 100cqw - 2 * var(--kwr-pad) - 40px - min(820px, var(--kwr-vh) - 80px - 2 * var(--kwr-pad) - var(--kwr-keys-h)), 420px);
    --kwr-board: min(100cqw - 2 * var(--kwr-pad) - var(--kwr-side), max(440px, var(--kwr-vh) - 80px - 2 * var(--kwr-pad) - var(--kwr-keys-h)), 820px);
    --kwr-floor: min(var(--kwr-vh) - 80px, 712px);
  }
}

/* Narrow: everything in one column, the board first. It takes the width; board, keys and buttons fit
   the window together, as long as the board stays at least 280 px. Then the status and all clues. */
@media not all and (orientation: landscape) and (max-height: 500px) {
  @container (max-width: 860px) {
    #kwr-app #kwr-game {
      --kwr-pad: 0px;
      --kwr-board: min(100cqw, max(280px, var(--kwr-vh) - var(--kwr-keys-h) - 52px - 56px));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-height: 0;
    }

    #kwr-keys,
    #kwr-controls {
      width: 100%;
    }

    #kwr-controls {
      align-self: stretch;
      align-items: stretch;
    }

    #kwr-status {
      text-align: center;
    }

    #kwr-lists {
      align-self: stretch;
      width: 100%;
      margin-top: 8px;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px 32px;
    }

    #kwr-lists li {
      padding: 3px 8px;
      font-size: 16px;
      line-height: 1.3;
    }
  }

  @container (max-width: 400px) {
    #kwr-keys {
      gap: 7px 4px;
    }
  }
}

/* Phones held sideways: the board on the left as high as the window; keys, buttons and status beside
   it, the clues below them. */
@media (orientation: landscape) and (max-height: 500px) {
  #kwr-app #kwr-game {
    --kwr-pad: 6px;
    --kwr-board: min(var(--kwr-vh) - 2 * var(--kwr-pad), 100cqw - 2 * var(--kwr-pad) - 316px);
    grid-template-columns: var(--kwr-board) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "board keys" "board controls" "board lists";
    gap: 12px 16px;
    min-height: 0;
  }

  #kwr-controls,
  #kwr-lists {
    align-self: start;
  }

  #kwr-controls {
    align-items: stretch;
    gap: 10px;
  }

  #kwr-tools button {
    padding: 7px 8px;
    font-size: 13px;
  }

  #kwr-keys {
    gap: 6px 4px;
  }

  #kwr-keys button {
    height: 36px;
  }
}