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

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

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

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

.page-spelling-bee .game-clip {
  --wwb-max: 92px;
  --wwb-card: 820px;
  aspect-ratio: auto;
  transition: width 0.3s ease, --wwb-max 0.3s ease, --wwb-card 0.3s ease;
}

.page-spelling-bee .game-clip--large {
  --wwb-max: 116px;
  --wwb-card: 980px;
}

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

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

/* Game */

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

/* The hexagon size comes from the window: the height left for the hive and the width of the card. */
#wwb-game {
  --wwb-w: min(var(--wwb-card), calc(100vw - 20px));
  --wwb-hex: max(60px, min(var(--wwb-max), calc((100vh - 330px) / 2.75), calc((var(--wwb-w) - 40px) / 2.75)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "rank rank" "play found" "ctrl ctrl";
  gap: 14px 24px;
  box-sizing: border-box;
  width: var(--wwb-w);
  padding: 16px;
  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;
  user-select: none;
}

#wwb-game button {
  font-family: inherit;
}

/* Rank: name and points, and a line with one dot per rank. */
#wwb-rank {
  grid-area: rank;
}

.wwb-rank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 15px;
  text-transform: uppercase;
}

#wwb-rank-name {
  font-weight: 600;
}

#wwb-points {
  color: #556355;
}

#wwb-bar {
  --wwb-fill: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
}

#wwb-bar::before,
#wwb-bar::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #d3dcd3;
}

#wwb-bar::after {
  right: auto;
  width: calc((100% - 10px) * var(--wwb-fill));
  background: #00a050;
  transition: width 0.3s;
}

.wwb-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3dcd3;
  transition: background 0.3s, transform 0.3s;
}

.wwb-dot.wwb-done {
  background: #00a050;
}

.wwb-dot.wwb-now {
  background: #ffc233;
  transform: scale(1.6);
}

/* Play: message, typed word, hive, buttons. */
#wwb-play {
  grid-area: play;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#wwb-msg {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

#wwb-msg.wwb-bad {
  color: #c9443e;
}

#wwb-msg.wwb-good {
  color: #00a050;
}

#wwb-msg.wwb-pangram {
  color: #b07800;
}

#wwb-input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 1.3em;
  font-size: clamp(24px, calc(var(--wwb-hex) * 0.36), 34px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

#wwb-input .wwb-c {
  color: #d99a00;
}

.wwb-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  background: #00a050;
  animation: wwb-blink 1s steps(1) infinite;
}

#wwb-input.wwb-shake {
  animation: wwb-shake 0.4s;
}

.wwb-solved #wwb-input .wwb-caret {
  display: none;
}

/* Seven hexagons with flat tops: the middle one and six around it. */
#wwb-hive {
  --hh: calc(var(--wwb-hex) * 0.866);
  position: relative;
  width: calc(var(--wwb-hex) * 2.62);
  height: calc(var(--hh) * 3.16);
}

.wwb-hex {
  position: absolute;
  left: calc(50% - var(--wwb-hex) / 2 + var(--dx));
  top: calc(50% - var(--hh) / 2 + var(--dy));
  width: var(--wwb-hex);
  height: var(--hh);
  margin: 0;
  padding: 0;
  font-size: calc(var(--wwb-hex) * 0.36);
  font-weight: 600;
  color: #1f2d1f;
  background: #e3e9e3;
  border: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  cursor: pointer;
  transition: background 0.15s;
}

.wwb-hex.wwb-center {
  background: #ffc233;
}

.wwb-h0 { --dx: 0px; --dy: 0px; }
.wwb-h1 { --dx: 0px; --dy: calc(var(--hh) * -1.08); }
.wwb-h2 { --dx: calc(var(--wwb-hex) * 0.81); --dy: calc(var(--hh) * -0.54); }
.wwb-h3 { --dx: calc(var(--wwb-hex) * 0.81); --dy: calc(var(--hh) * 0.54); }
.wwb-h4 { --dx: 0px; --dy: calc(var(--hh) * 1.08); }
.wwb-h5 { --dx: calc(var(--wwb-hex) * -0.81); --dy: calc(var(--hh) * 0.54); }
.wwb-h6 { --dx: calc(var(--wwb-hex) * -0.81); --dy: calc(var(--hh) * -0.54); }

