.gwm-anagram {
  --ag-ink: #172b3a;
  --ag-muted: #52636e;
  --ag-teal: #087e79;
  --ag-line: #e6e2d8;
  box-sizing: border-box;
  width: 100%;
  margin: 26px 0;
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid var(--ag-line);
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 14px 40px rgba(23, 43, 58, .06);
  color: var(--ag-ink);
}
.gwm-anagram * { box-sizing: border-box; }
.gwm-anagram [hidden] { display: none !important; }
.gwm-anagram__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gwm-anagram__date { color: var(--ag-muted); font-size: .9rem; font-weight: 650; }
.gwm-anagram__badge { padding: 5px 12px; border-radius: 999px; background: #eaf4d7; font-size: .85rem; font-weight: 750; }
.gwm-anagram__prompt { margin: 20px 0 18px; font-size: 1.2rem; font-weight: 750; }
.gwm-anagram__letters { display: flex; flex-wrap: wrap; gap: clamp(6px, 1.5vw, 10px); margin: 0 0 14px; }
.gwm-anagram__letter { display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 7vw, 60px); height: clamp(48px, 8vw, 68px); border: 1px solid #c6d9e4; border-bottom-width: 4px; border-radius: 12px; background: #e6effb; font-size: clamp(1.2rem, 3.5vw, 1.7rem); font-weight: 850; line-height: 1; }
.gwm-anagram__category { margin: 0 0 22px; color: var(--ag-muted); font-size: .92rem; }
.gwm-anagram label { display: block; margin-bottom: 8px; font-weight: 750; }
.gwm-anagram input[type="text"] { display: block; width: 100%; min-width: 0; min-height: 52px; padding: 12px 15px; border: 2px solid #b8c5ca; border-radius: 12px; color: var(--ag-ink); background: #fff; font: inherit; font-size: 1.125rem; text-transform: uppercase; }
.gwm-anagram input[aria-invalid="true"] { border-color: #ab392b; }
.gwm-anagram__help { margin: 8px 0 18px; color: var(--ag-muted); font-size: .86rem; }
.gwm-anagram__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gwm-anagram button { min-height: 46px; max-width: 100%; padding: 10px 16px; border: 1px solid #c5d1ce; border-radius: 999px; background: #fff; color: var(--ag-ink); font: inherit; font-size: .95rem; font-weight: 750; line-height: 1.35; cursor: pointer; }
.gwm-anagram button[type="submit"] { border-color: var(--ag-teal); background: var(--ag-teal); color: #fff; }
.gwm-anagram button:hover:not(:disabled) { border-color: #056762; background: #eef5df; }
.gwm-anagram button[type="submit"]:hover:not(:disabled) { background: #056762; color: #fff; }
.gwm-anagram button:disabled { opacity: .6; cursor: default; }
.gwm-anagram input:disabled { background: #f1f5ee; }
.gwm-anagram :focus-visible { outline: 3px solid #ef7355; outline-offset: 3px; }
.gwm-anagram__feedback { min-height: 1.7em; margin: 22px 0 0; color: var(--ag-muted); overflow-wrap: anywhere; }
.gwm-anagram__feedback[data-status="error"] { color: #9a3022; }
.gwm-anagram__feedback[data-status="success"] { padding: 13px 16px; border-radius: 12px; background: #edf5da; color: #26450c; font-weight: 700; }
.gwm-anagram__hint { margin: 14px 0 0; padding: 14px 16px; border-left: 4px solid var(--ag-teal); border-radius: 0 10px 10px 0; background: #f1f5e8; }
.gwm-anagram__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.gwm-anagram__bottom p { margin: 0; color: var(--ag-muted); font-size: .86rem; }
.gwm-anagram .gwm-anagram__reveal { min-height: 44px; padding-inline: 4px; border: 0; border-radius: 6px; background: transparent; color: #056762; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.gwm-anagram__tomorrow { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ag-line); color: var(--ag-muted); font-size: .82rem; }
@media (max-width: 400px) {
  .gwm-anagram { border-radius: 18px; }
  .gwm-anagram__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gwm-anagram__actions [data-shuffle-button] { grid-column: 1 / -1; }
  .gwm-anagram__actions button { padding-inline: 10px; }
}