/* 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-swedish .game-section {
  background: #005000;
  height: auto;
}

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

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

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

/* At the top, not centred in the section, so the board never moves. */
.page-swedish .game-clip {
  width: 100%;
  margin: 0 auto;
  aspect-ratio: auto;
}

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

/* Game */

#swr-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 chosen
   clue and the solution word, and below them 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 nothing. The board
   is as large as the window allows, in height and in width beside the column, never smaller than 440 px:
   the larger the cells, the larger the clues in them (user, 2026-10-09: "du kannst das schwedenrätsel
   größer machen, da ist noch platz"). The column is just wide enough for the three buttons in one row. */
#swr-game {
  --frame: 15;
  --cols: 15;
  --rows: 15;
  --swr-vh: 100vh;
  --swr-pad: 24px;
  --swr-side-w: 300px;
  --swr-side: calc(var(--swr-side-w) + 32px);
  --swr-keys-h: 168px; /* the screen keys and the gap above them; 0 with a mouse */
  --swr-board: min(100cqw - 2 * var(--swr-pad) - var(--swr-side), max(440px, var(--swr-vh) - 2 * var(--swr-pad) - var(--swr-keys-h)));
  --swr-pitch: calc((var(--swr-board) - 2px) / var(--frame));
  display: grid;
  grid-template-columns: var(--swr-side-w) var(--swr-board);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "info board" "info keys" "controls keys";
  justify-content: center;
  align-items: start;
  gap: 20px 32px;
  min-height: calc(var(--swr-board) + 2 * var(--swr-pad) + var(--swr-keys-h));
  box-sizing: border-box;
  width: 100%;
  padding: var(--swr-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). */
#swr-game button {
  text-transform: inherit;
}

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

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

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

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

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

.swr-cell,
.swr-clue,
.swr-gap {
  position: relative;
  outline: 2px solid #142814;
}

.swr-cell {
  background: #fff;
  color: #142814;
  cursor: pointer;
}

/* A cell without a letter and without a clue, in the colour of the clue cells but a shade darker. */
.swr-gap {
  background: #b9c9ad;
}

/* A clue cell: one clue, which fills it. */
.swr-clue {
  display: flex;
  flex-direction: column;
  background: #d8e4cc;
  color: #142814;
  cursor: pointer;
  overflow: hidden;
}

.swr-q {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 2px;
  box-sizing: border-box;
  overflow: hidden;
}

/* The size comes from the script: as large as the cell allows. Words break only at the soft hyphens the
   script sets; a word that still does not fit makes the script shrink the clue. */
.swr-qt {
  display: block;
  width: 100%;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  text-transform: none;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* The arrow of a word: a small black triangle in its first cell, standing on the black line next to the
   clue cell, as in print. At the left edge it points right (across), at the top it points down. */
.swr-arr {
  position: absolute;
  width: 0;
  height: 0;
  border: max(3px, calc(var(--swr-pitch) * 0.1)) solid transparent;
  pointer-events: none;
}

.swr-arr0 {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-right-width: 0;
  border-left-color: #142814;
}

.swr-arr1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-width: 0;
  border-top-color: #142814;
}

.swr-q.swr-active {
  background: #ffd966;
}

/* Too small to read: the clue cells stay empty, the clue stands beside or below the grid. */
.swr-tiny .swr-qt {
  display: none;
}

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

/* A cell of the solution word: a ring, and its place in the word in the lower right corner. */
.swr-solcell::before {
  content: '';
  position: absolute;
  inset: 9%;
  border: max(1px, calc(var(--swr-pitch) * 0.035)) solid #8aa07f;
  border-radius: 50%;
  pointer-events: none;
}

.swr-mark {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: max(7px, calc(var(--swr-pitch) * 0.22));
  font-weight: 600;
  line-height: 1;
  color: #4a5a47;
  pointer-events: none;
}

.swr-word {
  background: #d4ecd4;
}