.wwb-hex:active:not(:disabled) {
  background: #d3ddd3;
}

.wwb-hex.wwb-center:active:not(:disabled) {
  background: #f5b300;
}

.wwb-hex:disabled {
  cursor: default;
  opacity: 0.6;
}

.wwb-hex.wwb-fade {
  animation: wwb-fade 0.3s ease-out;
}

#wwb-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* The keys under the hive belong to the input, like a keyboard: white pills. */
#wwb-actions button {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #1f2d1f;
  background: #fff;
  border: 1px solid #c3cfc3;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#wwb-shuffle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 0 !important;
}

#wwb-shuffle svg {
  width: 20px;
  height: 20px;
}

#wwb-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

/* Words found: a list in columns that grows with the words, nothing scrolls for itself. */
#wwb-found {
  grid-area: found;
  align-self: start;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #d3dcd3;
  border-radius: 10px;
}

#wwb-count {
  margin: 0 0 8px;
  font-size: 14px;
  color: #556355;
}

#wwb-list {
  columns: 3 8em;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  text-transform: uppercase;
}

#wwb-list li {
  break-inside: avoid;
  border-bottom: 1px solid #eef2ee;
}

#wwb-list .wwb-pg {
  font-weight: 600;
  color: #b07800;
}

#wwb-list .wwb-missed {
  color: #9aa79a;
}

#wwb-controls {
  grid-area: ctrl;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 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. */
#wwb-controls button {
  padding: 10px 14px;
  font: 600 14px 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  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;
}

#wwb-controls button:disabled {
  cursor: default;
  opacity: 0.4;
  box-shadow: none;
}

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

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

#wwb-game button: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. */
@media (hover: hover) {
  .wwb-hex:not(:disabled):hover {
    background: #d6e0d6;
  }

  .wwb-hex.wwb-center:not(:disabled):hover {
    background: #ffcd55;
  }

  #wwb-actions button:not(:disabled):hover {
    background: #f0f4f0;
  }

  #wwb-controls button:not(:disabled):not(.wwb-confirm):hover {
    color: #00b050;
    background: #fff;
    box-shadow: inset 0 0 0 1px #00b050;
  }

  #wwb-controls button.wwb-confirm:hover {
    background: #ef6a62;
  }

  /* as in the other games: while one button is under the mouse, the other loses its glow */
  #wwb-controls:has(button:not(:disabled):hover) button:not(:hover) {
    box-shadow: none;
  }
}

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

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

@keyframes wwb-fade {
  from { opacity: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  .wwb-caret,
  #wwb-input,
  .wwb-hex,
  #wwb-new.wwb-pulse {
    animation: none !important;
  }

  .page-spelling-bee .game-clip {
    transition: none;
  }
}

/* Narrow: one column, the list of words at the end. */
@media (max-width: 700px) {
  #wwb-game {
    --wwb-hex: max(58px, min(var(--wwb-max), calc((var(--wwb-w) - 40px) / 2.75)));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rank" "play" "ctrl" "found";
  }

  #wwb-controls {
    justify-content: stretch;
  }

  #wwb-controls button {
    flex: 1;
  }

  #wwb-list {
    columns: 2 7em;
  }
}

@media (max-width: 360px) {
  #wwb-game {
    padding: 12px;
  }

  #wwb-actions button {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Phones held sideways: the hive on the left, the rest beside it. */
@media (orientation: landscape) and (max-height: 500px) {
  #wwb-game {
    --wwb-hex: max(48px, min(var(--wwb-max), calc((100vh - 220px) / 2.74)));
    --wwb-w: min(820px, calc(100vw - 20px));
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "play rank" "play found" "play ctrl";
    grid-template-rows: auto 1fr auto;
  }
}