:root {
  --wurdle-ink: #191a2b;
  --wurdle-muted: #6b6c7d;
  --wurdle-brand: #17182b;
  --wurdle-primary: #5b50e6;
  --wurdle-primary-dark: #473dc5;
  --wurdle-paper: #f6f6fb;
  --wurdle-line: #e3e2ed;
  --wurdle-green: #238760;
  --wurdle-amber: #d39b2a;
}

body.wurdle-body {
  min-height: 100vh;
  color: var(--wurdle-ink);
  background: var(--wurdle-paper);
  -webkit-font-smoothing: antialiased;
}

.wurdle-page {
  flex: 1 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 13%, rgba(91, 80, 230, .055), transparent 24rem),
    radial-gradient(circle at 89% 81%, rgba(172, 83, 229, .045), transparent 22rem),
    var(--wurdle-paper);
}

.wurdle-shell {
  width: min(920px, calc(100% - 48px));
  margin: 0 auto;
}

.wurdle-game-section { padding: 26px 0 58px; }

.wurdle-game-panel {
  overflow: hidden;
  border: 1px solid rgba(48, 44, 91, .09);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(41, 36, 93, .075), 0 2px 7px rgba(31, 28, 69, .035);
}

.wurdle-toolbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 13px 16px 13px 18px;
  border-bottom: 1px solid var(--wurdle-line);
}

.wurdle-title-lockup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.wurdle-title-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #8275ff, #5e52d4);
  box-shadow: 0 9px 20px rgba(24, 23, 50, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  font-size: .92rem;
  font-weight: 850;
}

.wurdle-kicker {
  margin: 0 0 2px;
  color: var(--wurdle-primary-dark);
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.wurdle-title-lockup h1 {
  margin: 0;
  color: var(--wurdle-ink);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}

.wurdle-scoreboard {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 7px;
}

.wurdle-stat {
  min-width: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #e6e5ef;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfbfd, #f4f3f9);
}

.wurdle-stat span {
  color: #838495;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .085em;
  line-height: 1;
  text-transform: uppercase;
}

.wurdle-stat strong {
  color: var(--wurdle-ink);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
  line-height: 1.1;
}

.wurdle-stat-time {
  min-width: 68px;
  border-color: #dedaf9;
  background: linear-gradient(180deg, #f7f5ff, #efedfc);
}

.wurdle-stat-time strong { color: var(--wurdle-primary-dark); }

.wurdle-icon-button {
  width: 42px;
  min-width: 42px;
  display: grid;
  place-items: center;
  color: var(--wurdle-primary-dark);
  border: 1px solid #dedaf9;
  border-radius: 10px;
  background: #f1effd;
  font-size: 1rem;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.wurdle-icon-button:hover,
.wurdle-icon-button:focus-visible {
  color: #fff;
  border-color: var(--wurdle-primary-dark);
  background: var(--wurdle-primary-dark);
  transform: translateY(-1px);
}

.wurdle-icon-button:focus-visible,
.wurdle-play-again:focus-visible,
.wurdle-friend-link:focus-visible,
.wurdle-body .keyboard__row > *:focus-visible {
  outline: 3px solid rgba(91, 80, 230, .28);
  outline-offset: 3px;
}

.wurdle-play-area {
  min-height: 610px;
  padding: 24px clamp(16px, 4vw, 38px) 22px;
  background: #fff;
}

.wurdle-body #game {
  --wurdle-word-length: 5;
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0 auto 15px;
}

.wurdle-body #game .word {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 0;
}

.wurdle-body #game .letter {
  width: min(3.35rem, calc((100vw - 72px) / var(--wurdle-word-length)));
  height: min(3.35rem, calc((100vw - 72px) / var(--wurdle-word-length)));
  max-width: 3.35rem;
  flex: 0 0 auto;
  margin: 0;
  color: var(--wurdle-ink);
  border: 2px solid #d8d7e2;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(25, 26, 43, .025);
  font-family: inherit;
  font-size: clamp(1rem, 4vw, 1.38rem);
  font-weight: 840;
  line-height: 1;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.wurdle-body #game .letter.is-filled {
  border-color: #8177c8;
  box-shadow: 0 0 0 3px rgba(91, 80, 230, .07);
  animation: wurdle-pop 110ms ease-out;
}

.wurdle-body #game .letter:enabled {
  cursor: pointer;
  touch-action: manipulation;
}

.wurdle-body #game .letter:focus-visible { outline: 3px solid #8177c8; outline-offset: 2px; }

