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

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

@property --bsa-max {
  syntax: '<length>';
  inherits: true;
  initial-value: 56px;
}

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

.page-scramble .game-clip {
  --bsa-card: 500px;
  --bsa-max: 56px;
  aspect-ratio: auto;
  transition: width 0.3s ease, --bsa-card 0.3s ease, --bsa-max 0.3s ease;
}

/* The tiles grow as much as the card (640 / 500 of 56px): without that, a word up to seven letters would keep its
   tiles and only the card would get wider. */
.page-scramble .game-clip--large {
  --bsa-card: 640px;
  --bsa-max: 72px;
}

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

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

/* Game */

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

/* A tile is as large as the word allows in the card (--bsa-n letters, at least five, set by the script), never
   over --bsa-max. Both rows keep the height of a five-letter word, so the card keeps its size from word to word. */
#bsa-game {
  --bsa-pad: 16px;
  --bsa-gap: 6px;
  --bsa-w: min(var(--bsa-card), calc(100vw - 20px));
  --bsa-inner: calc(var(--bsa-w) - 2 * var(--bsa-pad));
  --bsa-tile: min(var(--bsa-max), calc((var(--bsa-inner) - (var(--bsa-n, 10) - 1) * var(--bsa-gap)) / var(--bsa-n, 10)));
  --bsa-row: min(var(--bsa-max), calc((var(--bsa-inner) - 4 * var(--bsa-gap)) / 5));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "score new" "cat cat" "slots slots" "pool pool" "tools tools" "status status";
  justify-items: center;
  gap: 12px 8px;
  box-sizing: border-box;
  width: var(--bsa-w);
  padding: var(--bsa-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). */
#bsa-game button {
  text-transform: inherit;
}

/* 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. */
#bsa-new,
#bsa-tools 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;
}

/* As wide as "Wirklich neu?", so the counters beside it keep their width when the question comes. */
#bsa-new {
  grid-area: new;
  align-self: stretch;
  min-width: 146px;
}

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

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

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

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

.bsa-score-value {
  font-size: min(22px, 7cqw);
  font-weight: 600;
  line-height: 1.1;
}

#bsa-cat {
  grid-area: cat;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: #556355;
  text-align: center;
}

#bsa-cat b {
  font-weight: 600;
  color: #1f2d1f;
}

/* The places of the word and, below them, the mixed letters. */
#bsa-slots,
#bsa-pool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bsa-gap);
  min-height: var(--bsa-row);
}

/* The two rows lean towards each other, so smaller tiles of a long word stay together as one pair of rows. */
#bsa-slots {
  grid-area: slots;
  align-items: flex-end;
}

#bsa-pool {
  grid-area: pool;
  align-items: flex-start;
}

.bsa-slot,
.bsa-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--bsa-tile);
  height: var(--bsa-tile);
  padding: 0;
  font: 600 calc(var(--bsa-tile) * 0.52) / 1 'Inter', system-ui, sans-serif;
  color: #1f2d1f;
  border-radius: 6px;
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}

/* An empty place: a light box with a line underneath. */
.bsa-slot {
  background: #eef3ee;
  border: 0;
  border-bottom: 3px solid #b7c5b7;
  cursor: default;
}

/* A letter, in its row or placed: a golden tile. */
.bsa-tile,
.bsa-slot.bsa-filled {
  background: #f6dc7a;
  border: 0;
  box-shadow: 0 2px 0 #d4b24a;
  cursor: pointer;
}

/* Where a placed letter came from: an empty outline, so the row keeps its places. */
.bsa-tile.bsa-gone {
  background: transparent;
  box-shadow: inset 0 0 0 2px #dfe7df;
  cursor: default;
}

/* Revealed by a tip: blue, and locked. */
.bsa-slot.bsa-given {
  color: #fff;
  background: #1e6fd9;
  box-shadow: 0 2px 0 #1757ab;
  cursor: default;
}

/* Solved: the word turns green. */
#bsa-slots.bsa-done .bsa-slot {
  color: #fff;
  background: #1d7f42;
  box-shadow: 0 2px 0 #145c30;
  cursor: default;
}

#bsa-slots.bsa-shake {
  animation: bsa-shake 0.4s ease;
}

#bsa-tools {
  grid-area: tools;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#bsa-tools button {
  padding: 10px 6px;
}

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

#bsa-status {
  grid-area: status;
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

#bsa-new:focus-visible,
#bsa-tools button:focus-visible,
.bsa-tile:focus-visible,
.bsa-slot: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 to the button. */
@media (hover: hover) {
  #bsa-new:not(.bsa-ask):hover,
  #bsa-tools button:not(:disabled):hover {
    color: #00b050;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00b050;
  }

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

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

  .bsa-tile:not(:disabled):hover,
  .bsa-slot.bsa-filled:not(:disabled):hover {
    background: #f9e596;
  }
}

@keyframes bsa-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-scramble .game-clip,
  .bsa-slot,
  .bsa-tile {
    transition: none;
  }

  #bsa-slots.bsa-shake {
    animation: none;
  }
}

/* The narrowest phones: less padding and smaller gaps between the letters. */
@media (max-width: 380px) {
  #bsa-game {
    --bsa-pad: 12px;
    --bsa-gap: 4px;
  }

  #bsa-new {
    padding: 10px;
  }
}

/* Under 400px the three counters need the whole row: "Neues Wort" goes below the tools. */
@media (max-width: 400px) {
  #bsa-game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "score" "cat" "slots" "pool" "tools" "new" "status";
  }

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

/* Phones held sideways: a little less air between the rows. */
@media (orientation: landscape) and (max-height: 500px) {
  #bsa-game {
    --bsa-w: min(560px, calc(100vw - 20px));
    row-gap: 8px;
  }

  .bsa-score-box {
    padding: 3px 2px;
  }

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