/* Word Connect */

.wcn-status {
  text-align: center;
  font-weight: 700;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.wcn-status--win { color: var(--color-success); background: rgba(74, 222, 128, 0.12); }
.wcn-status--lose { color: var(--color-accent); background: rgba(238, 111, 168, 0.12); }
.wcn-status--msg { color: var(--color-text); background: var(--color-bg-alt); }

.wcn-grid-wrap {
  max-width: 100%;
  max-height: 420px;
  overflow: auto;
  margin: 0 auto 20px;
}

.wcn-grid {
  display: grid;
  gap: 3px;
  justify-content: center;
  width: max-content;
  margin: 0 auto;
}

.wcn-gcell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}
.wcn-gcell--block { background: transparent; border: none; }
.wcn-gcell--revealed { background: rgba(77, 208, 225, 0.18); border-color: var(--color-primary); }

.wcn-current {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 2px;
  min-height: 36px;
  margin-bottom: 14px;
  color: var(--color-text);
}
.wcn-current-placeholder {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text-soft);
}

.wcn-wheel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.wcn-tile {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--color-border);
}
.wcn-tile:hover:not(:disabled) { background: rgba(77, 208, 225, 0.18); }
.wcn-tile--used { opacity: 0; pointer-events: none; box-shadow: none; }

.wcn-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Phones: the puzzle grid used to be fixed 34px cells (up to 11 columns = 404px) and widened the whole page. The cells now share the available width. */
@media (max-width: 480px) {
  .wcn-grid-wrap { width: 100%; }
  .wcn-grid { width: 100%; max-width: none; }
  .wcn-gcell { width: auto; max-width: 40px; height: auto; aspect-ratio: 1 / 1; min-width: 0; }
}