.swr-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. */
.swr-sel .swr-ch::after {
  content: '';
  position: absolute;
  background: #142814;
  pointer-events: none;
  animation: swr-blink 1.1s steps(1) infinite;
}

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

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

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

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

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

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

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

/* Uncovered by "Tipp": blue, and it stays blue when the puzzle is solved. */
.swr-tip .swr-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. */
#swr-keys {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 8px 5px;
}

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

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

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

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

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

  #swr-keys {
    display: none;
  }
}

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

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

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

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

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

/* Beside the board, in the middle of the room above the buttons: the chosen clue, large, and the
   solution word. */
#swr-info {
  grid-area: info;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.swr-head {
  margin: 0 0 8px;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Two lines are kept free, so a longer clue does not move what stands below it. */
#swr-clue-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 2.5em;
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}

#swr-arrow {
  flex: none;
  color: #ffd966;
}

#swr-current.swr-off #swr-clue-line {
  visibility: hidden;
}

/* Up to eight letters, always in one line: a longer word would move what stands below it. */
#swr-sol {
  display: flex;
  gap: 5px;
}

.swr-box {
  position: relative;
  flex: none;
  width: 34px;
  height: 42px;
  padding: 0;
  font: 600 20px 'Inter', system-ui, sans-serif;
  color: #142814;
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.swr-box-n {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  color: #4a5a47;
}

.swr-box-ch {
  display: block;
  padding-top: 6px;
}

.swr-solved .swr-box {
  background: #f2faf2;
  color: #00873c;
  cursor: default;
}

#swr-tools button:focus-visible,
#swr-keys button:focus-visible,
.swr-box: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) {
  #swr-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 */
  #swr-tools:has(button:not(:disabled):hover) button:not(:hover) {
    box-shadow: none;
  }

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

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

  .swr-q:not(.swr-active):hover {
    background: #e8f0e0;
  }
}

@keyframes swr-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) {
  #swr-game {
    --swr-board: min(100cqw - 2 * var(--swr-pad) - var(--swr-side), max(440px, var(--swr-vh) - 80px - 2 * var(--swr-pad) - var(--swr-keys-h)));
  }
}

/* Narrow: everything in one column, the board first and the chosen clue right below it, above the keys,
   where the eye is while typing. Board, clue, keys and buttons fit the window together, as long as the
   board stays at least 280 px. Then the status and the solution word. */
@media not all and (orientation: landscape) and (max-height: 500px) {
  @container (max-width: 860px) {
    #swr-app #swr-game {
      --swr-pad: 0px;
      --swr-board: min(100cqw, max(280px, var(--swr-vh) - var(--swr-keys-h) - 52px - 56px - 52px));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-height: 0;
    }

    #swr-info {
      display: contents;
    }

    #swr-board { order: 1; }
    #swr-current { order: 2; }
    #swr-keys { order: 3; }
    #swr-controls { order: 4; }
    #swr-solution { order: 5; }

    #swr-current,
    #swr-keys,
    #swr-controls,
    #swr-solution {
      width: 100%;
    }

    #swr-current .swr-head {
      display: none;
    }

    #swr-clue-line {
      box-sizing: border-box;
      min-height: 40px;
      padding: 8px 12px;
      font-size: 17px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
    }

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

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

    #swr-solution {
      margin-top: 8px;
    }
  }
}

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

  #swr-info {
    display: contents;
  }

  #swr-current { grid-area: current; }
  #swr-solution { grid-area: solution; }

  #swr-current .swr-head {
    display: none;
  }

  #swr-clue-line {
    min-height: 1.3em;
    font-size: 16px;
  }

  #swr-controls,
  #swr-solution {
    align-self: start;
  }

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

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

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

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

  .swr-box {
    width: 30px;
    height: 34px;
    font-size: 16px;
  }

  .swr-box-ch {
    padding-top: 4px;
  }
}