/* Power word-le. Loaded after site.css, /assets/account.css and cut.css; every colour, shape and
   space comes from the design tokens (docs/design-system.md). The letter tiles and the letter keys
   are hexagons, like the site's menu; panels, chips and the dialogs are tokens.css `.dm-cut` shapes
   (outline from the knobs, never a border or inset shadow, which the cut would clip off at the
   slants: e2e/cut-edges.spec.ts checks it), the buttons are cut.css `.cut-edge`.
   Marks never rely on colour alone: every mark has a symbol, and "wrong place" is also striped.
   Blue (right place) and gold (wrong place) stay apart for the common kinds of colour blindness;
   the three mark colours are tokens (--dm-mark-*) with measured contrast. */
.pw {
  container-type: inline-size;
}
main.full:has(.pw) {
  max-width: 88rem;
}

/* ---- the top: title, what today's word is, the tools ---- */
.pw-hero {
  text-align: center;
  margin-bottom: var(--dm-space-4);
}
.pw-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 var(--dm-space-2);
  font-size: clamp(2.2rem, 7cqw, 3.4rem);
  line-height: 1.1;
}
.pw-title .pw-le {
  align-self: flex-end;
  margin-left: -0.2rem;
  font-size: 0.45em;
  color: var(--dm-gold-text);
}
.pw-hex {
  flex: none;
  width: 0.55em;
  height: 0.635em;
  background: var(--dm-gold);
  clip-path: var(--dm-hex-clip-pointy);
}
.pw-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-2);
  justify-content: center;
}
.pw-chip {
  --dm-edge: var(--dm-border);
  --dm-edge-w: 1px;
  --dm-fill: var(--dm-surface-raised);
  padding: 0.15rem 0.9rem;
  color: var(--dm-text);
  font-weight: var(--dm-weight-strong);
}
.pw-chip:empty {
  display: none;
}
.pw-tools,
.pw-datebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dm-space-2);
  align-items: center;
  justify-content: center;
  margin: var(--dm-space-3) 0 0;
}
.pw button.cut-edge:not(.pw-key) {
  --edge: var(--dm-accent);
  --fill: var(--dm-accent);
  min-height: 2.75rem;
  margin-top: 0;
  padding: 0.3rem 1.3rem;
  font: inherit;
  font-weight: var(--dm-weight-strong);
  color: var(--dm-on-accent);
  cursor: pointer;
}
.pw button.cut-edge:not(.pw-key):hover {
  --edge: var(--dm-accent-hover);
  --fill: var(--dm-accent-hover);
}
.pw button.secondary.cut-edge:not(.pw-key) {
  --edge: var(--dm-border-strong);
  --fill: var(--dm-surface-raised);
  color: var(--dm-text);
}
.pw button.secondary.cut-edge:not(.pw-key):hover {
  --fill: var(--dm-surface-sunken);
}
.pw-datebar input[type='date'] {
  width: auto;
  min-height: 2.75rem;
}
.pw-date-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--dm-text-muted);
}

/* ---- the play area: the board and the keyboard side by side on a wide screen ---- */
.pw-play {
  display: grid;
  gap: var(--dm-space-4);
  align-items: start;
}
@container (min-width: 60rem) {
  .pw-play {
    grid-template-columns: minmax(0, 1fr) 30rem;
  }
  .pw-key-panel {
    position: sticky;
    top: var(--dm-space-4);
  }
}
.pw-panel {
  --dm-edge: var(--dm-border);
  --dm-edge-w: 2px;
  --dm-fill: var(--dm-surface-raised);
  padding: var(--dm-space-4);
}
.pw-left {
  text-align: center;
  font-weight: var(--dm-weight-strong);
  margin: 0 0 var(--dm-space-3);
  color: var(--dm-heading);
  font-size: 1.1rem;
}