.wurdle-body #game .letterCorrect,
.wurdle-body #game .letterWrongSpot,
.wurdle-body #game .letterWrong { animation: wurdle-reveal 380ms ease both; }

.wurdle-body #game .word .letter:nth-child(2) { animation-delay: 40ms; }
.wurdle-body #game .word .letter:nth-child(3) { animation-delay: 80ms; }
.wurdle-body #game .word .letter:nth-child(4) { animation-delay: 120ms; }
.wurdle-body #game .word .letter:nth-child(5) { animation-delay: 160ms; }
.wurdle-body #game .word .letter:nth-child(n + 6) { animation-delay: 200ms; }

.wurdle-body .alerts { min-height: 0; margin: 0 auto; }

.wurdle-body .alert {
  min-width: 0;
  width: min(100%, 620px);
  max-width: 620px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 13px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 680;
  line-height: 1.3;
}

.wurdle-body .alert-success { color: #176644; background: #eaf7f1; }
.wurdle-body .alert-danger { color: #9b3542; background: #fceff1; }
.wurdle-body .alert button.btn-close { padding: 12px; font-size: .7rem; }

.wurdle-actions { display: flex; justify-content: center; }

.wurdle-play-again {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 15px;
  padding: 0 18px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(110deg, var(--wurdle-primary), #7164ee);
  box-shadow: 0 9px 20px rgba(67, 55, 191, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: .78rem;
  font-weight: 780;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.wurdle-play-again:hover { transform: translateY(-2px); box-shadow: 0 13px 25px rgba(67, 55, 191, .3); }

.wurdle-body #tinyGrids {
  max-width: 620px;
  gap: 10px;
  margin: 0 auto 13px;
}

.wurdle-body #tinyGrids:empty { display: none; }

.wurdle-body #tinyGrids .tiny-grid {
  min-width: 70px;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--wurdle-line);
  border-radius: 10px;
  background: #fafafe;
}

.wurdle-body #keyboard { margin-top: 3px; }

.wurdle-body .keyboard {
  width: min(100%, 620px);
  font-family: inherit;
  font-size: 13px;
}

.wurdle-body .keyboard__row {
  height: 50px;
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 7px auto;
}

.wurdle-body .keyboard__row > * {
  width: auto;
  min-width: 0;
  height: 100%;
  display: grid;
  flex: 1 1 0;
  float: none;
  place-items: center;
  margin: 0;
  padding: 0 5px;
  color: #f7f7fb;
  border: 1px solid rgba(255, 255, 255, .03);
  border-radius: 8px;
  background: #292a43;
  box-shadow: 0 3px 0 #17182b;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.wurdle-body .keyboard__row > .key--word { flex: 1.45 1 0; }

.wurdle-body .keyboard__row > button[data-pressed],
.wurdle-body .keyboard__row > button:active {
  top: 2px;
  color: #fff;
  background: #202138;
  box-shadow: 0 1px 0 #11121f;
  transform: translateY(1px);
}

.wurdle-body .key--letter { line-height: 1; }

.wurdle-body .key--word > * {
  position: static;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.wurdle-game-footer {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 18px;
  color: var(--wurdle-muted);
  border-top: 1px solid var(--wurdle-line);
  background: #fdfdfE;
  font-size: .72rem;
  font-weight: 620;
}

.wurdle-game-footer > span,
.wurdle-friend-link { display: inline-flex; align-items: center; gap: 8px; }
.wurdle-game-footer > span .bi { color: var(--wurdle-primary-dark); }

.wurdle-friend-link {
  flex: 0 0 auto;
  color: var(--wurdle-primary-dark);
  font-weight: 780;
  text-decoration: none;
}

.wurdle-friend-link:hover { color: #342aab; text-decoration: underline; text-underline-offset: 4px; }

.wurdle-body .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(23, 24, 43, .22);
}

.wurdle-body .modal-header { padding: 18px 20px; border-bottom-color: var(--wurdle-line); }
.wurdle-body .modal-title { color: var(--wurdle-ink); font-weight: 800; letter-spacing: -.025em; }
.wurdle-body .modal-body { padding: 20px; color: var(--wurdle-muted); font-size: .85rem; line-height: 1.55; }
.wurdle-body .modal-footer { padding: 14px 20px; border-top-color: var(--wurdle-line); }
.wurdle-body .modal-footer .btn-primary { border-color: var(--wurdle-primary); background: var(--wurdle-primary); }
.wurdle-modal-lead { color: var(--wurdle-ink); font-size: 1rem; font-weight: 750; }

.wurdle-example {
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid var(--wurdle-line);
}

.wurdle-example strong { color: var(--wurdle-ink); font-size: .78rem; }
.wurdle-example p { margin: 7px 0 0; font-size: .75rem; }

.wurdle-example-row {
  display: flex;
  gap: 5px;
  height: 38px;
  margin-top: 9px;
}

.wurdle-example-row .instruction-letter {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--wurdle-ink);
  border: 2px solid #d8d7e2;
  border-radius: 7px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 820;
}

.wurdle-example-row .is-correct { color: #fff; border-color: var(--wurdle-green); background: var(--wurdle-green); }
.wurdle-example-row .is-present { color: #fff; border-color: var(--wurdle-amber); background: var(--wurdle-amber); }
.wurdle-example-row .is-absent { color: #fff; border-color: #6c6e7c; background: #6c6e7c; }

.wurdle-setting,
.wurdle-toggle { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--wurdle-line); }
.wurdle-setting:first-child { padding-top: 0; }
.wurdle-setting .form-range { grid-column: 1 / -1; margin-top: 7px; }
.setting-copy label { margin: 0; color: var(--wurdle-ink); font-weight: 750; }
.setting-copy p { margin: 2px 0 0; color: var(--wurdle-muted); font-size: .72rem; }
.setting-value { min-width: 34px; align-self: center; padding: 5px 8px; color: var(--wurdle-primary-dark); border-radius: 8px; background: #f1effd; font-weight: 820; text-align: center; }
.wurdle-toggle { align-items: center; }
.wurdle-toggle .form-switch { margin: 0; padding-left: 2.5em; }
.wurdle-toggle .form-check-input { cursor: pointer; }
.wurdle-toggle .form-check-input:checked { border-color: var(--wurdle-primary); background-color: var(--wurdle-primary); }
.wurdle-body #timerModeSelect { margin-top: 14px; }

@keyframes wurdle-pop {
  50% { transform: scale(1.055); }
}

@keyframes wurdle-reveal {
  0% { transform: rotateX(0); }
  48% { transform: rotateX(88deg); }
  100% { transform: rotateX(0); }
}

@media (max-width: 820px) {
  .wurdle-shell { width: min(100% - 36px, 680px); }
  .wurdle-game-section { padding-top: 15px; }
  .wurdle-game-panel { border-radius: 17px; }
  .wurdle-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .wurdle-scoreboard { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; }
  .wurdle-stat, .wurdle-icon-button { flex: 0 0 auto; }
  .wurdle-play-area { min-height: 0; }
}

@media (max-width: 560px) {
  .wurdle-shell { width: calc(100% - 20px); }
  .wurdle-game-section { padding-bottom: 32px; }
  .wurdle-toolbar { padding: 12px; }
  .wurdle-title-icon { width: 38px; height: 38px; }
  .wurdle-scoreboard { gap: 5px; scrollbar-width: none; }
  .wurdle-scoreboard::-webkit-scrollbar { display: none; }
  .wurdle-stat { min-width: 52px; padding: 6px 8px; }
  .wurdle-stat-time { min-width: 63px; }
  .wurdle-icon-button { width: 44px; min-width: 44px; min-height: 44px; }
  .wurdle-play-area { padding: 16px 10px 18px; }
  .wurdle-body #game { gap: 5px; }
  .wurdle-body #game .word { gap: 5px; }
  .wurdle-body #game .letter {
    width: min(3.1rem, calc((100vw - 50px) / var(--wurdle-word-length)));
    height: min(3.1rem, calc((100vw - 50px) / var(--wurdle-word-length)));
    border-radius: 8px;
  }
  .wurdle-body #keyboard { margin-inline: -6px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .wurdle-body .keyboard__row { gap: 3px; margin-block: 7px; height: 52px; }
  .wurdle-body .keyboard__row > * { padding: 0 2px; border-radius: 6px; }
  .wurdle-game-footer { padding: 11px 12px; }
  .wurdle-game-footer > span { display: none; }
  .wurdle-friend-link { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wurdle-icon-button,
  .wurdle-play-again,
  .wurdle-body #game .letter,
  .wurdle-body .keyboard__row > * { transition: none; }
  .wurdle-body #game .letter,
  .wurdle-body #game .letter.is-filled { animation: none; }
}