/* ---- the board ---- */
.pw-board:focus {
  outline: none;
}
.pw-board {
  display: grid;
  gap: 0.2rem;
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--n, 6) * 5.4rem);
}
.pw-row {
  display: grid;
  gap: 0.2rem;
}
.pw-tile {
  --tile-edge: var(--dm-border-strong);
  --tile-fill: var(--dm-surface-raised);
  --tile-text: var(--dm-text);
  position: relative;
  display: block;
  aspect-ratio: 0.866;
  box-sizing: border-box;
  container-type: inline-size;
  color: var(--tile-text);
}
.pw-tile::before,
.pw-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--dm-hex-clip-pointy);
}
.pw-tile::before {
  background: var(--tile-edge);
}
.pw-tile::after {
  inset: 3.5cqw;
  background: var(--tile-fill);
}
.pw-tile.filled {
  --tile-edge: var(--dm-text);
}
.pw-tile.current {
  --tile-edge: var(--dm-focus);
}
.pw-tile.current::before {
  filter: drop-shadow(0 0 3px var(--dm-focus));
}
.pw-tile .pw-letter {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8%;
  font-weight: var(--dm-weight-strong);
  font-size: 48cqw;
  line-height: 1;
  text-transform: uppercase;
}
.pw-mark {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22cqw;
  line-height: 1;
  font-weight: var(--dm-weight-strong);
}
.pw-tile.correct,
.pw-tile.present,
.pw-tile.absent {
  --tile-edge: transparent;
}
.pw-tile.correct {
  --tile-fill: var(--dm-mark-correct);
  --tile-text: var(--dm-on-mark-correct);
}
.pw-tile.present {
  --tile-fill: var(--dm-mark-present);
  --tile-text: var(--dm-on-mark-present);
}
.pw-tile.present::after {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(0, 0, 0, 0.13) 7px 10px),
    var(--dm-mark-present);
}
.pw-tile.absent {
  --tile-fill: var(--dm-mark-absent);
  --tile-text: var(--dm-on-mark-absent);
}
.pw-tile.correct::before,
.pw-tile.present::before,
.pw-tile.absent::before {
  background: var(--tile-fill);
}
.pw-tile.correct::after,
.pw-tile.present::after,
.pw-tile.absent::after {
  inset: 0;
}
.pw-status {
  text-align: center;
  min-height: 1.5rem;
  margin: var(--dm-space-3) 0 var(--dm-space-2);
  font-weight: var(--dm-weight-strong);
  color: var(--dm-heading);
}
.pw-hint {
  text-align: center;
  color: var(--dm-text-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--dm-space-3);
}

/* ---- the keyboard: hexagon letter keys ---- */
.pw-keyboard {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 auto;
  max-width: 34rem;
}
.pw-keyrow {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  align-items: stretch;
}
.pw-key {
  --edge: var(--dm-border-strong);
  --fill: var(--dm-surface);
  --ink: var(--dm-text);
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 0.866;
  font: inherit;
  font-size: clamp(0.85rem, 3.6cqw, 1.1rem);
  font-weight: var(--dm-weight-strong);
  color: var(--ink);
  background: var(--edge);
  border: 0;
  clip-path: var(--dm-hex-clip-pointy);
  cursor: pointer;
}
.pw-key::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--fill);
  clip-path: var(--dm-hex-clip-pointy);
}
.pw-key.wide {
  flex-grow: 1.7;
  aspect-ratio: auto;
  min-height: 2.9rem;
  font-size: 0.78rem;
  clip-path: var(--dm-hex-clip);
}
.pw-key.wide::before {
  clip-path: var(--dm-hex-clip);
}
.pw-key:hover {
  --fill: var(--dm-surface-sunken);
}
.pw-key:active {
  transform: translateY(1px);
}
.pw-key .pw-mark {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
}
.pw-key.wide .pw-mark {
  display: none;
}
.pw-key.correct {
  --edge: var(--dm-mark-correct);
  --fill: var(--dm-mark-correct);
  --ink: var(--dm-on-mark-correct);
}
.pw-key.present {
  --edge: var(--dm-mark-present);
  --fill: var(--dm-mark-present);
  --ink: var(--dm-on-mark-present);
}
.pw-key.absent {
  --edge: var(--dm-mark-absent);
  --fill: var(--dm-mark-absent);
  --ink: var(--dm-on-mark-absent);
  text-decoration: line-through;
}
.pw-key:focus-visible,
.pw button:focus-visible {
  outline: var(--dm-focus-width) solid var(--dm-focus);
  outline-offset: var(--dm-focus-offset);
}
.pw-key:focus-visible {
  --edge: var(--dm-focus);
}

/* ---- the dialogs ---- */
.pw-dialog {
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  width: 100%;
  --dm-edge: var(--dm-gold);
  --dm-edge-w: 2px;
  --dm-fill: var(--dm-surface-raised);
  padding: var(--dm-space-5);
  color: var(--dm-text);
}
.pw-dialog::backdrop {
  background: color-mix(in srgb, var(--dm-bar) 72%, transparent);
}
.pw-dialog h2 {
  margin-top: 0;
}
.pw-dialog h3 {
  margin: var(--dm-space-4) 0 var(--dm-space-2);
  font-size: 1.05rem;
}
.pw-helplist {
  padding-left: 1.2rem;
}
.pw-helplist li {
  margin-bottom: var(--dm-space-2);
}
.pw-legend {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.96rem;
  margin-right: 0.5rem;
  vertical-align: middle;
  clip-path: var(--dm-hex-clip-pointy);
  color: var(--dm-on-mark-correct);
  font-weight: var(--dm-weight-strong);
  line-height: 1;
}
.pw-legend.correct {
  background: var(--dm-mark-correct);
  color: var(--dm-on-mark-correct);
}
.pw-legend.present {
  background:
    repeating-linear-gradient(135deg, transparent 0 5px, rgba(0, 0, 0, 0.13) 5px 7px),
    var(--dm-mark-present);
  color: var(--dm-on-mark-present);
}
.pw-legend.absent {
  background: var(--dm-mark-absent);
  color: var(--dm-on-mark-absent);
}
.pw-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dm-space-2);
  text-align: center;
}
.pw-stat strong {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 4.16rem;
  margin: 0 auto var(--dm-space-1);
  clip-path: var(--dm-hex-clip-pointy);
  background: var(--dm-bar);
  color: var(--dm-on-bar);
  font-size: 1.5rem;
  line-height: 1;
}
.pw-stat span {
  font-size: 0.8rem;
  color: var(--dm-text-muted);
}
.pw-distribution {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--dm-space-3);
}
.pw-bar-row {
  display: flex;
  gap: var(--dm-space-2);
  align-items: center;
  margin: 4px 0;
}
.pw-bar-label {
  width: 1.5rem;
  text-align: right;
  color: var(--dm-text-muted);
}
.pw-bar {
  display: block;
  box-sizing: border-box;
  background: var(--dm-mark-correct);
  color: var(--dm-on-mark-correct);
  padding: 0 0.5rem;
  text-align: right;
  font-weight: var(--dm-weight-strong);
  min-height: 1.4rem;
}
.pw-countdown {
  font-variant-numeric: tabular-nums;
  color: var(--dm-heading);
}
.pw-sharetext {
  width: 100%;
  min-height: 7rem;
  box-sizing: border-box;
  font: inherit;
  color: var(--dm-text);
  background: var(--dm-surface);
  border: 1px solid var(--dm-border-strong);
}
.pw-resultbox {
  text-align: center;
}
.pw-resultbox h3 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--dm-heading);
}
.pw-answer {
  margin: var(--dm-space-1) 0;
}

/* ---- phones ---- */
@media (max-width: 480px) {
  .pw-panel {
    padding: var(--dm-space-2);
  }
  .pw-dialog {
    padding: var(--dm-space-4);
  }
  .pw-stats {
    gap: var(--dm-space-1);
  }
  .pw-stat strong {
    width: 3.1rem;
    height: 3.58rem;
    font-size: 1.25rem;
  }
}

/* ---- motion: a small pop when a mark appears, nothing for people who asked for less ---- */
@media (prefers-reduced-motion: no-preference) {
  .pw-tile.correct,
  .pw-tile.present,
  .pw-tile.absent {
    animation: pw-pop 0.28s ease-out;
  }
  .pw-tile.current {
    animation: pw-pulse 1.6s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pw-key {
    transition: none;
  }
  .pw-key:active {
    transform: none;
  }
}
@keyframes pw-pop {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes pw-pulse {
  50% {
    transform: scale(1.04);
  }
}